Video Hero Showcase

1"use client";
2 
3import Link from "next/link";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { VideoPlayer } from "@/components/VideoPlayer";
7import { FaGithub } from "react-icons/fa";
8 
9export interface VideoHeroShowcaseProps {
10  badgeText?: string;
11  badgeLink?: string;
12  title?: string;
13  subtitle?: string;
14  primaryButtonText?: string;
15  primaryButtonHref?: string;
16  secondaryButtonText?: string;
17  secondaryButtonHref?: string;
18  videoSrc?: string;
19  videoPoster?: string;
20}
21 
22export default function VideoHeroShowcase({
23  badgeText = "Discover the Animal World",
24  badgeLink = "https://ruixen.com",
25  title = "Explore nature’s most fascinating creatures",
26  subtitle = "Learn about wildlife, their habitats, and amazing facts. From the tiniest insects to the largest mammals — dive into the beauty of the animal kingdom.",
27  primaryButtonText = "Start Exploring",
28  primaryButtonHref = "/docs/ui/getting-started/introduction",
29  secondaryButtonText = "Animal Data",
30  secondaryButtonHref = "https://ruixen.com/components",
31  videoSrc = "https://videos.pexels.com/video-files/26772138/12003967_1920_1080_30fps.mp4",
32  videoPoster = "https://videos.pexels.com/video-files/26772138/12003967_1920_1080_30fps.jpg",
33}: VideoHeroShowcaseProps) {
34  return (
35    <section
36      className="relative flex flex-col max-w-6xl mx-auto items-center justify-center gap-8 px-10 text-center py-16 pt-24 
37      bg-gradient-to-b from-green-50 via-green-100/40 to-white 
38      rounded-[4rem] shadow-sm"
39    >
40      {/* Badge */}
41      <div className="flex items-center justify-center gap-4 flex-col">
42        <Badge
43          className="rounded-full cursor-pointer font-medium"
44          variant={"secondary"}
45          onClick={() => {
46            window.open(badgeLink, "_blank");
47          }}
48        >
49          {badgeText}
50        </Badge>
51      </div>
52 
53      {/* Heading */}
54      <div className="flex items-center justify-center gap-4 flex-col">
55        <h1 className="text-6xl max-sm:text-4xl font-medium tracking-tighter">
56          {title}
57        </h1>
58        <p className="max-sm:text-sm text-gray-500">{subtitle}</p>
59      </div>
60 
61      {/* Buttons */}
62      <div className="flex items-center justify-center gap-2 flex-wrap">
63        <Button asChild className="grow rounded-xl" size={"sm"}>
64          <Link href={primaryButtonHref} className="font-normal">
65            {primaryButtonText} <span className="opacity-70">- It's free</span>
66// … truncated