init

components/MainCarusel.vue

@@ -0,0 +1,40 @@
+<template>
+  <div id="variations">
+    <UCarousel
+      v-slot="{ item }"
+      arrows
+      :items="items"
+      :ui="{ item: 'basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6' }"
+      class="w-full variant"
+    >
+      <img
+        :src="item.img"
+        alt="item.img"
+        class="rounded-lg w-full h-auto object-cover"
+      >
+    </UCarousel>
+  </div>
+</template>
+
+<script setup lang="ts">
+const items = [
+  {
+    id: 1,
+    img: 'https://picsum.photos/468/468?random=1',
+  },
+  {
+    id: 2,
+    img: 'https://picsum.photos/468/468?random=2',
+  },
+  {
+    id: 3,
+    img: 'https://picsum.photos/468/468?random=3',
+  },
+]
+</script>
+
+<style lang="scss">
+.variant {
+  cursor: pointer;
+}
+</style>

components/MainServices.vue

@@ -0,0 +1,99 @@
+<template>
+  <UPageSection
+    id="main-services"
+    title="Полный спектр услуг"
+    description="Что мы предлагаем"
+    :ui="{ container: '!p-0' }"
+  >
+    <template #body>
+      <div class="services-grid">
+        <UCard
+          v-for="service in services"
+          :key="service.title"
+          class="service-card"
+          variant="subtle"
+        >
+          <div class="service-title">
+            <UIcon
+              :name="service.icon"
+              class="service-icon"
+            />
+            {{ service.title }}
+          </div>
+
+          <div class="service-description">
+            {{ service.description }}
+          </div>
+
+          <ul class="service-list">
+            <li v-for="item in service.items" :key="item.title">
+              {{ item.title }}
+            </li>
+          </ul>
+        </UCard>
+      </div>
+    </template>
+  </UPageSection>
+</template>
+
+<script setup lang="ts">
+interface Service {
+  title: string
+  description: string
+  icon: string
+  items: {
+    title: string
+  }[]
+}
+
+defineProps<{ services: Service[] }>()
+</script>
+
+<style scoped lang="scss">
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(300px, 500px));
+  gap: 28px;
+  justify-content: center;
+
+  @include mobile {
+    gap: 10px;
+    grid-template-columns: repeat(1, minmax(150px, 350px));
+  }
+}
+
+.service-card {
+  border-radius: 20px;
+  padding: 32px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+}
+
+.service-title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.service-icon {
+  width: 22px;
+  height: 22px;
+}
+
+.service-description {
+  margin-bottom: 20px;
+}
+
+.service-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.service-list li {
+  list-style: disc;
+  margin-left: 20px;
+}
+</style>

layouts/default.vue

@@ -11,9 +11,9 @@
       }"
     >
       <template #left>
-        <NuxtLink to="/">
+        <div class="text-lg">
           Rental
-        </NuxtLink>
+        </div>
 
         <div class="absolute left-1/2 transform -translate-x-1/2">
           <UTabs v-model="activeTab" :size="isMobile ? 'md' : 'xl'" :content="false" :items="tabs" />

nuxt.config.ts

