Merge version_4_1778334771693 into main

Merge version_4_1778334771693 into main

src/components/sections/hero/HeroBillboard.tsx

@@ -5,13 +5,20 @@ import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import ScrollReveal from "@/components/ui/ScrollReveal";
 import AvatarGroup from "@/components/ui/AvatarGroup";
 
+type Testimonial = {
+  name: string;
+  role: string;
+  testimonial: string;
+  imageSrc: string;
+};
+
 type HeroBillboardProps = {
   tag?: string;
   title: string;
   description: string;
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
-  avatars?: { src: string }[];
+  testimonials?: Testimonial[];
   avatarsLabel?: string;
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
@@ -21,7 +28,7 @@ const HeroBillboard = ({
   description,
   primaryButton,
   secondaryButton,
-  avatars,
+  testimonials,
   avatarsLabel,
   imageSrc,
   videoSrc,
@@ -31,9 +38,7 @@ const HeroBillboard = ({
       <HeroBackgroundSlot />
       <div className="flex flex-col gap-10 w-content-width mx-auto">
         <div className="flex flex-col items-center gap-2 text-center">
-          {avatars && avatars.length > 0 ? (
-            <AvatarGroup avatars={avatars} label={avatarsLabel} />
-          ) : tag ? (
+          {tag ? (
             <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
           ) : null}
 
@@ -42,7 +47,7 @@ const HeroBillboard = ({
             variant="slide-up"
             gradientText={true}
             tag="h1"
-            className="text-6xl font-medium text-balance"
+            className="text-6xl font-extrabold text-balance"
           />
 
           <TextAnimation
@@ -59,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

@@ -28,21 +28,24 @@ export default function HomePage() {
         href: "#contact",
       }}
       imageSrc="http://img.b2bpic.net/free-photo/glass-wine-with-stunning-view-vineyard-sunset_23-2151514984.jpg"
-      avatars={[
+      testimonials={[
         {
-          src: "http://img.b2bpic.net/free-photo/male-happy-female-clanging-glasses-wine-room_23-2148024586.jpg",
+          name: "Eleanor Vance",
+          role: "Wine Critic",
+          testimonial: "An unforgettable experience. The attention to detail is astonishing.",
+          imageSrc: "http://img.b2bpic.net/free-photo/people-enjoying-glass-wine-vineyard-with-stunning-nature-landscape_23-2151514988.jpg?_wi=1",
         },
         {
-          src: "http://img.b2bpic.net/free-photo/smiling-man-clanging-glasses-wine-with-woman_23-2148024467.jpg",
+          name: "Marcus Thorne",
+          role: "Sommelier",
+          testimonial: "A masterpiece of winemaking. Each bottle tells a story.",
+          imageSrc: "http://img.b2bpic.net/free-photo/life-home-with-young-adult-drinking-beverage_23-2149129073.jpg?_wi=1",
         },
         {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-women-wine-balcony_329181-15442.jpg",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-happy-people-celebrating_23-2149152905.jpg",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/girl-friends-celebration-moments_23-2149168092.jpg",
+          name: "Sophia Rodriguez",
+          role: "Private Collector",
+          testimonial: "Vine & Vintages has become a staple in my collection. Simply exquisite.",
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-group-beautiful-women-taking-selfie_23-2148440494.jpg?_wi=1",
         },
       ]}
       avatarsLabel="Trusted by over 10,000 wine enthusiasts"
@@ -182,21 +185,21 @@ export default function HomePage() {
           role: "Wine Critic",
           company: "Vinifera Magazine",
           rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/people-enjoying-glass-wine-vineyard-with-stunning-nature-landscape_23-2151514988.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/people-enjoying-glass-wine-vineyard-with-stunning-nature-landscape_23-2151514988.jpg?_wi=2",
         },
         {
           name: "Marcus Thorne",
           role: "Sommelier",
           company: "The Grand Cellar",
           rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/life-home-with-young-adult-drinking-beverage_23-2149129073.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/life-home-with-young-adult-drinking-beverage_23-2149129073.jpg?_wi=2",
         },
         {
           name: "Sophia Rodriguez",
           role: "Private Collector",
           company: "N/A",
           rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-group-beautiful-women-taking-selfie_23-2148440494.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-group-beautiful-women-taking-selfie_23-2148440494.jpg?_wi=2",
         },
         {
           name: "David Chen",