# 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.