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>

layouts/default.vue

@@ -40,6 +40,8 @@
     </UMain>
 
     <BaseFooter />
+
+    <PromotionModal v-model="open" />
   </div>
 </template>
 
@@ -47,12 +49,16 @@
 import type { TabsItem } from '@nuxt/ui'
 import { useMediaQuery } from '@vueuse/core'
 import BaseFooter from '~/components/BaseFooter.vue'
+import PromotionModal from '~/components/PromotionModal.vue'
 
 const isMobile = useMediaQuery('(max-width: 1280px)')
 
 const router = useRouter()
 const route = useRoute()
 
+const open = ref(false)
+const toast = useToast()
+
 const tabs = computed<TabsItem[]>(() => [
   {
     label: isMobile.value ? '' : 'Главная',
@@ -74,6 +80,27 @@ const tabs = computed<TabsItem[]>(() => [
   },
 ])
 
+function showToast() {
+  toast.add({
+    title: 'Уникальное предложение !',
+    description: 'покупка машины под ключ Киргизстан',
+    duration: 30000,
+    actions: [{
+      icon: 'i-lucide-car',
+      label: 'Подробнее',
+      color: 'neutral',
+      variant: 'outline',
+      onClick: () => {
+        open.value = true
+      },
+    }],
+  })
+}
+
+onMounted(() => {
+  showToast()
+})
+
 const activeTab = ref(route?.path.split('/')[1] || '/')
 
 watch(() => activeTab.value, () => {

pages/about-us.vue

@@ -30,7 +30,7 @@
       <p>ИНН: 00406202010276</p>
       <p>Регистрационный номер: 190962-3301-ООО</p>
       <p>Адрес: г. Бишкек, Свердловский район, ул. Ибраимова, дом 115/4</p>
-      <a href="tel:+996700115500" class="hover:opacity-100 opacity-70">Телефон: +9 (967) 001-15-500</a>
+      <a href="tel:+996700115500" class="hover:opacity-100 opacity-70">Телефон: +9 (965) 042-80-490</a>
     </UCard>
 
     <div class="flex flex-col sm:flex-row gap-4 justify-between">