Switch to version 20: modified src/pages/HomePage/sections/Home.tsx

src/pages/HomePage/sections/Home.tsx

@@ -1,70 +1,47 @@
-import React from "react";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import Button from "@/components/ui/Button";
-import Tag from "@/components/ui/Tag";
-import LoopCarousel from "@/components/ui/LoopCarousel";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import { Droplet, Leaf, Award } from "lucide-react";
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "home" section.
 
-export default function HomeSection() {
+import React from 'react';
+import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
+import { Award, Droplet, Leaf, Users, Star } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HomeSection(): React.JSX.Element {
   return (
-    <section id="home" className="relative w-full min-h-svh flex items-center overflow-hidden">
-      <div className="absolute inset-0 -z-10">
-        <ImageOrVideo 
-          imageSrc="" 
-          className="w-full h-full object-cover"
+    <div id="home" data-section="home">
+        <SectionErrorBoundary name="home">
+              <HeroOverlayMarquee
+          tag="Welcome to Vermont's Finest"
+          title="Crafting Exceptional Beer Since 1998"
+          description="Nestled in the picturesque Cedar Mountains, our brewery is dedicated to producing high-quality, artisanal beers that capture the spirit of Vermont. We combine traditional techniques with a passion for innovation, ensuring every sip is a taste of our unique heritage."
+          primaryButton={{
+            text: "Explore Our Beers",
+            href: "#beers",
+          }}
+          secondaryButton={{
+            text: "Our Story",
+            href: "#story",
+          }}
+          items={[
+            {
+              text: "Local Ingredients",
+              icon: Leaf,
+              className: "bg-green-100 text-green-800 border-green-200",
+            },
+            {
+              text: "Sustainable Brewing",
+              icon: Droplet,
+              className: "bg-blue-100 text-blue-800 border-blue-200",
+            },
+            {
+              text: "Award-Winning",
+              icon: Award,
+              className: "bg-yellow-100 text-yellow-800 border-yellow-200",
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/morning-mountains-carpathian-ukraine-aerial-view_1153-6120.jpg"
         />
-        <div className="absolute inset-0 bg-black/40" />
+        </SectionErrorBoundary>
       </div>
-
-      <div className="max-w-content-width mx-auto px-6 w-full relative z-10 flex flex-col items-start">
-        <ScrollReveal variant="slide-up">
-          <Tag text="Welcome to Vermont's Finest" className="mb-6 bg-white/10 text-white border-white/20 backdrop-blur-md" />
-        </ScrollReveal>
-        
-        <TextAnimation 
-          text="Experience the True Taste of Vermont in Every Pour" 
-          variant="slide-up" 
-          gradientText={false} 
-          tag="h1" 
-          className="text-5xl md:text-7xl font-bold text-white max-w-content-width mb-6 leading-tight" 
-        />
-        
-        <ScrollReveal variant="slide-up" delay={0.2}>
-          <p className="text-lg md:text-xl text-white/90 max-w-content-width leading-relaxed">
-            Nestled in the picturesque Cedar Mountains, our brewery is dedicated to producing high-quality, artisanal beers that capture the spirit of Vermont. We combine traditional techniques with a passion for innovation, ensuring every sip is a taste of our unique heritage.
-          </p>
-        </ScrollReveal>
-        
-        <ScrollReveal variant="slide-up" delay={0.3} className="flex flex-wrap gap-4">
-          <Button text="Explore Our Beers" variant="primary" href="#beers" />
-          <Button text="Our Story" variant="secondary" href="#story" />
-        </ScrollReveal>
-      </div>
-
-      <div className="absolute bottom-0 left-0 w-full bg-black/20 backdrop-blur-sm border-t border-white/10 py-4">
-        <LoopCarousel>
-          <div className="flex items-center px-6">
-            {[1, 2, 3, 4].map((i) => (
-              <React.Fragment key={i}>
-                <div className="flex items-center gap-2 text-white/90">
-                  <Droplet className="w-5 h-5" />
-                  <span className="font-medium whitespace-nowrap">Local Ingredients</span>
-                </div>
-                <div className="flex items-center gap-2 text-white/90">
-                  <Leaf className="w-5 h-5" />
-                  <span className="font-medium whitespace-nowrap">Sustainable Brewing</span>
-                </div>
-                <div className="flex items-center gap-2 text-white/90">
-                  <Award className="w-5 h-5" />
-                  <span className="font-medium whitespace-nowrap">Award-Winning</span>
-                </div>
-              </React.Fragment>
-            ))}
-          </div>
-        </LoopCarousel>
-      </div>
-    </section>
   );
-}
+}