From e279af606e44ab93b9c4308c523fab586edca5df Mon Sep 17 00:00:00 2001
From: Philipp Lang <privat@zoomyboy.de>
Date: Fri, 15 Dec 2023 14:10:43 +0100
Subject: [PATCH] fix house

---
 assets/js/Stepper.vue               | 364 +++++++++++++++-------------
 assets/js/components/Pagination.vue |  10 +-
 2 files changed, 199 insertions(+), 175 deletions(-)

diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue
index 38b0f48..c0e2837 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -1,203 +1,220 @@
 <template>
     <form action="#" method="POST" class="px-3 transition-all duration-300 mx-auto w-[960px]" @submit.prevent="submit">
-        <carousel
-            v-model="innerStep"
-            :per-page="1"
-            :mouse-drag="false"
-            :pagination-enabled="false"
-            class="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] mx-auto"
-        >
+        <carousel v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false" class="">
             <slide :key="0" class="py-16 px-8">
-                <div class="w-full">
+                <div>
                     <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
                     <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
                     <radio-grid id="category" v-model="value.category" class="mt-8" :options="categories"></radio-grid>
-                    <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null"> </pagination>
+                    <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
+                    </pagination>
                 </div>
             </slide>
 
             <!-- ********************************* Haus ********************************** -->
             <slide v-if="value.category == 'Haus'" :key="1" class="py-16 px-8">
-                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
-                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
-                <radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
-                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
+                <div>
+                    <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
+                    <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?
+                    </heading>
+                    <radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8"
+                        :options="plotAreas"></radio-grid>
+                    <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
+                </div>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="2" class="py-16 px-8">
-                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
-                <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
-                <radio-grid id="house_living_area" v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
-                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
+                <div>
+                    <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
+                    <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
+                    <radio-grid id="house_living_area" v-model="value.living_area" class="mt-8"
+                        :options="livingAreas"></radio-grid>
+                    <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
+                </div>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="3" class="py-16 px-8">
-                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
-                <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
-                <radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
-                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
+                <div>
+                    <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
+                    <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
+                    <radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
+                        :options="numbersOfRooms"></radio-grid>
+                    <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
+                </div>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="4" class="py-16 px-8">
-                <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
-                <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
-                <!--
-                                        <veeno :pipsy="pipsy" :tooltips="tooltips" :step="1" :handles="[1950]" class="w-4/5 mx-auto mt-10"
-                                            :range="range" v-model="value.construction_year" />
-                        -->
-                <pagination v-model="innerStep" class="mt-24"></pagination>
+                <div>
+                    <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
+                    <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
+                    <!--
+    <veeno :pipsy="pipsy" :tooltips="tooltips" :step="1" :handles="[1950]" class="w-4/5 mx-auto mt-10"
+    :range="range" v-model="value.construction_year" />
+    -->
+                    <pagination v-model="innerStep" class="mt-24"></pagination>
+                </div>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="5" class="py-16 px-8">
-                <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
-                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
-                <radio-grid id="house_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
-                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
+                <div>
+                    <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
+                    <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
+                    <radio-grid id="house_condition" v-model="value.condition" class="mt-8"
+                        :options="conditions"></radio-grid>
+                    <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
+                </div>
             </slide>
 
             <!-- ********************************* Gewerbe ********************************** -->
             <slide v-if="value.category == 'Gewerbe'" :key="1" class="py-16 px-8">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Gewerbefläche</span> des Gewerbes?</heading>
-                <radio-grid id="gewerbe_living_area" v-model="value.living_area" class="mt-8" :options="gewerbeLivingAreas"></radio-grid>
+                <radio-grid id="gewerbe_living_area" v-model="value.living_area" class="mt-8"
+                    :options="gewerbeLivingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="2" class="py-16 px-8">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
-                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes? </heading>
-                <radio-grid id="gewerbe_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes?
+                </heading>
+                <radio-grid id="gewerbe_plot_area" v-model="value.plot_area" class="mt-8"
+                    :options="plotPlotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="3" class="py-16 px-8">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Gewerbe?</heading>
-                <radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
+                <radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
+                    :options="apartmentNumbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="4" class="py-16 px-8">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
                 <!--
