огрничение кол-ва тостов

edit Contacts.vue

.env

@@ -1,4 +1,5 @@
 VITE_BASE_URL=http://localhost:3000
 VITE_YANDEX_MAPS_KEY=13f4c06b-cb7e-4eeb-81f1-af52f12587b2
 SMTP_USER=rentalservicekg@yandex.ru
-SMTP_APP_PASSWORD=uljislsoihthciju
+SMTP_PASS=uljislsoihthciju
+DATABASE_URL="file:./database.db"

.env.developer

@@ -1,2 +1,5 @@
 VITE_BASE_URL=http://localhost:3000
 VITE_YANDEX_MAPS_KEY=13f4c06b-cb7e-4eeb-81f1-af52f12587b2
+SMTP_USER=rentalservicekg@yandex.ru
+SMTP_PASS=uljislsoihthciju
+DATABASE_URL="file:./database.db"

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+/generated/prisma

Dockerfile

@@ -14,7 +14,8 @@ ENV PORT=80
 ENV VITE_BASE_URL=https://rental.koptilnya.xyz
 ENV VITE_YANDEX_MAPS_KEY=13f4c06b-cb7e-4eeb-81f1-af52f12587b2
 ENV SMTP_USER=rentalservicekg@yandex.ru
-ENV SMTP_APP_PASSWORD=uljislsoihthciju
+ENV SMTP_PASS=uljislsoihthciju
+ENV DATABASE_URL="file:./database.db"
 
 
 EXPOSE 80

assets/scss/main.scss

@@ -25,12 +25,14 @@
   scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
 }
 
-body {
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
 html {
   scroll-behavior: smooth;
+  overflow: visible !important;
+}
+
+body {
+  overflow: visible !important;
+  padding-right: 0 !important;
 }
 
 //swiper
@@ -61,3 +63,39 @@ html {
   bottom: 200px !important;
   --swiper-pagination-bullet-size: 8px
 }
+
+.swiper-button-prev,
+.swiper-button-next {
+  width: 40px;
+  height: 40px;
+  background: #1e293b;
+  border-radius: 50%;
+}
+
+.swiper-navigation-icon{
+  display: none;
+}
+
+.swiper-button-prev::after,
+.swiper-button-next::after {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+
+  background: white;
+}
+
+/* Левая стрелка */
+.swiper-button-prev::after {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
+}
+
+/* Правая стрелка */
+.swiper-button-next::after {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
+}

components/BaseFooter.vue

@@ -0,0 +1,82 @@
+<template>
+  <UFooter
+    class="border-t border-default mt-10"
+    :ui="{
+      center: 'w-full',
+    }"
+  >
+    <div class="w-full py-6 grid grid-cols-1 md:grid-cols-4 gap-10 text-sm">
+      <div id="footer-contacts">
+        <h3 class="font-semibold text-base mb-3">
+          Контакты
+        </h3>
+        <ul class="space-y-2 opacity-80">
+          <li>
+            <span class="font-medium">Телефон:</span><br>
+            <a href="tel:+996504280490" class="hover:opacity-100 opacity-70">
+              +9 (965) 042-80-490
+            </a>
+          </li>
+          <li>
+            <span class="font-medium">Email:</span><br>
+            <a href="mailto:atgoldenkg@gmail.com" class="hover:opacity-100 opacity-70">
+              atgoldenkg@gmail.com
+            </a>
+          </li>
+          <li>
+            <span class="font-medium">Адрес:</span><br>
+            <p class="opacity-70">
+              Адрес Бишкек, Свердловский район,
+              ул. Ибраимова, дом 115/4
+            </p>
+          </li>
+        </ul>
+      </div>
+
+      <div id="footer-contacts">
+        <h3 class="font-semibold text-base mb-3">
+          Реквизиты
+        </h3>
+        <ul class="space-y-2 opacity-80">
+          <li>
+            <p class="opacity-70">
+              Общество с ограниченной ответственностью "АТ Голден"
+            </p>
+          </li>
+          <li>
+            <p class="opacity-70">
+              ИНН 00406202010276
+            </p>
+          </li>
+          <li>
+            <p class="opacity-70">
+              Регистрационный номер 190962-3301-ООО
+            </p>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="font-semibold text-base mb-3">
+          Навигация
+        </h3>
+        <ul class="space-y-2 opacity-80">
+          <li><a href="/" class="hover:opacity-100 opacity-70">Главная</a></li>
+          <li><a href="/nedvizhimost" class="hover:opacity-100 opacity-70">Недвижимость</a></li>
+          <li><a href="/transport" class="hover:opacity-100 opacity-70">Авто</a></li>
+          <li><a href="/about-us" class="hover:opacity-100 opacity-70">О нас</a></li>
+        </ul>
+      </div>
+
+      <div class="md:text-right opacity-70 flex flex-col justify-between">
+        <div class="text-lg font-bold">
+          AT Golden
+        </div>
+        <div class="mt-4 md:mt-0">
+          © {{ new Date().getFullYear() }} AT Golden.
+          Все права защищены.
+        </div>
+      </div>
+    </div>
+  </UFooter>
+</template>

