{
  "component": "hero",
  "variant": "simple",
  "data": {
    "heading": "Simple Hero",
    "subheading": "Clean and minimal header section",
    "bg": "light"
  }
}

<section class="bg-light py-5">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-dark">
      Simple Hero
    </h1>
    <p class="lead text-muted">
      Clean and minimal header section
    </p>
  </div>
</section>

{
  "component": "hero",
  "variant": "with-cta",
  "data": {
    "heading": "Launch faster with PageJSON",
    "subheading": "Schema-driven pages that render consistent UI.",
    "bg": "light",
    "align": "center",
    "buttons": [
      { "text": "View Components", "url": "/components", "style": "primary" },
      { "text": "Read the Schema", "url": "/docs", "style": "outline-primary" }
    ]
  }
}

<section class="bg-light py-5">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-dark">Launch faster with PageJSON</h1>
    <p class="lead text-muted mb-4">Schema-driven pages that render consistent UI.</p>
    <div class="d-flex gap-3 justify-content-center flex-wrap">
      <a href="#" class="btn btn-primary">View Components</a>
      <a href="#" class="btn btn-outline-primary">Read the Schema</a>
    </div>
  </div>
</section>

{
  "component": "hero",
  "variant": "simple",
  "data": {
    "heading": "A schema for AI-generated pages",
    "subheading": "Predictable structure. Consistent output.",
    "bg": "light",
    "align": "left",
    "features": [
      { "icon": "fa-check", "title": "Schema validated" },
      { "icon": "fa-check", "title": "Token-driven themes" },
      { "icon": "fa-check", "title": "Responsive output" },
      { "icon": "fa-check", "title": "Consistent typography" }
    ]
  }
}

<!-- Left-aligned: features become a vertical list -->
<div class="features-list features-left features-simple">
  <div class="feature-item feature-simple">
    <div class="feature-icon icon-1x"><i class="fa-solid fa-check"></i></div>
    <div class="feature-content"><div class="feature-title">Schema validated</div></div>
  </div>
  <!-- More features... -->
</div>

{
  "component": "hero",
  "variant": "simple",
  "data": {
    "heading": "Designed for consistent output",
    "subheading": "A few well-sized features beat a long list.",
    "bg": "light",
    "align": "center",
    "features": [
      { "icon": "fa-wand-magic-sparkles", "title": "AI-friendly", "text": "Constrained JSON that validates cleanly.", "iconBg": "primary" },
      { "icon": "fa-layer-group", "title": "Composable", "text": "Blocks and variants stay predictable.", "iconBg": "success" },
      { "icon": "fa-gauge-high", "title": "Responsive", "text": "Layouts adapt without custom CSS.", "iconBg": "warning" },
      { "icon": "fa-shield-halved", "title": "Durable", "text": "Stable HTML for real deployments.", "iconBg": "info" }
    ]
  }
}

<!-- Centered rich features: icon above title + short text -->
<!-- Optional discs (for larger icons): add iconBg in JSON, or add icon-disc + data-disc in raw HTML -->
<div class="features-list features-center features-rich">
  <div class="feature-item feature-rich">
    <div class="feature-icon icon-1-5x icon-disc" data-disc="primary"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
    <div class="feature-content">
      <div class="feature-title">AI-friendly</div>
      <div class="feature-text">Constrained JSON that validates cleanly.</div>
    </div>
  </div>
  <!-- More features... -->
</div>

{
  "component": "hero",
  "variant": "simple",
  "data": {
    "heading": "Built for production use",
    "subheading": "Simple trust signals keep layout stable.",
    "bg": "light",
    "align": "center",
    "trustSignals": [
      { "text": "SEO-ready markup included" },
      { "text": "Responsive by default" },
      { "text": "Bootstrap 5 compatible" }
    ]
  }
}

<!-- Trust signals: short text + default green check icons -->
<div class="trust-signals">
  <div class="trust-signals-list align-center">
    <div class="trust-signal"><i class="fa-solid fa-check-circle text-success"></i><span>SEO-ready markup included</span></div>
    <div class="trust-signal"><i class="fa-solid fa-check-circle text-success"></i><span>Responsive by default</span></div>
    <div class="trust-signal"><i class="fa-solid fa-check-circle text-success"></i><span>Bootstrap 5 compatible</span></div>
  </div>
</div>

{
  "component": "hero",
  "variant": "dark",
  "data": {
    "heading": "Dark Hero",
    "subheading": "Bold and dramatic with dark background",
    "buttons": [
      { "text": "Explore", "url": "#", "style": "warning" },
      { "text": "Contact", "url": "#", "style": "outline-light" }
    ]
  }
}

<section class="bg-dark py-5">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-white">
      Dark Hero
    </h1>
    <p class="lead text-light-muted mb-4">
      Bold and dramatic with dark background
    </p>
    <div class="d-flex gap-3 justify-content-center">
      <a href="#" class="btn btn-warning btn-lg">Explore</a>
      <a href="#" class="btn btn-outline-light btn-lg">Contact</a>
    </div>
  </div>
