feat: add 5 new FoodShot hero concepts (11 total)

New concepts designed around the strongest food photos:
- The Spotlight: cinematic single-hero carousel with auto-advance
- Split Screen: diagonal before/after wall with parallax
- The Lens: magic magnifying glass revealing enhanced versions
- The Menu: restaurant menu layout with engagement stats
- The Stack: scroll-driven card deck dealing animation

Photo tier ranking: Culinary Dropout, CAPO PIZZA, Tokyo Hana
(top 3 featured prominently across all new concepts)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

src/app/demos/foodshot/page.tsx

@@ -37,6 +37,31 @@ const TheWall = dynamic(
   { ssr: false, loading: () => <SectionLoader label="The Wall" /> }
 );
 
+const TheSpotlight = dynamic(
+  () => import("@/components/foodshot/spotlight-carousel").then((m) => m.SpotlightCarousel),
+  { ssr: false, loading: () => <SectionLoader label="The Spotlight" /> }
+);
+
+const TheSplitScreen = dynamic(
+  () => import("@/components/foodshot/split-screen").then((m) => m.SplitScreen),
+  { ssr: false, loading: () => <SectionLoader label="Split Screen" /> }
+);
+
+const TheLens = dynamic(
+  () => import("@/components/foodshot/magic-lens").then((m) => m.MagicLens),
+  { ssr: false, loading: () => <SectionLoader label="The Lens" /> }
+);
+
+const TheMenu = dynamic(
+  () => import("@/components/foodshot/restaurant-menu").then((m) => m.RestaurantMenu),
+  { ssr: false, loading: () => <SectionLoader label="The Menu" /> }
+);
+
+const TheStack = dynamic(
+  () => import("@/components/foodshot/card-stack").then((m) => m.CardStack),
+  { ssr: false, loading: () => <SectionLoader label="The Stack" /> }
+);
+
 function SectionLoader({ label }: { label: string }) {
   return (
     <div className="w-full min-h-screen flex items-center justify-center bg-[#0a0a0a]">
@@ -55,6 +80,11 @@ const concepts = [
   { id: "the-process", label: "The Process", desc: "Scroll Pipeline" },
   { id: "the-pitch", label: "The Pitch", desc: "Homepage Hero" },
   { id: "the-wall", label: "The Wall", desc: "Portfolio Grid" },
+  { id: "the-spotlight", label: "The Spotlight", desc: "Cinematic Carousel" },
+  { id: "split-screen", label: "Split Screen", desc: "Before vs After" },
+  { id: "the-lens", label: "The Lens", desc: "Magic Reveal" },
+  { id: "the-menu", label: "The Menu", desc: "Restaurant Style" },
+  { id: "the-stack", label: "The Stack", desc: "Card Deck" },
 ];
 
 export default function FoodShotShowcase() {
@@ -70,12 +100,12 @@ export default function FoodShotShowcase() {
               FoodShot
             </GradientText>
           </Link>
-          <div className="hidden md:flex items-center gap-1.5">
+          <div className="hidden lg:flex items-center gap-1">
             {concepts.map((c) => (
               <a
                 key={c.id}
                 href={`#${c.id}`}
-                className="px-3 py-1.5 text-[10px] font-medium rounded-full border border-zinc-800 text-zinc-500 hover:text-amber-400 hover:border-amber-500/30 transition-colors"
+                className="px-2.5 py-1.5 text-[9px] font-medium rounded-full border border-zinc-800 text-zinc-500 hover:text-amber-400 hover:border-amber-500/30 transition-colors"
               >
                 {c.label}
               </a>
@@ -101,7 +131,7 @@ export default function FoodShotShowcase() {
           className="relative z-10 text-center max-w-3xl"
         >
           <span className="inline-block px-4 py-1.5 text-xs font-mono uppercase tracking-wider rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 mb-8">
-            6 Hero Concepts for FoodShot
+            11 Hero Concepts for FoodShot
           </span>
           <h1 className="text-5xl md:text-8xl font-bold mb-6 leading-[1.05] tracking-tight">
             <span className="bg-gradient-to-r from-amber-400 via-orange-400 to-red-400 bg-clip-text text-transparent">
@@ -113,19 +143,19 @@ export default function FoodShotShowcase() {
             </span>
           </h1>
           <p className="text-zinc-500 text-lg max-w-xl mx-auto mb-10">
-            6 distinct visual experiences, each selling FoodShot from a unique angle.
+            11 distinct visual experiences, each selling FoodShot from a unique angle.
             Real restaurant photos. No stock imagery.
           </p>
 
           {/* Concept pills */}
-          <div className="flex flex-wrap justify-center gap-2 max-w-xl mx-auto">
+          <div className="flex flex-wrap justify-center gap-2 max-w-2xl mx-auto">
             {concepts.map((c, i) => (
               <motion.a
                 key={c.id}
                 href={`#${c.id}`}
                 initial={{ opacity: 0, y: 8 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.4 + i * 0.08 }}
+                transition={{ delay: 0.4 + i * 0.06 }}
                 className="px-4 py-2.5 rounded-xl bg-zinc-900 border border-zinc-800 hover:border-amber-500/30 transition-colors group"
               >
                 <span className="text-white text-sm font-medium">{c.label}</span>
@@ -146,8 +176,9 @@ export default function FoodShotShowcase() {
         </motion.div>
       </section>
 
-      {/* Concepts */}
+      {/* All 11 Concepts */}
       <div className="space-y-0">
+        {/* === ORIGINAL 6 === */}
         <div id="tasting-menu">
           <TastingMenu />
         </div>
@@ -181,13 +212,51 @@ export default function FoodShotShowcase() {
         <div id="the-wall">
           <TheWall />
         </div>
+
+        {/* === NEW 5 CONCEPTS === */}
+        <div className="relative py-20 px-6">
+          <div className="max-w-3xl mx-auto text-center">
+            <div className="h-px bg-gradient-to-r from-transparent via-amber-500/30 to-transparent mb-12" />
+            <span className="inline-block px-4 py-1.5 text-xs font-mono uppercase tracking-wider rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400">
+              5 New Concepts
+            </span>
+          </div>
+        </div>
+
+        <div id="the-spotlight">
+          <TheSpotlight />
+        </div>
+
+        <div className="h-px bg-gradient-to-r from-transparent via-amber-500/10 to-transparent" />
+
+        <div id="split-screen">
+          <TheSplitScreen />
+        </div>
+
+        <div className="h-px bg-gradient-to-r from-transparent via-amber-500/10 to-transparent" />
+
+        <div id="the-lens">
+          <TheLens />
+        </div>
+
+        <div className="h-px bg-gradient-to-r from-transparent via-amber-500/10 to-transparent" />
+
+        <div id="the-menu">
+          <TheMenu />
+        </div>
+
+        <div className="h-px bg-gradient-to-r from-transparent via-amber-500/10 to-transparent" />
+
+        <div id="the-stack">
+          <TheStack />
+        </div>
       </div>
 
       {/* Footer */}
       <footer className="relative z-10 py-16 px-6 border-t border-zinc-900">
         <div className="max-w-3xl mx-auto text-center">
           <p className="text-zinc-600 text-sm mb-6">
-            6 concepts • Real restaurant photography • Contained images at proper resolution
+            11 concepts • Real restaurant photography • Contained images at proper resolution
           </p>
           <div className="flex gap-4 justify-center">
             <Link

src/components/foodshot/card-stack.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { motion, useScroll, useTransform, MotionValue } from "framer-motion";
+import { useRef } from "react";
+import Image from "next/image";
+import { foodPhotos } from "./photo-data";
+
+// Order by visual impact
+const stackOrder = [
+  { photo: foodPhotos[0], tagline: "Studio-quality steak & fries", stat: "+142% clicks" },
+  { photo: foodPhotos[3], tagline: "Seafood that sells itself", stat: "+89% orders" },
+  { photo: foodPhotos[1], tagline: "Sashimi that stops the scroll", stat: "+215% saves" },
+  { photo: foodPhotos[2], tagline: "Comfort food, elevated", stat: "+167% visits" },
+  { photo: foodPhotos[5], tagline: "Fine dining made irresistible", stat: "+94% shares" },
+];
+
+function StackCard({
+  item,
+  index,
+  total,
+  scrollYProgress,
+}: {
+  item: typeof stackOrder[0];
+  index: number;
+  total: number;
+  scrollYProgress: MotionValue<number>;
+}) {
+  // Each card occupies a segment of the scroll range
+  const segmentSize = 1 / total;
+  const start = index * segmentSize;
+  const end = start + segmentSize;
+
+  // Card scale: starts slightly smaller, grows to full, then stays
+  const scale = useTransform(
+    scrollYProgress,
+    [start, start + segmentSize * 0.3, end],
+    [0.88, 1, 1]
+  );
+
+  // Card opacity: fades in, stays, then fades slightly for next
+  const opacity = useTransform(
+    scrollYProgress,
+    index < total - 1
+      ? [start, start + segmentSize * 0.2, end - segmentSize * 0.2, end]
+      : [start, start + segmentSize * 0.2, 1, 1],
+    index < total - 1 ? [0, 1, 1, 0.3] : [0, 1, 1, 1]
+  );
+
+  // Y position: slides up from below
+  const y = useTransform(
+    scrollYProgress,
+    [start, start + segmentSize * 0.3],
+    [80, 0]
+  );
+
+  // Z-index based on which card should be on top
+  const zIndex = useTransform(
+    scrollYProgress,
+    [start, end],
+    [total - index, total - index]
+  );
+
+  // Rotation for a natural card-dealing feel
+  const rotate = useTransform(
+    scrollYProgress,
+    [start, start + segmentSize * 0.3],
+    [index % 2 === 0 ? 3 : -3, 0]
+  );
+
+  return (
+    <motion.div
+      style={{
+        scale,
+        opacity,
+        y,
+        zIndex,
+        rotate,
+      }}
+      className="absolute inset-0 flex items-center justify-center"
+    >
+      <div className="w-full max-w-md mx-auto">
+        <div className="relative rounded-3xl overflow-hidden border border-amber-500/10 bg-zinc-900 shadow-2xl shadow-black/60" style={{ aspectRatio: "3 / 4" }}>
+          <Image
+            src={item.photo.after}
+            alt={`${item.photo.restaurant} — Enhanced`}
+            fill
+            className="object-cover"
+            sizes="(max-width: 768px) 90vw, 448px"
+            priority={index < 2}
+          />
+
+          {/* Bottom gradient */}
+          <div className="absolute bottom-0 inset-x-0 h-2/5 bg-gradient-to-t from-black/90 via-black/50 to-transparent z-10" />
+
+          {/* Card content */}
+          <div className="absolute bottom-0 inset-x-0 p-7 z-20">
+            <p className="text-amber-400/60 text-[10px] font-mono uppercase tracking-[0.2em] mb-2">
+              {item.photo.restaurant}
+            </p>
+            <h3 className="text-white text-xl md:text-2xl font-bold tracking-tight mb-2">
+              {item.tagline}
+            </h3>
+            <div className="flex items-center gap-3">
+              <span className="text-amber-400 text-lg font-bold">{item.stat}</span>
+              <span className="text-zinc-600 text-[10px] font-mono">after FoodShot</span>
+            </div>
+          </div>
+
+          {/* Card number chip */}
+          <div className="absolute top-4 right-4 z-20">
+            <span className="w-8 h-8 rounded-full bg-black/50 backdrop-blur-sm border border-amber-500/20 flex items-center justify-center text-amber-400 text-xs font-bold">
+              {index + 1}
+            </span>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export function CardStack() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start start", "end end"],
+  });
+
+  // Progress indicator
+  const progressWidth = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+
+  return (
+    <section
+      ref={containerRef}
+      className="relative bg-[#060606]"
+      style={{ height: `${stackOrder.length * 100}vh` }}
+    >
+      <div className="sticky top-0 h-screen overflow-hidden">
+        {/* Header */}
+        <div className="absolute top-8 left-0 right-0 z-30 text-center px-6">
+          <h2 className="text-3xl md:text-5xl font-bold text-white tracking-tight">
+            The{" "}
+            <span className="bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
+              collection
+            </span>
+          </h2>
+          <p className="text-zinc-600 text-sm mt-2">
+            Scroll to deal the deck
+          </p>
+        </div>
+
+        {/* Card area */}
+        <div className="absolute inset-0 flex items-center justify-center px-6 pt-16">
+          {stackOrder.map((item, i) => (
+            <StackCard
+              key={i}
+              item={item}
+              index={i}
+              total={stackOrder.length}
+              scrollYProgress={scrollYProgress}
+            />
+          ))}
+        </div>
+
+        {/* Progress bar at bottom */}
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 w-48 z-30">
+          <div className="h-1 bg-zinc-800 rounded-full overflow-hidden">
+            <motion.div
+              style={{ width: progressWidth }}
+              className="h-full bg-gradient-to-r from-amber-500 to-orange-400 rounded-full"
+            />
+          </div>
+          <div className="flex justify-between mt-2">
+            <span className="text-zinc-700 text-[8px] font-mono">1</span>
+            <span className="text-zinc-700 text-[8px] font-mono">{stackOrder.length}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}