A question

Nav rapide
A question A question with search A question form

A question

A question - Voir le template

Une question ?

Accédez aux questions les plus fréquemment posées. Notre service client est à votre disposition du lundi au vendredi, de 8h à 19h, et vous répond dans les plus brefs délais.
Est-ce que Tressol Chabrier achète les véhicules
J’ai une estimation et après ?
Une autre question des FAQs ici
Voir toutes les FAQs
  • template
<div class="bg-ui-light ">

    <div class="container-desktop p-5 md:p-20 gap-10 md:gap-20 flex flex-col md:flex-row">

        <div class="flex flex-col md:w-1/2 gap-5">

            <h2 class="text-3xl md:text-4.5xl font-bold leading-8 md:leading-13 text-text">Une question ?</h2>

            <div class="md:max-w-[280px] flex flex-col gap-5">

                <span class="text-text-light">Accédez aux questions les plus fréquemment posées.</span>

                <button class="btn btn-primary py-2.75 md:px-13 flex-1 md:flex-none">Nous contacter</button>

                <span class="text-xs text-text-light">Notre service client est à votre disposition du lundi au vendredi, de 8h à 19h, et vous répond dans les plus brefs délais.</span>

            </div>

        </div>

        <div class="flex flex-col gap-4 w-full">

            <div class="bg-white p-6 rounded-t-[15px]" x-data="dropdown(true)">

                <div @click="toggle()"

                     class="flex justify-between font-semibold cursor-pointer">

                    <span>Est-ce que Tressol Chabrier achète les véhicules</span>

                    <span>

            <span x-show="!open">

                <?= icon('plus', 'w-5 text-text') ?>

            </span>

            <span x-show="open">

                <?= icon('close', 'w-5 text-text') ?>

            </span>

        </span>

                </div>

                <div class="overflow-hidden">

                    <div x-ref="content" class="hidden dropdown-content text-sm">

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis

                        cursus...

                    </div>

                </div>

            </div>

            <div class="bg-white p-6" x-data="dropdown(false)">

                <div @click="toggle()"

                     class="flex justify-between font-semibold cursor-pointer">

                    <span>J’ai une estimation et après ?</span>

                    <span>

            <span x-show="!open">

                <?= icon('plus', 'w-5 text-text') ?>

            </span>

            <span x-show="open">

                <?= icon('close', 'w-5 text-text') ?>

            </span>

        </span>

                </div>

                <div class="overflow-hidden">

                    <div x-ref="content" class="hidden dropdown-content text-sm">

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis

                        cursus...

                    </div>

                </div>

            </div>

            <div class="bg-white p-6" x-data="dropdown(false)">

                <div @click="toggle()"

                     class="flex justify-between font-semibold cursor-pointer">

                    <span>Une autre question des FAQs ici</span>

                    <span>

            <span x-show="!open">

                <?= icon('plus', 'w-5 text-text') ?>

            </span>

            <span x-show="open">

                <?= icon('close', 'w-5 text-text') ?>

            </span>

        </span>

                </div>

                <div class="overflow-hidden">

                    <div x-ref="content" class="hidden dropdown-content text-sm">

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis

                        cursus...

                    </div>

                </div>

            </div>

            <a href="" class="bg-white p-6 rounded-b-[15px]">

                <div class="flex justify-between font-semibold cursor-pointer">

                    <span class="text-primary-accent">Voir toutes les FAQs</span>

                </div>

            </a>

        </div>

    </div>

</div>
A question with search - Voir le template

Une question ?

Accédez aux questions les plus fréquemment posées.
Est-ce que Tressol Chabrier achète les véhicules
J’ai une estimation et après ?
Une autre question des FAQs ici
Voir toutes les FAQs
  • template
<div class="bg-ui-light ">

    <div class="container-desktop p-5 md:p-20 gap-10 md:gap-20 flex flex-col md:flex-row">

        <div class="flex flex-col md:w-1/2 gap-5">

            <h2 class="text-3xl md:text-4.5xl font-bold leading-8 md:leading-13 text-text">Une question ?</h2>

            <div class="md:max-w-[280px] flex flex-col gap-5">

                <span class="text-text-light">Accédez aux questions les plus fréquemment posées.</span>

                <div class="form-element text">

                    <input name="search" class="form-input form-input--search pr-13 bg-white" id="search" type="text" title="Nom"

                           placeholder="Marque, modèle ou mot clé" pattern="\S+">

                    <span>

                        <?= icon('search', 'text-background-dark w-4.5'); ?>

                    </span>

                </div>

            </div>

        </div>

        <div class="flex flex-col gap-4 w-full">

            <div class="bg-white p-6 rounded-t-[15px]" x-data="dropdown(true)">

                <div @click="toggle()"

                     class="flex justify-between font-semibold cursor-pointer">

                    <span>Est-ce que Tressol Chabrier achète les véhicules</span>

                    <span>

            <span x-show="!open">

                <?= icon('plus', 'w-5 text-text') ?>

            </span>

            <span x-show="open">

                <?= icon('close', 'w-5 text-text') ?>

            </span>

        </span>

                </div>

                <div class="overflow-hidden">

                    <div x-ref="content" class="hidden dropdown-content text-sm">

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis

                        cursus...

                    </div>

                </div>

            </div>

            <div class="bg-white p-6" x-data="dropdown(false)">

                <div @click="toggle()"

                     class="flex justify-between font-semibold cursor-pointer">

                    <span>J’ai une estimation et après ?</span>

                    <span>

            <span x-show="!open">

                <?= icon('plus', 'w-5 text-text') ?>

            </span>

            <span x-show="open">

                <?= icon('close', 'w-5 text-text') ?>

            </span>

        </span>

                </div>

                <div class="overflow-hidden">

                    <div x-ref="content" class="hidden dropdown-content text-sm">

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis

                        cursus...

                    </div>

                </div>

            </div>

            <div class="bg-white p-6" x-data="dropdown(false)">

                <div @click="toggle()"

                     class="flex justify-between font-semibold cursor-pointer">

                    <span>Une autre question des FAQs ici</span>

                    <span>

            <span x-show="!open">

                <?= icon('plus', 'w-5 text-text') ?>

            </span>

            <span x-show="open">

                <?= icon('close', 'w-5 text-text') ?>

            </span>

        </span>

                </div>

                <div class="overflow-hidden">

                    <div x-ref="content" class="hidden dropdown-content text-sm">

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis

                        cursus...

                    </div>

                </div>

            </div>

            <a href="" class="bg-white p-6 rounded-b-[15px]">

                <div class="flex justify-between font-semibold cursor-pointer">

                    <span class="text-primary-accent">Voir toutes les FAQs</span>

                </div>

            </a>

        </div>

    </div>

