From c09847a33839dc1e8cecdc34ee27ea49fe1b152b Mon Sep 17 00:00:00 2001 From: Bugs5382 <12115015+Bugs5382@users.noreply.github.com> Date: Thu, 15 Oct 2026 21:09:58 -0400 Subject: [PATCH 1/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 CryptOS-PKI/website#5 Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com> --- app/components/marketing.css | 58 +++++++++++++++++++++++++++++++ app/components/release-banner.tsx | 53 ++++++++++++++++++++++++++++ app/content/cryptos.ts | 7 ++++ app/routes/home.tsx | 8 +++++ 4 files changed, 126 insertions(+) create mode 100644 app/components/release-banner.tsx diff --git a/app/components/marketing.css b/app/components/marketing.css index 0c69695..a8152ba 100644 --- a/app/components/marketing.css +++ b/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; @@ -371,6 +428,7 @@ .footer__links { list-style: none; display: flex; + flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; diff --git a/app/components/release-banner.tsx b/app/components/release-banner.tsx new file mode 100644 index 0000000..3be15fc --- /dev/null +++ b/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) => ( +
+
+ + +

+ {heading} {body}{" "} + {cta ? ( + + {cta.label} + + ) : null} +

+
+
+); diff --git a/app/content/cryptos.ts b/app/content/cryptos.ts index ccc7a8c..f7b8154 100644 --- a/app/content/cryptos.ts +++ b/app/content/cryptos.ts @@ -37,6 +37,13 @@ export const nav = { ], }; +export const releaseStatus = { + badge: "Pre-release", + heading: "First release coming soon.", + body: "v0.1.0-rc.1 is in final testing. There are no downloads yet -- check back soon, or follow progress on GitHub.", + cta: { label: "Follow progress on GitHub", href: "https://github.com/CryptOS-PKI/website" }, +}; + export const hero = { eyebrow: "CryptOS-PKI", headlineLine1: "A PKI operating system", diff --git a/app/routes/home.tsx b/app/routes/home.tsx index a80100c..3131e41 100644 --- a/app/routes/home.tsx +++ b/app/routes/home.tsx @@ -19,6 +19,7 @@ import type { MetaFunction } from "react-router"; import { FeatureGrid } from "~/components/feature-grid"; import { Footer } from "~/components/footer"; import { Nav } from "~/components/nav"; +import { ReleaseBanner } from "~/components/release-banner"; import { Section } from "~/components/section"; import { SplitHero } from "~/components/split-hero"; import { TerminalCard } from "~/components/terminal-card"; @@ -28,6 +29,7 @@ import { hero, meta as pageMeta, nav, + releaseStatus, trustModel, whatItIs, } from "~/content/cryptos"; @@ -44,6 +46,12 @@ export default function Home() { Skip to content