init

components/BaseFooter.vue

@@ -0,0 +1,58 @@
+<template>
+  <UFooter class="border-t border-gray-200 mt-10">
+    <div class="w-full max-w-7xl mx-auto py-10 px-4 grid grid-cols-1 md:grid-cols-3 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:+74951234567" class="hover:opacity-100 opacity-70">
+              +7 (495) 123-45-67
+            </a>
+          </li>
+          <li>
+            <span class="font-medium">Email:</span><br>
+            <a href="mailto:info@rental-concierge.com" class="hover:opacity-100 opacity-70">
+              info@rental-concierge.com
+            </a>
+          </li>
+          <li>
+            <span class="font-medium">Адрес:</span><br>
+            Москва, Тверская улица, 1
+          </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>
+        </ul>
+      </div>
+
+      <div class="md:text-right opacity-70 flex flex-col justify-between">
+        <div class="text-lg font-bold">
+          Rental
+        </div>
+        <div class="mt-4 md:mt-0">
+          © {{ new Date().getFullYear() }} Rental.
+          Все права защищены.
+        </div>
+      </div>
+    </div>
+  </UFooter>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

components/Contacts.vue

@@ -131,6 +131,7 @@
 
 <script setup lang="ts">
 const toast = useToast()
+const route = useRoute()
 
 const contacts = [
   {
@@ -201,7 +202,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) {

components/MainCarusel.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="variations" class="main-carousel">
-    <h2>Актуальные варианты</h2>
+    <h2>{{ title }}</h2>
 
     <Swiper
       :modules="[Navigation, Autoplay]"
@@ -16,16 +16,31 @@
         1280: { slidesPerView: 5 },
       }"
     >
-      <SwiperSlide v-for="item in previewItems" :key="item.id" class="main-carousel__variant">
-        <NuxtLink :to="`/post/${item.id}`">
-          <img :src="item.previewImage.src" :alt="item.shortTitle">
-          <div class="main-carousel__type text-sm ">
-            {{ $t(item.type) }}
-          </div>
-          <p class="text-sm">
-            {{ item.shortTitle }}
-          </p>
-        </NuxtLink>
+      <SwiperSlide
+        v-for="slide in mixedSlides"
+        :key="slide.id"
+        class="main-carousel__variant"
+      >
+        <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>
@@ -34,6 +49,7 @@
 <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'
 
@@ -46,7 +62,36 @@ interface PreviewItem {
   }
 }
 
-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">
@@ -68,6 +113,19 @@ defineProps<{ previewItems: PreviewItem[] }>()
     }
   }
 
+  &__text-slide {
+    height: 300px;
+    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;