Etat Pur Design System

Pdp Our Commitments 

<div class="container grid-layout adjusted-marg-y-sm">
    <div class="sm:col-start-3 col-span-8 w-full flex flex-col gap-3 ">
        <h2 class="text-body-lg font-bold text-black/56 px-4 md:px-O">
            Nos engagements
        </h2>
        <div class="flex flex-row p-4 gap-x-4">
            <div class="flex flex-col gap-4 items-center flex-1">
                <div class="flex flex-col items-center gap-1 w-full">
                    <div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
                        <img src="/img/icon-text/image-icon-france.png" alt="logo france" width="72" height="72" class="w-10 lg:w-[72px]">
                    </div>
                    <div class="text-center text-body-sm text-black">
                        Made in France
                    </div>
                </div>
            </div>
            <div class="flex flex-col gap-4 items-center flex-1">
                <div class="flex flex-col items-center gap-1 w-full">
                    <div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
                        <img src="/img/icon-text/image-icon-phone-responsive.png" alt="logo responsive" width="72" height="72" class="w-10 lg:w-[72px]">
                    </div>
                    <div class="text-center text-body-sm text-black">
                        Flawless formulation
                    </div>
                </div>
            </div>
            <div class="flex flex-col gap-4 items-center flex-1">
                <div class="flex flex-col items-center gap-1 w-full">
                    <div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
                        <img src="/img/icon-text/image-icon-40-years-exp.png" alt="+40 ans d'expertise" width="72" height="72" class="w-10 lg:w-[72px]">
                    </div>
                    <div class="text-center text-body-sm text-black">
                        +40 ans d'expertise
                    </div>
                </div>
            </div>
            <div class="flex flex-col gap-4 items-center flex-1">
                <div class="flex flex-col items-center gap-1 w-full">
                    <div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
                        <img src="/img/icon-text/image-icon-naos-logo.png" alt="Naos logo" width="72" height="72" class="w-10 lg:w-[72px]">
                    </div>
                    <div class="text-center text-body-sm text-black">
                        Ecobiologie
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="container grid-layout adjusted-marg-y-sm">
    <div class="sm:col-start-3 col-span-8 w-full flex flex-col gap-3 ">
        <h2 class="text-body-lg font-bold text-black/56 px-4 md:px-O">
            {{ sectionTitle }}
        </h2>
        <div class="flex flex-row p-4 gap-x-4">
            {% for commitment in commitments %}
                {% embed "@icon-text" with commitment %}{% endembed %}
            {% endfor %}
        </div>
    </div>
</div>
 
{
  "sectionTitle": "Nos engagements",
  "blockClass": "items-center flex-1",
  "commitments": [
    {
      "text": "Made in France",
      "image": "/img/icon-text/image-icon-france.png",
      "alt": "logo france"
    },
    {
      "text": "Flawless formulation",
      "image": "/img/icon-text/image-icon-phone-responsive.png",
      "alt": "logo responsive"
    },
    {
      "text": "+40 ans d'expertise",
      "image": "/img/icon-text/image-icon-40-years-exp.png",
      "alt": "+40 ans d'expertise"
    },
    {
      "text": "Ecobiologie",
      "image": "/img/icon-text/image-icon-naos-logo.png",
      "alt": "Naos logo"
    }
  ]
}

No notes defined.