</section>

{
  "component": "hero",
  "variant": "simple",
  "data": {
    "heading": "Primary Brand Hero",
    "subheading": "Uses your configured brand primary color",
    "bg": "primary",
    "buttons": [
      { "text": "Request Quote", "url": "#", "style": "light" },
      { "text": "Our Services", "url": "#", "style": "outline-light" }
    ]
  }
}

<section class="bg-brand-primary py-5">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-white">
      Primary Brand Hero
    </h1>
    <p class="lead text-light-muted mb-4">
      Uses your configured brand primary color
    </p>
    <div class="d-flex gap-3 justify-content-center">
      <a href="#" class="btn btn-light btn-lg">Request Quote</a>
      <a href="#" class="btn btn-outline-light btn-lg">Our Services</a>
    </div>
  </div>
</section>

{
  "component": "hero",
  "variant": "image-left",
  "data": {
    "heading": "Image Background - Left Aligned",
    "subheading": "Compelling imagery with clear text placement on the left side",
    "image": "/assets/img/samples/hero1.webp",
    "overlay": "dark",
    "buttons": [
      { "text": "Learn More", "url": "#", "style": "primary" }
    ]
  }
}

<section class="hero-image-left position-relative py-5" 
         style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('/assets/img/samples/hero1.webp') center/cover; 
                min-height: 400px;">
  <div class="container h-100 d-flex align-items-center">
    <div class="text-white" style="max-width: 600px;">
      <h1 class="display-4 fw-bold mb-3">
        Image Background - Left Aligned
      </h1>
      <p class="lead mb-4">
        Compelling imagery with clear text placement on the left side
      </p>
      <a href="#" class="btn btn-primary btn-lg">Learn More</a>
    </div>
  </div>
</section>

{
  "component": "hero",
  "variant": "image-center",
  "data": {
    "heading": "Image Background - Centered",
    "subheading": "Full-width imagery with centered text overlay",
    "image": "/assets/img/samples/hero1.webp",
    "overlay": "dark",
    "buttons": [
      { "text": "Get Started", "url": "#", "style": "primary" },
      { "text": "View Gallery", "url": "#", "style": "outline-light" }
    ]
  }
}

<section class="hero-image-center position-relative py-5 text-center" 
         style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('/assets/img/samples/hero1.webp') center/cover; 
                min-height: 400px;">
  <div class="container h-100 d-flex align-items-center justify-content-center">
    <div class="text-white">
      <h1 class="display-4 fw-bold mb-3">
        Image Background - Centered
      </h1>
      <p class="lead mb-4">
        Full-width imagery with centered text overlay
      </p>
      <div class="d-flex gap-3 justify-content-center">
        <a href="#" class="btn btn-primary btn-lg">Get Started</a>
        <a href="#" class="btn btn-outline-light btn-lg">View Gallery</a>
      </div>
    </div>
  </div>
</section>

{
  "component": "hero",
  "variant": "split",
  "data": {
    "heading": "Split Layout Hero",
    "subheading": "Image and content side by side for balanced visual impact",
    "image": "https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1200&q=80",
    "imageAlt": "Team collaborating at a desk",
    "bg": "light",
    "buttons": [
      { "text": "Explore", "url": "#", "style": "primary" }
    ]
  }
}

<section class="bg-light py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <h1 class="display-4 fw-bold mb-3 text-dark">
          Split Layout Hero
        </h1>
        <p class="lead text-muted mb-4">
          Image and content side by side for balanced visual impact
        </p>
        <a href="#" class="btn btn-primary btn-lg">Explore</a>
      </div>
      <div class="col-lg-6">
        <img src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1200&q=80" 
             alt="Team collaborating at a desk" 
             class="img-fluid rounded" loading="lazy">
      </div>
    </div>
  </div>
</section>

{
  "component": "hero",
  "variant": "full-width",
  "data": {
    "heading": "Full Width Hero",
    "subheading": "Edge-to-edge layout for maximum visual impact",
    "bg": "dark",
    "buttons": [
      { "text": "Get Started", "url": "#", "style": "warning" }
    ]
  }
}

<section class="bg-dark py-5">
  <div class="container-fluid text-center">
    <h1 class="display-4 fw-bold mb-3 text-white">
      Full Width Hero
    </h1>
    <p class="lead text-light-muted mb-4">
      Edge-to-edge layout for maximum visual impact
    </p>
    <a href="#" class="btn btn-warning btn-lg">Get Started</a>
  </div>
</section>

{
  "component": "hero",
  "variant": "animated",
  "data": {
    "heading": "Animated Hero",
    "subheading": "Elements animate in as you scroll into view",
    "bg": "primary",
    "animate": true,
    "buttons": [
      { "text": "See More", "url": "#", "style": "light" }
    ]
  }
}

