feat(home): add an accessible pre-release banner (#6)

* feat(home): add an accessible pre-release banner

Adds a status strip above the hero: v0.1.0-rc.1 is in final testing,
with no download links yet, plus a defensive footer-links wrap.

Refs #5

Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>

* fix(home): drop the duplicate GitHub mention in the release banner

The body sentence already said "follow progress on GitHub" right
next to a link with the same label; the sentence no longer repeats
what the link already says.

Refs #5

Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>

* feat(home): add decorative emoji to the H1 and section headings

My call: the README's lite emoji treatment (one emoji per H1/H2,
decorative, nothing in code blocks or below H2) carries over to this
page's headings -- a lock on the hero title, and one icon per section
chosen to match its own wording (anchor for "trust anchor", key for
"your keys", satellite for the fleet of linked nodes).

Each icon sits in its content object as a Unicode escape rather than
a literal character, since this repo's hooks block emoji in source
files outside Markdown/GitHub config; the escape still renders as the
real character in the built page. Every icon is wrapped in an
aria-hidden span so screen readers read only the heading text.

Refs #5

Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>

* fix(site): keep the hero headline to three lines

The two-line headline was wrapping to four visual lines on narrow
phones and again in the two-column desktop layout, where this
column is well under half the viewport. Scaled the font-size with a
container query (clamp against cqw on the hero's own copy column,
not the viewport) instead of a vw-based clamp, since the viewport
width was never the real constraint, and added text-wrap: balance so
a wrapped line breaks evenly rather than leaving a short orphan.

Also bound the leading emoji to the headline's first word in a
white-space: nowrap span, so they can never land on separate lines.

Checked with a headless-Chrome script in scratch (line count from
the h1's rendered height over its line-height, and scrollWidth vs
clientWidth for overflow) at 320, 360, 390, 768, 1024 and 1440px:
2 lines and no horizontal overflow at every width.

Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>

* fix(site): put heading emoji after the text

Moves each decorative emoji from the front of its heading to right
after the word it pictures: the lock after "break into", the anchor
after "anchor", the key after "keys", the satellite after "node".
Added a shared splitTrailingWord helper (app/lib/text.ts) so both
the hero H1 and the H2 Section headings can split off that last word
and pair it with the emoji inside one white-space: nowrap span,
still aria-hidden so screen readers only read the heading text.

Re-checked the hero stays at or under 3 lines with the emoji now
trailing: 3 lines at 320px, 2 lines everywhere else, no horizontal
overflow at any of the 6 widths.

Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>

* fix(site): restore full-width trust model and manager sections

The trust-model and fleetos-manager sections each put a single block
of prose in a 42rem-capped column with nothing beside it, so on a
wide screen the visible content sat in roughly the left half of the
container while the hero and the what-it-is feature grid used the
full width. Added an opt-in Section layout="split": head and body
side by side in the hero's own 1.1fr/0.9fr column ratio, stacking to
one column at the existing 860px breakpoint. The prose still wraps
at its own readable max-width inside that column; only the section's
layout changed, not its copy. what-it-is keeps the default stacked
layout -- its feature grid already fills the width on its own.

Extended the scratch check to measure the true rendered content width
of each section (via Range rects over its text, not a wrapper div's
box, since a block wrapper stretches to its parent's width even when
its content doesn't) against the hero's, at 1024 and 1440px (the
widths above the two-column breakpoint; narrower widths already stack
to one column everywhere). It failed before this change (roughly
200-320px short at those two widths) and passes now (within 100px,
matching how two columns of ragged prose and card text naturally
differ).

Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>

---------

Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>
Co-authored-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>

Author: Bugs5382

app/components/marketing.css

@@ -89,6 +89,63 @@
   }
 }
 
