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

import { Features } from "@/constants";
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";

const FeaturesSection = () => {
  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 FeaturesSection;