src/App.tsx

@@ -35,7 +35,11 @@ export default function App() {
             text: "Browse Menu",            href: "#features"}}
           secondaryButton={{
             text: "Visit Us",            href: "#contact"}}
-          imageSrc="https://images.unsplash.com/photo-1681838675911-625ee52549f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxNHx8YmFrZXJ5JTIwd2luZG93JTIwd2l0aCUyMHdhcm0lMjBsaWdodGluZ3xlbnwxfDB8fHwxNzc2MjUzMTMzfDA&ixlib=rb-4.1.0&q=80&w=1080"
+          imageSrcs={[
+            "https://images.unsplash.com/photo-1681838675911-625ee52549f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxNHx8YmFrZXJ5JTIwd2luZG93JTIwd2l0aCUyMHdhcm0lMjBsaWdodGluZ3xlbnwxfDB8fHwxNzc2MjUzMTMzfDA&ixlib=rb-4.1.0&q=80&w=1080",
+            "https://images.unsplash.com/photo-1568254183919-78a4f43a2877?q=80&w=1080&auto=format&fit=crop",
+            "https://images.unsplash.com/photo-1555507036-ab1f4038808a?q=80&w=1080&auto=format&fit=crop"
+          ]}
         />
       </div>
 

src/components/sections/hero/HeroSplit.tsx

@@ -2,6 +2,7 @@ import { motion } from "motion/react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ImageSlider from "@/components/ui/ImageSlider";
 
 type HeroSplitProps = {
   tag: string;
@@ -9,7 +10,7 @@ type HeroSplitProps = {
   description: string;
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+} & ({ imageSrcs: string[]; videoSrc?: never } | { videoSrc: string; imageSrcs?: never });
 
 const HeroSplit = ({
   tag,
@@ -17,7 +18,7 @@ const HeroSplit = ({
   description,
   primaryButton,
   secondaryButton,
-  imageSrc,
+  imageSrcs,
   videoSrc,
 }: HeroSplitProps) => {
   return (
@@ -54,7 +55,7 @@ const HeroSplit = ({
           transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
           className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-5 card rounded overflow-hidden"
         >
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />
+          {imageSrcs ? <ImageSlider images={imageSrcs} /> : <ImageOrVideo imageSrc={undefined} videoSrc={videoSrc} />}
         </motion.div>
       </div>
     </section>

src/components/ui/ImageSlider.tsx

@@ -0,0 +1,25 @@
+type ImageSliderProps = {
+  images: string[];
+};
+
+const ImageSlider = ({ images }: ImageSliderProps) => {
+  const duplicatedImages = [...images, ...images];
+
+  return (
+    <div className="w-full h-full overflow-hidden">
+      <div className="flex h-full w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
+        {duplicatedImages.map((src, index) => (
+          <div key={index} className="h-full w-auto aspect-[3/4] mr-5 shrink-0">
+            <img
+              src={src}
+              alt={`Slide ${index + 1}`}
+              className="object-cover w-full h-full rounded"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ImageSlider;