index.tsx
"use client";
import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { useEffect, useState } from "react";
const SPRING = {
bounce: 0.1,
duration: 0.25,
type: "spring" as const,
};
const features = [
{
description:
"Optimized for performance with minimal bundle size and efficient rendering.",
icon: (
<svg
aria-hidden="true"
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth={1.5}
viewBox="0 0 24 24"
>
<path
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Lightning Fast",
},
{
description:
"Built with ARIA attributes, keyboard navigation, and reduced motion support.",
icon: (
<svg
aria-hidden="true"
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth={1.5}
viewBox="0 0 24 24"
>
<path
d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Accessible",
},
{
description:
"Fully customizable with Tailwind CSS classes and design tokens.",
icon: (
<svg
aria-hidden="true"
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth={1.5}
viewBox="0 0 24 24"
>
<path
d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Customizable",
},
{
description:
"Full TypeScript support with exported types for all component props.",
icon: (
<svg
aria-hidden="true"
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth={1.5}
viewBox="0 0 24 24"
>
<path
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "TypeScript First",
},
{
description:
"Smooth spring animations powered by Motion with configurable easing.",
icon: (
<svg
aria-hidden="true"
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth={1.5}
viewBox="0 0 24 24"
>
<path
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Animated",
},
{
description:
"Free and open source. Install via the shadcn registry with one command.",
icon: (
<svg
aria-hidden="true"
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth={1.5}
viewBox="0 0 24 24"
>
<path
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Open Source",
},
];
export function FeaturesGrid() {
const shouldReduceMotion = useReducedMotion();
const [isHoverDevice, setIsHoverDevice] = useState(false);
useEffect(() => {
const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
setIsHoverDevice(mq.matches);
const handler = (e: MediaQueryListEvent) => setIsHoverDevice(e.matches);
mq.addEventListener("change", handler);
return () => mq.removeEventListener("change", handler);
}, []);
return (
<section aria-labelledby="features-grid-heading">
<div className="py-24 md:py-32">
<div className="mx-auto max-w-6xl px-6">
<div className="mx-auto mb-16 max-w-2xl text-center">
<h2
className="text-balance font-bold text-3xl tracking-tight md:text-4xl"
id="features-grid-heading"
>
Everything you need to build
</h2>
<p className="mt-4 text-foreground/70 text-lg">
Production-ready components with animations, accessibility, and
TypeScript built in.
</p>
</div>
<ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{features.map((feature, index) => (
<motion.li
className={cn(
"rounded-xl border bg-background p-6 transition-shadow",
isHoverDevice && !shouldReduceMotion && "hover:shadow-md"
)}
initial={
shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
}
key={feature.title}
transition={
shouldReduceMotion
? { duration: 0 }
: { ...SPRING, delay: index * 0.05 }
}
viewport={{ margin: "-100px", once: true }}
whileHover={
isHoverDevice && !shouldReduceMotion ? { y: -4 } : undefined
}
whileInView={
shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
}
>
<div className="mb-4 inline-flex rounded-lg bg-foreground/5 p-2.5 text-foreground">
{feature.icon}
</div>
<h3 className="mb-2 font-semibold text-foreground">
{feature.title}
</h3>
<p className="text-foreground/70 text-sm leading-relaxed">
{feature.description}
</p>
</motion.li>
))}
</ul>
</div>
</div>
</section>
);
}
export default FeaturesGrid;
