[Meta] Site Redesign

.gitignore

@@ -47,3 +47,4 @@ apps/yerd-gui/src-tauri/binaries/
 @docs
 .agents
 .openai
+.mcp.json

docs/.vitepress/config.mts

@@ -27,7 +27,30 @@ export default withMermaid({
 
   head: [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
-    ['meta', { name: 'theme-color', content: '#6366f1' }],
+    ['meta', { name: 'theme-color', content: '#3a63ee' }],
+    // The two faces every page paints above the fold: the display face used by
+    // the navbar wordmark and marketing headlines, and the latin subset of the
+    // UI/body face. Both are self-hosted (see theme/styles/fonts.css).
+    [
+      'link',
+      {
+        rel: 'preload',
+        as: 'font',
+        type: 'font/ttf',
+        href: '/fonts/OutageCut.ttf',
+        crossorigin: '',
+      },
+    ],
+    [
+      'link',
+      {
+        rel: 'preload',
+        as: 'font',
+        type: 'font/woff2',
+        href: '/fonts/space-grotesk-latin.woff2',
+        crossorigin: '',
+      },
+    ],
     ['meta', { name: 'author', content: 'Forjed' }],
     [
       'meta',

docs/.vitepress/theme/Layout.vue

@@ -3,43 +3,13 @@ import DefaultTheme from 'vitepress/theme'
 import Lightbox from './components/Lightbox.vue'
 
 // Wrap the default theme layout so the single global <Lightbox> overlay is
-// mounted once for every page (via the `layout-bottom` slot).
+// mounted once for every page (via the `layout-bottom` slot). The home page
+// supplies its own layout component, so no hero slots are overridden here.
 const { Layout } = DefaultTheme
 </script>
 
 <template>
   <Layout>
-    <!-- Social-card-style hero lockup: logo + "Yerd" wordmark, then the headline
-         with a blue accent on "without the friction." -->
-    <template #home-hero-info>
-      <h1 class="heading">
-        <span class="hero-brand">
-          <img class="hero-logo" src="/logo.svg" alt="" />
-          <span class="name">Yerd</span>
-        </span>
-        <span class="text"
-          >Local PHP, <span class="accent">without the friction.</span></span
-        >
-      </h1>
-      <p class="tagline">
-        Serve your projects on .test domains over HTTP and HTTPS, run a different
-        PHP version per site, and manage it all from one tiny daemon. No Docker,
-        no sudo for everyday work, no subscription.
-      </p>
-    </template>
-    <!-- Hero screenshot, with light/dark variants toggled by CSS on html.dark. -->
-    <template #home-hero-image>
-      <img
-        class="hero-shot hero-shot--light"
-        src="/images/overview-light.png"
-        alt="The Yerd desktop app"
-      />
-      <img
-        class="hero-shot hero-shot--dark"
-        src="/images/overview-dark.png"
-        alt="The Yerd desktop app"
-      />
-    </template>
     <template #layout-bottom>
       <Lightbox />
     </template>

docs/.vitepress/theme/components/home/AppSection.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import SectionHead from './SectionHead.vue'
+import { openLightbox } from '../../composables/lightbox'
+
+export interface Shot {
+  light: string
+  dark: string
+  alt: string
+}
+
+defineProps<{
+  eyebrow: string
+  heading: string
+  sub: string
+  primary: Shot
+  secondary: Shot[]
+  captions: string[]
+  chipsLabel: string
+  chips: string[]
+}>()
+</script>
+
+<template>
+  <section class="y-section y-glow y-glow--right">
+    <SectionHead :eyebrow="eyebrow" :heading="heading" :sub="sub" />
+
+    <div class="y-shots">
+      <button
+        class="y-shot y-shot--primary"
+        type="button"
+        :aria-label="primary.alt"
+        @click="openLightbox(primary)"
+      >
+        <img
+          class="themed-img--light"
+          :src="primary.light"
+          :alt="primary.alt"
+          loading="lazy"
+        />
+        <img
+          class="themed-img--dark"
+          :src="primary.dark"
+          :alt="primary.alt"
+          loading="lazy"
+        />
+      </button>
+
+      <div class="y-shots__stack">
+        <button
+          v-for="shot in secondary"
+          :key="shot.light"
+          class="y-shot"
+          type="button"
+          :aria-label="shot.alt"
+          @click="openLightbox(shot)"
+        >
+          <img
+            class="themed-img--light"
+            :src="shot.light"
+            :alt="shot.alt"
+            loading="lazy"
+          />
+          <img
+            class="themed-img--dark"
+            :src="shot.dark"
+            :alt="shot.alt"
+            loading="lazy"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div class="y-shots__captions">
+      <p v-for="caption in captions" :key="caption">{{ caption }}</p>
+    </div>
+
+    <p class="y-chips__label">{{ chipsLabel }}</p>
+    <ul class="y-chips">
+      <li v-for="chip in chips" :key="chip" class="y-tag">
+        <span class="y-tag__dot" />{{ chip }}
+      </li>
+    </ul>
+  </section>
+</template>

docs/.vitepress/theme/components/home/CapabilitySection.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import HomeIcon from './HomeIcon.vue'
+import SectionHead from './SectionHead.vue'
+
+defineProps<{
+  eyebrow: string
+  heading: string
+  sub: string
+  items: {
+    icon: string
+    title: string
+    details: string
+    command: string
+    link?: string
+  }[]
+}>()
+</script>
+
+<template>
+  <section class="y-section y-glow y-glow--left">
+    <SectionHead :eyebrow="eyebrow" :heading="heading" :sub="sub" />
+
+    <ul class="y-cards">
+      <li v-for="item in items" :key="item.title" class="y-card">
+        <component
+          :is="item.link ? 'a' : 'div'"
+          :href="item.link"
+          class="y-card__body"
+        >
+          <HomeIcon class="y-card__icon" :name="item.icon" />
+          <h3 class="y-card__title">{{ item.title }}</h3>
+          <p class="y-card__text">{{ item.details }}</p>
+          <code class="y-chip">{{ item.command }}</code>
+        </component>
+      </li>
+    </ul>
+  </section>
+</template>

docs/.vitepress/theme/components/home/ClosingSection.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HeroAction } from './HeroSection.vue'
+
+defineProps<{ lines: string[]; sub: string; actions: HeroAction[] }>()
+</script>
+
+<template>
+  <section class="y-close y-glow">
+    <h2 class="y-close__heading">
+      <span v-for="line in lines" :key="line">{{ line + ' ' }}</span>
+    </h2>
+    <p class="y-close__sub">{{ sub }}</p>
+    <div class="y-close__actions">
+      <a
+        v-for="action in actions"
+        :key="action.link"
+        class="y-btn"
+        :class="action.theme === 'alt' ? 'y-btn--alt' : 'y-btn--brand'"
+        :href="action.link"
+        >{{ action.text }}</a
+      >
+    </div>
+  </section>
+</template>

docs/.vitepress/theme/components/home/CopyCommand.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// The hero's "your first command" field: a read-only terminal line with a copy
+// button. Falls back silently when the Clipboard API is unavailable (insecure
+// origins), leaving the text selectable by hand.
+const props = defineProps<{ label: string; command: string }>()
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+async function copy(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(props.command)
+  } catch {
+    return
+  }
+  copied.value = true
+  clearTimeout(timer)
+  timer = setTimeout(() => (copied.value = false), 1600)
+}
+</script>
+
+<template>
+  <div class="y-cmd">
+    <p class="y-cmd__label">{{ label }}</p>
+    <div class="y-cmd__bar">
+      <code class="y-cmd__text"
+        ><span class="y-cmd__prompt">$</span> {{ command
+        }}<span class="y-cmd__caret" aria-hidden="true"></span
+      ></code>
+      <button
+        class="y-cmd__copy"
+        type="button"
+        :aria-label="copied ? 'Copied' : 'Copy command'"
+        @click="copy"
+      >
+        <svg
+          v-if="!copied"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <rect x="9" y="9" width="12" height="12" rx="2" />
+          <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+        </svg>
+        <svg
+          v-else
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M4 12.5l5 5 11-11" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>