Features 2

1import type { Features_2_Block } from "~/payload-types";
2import { Icon } from "@/registry/ui/icon";
3 
4export * from "./config";
5 
6export default function Features(props: NonNullable<Features_2_Block>) {
7	return (
8		<section className="py-12 md:py-20">
9			<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
10				<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
11					<h2 className="text-4xl font-medium text-balance lg:text-5xl">
12						{props.header ?? ""}
13					</h2>
14					<p>{props.subheader ?? ""}</p>
15				</div>
16 
17				<div className="relative mx-auto grid max-w-4xl divide-x divide-y rounded-md border *:p-12 sm:grid-cols-2 lg:grid-cols-3">
18					{(props.features ?? []).map((feature, index) => (
19						<div className="space-y-2" key={`feature-${index}`}>
20							<div className="flex items-center gap-2">
21								<Icon icon={feature.icon} />
22								<h3 className="text-sm font-medium">{feature.header}</h3>
23							</div>
24							<p className="text-sm">{feature.description}</p>
25						</div>
26					))}
27				</div>
28			</div>
29		</section>
30	);
31}