From 5eb16ec8c9cfac1fc36b530eb2baa43c6cded775 Mon Sep 17 00:00:00 2001 From: AnuragJangid18 Date: Thu, 8 Oct 2026 04:15:17 +0530 Subject: [PATCH] Update README with pricing plans and enhance WhatsApp ordering functionality --- README.md | 38 +++++++++++++++++++++++++++++++++----- pricing.html | 2 +- pricing.js | 11 +++++++---- 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 542e02d..5b86015 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/pricing.html b/pricing.html index cc6b841..66aef2e 100644 --- a/pricing.html +++ b/pricing.html @@ -61,7 +61,7 @@ - + diff --git a/pricing.js b/pricing.js index 56c519d..52b1286 100644 --- a/pricing.js +++ b/pricing.js @@ -21,6 +21,8 @@ const pricing = { }, }; +const WHATSAPP_NUMBER = "919453226814"; + const options = [ { label: "Breakfast, lunch & dinner", detail: "3 meals a day" }, { label: "Lunch & dinner", detail: "2 meals a day" }, @@ -50,13 +52,14 @@ document.querySelector("#pricing-options").innerHTML = options document.querySelector("#customize-form").addEventListener("submit", (event) => { event.preventDefault(); const form = new FormData(event.currentTarget); - const subject = `${selected.name} mode — customized tiffin`; - const body = [ + const message = [ + "Hi The Tiffin Food! I would like to customize my tiffin.", + "", `Plan: ${selected.name} mode`, `Destination: ${form.get("destination")}`, `Preferred delivery window: ${form.get("timing")}`, `Meal preferences: ${form.get("preferences") || "None specified"}`, ].join("\n"); - window.location.href = `mailto:hello@thetiffinfood.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; - document.querySelector(".form-note").textContent = "Opening your email app with your tiffin preferences."; + document.querySelector(".form-note").textContent = "Opening WhatsApp with your tiffin preferences."; + window.location.href = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`; });