Merge version_7_1778335142760 into main

Merge version_7_1778335142760 into main

src/components/sections/hero/HeroBillboard.tsx

@@ -34,24 +34,11 @@ const HeroBillboard = ({
   videoSrc,
 }: HeroBillboardProps) => {
   return (
-    <section aria-label="Hero section" className="relative pt-25 pb-20 md:py-30 mb-20">
+    <section aria-label="Hero section" className="relative pt-25 pb-20 md:py-30">
       <HeroBackgroundSlot />
       <div className="flex flex-col gap-10 w-content-width mx-auto">
         <div className="flex flex-col items-center gap-2 text-center">
-          {testimonials && testimonials.length > 0 ? (
-            <div className="flex flex-col items-center gap-4">
-              <AvatarGroup avatars={testimonials.map(t => ({ src: t.imageSrc }))} label={avatarsLabel} />
-              <div className="flex flex-wrap justify-center gap-8 mt-4">
-                {testimonials.map((testimonial, index) => (
-                  <div key={index} className="max-w-xs text-center">
-                    <p className="italic">"{testimonial.testimonial}"</p>
-                    <p className="mt-2 font-semibold">{testimonial.name}</p>
-                    <p className="text-sm text-gray-600">{testimonial.role}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ) : tag ? (
+          {tag ? (
             <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
           ) : null}
 
@@ -60,7 +47,7 @@ const HeroBillboard = ({
             variant="slide-up"
             gradientText={true}
             tag="h1"
-            className="text-6xl font-bold text-balance"
+            className="text-6xl font-extrabold text-balance"
           />
 
           <TextAnimation
@@ -77,8 +64,19 @@ const HeroBillboard = ({
           </div>
         </div>
 
-        <ScrollReveal variant="fade" delay={0.2} className="w-full p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden">
+        <ScrollReveal variant="fade" delay={0.2} className="relative w-full p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden">
           <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-4/5 md:aspect-video" />
+          {testimonials && testimonials.length > 0 && (
+            <div className="absolute inset-0 grid grid-cols-1 md:grid-cols-3 gap-4 p-4 md:p-8 pointer-events-none">
+              {testimonials.map((testimonial, index) => (
+                <div key={index} className="card p-4 bg-white/80 backdrop-blur-sm rounded-lg shadow-lg pointer-events-auto self-start">
+                  <p className="italic">"{testimonial.testimonial}"</p>
+                  <p className="mt-2 font-semibold">{testimonial.name}</p>
+                  <p className="text-sm text-gray-600">{testimonial.role}</p>
+                </div>
+              ))}
+            </div>
+          )}
         </ScrollReveal>
       </div>
     </section>

src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import AboutText from '@/components/sections/about/AboutText';
+import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
@@ -55,16 +55,36 @@ export default function HomePage() {
 
   <div id="about" data-section="about">
     <SectionErrorBoundary name="about">
-          <AboutText
-      title="Our Heritage of Winemaking Excellence"
+          <AboutFeaturesSplit
+      tag="Our Story"
+      title="From Our Family to Yours"
+      description="Founded in 1924, Vine & Vintages is a family-owned winery dedicated to crafting exceptional wines. Our story is one of passion, perseverance, and a deep connection to the land. We believe that every bottle tells a story, and we invite you to become a part of ours."
       primaryButton={{
-        text: "Read Our Story",
-        href: "#about",
+        text: "Meet the Family",
+        href: "#team",
       }}
       secondaryButton={{
-        text: "View Vineyards",
+        text: "Explore the Vineyard",
         href: "#features",
       }}
+      imageSrc="http://img.b2bpic.net/free-photo/group-people-enjoying-wine-tasting-event-vineyard-generated-by-ai_188544-45590.jpg"
+      items={[
+        {
+          icon: "Grape",
+          title: "Generations of Expertise",
+          description: "With over a century of winemaking experience, our family has perfected the art of cultivating grapes and producing world-class wines.",
+        },
+        {
+          icon: "Leaf",
+          title: "Sustainable Practices",
+          description: "We are committed to sustainable farming and winemaking practices to ensure the health of our land for generations to come.",
+        },
+        {
+          icon: "Award",
+          title: "Award-Winning Wines",
+          description: "Our dedication to quality has been recognized with numerous awards, a testament to our unwavering commitment to excellence.",
+        },
+      ]}
     />
     </SectionErrorBoundary>
   </div>