diff --git a/app/globals.css b/app/globals.css index 6a14141..0b26c52 100644 --- a/app/globals.css +++ b/app/globals.css @@ -298,11 +298,50 @@ a.cta-primary:focus-visible { outline-offset: 9px; } +/* The status link under the hero terminal. Raw --whisper is ~3.5:1 on + paper, short of AA at body size, so the value text uses whisper mixed + 68% with ink (~6.6:1). The label is ink like the stat labels; the dot + and the arrow keep the full accent. */ +a.hero-status { + color: color-mix(in srgb, var(--whisper) 68%, var(--ink)); +} + +.hero-status-text { + padding-bottom: 1px; + border-bottom: 1px solid transparent; + transition: border-bottom-color 260ms cubic-bezier(0.2, 0.8, 0.2, 1); +} + +a.hero-status:hover .hero-status-text { + border-bottom-color: currentColor; +} + +a.hero-status .arrow { + margin-right: 0; + transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); +} + +a.hero-status:hover .arrow { + transform: translateX(6px); +} + +.status-live { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--whisper); + animation: fleet-pulse 2.4s ease-in-out infinite; +} + @media (prefers-reduced-motion: reduce) { a.cta-primary, - a.cta-primary .arrow { + a.cta-primary .arrow, + a.hero-status .arrow { transition: none; } + .status-live { + animation: none; + } } /* --- hero terminal ----------------------------------------------------- diff --git a/components/site/Hero.tsx b/components/site/Hero.tsx index 7589c60..a698c21 100644 --- a/components/site/Hero.tsx +++ b/components/site/Hero.tsx @@ -1,5 +1,10 @@ import { links } from "@/lib/links"; -import { HERO_FIGURES, HERO_HEADLINE, HERO_LEAD } from "@/lib/copy"; +import { + HERO_FIGURES, + HERO_HEADLINE, + HERO_LEAD, + HERO_STATUS, +} from "@/lib/copy"; import { highlightBrand } from "@/components/ui/brand"; import { Figure } from "@/components/ui/Figure"; import { Frame } from "@/components/ui/Frame"; @@ -25,8 +30,11 @@ export function Hero() { -
-
+ {/* At @4xl the stats and the status link share row 2 so they + baseline-align; below it, DOM order stacks lead/CTAs, stats, + terminal, then the link. */} +
+

{highlightBrand(HERO_LEAD)}

@@ -66,15 +74,37 @@ export function Hero() {
+
-
- {HERO_FIGURES.map((figure) => ( -
- ))} -
+
+ {HERO_FIGURES.map((figure) => ( +
+ ))}
- + + + {/* Mirrors Figure's label/value lines so it baseline-aligns with + the stat strip beside it. */} + + + {HERO_STATUS.label} + + + + + {HERO_STATUS.value} + + → + + + +
diff --git a/lib/copy.ts b/lib/copy.ts index 8b4c04d..b63bb26 100644 --- a/lib/copy.ts +++ b/lib/copy.ts @@ -53,6 +53,14 @@ export const HERO_FIGURES = [ { label: "gas overhead", value: "<1%" }, ] as const satisfies readonly FigureCopy[]; +/** The status link under the hero terminal. Shaped like FigureCopy so it + * shares the stat strip's label/value type (rendered inline in Hero, not + * through Figure). */ +export const HERO_STATUS = { + label: "see also", + value: "Status website", +} as const satisfies FigureCopy; + export const COMPARE_HEADLINE = [ "information scaled.", "supply didn't.", diff --git a/lib/links.ts b/lib/links.ts index 4b97526..1b595b8 100644 --- a/lib/links.ts +++ b/lib/links.ts @@ -8,6 +8,7 @@ export const links = { litepaper: "/decdn_litepaper.pdf", presskit: "/presskit/decdn-presskit.zip", docs: "https://docs.decdn.org/overview/introduction", + stats: "https://stats.decdn.org/", blog: "/blog/", contact: `mailto:${EMAIL}`, privacy: "/legal/privacy/",