Home Crafts

1import { ArrowUpRight } from "lucide-react"
2import Link from "next/link"
3 
4/**
5 * Edit CONTENT / CRAFTS for your studio offerings (capabilities, not prices).
6 * Pair with @atroui/pricing-overview when you want a rate card.
7 */
8const CONTENT = {
9  stamp: "Crafts",
10  headlineBefore: "What we",
11  headlineAccent: "actually ship",
12  headlineAfter: ".",
13  lede: "Capabilities, not a rate card. Prices stay on the Pricing band.",
14}
15 
16const CRAFTS = [
17  {
18    title: "MVP sprints",
19    detail: "One core workflow live in a week — auth, data, deploy.",
20    outcome: "7 days",
21    href: "/services/mvp-sprint",
22  },
23  {
24    title: "AI features",
25    detail: "Streaming UI, guardrails, and cost-aware model wiring.",
26    outcome: "1–2 weeks",
27    href: "/services/ai-feature",
28  },
29  {
30    title: "Design systems",
31    detail: "Tokens, dark-first components, and docs your team can extend.",
32    outcome: "2–3 weeks",
33    href: "/services/design-system",
34  },
35  {
36    title: "Full-stack builds",
37    detail: "Multi-week product work with fixed milestones and handoff.",
38    outcome: "Scoped",
39    href: "/services/full-stack",
40  },
41]
42 
43export function HomeCrafts() {
44  return (
45    <section className="border-t border-border-subtle">
46      <div className="border-b border-border-subtle">
47        <div className="mx-auto max-w-7xl border-x border-border-subtle px-6 py-12 sm:px-10 sm:py-16">
48          <div className="max-w-2xl">
49            <p className="text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
50              {CONTENT.stamp}
51            </p>
52            <h2 className="mt-4 text-3xl font-medium tracking-tight text-foreground sm:text-5xl">
53              {CONTENT.headlineBefore}{" "}
54              <span className="italic text-[var(--color-brand,#0b7bff)]">
55                {CONTENT.headlineAccent}
56              </span>
57              {CONTENT.headlineAfter}
58            </h2>
59            <p className="mt-4 max-w-lg text-[15px] leading-relaxed text-muted-foreground">
60              {CONTENT.lede}
61            </p>
62          </div>
63        </div>
64      </div>
65 
66      <div className="border-b border-border-subtle">
67        <div className="mx-auto max-w-7xl border-x border-border-subtle">
68          <ul className="grid grid-cols-1 divide-y divide-border-subtle sm:grid-cols-2 sm:divide-x md:grid-cols-4 md:divide-y-0">
69            {CRAFTS.map((craft, i) => (
70              <li key={craft.title}>
71                <Link
72                  href={craft.href}
73// … truncated