From 63de779248de20554328f49eeedfcc43327d0399 Mon Sep 17 00:00:00 2001
From: Chris van der Loo <chris.vanderloo@icloud.com>
Date: Sat, 5 Sep 2026 14:09:39 -0400
Subject: [PATCH] feat(web): add static Astro pages and the shared branded
 layout

---
 packages/web/src/layouts/Layout.astro |  31 ++++
 packages/web/src/pages/404.astro      |  11 ++
 packages/web/src/pages/index.astro    |  16 ++
 packages/web/src/styles/base.css      | 223 ++++++++++++++++++++++++++
 4 files changed, 281 insertions(+)
 create mode 100644 packages/web/src/layouts/Layout.astro
 create mode 100644 packages/web/src/pages/404.astro
 create mode 100644 packages/web/src/pages/index.astro
 create mode 100644 packages/web/src/styles/base.css

diff --git a/packages/web/src/layouts/Layout.astro b/packages/web/src/layouts/Layout.astro
new file mode 100644
index 0000000..10c1e44
--- /dev/null
+++ b/packages/web/src/layouts/Layout.astro
@@ -0,0 +1,31 @@
+---
+import "../styles/base.css";
+import Footer from "../components/Footer.astro";
+import { PublicNavigation } from "../components/PublicNavigation";
+interface Props {
+  title: string;
+  navigation?: boolean;
+}
+const { title, navigation = true } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.svg" />
+    <title>{title} · Crate</title>
+  </head>
+  <body>
+    <a
+      class="skip-link absolute -top-15 z-100 focus:top-3 focus:left-3 focus:bg-panel focus:p-2.5"
+      href="#main">Skip to content</a
+    >
+    <div class="page-shell relative min-h-screen pb-48">
+      {navigation && <PublicNavigation client:load />}
+      <div id="main"><slot /></div>
+      <Footer breadcrumbs={[{ name: title, link: Astro.url.pathname }]} />
+    </div>
+  </body>
+</html>
diff --git a/packages/web/src/pages/404.astro b/packages/web/src/pages/404.astro
new file mode 100644
index 0000000..13e3d04
--- /dev/null
+++ b/packages/web/src/pages/404.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Not found">
+  <section class="panel">
+    <h1>Page not found</h1><p>This page does not exist.</p><a href="/files"
+      >Go to your files</a
+    >
+  </section>
+</Layout>
diff --git a/packages/web/src/pages/index.astro b/packages/web/src/pages/index.astro
new file mode 100644
index 0000000..fc7e375
--- /dev/null
+++ b/packages/web/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Your files">
+  <section class="hero panel">
+    <p class="eyebrow">An ATProto-native drive</p>
+    <h1>Your files.<br />Your account.</h1>
+    <p>Store files in your personal data server and access them with Crate.</p>
+    <p>
+      Your PDS controls storage and access. Crate does not add a separate
+      account or storage subscription.
+    </p>
+    <a class="button" href="/files">Open your files</a>
+  </section>
+</Layout>
diff --git a/packages/web/src/styles/base.css b/packages/web/src/styles/base.css
new file mode 100644
index 0000000..abb0b20
--- /dev/null
+++ b/packages/web/src/styles/base.css
@@ -0,0 +1,223 @@
+@font-face {
+  font-family: "iA Quattro";
+  src: url("../assets/iAWriterQuattroS-Regular.woff2");
+  font-display: swap;
+}
+@font-face {
+  font-family: "iA Quattro";
+  src: url("../assets/iAWriterQuattroS-Bold.woff2");
+  font-weight: 700;
+  font-display: swap;
+}
+:root {
+  color-scheme: light dark;
+  --page: #fff7ed;
+  --panel: #fff;
+  --ink: #292524;
+  --muted: #57534e;
+  --line: #e7e5e4;
+  --accent: #c2410c;
+  --selected: #ffedd5;
+  font-family: system-ui, sans-serif;
+  color: var(--ink);
+  background: var(--page);
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0 auto;
+  max-width: 1440px;
+  padding: 0 32px;
+}
+a {
+  color: var(--accent);
+  text-underline-offset: 3px;
+}
+button,
+input,
+select {
+  font: inherit;
+}
+button,
+.button {
+  cursor: pointer;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  padding: 9px 14px;
+  color: var(--ink);
+  background: var(--panel);
+  text-decoration: none;
+}
+button:hover,
+.button:hover {
+  border-color: var(--accent);
+}
+button:disabled {
+  cursor: wait;
+  opacity: 0.55;
+}
+button.primary,
+.button {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+input,
+select {
+  padding: 9px 12px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--panel);
+  color: var(--ink);
+}
+input[type="checkbox"] {
+  accent-color: var(--accent);
+}
+:focus-visible {
+  outline: 3px solid var(--accent);
+  outline-offset: 3px;
+}
+.site-header,
+.site-header nav,
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+.site-header {
+  justify-content: space-between;
+  min-height: 112px;
+}
+.brand {
+  color: var(--ink);
+  font:
+    bold 28px "iA Quattro",
+    monospace;
+  text-decoration: none;
+}
+.site-header nav a {
+  color: var(--ink);
+}
+main {
+  min-height: calc(100vh - 215px);
+  padding: 24px 0 64px;
+}
+h1,
+h2 {
+  font-family: "iA Quattro", monospace;
+}
+h1 {
+  font-size: clamp(28px, 4vw, 48px);
+  margin: 0 0 24px;
+}
+h2 {
+  font-size: 22px;
+  margin-top: 0;
+}
+p {
+  line-height: 1.6;
+}
+footer {
+  border-top: 1px solid var(--line);
+  padding: 24px 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 24px;
+}
+.hero {
+  padding: clamp(28px, 6vw, 80px);
+}
+.hero h1 {
+  font-size: clamp(48px, 7vw, 86px);
+}
+.hero p {
+  max-width: 650px;
+  color: var(--muted);
+  font-size: 18px;
+}
+.hero .button {
+  display: inline-block;
+  margin-top: 20px;
+}
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 13px !important;
+}
+.error {
+  color: #b91c1c;
+  background: #fee2e2;
+  border-radius: 7px;
+  padding: 12px;
+  overflow-wrap: anywhere;
+}
+.muted {
+  color: var(--muted);
+}
+.stack {
+  display: grid;
+  gap: 16px;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.skip-link {
+  position: absolute;
+  top: -60px;
+}
+.skip-link:focus {
+  top: 12px;
+  background: var(--panel);
+  padding: 10px;
+  z-index: 10;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --page: #1c1917;
+    --panel: #292524;
+    --ink: #fafaf9;
+    --muted: #d6d3d1;
+    --line: #57534e;
+    --accent: #ea580c;
+    --selected: #431407;
+  }
+  .error {
+    color: #fecaca;
+    background: #450a0a;
+  }
+}
+@media (max-width: 600px) {
+  body {
+    padding: 0 16px;
+  }
+  .site-header {
+    min-height: 88px;
+  }
+  .brand {
+    font-size: 22px;
+    gap: 10px;
+  }
+  .site-header nav {
+    gap: 12px;
+  }
+}
-- 
2.54.0