<section class="bg-brand-primary py-5">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-white animate-fade-in">
      Animated Hero
    </h1>
    <p class="lead text-light-muted mb-4 animate-fade-in-up">
      Elements animate in as you scroll into view
    </p>
    <a href="#" class="btn btn-light btn-lg animate-fade-in-up">
      See More
    </a>
  </div>
</section>

{
  "component": "hero",
  "variant": "animated-image",
  "data": {
    "heading": "Animated Image Hero",
    "subheading": "Background imagery with animated text reveal",
    "image": "/assets/img/samples/hero1.webp",
    "overlay": "dark",
    "animate": true,
    "buttons": [
      { "text": "Discover", "url": "#", "style": "primary" }
    ]
  }
}

<section class="hero-animated-image position-relative py-5 text-center" 
         style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('/assets/img/samples/hero1.webp') center/cover; 
                min-height: 400px;">
  <div class="container h-100 d-flex align-items-center justify-content-center">
    <div class="text-white">
      <h1 class="display-4 fw-bold mb-3 animate-fade-in">
        Animated Image Hero
      </h1>
      <p class="lead mb-4 animate-fade-in-up">
        Background imagery with animated text reveal
      </p>
      <a href="#" class="btn btn-primary btn-lg animate-fade-in-up">
        Discover
      </a>
    </div>
  </div>
</section>

{
  "component": "hero",
  "variant": "animated-grid",
  "data": {
    "heading": "Animated Grid Hero",
    "subheading": "Hero section with animated feature highlights",
    "bg": "dark",
    "animate": true,
    "features": [
      { "icon": "fa-bolt", "text": "Fast" },
      { "icon": "fa-shield", "text": "Secure" },
      { "icon": "fa-globe", "text": "Global" },
      { "icon": "fa-star", "text": "Quality" }
    ],
    "buttons": [
      { "text": "Get Started", "url": "#", "style": "primary" }
    ]
  }
}

<section class="bg-dark py-5">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-white animate-fade-in">
      Animated Grid Hero
    </h1>
    <p class="lead text-light-muted mb-5 animate-fade-in-up">
      Hero section with animated feature highlights
    </p>
    <div class="row g-4 mb-4">
      <div class="col-md-3 animate-fade-in-up">
        <div class="display-6 mb-3 text-white">
          <i class="fa-solid fa-bolt"></i>
        </div>
        <h5 class="mb-2 text-white">Fast</h5>
      </div>
      <!-- Additional features... -->
    </div>
    <a href="#" class="btn btn-primary btn-lg animate-fade-in-up">
      Get Started
    </a>
  </div>
</section>

{
  "component": "hero",
  "variant": "simple",
  "data": {
    "heading": "Custom Gradient Background",
    "subheading": "Use any CSS gradient or hex color",
    "bgColor": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    "bgMode": "dark",
    "buttons": [
      { "text": "Explore", "url": "#", "style": "light" }
    ]
  }
}

<section class="py-5" 
         style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-white">
      Custom Gradient Background
    </h1>
    <p class="lead text-light-muted mb-4">
      Use any CSS gradient or hex color
    </p>
    <a href="#" class="btn btn-light btn-lg">Explore</a>
  </div>
</section>

{
  "component": "hero",
  "variant": "with-cta",
  "data": {
    "heading": "Ocean Gradient",
    "subheading": "Cool blue tones for a professional feel",
    "bgColor": "linear-gradient(135deg, #0093E9 0%, #80D0C7 100%)",
    "bgMode": "dark",
    "buttons": [
      { "text": "Get Started", "url": "#", "style": "light" },
      { "text": "Learn More", "url": "#", "style": "outline-light" }
    ]
  }
}

<section class="py-5" 
         style="background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-white">
      Ocean Gradient
    </h1>
    <p class="lead text-light-muted mb-4">
      Cool blue tones for a professional feel
    </p>
    <div class="d-flex gap-3 justify-content-center">
      <a href="#" class="btn btn-light btn-lg">Get Started</a>
      <a href="#" class="btn btn-outline-light btn-lg">Learn More</a>
    </div>
  </div>
</section>

{
  "component": "hero",
  "variant": "with-cta",
  "data": {
    "heading": "Sunset Gradient",
    "subheading": "Warm, energetic colors for creative brands",
    "bgColor": "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
    "bgMode": "dark",
    "buttons": [
      { "text": "Explore", "url": "#", "style": "dark" },
      { "text": "Learn More", "url": "#", "style": "outline-light" }
    ]
  }
}

<section class="py-5" 
         style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-white">
      Sunset Gradient
    </h1>
    <p class="lead text-light-muted mb-4">
      Warm, energetic colors for creative brands
    </p>
    <div class="d-flex gap-3 justify-content-center">
      <a href="#" class="btn btn-dark btn-lg">Explore</a>
      <a href="#" class="btn btn-outline-light btn-lg">Learn More</a>
    </div>
  </div>
</section>