<section data-component-type="Hero" class="w-full bg-white font-manrope py-12 md:py-16 lg:py-20 px-6 md:px-12 lg:px-20" data-component-slug="ss-interior-flooring-template-spaces-hero">
  <div class>
    <!-- Header Row: Title Left, Description Right -->
    <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-0 lg:gap-16 mb-10 lg:mb-14">
      <!-- Title -->
      <h1 class="text-4xl md:text-5xl lg:text-[45px] font-bold text-gray-900 leading-tight mb-6 max-w-full lg:max-w-2xl" data-node="spaces_title" data-node-type="textarea" data-node-label="Hero Title" data-node-default="Flooring Designed for Every Interior Space">
        {{spaces_title}}
      </h1>

      <!-- Description -->
      <p class="text-[#535353] text-base md:text-md leading-relaxed lg:mb-8 max-w-full lg:max-w-lg lg:pt-2" data-node="spaces_description" data-node-type="textarea" data-node-label="Hero Description" data-node-default="Every space has its own rhythm, function, and visual demand. Our flooring adapts seamlessly to modern living, work, and leisure environments. Built for Every Interior That Demands More.">
        {{spaces_description}}
      </p>
    </div>

    <!-- Full Width Showcase Image -->
    <div class="w-full overflow-hidden rounded-xl lg:rounded-2xl">
      <img data-node="spaces_hero_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696212/seltrix/templates/ss-interior-flooring-template/spaces-hero.jpg" src="{{spaces_hero_image}}" alt="Interior flooring showcase" class="w-full h-[300px] sm:h-[400px] md:h-[500px] lg:h-[700px] xl:h-[800px] 2xl:h-[960px] object-cover">
    </div>
  </div>
</section>