components/Benefits.vue

@@ -52,6 +52,7 @@ function desktopAnimation() {
         trigger: benefitsRef.value,
         start: 'top 80%',
         toggleActions: 'play none none reverse',
+        once: true,
       },
     })
 
@@ -94,7 +95,7 @@ const benefits = [
   {
     icon: '🏆',
     title: 'Опыт и экспертиза',
-    description: 'Более 10 лет на рынке консьерж-услуг',
+    description: 'Более 5 лет на рынке консьерж-услуг',
   },
 ]
 

components/Contacts.vue

@@ -11,7 +11,7 @@
           </div>
 
           <div class="text-2xl font-semibold">
-            Начните работу с Rental
+            Начните работу с AT Golden
           </div>
 
           <div class="text-base text-gray-300 mt-2">
@@ -25,7 +25,7 @@
               :key="contact.label"
               class="flex items-center gap-4"
             >
-              <div class="bg-gray-800 p-3 rounded-lg">
+              <div class="bg-gray-800 p-4 flex items-center rounded-lg">
                 <UIcon :name="contact.icon" />
               </div>
 
@@ -46,7 +46,7 @@
           <form name="contacts" method="POST" @submit.prevent="onSubmit">
             <div class="flex flex-col gap-4">
               <div class="flex flex-col gap-2">
-                Как к вам обращаться
+                Как к вам обращаться ?
                 <UInput
                   id="name"
                   v-model="name"
@@ -81,7 +81,7 @@
               </div>
 
               <div class="flex flex-col gap-2">
-                Что вас интересует?
+                Что вас интересует ?
                 <div>
                   <USelect
                     id="service"
@@ -91,7 +91,9 @@
                     :items="services"
                     class="w-full"
                     size="xl"
-                    placeholder="выберите услугу"
+                    placeholder="Выберите услугу"
+                    :ui="{ content: 'max-h-70' }"
+                    :overlay="{ scrollLock: false }"
                   />
 
                   <div v-if="errors?.service" style="color: #ff6467">
@@ -108,7 +110,7 @@
                   v-bind="commentAttrs"
                   name="comment"
                   size="xl"
-                  placeholder="расскажите о ваших требованиях.."
+                  placeholder="Расскажите о ваших требованиях..."
                 />
               </div>
 
@@ -130,40 +132,53 @@
 </template>
 
 <script setup lang="ts">
+import { useSessionStorage } from '@vueuse/core'
+
 const toast = useToast()
