clawhub/.agents/skills/openclaw-marketing-pages/references/page-patterns.md

Public Page Patterns

First Viewport

• Show the literal product, project, venue, person, or offer immediately.
• Use the name or literal category as the primary heading.
• Keep supporting copy specific: what it is, who it helps, and the next action.
• Let the next section remain partially visible at common viewport heights.
• Use an approved real image or an actual product state when media helps.

Structure

• Reuse the consumer's header, footer, content width, and navigation behavior.
• Build sections as full-width bands or unframed layouts with constrained inner content.
• Use cards for repeated comparable items, not as wrappers around every section.
• Keep one primary action per decision area and avoid repeated CTA blocks.
• Preserve semantic heading order, metadata, canonical URLs, and readable prose widths.

Responsive Checks

Check at least one narrow mobile viewport and one desktop viewport. Verify:

• navigation and menus remain reachable
• headings and buttons wrap without clipping
• media shows the important subject
• fixed controls do not cover content
• horizontal scrolling is intentional
• light and dark themes preserve hierarchy and contrast

Local Ownership

Marketing layouts, decorative textures, film grain, dot grids, site headers, footers, article prose, and route-specific media remain in the consumer unless multiple sites prove the same reusable interface.