</div>
A question form - Voir le template

Une question

Contactez-nous par e-mail ou par téléphone
Contactez-nous pas e-mail
Votre message
Contactez-nous pas téléphone Nos conseillers sont à votre disposition pour répondre à vos questions :
Du Lundi au vendredi de 8h à 19h
  • template
<div class="bg-ui-light">

    <div class="flex flex-col bg-cover bg-center">

        <div class="flex md:gap-20 md:px-20 md:py-9 md:flex-row flex-col justify-between">

            <div class="flex flex-col gap-5 md:p-0 p-5 md:w-2/5 w-full">

                <h1 class="font-bold md:text-4.5xl text-3xl md:leading-13">

                    Une question

                </h1>

                <span class="font-medium text-base">

                    Contactez-nous par e-mail ou par téléphone

                </span>

            </div>

            <div class="flex flex-col gap-2 md:w-3/5">

                <div class="md:p-10 p-5 bg-white flex flex-col gap-5 rounded-tr-button rounded-tl-button">

                    <span class="font-semibold text-xl">Contactez-nous pas e-mail</span>

                    <div class="grid grid-cols-2 gap-2">

                        <div class="form-element text w-full">

                            <input name="firstname" class="form-input w-full" id="firstname" type="text" title="Prénom"

                                   placeholder=" " pattern="\S+">

                            <label class="label" for="firstname">

                                <span>Votre prénom</span>

                            </label>

                        </div>

                        <div class="form-element text w-full">

                            <input name="lastname" class="form-input w-full" id="lastname" type="text" title="Nom"

                                   placeholder=" " pattern="\S+">

                            <label class="label" for="lastname">

                                <span>Votre nom</span>

                            </label>

                        </div>

                        <div class="form-element text w-full">

                            <input name="mail" class="form-input w-full" id="mail" type="email" title="Mail"

                                   placeholder=" " pattern="\S+">

                            <label class="label" for="mail">

                                <span>Votre e-mail</span>

                            </label>

                        </div>

                        <div class="form-element text w-full">

                            <input name="phone" class="form-input w-full" id="phone" type="text" title="Phone"

                                   placeholder=" " pattern="\S+">

                            <label class="label" for="phone">

                                <span>Votre numéro de téléphone</span>

                            </label>

                        </div>

                        <div class="form-element form-element--blue form-select col-span-2 w-full"

                             x-data="selectInput('citroen', 'Citroën Carcassonne')"

                             :class="{ 'active' : active }"

                             @click.away="active = false"

                        >

                            <input x-ref="input"

                                   name="status"

                                   class="" id="id_select_blue"

                                   type="text" pattern="\S+"

                                   x-model="currentValue"

                            >

                            <div x-ref="display" @click="toggle()" class="form-input select"

                                 x-text="currentLabel"></div>

                            <label @click="toggle()" class="moved" :class="{ 'moved' : full }" for="id_select_blue">Votre

                                concession</label>

                            <ul x-ref="options" class="select-options" x-show="active">

                                <li>

                                    <button type="button" value="citroen">Citroën Carcassonne</button>

                                </li>

                            </ul>

                        </div>

                    </div>

                    <div class="flex flex-col gap-2">

                        <span class="text-base font-semibold">Votre message</span>

                        <div class="form-element w-full">

                            <textarea rows="5" cols="40" class="form-input textarea w-full" id="text" name="text"

                                      placeholder=" "></textarea>

                        </div>

                    </div>

                    <button class="btn btn-primary px-20 w-full">Nous contacter</button>

                </div>

                <div class="md:p-10 p-5 bg-white flex flex-col gap-5">

                    <div class="flex flex-col gap-1">

                        <span class="font-semibold text-xl">Contactez-nous pas téléphone</span>

                        <span class="font-normal text-base">Nos conseillers sont à votre disposition pour répondre à vos questions :</span>

                    </div>

                    <div class="field text required relative z-10">

                        <div class="control w-full ">

                            <input name="phone2" placeholder="Téléphone"

                                   class=" w-full form-input placeholder-purple-lightest placeholder-opacity-75 py-2.5 pl-10"

                                   id="phone2" type="text" title="Téléphone">

                            <span class="left-4">

                            <?= icon('phone', 'text-primary-accent'); ?>

                        </span>

                        </div>

                    </div>

                    <span class="font-normal text-base">Du Lundi au vendredi de 8h à 19h</span>

                </div>

            </div>

        </div>

    </div>

</div>