gifting pill boxes to image buttons.
This commit is contained in:
@@ -0,0 +1,373 @@
|
||||
[
|
||||
{
|
||||
"handle": "rakhi-bark-box-200gm",
|
||||
"title": "Rakhi Bark Box 200gm",
|
||||
"file": "whatsappimage2026-08-17at5-27-27pm.jpg",
|
||||
"price": "1600.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-chocolate-muesli-400gm",
|
||||
"title": "Mozimo Chocolate Muesli 400gm",
|
||||
"file": "gemini-generated-image-pifrnapifrnapifr-png.png",
|
||||
"price": "550.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-chocolate-muesli-200gm",
|
||||
"title": "Mozimo Chocolate Muesli 200gm",
|
||||
"file": "gemini-generated-image-w556wuw556wuw556-png.png",
|
||||
"price": "300.00"
|
||||
},
|
||||
{
|
||||
"handle": "matcha-hazelnut-dragees-100gm",
|
||||
"title": "Matcha Hazelnut Dragees 100gm",
|
||||
"file": "matchahazelnutdragees.jpg",
|
||||
"price": "550.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-matcha-bark",
|
||||
"title": "Mozimo Matcha Bark Box 200gm",
|
||||
"file": "gemini-generated-image-qxvzi8qxvzi8qxvz-picsart-aiimageenhancer-png.png",
|
||||
"price": "1600.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-matcha-collection-box",
|
||||
"title": "Mozimo Matcha Collection Box",
|
||||
"file": "mozi-30.jpg",
|
||||
"price": "3500.00"
|
||||
},
|
||||
{
|
||||
"handle": "matcha-strawberry-praline",
|
||||
"title": "Matcha Strawberry Praline (Box of 4)",
|
||||
"file": "irw05205.jpg",
|
||||
"price": "440.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-sugar-free-milk-45-chocolate-bar",
|
||||
"title": "Mozimo Sugar Free Milk 45% Chocolate Bar",
|
||||
"file": "03-dark45-60gm-5d3bbe14-30dc-4113-8d82-dfa3e9d1ef59.jpg",
|
||||
"price": "330.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-praline-box-of-36",
|
||||
"title": "Mozimo Praline (Box of 36)",
|
||||
"file": "mozi-17.jpg",
|
||||
"price": "3700.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-praline-box-of-25",
|
||||
"title": "Mozimo Praline (Box of 25)",
|
||||
"file": "mozi-25.jpg",
|
||||
"price": "2700.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-praline-panetela-1",
|
||||
"title": "Mozimo Praline Panetela (Box of 12)",
|
||||
"file": "14-mozimopralinepanetela-9c9a80d8-e4fc-4c4b-9c56-ca7f42b57847.jpg",
|
||||
"price": "1300.00"
|
||||
},
|
||||
{
|
||||
"handle": "1-kg-bark-box",
|
||||
"title": "1 kg Bark Box",
|
||||
"file": "mozi21.jpg",
|
||||
"price": "5700.00"
|
||||
},
|
||||
{
|
||||
"handle": "kunafa-chocolate-bar",
|
||||
"title": "Kunafa Chocolate Bar",
|
||||
"file": "mozi-23.jpg",
|
||||
"price": "1600.00"
|
||||
},
|
||||
{
|
||||
"handle": "200-gas-bark-box",
|
||||
"title": "200 gms Bark Box",
|
||||
"file": "mozi4.jpg",
|
||||
"price": "1200.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-celestial-l",
|
||||
"title": "Mozimo Celestial Hamper",
|
||||
"file": "mozi31.jpg",
|
||||
"price": "8500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-celestial-s",
|
||||
"title": "Mozimo Celestial (S)",
|
||||
"file": "mozi-33.jpg",
|
||||
"price": "4500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-carnival-celebration-l",
|
||||
"title": "Mozimo Carnival Celebration (L)",
|
||||
"file": "mozi18.jpg",
|
||||
"price": "3900.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-carnival-celebration-m",
|
||||
"title": "Mozimo Carnival Celebration (M)",
|
||||
"file": "mozi19.jpg",
|
||||
"price": "3000.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-carnival-celebration-s",
|
||||
"title": "Mozimo Carnival Celebration (S)",
|
||||
"file": "mozi20.jpg",
|
||||
"price": "2400.00"
|
||||
},
|
||||
{
|
||||
"handle": "spreads-box",
|
||||
"title": "Spreads Box",
|
||||
"file": "mozi16.jpg",
|
||||
"price": "1650.00"
|
||||
},
|
||||
{
|
||||
"handle": "bars-box",
|
||||
"title": "Bars Box",
|
||||
"file": "mozi14.jpg",
|
||||
"price": "1050.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-fruits-and-nuts-bark-60",
|
||||
"title": "Mozimo Fruits and Nuts Bark 60%",
|
||||
"file": "17-fruit-nutbark60.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-salted-butter-crunch-bark-45",
|
||||
"title": "Mozimo Salted Butter Crunch Bark 45%",
|
||||
"file": "03-almondsliversbark45.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "pistachio-spread-60",
|
||||
"title": "Pistachio Spread 60%",
|
||||
"file": "02-pistachiospread60.jpg",
|
||||
"price": "825.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-hazelnut-bark-sugar-free-45",
|
||||
"title": "Mozimo Hazelnut Bark Sugar Free 45%",
|
||||
"file": "09-wholehazelnutbark45-e3c5bdaf-ceec-49c5-ad2f-ce37d58c2939.jpg",
|
||||
"price": "550.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-sugar-free-dark-72-chocolate-bar",
|
||||
"title": "Mozimo Sugar Free Dark 72% Chocolate Bar",
|
||||
"file": "01-dark85-60gm-cf3054e9-fce6-4be3-aad2-106fa12cb63c.jpg",
|
||||
"price": "330.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-assorted-bark-box",
|
||||
"title": "Mozimo Assorted Bark Box",
|
||||
"file": "18-assortedbarkbox.jpg",
|
||||
"price": "1200.00"
|
||||
},
|
||||
{
|
||||
"handle": "9-pralines-box",
|
||||
"title": "9 Pralines Box",
|
||||
"file": "mozi-27.jpg",
|
||||
"price": "990.00"
|
||||
},
|
||||
{
|
||||
"handle": "4-pralines-box",
|
||||
"title": "4 Pralines Box",
|
||||
"file": "mozi-27.jpg"
|
||||
},
|
||||
{
|
||||
"handle": "cocoa-bean-shell",
|
||||
"title": "Cocoa Bean Shell",
|
||||
"file": "img-5438.jpg",
|
||||
"price": "220.00"
|
||||
},
|
||||
{
|
||||
"handle": "single-origin-coco-nibs",
|
||||
"title": "Single Origin Coco Nibs",
|
||||
"file": "img-5447.jpg",
|
||||
"price": "440.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-orangettes",
|
||||
"title": "Mozimo Orangettes",
|
||||
"file": "02-orangepeelchocolate-100gm.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-milk-chocolate-bar-45",
|
||||
"title": "Mozimo Milk Chocolate Bar 45%",
|
||||
"file": "03-dark45-60gm.jpg",
|
||||
"price": "265.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-dark-chocolate-bar-85",
|
||||
"title": "Mozimo Dark Chocolate Bar 85%",
|
||||
"file": "01-dark85-60gm.jpg",
|
||||
"price": "265.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-dark-chocolate-bar-60",
|
||||
"title": "Mozimo Dark Chocolate Bar 60%",
|
||||
"file": "02-dark60-60gm.jpg",
|
||||
"price": "265.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-almond-praline-bark",
|
||||
"title": "Mozimo Almond Praline Bark",
|
||||
"file": "20-almondpralinebark.jpg",
|
||||
"price": "1200.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-honey-comb",
|
||||
"title": "Mozimo Honey Comb",
|
||||
"file": "img-5534.jpg",
|
||||
"price": "400.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-praline-panetela",
|
||||
"title": "Mozimo Praline Panetela",
|
||||
"file": "panetela.jpg",
|
||||
"price": "1300.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-dark-chocolate-bar-72",
|
||||
"title": "Mozimo Dark Chocolate Bar 72%",
|
||||
"file": "01-dark85-60gm-2a27a54f-8427-4e19-a419-9f339b0d8b90.jpg",
|
||||
"price": "265.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-rice-crispy-bark",
|
||||
"title": "Mozimo Rice crispy Bark",
|
||||
"file": "08-ricecrispiesbark45.jpg",
|
||||
"price": "1200.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-pecan-bark",
|
||||
"title": "Mozimo Pecan Bark",
|
||||
"file": "07-pecanbark45.jpg",
|
||||
"price": "1200.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-hazelnut-praline-bark",
|
||||
"title": "Mozimo Hazelnut Praline Bark",
|
||||
"file": "img-5469.jpg",
|
||||
"price": "1200.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-milk-45-tuilles",
|
||||
"title": "Mozimo Milk 45% Tuilles",
|
||||
"file": "01-milk45-tuilles-100gm.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-white-chocolate-tuilles",
|
||||
"title": "Mozimo White Chocolate Tuilles",
|
||||
"file": "02-whitechocolatetuilles-100gm.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-almond-dragees-60",
|
||||
"title": "Mozimo Almond Dragees 60%",
|
||||
"file": "04-almonddragees60.jpg",
|
||||
"price": "900.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-hot-chocolate-premix",
|
||||
"title": "Mozimo Hot Chocolate Premix",
|
||||
"file": "img-5440.jpg",
|
||||
"price": "825.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-hazelnuts-spread",
|
||||
"title": "Mozimo Single Origin 45% Hazelnut Spread",
|
||||
"file": "03-hazelnutspread45.jpg",
|
||||
"price": "550.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-nutty-bar",
|
||||
"title": "Mozimo Nutty Bar",
|
||||
"file": "01-nuttybarmilk-100gm.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-raspberry-bark",
|
||||
"title": "Mozimo Raspberry Bark",
|
||||
"file": "11-raspberrybark60.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-almond-slivers-rocks",
|
||||
"title": "Mozimo Almond Slivers Rocks",
|
||||
"file": "01-almondsliversrocks-100gm.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-almond-dragees-45",
|
||||
"title": "Mozimo Almond Dragees 45%",
|
||||
"file": "01-almonddragees45-7be35dc1-c47c-43d8-a49e-0a90701cdfc3.jpg",
|
||||
"price": "900.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-almond-bark-45",
|
||||
"title": "Mozimo Almond Bark 45%",
|
||||
"file": "02-almondbark45.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-almond-bark-60",
|
||||
"title": "Mozimo Almond Bark 60%",
|
||||
"file": "01-almondbark60.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-crunchy-granola-bark-45",
|
||||
"title": "Mozimo Crunchy Granola Bark 45%",
|
||||
"file": "05-crunchygranloabark45.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-gems-bark",
|
||||
"title": "Mozimo Gems Bark",
|
||||
"file": "06-gemsbark45.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-hazelnut-dragees-45",
|
||||
"title": "Mozimo Hazelnut Dragees 45%",
|
||||
"file": "02-hazelnutdragees45.jpg",
|
||||
"price": "900.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-whole-hazelnuts-bark-45",
|
||||
"title": "Mozimo Whole Hazelnuts Bark 45%",
|
||||
"file": "09-wholehazelnutbark45.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-whole-hazelnuts-bark-60",
|
||||
"title": "Mozimo Whole Hazelnuts Bark 60%",
|
||||
"file": "10-wholehazelnutbark60.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-pistachio-dragees",
|
||||
"title": "Mozimo Pistachio Dragees",
|
||||
"file": "dragees-pistachio.jpg",
|
||||
"price": "900.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-hazelnut-dragees-60",
|
||||
"title": "Mozimo Hazelnut Dragees 60%",
|
||||
"file": "05-hazelnutdragees60.jpg",
|
||||
"price": "900.00"
|
||||
},
|
||||
{
|
||||
"handle": "mozimo-fruits-nuts-45",
|
||||
"title": "Mozimo Fruits & Nuts 45%",
|
||||
"file": "16-fruit-nutbark45-a9cc2ed1-209a-41ac-b9d3-3efedce9ebb2.jpg",
|
||||
"price": "500.00"
|
||||
},
|
||||
{
|
||||
"handle": "pistachio-dragees",
|
||||
"title": "Pistachio Dragees",
|
||||
"file": "03-pistachiodragees.jpg",
|
||||
"price": "900.00"
|
||||
}
|
||||
]
|
||||
@@ -5,8 +5,9 @@ import ProductCard from "@/components/ProductCard";
|
||||
import { giftingTabs, seasonal, type GiftingTab } from "@/data/catalog";
|
||||
|
||||
/**
|
||||
* "Who is it for?" — tabs ordered price-wise, from Signature (entry)
|
||||
* to Bespoke Gifting (made to order).
|
||||
* "Who is it for?" — rounded-square tiles ordered price-wise, from
|
||||
* Signature (entry) to Bespoke Gifting (made to order). Selecting a tile
|
||||
* swaps the panel below.
|
||||
*/
|
||||
|
||||
function TabCta({ tab }: { tab: GiftingTab }) {
|
||||
@@ -100,33 +101,51 @@ export default function GiftingTabs() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* tab bar */}
|
||||
<Reveal delay={0.05}>
|
||||
{/* tab tiles — rounded squares with a label, active ringed in orange */}
|
||||
<div
|
||||
role="tablist"
|
||||
aria-label="Gifts by price"
|
||||
className="no-scrollbar -mx-1 flex gap-2 overflow-x-auto px-1 pb-2"
|
||||
className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-7"
|
||||
>
|
||||
{giftingTabs.map((t, i) => (
|
||||
<Reveal key={t.id} delay={i * 0.05}>
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
role="tab"
|
||||
id={`gifting-tab-${t.id}`}
|
||||
aria-selected={active === i}
|
||||
aria-controls={`gifting-panel-${t.id}`}
|
||||
onClick={() => setActive(i)}
|
||||
className={`shrink-0 rounded-full border px-5 py-2.5 text-[0.8rem] tracking-wide transition-all duration-400 ${
|
||||
className="card-zoom group block w-full text-center"
|
||||
>
|
||||
<img
|
||||
src={t.image}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
width={320}
|
||||
height={400}
|
||||
className={`aspect-[4/5] w-full rounded-2xl object-cover transition-all duration-500 ${
|
||||
active === i
|
||||
? "border-bean-900 bg-bean-900 text-ivory-50"
|
||||
: "border-ink-900/15 text-ink-700 hover:border-orange-500 hover:bg-orange-500 hover:text-ivory-50"
|
||||
? "ring-2 ring-orange-500 ring-offset-4 ring-offset-ivory-50"
|
||||
: "ring-1 ring-ink-900/10 group-hover:ring-orange-500/40"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`mt-4 block text-[0.9rem] font-medium tracking-wide transition-colors ${
|
||||
active === i
|
||||
? "text-orange-600"
|
||||
: "text-ink-900 group-hover:text-orange-500"
|
||||
}`}
|
||||
>
|
||||
{t.name}
|
||||
</span>
|
||||
<span className="mt-1 block text-[0.68rem] uppercase tracking-[0.18em] text-ink-500">
|
||||
{t.note}
|
||||
</span>
|
||||
</button>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{/* active tab panel */}
|
||||
<div
|
||||
|
||||
@@ -217,6 +217,8 @@ export const giftingCategories = [
|
||||
export type GiftingTab = {
|
||||
id: string;
|
||||
name: string;
|
||||
/** tile photo for the tab button */
|
||||
image: string;
|
||||
/** price positioning line, shown above the tab's title */
|
||||
note: string;
|
||||
title: string;
|
||||
@@ -230,6 +232,7 @@ export const giftingTabs: GiftingTab[] = [
|
||||
{
|
||||
id: "signature",
|
||||
name: "Signature",
|
||||
image: "/products/mozi14.jpg",
|
||||
note: "From ₹265",
|
||||
title: "Small gestures, remembered.",
|
||||
blurb: "Thoughtful everyday gifting — a bar, a little box, a note of chocolate that says enough.",
|
||||
@@ -244,6 +247,7 @@ export const giftingTabs: GiftingTab[] = [
|
||||
{
|
||||
id: "best-sellers",
|
||||
name: "Best Sellers",
|
||||
image: "/products/mozi16.jpg",
|
||||
note: "From ₹825",
|
||||
title: "The boxes they ask for by name.",
|
||||
blurb: "The spreads, dragees and bars our regulars return for — gifting that never misses.",
|
||||
@@ -259,6 +263,7 @@ export const giftingTabs: GiftingTab[] = [
|
||||
{
|
||||
id: "exquisite",
|
||||
name: "Exquisite",
|
||||
image: "/products/mozi20.jpg",
|
||||
note: "From ₹2,400",
|
||||
title: "Celebrations, elevated.",
|
||||
blurb: "The Carnival boxes — layered, abundant and composed for the moments in between.",
|
||||
@@ -272,6 +277,7 @@ export const giftingTabs: GiftingTab[] = [
|
||||
{
|
||||
id: "premium",
|
||||
name: "Premium",
|
||||
image: "/products/mozi-33.jpg",
|
||||
note: "From ₹3,900",
|
||||
title: "Generosity, composed.",
|
||||
blurb: "Our grandest hampers — the ones that arrive before you speak and say everything after.",
|
||||
@@ -285,6 +291,7 @@ export const giftingTabs: GiftingTab[] = [
|
||||
{
|
||||
id: "seasonal",
|
||||
name: "Seasonal",
|
||||
image: "/products/mozi-30.jpg",
|
||||
note: "Limited editions",
|
||||
title: "Chocolate for the calendar.",
|
||||
blurb: "Diwali to Valentine's — editions composed for the season's light, here only while it lasts.",
|
||||
@@ -294,6 +301,7 @@ export const giftingTabs: GiftingTab[] = [
|
||||
{
|
||||
id: "corporate",
|
||||
name: "Corporate & Bulk",
|
||||
image: "/products/mozi21.jpg",
|
||||
note: "At scale",
|
||||
title: "Gratitude at scale.",
|
||||
blurb: "Branded hampers, volume pricing and door-step delivery for teams, clients and occasions of every size.",
|
||||
@@ -303,6 +311,7 @@ export const giftingTabs: GiftingTab[] = [
|
||||
{
|
||||
id: "bespoke",
|
||||
name: "Bespoke Gifting",
|
||||
image: "/products/mozi-17.jpg",
|
||||
note: "Made to order",
|
||||
title: "Composed around your moment.",
|
||||
blurb: "Custom selections, packaging and personalisation — designed with our chocolatiers from the first conversation.",
|
||||
|
||||
Reference in New Issue
Block a user