<section data-component-type="Hero" class="relative min-h-screen flex items-center pb-24 md:pb-32" data-component-slug="home-appliances-template-hero">
  <!-- Background Image - using img tag for proper import -->
  <div class="absolute inset-0 overflow-hidden">
    <img data-node="hero_bg" data-node-type="file" data-node-label="Hero Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046151/seltrix/templates/home-appliances-template/hero-bg.png" src="{{hero_bg}}" alt="Hero background" class="w-full h-full object-cover object-center">
    <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/70 to-transparent"></div>
  </div>
  <div class="w-[90%] mx-auto px-4 relative z-10">
    <div class="max-w-3xl">
      <!-- Tagline with Line -->

      <!-- Main Title -->
      <h1 data-node="hero_title" data-node-type="text" data-node-label="Title" data-node-default="Get Inspired
         and Redesign
         Your Space." class="text-4xl md:text-5xl lg:text-6xl xl:text-8xl font-semibold text-white mb-6 leading-tight">
        {{hero_title}}
      </h1>

      <!-- Description -->
      <p data-node="hero_description" data-node-type="textarea" data-node-label="Description" data-node-default="Discover appliances that simplify daily living, elevate comfort, and complete your dream home. Explore the latest innovations." class="text-white/90 text-lg md:text-xl lg:text-2xl mb-8 leading-relaxed max-w-2xl">
        {{hero_description}}
      </p>

      {{#if show_hero_button}}
      <a data-node="hero_cta_link" data-node-type="text" data-node-label="CTA Link" data-node-default="#" href="{{hero_cta_link}}" class="inline-block bg-[#FFDE16] text-[#2346A7] px-10 py-5 text-lg font-medium hover:bg-white transition-colors">
        <span data-node="hero_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Join the Run">{{hero_cta_text}}</span>
      </a>
      {{/if}}
    </div>
  </div>
</section>