35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { Features } from "@/constants";
|
|
import React from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
|
|
|
|
const HowItWorks = () => {
|
|
return (
|
|
<section className="container text-center py-12 sm:py-24">
|
|
<h2 className="text-3xl md:text-5xl font-bold">
|
|
Accelerate your{" "}
|
|
<span className="bg-gradient-to-b from-green-300 to-primary text-transparent bg-clip-text">
|
|
development
|
|
</span>
|
|
</h2>
|
|
<p className="md:w-3/4 mx-auto mt-4 mb-8 text-lg md:text-xl text-muted-foreground">
|
|
Beautifully designed components that you can copy and paste into your
|
|
apps. Accessible. Customizable. Open Source.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{Features.map(({ icon, title, description }) => (
|
|
<Card key={title} className="bg-muted/50">
|
|
<CardHeader>
|
|
<CardTitle className="grid gap-4 place-items-center">
|
|
{icon}
|
|
{title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>{description}</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HowItWorks;
|