Bob AI: Add a new section to the page.

INLINE-ONLY (Option A archit

src/pages/HomePage.tsx

@@ -3,8 +3,11 @@ import ContactCta from '@/components/sections/contact/ContactCta';
 import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCards';
 import FeaturesRevealCardsBentoSharp from '@/components/sections/features/FeaturesRevealCardsBentoSharp';
 import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
-import { Award, Droplet, Leaf, Users } from "lucide-react";
+import { Award, Droplet, Leaf, Users, Star } from "lucide-react";
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
 
 export default function HomePage() {
   return (
@@ -156,6 +159,71 @@ export default function HomePage() {
     </SectionErrorBoundary>
   </div>
 
+  <div id="testimonials" data-section="testimonials" data-webild-section="TestimonialQuoteCards">
+    <SectionErrorBoundary name="testimonials">
+      <section aria-label="Testimonials section" className="">
+        <div className="flex flex-col gap-8">
+          <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+            <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+              <p>What Our Guests Say</p>
+            </div>
+
+            <TextAnimation
+              text="Cheers from the Community"
+              variant="slide-up"
+              gradientText={true}
+              tag="h2"
+              className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+            />
+
+            <TextAnimation
+              text="Don't just take our word for it. Here's what craft beer lovers have to say about their experiences at Cedar Mountain Brewery."
+              variant="slide-up"
+              gradientText={false}
+              tag="p"
+              className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+            />
+          </div>
+
+          <ScrollReveal variant="fade-blur">
+            <GridOrCarousel>
+              {[
+                {
+                  name: "Sarah Jenkins",
+                  role: "Local Enthusiast",
+                  quote: "The Cascade IPA is hands down the best I've had in Vermont. The taproom atmosphere is so welcoming, and the staff really knows their stuff!",
+                },
+                {
+                  name: "Mike & Emily",
+                  role: "Weekend Visitors",
+                  quote: "We stopped by during our road trip and ended up staying for hours. The Maple Amber Ale and the live music made for a perfect afternoon.",
+                },
+                {
+                  name: "David Chen",
+                  role: "Homebrewer",
+                  quote: "You can taste the dedication to traditional craft in every sip of the Stout Mountain Porter. It's inspiring to see a brewery so committed to quality.",
+                }
+              ].map((testimonial, i) => (
+                <div key={i} className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded">
+                  <div className="flex gap-1">
+                    {[...Array(5)].map((_, j) => (
+                      <Star key={j} className="size-5 text-accent fill-accent" />
+                    ))}
+                  </div>
+                  <p className="text-lg md:text-xl leading-snug flex-grow">"{testimonial.quote}"</p>
+                  <div className="flex flex-col gap-1 mt-4">
+                    <span className="text-base font-semibold">{testimonial.name}</span>
+                    <span className="text-sm opacity-70">{testimonial.role}</span>
+                  </div>
+                </div>
+              ))}
+            </GridOrCarousel>
+          </ScrollReveal>
+        </div>
+      </section>
+    </SectionErrorBoundary>
+  </div>
+
   <div id="contact" data-section="contact">
     <SectionErrorBoundary name="contact">
           <ContactCta
@@ -174,4 +242,4 @@ export default function HomePage() {
   </div>
     </>
   );
-}
+}