fix: show slide content based on image or video

apps/marketing/src/components/(marketing)/carousel.tsx

@@ -9,11 +9,56 @@ import { Card } from '@documenso/ui/primitives/card';
 
 import { Thumb } from './thumb';
 
-type PropType = {
+type SlideType = {
-  slides: { label: string; imageSrc: string }[];
+  label: string;
+  imageSrc: string;
+  type: 'image' | 'video';
 };
 
-export const EmblaCarousel: React.FC<PropType> = ({ slides }) => {
+type CarouselPropType = {
+  slides: SlideType[];
+};
+
+const SLIDES = [
+  {
+    label: 'Signing Process',
+    type: 'video',
+    src: '/signing.mp4',
+  },
+  {
+    label: 'Templates/Fields',
+    type: 'video',
+    src: '/signing.mp4',
+  },
+  {
+    label: 'Zapier',
+    type: 'video',
+    src: '/signing.mp4',
+  },
+  {
+    label: 'Webhooks',
+    type: 'video',
+    src: '/signing.mp4',
+  },
+  {
+    label: 'API',
+    type: 'video',
+    src: '/signing.mp4',
+  },
+  {
+    label: 'Teams',
+    type: 'video',
+    src: '/signing.mp4',
+  },
+  {
+    label: 'Profile',
+    type: 'video',
+    src: '/signing.mp4',
+  },
+];
+
+export const Carousel = () => {
+  const slides = SLIDES;
   const [_isPlaying, setIsPlaying] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
@@ -100,15 +145,17 @@ export const EmblaCarousel: React.FC<PropType> = ({ slides }) => {
           <div className="flex touch-pan-y rounded-xl">
             {slides.map((slide, index) => (
               <div className="min-w-[10rem] flex-none basis-full rounded-xl" key={index}>
-                <video
+                {slide.type === 'video' && (
-                  ref={(el) => (videoRefs.current[index] = el)}
+                  <video
-                  muted
+                    ref={(el) => (videoRefs.current[index] = el)}
-                  loop
+                    muted
-                  className="h-auto w-full rounded-xl"
+                    loop
-                >
+                    className="h-auto w-full rounded-xl"
-                  <source src="/signing.mp4" type="video/mp4" />
+                  >
-                  Your browser does not support the video tag.
+                    <source src={slide.src} type="video/mp4" />
-                </video>
+                    Your browser does not support the video tag.
+                  </video>
+                )}
               </div>
             ))}
           </div>

apps/marketing/src/components/(marketing)/hero.tsx

@@ -14,39 +14,7 @@ import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-fl
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { EmblaCarousel } from './carousel';
+import { Carousel } from './carousel';
-import './embla.css';
-
-const SLIDES = [
-  {
-    label: 'Signing Process',
-    imageSrc: 'https://documenso.com/images/hero/hero-1.png',
-  },
-  {
-    label: 'Templates/Fields',
-    imageSrc: 'https://documenso.com/images/hero/hero-1.png',
-  },
-  {
-    label: 'Zapier',
-    imageSrc: 'https://documenso.com/images/hero/hero-1.png',
-  },
-  {
-    label: 'Webhooks',
-    imageSrc: 'https://documenso.com/images/hero/hero-1.png',
-  },
-  {
-    label: 'API',
-    imageSrc: 'https://documenso.com/images/hero/hero-1.png',
-  },
-  {
-    label: 'Teams',
-    imageSrc: 'https://documenso.com/images/hero/hero-1.png',
-  },
-  {
-    label: 'Profile',
-    imageSrc: 'https://documenso.com/images/hero/hero-1.png',
-  },
-];
 
 export type HeroProps = {
   className?: string;
@@ -221,7 +189,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           initial="initial"
           animate="animate"
         >
-          <EmblaCarousel slides={SLIDES} />
+          <Carousel />
         </motion.div>
       </div>
     </motion.div>