-                                        <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
-                                            v-model="value.construction_year" />
-                        -->
+                                                                <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
+                                                                    v-model="value.construction_year" />
+                                                -->
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="5" class="py-16 px-8">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
-                <radio-grid id="gewerbe_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <radio-grid id="gewerbe_condition" v-model="value.condition" class="mt-8"
+                    :options="conditions"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
             <!-- ******************************** Wohnung ******************************** -->
-            <slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
+            <slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="2">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
-                <radio-grid id="apartment_living_area" v-model="value.living_area" class="mt-8" :options="apartmentLivingAreas"></radio-grid>
+                <radio-grid id="apartment_living_area" v-model="value.living_area" class="mt-8"
+                    :options="apartmentLivingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
+            <slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="3">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
-                <radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
+                <radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
+                    :options="apartmentNumbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
-            <slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
+            <slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="4">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
                 <!--
-                                        <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
-                                            v-model="value.construction_year" />
-                        -->
+                                                                <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
+                                                                    v-model="value.construction_year" />
+                                                -->
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
-            <slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
+            <slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="5">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
-                <radio-grid id="apartment_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <radio-grid id="apartment_condition" v-model="value.condition" class="mt-8"
+                    :options="conditions"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
             <!-- ******************************** Grundstueck ******************************** -->
-            <slide v-if="value.category == 'Grundstück'" class="py-16 px-8">
+            <slide v-if="value.category == 'Grundstück'" class="py-16 px-8" :key="2">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
-                <radio-grid id="plot_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
+                <radio-grid id="plot_plot_area" v-model="value.plot_area" class="mt-8"
+                    :options="plotPlotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category == 'Grundstück'" class="py-16 px-8">
+            <slide v-if="value.category == 'Grundstück'" class="py-16 px-8" :key="3">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
                 <radio-grid id="plot_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
-            <!--
-                                                            <slide class="py-16 px-8">
-                                                                <heading>Bitte geben Sie Ihre Daten ein</heading>
-                                                                <div class="grid grid-cols-2 gap-4">
-                                                                    <v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
-                                                                    <v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
-                                                                    <v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
-                                                                    <v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
-                                                                    <v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
-                                                                    <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
-                                                                    <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
-                                                                    <v-checkbox class="col-span-2" v-model="value.datenschutz" id="datenschutz" name="datenschutz"
-                                                                        label='Ich habe die <a href="/datenschutzerklaerung" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
-                                                                </div>
-                                                                <pagination v-model="innerStep" class="mt-6" :nextable="
-                                                                    value.object_address.length > 0 &&
-                                                                    value.object_zip.length > 0 &&
-                                                                    value.object_location.length > 0 &&
-                                                                    value.firstname.length !== 0 &&
-                                                                    value.lastname.length !== 0 &&
-                                                                    value.email.length !== 0 &&
-                                                                    value.phone.length !== 0
-                                                                " submit></pagination>
-                                                            </slide>
+            <slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-16 px-8">
+                <heading>Bitte geben Sie Ihre Daten ein</heading>
+                <div class="grid grid-cols-2 gap-4">
+                    <v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
+                    <v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
+                    <v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
+                    <v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
+                    <v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
+                    <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
+                    <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
+                    <v-checkbox class="col-span-2" v-model="value.datenschutz" id="datenschutz" name="datenschutz"
+                        label='Ich habe die <a href="/datenschutzerklaerung" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
+                </div>
+                <pagination v-model="innerStep" class="mt-6" :nextable="
+                    value.object_address.length > 0 &&
+                    value.object_zip.length > 0 &&
+                    value.object_location.length > 0 &&
+                    value.firstname.length !== 0 &&
+                    value.lastname.length !== 0 &&
+                    value.email.length !== 0 &&
+                    value.phone.length !== 0
+                " submit></pagination>
+            </slide>
 
