The top navigation bar. Includes a logo, navigation links, and a Call-To-Action (CTA) button. Automatically handles mobile responsiveness with a hamburger menu.

AI Context: Include exactly ONE header at the very top of the sections array for site navigation.

{
  "id": "main-header",
  "type": "header",
  "layout": "glass",
  "background": "var(--token-color-paper)",
  "content": {
    "logoText": "MyBrand",
    "logoImage": "/logo.png",
    "navLinks": [
      { "label": "Features", "href": "#features" },
      { "label": "Pricing", "href": "#pricing" }
    ],
    "ctaButton": { "label": "Login", "href": "/login", "variant": "outlined" }
  }
}

The main landing section at the top of a webpage. High impact, designed to grab attention immediately.

AI Context: Use this as the very first section of the homepage (after the header) to introduce the core value proposition and drive a primary call to action.

{
  "id": "hero-1",
  "type": "hero",
  "layout": "split",
  "background": "mesh",
  "content": {
    "badge": "New Release 2.0",
    "title": "Build Faster",
    "subtitle": "The ultimate tool for developers.",
    "primaryCta": { "label": "Start Free Trial", "href": "#pricing" },
    "secondaryCta": { "label": "Read Docs", "href": "#docs" },
    "image": "https://images.unsplash.com/photo-xxx"
  }
}

Introduce your company, mission, or vision.

AI Context: Use this section when you need a split layout (image on one side, text/mission/vision on the other) with optional statistics.

{
  "id": "about-1",
  "type": "about",
  "layout": "split",
  "content": {
    "title": "Our Mission",
    "description": "We are dedicated to building the future of the web.",
    "image": "https://images.unsplash.com/photo-xxx",
    "stats": [
      { "value": "10+", "label": "Years Experience" },
      { "value": "500+", "label": "Clients" }
    ]
  }
}

Displays a list of product features, value propositions, or services.

AI Context: Use this extensively to highlight product capabilities in a grid of 3 or 4 columns. It's the bread-and-butter of SaaS landing pages.

{
  "id": "features-1",
  "type": "features",
  "layout": "bento",
  "content": {
    "title": "Why Choose Us",
    "subtitle": "Everything you need to succeed.",
    "items": [
      {
        "icon": "cloud", // Lucide-react icon name
        "title": "Cloud Sync",
        "description": "Always backed up securely."
      }
    ]
  }
}

Display logos of companies you have worked with to establish trust.

AI Context: Place this immediately after the hero section (or bottom of page) to provide social proof.

{
  "id": "clients-1",
  "type": "clients",
  "layout": "marquee",
  "content": {
    "title": "Trusted by industry leaders",
    "logos": [
      { "name": "Company A", "image": "/logo-a.png" },
      { "name": "Company B", "image": "/logo-b.png" }
    ]
  }
}

Displays subscription tiers or service packages.

AI Context: Use this to display standard 3-tier SaaS pricing models.

{
  "id": "pricing-1",
  "type": "pricing",
  "layout": "cards",
  "content": {
    "title": "Simple Pricing",
    "plans": [
      {
        "name": "Pro",
        "price": "$29",
        "period": "/mo",
        "popular": true, // Elevates and highlights this card
        "features": ["Feature A", "Feature B"],
        "cta": "Buy Now"
      }
    ]
  }
}

Highlight numerical achievements, user counts, or operational metrics.

AI Context: Great for building credibility right above the footer or below the features section.

{
  "id": "stats-1",
  "type": "stats",
  "layout": "grid",
  "content": {
    "title": "By the numbers",
    "items": [
      { "value": "10M+", "label": "Active Users" },
      { "value": "99.9%", "label": "Uptime" }
    ]
  }
}

Introduce your team members, founders, or board of directors.

AI Context: Standard grid layout for an "About Us" page or agency site to show the faces behind the company.

{
  "id": "team-1",
  "type": "team",
  "layout": "grid",
  "content": {
    "title": "Meet the Team",
    "members": [
      {
        "name": "Alice Smith",
        "role": "CEO",
        "image": "https://images.unsplash.com/photo-xxx",
        "social": { "twitter": "#", "linkedin": "#" }
      }
    ]
  }
}

Social proof and client reviews.

AI Context: Include this to build trust. Marquee layout is best for SaaS, grid is best for agencies.

{
  "id": "testimonials-1",
  "type": "testimonials",
  "layout": "marquee",
  "content": {
    "title": "Loved by thousands",
    "items": [
      {
        "quote": "This product changed my life completely.",
        "author": "Jane Doe",
        "role": "CEO, Startup"
      }
    ]
  }
}

Display a chronological company history, roadmap, or process steps.

AI Context: Use for "How it works" steps (1, 2, 3) or company history.

{
  "id": "timeline-1",
  "type": "timeline",
  "layout": "vertical",
  "content": {
    "title": "Our Journey",
    "events": [
      {
        "year": "2024",
        "title": "Company Founded",
        "description": "Started in a garage."
      }
    ]
  }
}

Showcase high-resolution images of your products, portfolio, or office.

AI Context: Use this for visual portfolios, photography, or event showcases.

