Hero 3 (Video Background)

1"use client";
2 
3import Link from "next/link";
4import { Button } from "@/registry/ui/button";
5import { ChevronRight } from "lucide-react";
6import type { Hero_3_Block } from "~/payload-types";
7import { useTheme } from "next-themes";
8 
9export default function Hero3Section(props: Hero_3_Block) {
10	const { theme } = useTheme();
11	const videoSrc = props.videoUrl ?? "";
12	let lightVideo: string | undefined;
13	let darkVideo: string | undefined;
14 
15	if (props.media) {
16		if (typeof props.media === "object") {
17			if (props.media.light) {
18				if (typeof props.media.light === "object") {
19					lightVideo = props.media.light.url!;
20				} else {
21					lightVideo = props.media.light;
22				}
23			} else if (props.media.dark) {
24				if (typeof props.media.dark === "object") {
25					darkVideo = props.media.dark.url!;
26				} else {
27					darkVideo = props.media.dark;
28				}
29			}
30		}
31	}
32 
33	return (
34		<section className="relative">
35			{/* Background Video Container */}
36			<div className="absolute inset-1 -z-10 aspect-2/3 size-full overflow-hidden rounded-3xl border border-black/10 lg:aspect-video lg:rounded-[3rem] dark:border-white/5">
37				{videoSrc && (
38					<video
39						autoPlay
40						loop
41						muted
42						playsInline
43						className="size-full object-cover opacity-50 invert dark:opacity-35 dark:invert-0 dark:lg:opacity-75"
44					>
45						<source
46							src={
47								theme === "dark"
48									? (darkVideo ?? videoSrc)
49									: (lightVideo ?? videoSrc)
50							}
51							type="video/mp4"
52						/>
53					</video>
54				)}
55			</div>
56 
57			{/* Content Container */}
58			<div className="py-24 md:pb-32 lg:pt-72 lg:pb-36">
59				<div className="relative mx-auto flex max-w-7xl flex-col px-6 lg:block lg:px-12">
60					<div className="mx-auto max-w-lg text-center lg:ml-0 lg:max-w-full lg:text-left">
61						{/* Main Heading */}
62						<h1 className="mt-8 max-w-2xl text-5xl text-balance md:text-6xl lg:mt-16 xl:text-7xl">
63							{props.header}
64						</h1>
65 
66						{/* Subheader */}
67						{props.subheader && (
68							<p className="mt-8 max-w-2xl text-lg text-balance">
69								{props.subheader}
70							</p>
71						)}
72 
73						{/* CTA Buttons */}
74						<div className="mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start">
75							{/* Primary CTA */}
76							<Button
77								asChild
78								size="lg"
79								className="inline-flex items-center justify-center gap-2 rounded-full px-8 pr-3 pl-5 text-base whitespace-nowrap shadow-sm shadow-black/20"
80							>
81								<Link href={props.primaryCtaHref}>
82// … truncated