Features

Overview

The Features component renders a responsive grid of feature cards. Each card shows a Lucide icon, a title, and a short description.

File: src/components/Features.tsx

Data Structure

Features are defined in the features array at the top of the file:

const features = [
  {
    icon: Shield,
    title: "Authentication",
    description: "Email/password, Google & GitHub OAuth, password reset..."
  },
  // ...5 more entries
];

Each entry has three properties:

Customization

Add or remove features

Add a new object to the features array. Import the icon from lucide-react:

import { Shield, CreditCard, Mail, LayoutDashboard, Palette, Rocket, Zap } from "lucide-react";

const features = [
  // ...existing features,
  {
    icon: Zap,
    title: "API Routes",
    description: "Pre-built API endpoints with rate limiting and validation.",
  },
];

Remove an entry to reduce the grid. The grid adapts automatically since it uses sm:grid-cols-2 lg:grid-cols-3.

Change the section heading

Edit the <h2> and <p> inside the heading div:

<h2 className="text-3xl font-bold text-gray-900 sm:text-4xl">
  Why choose us
</h2>
<p className="mx-auto mt-4 max-w-2xl text-lg text-gray-500">
  Your custom subtitle here.
</p>

Change card styling

Each card uses these key classes:

To change the accent color, replace indigo with your brand color (e.g., bg-blue-50 and text-blue-600).

Grid layout

The grid uses grid gap-8 sm:grid-cols-2 lg:grid-cols-3:

• 1 column on mobile
• 2 columns on sm (640px+)
• 3 columns on lg (1024px+)

For 4 columns, add xl:grid-cols-4. For 2 columns max, remove lg:grid-cols-3.

Tips

• Keep descriptions under 30 words for visual consistency across cards.
• Use icons from the same Lucide family for a cohesive look. Browse available icons at lucide.dev.
• The section has no background color (bg-white inherited). Add bg-gray-50 to the <section> for a subtle contrast with adjacent sections.