contact: three rows, zero pitch

This commit is contained in:
kbot
2026-07-06 21:52:49 -05:00
parent e58f2c7c7c
commit 6c1c751313

View File

@@ -48,27 +48,24 @@ export function ContactTerminal() {
} }
return ( return (
<section id="contact" aria-labelledby="contact-title" className="mx-auto max-w-7xl px-4 py-20 text-blacksite-text sm:px-6 lg:px-8"> <section id="contact" aria-labelledby="contact-title" className="mx-auto max-w-7xl px-6 py-28 text-blacksite-text sm:px-8 sm:py-36 lg:px-12">
<p className="section-label mb-12">CONTACT /.07</p>
<div className="border border-blacksite-line bg-blacksite-surface shadow-[0_32px_120px_rgba(0,0,0,0.42)]"> <div className="border border-blacksite-line bg-blacksite-surface shadow-[0_32px_120px_rgba(0,0,0,0.42)]">
<div className="flex items-center justify-between gap-4 border-b border-blacksite-line px-5 py-4 sm:px-7"> <div className="flex items-center gap-3 border-b border-blacksite-line px-5 py-4 sm:px-7">
<p className="font-mono text-xs text-blacksite-muted">&gt; open contact.channel</p> <span aria-hidden="true" className="size-2 rounded-full bg-signal-green shadow-[0_0_18px_rgba(182,255,0,0.5)]" />
<span className="section-label">SECURE HANDOFF</span> <p className="font-mono text-xs text-blacksite-muted">&gt; contact.channel</p>
</div> </div>
<div className="grid gap-0 lg:grid-cols-[0.8fr_1.2fr]"> <div className="grid gap-0 lg:grid-cols-[0.8fr_1.2fr]">
<div className="border-b border-blacksite-line px-5 py-8 sm:px-7 lg:border-b-0 lg:border-r lg:px-10"> <div className="border-b border-blacksite-line px-5 py-8 sm:px-7 lg:border-b-0 lg:border-r lg:px-10">
<p className="section-label mb-4">CONTACT TERMINAL</p>
<h2 id="contact-title" className="font-display text-3xl font-semibold uppercase tracking-[-0.04em] text-blacksite-text sm:text-5xl"> <h2 id="contact-title" className="font-display text-3xl font-semibold uppercase tracking-[-0.04em] text-blacksite-text sm:text-5xl">
Send signal. Send signal.
</h2> </h2>
<p className="mt-5 max-w-md text-sm leading-7 text-blacksite-muted sm:text-base">
Reach the operator directly for systems work, hardened infrastructure, or unusually interesting problems.
</p>
</div> </div>
<div className="divide-y divide-blacksite-line"> <div className="divide-y divide-blacksite-line">
{rows.map((row) => ( {rows.map((row) => (
<div key={row.label} className="grid gap-3 px-5 py-5 sm:px-7 md:grid-cols-[7rem_minmax(0,1fr)] lg:px-8"> <div key={row.label} className="grid gap-3 px-5 py-6 sm:px-7 md:grid-cols-[7rem_minmax(0,1fr)] lg:px-8">
<p className="section-label pt-1">{row.label}</p> <p className="section-label pt-1">{row.label}</p>
{row.kind === "copy" ? ( {row.kind === "copy" ? (
<button <button
@@ -97,13 +94,6 @@ export function ContactTerminal() {
</div> </div>
))} ))}
<div className="grid gap-3 bg-blacksite-surface2/45 px-5 py-5 sm:px-7 md:grid-cols-[7rem_minmax(0,1fr)] lg:px-8">
<p className="section-label">AVAILABILITY</p>
<p className="flex items-center gap-3 font-mono text-sm uppercase tracking-[0.14em] text-blacksite-text">
<span aria-hidden="true" className="size-2 rounded-full bg-signal-green shadow-[0_0_18px_rgba(182,255,0,0.5)]" />
Open to interesting problems
</p>
</div>
</div> </div>
</div> </div>
</div> </div>