93 lines
No EOL
3.8 KiB
Markdown
93 lines
No EOL
3.8 KiB
Markdown
# The Tiffin Food
|
|
|
|
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, 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:
|
|
|
|
- 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
|
|
- Responsive layouts for desktop, tablet, and mobile screens
|
|
|
|
## Project structure
|
|
|
|
```text
|
|
.
|
|
├── index.html # Page structure and content
|
|
├── styles.css # Visual system, responsive layout, and image treatment
|
|
├── 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
|
|
```
|
|
|
|
## Run locally
|
|
|
|
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
|
|
```
|
|
|
|
Then visit [http://localhost:8000](http://localhost:8000).
|
|
|
|
## Image sources
|
|
|
|
Meal photography is loaded from Unsplash using optimized image URLs. An internet connection is required for the remote images to appear. The page still retains its layout and visual overlays if the images are unavailable.
|
|
|
|
## Customization
|
|
|
|
- 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 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
|
|
|
|
**Tone:** precise, energetic, modern, and intentional
|
|
**Primary accent:** neon lime
|
|
**Typography:** Space Grotesk for display text and DM Mono for labels and metadata
|
|
**Tagline:** *Eat with intent.* |