gifting pill boxes to image buttons.

src/components/GiftingTabs.tsx

@@ -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}>
-        <div
-          role="tablist"
-          aria-label="Gifts by price"
-          className="no-scrollbar -mx-1 flex gap-2 overflow-x-auto px-1 pb-2"
-        >
-          {giftingTabs.map((t, i) => (
+      {/* tab tiles — rounded squares with a label, active ringed in orange */}
+      <div
+        role="tablist"
+        aria-label="Gifts by price"
+        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 ${
-                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"
-              }`}
+              className="card-zoom group block w-full text-center"
             >
-              {t.name}
+              <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
+                    ? "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>
-          ))}
-        </div>
-      </Reveal>
+          </Reveal>
+        ))}
+      </div>
 
       {/* active tab panel */}
       <div

src/data/catalog.ts

@@ -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.",