{
  "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": "Hero with Call-to-Action",
    "subheading": "Drive conversions with prominent buttons",
    "bg": "light",
    "buttons": [
      { "text": "Get Started", "url": "#", "style": "primary" },
      { "text": "Learn More", "url": "#", "style": "outline-primary" }
    ]
  }
}

<section class="bg-light py-5">
  <div class="container text-center">
    <h1 class="display-4 fw-bold mb-3 text-dark">
      Hero with Call-to-Action
    </h1>
    <p class="lead text-muted mb-4">
      Drive conversions with prominent buttons
    </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-primary btn-lg">Learn More</a>
    </div>
  </div>
</section>

{
  "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://placehold.co/800x600/4F46E5/white?text=PageJSON",
    "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://placehold.co/800x600/4F46E5/white?text=PageJSON" 
             alt="Split Hero" 
             class="img-fluid rounded">
      </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>