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:
Anurag Jangid 2026-10-08 03:41:40 +05:30
parent 3f6d7bd638
commit 6c756ac7ba
6 changed files with 130 additions and 20 deletions

View file

@ -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
```