<section data-component-type="Hero" class="w-full font-manrope" data-component-slug="ss-interior-flooring-template-hero">
  <!-- Content Section -->
  <div class="w-full bg-white px-6 md:px-12 lg:px-20 pt-12 pb-16">
    <div class>
      <div class="max-w-xl">
        <!-- Title -->
        <h1 class="text-4xl md:text-5xl lg:text-[45px] font-bold text-gray-900 leading-tight mb-6" data-node="hero_title" data-node-type="text" data-node-label="Hero Title" data-node-default="Floors That Redefine Your Space with Style">
          {{hero_title}}
        </h1>

        <!-- Description -->
        <p class="text-[#535353] text-base md:text-md leading-relaxed mb-8" data-node="hero_description" data-node-type="textarea" data-node-label="Hero Description" data-node-default="Discover flooring that enhances your interiors with premium finishes and thoughtful craftsmanship. Made to endure, made to inspire, and made for the way you live.">
          {{hero_description}}
        </p>

        <!-- CTA Button -->
        <a data-node="hero_cta_link" data-node-type="url" data-node-label="Hero CTA Link" data-node-default="products" href="{{hero_cta_link}}" class="inline-block bg-[#965C00] text-white px-8 py-3.5 rounded-lg text-[15px] font-semibold hover:bg-[#7a5410] transition-colors shadow-md hover:shadow-lg">
          <span data-node="hero_cta_text" data-node-type="text" data-node-label="Hero CTA Text" data-node-default="Explore Floors">{{hero_cta_text}}</span>
        </a>
      </div>
    </div>
  </div>

  <!-- Full-width Hero Image -->
  <div class="w-full">
    <img data-node="hero_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696154/seltrix/templates/ss-interior-flooring-template/hero-image.png" src="{{hero_image}}" alt="Interior flooring showcase" class="w-full h-[400px] md:h-[500px] lg:h-[870px] object-cover">
  </div>
</section>