Bob AI (stub): Make the nav bar glassmorphic

Merge version_5_1780459584649 into main

src/pages/HomePage.tsx

@@ -1,251 +1,31 @@
-import AboutText from '@/components/sections/about/AboutText';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
-import FeaturesRevealCardsBentoSharp from '@/components/sections/features/FeaturesRevealCardsBentoSharp';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
-import { Coffee, Leaf, Users } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly; this shell only fixes render order.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import MenuSection from './HomePage/sections/Menu';
+import HighlightsSection from './HomePage/sections/Highlights';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import MetricsSection from './HomePage/sections/Metrics';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+
+{/* webild-stub @2026-06-03T04:09:03.687Z: Make the nav bar glassmorphic */}
+
+export default function HomePage(): React.JSX.Element {
   return (
     <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroOverlay
-      tag="Welcome to Joes Coffee"
-      title="Crafting Your Perfect Cup, Every Time."
-      description="Experience the rich aroma and exquisite taste of our sustainably sourced coffee beans, freshly brewed just for you. We are dedicated to quality, community, and creating delightful moments."
-      primaryButton={{
-        text: "Explore Our Menu",
-        href: "#menu",
-      }}
-      secondaryButton={{
-        text: "Find Our Location",
-        href: "#contact",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/interior-cafe-with-brick-walls_53876-32361.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutText
-      title="Our Story & Philosophy"
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="menu" data-section="menu">
-    <SectionErrorBoundary name="menu">
-          <FeaturesRevealCardsBentoSharp
-      tag="Our Offerings"
-      title="Savor the Flavor"
-      description="From classic espresso drinks to unique seasonal blends and delightful treats, our menu is crafted to awaken your senses and delight every palate. Discover your new favorite!"
-      items={[
-        {
-          title: "Espresso",
-          description: "A rich, concentrated shot of pure coffee essence, the foundation of many of our beloved drinks.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/steaming-coffee-cup-with-latte-art-dark-moody-background_84443-84051.jpg",
-        },
-        {
-          title: "Latte",
-          description: "Smooth, creamy, and comforting. Our signature espresso blended with steamed milk and a delicate layer of foam.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/latte-coffee-art-table_1232-2739.jpg",
-        },
-        {
-          title: "Cappuccino",
-          description: "The perfect balance of espresso, steamed milk, and a generous cap of frothy foam, often dusted with cocoa.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-salep-with-milk-cinnamon_140725-9302.jpg",
-        },
-        {
-          title: "Americano",
-          description: "A robust and rich coffee drink made by diluting a shot of espresso with hot water, similar to drip coffee.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/milk-pouring-into-iced-black-coffee-table_1150-13461.jpg",
-        },
-        {
-          title: "Cold Brew",
-          description: "Our slow-steeped, cold-brewed coffee offers a smooth, low-acid, and naturally sweet taste for a refreshing experience.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/cup-black-coffee_1339-7161.jpg",
-        },
-        {
-          title: "Fresh Pastries",
-          description: "Indulge in our selection of freshly baked croissants, muffins, and cookies, perfect companions to your coffee.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/colorful-macaroons-lie-pink-plate_8353-343.jpg",
-        },
-        {
-          title: "Gourmet Sandwiches",
-          description: "Quick, delicious, and made with fresh, local ingredients. Our gourmet sandwiches are perfect for lunch.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/sweet-bun-with-mojito-wooden-board-blue_114579-16411.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="highlights" data-section="highlights">
-    <SectionErrorBoundary name="highlights">
-          <FeaturesBentoGrid
-      tag="Our Distinctive Qualities"
-      title="More Than Just Coffee"
-      description="Discover what makes Joes Coffee the heart of our neighborhood, a place where quality, comfort, and community come together for an unforgettable experience."
-      features={[
-        {
-          title: "Artisan Roasts",
-          description: "Experience the unique depth of flavor from our small-batch, in-house roasted beans, crafted for peak aroma and taste.",
-          imageSrc: "http://img.b2bpic.net/free-photo/roasted-coffee-beans-background-generative-ai_91128-2245.jpg",
-        },
-        {
-          title: "Cozy Ambiance",
-          description: "Relax in our warm, inviting space designed for comfort, conversation, or quiet contemplation with a perfect cup.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-reading-book-club_23-2150062120.jpg",
-        },
-        {
-          title: "Friendly Baristas",
-          description: "Our passionate and skilled baristas are here to craft your drink with a smile and make your visit truly special.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-barista-preparing-coffee_23-2148824432.jpg",
-        },
-        {
-          title: "Freshly Baked",
-          description: "Pair your coffee with delightful pastries and treats, baked fresh daily with love and the finest ingredients.",
-          imageSrc: "http://img.b2bpic.net/free-photo/different-cakes_1398-576.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialColumnMarqueeCards
-      tag="What Our Community Says"
-      title="Voices of Joes Coffee"
-      description="Don't just take our word for it – hear from our beloved patrons about their experiences and why Joes Coffee is their favorite spot."
-      testimonials={[
-        {
-          name: "Sarah J.",
-          role: "Local Artist",
-          quote: "Joes Coffee is my daily escape. The latte art is always beautiful, and the cozy atmosphere inspires my work. It's truly a hidden gem!",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-curly-redhead-bearded-man-tasting-coffee-cup_171337-9999.jpg",
-        },
-        {
-          name: "Michael L.",
-          role: "Small Business Owner",
-          quote: "The best coffee in town, hands down. I appreciate the quality and consistency, and the staff are always incredibly welcoming. My go-to spot for meetings.",
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-dreaming-young-woman-sitting-cafe-table_171337-17088.jpg",
-        },
-        {
-          name: "Emily R.",
-          role: "Student",
-          quote: "I love coming here to study. The quiet corners and endless coffee keep me going. Plus, their sandwiches are amazing when I need a break!",
-          imageSrc: "http://img.b2bpic.net/free-photo/carefree-friends_1098-15889.jpg",
-        },
-        {
-          name: "David K.",
-          role: "Neighborhood Resident",
-          quote: "It feels like home here. The baristas know my order, and there's always a friendly face. Joes Coffee is more than just a cafe; it's a community.",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-drinking-coffee-spacious-cafeteria_23-2150423990.jpg",
-        },
-        {
-          name: "Olivia M.",
-          role: "Food Blogger",
-          quote: "From the first sip to the last bite of their pastries, Joes Coffee consistently delivers excellence. A must-visit for any coffee enthusiast!",
-          imageSrc: "http://img.b2bpic.net/free-photo/lovely-asian-woman-with-ponytail-dressed-red-oversized-sweater-sits-co-working-space-takes-notes-notebook_197531-16913.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsIconCards
-      tag="Our Journey & Impact"
-      title="Brewing Success Together"
-      description="A few numbers that highlight our dedication to quality, community, and the perfect coffee experience we strive to deliver every single day."
-      metrics={[
-        {
-          icon: Coffee,
-          title: "Cups Brewed Daily",
-          value: "800+",
-        },
-        {
-          icon: Users,
-          title: "Happy Customers",
-          value: "10K+",
-        },
-        {
-          icon: Leaf,
-          title: "Ethical Sourcing",
-          value: "100%",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-      tag="Got Questions?"
-      title="Frequently Asked Questions"
-      description="Find quick answers to common inquiries about our coffee, services, ordering, and everything you need to know about Joes Coffee."
-      items={[
-        {
-          question: "What are your operating hours?",
-          answer: "We are open Monday to Friday from 7 AM to 6 PM, and Saturday to Sunday from 8 AM to 5 PM. Please check our social media for holiday hours.",
-        },
-        {
-          question: "Do you offer vegan or dairy-free options?",
-          answer: "Yes, we offer a variety of plant-based milk alternatives including oat, almond, and soy milk, as well as several vegan pastry options. Just ask our baristas!",
-        },
-        {
-          question: "Can I order online for pickup?",
-          answer: "Absolutely! You can place an order directly through our website or via our mobile app for convenient in-store pickup. Skip the line and enjoy!",
-        },
-        {
-          question: "Do you have Wi-Fi available?",
-          answer: "Yes, we provide complimentary high-speed Wi-Fi for all our customers. Feel free to work, study, or browse while enjoying your coffee.",
-        },
-        {
-          question: "Where do you source your coffee beans?",
-          answer: "We pride ourselves on ethically sourcing premium Arabica beans from sustainable farms in Central and South America, as well as East Africa. Each bean is carefully selected for quality and flavor.",
-        },
-        {
-          question: "Do you offer loyalty programs or discounts?",
-          answer: "Yes, join our Joes Coffee loyalty program to earn points with every purchase and redeem them for free drinks, pastries, and exclusive discounts. Ask a barista to sign up!",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Connect With Us"
-      text="Ready for your perfect cup or want to learn more? Visit Joes Coffee and experience the difference, or reach out to our friendly team."
-      primaryButton={{
-        text: "Get Directions",
-        href: "https://www.google.com/maps/search/joes+coffee",
-      }}
-      secondaryButton={{
-        text: "Call Us Now",
-        href: "tel:+1234567890",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <HeroSection />
+      <AboutSection />
+      <MenuSection />
+      <HighlightsSection />
+      <TestimonialsSection />
+      <MetricsSection />
+      <FaqSection />
+      <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,18 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutText from '@/components/sections/about/AboutText';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutText
+          title="Our Story & Philosophy"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,75 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import Tag from "@/components/ui/Tag";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-webild-section="contact" className="py-24 bg-background">
+      <SectionErrorBoundary name="contact">
+        <div className="container mx-auto px-4 max-w-3xl">
+          <div className="text-center mb-12">
+            <Tag text="Get in Touch" className="mb-4" />
+            <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">Contact Us</h2>
+            <p className="text-lg text-muted-foreground">
+              Have a question or want to learn more? Fill out the form below and our team will get back to you as soon as possible.
+            </p>
+          </div>
+          
+          <form className="space-y-6 bg-card p-8 rounded-2xl border border-border shadow-sm" onSubmit={(e) => e.preventDefault()}>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-2">
+                <label htmlFor="firstName" className="text-sm font-medium text-foreground">First Name</label>
+                <input 
+                  type="text" 
+                  id="firstName" 
+                  className="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20 transition-colors"
+                  placeholder="John"
+                />
+              </div>
+              <div className="space-y-2">
+                <label htmlFor="lastName" className="text-sm font-medium text-foreground">Last Name</label>
+                <input 
+                  type="text" 
+                  id="lastName" 
+                  className="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20 transition-colors"
+                  placeholder="Doe"
+                />
+              </div>
+            </div>
+            
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium text-foreground">Email Address</label>
+              <input 
+                type="email" 
+                id="email" 
+                className="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20 transition-colors"
+                placeholder="john@example.com"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <label htmlFor="message" className="text-sm font-medium text-foreground">Message</label>
+              <textarea 
+                id="message" 
+                rows={5}
+                className="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20 transition-colors resize-none"
+                placeholder="How can we help you?"
+              ></textarea>
+            </div>
+            
+            <button 
+              type="submit"
+              className="w-full py-4 px-6 rounded-full bg-foreground text-background font-medium hover:opacity-90 transition-opacity"
+            >
+              Send Message
+            </button>
+          </form>
+        </div>
+      </SectionErrorBoundary>
+    </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,46 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTwoColumn
+          tag="Got Questions?"
+          title="Frequently Asked Questions"
+          description="Find quick answers to common inquiries about our coffee, services, ordering, and everything you need to know about Joes Coffee."
+          items={[
+            {
+              question: "What are your operating hours?",
+              answer: "We are open Monday to Friday from 7 AM to 6 PM, and Saturday to Sunday from 8 AM to 5 PM. Please check our social media for holiday hours.",
+            },
+            {
+              question: "Do you offer vegan or dairy-free options?",
+              answer: "Yes, we offer a variety of plant-based milk alternatives including oat, almond, and soy milk, as well as several vegan pastry options. Just ask our baristas!",
+            },
+            {
+              question: "Can I order online for pickup?",
+              answer: "Absolutely! You can place an order directly through our website or via our mobile app for convenient in-store pickup. Skip the line and enjoy!",
+            },
+            {
+              question: "Do you have Wi-Fi available?",
+              answer: "Yes, we provide complimentary high-speed Wi-Fi for all our customers. Feel free to work, study, or browse while enjoying your coffee.",
+            },
+            {
+              question: "Where do you source your coffee beans?",
+              answer: "We pride ourselves on ethically sourcing premium Arabica beans from sustainable farms in Central and South America, as well as East Africa. Each bean is carefully selected for quality and flavor.",
+            },
+            {
+              question: "Do you offer loyalty programs or discounts?",
+              answer: "Yes, join our Joes Coffee loyalty program to earn points with every purchase and redeem them for free drinks, pastries, and exclusive discounts. Ask a barista to sign up!",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroOverlay
+          tag="Welcome to Joes Coffee"
+          title="Crafting Your Perfect Cup, Every Time."
+          description="Experience the rich aroma and exquisite taste of our sustainably sourced coffee beans, freshly brewed just for you. We are dedicated to quality, community, and creating delightful moments."
+          primaryButton={{
+            text: "Explore Our Menu",
+            href: "#menu",
+          }}
+          secondaryButton={{
+            text: "Find Our Location",
+            href: "#contact",
+          }}
+          imageSrc="http://img.b2bpic.net/free-photo/interior-cafe-with-brick-walls_53876-32361.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Highlights.tsx

@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "highlights" section.
+
+import React from 'react';
+import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HighlightsSection(): React.JSX.Element {
+  return (
+    <div id="highlights" data-section="highlights">
+        <SectionErrorBoundary name="highlights">
+              <FeaturesBentoGrid
+          tag="Our Distinctive Qualities"
+          title="More Than Just Coffee"
+          description="Discover what makes Joes Coffee the heart of our neighborhood, a place where quality, comfort, and community come together for an unforgettable experience."
+          features={[
+            {
+              title: "Artisan Roasts",
+              description: "Experience the unique depth of flavor from our small-batch, in-house roasted beans, crafted for peak aroma and taste.",
+              imageSrc: "http://img.b2bpic.net/free-photo/roasted-coffee-beans-background-generative-ai_91128-2245.jpg",
+            },
+            {
+              title: "Cozy Ambiance",
+              description: "Relax in our warm, inviting space designed for comfort, conversation, or quiet contemplation with a perfect cup.",
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-reading-book-club_23-2150062120.jpg",
+            },
+            {
+              title: "Friendly Baristas",
+              description: "Our passionate and skilled baristas are here to craft your drink with a smile and make your visit truly special.",
+              imageSrc: "http://img.b2bpic.net/free-photo/male-barista-preparing-coffee_23-2148824432.jpg",
+            },
+            {
+              title: "Freshly Baked",
+              description: "Pair your coffee with delightful pastries and treats, baked fresh daily with love and the finest ingredients.",
+              imageSrc: "http://img.b2bpic.net/free-photo/different-cakes_1398-576.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Menu.tsx

@@ -0,0 +1,54 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "menu" section.
+
+import React from 'react';
+import Tag from "@/components/ui/Tag";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Button from "@/components/ui/Button";
+
+export default function MenuSection(): React.JSX.Element {
+  return (
+    <div id="menu" data-webild-section="menu" className="py-24 bg-background">
+      <div className="container mx-auto px-4 max-w-6xl">
+        <div className="text-center mb-16">
+          <Tag text="Our Menu" className="mb-4" />
+          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">Crafted for You</h2>
+          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+            Explore our carefully curated selection of coffees, teas, and fresh pastries. Every item is prepared with passion and the finest ingredients.
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {[
+            { name: "Classic Espresso", description: "Rich, concentrated shot of pure coffee essence.", price: "$3.00", imageSrc: "https://images.unsplash.com/photo-1510591509098-f4fdc6d0ff04?auto=format&fit=crop&q=80&w=800" },
+            { name: "Vanilla Bean Latte", description: "Smooth espresso blended with steamed milk and real vanilla bean syrup.", price: "$4.50", imageSrc: "https://images.unsplash.com/photo-1572442388796-11668a67e53d?auto=format&fit=crop&q=80&w=800" },
+            { name: "Caramel Macchiato", description: "Steamed milk with vanilla-flavored syrup, marked with espresso and caramel drizzle.", price: "$4.75", imageSrc: "https://images.unsplash.com/photo-1485808191679-5f86510681a2?auto=format&fit=crop&q=80&w=800" },
+            { name: "Mocha Frappuccino", description: "Coffee blended with mocha sauce, milk, and ice, topped with whipped cream.", price: "$5.00", imageSrc: "https://images.unsplash.com/photo-1572490122747-3968b75cc699?auto=format&fit=crop&q=80&w=800" },
+            { name: "Nitro Cold Brew", description: "Our signature cold brew infused with nitrogen for a sweet flavor and velvety crema.", price: "$4.25", imageSrc: "https://images.unsplash.com/photo-1461023058943-07fcbe16d735?auto=format&fit=crop&q=80&w=800" },
+            { name: "Iced Americano", description: "Espresso shots topped with cold water produce a light layer of crema, then served over ice.", price: "$3.50", imageSrc: "https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?auto=format&fit=crop&q=80&w=800" },
+            { name: "Matcha Green Tea Latte", description: "Smooth and creamy matcha lightly sweetened and served with steamed milk.", price: "$4.50", imageSrc: "https://images.unsplash.com/photo-1536514072410-5019a3c69182?auto=format&fit=crop&q=80&w=800" },
+            { name: "Chai Tea Latte", description: "Black tea infused with cinnamon, clove, and other warming spices, combined with steamed milk.", price: "$4.25", imageSrc: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" },
+            { name: "Artisan Butter Croissant", description: "Flaky, buttery, and baked fresh daily.", price: "$3.25", imageSrc: "https://images.unsplash.com/photo-1555507036-ab1f4038808a?auto=format&fit=crop&q=80&w=800" },
+            { name: "Blueberry Muffin", description: "Moist muffin bursting with fresh blueberries and topped with a crumbly streusel.", price: "$3.50", imageSrc: "https://images.unsplash.com/photo-1607958996333-41aef7caefaa?auto=format&fit=crop&q=80&w=800" }
+          ].map((item, index) => (
+            <ScrollReveal key={index} variant="slide-up" className="flex flex-col bg-card rounded-xl overflow-hidden border border-border">
+              <div className="h-48 w-full relative">
+                <ImageOrVideo imageSrc={item.imageSrc} className="w-full h-full object-cover" />
+              </div>
+              <div className="p-6 flex flex-col flex-grow">
+                <div className="flex justify-between items-start mb-2">
+                  <h3 className="text-xl font-semibold text-foreground pr-4">{item.name}</h3>
+                  <span className="text-lg font-bold text-foreground whitespace-nowrap">{item.price}</span>
+                </div>
+                <p className="text-muted-foreground text-sm mb-6 flex-grow">{item.description}</p>
+                <Button text="Purchase" variant="primary" className="w-full justify-center" />
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,38 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import { Coffee, Leaf, Users } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsIconCards
+          tag="Our Journey & Impact"
+          title="Brewing Success Together"
+          description="A few numbers that highlight our dedication to quality, community, and the perfect coffee experience we strive to deliver every single day."
+          metrics={[
+            {
+              icon: Coffee,
+              title: "Cups Brewed Daily",
+              value: "800+",
+            },
+            {
+              icon: Users,
+              title: "Happy Customers",
+              value: "10K+",
+            },
+            {
+              icon: Leaf,
+              title: "Ethical Sourcing",
+              value: "100%",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,52 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialColumnMarqueeCards
+          tag="What Our Community Says"
+          title="Voices of Joes Coffee"
+          description="Don't just take our word for it – hear from our beloved patrons about their experiences and why Joes Coffee is their favorite spot."
+          testimonials={[
+            {
+              name: "Mark Jenkins",
+              role: "Local Artist, Seattle",
+              quote: "Joes Coffee is my daily escape. The latte art is always beautiful, and the cozy atmosphere inspires my work. It's truly a hidden gem!",
+              imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=800",
+            },
+            {
+              name: "Sarah Lawson",
+              role: "Small Business Owner, Portland",
+              quote: "The best coffee in town, hands down. I appreciate the quality and consistency, and the staff are always incredibly welcoming. My go-to spot for meetings.",
+              imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=800",
+            },
+            {
+              name: "Emily Roberts",
+              role: "Graduate Student, Austin",
+              quote: "I love coming here to study. The quiet corners and endless coffee keep me going. Plus, their sandwiches are amazing when I need a break!",
+              imageSrc: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=800",
+            },
+            {
+              name: "David Kim",
+              role: "Software Engineer, Chicago",
+              quote: "It feels like home here. The baristas know my order, and there's always a friendly face. Joes Coffee is more than just a cafe; it's a community.",
+              imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=800",
+            },
+            {
+              name: "Olivia Martinez",
+              role: "Food Blogger, New York",
+              quote: "From the first sip to the last bite of their pastries, Joes Coffee consistently delivers excellence. A must-visit for any coffee enthusiast!",
+              imageSrc: "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&q=80&w=800",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}