Réserver : Steps

<div class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <p class="text-base">Saisissez votre adresse e-mail ou votre numéro de téléphone mobile, nous nous connaissons peut être déjà 👋</p>

    <div class="py-7.5">

        <div class="form-element text mb-2.5 w-full" :class="hasError.email_login_create && 'error'">

            <input name="email"

                   class="form-input w-full"

                   id="email_login_create"

                   type="text"

                   title="Email"

                   placeholder=" "

                   pattern="\S+"

                   required

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 2 })"

            >

            <label class="label" for="email_login_create">

                <span class="hidden md:block">Adresse e-mail ou numéro de tél.</span>

                <span class="md:hidden">E-mail ou numéro de tél.</span>

            </label>

            <div class="error-message" :class="hasError.email_login_create && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.email_login_create"></span></div>

        </div>

        <button class="btn btn-primary btn-full-width" x-data @click="$dispatch('booking-form-next-step', { main: 1, subStep: 2 })">M'identifier</button>

    </div>

    <p>ℹ️ Si vous êtes déjà client des concessions Tressol Chabrier, nous pourrons rapatrier vos informations, documents dans votre garage en ligne</p>

</div>

<div class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <p class="text-base">Vous n’avez pas encore de compte, créez le votre gratuitement 👇</p>

    <div class="flex flex-col gap-2.5 py-8">

        <div class="skeleton h-[43px] w-full" x-data="{isLoaded : false}" x-init="isLoaded = true" x-show="!isLoaded"></div>

        <div class="form-element form-box-radio-slider form-box-radio-slider--full-double"

             x-data="boxCheckboxSlider()"

             x-cloak>

            <div x-ref="controler" class="controler"></div>

            <div class="label-wrapper" x-ref="wrapper">

                <label for="particulier">

                    <input @click="changeInput()" type="radio" value="particulier" name="type_create" id="particulier" checked>

                    <span>Particulier</span>

                </label>

                <label for="pro">

                    <input @click="changeInput()" type="radio" value="professionnel" name="type_create" id="pro">

                    <span>Professionnel</span>

                </label>

            </div>

        </div>



        <div class="form-element text w-full" :class="hasError.email_create && 'error'">

            <input name="email"

                   class="form-input w-full"

                   :class="hasError.email_create && 'error'"

                   id="email_create"

                   type="text"

                   title="Email"

                   placeholder=" " pattern="\S+" required value="test@gmail.com"

                   x-model="datas.email"

                   @focus="delete hasError.email_create"

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

            >

            <label class="label" for="email_create">

                <span>Votre e-mail</span>

            </label>

            <div class="error-message" :class="hasError.email_create && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.email_create"></span></div>

        </div>

        <div class="flex flex-col md:flex-row gap-2.5">

            <div class="form-element text md:w-1/2" :class="hasError.firstname_create && 'error'">

                <input name="firstname"

                       class="form-input w-full"

                       id="firstname_create"

                       type="text"

                       title="Prénom"

                       placeholder=" " pattern="\S+" required

                       @focus="delete hasError.firstname_create"

                       @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

                >

                <label class="label" for="firstname_create">

                    <span>Prénom</span>

                </label>

                <div class="error-message" :class="hasError.firstname_create && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.firstname_create"></span></div>

            </div>

            <div class="form-element text md:w-1/2" :class="hasError.lastname_create && 'error'">

                <input name="lastname"

                       class="form-input w-full"

                       id="lastname_create"

                       type="text"

                       title="Nom"

                       placeholder=" " pattern="\S+" required

                       @focus="delete hasError.lastname_create"

                       @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

                >

                <label class="label" for="lastname_create">

                    <span>Nom</span>

                </label>

                <div class="error-message" :class="hasError.lastname_create && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.lastname_create"></span></div>

            </div>

        </div>

        <div class="form-element text w-full" :class="hasError.phone_create && 'error'">

            <input name="phone"

                   class="form-input w-full"

                   id="phone_create"

                   type="text"

                   title="Nom"

                   placeholder=" " pattern="\S+" required

                   @focus="delete hasError.phone_create"

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

            >

            <label class="label" for="phone_create">

                <span>Votre téléphone mobile</span>

            </label>

            <div class="error-message" :class="hasError.phone_create && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.phone_create"></span></div>

        </div>

    </div>



    <div x-show="Object.keys(hasError).length > 0" class="rounded-button border-2 flex gap-2.5 py-2.5 px-4.25 border-error bg-error-light mb-2.5">

        <?= icon('label-suppress-colored'); ?>

        <span>Il y a <span x-text="Object.keys(hasError).length"></span> erreur<span x-show="Object.keys(hasError).length > 1">s</span> dans le formulaire</span>

    </div>



    <button class="btn btn-primary btn-full-width" x-data @click="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })">Créer mon compte</button>



    <div class="form-element form-checkbox pt-5 pb-7.5">

        <label for="cgu_create">

            <input class="checkbox"

                   type="checkbox"

                   value="cgu_create"

                   id="cgu_create"

                   @change="$event.target.checked && delete hasError.cgu_create"

            >

            <span class="controler"></span>

            <span>J’accepte les CGU de Tressol Chabrier</span>

        </label>

        <div class="error-message" :class="hasError.cgu_create && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.cgu_create"></span></div>

    </div>



    <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat sit amet enim id iaculis. Donec ac orci consequat orci feugiat cursus id sit amet nunc. Quisque rutrum ornare sem, sed convallis sem mollis sit amet. </p>

