Hero 1

1"use client";
2 
3import Link from "next/link";
4import { ArrowRight, ArrowDown } from "lucide-react";
5import { Button } from "@/registry/ui/button";
6import { TextEffect } from "@/registry/ui/motion-primitives/text-effect";
7import { AnimatedGroup } from "@/registry/ui/motion-primitives/animated-group";
8import type { Hero_1_Block } from "~/payload-types";
9import { cn } from "@/registry/default/utils";
10import MediaField from "@/registry/payload/fields/media/index";
11 
12const transitionVariants = {
13	item: {
14		hidden: {
15			opacity: 0,
16			filter: "blur(12px)",
17			y: 12,
18		},
19		visible: {
20			opacity: 1,
21			filter: "blur(0px)",
22			y: 0,
23			transition: {
24				type: "spring",
25				bounce: 0.3,
26				duration: 1.5,
27			},
28		},
29	},
30};
31 
32export default function HeroSection(props: Hero_1_Block) {
33	return (
34		<div className="overflow-hidden">
35			<div
36				aria-hidden
37				className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
38			>
39				<div className="absolute top-0 left-0 h-320 w-140 -translate-y-87.5 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
40				<div className="absolute top-0 left-0 h-320 w-60 [translate:5%_-50%] -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
41				<div className="absolute top-0 left-0 h-320 w-60 -translate-y-87.5 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
42			</div>
43			<section>
44				<div className="relative min-h-[90vh]">
45					<AnimatedGroup
46						variants={{
47							container: {
48								visible: {
49									transition: {
50										delayChildren: 1,
51									},
52								},
53							},
54							item: {
55								hidden: {
56									opacity: 0,
57									y: 20,
58								},
59								visible: {
60									opacity: 1,
61									y: 0,
62									transition: {
63										type: "spring",
64										bounce: 0.3,
65										duration: 2,
66									},
67								},
68							},
69						}}
70						className="absolute inset-0 -z-20"
71					>
72						{/* {props?.media?.url ? <Image */}
73						{/*                   src={props.media.url} */}
74						{/*                   alt={props.media.alt} */}
75						{/*                   className="absolute inset-x-0 top-56 -z-20 hidden lg:top-32 dark:block" */}
76						{/*                   width="3276" */}
77						{/*                   height="4095" */}
78						{/*               /> : <></>} */}
79// … truncated