Marketing primitives
Fourteen reusable marketing surfaces for the Oak Flats Mufflermen brand — heroes, feature grids, testimonials, pricing CTAs, FAQ, logo clouds, stat counters, newsletter, footer, banners, chat, and process steps. Bonus: a full-landing composition page.
Marketing primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Marketing primitives: Fourteen reusable marketing surfaces for the Oak Flats Mufflermen brand — heroes, feature grids, testimonials, pricing CTAs, FAQ, logo clouds, stat counters, newsletter, footer, banners, chat, and process steps. Bonus: a full-landing composition page.
One contract for public-site blocks
Marketing primitives are not standalone page art. They are section-pattern compositions that inherit surfaces, typography, actions, motion, and responsive spacing from the shared primitive foundation.
- Section patterns
- Hero / proof / pricing / FAQ / CTA use the shared section grammar.
- Action layer
- Every conversion surface routes through Button DNA and primitive focus states.
- Responsive proof
- Cards, full landing, and sticky affordances collapse on token spacing rules.
Text-first hero
Editorial text-first hero with huge display headline, subhead, dual CTA, and a trust strip.
Feature grid
Reveal-animated feature grid in 2, 3, or 4 columns with icon + title + body + optional link.
Feature spotlight
Single feature row with reversible image-left / copy-right layout for product walks.
Testimonial wall
Masonry-style testimonial grid with varied card heights, attribution avatars, and star ratings.
Pricing CTA section
Wraps the ComparisonTable with a section header, supporting copy, and a final CTA row.
FAQ accordion
Single-open Base UI accordion with rich panel content — paragraphs and code blocks.
Logo cloud
Muted logo wall with 12 abstract brand-mark SVGs and subtle entrance animation.
Stat counter row
Row of four big stat counters with in-view count-up animation.
Newsletter CTA
Conversion-focused newsletter sign-up — heading, email field, submit, privacy line.
Footer megamap
Site footer with brand block, 4-column sitemap, contact, social, legal, region selector.
Cookie banner
Bottom-aligned cookie consent banner with manage/accept and slide-in animation.
Floating chat launcher
Bottom-right floating chat button with notification dot, pulse ring, and preview card.
Sticky CTA bar
Top sticky CTA bar — auto-hides on scroll down, reveals on scroll up.
Process steps
Numbered process steps (3-5) with a connecting line. Each step has icon + title + body.
Full landing composition
Every marketing primitive composed into one long-scroll landing page surface.