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 h-[400px] md:h-[500px] lg:h-[600px]" aria-hidden="true">
        <picture>
            <source srcset="../../img/bloc_gamme/desktop.png" media="(min-width: 768px)" />
            <img src="../../img/bloc_gamme/mobile.png" alt="Ranges" class="object-cover object-center w-full h-full" loading="lazy" />
        </picture>
    </div>

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

            <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>
            <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>
</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 h-[400px] md:h-[500px] lg:h-[600px]" aria-hidden="true">
        <picture>
            <source srcset="{{ "/img/bloc_gamme/desktop.png" | path }}" media="(min-width: 768px)"/>
            <img src="{{ "/img/bloc_gamme/mobile.png" | path }}" alt="Ranges"
                 class="object-cover object-center w-full h-full" loading="lazy"/>
        </picture>
    </div>

    {# Cards container with negative margin #}
    <div class="container mx-auto -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"
    },
    {
      "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"
    }
  ]
}

No notes defined.