@@ -4,7 +4,7 @@ import { createResolver } from '@nuxt/kit'
 const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig({
-  ssr: true,
+  ssr: false,
   compatibilityDate: '2025-05-15',
   devtools: { enabled: true },
   modules: [

pages/index.vue

@@ -6,7 +6,7 @@
       class="index-page__hero"
     >
       <template #footer>
-        <div class="flex gap-2 place-content-center">
+        <div class="flex gap-2 place-content-center h-[48px]">
           <UButton
             size="xl"
             label="Узанть больше"
@@ -36,9 +36,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-</script>
-
 <style lang="scss">
 .index-page {
   display: flex;

pages/nedvizhimost.vue

@@ -1,10 +1,111 @@
 <template>
+  <div class="nedvizhimost-page">
+    <UPageHero
+      title="Недвижимость вашей мечты"
+      :description="`Помогаем найти, купить или продать недвижимость с полным\n юридическим сопровождением и гарантией безопасности сделки.`"
+      class="nedvizhimost-page__hero"
+    >
+      <template #footer>
+        <div class="flex gap-2 place-content-center h-[48px]">
+          <UButton
+            size="xl"
+            label="Смотреть услуги"
+            href="#main-services"
+          />
+
+          <UButton
+            size="xl"
+            label="Смотреть варианты"
+            href="#variations"
+            color="neutral"
+            variant="subtle"
+          />
+        </div>
+      </template>
+    </UPageHero>
+
+    <UContainer class="flex flex-col gap-32 mt-32">
+      <MainServices :services="services" />
+
+      <MainCarusel />
+
+      <Contacts />
+    </UContainer>
+  </div>
 </template>
 
 <script setup lang="ts">
-
+const services = [
+  {
+    icon: 'i-lucide:home',
+    title: 'Аренда жилой недвижимости',
+    description:
+        'Подбираем квартиры, дома и апартаменты для краткосрочной и долгосрочной аренды',
+    items: [
+      { title: 'Проверка юридической чистоты' },
+      { title: 'Согласование условий договора' },
+      { title: 'Сопровождение сделки' },
+      { title: 'Помощь с переездом' },
+    ],
+  },
+  {
+    icon: 'i-lucide:shopping-bag',
+    title: 'Покупка недвижимости',
+    description:
+        'Полное сопровождение процесса покупки от поиска до получения ключей',
+    items: [
+      { title: 'Анализ рынка и оценка' },
+      { title: 'Проверка документов' },
+      { title: 'Согласование ипотеки' },
+      { title: 'Регистрация сделки' },
+    ],
+  },
+  {
+    icon: 'i-lucide:package',
+    title: 'Продажа недвижимости',
+    description:
+        'Профессиональная подготовка и продажа вашей недвижимости',
+    items: [
+      { title: 'Оценка и фотосъёмка' },
+      { title: 'Маркетинг и реклама' },
+      { title: 'Показы объекта' },
+      { title: 'Юридическое оформление' },
+    ],
+  },
+  {
+    icon: 'i-lucide:building',
+    title: 'Коммерческая недвижимость',
+    description:
+        'Работа с офисами, торговыми и складскими помещениями',
+    items: [
+      { title: 'Аренда офисов' },
+      { title: 'Покупка коммерческих объектов' },
+      { title: 'Инвестиционные проекты' },
+      { title: 'Due diligence' },
+    ],
+  },
+]
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+.nedvizhimost-page {
+  display: flex;
+  flex-direction: column;
 
+  &__hero {
+    width: 100%;
+    height: 100vh;
+
+    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/nedvizhimost.webp');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}
 </style>

pages/transport.vue

@@ -1,10 +1,107 @@
 <template>
+  <div class="transport-page">
+    <UPageHero
+      title="Премиум автомобили под ключ"
+      :description="`Аренда, покупка и продажа автомобилей премиум-класса с полным\n сервисным сопровождением и гарантией качества.`"
+      class="transport-page__hero"
+    >
+      <template #footer>
+        <div class="flex gap-2 place-content-center h-[48px]">
+          <UButton
+            size="xl"
+            label="Смотреть услуги"
+            href="#main-services"
+          />
+
+          <UButton
+            size="xl"
+            label="Смотреть варианты"
+            href="#variations"
+            color="neutral"
+            variant="subtle"
+          />
+        </div>
+      </template>
+    </UPageHero>
+
+    <UContainer class="flex flex-col gap-32 mt-32">
+      <MainServices :services="services" />
+
+      <MainCarusel />
+
+      <Contacts />
+    </UContainer>
+  </div>
 </template>
 
 <script setup lang="ts">
-
+const services = [
+  {
+    icon: 'i-lucide:home',
+    title: 'Краткосрочная аренда',
+    description: 'Подбор автомобиля для поездок по городу или путешествий',
+    items: [
+      { title: 'Автомобили премиум-класса' },
+      { title: 'Доставка к вашему адресу' },
+      { title: 'Страховка включена' },
+      { title: 'Помощь на дороге 24/7' },
+    ],
+  },
+  {
+    icon: 'i-lucide:shopping-bag',
+    title: 'Долгосрочная аренда',
+    description: 'Аренда автомобиля на длительный срок с выгодными условиями',
+    items: [
+      { title: 'Гибкие сроки аренды' },
+      { title: 'Техобслуживание включено' },
+      { title: 'Замена автомобиля' },
+      { title: 'Индивидуальные условия' },
+    ],
+  },
+  {
+    icon: 'i-lucide:package',
+    title: 'Покупка автомобиля',
+    description: 'Полное сопровождение при покупке нового или подержанного авто',
+    items: [
+      { title: 'Подбор по параметрам' },
+      { title: 'Техническая экспертиза' },
+      { title: 'Проверка юридической чистоты' },
+      { title: 'Оформление документов' },
+    ],
+  },
+  {
+    icon: 'i-lucide:building',
+    title: 'Продажа автомобиля',
+    description: 'Быстрая и выгодная продажа вашего автомобиля',
+    items: [
+      { title: 'Оценка рыночной стоимости' },
+      { title: 'Профессиональная фотосъемка' },
+      { title: 'Размещение на площадках' },
+      { title: 'Безопасное проведение сделки' },
+    ],
+  },
+]
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+.transport-page {
+  display: flex;
+  flex-direction: column;
 
+  &__hero {
+    width: 100%;
+    height: 100vh;
+
+    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/transport.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}
 </style>