</div>

<div class="login-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <p class="text-base">Vous avez un compte, 
saisissez votre mot de passe 🔒</p>

    <div class="flex flex-col gap-2.5 py-8">

        <div class="form-element text w-full" :class="hasError.email_login && 'error'">

            <input name="email"

                   class="form-input w-full"

                   id="email_login"

                   type="text" title="Nom"

                   placeholder=" " pattern="\S+"

                   x-model="datas.email"

                   @focus="delete hasError.email_login"

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

            >

            <label class="label" for="email_login">

                <span>Votre e-mail</span>

            </label>

            <div class="error-message" :class="hasError.email_login && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.email_login"></span></div>

        </div>

        <div class="form-element password w-full" x-data="{ show: false }" :class="hasError.password_login && 'error'">

            <input name="password"

                   class="form-input w-full"

                   id="password_login"

                   type="password"

                   :type="show ? 'text' : 'password'"

                   title="Nom" placeholder=" " pattern="\S+"

                   @focus="delete hasError.password_login"

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

            >

            <label class="label" for="password_login">

                <span>Votre de passe</span>

            </label>

            <span @click="show = !show">

                <span :class="{'hidden' : show}" >

                    <?= icon('password-see', 'text-icon'); ?>

                </span>

                <span :class="{'hidden' : !show}" class="hidden">

                    <?= icon('password-unsee', 'text-icon'); ?>

                </span>

            </span>

        </div>

        <div class="error-message pt-0" :class="hasError.password_login && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.password_login"></span></div>

    </div>



    <button class="btn btn-primary btn-full-width" @click="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })">M'identifier</button>



    <a href="#" class="link block text-center underline text-text-light hover:text-primary-accent mt-7.5">Mot de passe oublié ?</a>



</div>

<div class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <p class="text-base">Nous nous connaissons déjà 😊 
Renseignez quelques informations complémentaires pour récupérer vos informations et documents</p>

    <div class="flex flex-col gap-2.5 py-8">



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

            <input name="email"

                   class="form-input w-full"

                   id="email_know"

                   type="text"

                   title="Email"

                   placeholder=" " pattern="\S+" value="test@gmail.com" required

                   x-model="datas.email"

                   @focus="delete hasError.email_know"

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

            >

            <label class="label" for="email_know">

                <span>Votre e-mail</span>

            </label>

            <div class="error-message" :class="hasError.email_know && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.email_know"></span></div>

        </div>

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

            <input name="phone" x-data x-init="new Cleave('#phone_email_know', { phone: true, phoneRegionCode: 'FR' });"

                   class="form-input w-full"

                   id="phone_email_know"

                   type="text"

                   title="Téléphone"

                   placeholder=" " pattern="\S+" required

                   @focus="delete hasError.phone_email_know"

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

            >

            <label class="label" for="phone_email_know">

                <span>Votre téléphone mobile</span>

            </label>

            <div class="error-message" :class="hasError.phone_email_know && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.phone_email_know"></span></div>

        </div>

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

            <input name="postal_code" x-data x-init="new Cleave('#postal_code_email_know', { blocks: [2,3] });"

                   class="form-input w-full"

                   id="postal_code_email_know"

                   type="text"

                   title="Code postal"

                   placeholder=" " pattern="\S+" required

                   @focus="delete hasError.postal_code_email_know"

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })"

            >

            <label class="label" for="postal_code_email_know">

                <span>Votre code postal</span>

            </label>

            <div class="error-message" :class="hasError.postal_code_email_know && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.postal_code_email_know"></span></div>

        </div>

    </div>



    <button class="btn btn-primary btn-full-width" x-data @click="$dispatch('booking-form-next-step', { main: 1, subStep: 5 })">M'identifier</button>



    <p class="text-sm mt-7.5 text-center px-2.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat sit amet enim id iaculis. Donec ac orci consequat orci feugiat cursus id sit amet nunc. Quisque rutrum ornare sem, sed convallis sem mollis sit amet. </p>

