Features 1

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion, useReducedMotion } from "motion/react";
5import { useEffect, useState } from "react";
6 
7const SPRING = {
8  bounce: 0.1,
9  duration: 0.25,
10  type: "spring" as const,
11};
12 
13const features = [
14  {
15    description:
16      "Optimized for performance with minimal bundle size and efficient rendering.",
17    icon: (
18      <svg
19        aria-hidden="true"
20        className="h-6 w-6"
21        fill="none"
22        stroke="currentColor"
23        strokeWidth={1.5}
24        viewBox="0 0 24 24"
25      >
26        <path
27          d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
28          strokeLinecap="round"
29          strokeLinejoin="round"
30        />
31      </svg>
32    ),
33    title: "Lightning Fast",
34  },
35  {
36    description:
37      "Built with ARIA attributes, keyboard navigation, and reduced motion support.",
38    icon: (
39      <svg
40        aria-hidden="true"
41        className="h-6 w-6"
42        fill="none"
43        stroke="currentColor"
44        strokeWidth={1.5}
45        viewBox="0 0 24 24"
46      >
47        <path
48          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"
49          strokeLinecap="round"
50          strokeLinejoin="round"
51        />
52      </svg>
53    ),
54    title: "Accessible",
55  },
56  {
57    description:
58      "Fully customizable with Tailwind CSS classes and design tokens.",
59    icon: (
60      <svg
61        aria-hidden="true"
62        className="h-6 w-6"
63        fill="none"
64        stroke="currentColor"
65        strokeWidth={1.5}
66        viewBox="0 0 24 24"
67      >
68        <path
69          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"
70          strokeLinecap="round"
71          strokeLinejoin="round"
72        />
73      </svg>
74    ),
75    title: "Customizable",
76  },
77  {
78    description:
79      "Full TypeScript support with exported types for all component props.",
80    icon: (
81      <svg
82        aria-hidden="true"
83        className="h-6 w-6"
84        fill="none"
85        stroke="currentColor"
86        strokeWidth={1.5}
87// … truncated