Etat Pur Design System

Hero: Faq 

<section class="relative w-full h-full bg-brand-200">
    <div class="container items-center h-full w-full ">
        <div class="flex flex-col w-full items-center gap-y-6 adjusted-marg-y-sm">
            <h1 class="h2">Comment pouvons-nous vous aider ?</h1>
            <p class="h6-base">Trouvez des réponses sur tout ce qui concerne nos produits où l’achat sur notre site État pur.</p>
            <div class="flex w-full items-center justify-center">
                <div class="flex items-center bg-white border border-black/16 py-1 px-4 w-[32rem] ">
                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg> <input type="text" placeholder="Rechercher un code promo, ma livraison,..." class="border-none bg-transparent w-full focus:outline-none focus:ring-0" />
                </div>
                <a href="#" type="button" class="max-md:self-start md:justify-center  btn  btn-dark  btn-solid  btn-size-lg">
                    Rechercher

                </a>
            </div>

        </div>
    </div>
</section>
 
<section class="relative w-full h-full bg-brand-200">
    <div class="container items-center h-full w-full ">
        <div class="flex flex-col w-full items-center gap-y-6 adjusted-marg-y-sm">
            <h1 class="h2">{{ title }}</h1>
            <p class="h6-base">{{ content }}</p>
            <div class="flex w-full items-center justify-center">
                <div class="flex items-center bg-white border border-black/16 py-1 px-4 w-[32rem] ">
                    {% render "@icons-heroicons--magnifying-glass-outline" with {
                        height: '16',
                        width: '16',
                    } %}
                    <input type="text"
                           placeholder="Rechercher un code promo, ma livraison,..."
                           class="border-none bg-transparent w-full focus:outline-none focus:ring-0"
                    />
                </div>
                {% render "@template-button" with {
                    label: "Rechercher",
                    href: "#",
                    type: "solid",
                    color: "dark",
                    size: "lg",
                    button_class: "max-md:self-start md:justify-center"
                } %}
            </div>

        </div>
    </div>
</section>
 
{
  "title": "Comment pouvons-nous vous aider ?",
  "content": "Trouvez des réponses sur tout ce qui concerne nos produits où l’achat sur notre site État pur.",
  "img": {
    "desktop_src": "/img/hero/desktop.png",
    "mobile_src": "/img/hero/mobile.png"
  }
}

No notes defined.