</div>

<div class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <p class="text-base">Merci, nous vous avons envoyé un [SMS] / [Email] pour valider votre [Medium], merci de saisir le code reçu ci-dessous</p>

    <div class="flex flex-col gap-2.5 py-8">

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

            <input name="code_confirm"

                   class="form-input w-full"

                   id="code_confirm"

                   type="text"

                   title="Nom"

                   placeholder=" " pattern="\S+" required

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 6 })"

            >

            <label class="label" for="code_confirm">

                <span>Saisissez votre code reçu par SMS</span>

            </label>

            <div class="error-message" :class="hasError.code_confirm && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.code_confirm"></span></div>

        </div>

    </div>



    <button class="btn btn-primary btn-full-width" x-data @click="$dispatch('booking-form-next-step', { main: 1, subStep: 6 })">Créer mon compte</button>



    <div class="form-element form-checkbox pt-5 pb-7.5">

        <label for="cgu_code">

            <input class="checkbox"

                   type="checkbox"

                   value="cgu_code"

                   id="cgu_code"

                   @change="$event.target.checked && delete hasError.cgu_code"

                   @keydown.enter="$dispatch('booking-form-next-step', { main: 1, subStep: 6 })"

            >

            <span class="controler"></span>

            <span class="text-sm">J’accepte les CGU de Tressol Chabrier</span>

        </label>

        <div class="error-message" :class="hasError.cgu_code && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.cgu_code"></span></div>

    </div>



    <p class="text-sm">La validation de votre numéro de téléphone permettra de vous identifier pour associer toutes vos informations sur votre compte Garage en ligne</p>

</div>

<div class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <p class="text-base">Merci, votre [E-mail] / [Numéro de téléphone] est validé. Merci de saisir votre mot de passe pour finaliser la création de votre compte</p>



    <?php include renderTemplate('molecule/form/password-check'); ?>



    <button x-data class="btn btn-primary btn-full-width" @click="$dispatch('check-password-validity');$dispatch('booking-form-next-step', { main: 1, subStep: 5 })">Créer mon compte</button>

</div>

