Features

Overview

A responsive 3-column grid of feature cards, each with an icon, title, and description.

Usage

import { Features } from '@/components/landing/Features'

export default function Page() {
  return <Features />
}

Customization

Edit components/landing/Features.tsx directly. The features are defined as an array in the component:

const features = [
  {
    icon: Shield,           // Lucide icon component
    title: 'Secure by Default',
    description: 'RLS, server-side queries, Zod validation...',
  },
  // Add or remove features...
]

Changing Icons

Import any icon from lucide-react:

import { Shield, Zap, CreditCard } from 'lucide-react'

Changing Grid Layout

The grid defaults to 3 columns on desktop. Modify the Tailwind classes:

<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">

Change lg:grid-cols-3 to lg:grid-cols-2 for a 2-column layout.