svrjs-nextjs-website/components/shared/HowItWorks.tsx

36 lines
1.1 KiB
TypeScript
Raw Normal View History

2024-06-15 17:30:51 +02:00
import { Features } from "@/constants";
2024-06-15 14:55:33 +02:00
import React from "react";
2024-06-15 17:30:51 +02:00
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
2024-06-15 14:55:33 +02:00
const HowItWorks = () => {
2024-07-25 21:23:26 +02:00
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">
2024-07-25 21:23:26 +02:00
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>
);
2024-06-15 14:55:33 +02:00
};
export default HowItWorks;