{
  "id": "gallery-1",
  "type": "gallery",
  "layout": "masonry",
  "content": {
    "title": "Our Work",
    "images": [
      { "src": "https://images.unsplash.com/...", "alt": "Project Alpha" }
    ]
  }
}

Display a blog feed, recent news articles, or press releases.

AI Context: Great for adding a "Latest News" section near the bottom of a homepage.

{
  "id": "articles-1",
  "type": "articles",
  "layout": "grid",
  "content": {
    "title": "Latest News",
    "posts": [
      {
        "title": "Understanding the Cloud",
        "excerpt": "A brief guide to...",
        "date": "Oct 12, 2026",
        "image": "https://images.unsplash.com/...",
        "link": "/blog/cloud"
      }
    ]
  }
}

Frequently Asked Questions using accessible, expandable accordions.

AI Context: Include this to address common objections before a CTA.

{
  "id": "faq-1",
  "type": "faq",
  "layout": "default",
  "content": {
    "title": "Common Questions",
    "items": [
      {
        "question": "How do I sign up?",
        "answer": "Click the button in the header."
      }
    ]
  }
}

High-conversion block intended to drive users to sign up or contact sales, typically placed just before the footer.

AI Context: The ultimate conversion point. Use right above the footer or Newsletter block.

{
  "id": "cta-1",
  "type": "cta",
  "layout": "default",
  "background": "gradient",
  "content": {
    "title": "Ready to get started?",
    "subtitle": "Join thousands of users today.",
    "primaryCta": { "label": "Start Trial", "href": "/signup" }
  }
}

Email capture form block for lead generation.

AI Context: Use this block if the user specifically mentions lead capture, subscriptions, or mailing lists.

{
  "id": "newsletter-1",
  "type": "newsletter",
  "layout": "center",
  "content": {
    "title": "Subscribe to our Newsletter",
    "subtitle": "Get weekly updates and tips.",
    "buttonLabel": "Subscribe"
  }
}

Displays contact information and a functional contact form UI.

AI Context: Typically used on a dedicated /contact page.

{
  "id": "contact-1",
  "type": "contact",
  "layout": "split",
  "content": {
    "title": "Get in Touch",
    "email": "[email protected]",
    "phone": "+1 234 567 8900",
    "address": "123 Main St, City"
  }
}

The bottom section of the page with copyright, social links, and secondary navigation columns.

AI Context: Include exactly ONE footer at the very end of the sections array.

{
  "id": "footer-1",
  "type": "footer",
  "layout": "default",
  "content": {
    "logoText": "MyBrand",
    "copyright": "© 2026 MyBrand Inc.",
    "navLinks": [
      { "label": "Privacy", "href": "/privacy" },
      { "label": "Terms", "href": "/terms" }
    ],
    "socialLinks": [
      { "platform": "Twitter", "url": "https://twitter.com" }
    ]
  }
}

Create asymmetrical "Apple-style" layouts using colSpan and rowSpan.

AI Context: Extremely popular modern design trend. Use this instead of standard grids if the user asks for a "modern Apple-like feel".

{
  "id": "bento-1",
  "type": "bento",
  "layout": { "columns": 3 },
  "content": {
    "blocks": [
      { "title": "Large Feature", "colSpan": 2, "rowSpan": 2 },
      { "title": "Small Stat", "colSpan": 1, "rowSpan": 1 }
    ]
  }
}

Build SaaS feature matrices (Us vs Them, Free vs Pro) with sticky headers.

AI Context: Use this below the Pricing section for deep-dive feature comparisons.

{
  "id": "comparison-1",
  "type": "comparison",
  "content": {
    "columns": [{ "title": "Feature" }, { "title": "Pro" }],
    "rows": [
      { "label": "API Access", "values": [true] }
    ]
  }
}

Interactive switchers for grouping use-cases without long scrolling.

AI Context: Excellent for pages with "Solutions for X, Y, Z" to avoid overwhelming the user.

{
  "id": "tabs-1",
  "type": "tabs",
  "content": {
    "tabs": [
      { "label": "Developers", "title": "Built for Code", "image": "/dev.jpg" },
      { "label": "Designers", "title": "Pixel Perfect", "image": "/design.jpg" }
    ]
  }
}

Easily embed Google Maps or OpenStreetMap iframes in a styled glass container.

AI Context: Use on local business websites or Contact pages to show physical locations.

{
  "id": "map-1",
  "type": "map",
  "content": {
    "title": "Visit Us",
    "embedUrl": "https://www.google.com/maps/embed?..."
  }
}

Seamless looping tickers for logos, keywords, or stock prices.

AI Context: Use this as a dynamic divider between large sections, or for client logos.

{
  "id": "marquee-1",
  "type": "marquee",
  "content": {
    "speed": "fast",
    "direction": "left",
    "items": [
      { "image": "/logo1.png" },
      { "text": "BREAKING NEWS" }
    ]
  }
}

Embed interactive 3D Spline experiences alongside your text.

AI Context: Add a massive wow factor to landing pages. Use this in a split layout next to a Hero or Feature block.

{
  "id": "spline-1",
  "type": "spline",
  "content": {
    "title": "Interactive 3D",
    "splineUrl": "https://my.spline.design/xxxx/"
  }
}