Home Who

1import { ArrowRight } from "lucide-react"
2import Link from "next/link"
3 
4import { getBrand } from "@/lib/brand"
5 
6/**
7 * Edit CONTENT to change bio, CTAs, and links.
8 * This file is copied into your project by the AtroUI registry.
9 */
10const CONTENT = {
11  stamp: "Who",
12  headlineSuffix: "is me.",
13  bio: "Solo founder. Every line of code, every pixel, every email. When you hire the studio, you talk to the person building your thing.",
14  aboutHref: "/about",
15  aboutLabel: "More about the studio",
16  externalHref: "https://example.com",
17  externalLabel: "Website",
18  ctaStamp: "Ready when you are",
19  ctaHeadline: "Tell us the shape of your next week.",
20  ctaBody:
21    "Free 15-minute intro. Two project slots open this quarter. We'll say honestly if we're a fit.",
22  ctaLabel: "Start a project",
23  ctaHref: "/contact",
24  initials: "YO",
25}
26 
27export type HomeWhoProps = {
28  brandName?: string
29  email?: string
30  bio?: string
31}
32 
33export function HomeWho({
34  brandName,
35  email,
36  bio = CONTENT.bio,
37}: HomeWhoProps = {}) {
38  const brand = getBrand()
39  const name = brandName ?? brand.name
40  const mail = email ?? brand.email
41 
42  return (
43    <section className="border-t border-border-subtle">
44      <div className="border-b border-border-subtle">
45        <div className="mx-auto grid max-w-7xl grid-cols-1 border-x border-border-subtle lg:grid-cols-12">
46          <div className="border-b border-border-subtle p-6 sm:p-8 lg:col-span-7 lg:border-r lg:border-b-0 lg:p-10">
47            <div className="flex flex-col gap-6 sm:flex-row sm:gap-8">
48              <div
49                aria-hidden
50                className="flex size-16 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold tracking-wide text-foreground"
51              >
52                {CONTENT.initials}
53              </div>
54              <div className="min-w-0">
55                <p className="text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
56                  {CONTENT.stamp}
57                </p>
58                <h2 className="mt-3 text-3xl font-medium tracking-tight text-foreground sm:text-4xl">
59                  {name}{" "}
60                  <span className="italic text-[var(--color-brand,#0b7bff)]">
61                    {CONTENT.headlineSuffix}
62                  </span>
63                </h2>
64                <p className="mt-4 max-w-md text-[15px] leading-relaxed text-muted-foreground">
65                  {bio}
66                </p>
67// … truncated