Feature Grid

1/**
2 * Edit CONTENT / FEATURES for your product landing page.
3 */
4const CONTENT = {
5  stamp: "Product",
6  headlineBefore: "Everything you need to",
7  headlineAccent: "ship the page",
8  headlineAfter: ".",
9  lede: "Replace these with your real product pillars. Keep one job per card.",
10}
11 
12const FEATURES = [
13  {
14    title: "Owned source",
15    detail:
16      "CLI installs land in your repo. Edit copy, fork layout, keep git history.",
17  },
18  {
19    title: "Dark-first tokens",
20    detail:
21      "Black canvas, brand accent, glass surfaces — light mode as an alternate.",
22  },
23  {
24    title: "Host APIs",
25    detail:
26      "Optional hardened /api handlers. Bring your own keys; AtroUI holds none.",
27  },
28  {
29    title: "Production sections",
30    detail:
31      "Heroes, pricing, forms, and tools extracted from shipped studio work.",
32  },
33  {
34    title: "Brand chrome",
35    detail:
36      "getBrand() keeps headers, footers, and mailto coherent across pages.",
37  },
38  {
39    title: "BYOK tools",
40    detail:
41      "OG, thumbnail, and scope demos run preview/rules without paid keys.",
42  },
43]
44 
45export function FeatureGrid() {
46  return (
47    <section className="border-t border-border-subtle">
48      <div className="border-b border-border-subtle">
49        <div className="mx-auto max-w-7xl border-x border-border-subtle px-6 py-12 sm:px-10 sm:py-16">
50          <div className="max-w-2xl">
51            <p className="text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
52              {CONTENT.stamp}
53            </p>
54            <h2 className="mt-4 text-3xl font-medium tracking-tight text-foreground sm:text-5xl">
55              {CONTENT.headlineBefore}{" "}
56              <span className="italic text-[var(--color-brand,#0b7bff)]">
57                {CONTENT.headlineAccent}
58              </span>
59              {CONTENT.headlineAfter}
60            </h2>
61            <p className="mt-4 max-w-lg text-[15px] leading-relaxed text-muted-foreground">
62              {CONTENT.lede}
63            </p>
64          </div>
65        </div>
66      </div>
67 
68      <div className="border-b border-border-subtle">
69        <div className="mx-auto max-w-7xl border-x border-border-subtle">
70          <ul className="grid grid-cols-1 gap-px overflow-hidden bg-border-subtle sm:grid-cols-2 md:grid-cols-3">
71            {FEATURES.map((feature, i) => (
72              <li key={feature.title} className="bg-background p-6 sm:p-8">
73// … truncated