adrianbonpin
501fed962c
* design: landing page spec + app icon asset * chore(www): add anime.js, fonts, and landing page screenshot assets * feat(www): add design tokens, fonts, shared layout * feat(www): add landing page sections and styling * feat(www): add theme toggle and anime.js viewport animations * feat(www): feedback updates — no hero card, os-aware download, footer email, lowercase colored heading * feat(www): remove screenshot borders, move macos hint below ctas, mobile github fallback * feat(www): keep hero CTAs side by side * feat(www): set initial nav border to transparent * feat(www): add Rybbit prod-only, sitemap, SEO head, OG image, robots.txt, 404 page * docs(AGENTS): include www landing page version in release sync checklist * chore(www): add railpack.json for Dokploy deploy (force node provider, TZ) * chore(www): use bun for Railpack deploy (packageManager + standalone www/bun.lock) * docs(AGENTS): note www/bun.lock sync for Railpack deploys * chore(www): add vitest test tooling * feat(www): add FAQ data source * feat(www): add SEO JSON-LD builders * feat(www): add Seo JSON-LD component * feat(www): wire Seo component and social/meta tags into Layout * feat(www): add homepage JSON-LD, keyword H1, data-driven FAQ * fix(www): point Roadmap footer link to GitHub * feat(www): add lastmod to sitemap * perf(www): self-host anime.js * refactor(www): move nav and footer into shared Layout * feat(www): add changelog page * fix(www): make shared component styles global in Layout * perf(www): optimize screenshots with Astro Image (webp/avif + srcset) * feat(www): add web app manifest * feat(www): add helpful links to 404 page * fix(www): shorten homepage H1 copy * fix(www): OS-aware navbar download + footer layout * feat(www): build full changelog from v0.7.0 to v0.7.10
192 lines
6.5 KiB
Markdown
192 lines
6.5 KiB
Markdown
# Gridline landing page — design spec
|
||
|
||
**Date:** 2026-10-05
|
||
**Scope:** `www/` Astro site, single long-scrolling landing page, first public-facing marketing page.
|
||
**Approach:** Zen Browser layout + Gridline app visual identity. Dark-first with system-aware light mode.
|
||
|
||
---
|
||
|
||
## Goal
|
||
|
||
Replace the current default Astro starter page with a focused landing page whose primary action is **downloading the desktop app**. Secondary actions: view GitHub repo, read feature highlights, open FAQ answers.
|
||
|
||
---
|
||
|
||
## Sections (in order)
|
||
|
||
1. **Nav** — fixed, translucent, pill nav on scroll
|
||
2. **Hero** — eyebrow, headline, subtitle, dual CTA, app screenshot card
|
||
3. **Why Gridline** — three value props
|
||
4. **Feature highlights** — four feature cards with screenshots
|
||
5. **Open source** — GitHub callout
|
||
6. **FAQ** — five accordion items
|
||
7. **Footer** — Zen-style big footer
|
||
|
||
---
|
||
|
||
## Design system
|
||
|
||
### Typography
|
||
|
||
| Role | Font | Package |
|
||
|------|------|---------|
|
||
| Serif display headings | Literata | `@fontsource-variable/literata` |
|
||
| Sans-serif body / UI | Outfit | `@fontsource-variable/outfit` |
|
||
| Monospace code / labels | Space Mono | `@fontsource/space-mono` |
|
||
|
||
### Color tokens
|
||
|
||
| Token | Dark value | Light value |
|
||
|-------|------------|-------------|
|
||
| `--bg` | `#0a0a0a` | `#fafafa` |
|
||
| `--surface` | `rgba(255,255,255,0.04)` | `rgba(0,0,0,0.03)` |
|
||
| `--surface-elevated` | `rgba(255,255,255,0.07)` | `rgba(0,0,0,0.06)` |
|
||
| `--border` | `rgba(255,255,255,0.10)` | `rgba(0,0,0,0.10)` |
|
||
| `--text` | `rgba(255,255,255,0.90)` | `#171717` |
|
||
| `--text-muted` | `rgba(255,255,255,0.55)` | `#737373` |
|
||
| `--primary` | `#3b82f6` | `#2563eb` |
|
||
| `--primary-hover` | `#60a5fa` | `#1d4ed8` |
|
||
| `--accent` | `#f59e0b` | `#d97706` |
|
||
|
||
### Radius & spacing
|
||
|
||
- Buttons: `9999px` pill
|
||
- Large cards / screenshot frame: `1.5rem`
|
||
- Small cards: `1rem`
|
||
- Section vertical gap: `6rem` desktop, `4rem` mobile
|
||
- Max container width: `1200px`
|
||
|
||
---
|
||
|
||
## Section details
|
||
|
||
### Nav
|
||
|
||
- Logo + wordmark on left (icon SVG + “Gridline” in Sans)
|
||
- Links on right: Features, GitHub, Download
|
||
- Theme toggle icon button
|
||
- On scroll past hero: background gains `--surface` with backdrop blur
|
||
|
||
### Hero
|
||
|
||
- Eyebrow: `OPEN-SOURCE DATABASE GUI` in Space Mono uppercase, small, amber
|
||
- H1: serif, “One app for every database.”
|
||
- Subtitle: sans, max-width ~560px
|
||
- CTA row:
|
||
- Primary pill: “Download for macOS” (OS-detected, default macOS)
|
||
- Secondary ghost pill: “View on GitHub”
|
||
- App screenshot card: query-editor.png inside rounded glass frame with subtle gradient border
|
||
- Version note below screenshot: “Free for personal and commercial use · Apache 2.0 · v0.7.10”
|
||
|
||
### Why Gridline
|
||
|
||
- Heading: “Everything the paid apps lock behind a subscription.”
|
||
- Three glass cards:
|
||
1. **No limits** — connections, tabs, saved queries, exports.
|
||
2. **DB-to-DB sync** — pipe pg_dump → pg_restore between live connections.
|
||
3. **Deeper PG explorer** — functions, triggers, sequences, enums, extensions.
|
||
|
||
### Feature highlights
|
||
|
||
- 2×2 grid of cards. Each card has:
|
||
- Small icon / monospace label
|
||
- Heading
|
||
- One-line description
|
||
- Screenshot image (home, er-diagram, data-grid, json-popover)
|
||
|
||
Cards:
|
||
|
||
1. **Query & edit** — query editor + virtualized data grid — `query-editor.png`
|
||
2. **Visualize schemas** — ER diagram with cross-schema FKs — `er-diagram.png`
|
||
3. **Move data** — backup, restore, DB-to-DB sync — `home.png` or abstract graphic
|
||
4. **Manage objects** — functions, triggers, roles, grants — `data-grid.png`
|
||
|
||
### Open source
|
||
|
||
- Centered section with GitHub star count (static for now, can be dynamic later)
|
||
- Heading: “Built in public. No VC roadmap, no rug pulls.”
|
||
- CTA: “Star on GitHub”
|
||
|
||
### FAQ
|
||
|
||
- Five accordion items, first open by default:
|
||
1. Is Gridline really free for commercial use?
|
||
2. Which databases are supported?
|
||
3. How is this different from TablePlus / Beekeeper / DB Pro?
|
||
4. Do you store my database credentials?
|
||
5. Can I self-host or contribute?
|
||
|
||
### Footer
|
||
|
||
- Zen-style big footer, 4-column layout
|
||
- Brand blurb + three link columns: Product, Project, Connect
|
||
- Bottom bar: copyright + license + small tagline
|
||
|
||
---
|
||
|
||
## Theme behavior
|
||
|
||
- Default follows system `prefers-color-scheme`.
|
||
- Toggle persists choice to `localStorage` key `gridline-theme`.
|
||
- `html` gets class `.light` when light mode is active; base styles target `:root` for dark.
|
||
- Tailwind v4 configured with CSS variables in `global.css`.
|
||
|
||
---
|
||
|
||
## Motion
|
||
|
||
Use `animejs` loaded as a script in the landing page only (no need site-wide yet).
|
||
|
||
### Hero entrance
|
||
|
||
1. Nav: `translateY(-20px)`, opacity 0 → 1, 600ms, easeOutExpo
|
||
2. Eyebrow: 80ms delay, `translateY(15px)` → 0
|
||
3. H1 words: split by word, stagger 60ms, `translateY(30px)` → 0
|
||
4. Subtitle + buttons: 150ms delay, `translateY(20px)` → 0
|
||
5. Screenshot card: scale 0.96 → 1, opacity 0 → 1, 800ms
|
||
|
||
### Scroll reveals
|
||
|
||
- Each section observes IntersectionObserver threshold 0.15.
|
||
- On enter: direct children animate `translateY(40px)` → 0, opacity 0 → 1, stagger 80–120ms.
|
||
- `prefers-reduced-motion`: skip transform, only fade opacity.
|
||
|
||
### Micro-interactions
|
||
|
||
- Primary CTA hover: scale 1.02, brighter background, larger shadow
|
||
- Nav link hover: underline slides in from left
|
||
- Theme toggle: rotate + crossfade 300ms
|
||
- FAQ accordion: height + opacity expand, chevron rotate 180°
|
||
|
||
---
|
||
|
||
## Assets
|
||
|
||
| Asset | Source | Destination |
|
||
|-------|--------|-------------|
|
||
| Gridline icon SVG | `desktop/src-tauri/icons/icon.svg` | `www/public/gridline-icon.svg` |
|
||
| Query editor screenshot | `screenshots/query-editor.png` | `www/public/screenshots/query-editor.png` |
|
||
| ER diagram screenshot | `screenshots/er-diagram.png` | `www/public/screenshots/er-diagram.png` |
|
||
| Home screenshot | `screenshots/home.png` | `www/public/screenshots/home.png` |
|
||
| Data grid screenshot | `screenshots/data-grid.png` | `www/public/screenshots/data-grid.png` |
|
||
| JSON popover screenshot | `screenshots/json-popover.png` | `www/public/screenshots/json-popover.png` |
|
||
|
||
---
|
||
|
||
## Tech notes
|
||
|
||
- Astro 7 + Tailwind CSS v4 + TypeScript.
|
||
- `animejs` added as dependency.
|
||
- Fontsource packages added for all three typefaces.
|
||
- Landing page implemented as `www/src/pages/index.astro` with Astro components / vanilla JS for motion.
|
||
- No framework components needed for this version; keep it static and fast.
|
||
|
||
---
|
||
|
||
## Open questions / future iterations
|
||
|
||
- Dynamic GitHub star count.
|
||
- OS-aware download button text.
|
||
- Multi-page expansion (Docs, Changelog, Download) after landing page ships.
|
||
- Testimonial / social proof section if we collect quotes.
|