Web Marketing Landing
Hub skill for a long-form product landing page: editorial typography, monochrome surfaces with a single cyan–navy accent gradient, glass on hero/chrome only, CSS-first motion, and eleven ordered sections inside a marketing shell.
Read this file first, then open only the spoke files needed for the task.
Mission
Build a landing that feels premium and product-specific, not a generic SaaS template. The page should read as one continuous story: hero promise → plain explanation → integrations → product depth → outputs → flow → differentiation → trust → personas → FAQ → final CTA.
Use placeholders in specs and copy decks: {{Brand}}, {{Accent}}, {{AppUrl}}, {{Connectors[]}}. Do not hard-code a customer name in skill prose.
Non-negotiables
- CSS-first motion — entrance stagger, gradient shift, connector orbit, and nav glass use keyframes/utilities. Do not require Framer Motion for the landing.
- Token-driven color — monochrome UI (
--color-bg, --surface-panel*, hairlines) plus one accent gradient (--accent-grad-* or project-prefixed vars). Accent is punctuation, not wallpaper.
- Glass discipline —
backdrop-blur on hero eyebrow, CTAs, hero feature cards, and scroll-phase nav only. Body sections use solid panels and hairline borders.
- Viewport-aware hero —
min-h-[calc(100svh-<nav-offset>)] on the hero panel; respect mobile safe areas.
- Reduced motion — disable rise, gradient shift, and orbit animations under
prefers-reduced-motion: reduce; set scroll-behavior: auto on html.
- Scroll nav — fixed nav interpolates width/padding/background;
data-glass over dark hero, solid pill after scroll threshold. Support solidNav for pages without a dark hero.
- Accessible structure — semantic sections,
aria-hidden on decorative layers, focus-visible outlines on interactive elements.
Section blueprint (implement in order)
| # |
Section ID |
Component pattern |
Spoke |
| 1 |
(hero) |
Full-viewport aurora hero + 3 feature cards |
hero-aurora.md |
| 2 |
#what-is-{{slug}} |
55/45 intro grid + 3 fact pills |
layout-sections.md |
| 3 |
#connectors |
Centered copy + connector hub |
connector-hub.md |
| 4 |
#product |
Headline + bento features grid |
section-components.md |
| 5 |
(deliverables) |
4-column icon cards |
section-components.md |
| 6 |
#flow |
Split header + flow preview + marketing-wash |
section-components.md |
| 7 |
(comparison) |
“Typical vs {{Brand}}” gradient panel rows |
section-components.md |
| 8 |
#secure |
Split header + security matrix |
section-components.md |
| 9 |
(use-cases) |
4-column persona cards |
layout-sections.md |
| 10 |
(faq) |
2-column FAQ cards |
section-components.md |
| 11 |
(footer CTA) |
Large wordmark CTA band |
shell-and-nav.md |
Wrap all sections in MarketingShell → main → sections. See shell-and-nav.md.
Spoke routing
| Task |
Read |
| Tokens, type, buttons, cards |
foundations.md |
| Section grids, spacing, max-widths |
layout-sections.md |
| Hero backdrop, cards, orbit |
hero-aurora.md |
| Shell, nav scroll, footer |
shell-and-nav.md |
| Connector grid |
connector-hub.md |
| CSS animations, washes, glass |
motion-and-effects.md |
| Bento, comparison, FAQ, previews |
section-components.md |
| New repo, deps, file tree |
stack-and-scaffold.md |
| JSON-LD, metadata |
seo-metadata.md |
Greenfield checklist
- Next.js 16+ App Router, React 19, Tailwind CSS v4 — see stack-and-scaffold.md.
- Add
globals.css tokens + marketing utilities + .public-nav rules (unlayered, after @layer utilities).
- Implement shell + nav + footer, then hero, then remaining sections top to bottom.
- Wire CTAs to
{{AppUrl}} (external app) — marketing site does not embed auth.
- Add JSON-LD on home per seo-metadata.md.
- Verify: hero stagger, nav glass→solid, hub ring, bento breakpoints, reduced-motion, production build.
Do / don't
| Do |
Don't |
| One gradient accent word per major headline |
Gradient-fill every heading |
| Hairline borders + soft shadows on cards |
Heavy neumorphism everywhere |
text-balance / text-pretty on headlines and body |
Fixed pixel widths that break mobile |
Stagger animationDelay 0–320ms on hero children |
Identical delay on all elements |
| Keep connector hub to 14 tiles + center mark |
Crowd the hub with 20+ icons |
Reference implementation
If the user has an existing marketing home built with this stack, use it for parity checks only; the skill itself stays brand-agnostic.
1---2name: web-marketing-landing3description: Design and scaffold a premium SaaS marketing home page: aurora hero, glass nav, connector hub, bento product grid, comparison bands, FAQ, CSS-driven motion (no Framer required). Use for /web-marketing-landing or when recreating a long-form product landing in Next.js + Tailwind v4.4---56# Web Marketing Landing78Hub skill for a **long-form product landing page**: editorial typography, monochrome surfaces with a single cyan–navy accent gradient, glass on hero/chrome only, CSS-first motion, and eleven ordered sections inside a marketing shell.910Read this file first, then open only the spoke files needed for the task.1112## Mission1314Build a landing that feels **premium and product-specific**, not a generic SaaS template. The page should read as one continuous story: hero promise → plain explanation → integrations → product depth → outputs → flow → differentiation → trust → personas → FAQ → final CTA.1516Use placeholders in specs and copy decks: `{{Brand}}`, `{{Accent}}`, `{{AppUrl}}`, `{{Connectors[]}}`. Do not hard-code a customer name in skill prose.1718## Non-negotiables19201. **CSS-first motion** — entrance stagger, gradient shift, connector orbit, and nav glass use keyframes/utilities. Do not require Framer Motion for the landing.212. **Token-driven color** — monochrome UI (`--color-bg`, `--surface-panel*`, hairlines) plus one accent gradient (`--accent-grad-*` or project-prefixed vars). Accent is punctuation, not wallpaper.223. **Glass discipline** — `backdrop-blur` on hero eyebrow, CTAs, hero feature cards, and scroll-phase nav only. Body sections use solid panels and hairline borders.234. **Viewport-aware hero** — `min-h-[calc(100svh-<nav-offset>)]` on the hero panel; respect mobile safe areas.245. **Reduced motion** — disable rise, gradient shift, and orbit animations under `prefers-reduced-motion: reduce`; set `scroll-behavior: auto` on `html`.256. **Scroll nav** — fixed nav interpolates width/padding/background; `data-glass` over dark hero, solid pill after scroll threshold. Support `solidNav` for pages without a dark hero.267. **Accessible structure** — semantic sections, `aria-hidden` on decorative layers, focus-visible outlines on interactive elements.2728## Section blueprint (implement in order)2930| # | Section ID | Component pattern | Spoke |31|---|------------|-------------------|-------|32| 1 | (hero) | Full-viewport aurora hero + 3 feature cards | [hero-aurora.md](hero-aurora.md) |33| 2 | `#what-is-{{slug}}` | 55/45 intro grid + 3 fact pills | [layout-sections.md](layout-sections.md) |34| 3 | `#connectors` | Centered copy + connector hub | [connector-hub.md](connector-hub.md) |35| 4 | `#product` | Headline + bento features grid | [section-components.md](section-components.md) |36| 5 | (deliverables) | 4-column icon cards | [section-components.md](section-components.md) |37| 6 | `#flow` | Split header + flow preview + `marketing-wash` | [section-components.md](section-components.md) |38| 7 | (comparison) | “Typical vs {{Brand}}” gradient panel rows | [section-components.md](section-components.md) |39| 8 | `#secure` | Split header + security matrix | [section-components.md](section-components.md) |40| 9 | (use-cases) | 4-column persona cards | [layout-sections.md](layout-sections.md) |41| 10 | (faq) | 2-column FAQ cards | [section-components.md](section-components.md) |42| 11 | (footer CTA) | Large wordmark CTA band | [shell-and-nav.md](shell-and-nav.md) |4344Wrap all sections in **MarketingShell** → `main` → sections. See [shell-and-nav.md](shell-and-nav.md).4546## Spoke routing4748| Task | Read |49|------|------|50| Tokens, type, buttons, cards | [foundations.md](foundations.md) |51| Section grids, spacing, max-widths | [layout-sections.md](layout-sections.md) |52| Hero backdrop, cards, orbit | [hero-aurora.md](hero-aurora.md) |53| Shell, nav scroll, footer | [shell-and-nav.md](shell-and-nav.md) |54| Connector grid | [connector-hub.md](connector-hub.md) |55| CSS animations, washes, glass | [motion-and-effects.md](motion-and-effects.md) |56| Bento, comparison, FAQ, previews | [section-components.md](section-components.md) |57| New repo, deps, file tree | [stack-and-scaffold.md](stack-and-scaffold.md) |58| JSON-LD, metadata | [seo-metadata.md](seo-metadata.md) |5960## Greenfield checklist61621. Next.js 16+ App Router, React 19, Tailwind CSS v4 — see [stack-and-scaffold.md](stack-and-scaffold.md).632. Add `globals.css` tokens + marketing utilities + `.public-nav` rules (unlayered, after `@layer utilities`).643. Implement shell + nav + footer, then hero, then remaining sections top to bottom.654. Wire CTAs to `{{AppUrl}}` (external app) — marketing site does not embed auth.665. Add JSON-LD on home per [seo-metadata.md](seo-metadata.md).676. Verify: hero stagger, nav glass→solid, hub ring, bento breakpoints, reduced-motion, production build.6869## Do / don't7071| Do | Don't |72|----|-------|73| One gradient accent word per major headline | Gradient-fill every heading |74| Hairline borders + soft shadows on cards | Heavy neumorphism everywhere |75| `text-balance` / `text-pretty` on headlines and body | Fixed pixel widths that break mobile |76| Stagger `animationDelay` 0–320ms on hero children | Identical delay on all elements |77| Keep connector hub to 14 tiles + center mark | Crowd the hub with 20+ icons |7879## Reference implementation8081If the user has an existing marketing home built with this stack, use it for parity checks only; the skill itself stays brand-agnostic.
robzilla1738