<section data-component-type="Content" class="bg-white py-12 lg:py-16 " data-component-slug="ss-interior-kitchen-build_your_banner">
  <div class="max-w-[90%] mx-auto">
    
    <div class="bg-[#0019BA] rounded-[32px] overflow-hidden flex flex-col lg:flex-row items-center relative min-h-[500px]">
      
      <!-- Left Content -->
      <div class="w-full lg:w-1/2 p-8 sm:p-12 lg:p-16 z-10 flex flex-col justify-center h-full">
        <h2 data-node="banner_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Build Your Kitchen" class="text-4xl sm:text-5xl font-bold text-white mb-6 leading-tight">
          {{banner_heading}}
        </h2>
        <p data-node="banner_description" data-node-type="textarea" data-node-label="Description" data-node-default="Discover appliances that transform your space with refined aesthetics, smarter functionality, and effortless support for your everyday routines." class="text-lg text-gray-200 mb-10 max-w-md leading-relaxed">
       {{banner_description}}        
       </p>
        
        <a data-node="banner_cta_link" data-node-type="text" data-node-label="CTA Link" data-node-default="#" href="{{banner_cta_link}}" class="inline-block">
          <span data-node="banner_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Start Your Upgrade" class="bg-white text-[#000000] px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors duration-300">
            {{banner_cta_text}}
    </span>
        </a>
      </div>

      <!-- Right Image -->
      <div class="w-full lg:w-1/2 relative h-[400px] lg:h-full lg:absolute lg:top-0 lg:right-0">
         <img data-node="banner_image" data-node-type="file" data-node-label="Banner Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779822/seltrix/templates/ss-interior-kitchen/build1.png" src="{{banner_image}}" alt="Kitchen Appliance" class="w-full h-full object-cover object-center lg:object-left">
      </div>

    </div>

  </div>
</section>