Blitz Brand Lab · Templates

A page is a contract, not a canvas

10 live templates and 2 dormant ones. Each one fixes its data source, the order of its sections, what every section requires, and the checks a page must pass before it ships. Two pages of the same directory read as one template, or the site reads as several.

10 LIVE · 2 DORMANT15 PRODUCTS · 5 USE CASES · 5 TEAMSORDER IS PART OF THE CONTRACTMIRROR OF src/pages/**
01Copy lives in the data

H1, subtitle, FAQ, endpoint: all in JSON or MDX. A template that carries a sentence carries a bug waiting to diverge.

02A page never opens on a grid

The first body section is a split, a lead or a scene. Features in first position render as FeatureLead.

03Fallbacks are measured, not read

A missing asset or href produces a degraded variant without an error. Compare a page with the directory reference before touching CSS.

04Same closing everywhere

Signed band, FAQ, offer strip, CTA. The reader lands on the same decision at the end of every chapter.

00
Shared skeleton

What BaseLayout posts once

Every template starts here. None of these is ever redrawn in a page or a component.

6 PARTS
  1. SEOtitle, description, canonical, OG, Twitter, JSON-LD
  2. Navnavbar + mega-menu from config/site.ts (NAV, PRODUCT_FAMILIES, CTA)
  3. .page-railsthe two vertical rules, aligned on .container
  4. <main id="main">the only landmark; skip link target
  5. Footerfrom config/site.ts (FOOTER, EXTERNAL); privacy and opt-out links
  6. Tracking loaderonly when PUBLIC_TRACKING_ENABLED, guarded by BaseLayout
01
T1 · live

Home

The one page with bespoke sections: every home component reads home.json itself, and the offer band reads pricing.ts.

1 page
  1. 01
    HeroTopBorder + HomeHero + HeroBottomBorderhome.json hero
    • h1
    • subtitle
    • primaryCta

    Framed hero with the lifetime-offer banner (.hero-offer)

  2. 02
    LogoBandconfig/logos
  3. 03
    SectionDivider
  4. 04
    OfferBandconfig/pricing.ts

    variant="band": 5 → 50 requests per second, CTA to /pricing

  5. 05
    AllInOneSolutionkind: usecaseshome.json sections[0]
  6. 06
    StartBuildingkind: featureshome.json sections[1]
  7. 07
    InfraPillarskind: splithome.json sections[2]

    100 % driven by JSON: pillars, chips, proof

  8. 08
    RawDataIntelligencekind: showcasehome.json sections[3]
  9. 09
    DataWorkflowskind: featureshome.json sections[4]

    Dark matrix, one cell per workflow

  10. 10
    Testimonialsconfig/testimonials.ts

    Hidden in production while QUOTES_ARE_PLACEHOLDERS is true

  11. 11
    CtaSection
02
T2 · live

Product

One API, one page. Two openings exist: split + showcase (CodeSplit then ProductTabs) or a FeatureLead opening followed by the rail and the steps.

15 pages
  1. 01
    Breadcrumbsfamily label + seo.title

    BreadcrumbList JSON-LD

  2. 02
    ProductHerohero
    • h1
    • subtitle
    • primaryCta
    • secondaryCta

    secondaryCta = the deep link to the API reference page

  3. 03
    TrustedBandconfig/logos

    Product variant: text cell + client marquee

  4. 04
    SectionDivider
  5. 05
    CodeSplitkind: splitoptional
    • title
    • items (text bullets)
    • asset

    Opening A. The button falls back to docsUrl

  6. 06
    ProductTabskind: showcaseoptional
    • title
    • items[] with title + text

    Opening A

  7. 07
    FeatureLeadkind: features
    • items[] with title, text, asset

    Opening B, only when features is the FIRST section. Later features render as GrayCards

  8. 08
    UseCaseRailkind: usecases
    • items[] with title, text, href
  9. 09
    WorkflowStepskind: stepsoptional
    • items[] with title, text

    Subtitle carries the endpoint: « One endpoint, POST /v2/…, … »

  10. 10
    SectionDivider
  11. 11
    GrayCards (links)relatedProducts[] or same family

    « Related APIs », 3 cards. relatedProducts: [] removes the band

  12. 12
    SignatureBandFAMILY_BANDS[family] + docsUrl
  13. 13
    FaqSectionfaq[]

    Native <details>, FAQPage JSON-LD emitted automatically

  14. 14
    OfferBandconfig/pricing.ts

    variant="strip", links to /pricing

  15. 15
    CtaSectionconfig/site.ts
JSON · the T2 contract, opening A
{
  "family": "search",
  "endpoint": "POST /v2/search/companies",
  "seo": { "title": "… | …", "description": "140 to 160 characters" },
  "hero": {
    "tag": "…", "h1": "…", "subtitle": "…",
    "primaryCta": { "label": "Get 1,000 credits free", "href": "https://app.blitz-api.ai" },
    "secondaryCta": { "label": "API Docs", "href": "https://docs.blitz-api.ai/api-reference/…" }
  },
  "sections": [
    { "kind": "split", "title": "…", "subtitle": "…", "asset": "search-query", "items": [{ "text": "…" }, { "title": "API Docs", "href": "https://docs.blitz-api.ai/…" }] },
    { "kind": "showcase", "title": "…", "items": [{ "title": "…", "text": "…", "asset": "filter-set" }] },
    { "kind": "features", "title": "…", "items": [{ "title": "…", "text": "…", "asset": "dataset" }] },
    { "kind": "usecases", "title": "…", "items": [{ "title": "…", "text": "…", "href": "/use-cases/build-tam" }] }
  ],
  "faq": [{ "q": "…", "a": "…" }],
  "docsUrl": "https://docs.blitz-api.ai/api-reference/…",
  "relatedProducts": ["/products/people-search", "/products/tam-by-people"]
}
03
T3 · live

Use case

A playbook page: framed hero with its MotionScene, one proof frame per editorial block, a capability map, the endpoints that execute it.

5 pages
  1. 01
    BreadcrumbsUC_META crumb
  2. 02
    UseCaseHerohero + scene
    • h1
    • subtitle
    • primaryCta
    • a spec in motion/specs/use-cases/

    Without a scene the hero is a centered text block

  3. 03
    TrustedBandconfig/logos

    Use case variant: centered hook + marquee

  4. 04
    SectionDivider
  5. 05
    UseCaseSplit « points »kind: split
    • asset
    • items[] text bullets

    Text on the left rail, proof frame on the right

  6. 06
    WorkflowStepskind: steps
    • items[] title + text
  7. 07
    PlaybookGridkind: features
    • href on EVERY item

    The current page cell becomes « You are here »

  8. 08
    UseCaseSplit « cta »kind: split
    • asset
    • exactly one item {title, href}

    Proof on the left, text + button on the right. Without the href item it silently falls back to « points »

  9. 09
    RelatedApiskind: apis
    • asset
    • items[] with href; bullets separated by \n

    The P1 frame shows UC_META.endpoint

  10. 10
    SignatureBandUSECASE_BANDS[slug] + docsUrl

    proof is cut when the page already shows that signature

  11. 11
    FaqSectionfaq[]

    Native <details>, FAQPage JSON-LD emitted automatically

  12. 12
    OfferBandconfig/pricing.ts

    variant="strip", links to /pricing

  13. 13
    CtaSectionconfig/site.ts
04
T4 · live

Team (persona)

A persona page. The template derives its sections structurally: the pains split, the untitled features, the founder split (one titled + texted item) and the « Plug BlitzAPI » split.

5 pages
  1. 01
    Breadcrumbshero accent
  2. 02
    PersonaHerohero
    • h1 (« … for <persona> » or **accent**)
    • primaryCta
  3. 03
    LogoBand
  4. 04
    SectionDivider
  5. 05
    PainsSectionkind: split + features (untitled)
    • pains split: title, subtitle, items[] (lead + bullets)
    • features WITHOUT title: 3 cells
    • scene in motion/specs/teams/

    A features section WITH a title leaves PainsSection and becomes GrayCards

  6. 06
    (usecases)kind: usecases

    Not rendered in the September build (PlaybooksGrid left with the Learn module). Kept in the JSON for October

  7. 07
    WorkplaceSectionkind: split (founder) + split (Plug BlitzAPI)
    • founder split: ONE item with title « Name, Role » and text
    • stack split: title starting with « Plug BlitzAPI »
  8. 08
    WorkflowStepskind: stepsoptional
  9. 09
    GrayCards (plain)kind: features (titled)optional
  10. 10
    SignatureBandTEAM_BANDS[slug] + docsUrl
  11. 11
    FaqSectionfaq[]

    Native <details>, FAQPage JSON-LD emitted automatically

  12. 12
    OfferBandconfig/pricing.ts

    variant="strip", links to /pricing

  13. 13
    CtaSectionconfig/site.ts
05
T-hub · live

Hub (Developers, Integrations)

Two single pages reached from the same menu, so they share one contract: framed hero with a scene, editorial split, one showcase, one code or connector block, one « Where to go next » matrix.

2 pages
  1. 01
    Breadcrumbs
  2. 02
    UseCaseHerohero + scene
    • a spec in motion/specs/hubs/
  3. 03
    LogoBand
  4. 04
    SectionDivider
  5. 05
    FeatureLeadkind: features
    • 3 items
  6. 06
    UseCaseRail (Developers) · ConnectorMatrix (Integrations)kind: showcase
    • href only on what is really documented
  7. 07
    CodeTabskind: codeoptional
    • endpoint
    • responseFields
    • items[] with lang, code and a verbatim `source` URL

    Developers only. A snippet without source is an invented snippet

  8. 08
    WorkflowStepskind: steps
  9. 09
    HubSplitkind: split
    • asset
    • proof.head
    • proof.foot
  10. 10
    SectionDivider
  11. 11
    PlaybookGridrelatedProducts[] + relatedCourses[]
    • 6 cells (full grid)

    ONE « Where to go next » matrix, never two consecutive card bands

  12. 12
    SignatureBandHUB_BANDS[slug] + docsUrl
  13. 13
    FaqSectionfaq[]

    Native <details>, FAQPage JSON-LD emitted automatically

  14. 14
    OfferBandconfig/pricing.ts

    variant="strip", links to /pricing

  15. 15
    CtaSectionconfig/site.ts
06
T-pricing · live

Pricing

The page that decides the conversion rate. No component carries a figure: everything reads pricing.ts, including the JSON-LD offers.

1 page
  1. 01
    Breadcrumbs
  2. 02
    PageHeroCOPY.hero

    align="center" compact

  3. 03
    OfferBand

    variant="strip": the deadline and the lifetime terms

  4. 04
    PlanCardsPLANS
    • three plans, same decision at the same height
  5. 05
    QualityStrip

    Quality reassurance without a figure (no accuracy figure in the September build)

  6. 06
    PlanComparePLAN_COMPARE

    Three groups, a decision row in <tfoot>

  7. 07
    EmbeddedBandEMBEDDED
  8. 08
    FaqSectionPRICING_FAQ
  9. 09
    CtaSection
07
T-about · live

About

The company page: manifesto, counters, principles, the dark workflow grid. Copy and the four portraits are frozen.

1 page
  1. 01
    Breadcrumbs
  2. 02
    Inline hero (Tag + h1 + Button)about.json hero
  3. 03
    LogoBand
  4. 04
    Manifestoabout.json
    • html
    • name
    • role
  5. 05
    CountersBandabout.json counters

    variant="about", authorized KPIs only

  6. 06
    ValuesGridabout.json tabs

    Principles, all unfolded

  7. 07
    DarkWorkflowGridabout.json
  8. 08
    FaqSection
  9. 09
    Testimonials
  10. 10
    CtaSection
08
T-contact · live

Contact

A form page: PageHero, the form (Field + Checkbox, three states), the logo band, the steps, the FAQ.

1 page
  1. 01
    Breadcrumbs
  2. 02
    PageHero

    align="left": the left variant carries the section envelope geometry

  3. 03
    Form (Field, Checkbox, Button)CONTACT_FORM endpoint (n8n webhook)
    • three states: sending, sent, error
  4. 04
    LogoBand
  5. 05
    WorkflowStepskind: steps
  6. 06
    FaqSection
  7. 07
    CtaSection
10
T-utility · live

Utility pages

Self-contained pages on the shared skeleton: the 404 (Nav, copy, Button, Footer) and the CCPA opt-out form (verbatim brief, request_id generated on the site).

2 pages
  1. 01
    Nav + FooterBaseLayout
  2. 02
    Page bodyJSON copy

    Opt-out: [hidden]{display:none!important} scoped rule, because state frames set display:flex

11
T-blog · dormant

Blog article

A 740px reading column (about 67 characters): category, date and reading time, KeyTakeaways under the title, prose with the 12 shared content blocks, FAQ, then « Keep reading » cards.

3 articles, routes dormant
  1. 01
    Article headerfrontmatter
    • title
    • description
    • category
    • publishedAt
    • takeaways (3 to 5)
  2. 02
    KeyTakeawaystakeaways[]

    Also emitted as structured data

  3. 03
    Prose + content blocksMDX body

    components/content/* (Definition, Callout, Steps, Compare, Stats…)

  4. 04
    Figurescene spec

    Visual mounted on the Visual Generator, caption required

  5. 05
    FaqSectionfaq[]
  6. 06
    BlogCard × 3latest posts

    « Keep reading »

12
T-learn · dormant

Course and lesson

An LMS without login: course catalog (CourseCard with a generative cover), course landing (CurriculumList, VideoIntro, LeadMagnet), lesson page (LessonChrome, LessonSidebar, prose, the 7 lesson blocks, progress in localStorage).

2 courses · 12 lessons, routes dormant
  1. 01
    CourseCardcourses collection

    Generative 16:9 cover, platform tag, level badge, lessons and minutes

  2. 02
    CurriculumList + VideoIntro + LeadMagnetcourse JSON

    Course landing

  3. 03
    LessonChrome + LessonSidebarlesson headings + progress

    Reading bar, remaining time, keyboard arrows, resume

  4. 04
    Lesson arclesson MDX
    • Objective first
    • Recap last

    Objective → prose + shared blocks → Payload → TryIt → Troubleshoot → Quiz · Checkpoint → Recap