75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardHeader } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
import { Settings2, Sparkles, Zap } from "lucide-react";
|
|
import { ReactNode } from "react";
|
|
import { useContent } from "@/components/layout/content-provider";
|
|
|
|
const featureIcons = [Zap, Settings2, Sparkles];
|
|
|
|
export default function FeaturesCardGrid() {
|
|
const content = useContent();
|
|
const { featuresCardGrid } = content.pages.home;
|
|
const features = featuresCardGrid.items.map((item, i) => ({
|
|
...item,
|
|
icon: featureIcons[i] ?? Zap,
|
|
}));
|
|
|
|
return (
|
|
<section
|
|
className="py-16 md:py-24 lg:py-32 border-t border-border/50"
|
|
aria-labelledby="features-heading"
|
|
>
|
|
<div className="@container mx-auto max-w-5xl px-6" dir="rtl">
|
|
<div className="text-center">
|
|
<h2
|
|
id="features-heading"
|
|
className="text-heading-2 font-semibold leading-tight text-foreground"
|
|
>
|
|
{featuresCardGrid.heading}
|
|
</h2>
|
|
</div>
|
|
<div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-10 grid max-w-sm gap-6 md:mt-14 lg:gap-8">
|
|
{features.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<Card
|
|
key={item.title}
|
|
className="group border-border/80 bg-card text-center shadow-sm transition-shadow hover:shadow-md hover:border-primary/20"
|
|
>
|
|
<CardHeader className="pb-4">
|
|
<CardDecorator>
|
|
<Icon
|
|
className="size-6 text-primary"
|
|
aria-hidden
|
|
/>
|
|
</CardDecorator>
|
|
<h3 className="mt-5 text-heading-5 font-medium text-foreground">
|
|
{item.title}
|
|
</h3>
|
|
<p className="mt-2 text-body-sm leading-relaxed text-muted-foreground">
|
|
{item.description}
|
|
</p>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const CardDecorator = ({ children }: { children: ReactNode }) => (
|
|
<div className="mask-radial-from-40% mask-radial-to-60% relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-primary)_0.12,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-primary)_0.2,transparent)]">
|
|
<div
|
|
aria-hidden
|
|
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] opacity-80"
|
|
/>
|
|
<div className="bg-card border-border/60 absolute inset-0 m-auto flex size-12 items-center justify-center rounded-lg border shadow-sm">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|