Hero 5

1"use client";
2 
3import Link from "next/link";
4import { ArrowDown, ArrowRight } 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_5_Block } from "~/payload-types";
9import { cn } from "@/registry/default/utils";
10import MediaField from "@/registry/default/lib/fields/media/index";
11import FlickeringGrid from "@/registry/ui/motion-primitives/flickering-grid";
12 
13const transitionVariants = {
14	item: {
15		hidden: {
16			opacity: 0,
17			filter: "blur(12px)",
18			y: 12,
19		},
20		visible: {
21			opacity: 1,
22			filter: "blur(0px)",
23			y: 0,
24			transition: {
25				type: "spring",
26				bounce: 0.3,
27				duration: 1.5,
28			},
29		},
30	},
31};
32 
33export default function HeroSection(props: Hero_5_Block) {
34	return (
35		<div className="overflow-hidden">
36			<section>
37				<div className="relative min-h-[90vh]">
38					{/* FlickeringGrid Background */}
39					<div className="absolute inset-0 -z-10 overflow-hidden">
40						<FlickeringGrid
41							className="absolute inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]"
42							squareSize={4}
43							gridGap={6}
44							color="#60A5FA"
45							maxOpacity={0.5}
46							flickerChance={0.1}
47							height={800}
48							width={800}
49						/>
50					</div>
51 
52					<AnimatedGroup
53						variants={{
54							container: {
55								visible: {
56									transition: {
57										delayChildren: 1,
58									},
59								},
60							},
61							item: {
62								hidden: {
63									opacity: 0,
64									y: 20,
65								},
66								visible: {
67									opacity: 1,
68									y: 0,
69									transition: {
70										type: "spring",
71										bounce: 0.3,
72										duration: 2,
73									},
74								},
75							},
76						}}
77						className="absolute inset-0 -z-20"
78					>
79						{/* Optional background media */}
80					</AnimatedGroup>
81					<div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"></div>
82					<div className="mx-auto max-w-7xl px-6">
83						<div className="text-center sm:mx-auto lg:mt-0 lg:mr-auto">
84							{props.alertLink && (
85								<AnimatedGroup
86									// @ts-expect-error mismatch anim group variants type
87									variants={transitionVariants}
88									className={cn(
89										(!props.alertLabel || !props.alertLink) && "hidden",
90									)}
91								>
92									<Link
93// … truncated