feat: update hero section to display multiple images

src/components/sections/hero/HeroBillboardScroll.tsx

@@ -11,7 +11,7 @@ type HeroBillboardScrollProps = {
   description: string;
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+} & ({ images: { src: string; alt: string }[]; videoSrc?: never } | { videoSrc: string; images?: never });
 
 const HeroBillboardScroll = ({
   tag,
@@ -19,7 +19,7 @@ const HeroBillboardScroll = ({
   description,
   primaryButton,
   secondaryButton,
-  imageSrc,
+  images,
   videoSrc,
 }: HeroBillboardScrollProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -62,15 +62,17 @@ const HeroBillboardScroll = ({
           </div>
         </div>
 
-        <div className="w-content-width mx-auto mt-8 p-3 card rounded overflow-hidden rotate-x-20 md:hidden">
+        
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-4/5" />
-        </div>
 
         <motion.div
           style={{ rotateX: rotate, scale }}
           className="w-content-width mx-auto mt-5 2xl:mt-2 p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden hidden md:block"
         >
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-video" />
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {images.map((image, index) => (
+            <ImageOrVideo key={index} imageSrc={image.src} alt={image.alt} className="aspect-video" />
+          ))}
+        </div>
         </motion.div>
       </div>
     </section>

src/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
 import ProductRatingCards from '@/components/sections/product/ProductRatingCards';
 import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
@@ -15,7 +15,7 @@ export default function HomePage() {
     <>
   <div id="hero" data-section="hero">
     <SectionErrorBoundary name="hero">
-          <HeroBillboard
+          <HeroBillboardScroll
       tag="Madrid Web Studios"
       title="Crafting Digital Excellence for Madrid's Boutique Businesses"
       description="We specialize in bespoke web design and digital strategies that capture your brand's unique essence and connect with your discerning clientele."
@@ -27,25 +27,20 @@ export default function HomePage() {
         text: "Get a Free Quote",
         href: "#contact",
       }}
-      avatars={[
+      images={[
         {
-          src: "https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/professional-headshot-of-a-smiling-diver-1778523658565-30af92dd.png",
+          src: "https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/a-elegant-and-modern-office-workspace-wi-1778523660220-209aee7c.png",
+          alt: "elegant and modern office workspace",
         },
         {
-          src: "https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/professional-headshot-of-a-smiling-diver-1778523657245-23e62b02.png",
+          src: "https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/a-close-up-shot-of-hands-collaborating-o-1778523659349-4af35b3a.png",
+          alt: "close up shot of hands collaborating",
         },
         {
-          src: "https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/professional-headshot-of-a-smiling-diver-1778523656090-99cec063.jpg",
+          src: "https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/a-stunning-responsive-website-design-moc-1778523659520-b6314c63.png",
-        },
+          alt: "stunning responsive website design",
-        {
-          src: "https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/professional-headshot-of-a-smiling-diver-1778523658859-97bdb0c5.png",
-        },
-        {
-          src: "https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/professional-headshot-of-a-smiling-diver-1778523711903-a47286b3.png",
         },
       ]}
-      avatarsLabel="Trusted by boutique brands across Madrid"
-      imageSrc="https://storage.googleapis.com/webild/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/a-elegant-and-modern-office-workspace-wi-1778523660220-209aee7c.png"
     />
     </SectionErrorBoundary>
   </div>