contact: three rows, zero pitch
This commit is contained in:
@@ -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">> 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">> 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>
|
||||||
|
|||||||
Reference in New Issue
Block a user