<div class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <div class="flex flex-col space-y-2.5">

        <div class="flex flex-col md:flex-row gap-2.5">

            <div class="form-element form-select md:w-1/2 md:min-w-0"

                 x-data="selectInput('m', 'M.')"

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

                 @click.away="active = false"

            >

                <input x-ref="input"

                       name="civility"

                       class=""

                       id="civility"

                       type="text"

                       pattern="\S+"

                       x-model="currentValue"

                >

                <div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>

                <label @click="active = !active" class="moved" :class="{ 'moved' : full }" for="civility">Civilité</label>

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

                    <li><button type="button" value="m">M.</button></li>

                    <li><button type="button" value="mme" ">Mme</button></li>

                </ul>

            </div>

            <span class="w-1/2"></span>

        </div>

        <div class="flex flex-col md:flex-row gap-2.5">

            <div class="form-element text md:w-1/2" :class="hasError.firstname && 'error'">

                <input name="firstname"

                       class="form-input w-full"

                       id="firstname"

                       type="text"

                       title="Prénom"

                       placeholder=" " pattern="\S+" required

                       x-model="datas.firstname"

                >

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

                    <span>Prénom</span>

                </label>

                <div class="error-message" :class="hasError.firstname && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.firstname"></span></div>

            </div>

            <div class="form-element text md:w-1/2" :class="hasError.lastname && 'error'">

                <input name="lastname"

                       class="form-input w-full"

                       id="lastname"

                       type="text"

                       title="Nom"

                       placeholder=" " pattern="\S+" required

                       x-model="datas.lastname"

                >

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

                    <span>Nom</span>

                </label>

                <div class="error-message" :class="hasError.lastname && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.lastname"></span></div>

            </div>

        </div>

        <div class="form-element text w-full" :class="hasError.phone && 'error'">

            <input name="phone"

                   class="form-input w-full"

                   id="phone"

                   type="text"

                   title="Téléphone"

                   placeholder=" " pattern="\S+" required

                   x-model="datas.phone"

            >

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

                <span>Votre téléphone mobile</span>

            </label>

            <div class="error-message" :class="hasError.phone && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.phone"></span></div>

        </div>

        <div class="form-element text w-full" :class="hasError.street && 'error'">

            <input name="address"

                   class="form-input w-full"

                   id="street" type="text"

                   title="Adresse"

                   placeholder=" " pattern="\S+" required

                   x-model="datas.street"

            >

            <label class="label" for="street">

                <span>Votre adresse</span>

            </label>

            <div class="error-message" :class="hasError.street && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.street"></span></div>

        </div>

        <div class="flex flex-col md:flex-row gap-2.5">

            <div class="form-element text md:w-1/3" :class="hasError.postal_code && 'error'">

                <input name="postal_code"

                       class="form-input w-full"

                       id="postal_code"

                       type="text"

                       title="Code postal"

                       placeholder=" " pattern="\S+" required

                       x-model="datas.postalCode"

                >

                <label class="label" for="postal_code">

                    <span>Code postal</span>

                </label>

                <div class="error-message" :class="hasError.postal_code && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.postal_code"></span></div>

            </div>

            <div class="form-element text md:w-2/3" :class="hasError.city && 'error'">

                <input name="city"

                       class="form-input w-full"

                       id="city" type="text"

                       title="Ville"

                       placeholder=" " pattern="\S+" required

                       x-model="datas.city"

                >

                <label class="label" for="city">

                    <span>Ville</span>

                </label>

                <div class="error-message" :class="hasError.city && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.city"></span></div>

            </div>

        </div>

        <div class="form-element form-select w-full min-w-0"

             x-data="selectInput('no', 'Pas de préférences')"

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

             @click.away="active = false"

        >

            <input x-ref="input"

                   name="concession"

                   class="" id="concession"

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

                   x-model="currentValue"

            >

            <div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>

            <label @click="active = !active" class="moved" :class="{ 'moved' : full }" for="concession">Concession</label>

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

                <li><button type="button" value="toulouse">Toulouse</button></li>

                <li><button type="button" value="narbonne">Narbonne</button></li>

                <li><button type="button" value="bordeaux">Bordeaux</button></li>

                <li><button type="button" value="no">Pas de préférences</button></li>

            </ul>

        </div>

        <div class="form-element form-select w-full min-w-0"

             x-data="selectInput('particulier', 'Particulier')"

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

             @click.away="active = false"

        >

            <input x-ref="input"

                   name="status"

                   class="" id="status"

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

                   x-model="currentValue"

            >

            <div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>

            <label @click="active = !active" class="moved" :class="{ 'moved' : full }" for="status">Vous êtes</label>

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

                <li><button type="button" value="administrateur-de-compte">Administrateur de compte</button></li>

                <li><button type="button" value="particulier">Particulier</button></li>

            </ul>

        </div>

    </div>



    <div x-cloak x-show="Object.keys(hasError).length > 0" class="rounded-button border-2 flex gap-2.5 py-2.5 px-4.25 border-error bg-error-light mb-2.5">

        <?= icon('label-suppress-colored'); ?>

        <span>Il y a <span x-text="Object.keys(hasError).length"></span> erreur<span x-show="Object.keys(hasError).length > 1">s</span> dans le formulaire</span>

    </div>



    <button class="btn btn-primary w-full mt-7.5" x-data @click="$dispatch('booking-form-next-step', { main: 2, subStep: 1 })">Valider et continuer</button>



</div>

