add PromotionModal.vue

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>