src/components/sections/hero/HeroTiltedCards.tsx

@@ -2,7 +2,7 @@ import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ScrollReveal from "@/components/ui/ScrollReveal";
-import TiltedCarousel from "@/components/ui/TiltedCarousel"; // Import TiltedCarousel
+import ImageOrVideo from "@/components/ui/ImageOrVideo"; // Import ImageOrVideo
 
 interface HeroTiltedCardsProps {
   tag: string;
@@ -10,7 +10,7 @@ interface HeroTiltedCardsProps {
   description: string;
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
-  items: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
+  imageSrc: string; // Changed from items to single imageSrc
 }
 
 const HeroTiltedCards = ({
@@ -19,7 +19,7 @@ const HeroTiltedCards = ({
   description,
   primaryButton,
   secondaryButton,
-  items,
+  imageSrc, // Changed from items to single imageSrc
 }: HeroTiltedCardsProps) => {
 
   return (
@@ -51,9 +51,12 @@ const HeroTiltedCards = ({
           </div>
         </div>
 
-        {/* Replace existing image display with TiltedCarousel */}
-        <ScrollReveal variant="fade-blur" delay={0.2} className="w-full">
-          <TiltedCarousel items={items} autoPlayInterval={3000} />
+        {/* Replaced TiltedCarousel with a single ImageOrVideo */}
+        <ScrollReveal variant="fade-blur" delay={0.2} className="w-full max-w-3xl mx-auto">
+          <ImageOrVideo
+            imageSrc={imageSrc}
+            className="w-full h-auto rounded-lg shadow-xl"
+          />
         </ScrollReveal>
       </div>
     </section>