init

assets/scss/main.scss

@@ -29,6 +29,10 @@ body {
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 //swiper
 .swiper {
   width: 100%;

assets/scss/mixins.scss

@@ -1,5 +1,5 @@
 @mixin mobile {
-  @media (max-width: 768px) {
+  @media (max-width: 1279px) {
     @content;
   }
 }

components/Benefits.vue

@@ -0,0 +1,100 @@
+<template>
+  <UPageSection
+    id="benefits"
+    title="Почему выбирают нас"
+    description="Преимущества сервиса"
+    :ui="{ container: '!p-0' }"
+  >
+    <template #body>
+      <div class="benefits">
+        <div
+          v-for="benefit in benefits"
+          :key="benefit.title"
+          class="benefit"
+        >
+          <div class="benefit__icon">
+            {{ benefit.icon }}
+          </div>
+
+          <div class="benefit__title">
+            {{ benefit.title }}
+          </div>
+
+          <div class="benefit__description">
+            {{ benefit.description }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPageSection>
+</template>
+
+<script setup lang="ts">
+const benefits = [
+  {
+    icon: '⏱️',
+    title: 'Экономия времени',
+    description: 'Мы берем на себя все рутинные задачи — от поиска до оформления документов',
+  },
+  {
+    icon: '🛡️',
+    title: 'Безопасность сделок',
+    description: 'Полная юридическая проверка объектов и контрагентов',
+  },
+  {
+    icon: '👤',
+    title: 'Личный менеджер',
+    description: 'Персональный консультант на всех этапах работы',
+  },
+  {
+    icon: '⭐',
+    title: 'Лучшие условия',
+    description: 'Используем партнерскую сеть для получения выгодных предложений',
+  },
+  {
+    icon: '💬',
+    title: 'Поддержка 24/7',
+    description: 'Всегда на связи для решения любых вопросов',
+  },
+  {
+    icon: '🏆',
+    title: 'Опыт и экспертиза',
+    description: 'Более 10 лет на рынке консьерж-услуг',
+  },
+]
+</script>
+
+<style lang="scss">
+.benefits {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(3, minmax(150px, 350px));
+  justify-content: center;
+
+  @include mobile {
+    gap: 10px;
+    grid-template-columns: repeat(2, minmax(150px, 350px));
+  }
+}
+
+.benefit {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  max-width: 300px;
+
+  &__icon {
+    font-size: 24px;
+  }
+
+  &__title {
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  &__description {
+    font-size: 14px;
+  }
+}
+</style>

components/Services.vue

@@ -2,13 +2,15 @@
   <UPageSection
     title="Что мы предлагаем"
     description="Полный спектр консьерж-услуг для работы с недвижимостью и автомобилями"
+    :ui="{ container: '!p-0' }"
   >
     <template #body>
       <div class="services">
-        <div
+        <NuxtLink
           v-for="service in services"
           :key="service.name"
           class="service"
+          :to="service.name"
         >
           <img :src="service.img" :alt="`Service Image ${service.name}`">
 
@@ -32,7 +34,7 @@
               </div>
             </div>
           </div>
-        </div>
+        </NuxtLink>
       </div>
     </template>
   </UPageSection>
@@ -103,8 +105,6 @@ const services = [
   cursor: pointer;
   width: 100%;
   height: 100%;
-  max-width: 600px;
-  max-height: 500px;
   position: relative;
   border-radius: 24px;
   overflow: hidden;
@@ -122,9 +122,9 @@ const services = [
   }
 
   &__title {
-    font-size: 1.25rem;
+    font-size: 20px;
     font-weight: 600;
-    margin: 1rem;
+    margin: 16px;
   }
 
   &__items {

layouts/default.vue

@@ -5,7 +5,7 @@
       :toggle="false"
       :ui="{
         root: 'fixed bg-transparent w-full',
-        left: 'justify-between w-full',
+        left: 'relative flex items-center w-full',
         container: 'gap-0',
         right: 'hidden',
       }"
@@ -14,8 +14,14 @@
         <NuxtLink to="/">
           Rental
         </NuxtLink>
-        <UTabs v-model="activeTab" :content="false" :items="tabs" />
-        <UColorModeButton />
+
+        <div class="absolute left-1/2 transform -translate-x-1/2">
+          <UTabs v-model="activeTab" :size="isMobile ? 'md' : 'xl'" :content="false" :items="tabs" />
+        </div>
+
+        <div class="ml-auto">
+          <UButton href="#benefits" :size="isMobile ? 'md' : 'xl'" label="Связаться" />
+        </div>
       </template>
     </UHeader>
 
@@ -24,7 +30,7 @@
     </UMain>
 
     <UFooter>
-      <div class="flex flex-col md:flex-row justify-between items-center w-full text-sm opacity-70">
+      <div class="flex flex-col md:flex-row items-center text-sm opacity-70">
         <div>
           © {{ new Date().getFullYear() }} Rental. Все права защищены.
         </div>

pages/index.vue

@@ -7,8 +7,10 @@
       class="index-page__hero"
     />
 
-    <UContainer>
+    <UContainer class="flex flex-col gap-32 my-32">
       <Services />
+
+      <Benefits />
     </UContainer>
   </div>
 </template>

pages/nedvizhimost.vue

@@ -1,5 +1,4 @@
 <template>
-  nedvizhimost
 </template>
 
 <script setup lang="ts">

pages/transport.vue

@@ -1,5 +1,4 @@
 <template>
-  transport
 </template>
 
 <script setup lang="ts">