diff --git a/README.md b/README.md index e09d70a..542e02d 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Hyper-futuristic landing page for a goal-oriented food and tiffin service. The Tiffin Food helps people choose meals based on the body and lifestyle they are working toward: - **Lean mode** — minimal-fat meals for a lighter, sharper routine -- **Muscle mode** — protein-focused meals to support strength and training +- **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 @@ -16,9 +16,10 @@ 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 -- Four interactive meal goal cards +- Four interactive meal goal cards that open a mode-specific pricing page +- Monthly pricing for breakfast/lunch/dinner, lunch/dinner, and dinner plans - Hover and keyboard focus states for meal cards -- Accessible selection feedback through a live toast message +- 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 @@ -28,7 +29,10 @@ The page combines a dark editorial interface with neon lime accents, orbital mot . ├── index.html # Page structure and content ├── styles.css # Visual system, responsive layout, and image treatment -├── script.js # Meal card interactions and toast feedback +├── 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 ``` diff --git a/index.html b/index.html index 403e46d..a009ef4 100644 --- a/index.html +++ b/index.html @@ -62,22 +62,22 @@

Every body has a different brief. Pick the one that sounds like your next chapter.

-
+
01
Fresh salad bowl with vegetables and grainsLOW
FAT

The cut

Lean
mode

Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.

-
+
02
High protein chicken and vegetables mealHIGH
PROTEIN
-

The build

Muscle
mode

Pure protein power for the work you put in, from first rep to last.

+

The build

Protein
mode

Pure protein power for the work you put in, from first rep to last.

-
+
03
Colorful rice, vegetables and protein mealCARBS +
PROTEIN

The gain

Bulk
mode

Intentional calories, complex carbs and protein in a bigger, bolder box.

-
+
04
Balanced meal with vegetables, grains and proteinALL-ROUND
GOOD

The flow

Balanced
mode

A little bit of everything, dialed into a rhythm you can actually keep.

@@ -99,7 +99,6 @@ -
diff --git a/pricing.css b/pricing.css new file mode 100644 index 0000000..6cc9e6c --- /dev/null +++ b/pricing.css @@ -0,0 +1,17 @@ +.pricing-page{max-width:1180px;margin:0 auto;padding:54px 50px 120px} +.back-link{color:var(--muted);font:500 11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase} +.back-link:hover{color:var(--lime)} +.pricing-intro{padding:90px 0 70px;max-width:700px} +.pricing-intro h1{font-size:clamp(64px,10vw,140px);line-height:.88;letter-spacing:-.08em;margin:18px 0 28px} +.pricing-intro>p:last-child{color:var(--muted);font-size:18px;max-width:460px} +.pricing-grid h2{font:500 12px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:18px} +.pricing-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px} +.price-card{min-height:310px;border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .25s,transform .25s} +.price-card:hover{border-color:var(--lime);transform:translateY(-5px)} +.price-index{color:var(--lime);font:500 11px "DM Mono",monospace} +.price-card h3{font-size:25px;line-height:1.05;max-width:180px;margin:28px 0 8px} +.price-card p:last-child{color:var(--muted);font:12px "DM Mono",monospace} +.price-card strong{font-size:40px;letter-spacing:-.05em;margin:28px 0} +.price-card strong span{color:var(--muted);font:12px "DM Mono",monospace;letter-spacing:0;margin-left:8px} +.price-card .button{align-self:flex-start} +@media(max-width:760px){.pricing-page{padding:38px 20px 80px}.pricing-intro{padding:70px 0 52px}.pricing-options{grid-template-columns:1fr}.price-card{min-height:260px}} diff --git a/pricing.html b/pricing.html new file mode 100644 index 0000000..b48868f --- /dev/null +++ b/pricing.html @@ -0,0 +1,41 @@ + + + + + + + Choose your rhythm — The Tiffin Food + + + + + + + +
+
+ + + THE TIFFIN
FOOD + + Change your goal ↗ +
+ +
+ ← Back to directions +
+

05 / Set your frequency

+

Your
rhythm.

+

Fresh meals, prepared around the way you want to show up.

+
+ +
+

Choose your box

+
+
+
+ + + + + diff --git a/pricing.js b/pricing.js new file mode 100644 index 0000000..3d3628f --- /dev/null +++ b/pricing.js @@ -0,0 +1,48 @@ +const pricing = { + balanced: { + name: "Balanced", + description: "A little bit of everything, dialed into a rhythm you can actually keep.", + prices: [5000, 4000, 2000], + }, + bulk: { + name: "Bulk", + description: "Intentional calories, complex carbs and protein in a bigger, bolder box.", + prices: [6000, 5000, 2500], + }, + protein: { + name: "Protein", + description: "Pure protein power for the work you put in, from first rep to last.", + prices: [6500, 5500, 3000], + }, + lean: { + name: "Lean", + description: "Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.", + prices: [7000, 6000, 3500], + }, +}; + +const options = [ + { label: "Breakfast, lunch & dinner", detail: "3 meals a day" }, + { label: "Lunch & dinner", detail: "2 meals a day" }, + { label: "Dinner", detail: "1 meal a day" }, +]; + +const mode = new URLSearchParams(window.location.search).get("mode") || "balanced"; +const selected = pricing[mode] || pricing.balanced; + +document.title = `${selected.name} mode pricing — The Tiffin Food`; +document.querySelector("#mode-title").textContent = `${selected.name} mode`; +document.querySelector("#mode-description").textContent = selected.description; +document.querySelector("#pricing-options").innerHTML = options + .map((option, index) => ` +
+
+

0${index + 1}

+

${option.label}

+

${option.detail}

+
+ ₹${selected.prices[index].toLocaleString("en-IN")}/ month + Choose this box ↗ +
+ `) + .join(""); diff --git a/script.js b/script.js index 2bc4cf1..f4fea27 100644 --- a/script.js +++ b/script.js @@ -1,17 +1,18 @@ -const toast = document.querySelector(".toast"); -const showToast = (goal) => { - toast.textContent = `${goal} mode selected — your box is almost ready.`; - toast.classList.add("show"); - window.setTimeout(() => toast.classList.remove("show"), 3200); -}; - document.querySelectorAll(".meal-card").forEach((card) => { - const action = card.querySelector(".card-action"); - action.addEventListener("click", () => showToast(card.dataset.goal)); + const openPricing = () => { + window.location.href = `pricing.html?mode=${encodeURIComponent(card.dataset.mode)}`; + }; + + card.querySelector(".card-action").addEventListener("click", openPricing); + card.addEventListener("click", (event) => { + if (event.target.closest(".card-action")) return; + openPricing(); + }); + card.addEventListener("keydown", (event) => { if ((event.key === "Enter" || event.key === " ") && event.target === card) { event.preventDefault(); - showToast(card.dataset.goal); + openPricing(); } }); });