Add pricing page and update meal card interactions
- Introduced a new pricing page with mode-specific pricing options. - Updated meal card data attributes and descriptions for clarity. - Enhanced meal card interactions to navigate to the pricing page. - Removed toast notifications for a cleaner user experience. - Added pricing styles for better layout and responsiveness.
This commit is contained in:
parent
3f6d7bd638
commit
6c756ac7ba
6 changed files with 130 additions and 20 deletions
12
README.md
12
README.md
|
|
@ -5,7 +5,7 @@ Hyper-futuristic landing page for a goal-oriented food and tiffin service.
|
|||
The Tiffin Food helps people choose meals based on the body and lifestyle they are working toward:
|
||||
|
||||
- **Lean mode** — minimal-fat meals for a lighter, sharper routine
|
||||
- **Muscle mode** — protein-focused meals to support strength and training
|
||||
- **Protein mode** — protein-focused meals to support strength and training
|
||||
- **Bulk mode** — carbohydrate and protein-focused meals for intentional gains
|
||||
- **Balanced mode** — a balanced mix of nutrients for sustainable everyday eating
|
||||
|
||||
|
|
@ -16,9 +16,10 @@ The page combines a dark editorial interface with neon lime accents, orbital mot
|
|||
- Hero section with an orbital meal visual
|
||||
- Responsive navigation and calls to action
|
||||
- Animated principles marquee
|
||||
- Four interactive meal goal cards
|
||||
- Four interactive meal goal cards that open a mode-specific pricing page
|
||||
- Monthly pricing for breakfast/lunch/dinner, lunch/dinner, and dinner plans
|
||||
- Hover and keyboard focus states for meal cards
|
||||
- Accessible selection feedback through a live toast message
|
||||
- Accessible keyboard and click navigation from each meal goal card
|
||||
- “The Tiffin Protocol” section explaining the ordering flow
|
||||
- Responsive layouts for desktop, tablet, and mobile screens
|
||||
|
||||
|
|
@ -28,7 +29,10 @@ The page combines a dark editorial interface with neon lime accents, orbital mot
|
|||
.
|
||||
├── index.html # Page structure and content
|
||||
├── styles.css # Visual system, responsive layout, and image treatment
|
||||
├── script.js # Meal card interactions and toast feedback
|
||||
├── script.js # Meal card navigation
|
||||
├── pricing.html # Mode-specific pricing page
|
||||
├── pricing.css # Pricing page layout and responsive styles
|
||||
├── pricing.js # Pricing data and plan rendering
|
||||
└── README.md # Project documentation
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue