feature-1

1import type React from "react";
2 
3// https://magicui.design/docs/components/grid-pattern
4import { GridPattern } from "@/components/ui/grid-pattern";
5 
6import { cn } from "@/lib/utils";
7 
8type FeatureType = {
9  title: string;
10  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
11  description: string;
12};
13 
14type FeatureCardPorps = React.ComponentProps<"div"> & {
15  feature: FeatureType;
16};
17 
18export function FeatureCard({
19  feature,
20  className,
21  ...props
22}: FeatureCardPorps) {
23  return (
24    <div className={cn("relative overflow-hidden p-6", className)} {...props}>
25      <div className="-mt-2 -ml-20 pointer-events-none absolute top-0 left-1/2 size-full [mask-image:radial-gradient(farthest-side_at_top,white,transparent)]">
26        <GridPattern
27          className="absolute inset-0 size-full stroke-foreground/20"
28          height={40}
29          width={40}
30          x={5}
31        />
32      </div>
33      <feature.icon
34        aria-hidden
35        className="size-6 text-foreground/75"
36        strokeWidth={1}
37      />
38      <h3 className="mt-10 text-sm md:text-base">{feature.title}</h3>
39      <p className="relative z-20 mt-2 font-light text-muted-foreground text-xs">
40        {feature.description}
41      </p>
42    </div>
43  );
44}