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

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;