Home Principle

1/**
2 * Edit CONTENT / PRINCIPLES to match your studio.
3 * Matches the AtroUI docs Home Principle band.
4 */
5const CONTENT = {
6  stamp: "How we work",
7  headlineBefore: "You talk to the person who",
8  headlineAccent: "builds it",
9  headlineAfter: ".",
10}
11 
12const PRINCIPLES = [
13  {
14    title: "Fixed scope",
15    status: "Locked",
16    detail: "Agreed before day one - no creep theatre.",
17    tone: "ok" as const,
18  },
19  {
20    title: "Fixed price",
21    status: "Guaranteed",
22    detail: "$4,800 MVP · from $2,400 AI feature.",
23    tone: "brand" as const,
24  },
25  {
26    title: "No handoffs",
27    status: "Direct",
28    detail: "One senior engineer. Not your 14th channel.",
29    tone: "warm" as const,
30  },
31]
32 
33const toneText = {
34  ok: "text-emerald-700 dark:text-emerald-400",
35  brand: "text-[var(--color-brand,#0b7bff)]",
36  warm: "text-amber-800 dark:text-amber-400",
37} as const
38 
39const toneDot = {
40  ok: "bg-emerald-700 dark:bg-emerald-400",
41  brand: "bg-[var(--color-brand,#0b7bff)]",
42  warm: "bg-amber-800 dark:bg-amber-400",
43} as const
44 
45export function HomePrinciple() {
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          </div>
62        </div>
63      </div>
64 
65      <div className="border-b border-border-subtle">
66        <div className="mx-auto max-w-7xl border-x border-border-subtle">
67          <ol className="grid grid-cols-1 divide-y divide-border-subtle md:grid-cols-3 md:divide-x md:divide-y-0">
68            {PRINCIPLES.map((item, i) => (
69              <li key={item.title} className="p-6 sm:p-8">
70                <p className="font-mono text-[11px] tabular-nums text-muted-foreground">
71                  {String(i + 1).padStart(2, "0")}
72                </p>
73                <h3 className="mt-3 text-lg font-medium text-foreground">
74                  {item.title}
75                </h3>
76// … truncated