Features List

import {
  GitBranch,
  Globe,
  KeyRound,
  RotateCcw,
  ShieldCheck,
  Webhook,
} from "lucide-react";

const features = [
  {
    icon: GitBranch,
    title: "Preview every branch",
    description: "Each pull request gets its own URL, torn down on merge.",
  },
  {
    icon: Globe,
    title: "Edge by default",
    description: "Static assets and functions deployed to 30+ regions.",
  },
  {
    icon: RotateCcw,
    title: "Instant rollbacks",
    description: "Every deploy is immutable — going back is one click.",
  },
  {
    icon: ShieldCheck,
    title: "SOC 2 Type II",
    description: "Audited yearly, with SSO and audit logs on every plan.",
  },
  {
    icon: Webhook,
    title: "Webhooks for everything",
    description: "Deploys, comments, checks — every event has a hook.",
  },
  {
    icon: KeyRound,
    title: "Scoped tokens",
    description: "Per-project, per-environment credentials that expire.",
  },
];

export default function FeaturesList() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-6xl px-6 py-20 sm:py-24">
        <div className="mb-12 max-w-md">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Everything you need, nothing to babysit
          </h2>
          <p className="mt-2 text-muted-foreground">
            The features you'd build eventually — already built, already
            tested.
          </p>
        </div>

        <div className="grid gap-x-10 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div key={feature.title}>
              <div className="flex size-9 items-center justify-center rounded-lg border border-border/60 bg-card">
                <feature.icon className="size-4" />
              </div>
              <h3 className="mt-4 text-sm font-medium">{feature.title}</h3>
              <p className="mt-1.5 text-sm text-muted-foreground">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}