Source Code
features-icon-cards.tsx
1interface Feature {
2 title: string;
3 description: string;
4 color: string;
5 bgColor: string;
6 icon: React.ReactNode;
7}
8
9const features: Feature[] = [
10 {
11 title: "Fast Performance",
12 description: "Lightning quick loading times",
13 color: "text-pink-500",
14 bgColor: "bg-pink-500/10",
15 icon: (
16 <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" className="size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
17 <path d="M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z"></path>
18 </svg>
19 )
20 },
21 {
22 title: "Easy Setup",
23 description: "Simple configuration with minimal code required",
24 color: "text-green-500",
25 bgColor: "bg-green-500/10",
26 icon: (
27 <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" className="size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
28 <path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path>
29 </svg>
30 )
31 },
32 {
33 title: "Beautiful Design",
34 description: "Modern aesthetics with stunning visual appeal",
35 color: "text-sky-500",
36 bgColor: "bg-sky-500/10",
37 icon: (
38 <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" className="size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
39 <path d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path>
40 </svg>
41 )
42 },
43 {
44 title: "Great Value",
45 description: "Affordable pricing with premium features",
46 color: "text-green-500",
47 bgColor: "bg-green-500/10",
48 icon: (
49 <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 288 512" className="size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
50 <path d="M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z"></path>
51 </svg>
52 )
53 },
54 {
55 title: "Secure",
56 description: "Enterprise-grade security with data protection",
57 color: "text-purple-500",
58 bgColor: "bg-purple-500/10",
59 icon: (
60 <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" className="size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
61 <path d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256.1 446.3l-.1-381 175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7z"></path>
62 </svg>
63 )
64 },
65 {
66 title: "Team Support",
67 description: "Dedicated support team available around the clock",
68 color: "text-orange-500",
69 bgColor: "bg-orange-500/10",
70 icon: (
71 <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 640 512" className="size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
72 <path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path>
73 </svg>
74 )
75 }
76];
77
78function FeatureCard({ feature }: { feature: Feature }) {
79 return (
80 <div className="group relative block h-full w-full p-2">
81 <div className="bg-background relative z-20 flex h-full flex-col items-start justify-between rounded-3xl p-5 border border-gray-200/40">
82 <div className={`size-15 flex items-center justify-center rounded-2xl ${feature.color} ${feature.bgColor} mb-10`}>
83 {feature.icon}
84 </div>
85 <div className="">
86 <h1 className="text-xl text-foreground font-medium tracking-tight">{feature.title}</h1>
87 <p className="text-muted-foreground text-sm">{feature.description}</p>
88 </div>
89 </div>
90 </div>
91 );
92}
93
94export default function FeaturesIconCards() {
95 return (
96 <section className="min-h-screen overflow-hidden py-32 bg-muted/20">
97 <div className="container mx-auto flex w-full flex-col items-center justify-center px-4">
98 <div className="max-w-5xl mx-auto">
99 <h2 className="relative z-20 py-2 font-sans text-5xl font-semibold text-center tracking-tighter md:py-7">
100 Features That speak for <br className="hidden lg:block" /> <span className="opacity-50">Themselves</span>
101 </h2>
102 <div className="relative grid w-full max-w-3xl mx-auto grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
103 {features.map((feature, index) => (
104 <FeatureCard key={index} feature={feature} />
105 ))}
106 </div>
107 </div>
108 </div>
109 </section>
110 );
111}
