Etat Pur Design System

Gammes de Produits 

<section class="relative w-full pb-20">

    <h2 class="h2 absolute top-[30px] left-1/2 transform -translate-x-1/2 text-center px-16 z-10 w-full">
        Découvrez les gammes État Pur
    </h2>

    <div class="w-full hidden md:block md:h-[500px] lg:h-[600px]" aria-hidden="true">
        <img src="../../img/bloc_gamme/desktop.png" alt="Ranges" class="object-cover object-center w-full h-full" loading="lazy" />
    </div>

    <div class="md:container mx-auto md:-mt-20">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">

            <div class="flex max-md:flex-col">
                <div class="w-full h-[400px] md:hidden" aria-hidden="true">
                    <img src="/img/bloc_gamme/mobile.png" alt="Ranges" class="object-cover object-center w-full h-full" loading="lazy">
                </div>
                <div class="max-md:container max-md:mx-auto flex max-md:-mt-20">
                    <article class="flex flex-col justify-between gap-4 bg-white text-black shadow-16 shadow-black/08 hover:shadow-32 hover:shadow-black/08 p-6 transition-all duration-300">
                        <div class="flex flex-col gap-2">
                            <h3 class="h5">
                                Les Soins Purs
                            </h3>
                            <span class="w-10 h-2 bg-brand-200" aria-hidden="true"></span>
                        </div>

                        <p class="text-body-base">
                            Des soins en parfaite affinité avec la peau pour la nettoyer, l'hydrater et préserver ses défenses naturelles chaque jour, en toute sécurité.
                        </p>

                        <a href="#" type="button" class="self-start  btn  btn-dark  btn-outline  btn-size-lg">
                            Prendre soin de ma peau

                        </a>
                    </article>
                </div>
            </div>
            <div class="flex max-md:flex-col">
                <div class="w-full h-[400px] md:hidden" aria-hidden="true">
                    <img src="/img/bloc_gamme/mobile.png" alt="Ranges" class="object-cover object-center w-full h-full" loading="lazy">
                </div>
                <div class="max-md:container max-md:mx-auto flex max-md:-mt-20">
                    <article class="flex flex-col justify-between gap-4 bg-white text-black shadow-16 shadow-black/08 hover:shadow-32 hover:shadow-black/08 p-6 transition-all duration-300">
                        <div class="flex flex-col gap-2">
                            <h3 class="h5">
                                Les Actifs Purs
                            </h3>
                            <span class="w-10 h-2 bg-brand-500" aria-hidden="true"></span>
                        </div>

                        <p class="text-body-base">
                            Des actifs à la juste dose pour cibler efficacement chaque problématique, si la peau en a besoin : imperfections, signes de l'âge, rougeurs...
                        </p>

                        <a href="#" type="button" class="self-start  btn  btn-dark  btn-outline  btn-size-lg">
                            Découvrir les actifs

                        </a>
                    </article>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="relative w-full pb-20">

    {# Hero overlaid title #}
    <h2 class="h2 absolute top-[30px] left-1/2 transform -translate-x-1/2 text-center px-16 z-10 w-full">
        Découvrez les gammes État Pur
    </h2>

    {# Background image in full #}
    <div class="w-full hidden md:block md:h-[500px] lg:h-[600px]" aria-hidden="true">
        <img src="{{ "/img/bloc_gamme/desktop.png" | path }}"
             alt="Ranges"
             class="object-cover object-center w-full h-full"
             loading="lazy"
        />
    </div>

    {# Cards container with negative margin #}
    <div class="md:container mx-auto md:-mt-20">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
            {% for range in ranges %}
                {# Card #}
                {% render "@product_range_card" with {range: range} %}
            {% endfor %}
        </div>
    </div>
</section>
 
{
  "title": "Découvrez les gammes État Pur",
  "ranges": [
    {
      "title": "Les Soins Purs",
      "description": "Des soins en parfaite affinité avec la peau pour la nettoyer, l'hydrater et préserver ses défenses naturelles chaque jour, en toute sécurité.",
      "cta": "Prendre soin de ma peau",
      "cta_type": "outline",
      "theme": "moisturizer",
      "path": "/img/bloc_gamme/mobile.png"
    },
    {
      "title": "Les Actifs Purs",
      "description": "Des actifs à la juste dose pour cibler efficacement chaque problématique, si la peau en a besoin : imperfections, signes de l'âge, rougeurs...",
      "cta": "Découvrir les actifs",
      "cta_type": "outline",
      "theme": "blue",
      "path": "/img/bloc_gamme/mobile.png"
    }
  ]
}

No notes defined.