<section class="relative  flex items-center min-h-[500px]" data-component-type="Content" data-component-slug="home-appliances-template-discover">
    <!-- Background Image -->
    <div class="absolute inset-0 z-0">
        <img data-node="image" data-node-type="file" data-node-label="Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046149/seltrix/templates/home-appliances-template/handshake-bg.png" src="{{image}}" class="w-full h-full object-cover" alt="Background">
        <!-- Optional overlay to ensure text/box separation if needed, or to match the 'darkness' of the right side -->
        <!-- The reference shows the right side (image) is slightly dark/blue-ish. -->
        <div class="absolute inset-0 bg-blue-900/20 mix-blend-multiply"></div>
    </div>

    <!-- Content Container -->
    <div class="relative z-10 w-full max-w-[90%] md:max-w-7xl mx-auto px-4">
        <!-- Yellow Box -->
        <div class="bg-[#FFDE16] max-w-lg p-10 md:p-14 lg:p-16 shadow-2xl rounded-sm">
             <h3 class="text-white text-xl font-bold uppercase tracking-wider mb-2 drop-shadow-sm">
                 <span data-node="subtitle" data-node-type="text" data-node-label="Subtitle" data-node-default="OUR COMMITMENT">{{subtitle}}</span>
            </h3>
            <h2 class="text-white text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight drop-shadow-md">
                 <span data-node="title" data-node-type="text" data-node-label="Title" data-node-default="Always Improving for You">{{title}}</span>
            </h2>
            <p class="text-white font-sans text-base leading-relaxed mb-10 drop-shadow-sm">
                 <span data-node="description" data-node-type="textarea" data-node-label="Description" data-node-default="We evolve with technology and customer feedback to keep delivering smarter, more reliable appliances. From design upgrades to service enhancements, we work continuously to improve your home experience.">{{description}}</span>
            </p>
            
            <a data-node="button_link" data-node-type="text" data-node-label="Button Link" data-node-default="#" href="{{button_link}}" class="inline-block bg-white text-[#2346A7] px-8 py-3.5 rounded-full font-bold text-sm tracking-wide uppercase hover:bg-gray-50 transition-colors shadow-md">
                 <span data-node="button_text" data-node-type="text" data-node-label="Button Text" data-node-default="DISCOVER">{{button_text}}</span>
            </a>
        </div>
    </div>
</section>