Spaces:
Sleeping
Sleeping
File size: 2,088 Bytes
64c5e26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { MedalIcon, MapIcon, PlaneIcon, GiftIcon } from "../components/Icons";
interface FeatureProps {
icon: JSX.Element;
title: string;
description: string;
}
const features: FeatureProps[] = [
{
icon: <MedalIcon />,
title: "Accesibility",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
},
{
icon: <MapIcon />,
title: "Community",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
},
{
icon: <PlaneIcon />,
title: "Scalability",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
},
{
icon: <GiftIcon />,
title: "Gamification",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
},
];
export const HowItWorks = () => {
return (
<section
id="howItWorks"
className="container text-center py-24 sm:py-32"
>
<h2 className="text-3xl md:text-4xl font-bold ">
How It{" "}
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
Works{" "}
</span>
Step-by-Step Guide
</h2>
<p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis
dolor pariatur sit!
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{features.map(({ icon, title, description }: FeatureProps) => (
<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>
);
};
|