{
  "title": "BCW — Hero Slider",
  "type": "section",
  "templateType": "section",
  "content": [
    {
      "id": "cod001",
      "name": "code",
      "parent": 0,
      "children": [],
      "settings": {
        "code": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css\">\n\n<style>\n  .bcw-hero-slider {\n    width: 100%;\n  }\n\n  .bcw-hero-slider .swiper-slide {\n    background-image: var(--bg-desktop);\n    background-size: cover;\n    background-position: center;\n    min-height: 600px;\n    display: flex;\n    align-items: center;\n  }\n\n  @media (max-width: 767px) {\n    .bcw-hero-slider .swiper-slide {\n      background-image: var(--bg-mobile);\n      min-height: 420px;\n    }\n  }\n\n  .bcw-hero-card {\n    width: 50%;\n    margin-left: 5%;\n    background: rgba(255, 255, 255, 0.88);\n    padding: var(--space-lg);\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-md);\n  }\n\n  @media (max-width: 767px) {\n    .bcw-hero-card {\n      width: 90%;\n      margin-left: 5%;\n    }\n  }\n\n  .bcw-hero-eyebrow {\n    color: var(--color-primary);\n    font-size: var(--text-sm);\n    font-weight: 600;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n  }\n\n  .bcw-hero-card h1 {\n    font-size: var(--h1);\n    color: var(--color-heading);\n    margin: 0;\n    line-height: 1.15;\n  }\n\n  .bcw-hero-card p {\n    font-size: var(--text-base);\n    color: var(--color-text);\n    margin: 0;\n  }\n\n  .bcw-hero-buttons {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n  }\n\n  .bcw-btn-primary {\n    display: inline-block;\n    background: var(--color-primary);\n    color: var(--color-white);\n    padding: 12px 24px;\n    font-weight: 600;\n    text-decoration: none;\n  }\n\n  .bcw-btn-primary:hover {\n    background: var(--color-primary-dark);\n    color: var(--color-white);\n  }\n\n  .bcw-btn-outline {\n    display: inline-block;\n    background: transparent;\n    color: var(--color-primary);\n    border: 2px solid var(--color-primary);\n    padding: 10px 24px;\n    font-weight: 600;\n    text-decoration: none;\n  }\n\n  .bcw-btn-outline:hover {\n    background: var(--color-primary);\n    color: var(--color-white);\n  }\n\n  .bcw-hero-slider .swiper-button-prev,\n  .bcw-hero-slider .swiper-button-next {\n    color: var(--color-white);\n  }\n\n  .bcw-hero-slider .swiper-pagination-bullet-active {\n    background: var(--color-primary);\n  }\n</style>\n\n<div class=\"bcw-hero-slider swiper\">\n  <div class=\"swiper-wrapper\">\n\n    <!-- Slide 1 -->\n    <!-- Desktop image: 1400x700, Mobile image: 700x900 (portrait crop) -->\n    <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=1'); --bg-mobile: url('https://picsum.photos/700/900?random=1')\">\n      <div class=\"bcw-hero-card\">\n        <span class=\"bcw-hero-eyebrow\">Your Eyebrow Label</span>\n        <h1>Your Hero Headline Goes Here</h1>\n        <p>Supporting text that describes your offer or value proposition. Keep it concise and benefit-focused.</p>\n        <div class=\"bcw-hero-buttons\">\n          <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n          <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Slide 2 -->\n    <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=2'); --bg-mobile: url('https://picsum.photos/700/900?random=2')\">\n      <div class=\"bcw-hero-card\">\n        <span class=\"bcw-hero-eyebrow\">Second Slide Label</span>\n        <h1>Another Compelling Headline</h1>\n        <p>Each slide carries its own message, image, and call to action. Replace this with your content.</p>\n        <div class=\"bcw-hero-buttons\">\n          <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n          <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Slide 3 -->\n    <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=3'); --bg-mobile: url('https://picsum.photos/700/900?random=3')\">\n      <div class=\"bcw-hero-card\">\n        <span class=\"bcw-hero-eyebrow\">Third Slide Label</span>\n        <h1>Keep Your Message Clear and Focused</h1>\n        <p>Duplicate or remove slides as needed. Swap the URLs in the style attribute for desktop and mobile images.</p>\n        <div class=\"bcw-hero-buttons\">\n          <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n          <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"swiper-button-prev\"></div>\n  <div class=\"swiper-button-next\"></div>\n  <div class=\"swiper-pagination\"></div>\n</div>\n\n<script src=\"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js\"></script>\n<script>\n  (function () {\n    var el = document.currentScript.closest('.brxe-code').querySelector('.bcw-hero-slider');\n    new Swiper(el, {\n      loop: true,\n      autoplay: {\n        delay: 5000,\n        disableOnInteraction: false\n      },\n      navigation: {\n        nextEl: el.querySelector('.swiper-button-next'),\n        prevEl: el.querySelector('.swiper-button-prev')\n      },\n      pagination: {\n        el: el.querySelector('.swiper-pagination'),\n        clickable: true\n      }\n    });\n  })();\n</script>"
      },
      "label": "Hero Slider"
    }
  ]
}