Merge version_3_1780000017666 into main

Merge version_3_1780000017666 into main

src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -2,6 +2,8 @@ import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
 
 type HeroBillboardCarouselProps = {
   tag: string;
@@ -20,15 +22,41 @@ const HeroBillboardCarousel = ({
   secondaryButton,
   items,
 }: HeroBillboardCarouselProps) => {
-  const duplicated = [...items, ...items, ...items, ...items];
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
+    }, 5000); // Change image every 5 seconds
+    return () => clearInterval(interval);
+  }, [items.length]);
 
   return (
     <section
       aria-label="Hero section"
-      className="relative flex flex-col items-center justify-center gap-8 w-full min-h-svh py-25"
+      className="relative flex flex-col items-center justify-center gap-8 w-full min-h-svh py-25 overflow-hidden"
     >
       <HeroBackgroundSlot />
-      <div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
+      <div className="absolute inset-0 z-0">
+        <AnimatePresence initial={false}>
+          <motion.div
+            key={currentIndex}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 1.5, ease: "easeInOut" }}
+            className="absolute inset-0"
+          >
+            <ImageOrVideo
+              imageSrc={items[currentIndex].imageSrc}
+              videoSrc={items[currentIndex].videoSrc}
+              className="w-full h-full object-cover"
+            />
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      <div className="relative z-10 flex flex-col items-center gap-2 w-content-width mx-auto text-center">
         <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
           <p>{tag}</p>
         </div>
@@ -55,18 +83,17 @@ const HeroBillboardCarousel = ({
         </div>
       </div>
 
-      <div className="w-content-width mx-auto overflow-hidden mask-fade-x">
-        <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "60s" }}>
-          {duplicated.map((item, i) => (
-            <div key={i} className="shrink-0 w-60 md:w-75 2xl:w-80 aspect-4/5 mr-3 md:mr-5 p-1.5 card rounded-lg overflow-hidden">
-              <ImageOrVideo
-                imageSrc={item.imageSrc}
-                videoSrc={item.videoSrc}
-                className="w-full h-full rounded-lg object-cover"
-              />
-            </div>
-          ))}
-        </div>
+      <div className="relative z-10 flex justify-center gap-2 mt-4">
+        {items.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => setCurrentIndex(index)}
+            className={`h-2 w-2 rounded-full transition-colors ${
+              currentIndex === index ? "bg-primary-cta" : "bg-muted"
+            }`}
+            aria-label={`Go to slide ${index + 1}`}
+          />
+        ))}
       </div>
     </section>
   );

src/pages/HomePage.tsx

@@ -2,7 +2,7 @@ import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeaturesIconCards from '@/components/sections/features/FeaturesIconCards';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
 import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
 import { Bell, Building2, Home, Utensils } from "lucide-react";
@@ -13,7 +13,7 @@ export default function HomePage() {
     <>
   <div id="hero" data-section="hero">
     <SectionErrorBoundary name="hero">
-          <HeroBillboard
+          <HeroBillboardCarousel
       tag="Welcome to Madrid"
       title="Experience Luxury in the Heart of Madrid"
       description="Discover unparalleled comfort and timeless elegance at our boutique sanctuary, where every detail is crafted for your unforgettable stay."
@@ -25,25 +25,12 @@ export default function HomePage() {
         text: "Explore Rooms",
         href: "#rooms",
       }}
-      imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-furniture-shop-store-interior_74190-4976.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/young-woman-drinking-coffee-by-window_1303-19262.jpg",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/adorable-lovely-woman-fashion-clothes-is-sitting-open-air-cafe-is-using-smartphone-waiting-friends-city-lights-background_291650-842.jpg",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-male-tourist-walking-with-backpack-pink-wall-color-emotions-tourist_140725-122599.jpg",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-woman-jeans-jacket-posing-near-concrete-wall_613910-14874.jpg",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-elderly-male-with-hot-drink_23-2148036731.jpg",
-        },
+      items={[
+        { imageSrc: "https://img.b2bpic.net/free-photo/luxury-hotel-reception-hall-office-with-decor-shelf_105762-1676.jpg" },
+        { imageSrc: "https://img.b2bpic.net/free-photo/interior-design-room-with-bed-table_23-2149626343.jpg" },
+        { imageSrc: "https://img.b2bpic.net/free-photo/luxury-hotel-room-with-bed-and-furniture_105762-1701.jpg" },
+        { imageSrc: "https://img.b2bpic.net/free-photo/modern-hotel-room-with-comfortable-bed_105762-1702.jpg" },
       ]}
-      avatarsLabel="Join thousands of delighted guests"
     />
     </SectionErrorBoundary>
   </div>