+const route = useRoute()
 
 const contacts = [
   {
     label: 'Телефон',
-    value: '+7 (495) 123-45-67',
+    value: '+9 (965) 042-80-490',
     icon: 'i-lucide:phone',
   },
   {
     label: 'Email',
-    value: 'info@rental-concierge.com',
+    value: 'atgoldenkg@gmail.com',
     icon: 'i-lucide:mail',
   },
   {
     label: 'Адрес',
-    value: 'Москва, Тверская улица, 1',
+    value: 'Адрес Бишкек, Свердловский район ул. Ибраимова, дом 115/4',
     icon: 'i-lucide:map-pin',
   },
 ]
 
 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: {
@@ -201,7 +216,10 @@ const [comment, commentAttrs] = defineField('comment')
 const onSubmit = handleSubmit(async (values) => {
   const res = await $fetch('/api/send_mail', {
     method: 'POST',
-    body: values,
+    body: {
+      ...values,
+      route: route.path,
+    },
   })
 
   if (res.ok) {
@@ -210,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/HowWorks.vue

@@ -12,6 +12,7 @@
           :key="item.title"
           class="how-work"
           :ui="cardUi"
+          variant="subtle"
         >
           <div class="how-work__number">
             {{ item.number }}
@@ -59,6 +60,7 @@ function desktopAnimation() {
         trigger: howWorksRef.value,
         start: 'top 50%',
         toggleActions: 'play none none reverse',
+        once: true,
       },
     })
 
@@ -120,7 +122,7 @@ const items = [
 .how-work {
   &__number {
     font-size: 48px;
-    opacity: 0.1;
+    opacity: 0.3;
     font-weight: 600;
   }
 

components/MainCarusel.vue

@@ -1,50 +1,138 @@
 <template>
-  <div id="variations" class="main-carusel">
+  <div id="variations" class="main-carousel">
-    <h2>Актуальные варианты</h2>
+    <h2>{{ title }}</h2>
 
-    <UCarousel
+    <Swiper
-      v-slot="{ item }"
+      :modules="[Navigation, Autoplay]"
-      arrows
+      :loop="true"
-      :items="previewItems"
+      :autoplay="{ delay: 2000 }"
-      :ui="{ item: 'basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6' }"
+      :navigation="true"
-      class="w-full"
+      :slides-per-view="1.2"
+      :space-between="16"
+      :breakpoints="{
+        640: { slidesPerView: 2 },
+        768: { slidesPerView: 3 },
+        1024: { slidesPerView: 4 },
+        1280: { slidesPerView: 5 },
+      }"
     >
-      <div class="variants">
+      <SwiperSlide
-        <NuxtLink :to="`/post/${item.id}`">
+        v-for="slide in mixedSlides"
-          <img :src="item?.previewImage?.src" :alt="item?.previewImage?.src">
+        :key="slide.id"
-        </NuxtLink>
+        class="main-carousel__variant"
-      </div>
+      >
-    </UCarousel>
+        <template v-if="!slide.isText">
+          <NuxtLink :to="`/post/${slide.id}`">
+            <img :src="slide.previewImage.src" :alt="slide.shortTitle">
+            <div class="main-carousel__type text-sm">
+              {{ $t(slide.type) }}
+            </div>
+            <p class="text-sm">
+              {{ slide.shortTitle }}
+            </p>
+          </NuxtLink>
+        </template>
+
+        <template v-else>
+          <NuxtLink
+            href="#contacts"
+            class="main-carousel__text-slide"
+          >
+            {{ slide.text }}
+          </NuxtLink>
+        </template>
+      </SwiperSlide>
+    </Swiper>
   </div>
 </template>
 
 <script setup lang="ts">
+import { Autoplay, Navigation } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { computed } from 'vue'
+import 'swiper/css'
+import 'swiper/css/navigation'
+
 interface PreviewItem {
   id: number
+  shortTitle: string
+  type: string
   previewImage: {
     src: string
   }
 }
 
-defineProps<{ previewItems: PreviewItem[] }>()
+const props = defineProps<{ title?: 'Актуальные варианты', previewItems: PreviewItem[] }>()
+
+const mixedSlides = computed(() => {
+  const result: Array<
+      PreviewItem | { isText: true, text: string }
+  > = []
+
+  props.previewItems.forEach((item, index) => {
+    result.push(item)
+
+    const count = index + 1
+
+    if (count % 6 === 0) {
+      result.push({
+        isText: true,
+        text: 'Хочешь больше вариантов?',
+      })
+      return
+    }
+
+    if (count % 3 === 0) {
+      result.push({
+        isText: true,
+        text: 'Не нашёл подходящий вариант?',
+      })
+    }
+  })
+
+  return result
+})
 </script>
 
 <style scoped lang="scss">
-.main-carusel {
+.main-carousel {
-  height: 300px;
+  height: 380px;
   display: flex;
   flex-direction: column;
   gap: 16px;
-}
 
-.variants {
+  &__variant {
-  cursor: pointer;
+    position: relative;
-  height: 100%;
+    cursor: pointer;
 
-  img {
+    img {
-    border-radius: 12px;
+      border-radius: 12px;
+      height: 300px;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__text-slide {
     height: 300px;
-    object-fit: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    background: #334155;
+    color: white;
+    padding: 16px;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  &__type {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    padding: 4px 6px;
+    background: #1e293b;
+    border-radius: 8px;
   }
 }
 </style>

components/MapView.vue

@@ -1,6 +1,8 @@
 <template>
-  <h2>Где вы будете жить</h2>
+  <div>
-  <p>{{ marker.subtitle }}</p>
+    <h2>Где вы будете жить</h2>
+    <p>{{ marker.subtitle }}</p>
+  </div>
 
   <YandexMap
     :settings="{ location }"

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>

components/Services.vue

@@ -2,7 +2,7 @@
   <UPageSection
     id="services"
     title="Что мы предлагаем"
-    description="Полный спектр консьерж-услуг для работы с недвижимостью и автомобилями"
+    description="Полный спектр консьерж-услуг для работы с недвижимостью и автомобилями в Кыргызстане (Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген)"
     :ui="{ container: '!p-0' }"
   >
     <template #body>
@@ -70,6 +70,7 @@ function servicesAnimation() {
           trigger: card,
           start: 'top 70%',
           toggleActions: 'play none none reverse',
+          once: true,
         },
       })
     })

i18n/locales/en.json

@@ -1,3 +1,4 @@
 {
-
+  "sale": "sale",
+  "rent": "rent"
 }

i18n/locales/ru.json

@@ -1,3 +1,4 @@
 {
-
+  "sale": "Продажа",
+  "rent": "Аренда"
 }

layouts/cart.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="layout">
     <UHeader
-      title="Rental"
+      title="AT Golden"
       :toggle="false"
       :ui="{
         root: 'fixed bg-transparent w-full',
-        left: 'relative flex items-center w-full',
+        left: 'relative flex items-center w-full justify-between',
         container: 'gap-0',
         right: 'hidden',
       }"
@@ -13,9 +13,20 @@
       <template #left>
         <Icon class="cursor-pointer w-6 h-6" name="lucide:arrow-left" @click="routerBack()" />
 
-        <NuxtLink to="/" class="absolute left-1/2 transform -translate-x-1/2 text-lg">
+        <NuxtLink to="/" class="absolute left-1/2 transform -translate-x-1/2 text-lg flex items-center gap-2">
-          Rental
+          <Icon name="my-icon:main-logo" :style="{ fontSize: isMobile ? '34px' : '48px' }" />
+          AT Golden
         </NuxtLink>
+
+        <transition name="fade">
+          <UButton
+            v-if="showContactBar && !isMobile"
+            class="justify-center"
+            href="#contacts"
+            size="xl"
+            label="Свяжитесь с нами"
+          />
+        </transition>
       </template>
     </UHeader>
 
@@ -23,22 +34,21 @@
       <slot />
     </UMain>
 
-    <UFooter class="footer">
+    <BaseFooter v-if="!isMobile" />
-      <div class="flex flex-col md:flex-row items-center text-sm opacity-70">
-        <div>
-          © {{ new Date().getFullYear() }} Rental. Все права защищены.
-        </div>
-      </div>
-    </UFooter>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import BaseFooter from '~/components/BaseFooter.vue'
+
 const router = useRouter()
 const route = useRoute()
+const isMobile = useMediaQuery('(max-width: 1280px)')
 
 const { cartById } = useMock()
 const cart = cartById(route?.params?.id)
+const showContactBar = useState('showContactBar', () => false)
 
 function routerBack() {
   const newRoute = `/${cart?.category}#variations`
@@ -47,6 +57,15 @@ function routerBack() {
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .footer {
   @include mobile {
     display: none;

layouts/default.vue

@@ -2,7 +2,7 @@
   <div class="layout">
     <ClientOnly>
       <UHeader
-        title="Rental"
+        title="AT Golden"
         :toggle="false"
         :ui="{
           root: 'fixed bg-transparent w-full',
@@ -12,16 +12,24 @@
         }"
       >
         <template #left>
-          <div class="text-lg">
+          <NuxtLink to="/" class="text-lg flex items-center gap-2">
-            Rental
+            <Icon name="my-icon:main-logo" :style="{ fontSize: isMobile ? '34px' : '48px' }" />
-          </div>
+            <div v-if="!isMobile">
+              AT Golden
+            </div>
+          </NuxtLink>
 
           <div class="absolute left-1/2 transform -translate-x-1/2">
             <UTabs v-model="activeTab" :size="isMobile ? 'md' : 'xl'" :content="false" :items="tabs" />
           </div>
 
+          <!--          <UColorModeButton /> -->
           <div class="ml-auto">
-            <UButton href="#contacts" :size="isMobile ? 'md' : 'xl'" label="Связаться" />
+            <UButton
+              :href="route.path.startsWith('/about-us') ? '/' : '#contacts'"
+              :size="isMobile ? 'md' : 'xl'"
+              :label="route.path.startsWith('/about-us') ? 'Вернуться' : 'Связаться'"
+            />
           </div>
         </template>
       </UHeader>
@@ -31,25 +39,26 @@
       <slot />
     </UMain>
 
-    <UFooter>
+    <BaseFooter />
-      <div class="flex flex-col md:flex-row items-center text-sm opacity-70">
+
-        <div>
+    <PromotionModal v-model="open" />
-          © {{ new Date().getFullYear() }} Rental. Все права защищены.
-        </div>
-      </div>
-    </UFooter>
   </div>
 </template>
 
 <script setup lang="ts">
 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 ? '' : 'Главная',
@@ -71,6 +80,31 @@ const tabs = computed<TabsItem[]>(() => [
   },
 ])
 
+function showToast() {
+  if (toast?.toasts?.value?.length > 0) {
+    return
+  }
+
+  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, () => {
@@ -85,6 +119,6 @@ watch(() => route?.path, () => {
     return
   }
 
-  activeTab.value = routerPath
+  activeTab.value = routerPath || '/'
 })
 </script>

nuxt.config.ts

@@ -26,6 +26,13 @@ export default defineNuxtConfig({
     apikey: process.env.VITE_YANDEX_MAPS_KEY,
   },
   css: ['~/assets/css/main.css', '~/assets/scss/main.scss'],
+  colorMode: {
+    preference: 'dark',
+    fallback: 'dark',
+    storageKey: 'color-mode',
+    classSuffix: '',
+    dataValue: 'dark',
+  },
   build: {
     transpile: ['gsap'],
   },
@@ -40,6 +47,9 @@ export default defineNuxtConfig({
   },
   app: {
     head: {
+      link: [
+        { rel: 'icon', type: 'image/svg+xml', href: '/main-logo.svg' },
+      ],
       meta: [
         {
           name: 'viewport',
@@ -60,4 +70,12 @@ export default defineNuxtConfig({
   fonts: {
     provider: 'google',
   },
+  icon: {
+    customCollections: [
+      {
+        prefix: 'my-icon',
+        dir: './assets/my-icons',
+      },
+    ],
+  },
 })

package.json

@@ -20,11 +20,14 @@
     "@nuxt/ui": "^4.0.1",
     "@nuxtjs/i18n": "^10.0.4",
     "@tanstack/vue-query-devtools": "^5.87.1",
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/node": "^24.10.2",
     "@vee-validate/nuxt": "^4.15.1",
     "@vueuse/core": "^13.1.0",
     "axios": "^1.12.2",
     "dayjs": "^1.11.13",
     "decimal.js": "^10.5.0",
+    "dotenv": "^17.2.3",
     "gsap": "3.13",
     "maska": "^3.2.0",
     "nodemailer": "^7.0.11",

pages/about-us.vue

@@ -0,0 +1,80 @@
+<template>
+  <UPageHero
+    title="О нас"
+    description="Общество с ограниченной ответственностью «АТ Голден» — современный консьерж-сервис по недвижимости и автомобилям в Кыргызстане."
+    :ui="{
+      container: '!p-0 !pt-[160px] !sm:pt-[96px]',
+    }"
+  />
+
+  <UContainer class="flex flex-col gap-16 mt-16">
+    <div class="flex flex-col gap-6 text-lg sm:text-xl">
+      <p>
+        Общество с ограниченной ответственностью «АТ Голден» — это современный консьерж-сервис, созданный для того, чтобы сделать услуги по подбору недвижимости и автомобилей доступными каждому. Мы работаем по всему Кыргызстану, включая Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген, обеспечивая удобное и безопасное сопровождение сделок в любом из этих городов.
+      </p>
+
+      <p>
+        Наша компания действует по принципу «под ключ»: мы полностью берём на себя поиск, проверку объектов, юридическое сопровождение и оформление документов. Вам не нужно вникать в сложные детали рынка и бюрократические процессы — команда профессионалов заботится о каждом этапе, чтобы сэкономить ваше время и исключить риски.
+      </p>
+
+      <p>
+        АТ Голден — это надёжность, прозрачность и индивидуальный подход. Мы ценим доверие наших клиентов и стремимся к тому, чтобы каждая сделка проходила максимально комфортно, уверенно и безопасно.
+      </p>
+    </div>
+
+    <UCard>
+      <h2 class="text-2xl font-semibold mb-2">
+        Наши реквизиты:
+      </h2>
+      <p>ООО «АТ Голден»</p>
+      <p>ИНН: 00406202010276</p>
+      <p>Регистрационный номер: 190962-3301-ООО</p>
+      <p>Адрес: г. Бишкек, Свердловский район, ул. Ибраимова, дом 115/4</p>
+      <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">
+      <a
+        href="/Политика_конфиденциальности_АТ_Голден.pdf"
+        target="_blank"
+      >
+        <UCard variant="subtle">
+          Политика конфиденциальности
+        </UCard>
+      </a>
+
+      <a
+        href="/Пользовательское_соглашение_АТ_Голден.pdf"
+        target="_blank"
+      >
+        <UCard variant="subtle">
+          Пользовательское соглашение
+        </UCard>
+      </a>
+    </div>
+  </UContainer>
+</template>
+
+<script setup lang="ts">
+useHead({
+  title: 'О нас — АТ Голден, консьерж-сервис недвижимости и автомобилей в Кыргызстане',
+  meta: [
+    {
+      name: 'description',
+      content: 'Общество с ограниченной ответственностью «АТ Голден» — современный консьерж-сервис по подбору недвижимости и автомобилей в Кыргызстане. Надёжное сопровождение сделок в Бишкеке, Оше, Джалал-Абаде, Караколе и других городах.',
+    },
+    {
+      name: 'keywords',
+      content: 'АТ Голден, консьерж-сервис, недвижимость Кыргызстан, автомобили Кыргызстан, услуги под ключ, юридическое сопровождение, безопасные сделки, Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак, Узген',
+    },
+    {
+      property: 'og:title',
+      content: 'О нас — АТ Голден, консьерж-сервис недвижимости и автомобилей в Кыргызстане',
+    },
+    {
+      property: 'og:description',
+      content: 'Общество с ограниченной ответственностью «АТ Голден» — современный консьерж-сервис по подбору недвижимости и автомобилей в Кыргызстане. Надёжное сопровождение сделок в Бишкеке, Оше, Джалал-Абаде, Караколе и других городах.',
+    },
+  ],
+})
+</script>

pages/index.vue

@@ -2,14 +2,17 @@
   <div class="index-page">
     <UPageHero
       title="Консьерж-сервис - доступный каждому"
-      :description="`Недвижимость и авто под ключ\nМы берем на себя все заботы по поиску, проверке и оформлению недвижимости и автомобилей. Экономьте время — доверьтесь профессионалам.`"
+      description="Недвижимость и авто под ключ в Кыргызстане. Мы берем на себя все заботы по поиску, проверке и оформлению недвижимости и автомобилей. Экономьте время — доверьтесь профессионалам."
       class="index-page__hero"
+      :ui="{
+        description: 'text-lg sm:text-xl/8 text-property',
+      }"
     >
       <template #footer>
         <div class="flex gap-2 place-content-center h-[48px]">
           <UButton
             size="xl"
-            label="Узанть больше"
+            label="Узнать больше"
             href="#services"
           />
 
@@ -36,6 +39,18 @@
   </div>
 </template>
 
+<script setup lang="ts">
+useHead({
+  title: 'АТ Голден — доступный консьерж-сервис для авто и недвижимости в Кыргызстане (Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген)',
+  meta: [
+    { name: 'description', content: 'Поиск, проверка и оформление недвижимости и автомобилей в Кыргызстане (Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген). АТ Голден — доступный консьерж-сервис, который заботится о каждом этапе сделки. Надёжно, безопасно, профессионально.' },
+    { name: 'keywords', content: 'консьерж-сервис, услуги для авто, услуги для недвижимости, покупка авто, продажа авто, оформление авто, проверка авто, недвижимость Кыргызстан, покупка недвижимости, продажа недвижимости, оформление недвижимости, Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак, Узген, безопасные сделки, профессиональный сервис' },
+    { property: 'og:title', content: 'АТ Голден — доступный консьерж-сервис для авто и недвижимости в Кыргызстане (Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген)' },
+    { property: 'og:description', content: 'Поиск, проверка и оформление недвижимости и автомобилей в Кыргызстане (Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген). АТ Голден — доступный консьерж-сервис, который заботится о каждом этапе сделки. Надёжно, безопасно, профессионально.' },
+  ],
+})
+</script>
+
 <style lang="scss">
 .index-page {
   display: flex;

pages/nedvizhimost.vue

@@ -2,8 +2,11 @@
   <div class="nedvizhimost-page">
     <UPageHero
       title="Недвижимость вашей мечты"
-      :description="`Помогаем найти, купить или продать недвижимость с полным\n юридическим сопровождением и гарантией безопасности сделки.`"
+      description="Помогаем найти, купить или продать недвижимость с полным юридическим сопровождением и гарантией безопасности сделки в Кыргызстане (Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген)."
       class="nedvizhimost-page__hero"
+      :ui="{
+        description: 'text-lg sm:text-xl/8 text-property',
+      }"
     >
       <template #footer>
         <div class="flex gap-2 place-content-center h-[48px]">
@@ -88,6 +91,22 @@ const services = [
 
 const { cartByCategory } = useMock()
 const previewItems = computed(() => cartByCategory('nedvizhimost'))
+
+useHead({
+  title: 'Недвижимость в Кыргызстане — покупка, продажа и аренда с полным сопровождением',
+  meta: [
+    {
+      name: 'description',
+      content: 'АТ Голден помогает найти, купить, продать или арендовать недвижимость в Бишкеке, Оше, Джалал-Абаде, Караколе и других городах Кыргызстана. Полное юридическое сопровождение и безопасные сделки.',
+    },
+    {
+      name: 'keywords',
+      content: 'недвижимость Кыргызстан, покупка недвижимости, продажа недвижимости, аренда жилья, коммерческая недвижимость, квартиры, дома, апартаменты, безопасные сделки, юридическая проверка, сопровождение сделок, Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак, Узген',
+    },
+    { property: 'og:title', content: 'Недвижимость в Кыргызстане — покупка, продажа и аренда с полным сопровождением' },
+    { property: 'og:description', content: 'АТ Голден помогает найти, купить, продать или арендовать недвижимость в Бишкеке, Оше, Джалал-Абаде, Караколе и других городах Кыргызстана. Полное юридическое сопровождение и безопасные сделки.' },
+  ],
+})
 </script>
 
 <style lang="scss">

pages/post/[id].vue

@@ -25,12 +25,16 @@
           <p>{{ cart?.title }}</p>
           <div>
             <p>Описание:</p>
-            <p>{{ cart?.description }}</p>
+            <p class="whitespace-pre-line" v-html="cart?.description" />
           </div>
 
           <MapView v-if="cart?.coordinates" :marker="marker" />
 
+          <MainCarusel title="Похожие варианты" :preview-items="previewItems" />
+
           <Contacts />
+
+          <BaseFooter />
         </div>
       </template>
     </UDrawer>
@@ -43,13 +47,37 @@
 
       <Gallery :preview-image="cart?.previewImage" :images="cart?.images" />
 
-      <div>
+      <div ref="descriptionRef" class="post-page__description">
-        Описание:
+        <div>
-        <p>{{ cart?.description }}</p>
+          Описание:
+          <p class="whitespace-pre-line" v-html="cart?.description" />
+        </div>
+
+        <UCard
+          variant="subtle"
+          class="post-page__action"
+          title="Action"
+        >
+          <div>
+            Хотите узнать больше или оформить бронирование?<br>
+            Напишите нам — мы с удовольствием подскажем всё, что нужно.
+          </div>
+
+          <template #footer>
+            <UButton
+              class="w-full flex justify-center"
+              href="#contacts"
+              size="xl"
+              label="Свяжитесь с нами"
+            />
+          </template>
+        </UCard>
       </div>
 
       <MapView v-if="cart?.coordinates" :marker="marker" />
 
+      <MainCarusel title="Похожие варианты" :preview-items="previewItems" />
+
       <Contacts />
     </div>
   </UContainer>
@@ -62,6 +90,7 @@ import { computed, shallowRef } from 'vue'
 import Gallery from '~/components/Gallery.vue'
 
 const open = ref(false)
+const descriptionRef = shallowRef<HTMLElement | null>(null)
 const target = shallowRef<HTMLElement | null>(null)
 const targetHeight = computed(() => target.value?.offsetHeight)
 const targetDrawer = shallowRef<HTMLElement | null>(null)
@@ -69,14 +98,17 @@ const targetDrawerHeight = computed(() => targetDrawer.value?.offsetHeight)
 const { y } = useScroll(targetDrawer)
 const isMobile = useMediaQuery('(max-width: 1024px)')
 const route = useRoute()
+const showContactBar = useState('showContactBar')
 
-const { cartById } = useMock()
+const { cartById, cartByCategory } = useMock()
 const cart = cartById(route.params.id)
 const marker = computed(() => ({
   coordinates: cart?.coordinates ?? [0, 0],
   subtitle: cart?.address,
 }))
 
+const previewItems = computed(() => cartByCategory(cart?.category))
+
 const { lengthY } = useSwipe(
   target,
   {
@@ -106,16 +138,57 @@ definePageMeta({
 })
 
 onMounted(() => {
+  const el = descriptionRef.value
+  if (!el)
+    return
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0]
+
+      showContactBar.value = !entry.isIntersecting
+    },
+    {
+      threshold: 0.1,
+    },
+  )
+
+  observer.observe(el)
+
   if (isMobile.value) {
     document.body.style.overflow = 'hidden'
   }
 })
 
 onUnmounted(() => {
+  showContactBar.value = false
+
   if (isMobile.value) {
     document.body.style.overflow = ''
   }
 })
+
+useHead({
+  title: `${cart?.title} — подробная информация и услуги от АТ Голден`,
+  meta: [
+    {
+      name: 'description',
+      content: `${cart?.title} доступен через АТ Голден. ${cart?.description.replace(/<[^>]+(>|$)/g, '').slice(0, 160)}. Полное сопровождение сделки, юридическая проверка и безопасное оформление.`,
+    },
+    {
+      name: 'keywords',
+      content: `${cart?.category}, ${cart?.title}, аренда ${cart?.category}, покупка ${cart?.category}, продажа ${cart?.category}, проверка документов, безопасная сделка, АТ Голден, Кыргызстан, Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак, Узген`,
+    },
+    {
+      property: 'og:title',
+      content: `${cart?.title} — подробная информация и услуги от АТ Голден`,
+    },
+    {
+      property: 'og:description',
+      content: `${cart?.title} доступен через АТ Голден. ${cart?.description.replace(/<[^>]+(>|$)/g, '').slice(0, 160)}. Полное сопровождение сделки, юридическая проверка и безопасное оформление.`,
+    },
+  ],
+})
 </script>
 
 <style lang="scss">
@@ -124,7 +197,7 @@ onUnmounted(() => {
   margin-top: calc(64px + 26px);
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 24px;
 
   @include mobile {
     margin-top: 0;
@@ -159,5 +232,22 @@ onUnmounted(() => {
       gap: 16px;
     }
   }
+
+  &__description {
+    flex-shrink: 1;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    justify-content: space-between;
+  }
+
+  &__action {
+    height: fit-content;
+    flex-shrink: 0;
+    position: sticky;
+    top: calc(64px + 26px);
+    width: 300px;
+  }
 }
 </style>

pages/transport.vue

@@ -2,8 +2,11 @@
   <div class="transport-page">
     <UPageHero
       title="Премиум автомобили под ключ"
-      :description="`Аренда, покупка и продажа автомобилей премиум-класса с полным\n сервисным сопровождением и гарантией качества.`"
+      description="Аренда, покупка и продажа автомобилей премиум-класса с полным сервисным сопровождением и гарантией качества в Кыргызстане (Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген)."
       class="transport-page__hero"
+      :ui="{
+        description: 'text-lg sm:text-xl/8 text-property',
+      }"
     >
       <template #footer>
         <div class="flex gap-2 place-content-center h-[48px]">
@@ -84,6 +87,26 @@ const services = [
 
 const { cartByCategory } = useMock()
 const previewItems = computed(() => cartByCategory('transport'))
+
+useHead({
+  title: 'Премиум автомобили в Кыргызстане — аренда, покупка и продажа с полным сопровождением',
+  meta: [
+    {
+      name: 'description',
+      content: 'АТ Голден предлагает аренду, покупку и продажу автомобилей премиум-класса в Бишкеке, Оше, Джалал-Абаде, Караколе и других городах Кыргызстана. Полное сервисное сопровождение, юридическая проверка и безопасность сделок.',
+    },
+    {
+      name: 'keywords',
+      content: 'автомобили премиум-класса, аренда авто, краткосрочная аренда, долгосрочная аренда, покупка автомобиля, продажа автомобиля, проверка юридической чистоты, техническая экспертиза, безопасные сделки, сопровождение сделки, доставка авто, страховка авто, Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак, Узген',
+    },
+    { property: 'og:title', content: 'Премиум автомобили в Кыргызстане — аренда, покупка и продажа с полным сопровождением' },
+    { property: 'og:description', content: 'АТ Голден предлагает аренду, покупку и продажу автомобилей премиум-класса в Бишкеке, Оше, Джалал-Абаде, Караколе и других городах Кыргызстана. Полное сервисное сопровождение, юридическая проверка и безопасность сделок.' },
+  ],
+})
+
+definePageMeta({
+  layout: 'default',
+})
 </script>
 
 <style lang="scss">