From bc1104efa9486b4cd107a394f72cfa3f7b1fa4a5 Mon Sep 17 00:00:00 2001
From: abue-ammar <iabueammar@gmail.com>
Date: Sat, 18 Jul 2026 20:54:35 +0600
Subject: [PATCH] fix web design

---
 website/index.html                 | 18 ++++--
 website/package-lock.json          | 37 +++++++++--
 website/package.json               |  5 +-
 website/src/App.tsx                |  2 +
 website/src/components/compare.tsx | 36 ++++++++++-
 website/src/components/ethos.tsx   | 30 +++++----
 website/src/components/footer.tsx  | 32 +++++++---
 website/src/components/gallery.tsx | 99 ++++++++++++++++++++++++++++++
 website/src/components/hero.tsx    | 14 ++---
 website/src/components/nav.tsx     |  4 +-
 website/src/components/ui/icon.tsx | 15 +++++
 website/src/data/ethos.ts          | 24 ++------
 website/src/data/gallery.ts        | 87 ++++++++++++++++++++++++++
 website/src/data/site.ts           | 12 ++++
 website/src/index.css              | 11 +++-
 15 files changed, 356 insertions(+), 70 deletions(-)
 create mode 100644 website/src/components/gallery.tsx
 create mode 100644 website/src/data/gallery.ts

diff --git a/website/index.html b/website/index.html
index 51b6b91e..b0b6eae1 100644
--- a/website/index.html
+++ b/website/index.html
@@ -9,7 +9,11 @@
     <title>Tinycast — a tiny, native macOS launcher</title>
     <meta
       name="description"
-      content="Tinycast is a tiny, fully native macOS launcher: fuzzy app search, inline calculator, clipboard history, and global hotkeys. ~3 MB, no Electron, no account, no telemetry. Free and open source under AGPL-3.0."
+      content="Tinycast is a tiny, fully native macOS launcher and a free, open-source Raycast alternative: fuzzy app search, inline calculator, clipboard history, and global hotkeys. A lighter take on Raycast, Alfred, Spotlight, and Supermac — ~3 MB, no Electron, no account, no telemetry. Free and open source under AGPL-3.0."
+    />
+    <meta
+      name="keywords"
+      content="Raycast alternative, Alfred alternative, Spotlight replacement, Supermac, macOS launcher, Mac app launcher, clipboard manager, fuzzy app search, global hotkeys, native SwiftUI launcher, open source launcher"
     />
     <meta name="robots" content="index, follow" />
     <link rel="canonical" href="https://abue-ammar.github.io/tinycast/" />
@@ -21,11 +25,11 @@
     <meta property="og:locale" content="en_US" />
     <meta
       property="og:title"
-      content="Tinycast — a tiny, native macOS launcher"
+      content="Tinycast — a tiny, native macOS launcher "
     />
     <meta
       property="og:description"
-      content="Fuzzy app search, calculator, clipboard history, and global hotkeys in ~3 MB. Native, local, no telemetry. Free and open source."
+      content="A free, open-source Raycast alternative for macOS: fuzzy app search, calculator, clipboard history, and global hotkeys in ~3 MB. A lighter take on Raycast, Alfred, and Spotlight. Native, local, no telemetry."
     />
     <meta
       property="og:image"
@@ -43,11 +47,11 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta
       name="twitter:title"
-      content="Tinycast — a tiny, native macOS launcher"
+      content="Tinycast — a tiny, native macOS launcher "
     />
     <meta
       name="twitter:description"
-      content="Fuzzy app search, calculator, clipboard history, and global hotkeys in ~3 MB. Native, local, no telemetry. Free and open source."
+      content="A free, open-source Raycast alternative for macOS: fuzzy app search, calculator, clipboard history, and global hotkeys in ~3 MB. A lighter take on Raycast, Alfred, and Spotlight. Native, local, no telemetry."
     />
     <meta
       name="twitter:image"
@@ -65,7 +69,9 @@
         "@context": "https://schema.org",
         "@type": "SoftwareApplication",
         "name": "Tinycast",
