From 6aa3d8bf055954831d569ba339b6dfc755c38914 Mon Sep 17 00:00:00 2001 From: Faizan Asad Date: Wed, 7 Oct 2026 22:09:54 +0500 Subject: [PATCH] feat(landing): redesign with an interactive deck Co-Authored-By: Claude Opus 5.5 --- landing/README.md | 73 +-- landing/index.html | 5 +- landing/package-lock.json | 20 + landing/package.json | 5 +- landing/public/ghost.webp | Bin 0 -> 8696 bytes landing/public/theme-dark.webp | Bin 0 -> 125414 bytes landing/public/theme-light.webp | Bin 0 -> 100750 bytes landing/scripts/run-checks.mjs | 46 ++ landing/src/App.tsx | 113 +--- landing/src/audio/demoPlayer.ts | 234 +++++++ landing/src/audio/eq.check.ts | 35 ++ landing/src/audio/eq.ts | 94 +++ landing/src/audio/levels.check.ts | 33 + landing/src/audio/levels.ts | 47 ++ landing/src/audio/track.check.ts | 14 + landing/src/audio/track.ts | 11 + landing/src/components/Deck.tsx | 125 ++++ landing/src/components/Downloads.tsx | 258 ++++---- landing/src/components/Equalizer.tsx | 80 +++ landing/src/components/Features.tsx | 363 +++-------- landing/src/components/Film.tsx | 31 + landing/src/components/Footer.tsx | 76 +++ landing/src/components/Header.tsx | 83 +-- landing/src/components/Hero.tsx | 336 +++------- landing/src/components/MiniPlayer.tsx | 269 ++------ landing/src/components/OpenSource.tsx | 98 +++ landing/src/components/PlayingBars.tsx | 16 + landing/src/components/Presence.tsx | 42 ++ landing/src/components/Spectrum.tsx | 73 +++ landing/src/components/TabsDemo.tsx | 143 ----- landing/src/components/ThemeCompare.tsx | 47 ++ landing/src/components/brandIcons.tsx | 29 +- landing/src/components/icons.tsx | 105 ++-- landing/src/components/ui.tsx | 193 +++--- landing/src/format.check.ts | 19 + landing/src/github.ts | 56 ++ landing/src/main.tsx | 10 +- landing/src/releases.ts | 11 + landing/src/styles.css | 782 ++++++++++++++++++------ 39 files changed, 2398 insertions(+), 1577 deletions(-) create mode 100644 landing/public/ghost.webp create mode 100644 landing/public/theme-dark.webp create mode 100644 landing/public/theme-light.webp create mode 100644 landing/scripts/run-checks.mjs create mode 100644 landing/src/audio/demoPlayer.ts create mode 100644 landing/src/audio/eq.check.ts create mode 100644 landing/src/audio/eq.ts create mode 100644 landing/src/audio/levels.check.ts create mode 100644 landing/src/audio/levels.ts create mode 100644 landing/src/audio/track.check.ts create mode 100644 landing/src/audio/track.ts create mode 100644 landing/src/components/Deck.tsx create mode 100644 landing/src/components/Equalizer.tsx create mode 100644 landing/src/components/Film.tsx create mode 100644 landing/src/components/Footer.tsx create mode 100644 landing/src/components/OpenSource.tsx create mode 100644 landing/src/components/PlayingBars.tsx create mode 100644 landing/src/components/Presence.tsx create mode 100644 landing/src/components/Spectrum.tsx delete mode 100644 landing/src/components/TabsDemo.tsx create mode 100644 landing/src/components/ThemeCompare.tsx create mode 100644 landing/src/format.check.ts create mode 100644 landing/src/github.ts diff --git a/landing/README.md b/landing/README.md index bffda766..b96dc238 100644 --- a/landing/README.md +++ b/landing/README.md @@ -6,57 +6,42 @@ The public landing page. A separate Vite project that shares Zuno's look but non cd landing npm install npm run dev # http://localhost:5173 +npm run check # the *.check.ts self-checks npm run build # -> landing/dist ``` -## Why it is its own project - -The desktop app's Vite config has fixed Rollup inputs (`index.html`, `mini.html`), a strict dev -port Tauri depends on, and a `src-tauri` watcher. Adding a third entry point would tie a public -website's release cadence to the app's, and a stray import could pull `@tauri-apps/*` into a -bundle that has no Tauri runtime under it. - -Nothing here is reachable from the app: its `tsconfig` is `include: ["src"]` and its Rollup -inputs are the two HTML files above. Running `npm run build` in either directory leaves the -other untouched. - -## What is shared, and how - -- **Colour tokens** — `src/styles.css` carries a byte-identical copy of the app's `@theme` - block and its `html[data-theme="light"]` overrides. Copied rather than imported, because - `src/ui/styles/global.css` also contains window rounding, titlebar heights and Paper-PC rules - that a website has no use for. If the brand shifts, change both. -- **Component shapes** — `src/components/ui.tsx` reproduces the app's primary/secondary pill - buttons and its `rounded-2xl bg-card/50` section card, so the page and the product read as one - thing. -- **Icons** — OS marks come from Iconify's `logos` set via `@iconify/react`. Iconify normally - fetches at runtime and the full set is 7.4 MB, so the four marks actually used are extracted - into `src/components/brandIcons.tsx` and registered up front — no request, no pop-in. - `@iconify-json/logos` stays a devDependency as the source of record; regenerate that file from - it if a mark changes. The handful of UI glyphs are hand-rolled in `src/components/icons.tsx`. -- **Screenshots** — copied into `public/` from `docs/`. Re-copy them when the app's shots are - refreshed: - - ```bash - cp ../assets/img/Logo.png public/logo.png - cp ../docs/zuno-d.PNG public/screenshot-dark.png - cp ../docs/zuno-l.PNG public/screenshot-light.png - ``` +It is its own project so the website can ship on its own schedule, and so no stray import can +pull `@tauri-apps/*` into a bundle with no Tauri runtime under it. -## Downloads +## The demo player + +The page plays one track (`public/low-tide.mp3`), and only when someone presses play. +`src/audio/demoPlayer.ts` owns it: one `