urmi-ai/TheTiffinFood

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

.
├── 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:

python -m http.server 8000

Then visit 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.