<section data-component-type="Hero" class="w-full font-manrope" data-component-slug="ss-interior-flooring-template-products-hero">
  <!-- Content Section -->
  <div class="w-full bg-white px-6 md:px-12 lg:px-20 py-16 lg:py-20">
    <div class="max-w-2xl mx-auto text-center">
      <!-- Title -->
      <h1 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-gray-900 leading-tight mb-6" data-node="products_hero_title" data-node-type="text" data-node-label="Products Hero Title" data-node-default="Floors That Shape Modern Living Elegantly">
        {{products_hero_title}}
      </h1>

      <!-- Description -->
      <p class="text-[#535353] text-base md:text-md leading-relaxed mb-8" data-node="products_hero_description" data-node-type="textarea" data-node-label="Products Hero Description" data-node-default="Designed to elevate interior spaces through a careful balance of texture, tone, and contemporary design sensibility. Every surface is thoughtfully crafted to deliver timeless aesthetics.">
        {{products_hero_description}}
      </p>

      <!-- CTA Button -->
      <a data-node="products_hero_cta_link" data-node-type="url" data-node-label="Products Hero CTA Link" data-node-default="#products" href="{{products_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="products_hero_cta_text" data-node-type="text" data-node-label="Products Hero CTA Text" data-node-default="Explore Floors">{{products_hero_cta_text}}</span>
      </a>
    </div>
  </div>

  <!-- Full-width Hero Image -->
  <div class="w-full px-6 md:px-12 lg:px-20">
    <img data-node="products_hero_image" data-node-type="file" data-node-label="Products Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696179/seltrix/templates/ss-interior-flooring-template/products-hero-image.png" src="{{products_hero_image}}" alt="Interior flooring showcase" class="w-full h-[400px] md:h-[560px] lg:h-[720px] xl:h-[960px] object-cover rounded-xl">
  </div>
</section>