Features 3

1import type { ComponentPropsWithRef } from "react";
2 
3import type { Features_3_Block } from "~/payload-types";
4 
5import { Card, CardContent, CardHeader } from "@/registry/ui/card";
6import { Icon } from "@/registry/ui/icon";
7 
8export * from "./config";
9 
10export default function Features_3({
11	features,
12	header,
13	subheader,
14}: Features_3_Block) {
15	return (
16		<section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
17			<div className="@container mx-auto max-w-5xl px-6">
18				<div className="text-center">
19					<h2 className="text-4xl font-semibold text-balance lg:text-5xl">
20						{header}
21					</h2>
22					<p className="mt-4">{subheader}</p>
23				</div>
24				<Card className="mx-auto mt-8 grid max-w-sm overflow-hidden *:text-center md:mt-16 @min-4xl:max-w-full @min-4xl:grid-cols-3">
25					{features.map((feature, index) => (
26						<div className="group" key={`feature-${index}`}>
27							<CardHeader className="pb-3">
28								{feature.icon && (
29									<CardDecorator>
30										<Icon icon={feature.icon} />
31									</CardDecorator>
32								)}
33 
34								<h3 className="mt-6 font-medium">{feature.title}</h3>
35							</CardHeader>
36 
37							<CardContent>
38								<p className="text-sm">{feature.description}</p>
39							</CardContent>
40						</div>
41					))}
42				</Card>
43			</div>
44		</section>
45	);
46}
47 
48function CardDecorator({
49	children,
50	...divProps
51}: ComponentPropsWithRef<"div">) {
52	return (
53		<div
54			className="relative mx-auto size-36 duration-200 dark:group-hover:bg-white/5"
55			{...divProps}
56		>
57			<div
58				aria-hidden
59				className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
60			/>
61			<div
62				aria-hidden
63				className="absolute inset-0 bg-[linear-gradient(to_left,var(--color-border)_1px,transparent_1px),linear-gradient(to_top,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
64			/>
65			<div
66				aria-hidden
67				className="to-white absolute inset-0 bg-radial from-transparent to-75%"
68			/>
69			<div className="bg-transparent absolute inset-0 m-auto flex size-12 items-center justify-center border-t border-l">
70				{children}
71			</div>
72		</div>
73	);
74}