-                                                            <slide>
-                                                                <div
-                                                                    class="w-full h-full bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
-                                                                    <div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
-                                                                        <svg class="w-24 h-24 text-green-400 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg"
-                                                                            viewBox="0 0 20 20" fill="currentColor">
-                                                                            <path fill-rule="evenodd"
-                                                                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                                                                                clip-rule="evenodd" />
-                                                                        </svg>
-                                                                    </div>
-                                                                    <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
-                                                                        <div class="absolute right-0 top-0 h-full flex items-center justify-end">
-                                                                            <div
-                                                                                class="bg-green-200 w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]">
-                                                                            </div>
-                                                                        </div>
-                                                                        <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
-                                                                            <img class="w-64 h-32 object-cover"
-                                                                                src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-2.jpg" />
-                                                                        </div>
-                                                                        <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
-                                                                            <img class="w-64 h-32 object-cover"
-                                                                                src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-1.jpg" />
-                                                                        </div>
-                                                                    </div>
-                                                                    <div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0">
-                                                                        <div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
-                                                                        <div class="text-sm mt-4 md:text-lg">
-                                                                            In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei
-                                                                            Ihnen melden.
-                                                                        </div>
-                                                                        <div class="flex justify-between mt-3 items-end">
-                                                                            <span class="text-sm font-semibold text-neutral-700">Viele Grüße<br />Deine
-                                                                                Immobilienbewertung</span>
-                                                                            <div class="flex-none ml-3">
-                                                                                <img
-                                                                                    src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/logo-slider.png" />
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </slide>
-                                                -->
+            <slide v-if="value.category" :key="slideCount[value.category] + 1">
+                <div
+                    class="w-full h-full bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
+                    <div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
+                        <svg class="w-24 h-24 text-green-400 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd"
+                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
+                        <div class="absolute right-0 top-0 h-full flex items-center justify-end">
+                            <div
+                                class="bg-green-200 w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]">
+                            </div>
+                        </div>
+                        <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
+                            <img class="w-64 h-32 object-cover"
+                                src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-2.jpg" />
+                        </div>
+                        <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
+                            <img class="w-64 h-32 object-cover"
+                                src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-1.jpg" />
+                        </div>
+                    </div>
+                    <div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0">
+                        <div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
+                        <div class="text-sm mt-4 md:text-lg">
+                            In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei
+                            Ihnen melden.
+                        </div>
+                        <div class="flex justify-between mt-3 items-end">
+                            <span class="text-sm font-semibold text-neutral-700">Viele Grüße<br />Deine
+                                Immobilienbewertung</span>
+                            <div class="flex-none ml-3">
+                                <img
+                                    src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/logo-slider.png" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </slide>
         </carousel>
     </form>
 </template>
