Update README with pricing plans and enhance WhatsApp ordering functionality

This commit is contained in:
Anurag Jangid 2026-10-08 04:15:17 +05:30
parent b985e6f470
commit 5eb16ec8c9
3 changed files with 41 additions and 10 deletions

View file

@ -1,14 +1,25 @@
# The Tiffin Food
Hyper-futuristic landing page for a goal-oriented food and tiffin service.
Hyper-futuristic landing page and ordering flow for a goal-oriented tiffin service.
The Tiffin Food helps people choose meals based on the body and lifestyle they are working toward:
The Tiffin Food helps people choose meals based on the body and lifestyle they are working toward, then customize delivery around their office or college schedule:
- **Lean mode** — minimal-fat meals for a lighter, sharper routine
- **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
## Pricing
Each mode has three monthly meal-frequency plans:
| Mode | Breakfast, lunch & dinner | Lunch & dinner | Dinner |
| --- | ---: | ---: | ---: |
| Balanced | ₹5,000 | ₹4,000 | ₹2,000 |
| Bulk | ₹6,000 | ₹5,000 | ₹2,500 |
| Protein | ₹6,500 | ₹5,500 | ₹3,000 |
| Lean | ₹7,000 | ₹6,000 | ₹3,500 |
## Experience
The page combines a dark editorial interface with neon lime accents, orbital motion-inspired graphics, and hyper-realistic food photography. It includes:
@ -16,11 +27,15 @@ 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
- Highlighted “Not home at lunchtime?” positioning explaining how customers can receive a tiffin before leaving, pack it, and take it to work or college
- Four interactive meal goal cards that open a mode-specific pricing page
- Monthly pricing for breakfast/lunch/dinner, lunch/dinner, and dinner plans
- Tiffin customization for office or college delivery
- Delivery windows for morning, afternoon, evening, or custom timing
- Meal preference capture, including dietary and ingredient requests
- WhatsApp Business redirect with a pre-filled customization message
- Hover and keyboard focus states for meal cards
- 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
## Project structure
@ -38,7 +53,7 @@ The page combines a dark editorial interface with neon lime accents, orbital mot
## Run locally
This is a dependency-free static page. Open `index.html` directly in a browser, or serve the folder with any local web server:
This is a dependency-free static site. Open `index.html` directly in a browser, or serve the folder with any local web server:
```bash
python -m http.server 8000
@ -55,7 +70,20 @@ Meal photography is loaded from Unsplash using optimized image URLs. An internet
- Update meal copy and labels in `index.html`.
- Adjust colors and responsive breakpoints in `styles.css`.
- Change the image URLs in the `.food-orb` elements to use different meals.
- Update the destination email address in the final CTA.
- Update plan names, descriptions, and prices in `pricing.js`.
- Update delivery destinations, timing windows, and preference fields in `pricing.html`.
- Update the WhatsApp Business recipient in `pricing.js` by changing `WHATSAPP_NUMBER`. Use the full international number without `+`, spaces, or dashes.
## WhatsApp ordering
Submitting the customization form opens WhatsApp with a message containing:
- Selected meal mode
- Destination (office or college)
- Preferred delivery window
- Meal preferences
The customer reviews the pre-filled message and sends it from WhatsApp. The current recipient is configured as `919453226814`.
## Brand direction