add PromotionModal.vue

components/BaseFooter.vue

@@ -13,8 +13,8 @@
         <ul class="space-y-2 opacity-80">
           <li>
             <span class="font-medium">Телефон:</span><br>
-            <a href="tel:+996700115500" class="hover:opacity-100 opacity-70">
-              +9 (967) 001-15-500
+            <a href="tel:+996504280490" class="hover:opacity-100 opacity-70">
+              +9 (965) 042-80-490
             </a>
           </li>
           <li>

components/Contacts.vue

@@ -132,13 +132,15 @@
 </template>
 
 <script setup lang="ts">
+import { useSessionStorage } from '@vueuse/core'
+
 const toast = useToast()
 const route = useRoute()
 
 const contacts = [
   {
     label: 'Телефон',
-    value: '+9 (967) 001-15-500',
+    value: '+9 (965) 042-80-490',
     icon: 'i-lucide:phone',
   },
   {
@@ -162,11 +164,21 @@ const services = [
   'аренда недвижимости',
 ]
 
+const state = useSessionStorage('contacts', {
+  contacts:
+      {
+        name: '',
+        phone: '',
+        service: '',
+        comment: '',
+      },
+})
+
 const { errors, handleSubmit, defineField } = useForm({
   initialValues: {
     name: '',
     phone: '',
-    service: '',
+    service: state?.value?.contacts?.service || '',
     comment: '',
   },
   validationSchema: {
@@ -216,6 +228,11 @@ const onSubmit = handleSubmit(async (values) => {
     })
   }
 })
+
+watch(() => state.value, () => {
+  if (state.value.contacts.service)
+    service.value = state.value.contacts.service
+})
 </script>
 
 <style lang="scss">

components/PromotionModal.vue

@@ -0,0 +1,117 @@
+<template>
+  <UModal
+    v-model:open="open"
+    :ui="modalUi"
+    title="Авто из Кыргызстана - под ключ !"
+    scrollable
+  >
+    <template #body>
+      <div class="promotion-modal">
+        <div class="grid gap-4 sm:grid-cols-2">
+          <UCard
+            v-for="car in cars"
+            :key="car.mark"
+            class="backdrop-blur-md bg-white/10 border border-white/20"
+          >
+            <template #header>
+              <div class="flex items-center gap-3">
+                <UIcon name="i-lucide-car" class="text-xl" />
+                <h3 class="text-lg font-semibold">
+                  {{ car.mark }}
+                </h3>
+              </div>
+            </template>
+
+            <div class="flex flex-wrap gap-2">
+              <span
+                v-for="model in car.models"
+                :key="model"
+                class="
+          px-3 py-1 text-sm
+          rounded-full
+          bg-white/15
+          hover:bg-white/25
+          cursor-pointer
+          transition
+        "
+              >
+                {{ model }}
+              </span>
+            </div>
+          </UCard>
+        </div>
+
+        <UAccordion v-model="active" :items="items" />
+
+        <UButton size="xl" href="#contacts" @click="openContacts()">
+          Подробнее
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import type { AccordionItem } from '@nuxt/ui'
+import { useSessionStorage } from '@vueuse/core'
+
+const open = defineModel('modelValue', { type: Boolean, default: true })
+const active = ref()
+
+const modalUi = {
+  content:
+      'bg-[linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(\'/changan.jpg\')] bg-cover bg-center bg-no-repeat',
+}
+
+const items: AccordionItem[] = [
+  {
+    label: 'Подбор автомобиля',
+    icon: 'i-lucide-car',
+    content: 'Помощь в выборе автомобиля, консультация независимого эксперта.',
+  },
+  {
+    label: 'Юридическое оформление',
+    icon: 'i-lucide-file-text',
+    content: 'Оформление покупки с учетом требований действующего законодательства.',
+  },
+  {
+    label: 'Доставка и страхование',
+    icon: 'i-lucide-truck',
+    content: 'Организация доставки автомобиля и страхового сопровождения.',
+  },
+]
+
+const cars = [
+  {
+    mark: 'Changan',
+    models: ['CS55PLUS', 'UNI-K', 'X5 PLUS', 'UNI-Z', 'Deepel', 'Другие'],
+  },
+  {
+    mark: 'Geely',
+    models: ['Monharo', 'Emgrand', 'Galaxy Starship 7', 'Atlsa', 'Другие'],
+  },
+]
+
+const state = useSessionStorage('contacts', {
+  contacts:
+      {
+        name: '',
+        phone: '',
+        service: '',
+        comment: '',
+      },
+})
+
+function openContacts() {
+  open.value = false
+  state.value.contacts.service = 'покупка авто'
+}
+</script>
+
+<style lang="scss">
+.promotion-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>