@@ -217,8 +234,14 @@ export default {
     },
     data: function () {
         return {
+            slideCount: {
+                'Haus': 6,
+                'Gewerbe': 6,
+                'Wohnung': 6,
+                'Grundstück': 3,
+            },
             finished: true,
-            tooltips: [wNumb({decimals: 0})],
+            tooltips: [wNumb({ decimals: 0 })],
             pipsy: {
                 mode: 'steps',
                 density: 1,
@@ -229,7 +252,7 @@ export default {
                     decimals: 0,
                 }),
             },
-            range: {min: [1800, 1], max: [dayjs().year(), 1]},
+            range: { min: [1800, 1], max: [dayjs().year(), 1] },
             value: {
                 category: null,
                 living_area: null,
@@ -249,10 +272,10 @@ export default {
             },
             innerStep: 0,
             categories: [
-                {key: 'Haus', label: 'Haus', icon: 'category-house'},
-                {key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'},
-                {key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment'},
-                {key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business'},
+                { key: 'Haus', label: 'Haus', icon: 'category-house' },
+                { key: 'Grundstück', label: 'Grundstück', icon: 'category-plot' },
+                { key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment' },
+                { key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business' },
             ],
             kinds: {
                 house: [
@@ -279,65 +302,65 @@ export default {
                 ],
             },
             livingAreas: [
-                {key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm'},
-                {key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
-                {key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm' },
+                { key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md' },
+                { key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             apartmentLivingAreas: [
-                {key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm'},
-                {key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md'},
-                {key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm' },
+                { key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md' },
+                { key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             gewerbeLivingAreas: [
-                {key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm'},
-                {key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md'},
-                {key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg'},
-                {key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm' },
+                { key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md' },
+                { key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg' },
+                { key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             conditions: [
-                {key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'},
-                {key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'},
-                {key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg'},
-                {key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg'},
-                {key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg'},
+                { key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md' },
+                { key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm' },
+                { key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg' },
+                { key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg' },
+                { key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg' },
             ],
             plotAreas: [
-                {key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm'},
-                {key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md'},
-                {key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm' },
+                { key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md' },
+                { key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             plotPlotAreas: [
-                {key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm'},
-                {key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md'},
-                {key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm' },
+                { key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md' },
+                { key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             numbersOfFloors: [
-                {key: '1', label: '1', icon: 'plot-area-sm'},
-                {key: '2', label: '2', icon: 'plot-area-md'},
-                {key: '3', label: '3', icon: 'plot-area-lg'},
-                {key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg'},
+                { key: '1', label: '1', icon: 'plot-area-sm' },
+                { key: '2', label: '2', icon: 'plot-area-md' },
+                { key: '3', label: '3', icon: 'plot-area-lg' },
+                { key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg' },
             ],
             numbersOfRooms: [
-                {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
-                {key: '3-5', label: '3-5', icon: 'plot-area-md'},
-                {key: '5-8', label: '5-8', icon: 'plot-area-lg'},
-                {key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg'},
+                { key: '1-2', label: '1-2', icon: 'plot-area-sm' },
+                { key: '3-5', label: '3-5', icon: 'plot-area-md' },
+                { key: '5-8', label: '5-8', icon: 'plot-area-lg' },
+                { key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg' },
             ],
             apartmentNumbersOfRooms: [
-                {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
-                {key: '3-5', label: '3-5', icon: 'plot-area-md'},
-                {key: '6-8', label: '6-8', icon: 'plot-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: '1-2', label: '1-2', icon: 'plot-area-sm' },
+                { key: '3-5', label: '3-5', icon: 'plot-area-md' },
+                { key: '6-8', label: '6-8', icon: 'plot-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
-            wohnflaechen: [{label: 'bis 50 m²'}, {label: '51 - 150 m²'}, {label: 'mehr als 151 m²'}, {label: 'nicht bekannt'}],
-            etagen: [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4 oder mehr'}],
-            sellables: [{label: '3 Monate'}, {label: '6 Monate'}, {label: '12 Monate oder später'}],
-            furnishings: [{label: 'einfach'}, {label: 'gepflegt'}, {label: 'sehr gut'}, {label: 'luxuriös'}],
+            wohnflaechen: [{ label: 'bis 50 m²' }, { label: '51 - 150 m²' }, { label: 'mehr als 151 m²' }, { label: 'nicht bekannt' }],
+            etagen: [{ label: '1' }, { label: '2' }, { label: '3' }, { label: '4 oder mehr' }],
+            sellables: [{ label: '3 Monate' }, { label: '6 Monate' }, { label: '12 Monate oder später' }],
+            furnishings: [{ label: 'einfach' }, { label: 'gepflegt' }, { label: 'sehr gut' }, { label: 'luxuriös' }],
         };
     },
     methods: {
@@ -362,5 +385,4 @@ export default {
 .radio-grid {
     display: grid;
     grid-gap: 1rem;
-}
-</style>
+}</style>
diff --git a/assets/js/components/Pagination.vue b/assets/js/components/Pagination.vue
index 9b8fe5f..949319a 100644
--- a/assets/js/components/Pagination.vue
+++ b/assets/js/components/Pagination.vue
@@ -1,17 +1,19 @@
 <template>
     <div class="flex w-4/5 mx-auto justify-between">
         <div>
-            <v-btn v-show="prev" href="#" :disabled="!prevable" @click.prevent="$emit('update:modelValue', value - 1)">Zurück</v-btn>
+            <v-btn v-show="prev" href="#" :disabled="!prevable" @click.prevent="$emit('update:modelValue', modelValue - 1)">Zurück</v-btn>
         </div>
         <div>
-            <v-btn v-show="next && !submit" href="#" :disabled="!nextable" @click.prevent="$emit('update:modelValue', value + 1)">Weiter</v-btn>
+            <v-btn v-show="next && !submit" href="#" :disabled="!nextable" @click.prevent="$emit('update:modelValue', modelValue + 1)">Weiter</v-btn>
             <v-btn v-show="next && submit" href="#" class="mt-4" type="submit" :disabled="!nextable">Absenden</v-btn>
         </div>
     </div>
 </template>
 
 <script setup>
-defineProps({
+defineEmits(['update:modelValue']);
+
+const props = defineProps({
     submit: {
         type: Boolean,
         default: () => false,
@@ -24,7 +26,7 @@ defineProps({
         type: Boolean,
         default: () => true,
     },
-    value: {
+    modelValue: {
         default: () => null,
     },
     prevable: {