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