183 lines
12 KiB
Markdown
183 lines
12 KiB
Markdown
# Handoff: SummerCMS Alpha 0.1 Landing Page
|
||
|
||
## Overview
|
||
A single-page marketing landing for **summercms.io**, launching with Alpha 0.1. It has a sticky header with section anchors and a link to `/docs`, a hero, four content sections (Why, Features, From WinterCMS, Get started) and a footer. It replaces the current "Under construction" page and keeps its navy, yellow and sun identity.
|
||
|
||
## About the Design Files
|
||
`SummerCMS Landing.dc.html` is a **design reference built in HTML**. It shows the intended look and behavior and is not production code. Recreate it in the target site's stack. If the site has no stack yet, a static-site setup (Astro, Hugo, or a plain HTML/CSS page) is enough: the page is static apart from two small scripts (scroll-spy and copy-to-clipboard). The file loads a design-runtime script (`support.js`) for previewing; ignore it.
|
||
|
||
## Fidelity
|
||
**High-fidelity.** Colors, type, spacing and copy are final. Match them exactly.
|
||
|
||
## Global
|
||
- Page background `#233148`. Text `#e9edf3`.
|
||
- Fonts: **Roboto** (300/400/500/700) and **Roboto Mono** (400/500), from Google Fonts.
|
||
- `html { scroll-behavior: smooth; scroll-padding-top: 72px }` so anchor jumps clear the sticky header.
|
||
- Content container: `max-width: 1120px; margin: 0 auto; padding: 0 24px`.
|
||
- Section vertical padding: `96px` top and bottom.
|
||
- Default link color `#f5c55a`; hover `#fbe3a6`. Selection: background `#f5c55a`, text `#1d2940`.
|
||
|
||
## Sections
|
||
|
||
### 1. Header (sticky)
|
||
- `position: sticky; top: 0; z-index: 10`. Height 64px. Background `rgba(29,41,64,0.82)` with `backdrop-filter: blur(12px)`. Bottom border `1px solid rgba(255,255,255,0.07)`.
|
||
- Row is flex, `align-items: center`, `gap: 16px`. Logo, the "ALPHA 0.1" pill and the Docs button all have `flex-shrink: 0` and `white-space: nowrap`.
|
||
- **Logo** (links to `#top`): a 30px sun icon (masked to a circle, scaled 1.35) next to the wordmark "Summer" + "CMS". Roboto 700, 18px, letter-spacing -0.01em. "Summer" `#fff`, "CMS" `#fbd77e`.
|
||
- **Pill** "ALPHA 0.1": 11px/500, letter-spacing 0.12em, color `#f5c55a`, border `1px solid rgba(245,197,90,0.35)`, radius 999px, padding 3px 9px.
|
||
- **Section links**: Why `#why` · Features `#features` · From WinterCMS `#winter` · Get started `#start`.
|
||
- Right-aligned in a `flex: 1; min-width: 0; overflow-x: auto` wrapper; the inner row has `margin-left: auto`.
|
||
- Each link: 14px/500, padding 8px 12px, radius 999px, color `#c5ccd6`.
|
||
- Active link: color `#f5c55a`, background `rgba(245,197,90,0.1)`.
|
||
- **Hidden at viewport ≤ 720px.** Below that width the header shows only logo, pill and Docs.
|
||
- **Docs button** → `/docs`: label "Docs →". Background `#f5c55a`, text `#1d2940`, 14px/500, padding 9px 16px, radius 999px. Hover background `#fbd77e`.
|
||
|
||
### 2. Hero (`#top`)
|
||
- Padding 120px 24px 128px. Centered column, `text-align: center`, `overflow: hidden`.
|
||
- **Rays** (behind everything, can be turned off): an absolutely positioned layer at `inset: -40% -20%`.
|
||
- `background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.035) 0deg 7deg, transparent 7deg 15deg)`
|
||
- `mask: radial-gradient(circle, #000 10%, transparent 62%)`
|
||
- **Glow**: a 520px circle centered 210px from the top, `radial-gradient(circle, rgba(245,197,90,0.16), transparent 60%)`.
|
||
- **Sun badge**: 180px circle with border `1px solid rgba(255,255,255,0.12)` and background `#29344a`, containing the sun image.
|
||
- **H1** "Summer" + "CMS": `clamp(44px, 7vw, 76px)`, weight 700, line-height 1, letter-spacing -0.02em, margin-top 28px.
|
||
- "Summer" is `#fff`.
|
||
- "CMS" uses a gradient text fill: `linear-gradient(180deg, #fde9b4, #f5c55a)`.
|
||
- **Tagline** "A new dawn in content management": `clamp(18px, 2.2vw, 22px)`, weight 300, color `#c5ccd6`, margin-top 16px.
|
||
- **Description**: max-width 600px, 17px, line-height 1.6, color `#a3adbd`, margin-top 24px. Copy: "A content management framework for Go, inspired by WinterCMS. Plugins, the admin SPA and console commands compile into a single binary."
|
||
- **CTAs**: margin-top 40px, flex row, gap 12px, wraps on narrow screens.
|
||
- Primary "Read the docs" → `/docs`: background `#f5c55a`, text `#1d2940`, 15px/500, padding 14px 26px, pill shape. Hover background `#fbd77e`.
|
||
- Secondary "Alpha 0.1 is out" → `#start`: 8px `#f5c55a` dot before the label. Background `rgba(255,255,255,0.06)`, border `1px solid rgba(255,255,255,0.14)`, padding 13px 24px. Hover background `rgba(255,255,255,0.1)`.
|
||
|
||
### Section heading pattern (used in every content section)
|
||
- Eyebrow: 12px/500, letter-spacing 0.16em, uppercase, `#f5c55a`.
|
||
- H2: `clamp(30px, 4vw, 42px)`, weight 700, line-height 1.15, letter-spacing -0.015em, `#fff`, margin-top 12px.
|
||
|
||
### 3. Why (`#why`)
|
||
- Eyebrow "WHY SUMMER". H2 "What you tested is exactly what you deploy." (max-width 720px).
|
||
- Card grid: `repeat(auto-fit, minmax(260px, 1fr))`, gap 20px, margin-top 48px.
|
||
- Cards: background `#29344a`, border `1px solid rgba(255,255,255,0.08)`, radius 16px, padding 28px.
|
||
- Number: Roboto Mono 13px, `#f5c55a`.
|
||
- Title: 20px/500, `#fff`, margin 16px 0 8px.
|
||
- Body: 15px, line-height 1.6, `#a3adbd`.
|
||
- Card copy:
|
||
1. **One binary**: "Plugins are Go packages compiled in at build time. Nothing is scanned, loaded or installed at runtime."
|
||
2. **YAML-driven admin**: "Describe lists and forms in `fields.yaml` and `columns.yaml`. An embedded SPA renders them." The file names use inline code: Roboto Mono 13px, `#e9edf3`.
|
||
3. **Headless by design**: "A JSON API declared route by route, plus realtime channels. Build the public site in whatever frontend you like."
|
||
|
||
### 4. Features (`#features`)
|
||
- Full-bleed band: background `#1f2b42`, top and bottom borders `1px solid rgba(255,255,255,0.07)`.
|
||
- Eyebrow "WHAT'S IN THE BOX". H2 "The services a content app needs."
|
||
- Grid: `repeat(auto-fill, minmax(240px, 1fr))`. The 1px dividers come from `gap: 1px` over a `rgba(255,255,255,0.08)` grid background. Outer border is the same color, radius 16px, `overflow: hidden`.
|
||
- Each tile is a link: background `#1f2b42`, padding 24px, flex column, gap 6px. Hover background `#253350`.
|
||
- Title: 16px/500, `#e9edf3`.
|
||
- Body: 14px, line-height 1.5, `#a3adbd`.
|
||
|
||
| Title | Body | Link |
|
||
|---|---|---|
|
||
| Admin SPA | Embedded in the binary, driven by each plugin's YAML. | /docs/backend/admin-spa |
|
||
| Models & migrations | GORM structs with fill, validation and pagination helpers. | /docs/database/models |
|
||
| Routing & auth | Route groups, named middleware, tokens and OAuth. | /docs/services/routing |
|
||
| Queued jobs | Dispatched inside the caller's transaction. | /docs/services/jobs |
|
||
| Realtime | Broadcast model changes to subscribed clients. | /docs/services/realtime |
|
||
| Search | Searchable models, synced after commit. | /docs/services/search |
|
||
| Mail & push | Plugin mail templates and push notifications. | /docs/services/mail |
|
||
| Console | Scaffolding, scheduler, workers and your own commands. | /docs/console/introduction |
|
||
|
||
*Doc URLs were derived from the docs folder structure. Confirm them against the built docs site.*
|
||
|
||
### 5. From WinterCMS (`#winter`)
|
||
- Two columns: `repeat(auto-fit, minmax(300px, 1fr))`, gap 48px, `align-items: start`.
|
||
- **Left column**
|
||
- Eyebrow "COMING FROM WINTERCMS". H2 "Same shape. Compiled and typed."
|
||
- Paragraph (16px, line-height 1.65, `#a3adbd`, margin-top 20px): "Plugins still register and boot, require each other, ship migrations and admin YAML. A plugin ports file by file."
|
||
- Link "See the full concept map →" (15px/500) → `/docs/setup/coming-from-wintercms`.
|
||
- **Right column: concept table**
|
||
- Container: background `#29344a`, border `rgba(255,255,255,0.08)`, radius 16px.
|
||
- Header row "WINTERCMS | SUMMERCMS": 12px/500, letter-spacing 0.12em, `#8a94a3`.
|
||
- Rows: grid `1fr 1.3fr`, padding 14px 20px, Roboto Mono 13px, divider `rgba(255,255,255,0.06)`. Left cell `#a3adbd`, right cell `#fbe3a6`.
|
||
- Row content:
|
||
|
||
| WinterCMS | SummerCMS |
|
||
|---|---|
|
||
| Plugin.php | party.Plugin |
|
||
| version.yaml + updates/ | pact.HasMigrations |
|
||
| Eloquent models | GORM + lagoon |
|
||
| fields.yaml / columns.yaml | Same YAML, compiled at boot |
|
||
| routes.php | pact.HasRoutes |
|
||
| Event::listen / fire | festival.Bus |
|
||
| Artisan commands | bonfire.Command |
|
||
|
||
### 6. Get started (`#start`)
|
||
- Full-bleed band: background `#1f2b42`, top border `rgba(255,255,255,0.07)`.
|
||
- Two columns, same grid as the WinterCMS section, `align-items: center`.
|
||
- **Left column**
|
||
- Eyebrow "GET STARTED". H2 "Build your first app."
|
||
- Requirement chips "Go 1.27" and "PostgreSQL 16": 13px, `#c5ccd6`, background `rgba(255,255,255,0.06)`, border `rgba(255,255,255,0.1)`, pill shape, padding 6px 12px.
|
||
- Note: "Alpha 0.1 is for early adopters. APIs may change before 1.0."
|
||
- Buttons:
|
||
- "Installation guide" (primary style) → `/docs/setup/installation`.
|
||
- "Source" (outline style) → `https://git.golem15.com/golem15/summercms`.
|
||
- **Right column: terminal card**
|
||
- Background `#18223a`, border `rgba(255,255,255,0.08)`, radius 16px.
|
||
- Title bar: label "terminal" (Roboto Mono 12px, `#8a94a3`) and a **Copy** button (12px/500, `#c5ccd6`, background `rgba(255,255,255,0.06)`, border `rgba(255,255,255,0.1)`, radius 6px, padding 5px 10px).
|
||
- Body: padding 22px 20px, Roboto Mono 14px, line-height 1.9.
|
||
- **Each line is its own block element.** Comments are `#8a94a3`. The `$ ` prompt is `#f5c55a`. A 16px gap separates the two groups.
|
||
```
|
||
# install the summer CLI
|
||
$ go install ./cmd/summer
|
||
|
||
# build and run the example app
|
||
$ cd examples/hello
|
||
$ summer build
|
||
$ ./bin/hello greeter:hello
|
||
```
|
||
|
||
### 7. Footer
|
||
- Top border `rgba(255,255,255,0.07)`. Padding 32px 24px. 13px, `#8a94a3`.
|
||
- Left: "© 2026 SummerCMS. Something bright is here."
|
||
- Right links (`#a3adbd`, hover `#f5c55a`, gap 20px):
|
||
- Docs → `/docs`
|
||
- Source → `https://git.golem15.com/golem15/summercms`
|
||
- Back to top ↑ → `#top`
|
||
|
||
## Interactions & Behavior
|
||
- **Scroll-spy**: on window scroll, the active section is the last of `why`, `features`, `winter`, `start` whose top is less than 140px from the viewport top. That link gets the active style. Above the first section, no link is active.
|
||
- **Copy button**: writes the four commands (without `$` or comments) to the clipboard. The label changes to "Copied" for 1.5s, then reverts.
|
||
- **Responsive**: every grid uses auto-fit/auto-fill and collapses to one column on its own. Section links hide at ≤ 720px. Hero type scales with `clamp()`.
|
||
- **Transitions**: none are specified. Hover changes are instant; a 150ms ease on background and color is fine.
|
||
|
||
## State
|
||
- `activeSection: string`
|
||
- `copied: boolean`
|
||
- `isWide: boolean` (matchMedia `min-width: 721px`)
|
||
|
||
The prototype also has two config flags: `showRays` (default true) and `scrollSpy` (default true).
|
||
|
||
## Design Tokens
|
||
| Token | Hex | Used for |
|
||
|---|---|---|
|
||
| navy-900 | `#18223a` | terminal background |
|
||
| navy-850 | `#1d2940` | header base, text on yellow |
|
||
| navy-800 | `#1f2b42` | alternate bands |
|
||
| navy-700 | `#233148` | page background |
|
||
| navy-650 | `#253350` | feature tile hover |
|
||
| navy-600 | `#29344a` | cards |
|
||
| yellow-500 | `#f5c55a` | accent |
|
||
| yellow-400 | `#fbd77e` | accent hover, "CMS" in logo |
|
||
| yellow-200 | `#fbe3a6` | link hover, code values |
|
||
| yellow-100 | `#fde9b4` | top of the "CMS" gradient |
|
||
| text | `#e9edf3` | body text |
|
||
| text-2 | `#c5ccd6` | tagline, nav links |
|
||
| text-3 | `#a3adbd` | body copy |
|
||
| text-4 | `#8a94a3` | captions, comments |
|
||
|
||
- Borders: white at 6, 7, 8, 10, 12 and 14% alpha.
|
||
- Radius: 6px (small button), 16px (cards), 999px (pills).
|
||
- Spacing in use: 4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 96 and 120px.
|
||
|
||
## Assets
|
||
- `assets/sun-crop.png` (180×180): **a placeholder cropped from a screenshot** of the current under-construction page. Replace it with the original sun artwork from the existing summercms.io site. A transparent PNG or SVG is best; the hero badge then provides the circle and border.
|
||
|
||
## Files
|
||
- `SummerCMS Landing.dc.html`: the full design reference.
|
||
- `assets/sun-crop.png`: the placeholder sun icon.
|