+/* Release banner */
+.release-banner {
+  border-bottom: 1px solid hsl(var(--border));
+  background: color-mix(in srgb, hsl(var(--warning)) 10%, hsl(var(--card)));
+}
+
+.release-banner__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
+  padding-block: 0.75rem;
+  border-inline-start: 4px solid hsl(var(--warning));
+}
+
+.release-banner__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.release-banner__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: hsl(var(--warning));
+  flex-shrink: 0;
+}
+
+.release-banner__text {
+  margin: 0;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.release-banner__text strong {
+  color: hsl(var(--foreground));
+}
+
+.release-banner__link {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.release-banner__link:hover,
+.release-banner__link:focus-visible {
+  color: hsl(var(--foreground));
+}
+
 /* Hero */
 .hero {
   position: relative;
@@ -138,6 +195,14 @@
   grid-template-columns: 1.1fr 0.9fr;
 }
 
+.hero__copy {
+  /* The headline's available width is this column's width, not the
+     viewport's -- at the two-column desktop breakpoint this column is well
+     under half the viewport. A container query (not a vw-based clamp) lets
+     the headline size track its actual column. */
+  container-type: inline-size;
+}
+
 .hero__eyebrow {
   font-family: var(--font-mono);
   font-size: 0.875rem;
@@ -148,18 +213,33 @@
 }
 
 .hero__headline {
-  font-size: 3.25rem;
-  line-height: 1.1;
+  /* A floor for the smallest phones, a cqw-driven middle so it scales with
+     this column's own width (see .hero__copy's container-type), a ceiling
+     so it never grows past the original design size. Tuned so the two-line
+     headline stays at or under 3 wrapped lines at every width this site is
+     checked at, including the narrower column the two-column desktop
+     layout leaves it. */
+  font-size: clamp(1.25rem, 0.7rem + 3.3cqw, 2.6rem);
+  line-height: 1.15;
   font-weight: 700;
   display: flex;
   flex-direction: column;
   margin-bottom: 1.5rem;
 }
 
+.hero__headline span {
+  text-wrap: balance;
+}
+
 .hero__headline-accent {
   color: hsl(var(--primary));
 }
 
+.hero__headline-icon {
+  display: inline-block;
+  white-space: nowrap;
+}
+
 .hero__lede {
   font-size: 1.125rem;
   color: hsl(var(--muted-foreground));
@@ -184,10 +264,6 @@
   .hero__grid {
     grid-template-columns: 1fr;
   }
-
-  .hero__headline {
-    font-size: 2.5rem;
-  }
 }
 
 /* Terminal card */
@@ -282,6 +358,28 @@
   margin-bottom: 2rem;
 }
 
+/* Split layout: head and body side by side in the same column ratio as the
+   hero's grid, so a section whose body is a single block of prose still
+   uses the section's full width instead of sitting in a narrow column with
+   empty space beside it. The prose itself still wraps at a readable width
+   (its own max-width, below) inside that column. */
+.section__grid {
+  display: grid;
+  gap: 3rem;
+  grid-template-columns: 1.1fr 0.9fr;
+  align-items: start;
+}
+
+.section__grid .section__head {
+  margin-bottom: 0;
+}
+
+@media (max-width: 860px) {
+  .section__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .section__eyebrow {
   font-family: var(--font-mono);
   font-size: 0.875rem;
@@ -297,6 +395,11 @@
   line-height: 1.1;
 }
 
+.section__heading-icon {
+  display: inline-block;
+  white-space: nowrap;
+}
+
 .section__lede {
   margin-top: 0.75rem;
   color: hsl(var(--muted-foreground));
@@ -371,6 +474,7 @@
 .footer__links {
   list-style: none;
   display: flex;
+  flex-wrap: wrap;
   gap: 1.5rem;
   margin: 0;
   padding: 0;

app/components/release-banner.tsx

@@ -0,0 +1,53 @@
+/*
+Copyright The CryptOS Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import "./marketing.css";
+
+interface ReleaseBannerCta {
+  label: string;
+  href: string;
+}
+
+interface ReleaseBannerProps {
+  badge: string;
+  heading: string;
+  body: string;
+  cta?: ReleaseBannerCta;
+}
+
+// Base-layer component: a pre-release status strip shown above the hero.
+// Text stays in the foreground/muted-foreground pair against the card
+// background (both exceed WCAG AA contrast in light and dark) -- the
+// warning token is used only as a left accent border and the badge icon,
+// never as a text/background text pair, because `--warning-foreground` on
+// `--warning` falls short of AA for normal text in the light theme.
+export const ReleaseBanner = ({ badge, heading, body, cta }: ReleaseBannerProps) => (
+  <div className="release-banner" role="note" aria-label="Release status">
+    <div className="container release-banner__row">
+      <span className="release-banner__badge">
+        <span className="release-banner__dot" aria-hidden="true" />
+        {badge}
+      </span>
+      <p className="release-banner__text">
+        <strong>{heading}</strong> {body}{" "}
+        {cta ? (
+          <a className="release-banner__link" href={cta.href}>
+            {cta.label}
+          </a>
+        ) : null}
+      </p>
+    </div>
+  </div>
+);

app/components/section.tsx

@@ -15,36 +15,61 @@ limitations under the License.
 */
 import type { ReactNode } from "react";
 
+import { splitTrailingWord } from "~/lib/text";
+
 import "./marketing.css";
 
 interface SectionProps {
   id?: string;
   eyebrow?: string;
+  icon?: string;
   heading: string;
   lede?: string;
   tone?: "default" | "card";
+  // "stack": head above body, full container width (what-it-is's feature
+  // grid already fills that width on its own). "split": head and body sit
+  // side by side in the hero's own column ratio, for a section whose body
+  // is a single block of prose that would otherwise sit in a narrow column
+  // on the left with the rest of the wide container empty.
+  layout?: "stack" | "split";
   children: ReactNode;
 }
 
 // Base-layer component: a content section with an optional eyebrow/heading,
 // consistent width and vertical rhythm. Mirrors the Astro proof's
-// Section.astro.
+// Section.astro. `icon` is a single decorative character (an emoji escape
+// from the content file, never a literal emoji in this source) shown after
+// the heading's last word, wrapped aria-hidden so screen readers only read
+// the heading itself, and kept in a `white-space: nowrap` unit with that
+// word so the two can never land on separate lines.
 export const Section = ({
   id,
   eyebrow,
+  icon,
   heading,
   lede,
   tone = "default",
+  layout = "stack",
   children,
-}: SectionProps) => (
-  <section id={id} className={tone === "card" ? "section section--card" : "section"}>
-    <div className="container">
-      <div className="section__head">
-        {eyebrow ? <p className="section__eyebrow">{eyebrow}</p> : null}
-        <h2 className="section__heading">{heading}</h2>
-        {lede ? <p className="section__lede">{lede}</p> : null}
+}: SectionProps) => {
+  const [headingLead, headingTail] = splitTrailingWord(heading);
+
+  return (
+    <section id={id} className={tone === "card" ? "section section--card" : "section"}>
+      <div className={layout === "split" ? "container section__grid" : "container"}>
+        <div className="section__head">
+          {eyebrow ? <p className="section__eyebrow">{eyebrow}</p> : null}
+          <h2 className="section__heading">
+            {headingLead}
+            <span className="section__heading-icon">
+              {headingTail}
+              {icon ? <span aria-hidden="true"> {icon}</span> : null}
+            </span>
+          </h2>
+          {lede ? <p className="section__lede">{lede}</p> : null}
+        </div>
+        <div className="section__body">{children}</div>
       </div>
-      <div className="section__body">{children}</div>
-    </div>
-  </section>
-);
+    </section>
+  );
+};