Feature 07

1"use client";
2 
3import { useState, useRef } from "react";
4import { cn } from "@/lib/utils";
5import { Play, Pause, ArrowUpRight } from "lucide-react";
6 
7interface Feature07Props {
8  label?: string;
9  title?: string;
10  description?: string;
11  videoSrc?: string;
12  thumbnailSrc?: string;
13  overlayTitle?: string;
14  overlayDescription?: string;
15  showArrowButton?: boolean;
16  arrowButtonHref?: string;
17  aspectRatio?: "video" | "wide" | "square";
18  className?: string;
19}
20 
21const Feature07 = ({
22  label = "See it in action",
23  title = "A demo is worth a thousand words",
24  description = "Watch how our platform transforms the way teams work together. No complex setup, just results.",
25  videoSrc = "https://videos.pexels.com/video-files/8005482/8005482-uhd_2560_1440_25fps.mp4",
26  thumbnailSrc = "https://www.apple.com/v/airpods-max/j/images/overview/bento/blue/bento_1_airpod_max_blue__blqgkfdancya_xlarge_2x.jpg",
27  overlayTitle,
28  overlayDescription,
29  showArrowButton = false,
30  arrowButtonHref = "#",
31  aspectRatio = "video",
32  className,
33}: Feature07Props) => {
34  const [isPlaying, setIsPlaying] = useState(false);
35  const [showControls, setShowControls] = useState(true);
36  const videoRef = useRef<HTMLVideoElement>(null);
37 
38  const togglePlay = () => {
39    if (!videoRef.current) return;
40    isPlaying ? videoRef.current.pause() : videoRef.current.play();
41    setIsPlaying(!isPlaying);
42  };
43 
44  const aspectClass = {
45    video: "aspect-video",
46    wide: "aspect-[21/9]",
47    square: "aspect-square",
48  }[aspectRatio];
49 
50  return (
51    <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
52      <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 text-center">
53        {label && (
54          <p className="text-sm font-semibold tracking-widest text-muted-foreground uppercase">
55            {label}
56          </p>
57        )}
58        <h2 className="text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl">
59          {title}
60        </h2>
61        {description && (
62          <p className="text-muted-foreground md:text-lg">{description}</p>
63        )}
64      </div>
65 
66      <div className="mx-auto mt-12 max-w-5xl">
67        <div
68          className={cn(
69            "group relative cursor-pointer overflow-hidden rounded-2xl bg-black shadow-2xl",
70            aspectClass,
71          )}
72          onClick={togglePlay}
73          onMouseEnter={() => setShowControls(true)}
74          onMouseLeave={() => isPlaying && setShowControls(false)}
75        >
76          <video
77// … truncated