Update README with pricing plans and enhance WhatsApp ordering functionality

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
 

pricing.html

@@ -61,7 +61,7 @@
       </section>
     </main>
 
-    <footer><a class="brand" href="index.html"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2024 The Tiffin Food / Made for your next.</p></footer>
+    <footer><a class="brand" href="index.html"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2023 The Tiffin Food / Made for your next.</p></footer>
     <script src="pricing.js"></script>
   </body>
 </html>

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)}`;
 });