Features 1

1import type { ComponentPropsWithRef } from "react";
2import type { Features_1_Block } from "~/payload-types";
3import { Card, CardHeader, CardContent } from "@/registry/ui/card";
4import { Icon } from "@/registry/ui/icon";
5 
6export * from "./config";
7 
8export default function Features_1({
9  header,
10  subheader,
11  features,
12}: Features_1_Block) {
13  return (
14    <section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
15      <div className="@container mx-auto max-w-5xl px-6">
16        <div className="text-center">
17          <h2 className="text-4xl font-semibold text-balance lg:text-5xl">
18            {header}
19          </h2>
20          <p className="mt-4">{subheader}</p>
21        </div>
22        <Card className="mx-auto mt-8 grid max-w-sm divide-y overflow-hidden shadow-zinc-950/5 *:text-center md:mt-16 @min-4xl:max-w-full @min-4xl:grid-cols-3 @min-4xl:divide-x @min-4xl:divide-y-0">
23          {features.map((feature, index) => (
24            <div className="group shadow-zinc-950/5" key={`feature-${index}`}>
25              <CardHeader className="pb-3">
26                {feature.icon && (
27                  <CardDecorator>
28                    <Icon icon={feature.icon} />
29                  </CardDecorator>
30                )}
31 
32                <h3 className="mt-6 font-medium">{feature.title}</h3>
33              </CardHeader>
34 
35              <CardContent>
36                <p className="text-sm">{feature.description}</p>
37              </CardContent>
38            </div>
39          ))}
40        </Card>
41      </div>
42    </section>
43  );
44}
45 
46function CardDecorator({
47  children,
48  ...divProps
49}: ComponentPropsWithRef<"div">) {
50  return (
51    <div
52      className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]"
53      {...divProps}
54    >
55      <div
56        aria-hidden
57        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]"
58      />
59      <div
60        aria-hidden
61        className="to-background absolute inset-0 bg-radial from-transparent to-75%"
62      />
63// … truncated