<section data-component-type="Hero" class="relative w-full overflow-hidden" data-component-slug="interior-product-showcase-template-hero">
  <!-- ================= STYLES ================= -->
  

  <!-- ================= HERO ================= -->
  <div class="hero-wrapper">
    <!-- BACKGROUND IMAGE (SAFE) -->
    <img src="{{hero_background}}" alt class="hero-bg-img" data-node="hero_background" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768210821/seltrix/templates/interior-product-showcase-template/interior-hero.webp">

    <!-- CONTENT -->
    <div class="hero-content">
      <h1 class="hero-heading" data-node="hero_heading" data-node-type="text" data-node-default="DESIGN THAT DEFINES YOUR SPACE.">
        {{hero_heading}}
      </h1>

      <p class="hero-subtext" data-node="hero_subtext" data-node-type="text" data-node-default="Where timeless aesthetics meet everyday comfort—crafted for modern living, made to last.">
        {{hero_subtext}}
      </p>

      <a href="{{hero_cta_link}}" class="hero-cta" data-node="hero_cta_link" data-node-type="url" data-node-default="#">
        <span data-node="hero_cta_text" data-node-type="text" data-node-default="Explore the Collection">
          {{hero_cta_text}}
        </span>
      </a>

      <img src="{{hero_scroll_icon}}" class="hero-scroll" id="heroScrollTrigger" data-node="hero_scroll_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768302454/seltrix/templates/interior-product-showcase-template/scroll.svg" alt="Scroll Down">
    </div>
  </div>

  <!-- ================= SCRIPT ================= -->
  
</section>