Newsletter

<div class="homepage-newsletter max-md:w-[343px] lg:w-full md:h-auto flex flex-col md:flex-row">
    <div class=" flex items-center justify-center">
        <div class="w-full max-w-[662px] aspect-square">
            <img src="/img/newletter-img.jpeg"
                 alt="Newsletter"
                 class="w-full h-full object-cover rounded-lg"
            >
        </div>
    </div>
    <div class="p-6 md:p-0 md:pl-6 lg:p-24 ">
        <div class="flex flex-col w-full max-w-full md:max-w-[90%] lg:max-w-[450px]">
            <span class="font-bold text-dark-50 pb-1">Newsletter</span>
            <span class="text-3xl lg:text-5xl text-neutral-800 font-medium pt-1 pb-6">10% de réduction sur votre première commande !</span>
            <span class="lg:text-xl text-neutral-800">Abonnez-vous à la newsletter et recevez une réduction de 10% sur votre prochain achat sur afflelou.com</span>
        </div>
        <div class="flex flex-col lg:flex-row gap-2 lg:gap-4 justify-center md:justify-between pt-6 lg:pt-12 pb-6 md:max-w-[90%]">
            {# @TODO : Add design system input when inputs are ready #}
            <label>
                <input type="text"
                       placeholder="Saisissez votre adresse e-mail"
                       class="border-neutral-300 w-full md:w-[242px] h-[40px] rounded-md placeholder:text-neutral-500"
                >
            </label>
            {% render "@template-button" with {
                size: "newsletter",
                color: "dark",
                label: "S'abonner"
            } %}
        </div>
        <div class="w-full max-w-full md:max-w-[90%] lg:max-w-[450px]">
            <span class="text-xs md:text-sm text-neutral-600">
                En vous abonnant, vous acceptez que votre e-mail soit utilisé pour recevoir des offres et actualités.
                Vous pouvez utiliser le lien présent dans chaque email pour vous désabonner.
            </span>
        </div>
    </div>
</div>