Hero 2

1"use client";
2 
3import Link from "next/link";
4import { Button } from "@/registry/ui/button";
5import type { Hero_2_Block } from "~/payload-types";
6import MediaField from "@/registry/default/lib/fields/media/index";
7import { cn } from "@/registry/default/utils";
8 
9export default function Hero2Section(props: Hero_2_Block) {
10	return (
11		<section className="relative overflow-hidden">
12			{/* Content Container */}
13			<div className="py-24 md:pb-32 lg:pt-44 lg:pb-56">
14				<div className="relative mx-auto flex max-w-7xl flex-col px-6 lg:flex-row lg:items-center lg:px-12">
15					{/* Left Content Column */}
16					<div className="mx-auto max-w-lg text-center lg:mx-0 lg:w-1/2 lg:max-w-full lg:text-left">
17						{/* Main Heading */}
18						<h1 className="text-5xl font-semibold text-balance md:text-6xl xl:text-7xl">
19							{props.header}
20						</h1>
21 
22						{/* Subheader */}
23						{props.subheader && (
24							<p className="text-muted-foreground mt-6 text-lg text-pretty">
25								{props.subheader}
26							</p>
27						)}
28 
29						{/* CTA Buttons */}
30						<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row lg:justify-start">
31							{/* Primary CTA */}
32							<Button
33								asChild
34								size="lg"
35								className="inline-flex h-11 items-center justify-center gap-2 rounded-lg px-6 text-base font-medium whitespace-nowrap shadow-sm"
36							>
37								<Link href={props.primaryCtaHref}>{props.primaryCtaLabel}</Link>
38							</Button>
39 
40							{/* Secondary CTA */}
41							<Button
42								asChild
43								variant="outline"
44								size="lg"
45								className="inline-flex h-11 items-center justify-center gap-2 rounded-lg px-6 text-base font-medium whitespace-nowrap"
46							>
47								<Link href={props.secondaryCtaHref}>
48									{props.secondaryCtaLabel}
49								</Link>
50							</Button>
51						</div>
52					</div>
53 
54					{/* Right Image Column */}
55					{props.media && (
56						<div className="relative mt-12 lg:mt-0 lg:w-1/2 lg:pl-12">
57							<div className="relative aspect-[4/3] w-full overflow-hidden rounded-2xl lg:aspect-square">
58								<MediaField
59									media={props.media}
60									width="800"
61									height="800"
62									className={cn(
63										"size-full object-cover object-center",
64										"rounded-2xl shadow-2xl",
65									)}
66								/>
67							</div>
68							{/* Decorative background gradient */}
69							<div
70								aria-hidden="true"
71// … truncated