Hero 4

1"use client";
2 
3import Link from "next/link";
4import { Button } from "@/registry/ui/button";
5import { ArrowRight, Mail, SendHorizontal } from "lucide-react";
6import type { Hero_4_Block } from "~/payload-types";
7import MediaField from "@/registry/default/lib/fields/media";
8 
9export default function Hero4Section(props: Hero_4_Block) {
10	return (
11		<section className="overflow-hidden">
12			<div className="relative mx-auto max-w-5xl px-6 py-28 lg:py-20">
13				<div className="lg:flex lg:items-center lg:gap-12">
14					{/* Content - Left Side */}
15					<div className="relative z-10 mx-auto max-w-xl text-center lg:ml-0 lg:w-1/2 lg:text-left">
16						{/* Badge/Alert */}
17						{(props.badgeLabel ?? props.badgeText) && (
18							<Link
19								className="mx-auto flex w-fit items-center gap-2 rounded-[var(--radius)] border p-1 pr-3 lg:ml-0"
20								href={props.badgeHref ?? "#"}
21							>
22								{props.badgeLabel && (
23									<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
24										{props.badgeLabel}
25									</span>
26								)}
27								{props.badgeText && (
28									<span className="text-sm">{props.badgeText}</span>
29								)}
30								<span className="block h-4 w-px bg-[var(--color-border)]"></span>
31								<ArrowRight className="size-4" />
32							</Link>
33						)}
34 
35						{/* Main Heading */}
36						<h1 className="mt-10 text-4xl font-bold text-balance md:text-5xl xl:text-5xl">
37							{props.header}
38						</h1>
39 
40						{/* Subheader */}
41						{props.subheader && (
42							<p className="mt-8 text-balance">{props.subheader}</p>
43						)}
44 
45						{/* Email Form */}
46						<div>
47							<form
48								className="mx-auto my-10 max-w-sm lg:my-12 lg:mr-auto lg:ml-0"
49								action=""
50							>
51								<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
52									<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
53									<input
54										placeholder={props.emailPlaceholder ?? "Your mail address"}
55										className="h-14 w-full bg-transparent pl-12 focus:outline-none"
56										type="email"
57									/>
58									<div className="md:pr-1.5 lg:pr-0">
59										<Button
60											className="h-9 rounded-[var(--radius)] px-4 py-2 shadow-sm shadow-black/20"
61											aria-label="submit"
62											type="submit"
63										>
64											<span className="hidden md:block">
65// … truncated