Come On Site

<div class="container-desktop flex flex-col lg:flex-row relative items-center gap-10 py-16 lg:py-20">

    <div class="p-5 lg:p-20 flex flex-col gap-5 lg:w-2/6">

        <span class="text-3xl lg:text-4.5xl font-bold leading-8 lg:leading-13 text-text">Venir sur place ?</span>

        <span class="text-xl lg:text-3xl leading-6 lg:leading-9 text-text-light">Trouvez votre concessionnaire, près de chez vous</span>

        <div class="flex flex-col gap-4 lg:gap-8">

            <?php include renderTemplate('atoms/form/box-radio-slider', 'small'); ?>

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

                <div class="form-element form-select"

                     x-data="selectInput('bordeaux', 'Bordeaux')"

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

                     @click.away="active = false">

                    <input x-ref="input" name="localisation" class="" id="localisation" 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="city">Localisation</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" class="selected" value="bordeaux">Bordeaux</button>

                        </li>

                    </ul>

                </div>

                <div class="form-element form-select"

                     x-data="selectInput('audi', 'Audi')"

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

                     @click.away="active = false">

                    <input x-ref="input" name="marque" class="" id="marque" 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="city">Marque</label>

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

                        <li>

                            <button type="button" value="volkswagen">Volkswagen</button>

                        </li>

                        <li>

                            <button type="button" value="mercedes">Mercedes</button>

                        </li>

                        <li>

                            <button type="button" class="selected" value="audi">Audi</button>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <div class="w-full flex justify-end">

        <img class="w-full" <?= renderImageUrl('google-map.png', 'styleguide', 'blur') ?> />

    </div>

</div>