<div x-data="initBookingPaymentCard()" class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <div class="flex justify-between gap-2.5 items-center mb-6.25">

        <div class="font-semibold tracking-tightened">Paiement par carte</div>

        <div class="flex gap-2 shrink-0">

            <?= icon('payment-visa-colored', 'w-auto h-4 shrink-0'); ?>

            <?= icon('payment-mastercard-colored', 'w-auto h-4 shrink-0'); ?>

            <?= icon('payment-cb-colored', 'w-auto h-4 shrink-0'); ?>

        </div>

    </div>

    <div class="flex flex-col space-y-2.5">

        <div class="form-element text w-full" :class="hasError.card_code && 'error'">

            <input name="card_code"

                   class="form-input w-full"

                   id="card_code"

                   type="text"

                   title="Carte bancaire"

                   placeholder=" " pattern="[0-9]*" required

            >

            <label class="label" for="card_code">

                <span>Numéro de carte</span>

            </label>

            <span><?= icon('lock' , 'text-text-light w-3.25'); ?></span>

        </div>

        <div class="error-message pt-0" :class="hasError.card_code && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.card_code"></span></div>

        <div class="flex flex-col md:flex-row gap-2.5">

            <div class="form-element text flex-1" :class="hasError.expiration_date && 'error'">

                <input name="expiration_date"

                       class="form-input w-full"

                       id="expiration_date"

                       type="text"

                       title="Date d'expiration"

                       placeholder=" " pattern="\S+" required

                >

                <label class="label leading-[1]" for="expiration_date">

                    <span class="hidden md:block">Date d'expiration <span class="text-icon text-tiny">(MM/AA)</span></span>

                    <span class="md:hidden">Date d'exp. <span class="text-icon text-very-tiny">(MM/AA)</span></span>

                </label>

                <div class="error-message" :class="hasError.expiration_date && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.expiration_date"></span></div>

            </div>

            <div class="form-element text md:w-[158px]" :class="hasError.security_code && 'error'">

                <input name="security_code"

                       class="form-input w-full"

                       id="security_code"

                       type="text"

                       title="Code de sécurité"

                       placeholder=" " pattern="\S+" required

                >

                <label class="label" for="security_code">

                    <span>Code de sécurité</span>

                </label>

                <div class="error-message" :class="hasError.security_code && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.security_code"></span></div>

            </div>

        </div>

        <div class="pt-5 pb-7.5">

            <div class="form-element form-checkbox">

                <label for="cgv_payment">

                    <input class="checkbox" type="checkbox" value="checkbox" id="cgv_payment">

                    <span class="controler"></span>

                    <span class="text-sm">J’accepte les <a href="#" class="link underline hover:text-primary">Conditions générales de vente</a></span>

                </label>

            </div>

            <div class="error-message" :class="hasError.cgv_payment && 'flex'"><?= icon('label-error-colored'); ?><span x-text="hasError.cgv_payment"></span></div>

        </div>

    </div>



    <div x-show="Object.keys(hasError).length > 0" x-cloak class="rounded-button border-2 flex gap-2.5 py-2.5 px-4.25 border-error bg-error-light mb-2.5">

        <?= icon('label-suppress-colored'); ?>

        <span>Il y a <span x-text="Object.keys(hasError).length"></span> erreur<span x-show="Object.keys(hasError).length > 1">s</span> dans le formulaire</span>

    </div>



    <button class="btn btn-primary btn-full-width" @click="$dispatch('booking-form-next-step', { main: 3, subStep: 1 })">Payer et réserver</button>

</div>



<script>

  function initBookingPaymentCard() {

    return {

      init() {

        new Cleave('#card_code', {

          creditCard: true

        });

        new Cleave('#expiration_date', {

          date: true,

          datePattern: ['m', 'y']

        });

        new Cleave('#security_code', {

          blocks: [3]

        })

      }

    }

  }

</script>

<div class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

    <div class="flex gap-3 items-start tracking-tightened font-medium mb-6.25">

        <div class="shrink-0 pt-0.5"><?= icon('label-check-colored', 'w-5'); ?></div>

        <div>Le service commercial de Peugeot Auch va vous contacter pour convenir d’un rendez-vous</div>

    </div>

    <div class="flex gap-3 items-start tracking-tightened font-medium mb-6.25 md:mb-9">

        <div class="shrink-0 pt-0.5"><?= icon('label-check-colored', 'w-5'); ?></div>

        <div>

            <div>Gagnez du temps et téléchargez dans votre coffre fort les documents nécessaires pour valider votre dossier</div>

            <ul class="mt-5">

               <li class="flex gap-3 items-center"><span class="w-[3px] h-[3px] bg-white rounded-full border-ui border-[6px] box-content"></span> Justificatif de domicile</li>

               <li class="flex gap-3 items-center"><span class="w-[3px] h-[3px] bg-white rounded-full border-ui border-[6px] box-content"></span> Copie de pièce d’identité recto verso</li>

               <li class="flex gap-3 items-center"><span class="w-[3px] h-[3px] bg-white rounded-full border-ui border-[6px] box-content"></span> Dernier avis d’imposition</li>

               <li class="flex gap-3 items-center"><span class="w-[3px] h-[3px] bg-white rounded-full border-ui border-[6px] box-content"></span> 3 derniers bulletins de salaire</li>

            </ul>

        </div>

    </div>



    <button class="btn btn-primary btn-full-width">Accéder à mon garage en ligne</button>



</div>