-        "description": "A tiny, fully native macOS launcher: fuzzy app search, inline calculator, clipboard history, and global hotkeys. ~3 MB, no Electron, no account, no telemetry.",
+        "alternativeHeadline": "A free, open-source Raycast alternative for macOS",
+        "keywords": "Raycast alternative, Alfred alternative, Spotlight replacement, Supermac, macOS launcher, clipboard manager, global hotkeys",
+        "description": "A tiny, fully native macOS launcher and free Raycast alternative: fuzzy app search, inline calculator, clipboard history, and global hotkeys. ~3 MB, no Electron, no account, no telemetry.",
         "url": "https://abue-ammar.github.io/tinycast/",
         "image": "https://abue-ammar.github.io/tinycast/og.png",
         "applicationCategory": "UtilitiesApplication",
diff --git a/website/package-lock.json b/website/package-lock.json
index 8000affa..d6885445 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -12,7 +12,8 @@
         "lucide-react": "^1.23.0",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
-        "tailwind-merge": "^3.6.0"
+        "tailwind-merge": "^3.6.0",
+        "yet-another-react-lightbox": "^3.32.1"
       },
       "devDependencies": {
         "@babel/core": "^7.29.7",
@@ -1368,7 +1369,7 @@
       "version": "19.2.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -1379,8 +1380,9 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -1511,7 +1513,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -2105,6 +2107,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
       "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -2366,6 +2369,32 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/yet-another-react-lightbox": {
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.32.1.tgz",
+      "integrity": "sha512-/OK5U79uTD2kGv3m+w22IDCuVtgC0l9J2SwJRYE+88XqfkWwVkAVNbE8AdWozAlPFTjGiIyPHxukoIINH9mpiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/igordanchenko"
+      },
+      "peerDependencies": {
+        "@types/react": "^16 || ^17 || ^18 || ^19",
+        "@types/react-dom": "^16 || ^17 || ^18 || ^19",
+        "react": "^16.8.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/website/package.json b/website/package.json
index dc18d3ee..e5248911 100644
--- a/website/package.json
+++ b/website/package.json
@@ -11,11 +11,12 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "lucide-react": "^1.23.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.6.0"
+    "tailwind-merge": "^3.6.0",
+    "yet-another-react-lightbox": "^3.32.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
diff --git a/website/src/App.tsx b/website/src/App.tsx
index 201028a2..c8c241ed 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -1,5 +1,6 @@
 import { Nav } from "./components/nav";
 import { Hero } from "./components/hero";
+import { Gallery } from "./components/gallery";
 import { Features } from "./components/features";
 import { Compare } from "./components/compare";
 import { Switch } from "./components/switch";
@@ -14,6 +15,7 @@ function App() {
       <Nav />
       <main>
         <Hero />
+        <Gallery />
         <Features />
         <Compare />
         <Switch />
diff --git a/website/src/components/compare.tsx b/website/src/components/compare.tsx
index d2b206e4..18368aa7 100644
--- a/website/src/components/compare.tsx
+++ b/website/src/components/compare.tsx
@@ -51,7 +51,8 @@ export function Compare() {
       intro="Everything you actually reach for is here — then Tinycast wins on the things that don't show up in a feature list: size, price, and who owns your data."
     >
       <Reveal className="mx-auto max-w-4xl">
-        <div className="overflow-x-auto rounded-2xl border border-border shadow-key">
+        {/* Desktop: the aligned three-column table. */}
+        <div className="hidden overflow-x-auto rounded-2xl border border-border shadow-key md:block">
           <div className="relative min-w-152">
             {/* The "winner column" — one continuous panel behind Tinycast. */}
             <div
@@ -103,6 +104,39 @@ export function Compare() {
           </div>
         </div>
 
+        {/* Mobile: one card per row, so nothing scrolls sideways. */}
+        <div className="space-y-3 md:hidden">
+          {compareRows.map((row) => (
+            <div
+              key={row.label}
+              className="rounded-xl border border-border/50 p-4"
+            >
+              <div className="mb-3 flex items-center text-small text-ash">
+                {row.label}
+                {row.sourced && (
+                  <sup className="ml-0.5 text-violet-bright">†</sup>
+                )}
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <div className="flex flex-col items-center gap-2 rounded-lg bg-violet/[0.07] px-3 py-3 text-center ring-1 ring-inset ring-violet/20">
+                  <span className="flex items-center gap-1.5 font-mono text-eyebrow uppercase text-smoke">
+                    <Logo size={13} />
+                    Tinycast
+                  </span>
+                  <Value value={row.tinycast} own />
+                </div>
+                <div className="flex flex-col items-center gap-2 px-3 py-3 text-center">
+                  <span className="flex items-center gap-1.5 font-mono text-eyebrow uppercase text-smoke">
+                    <RaycastLogo size={12} />
+                    Raycast
+                  </span>
+                  <Value value={row.raycast} own={false} />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
         {/* The one external claim, cited so it holds up. */}
         <p className="mt-4 text-center font-mono text-caption text-smoke">
           <span className="text-violet-bright">†</span> Stack and memory figures
diff --git a/website/src/components/ethos.tsx b/website/src/components/ethos.tsx
index cec7684a..1826ce55 100644
--- a/website/src/components/ethos.tsx
+++ b/website/src/components/ethos.tsx
@@ -10,7 +10,7 @@ export function Ethos() {
       id="why"
       eyebrow="Why it's tiny"
       title="Built like a Mac app should be."
-      intro="SwiftUI and AppKit, zero dependencies, no Electron runtime hiding underneath. It's fast because there's barely anything to it."
+      intro="Native SwiftUI and AppKit. No Electron, no bloat — fast because there's barely anything to it."
     >
       {/* Stat strip — the one place numbers get loud. */}
       <Reveal className="mb-10 md:mb-14">
@@ -36,21 +36,19 @@ export function Ethos() {
         </div>
       </Reveal>
 
-      <div className="grid gap-4 sm:grid-cols-2">
-        {values.map((value, i) => (
-          <Reveal key={value.title} delay={i * 60}>
-            <article className="flex h-full gap-4 rounded-2xl border border-border p-4 sm:p-6">
-              <span className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-violet/15 text-violet-bright">
-                <Check size={15} strokeWidth={2} />
-              </span>
-              <div>
-                <h3 className="text-body-lg font-medium">{value.title}</h3>
-                <p className="mt-1.5 text-body text-ash">{value.body}</p>
-              </div>
-            </article>
-          </Reveal>
-        ))}
-      </div>
+      <Reveal>
+        <ul className="flex flex-wrap justify-center gap-2">
+          {values.map((value) => (
+            <li
+              key={value}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-white/5 px-3 py-2 text-small text-ash shadow-keycap"
+            >
+              <Check size={13} strokeWidth={2.4} className="text-violet-bright" />
+              {value}
+            </li>
+          ))}
+        </ul>
+      </Reveal>
     </Section>
   );
 }
diff --git a/website/src/components/footer.tsx b/website/src/components/footer.tsx
index 53eb820c..1fbef1a6 100644
--- a/website/src/components/footer.tsx
+++ b/website/src/components/footer.tsx
@@ -1,9 +1,10 @@
 import { site } from "../data/site";
-import { GitHubLogo, Logo } from "./ui/icon";
+import { DiscordLogo, GitHubLogo, Logo } from "./ui/icon";
 import { MetaStrip } from "./ui/meta-strip";
 
 export function Footer() {
   const repoPath = site.repo.replace("https://", "");
+  const hasDiscord = site.community.discord !== "#";
 
   return (
     <footer className="border-t border-border/50">
@@ -23,15 +24,26 @@ export function Footer() {
           </p>
         </div>
 
-        <a
-          href={site.repo}
-          target="_blank"
-          rel="noreferrer"
-          className="flex items-center gap-2 text-small text-ash transition-colors hover:text-white"
-        >
-          <GitHubLogo size={16} />
-          {repoPath}
-        </a>
+        <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-3">
+          <a
+            href={site.repo}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-2 text-small text-ash transition-colors hover:text-white"
+          >
+            <GitHubLogo size={16} />
+            {repoPath}
+          </a>
+          <a
+            href={site.community.discord}
+            target={hasDiscord ? "_blank" : undefined}
+            rel={hasDiscord ? "noreferrer" : undefined}
+            className="flex items-center gap-2 text-small text-ash transition-colors hover:text-white"
+          >
+            <DiscordLogo size={16} />
+            Join the Discord
+          </a>
+        </div>
       </div>
     </footer>
   );
diff --git a/website/src/components/gallery.tsx b/website/src/components/gallery.tsx
new file mode 100644
index 00000000..215871ab
--- /dev/null
+++ b/website/src/components/gallery.tsx
@@ -0,0 +1,99 @@
+import { Play } from "lucide-react";
+import { useState } from "react";
+import Lightbox, { type Slide } from "yet-another-react-lightbox";
+import Captions from "yet-another-react-lightbox/plugins/captions";
+import Video from "yet-another-react-lightbox/plugins/video";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/captions.css";
+import { galleryItems, type GalleryItem } from "../data/gallery";
+import { Reveal } from "./ui/reveal";
+import { Section } from "./ui/section";
+
+// Everything in `public/` is served under the Vite base path.
+const asset = (name: string) => `${import.meta.env.BASE_URL}${name}`;
+
+// The grid thumbnail: an explicit thumb, else a video's poster, else the image.
+const tileImage = (item: GalleryItem) =>
+  asset(item.thumb ?? (item.type === "video" ? (item.poster ?? item.src) : item.src));
+
+// One gallery item → one lightbox slide. Images carry title/description for the
+// Captions plugin; videos use the Video plugin's `sources` shape.
+function toSlide(item: GalleryItem): Slide {
+  if (item.type === "video") {
+    return {
+      type: "video",
+      poster: item.poster ? asset(item.poster) : undefined,
+      width: item.width,
+      height: item.height,
+      title: item.title,
+      description: item.caption,
+      sources: [{ src: asset(item.src), type: "video/mp4" }],
+    };
+  }
+  return {
+    src: asset(item.src),
+    title: item.title,
+    description: item.caption,
+    width: item.width,
+    height: item.height,
+  };
+}
+
+export function Gallery() {
+  const [index, setIndex] = useState(-1);
+  const slides = galleryItems.map(toSlide);
+
+  return (
+    <Section
+      id="gallery"
+      eyebrow="Tinycast in action"
+      title="See it in motion."
+      intro="A palette that stays out of your way — until you need it."
+    >
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {galleryItems.map((item, i) => (
+          <Reveal key={`${item.title}-${i}`} delay={i * 60}>
+            <button
+              type="button"
+              onClick={() => setIndex(i)}
+              className="group flex h-full w-full flex-col gap-3 rounded-2xl bg-ink/40 p-3 text-left shadow-key transition-shadow duration-200 hover:shadow-key-hover"
+            >
+              <figure className="relative aspect-video w-full overflow-hidden rounded-xl">
+                <img
+                  src={tileImage(item)}
+                  alt={item.title}
+                  className="block size-full object-cover transition-transform duration-300 group-hover:scale-[1.02]"
+                  loading="lazy"
+                  decoding="async"
+                />
+                {item.type === "video" && (
+                  <span className="absolute inset-0 flex items-center justify-center">
+                    <span className="flex size-12 items-center justify-center rounded-full bg-black/40 text-white shadow-highlight backdrop-blur-sm">
+                      <Play size={20} fill="currentColor" />
+                    </span>
+                  </span>
+                )}
+              </figure>
+              <div className="px-1 pb-1">
+                <h3 className="text-body-lg font-medium text-white">
+                  {item.title}
+                </h3>
+                <p className="mt-1 text-body text-ash">{item.caption}</p>
+              </div>
+            </button>
+          </Reveal>
+        ))}
+      </div>
+
+      <Lightbox
+        open={index >= 0}
+        index={index}
+        close={() => setIndex(-1)}
+        slides={slides}
+        plugins={[Video, Captions, Zoom]}
+        controller={{ closeOnBackdropClick: true }}
+      />
+    </Section>
+  );
+}
diff --git a/website/src/components/hero.tsx b/website/src/components/hero.tsx
index 91cc11b3..fca40135 100644
--- a/website/src/components/hero.tsx
+++ b/website/src/components/hero.tsx
@@ -1,4 +1,4 @@
-import { site } from "../data/site";
+import { hero, site } from "../data/site";
 import { AppShot } from "./app-shot";
 import { Button } from "./ui/button";
 import { AppleLogo, GitHubLogo } from "./ui/icon";
@@ -30,25 +30,21 @@ export function Hero() {
           className="rise font-mono text-eyebrow uppercase text-ash"
           style={{ animationDelay: "0ms" }}
         >
-          Native macOS launcher
+          {hero.eyebrow}
         </p>
 
         <h1
           className="rise mt-6 max-w-3xl text-display"
           style={{ animationDelay: "80ms" }}
         >
-          Your shortcut to
-          <br className="hidden sm:block" /> everything on your Mac.
+          {hero.headline}
         </h1>
 
         <p
-          className="rise mt-6 max-w-xl text-sm text-ash"
+          className="rise mt-6 max-w-lg text-body-lg text-ash"
           style={{ animationDelay: "160ms" }}
         >
-          {site.name} is a tiny, fully native launcher — fuzzy app search, a
-          calculator, clipboard history, and global hotkeys. A few megabytes on
-          disk, and it brings your Raycast setup along. No Electron, no account,
-          no telemetry.
+          {hero.sub}
         </p>
 
         <div
diff --git a/website/src/components/nav.tsx b/website/src/components/nav.tsx
index c3eb537e..76d17a76 100644
--- a/website/src/components/nav.tsx
+++ b/website/src/components/nav.tsx
@@ -18,8 +18,8 @@ export function Nav() {
   return (
     <header className="fixed inset-x-0 top-4 z-50">
       <div className="container-page">
-        <nav className="rounded-xl border border-border bg-void-black/60 backdrop-blur-2xl">
-          <div className="flex items-center justify-between gap-4 px-3 py-2">
+        <nav className="rounded-2xl border border-white/8 bg-void-black/60  backdrop-blur-2xl">
+          <div className="flex items-center justify-between gap-4 px-4 py-3">
             <a
               href="#top"
               onClick={close}
diff --git a/website/src/components/ui/icon.tsx b/website/src/components/ui/icon.tsx
index 22a098f1..9da47837 100644
--- a/website/src/components/ui/icon.tsx
+++ b/website/src/components/ui/icon.tsx
@@ -71,6 +71,21 @@ export function RaycastLogo({ size = 18, ...props }: BrandIconProps) {
   );
 }
 
+export function DiscordLogo({ size = 16, ...props }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M20.317 4.369a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.865-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.6 12.6 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.009c.12.099.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.891.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.055c.5-5.177-.838-9.674-3.548-13.66a.06.06 0 0 0-.031-.028ZM8.02 15.331c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z" />
+    </svg>
+  );
+}
+
 export function GitHubLogo({ size = 16, ...props }: BrandIconProps) {
   return (
     <svg
diff --git a/website/src/data/ethos.ts b/website/src/data/ethos.ts
index d54e6611..9ec969bd 100644
--- a/website/src/data/ethos.ts
+++ b/website/src/data/ethos.ts
@@ -1,21 +1,7 @@
-import { site } from "./site";
-
-// The values that make Tinycast Tinycast. Each is a plain promise, not a pitch.
+// The values that make Tinycast Tinycast — each a plain promise, one line each.
 export const values = [
-  {
-    title: "Free and open source",
-    body: `Every line is public under the ${site.license} license. Read it, fork it, build it yourself.`,
-  },
-  {
-    title: "Local by design",
-    body: "Your apps, clipboard, and shortcuts stay on your Mac. Nothing is uploaded, ever.",
-  },
-  {
-    title: "No account, no sign-in",
-    body: "Install it and it works. There's no login, no paywall, and no pro tier.",
-  },
-  {
-    title: "Zero telemetry",
-    body: "No analytics, no crash pings, no background phone-home. It does nothing you didn't ask for.",
-  },
+  "Free & open source",
+  "Local by design",
+  "No account, no sign-in",
+  "Zero telemetry",
 ] as const;
diff --git a/website/src/data/gallery.ts b/website/src/data/gallery.ts
new file mode 100644
index 00000000..6ad0403f
--- /dev/null
+++ b/website/src/data/gallery.ts
@@ -0,0 +1,87 @@
+// Drives the "Tinycast in action" gallery + lightbox. Each item is a tile in
+// the grid and a slide in the lightbox. `src`/`thumb`/`poster` are resolved
+// against import.meta.env.BASE_URL in the component, so give plain filenames
+// that live in `public/` (e.g. "screenshot.png").
+//
+// DUMMY CONTENT: these reuse the two screenshots we already ship so the grid
+// looks full. Swap in real captures/clips later. To add a clip, use the video
+// shape shown in the commented template at the bottom — the lightbox already
+// loads the video plugin.
+
+export type GalleryItem = {
+  type: "image" | "video";
+  // Full-size media shown in the lightbox (image src, or video file for clips).
+  src: string;
+  // Grid thumbnail; falls back to `src`/`poster` when omitted.
+  thumb?: string;
+  // Poster frame for video tiles/slides.
+  poster?: string;
+  title: string;
+  caption: string;
+  width: number;
+  height: number;
+};
+
+export const galleryItems: GalleryItem[] = [
+  {
+    type: "image",
+    src: "screenshot.png",
+    title: "App launcher",
+    caption: "Fuzzy-search every app and open it with a keystroke.",
+    width: 2451,
+    height: 1510,
+  },
+  {
+    type: "image",
+    src: "import.png",
+    title: "Import from Raycast",
+    caption: "Bring your whole setup across in one click.",
+    width: 1800,
+    height: 1192,
+  },
+  {
+    type: "image",
+    src: "screenshot.png",
+    title: "Clipboard history",
+    caption: "Text and images, full-text searchable, always local.",
+    width: 2451,
+    height: 1510,
+  },
+  {
+    type: "image",
+    src: "import.png",
+    title: "Inline calculator",
+    caption: "Math and unit conversions right in the palette.",
+    width: 1800,
+    height: 1192,
+  },
+  {
+    type: "image",
+    src: "screenshot.png",
+    title: "Emoji & symbols",
+    caption: "Search the full set; your most-used float to the top.",
+    width: 2451,
+    height: 1510,
+  },
+  {
+    type: "image",
+    src: "import.png",
+    title: "Hyper key",
+    caption: "Turn Caps Lock into a whole extra shortcut layer.",
+    width: 1800,
+    height: 1192,
+  },
+];
+
+// Video template — drop the .mp4 (and a poster frame) into `public/`, then copy
+// an entry like this into the array above:
+//
+// {
+//   type: "video",
+//   src: "demo.mp4",
+//   poster: "demo-poster.png",
+//   title: "Live demo",
+//   caption: "Watch the launcher in motion.",
+//   width: 1920,
+//   height: 1080,
+// },
diff --git a/website/src/data/site.ts b/website/src/data/site.ts
index 9b48bfaf..40ddc44a 100644
--- a/website/src/data/site.ts
+++ b/website/src/data/site.ts
@@ -9,9 +9,21 @@ export const site = {
   platform: "macOS 26+",
   license: "AGPL-3.0",
   licenseUrl: "https://github.com/abue-ammar/tinycast/blob/main/LICENSE",
+  // Community. Replace the placeholder with the real Discord invite when ready.
+  community: {
+    discord: "#",
+  },
+} as const;
+
+// The hero, in as few words as possible — headline plus one punchy line.
+export const hero = {
+  eyebrow: "Native macOS launcher",
+  headline: "Everything on your Mac. One keystroke away.",
+  sub: "A tiny, native launcher. No Electron. No account. No telemetry. No bullshit.",
 } as const;
 
 export const nav = [
+  { label: "Gallery", href: "#gallery" },
   { label: "Features", href: "#features" },
   { label: "Compare", href: "#compare" },
   { label: "Why tiny", href: "#why" },
diff --git a/website/src/index.css b/website/src/index.css
index 4a6ef3ce..3367632e 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -140,10 +140,19 @@
 
   /* Anchor targets land below the floating nav instead of underneath it. */
   section[id] {
-    scroll-margin-top: 5.5rem;
+    scroll-margin-top: 6rem;
   }
 }
 
+/* Lightbox (yet-another-react-lightbox) — tint its dark chrome to match the
+   page. YARL's own classes are namespaced (yarl__), so nothing here leaks. */
+.yarl__root {
+  --yarl__color_backdrop: rgb(4 5 6 / 0.94);
+  --yarl__color_button: var(--color-ash);
+  --yarl__color_button_active: var(--color-white);
+  --yarl__slide_captions_container_background: rgb(4 5 6 / 0.6);
+}
+
 /* The page gutter: 16px on mobile, 24px from the sm breakpoint up. */
 @utility container-page {
   width: 100%;