init

components/Services.vue

@@ -0,0 +1,145 @@
+<template>
+  <UPageSection
+    title="Что мы предлагаем"
+    description="Полный спектр консьерж-услуг для работы с недвижимостью и автомобилями"
+  >
+    <template #body>
+      <div class="services">
+        <div
+          v-for="service in services"
+          :key="service.name"
+          class="service"
+        >
+          <img :src="service.img" :alt="`Service Image ${service.name}`">
+
+          <div class="service__title">
+            {{ service.title }}
+          </div>
+
+          <div class="service__items">
+            <div
+              v-for="item in service.items"
+              :key="item.title"
+              class="service__item"
+            >
+              <div class="service__icon">
+                {{ item.icon }}
+              </div>
+
+              <div>
+                <p>{{ item.title }}</p>
+                <p>{{ item.description }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPageSection>
+</template>
+
+<script setup lang="ts">
+const services = [
+  {
+    name: 'nedvizhimost',
+    img: 'photo-1627141234469-24711efb373c.jpg',
+    title: 'Недвижимость',
+    items: [
+      {
+        icon: '🏠',
+        title: 'Аренда недвижимости',
+        description: 'Подбор квартир и домов по вашим критериям',
+      },
+      {
+        icon: '🔑',
+        title: 'Покупка недвижимости',
+        description: 'Полное сопровождение сделки от A до Я',
+      },
+      {
+        icon: '📋',
+        title: 'Продажа недвижимости',
+        description: 'Оценка, маркетинг и поиск покупателей',
+      },
+    ],
+  },
+  {
+    name: 'transport',
+    img: 'photo-1685023911870-12430a741d41.jpg',
+    title: 'Автомобили',
+    items: [
+      {
+        icon: '🚗',
+        title: 'Аренда авто',
+        description: 'Подбор автомобиля для краткосрочной аренды',
+      },
+      {
+        icon: '🔑',
+        title: 'Покупка авто',
+        description: 'Помощь в выборе и проверке автомобиля',
+      },
+      {
+        icon: '📋',
+        title: 'Продажа авто',
+        description: 'Оценка, размещение объявлений, проведение сделки',
+      },
+    ],
+  },
+]
+</script>
+
+<style lang="scss">
+.services {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 32px;
+
+  @include mobile {
+    flex-direction: column;
+  }
+}
+
+.service {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  max-width: 600px;
+  max-height: 500px;
+  position: relative;
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+  transition: 0.15s ease-out;
+
+  &:hover {
+    transform: scale(1.01);
+  }
+
+  img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+
+  &__title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 1rem;
+  }
+
+  &__items {
+    padding: 0 16px 16px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+
+  &__icon {
+    font-size: 24px;
+  }
+}
+</style>

layouts/default.vue

@@ -3,7 +3,12 @@
     <UHeader
       title="Rental"
       :toggle="false"
-      :ui="{ left: 'justify-between w-full', container: 'gap-0', right: 'hidden' }"
+      :ui="{
+        root: 'fixed bg-transparent w-full',
+        left: 'justify-between w-full',
+        container: 'gap-0',
+        right: 'hidden',
+      }"
     >
       <template #left>
         <NuxtLink to="/">
@@ -15,9 +20,7 @@
     </UHeader>
 
     <UMain>
-      <UContainer>
+      <slot />
-        <slot />
-      </UContainer>
     </UMain>
 
     <UFooter>

pages/index.vue

@@ -1,9 +1,56 @@
 <template>
-  index
+  <div class="index-page">
+    <UPageHero
+      title="Консьерж-сервис премиум класса"
+      :description="`Недвижимость и авто под ключ\nМы берем на себя все заботы по поиску, проверке и оформлению недвижимости и автомобилей. Экономьте время — доверьтесь профессионалам.`"
+      :links="links"
+      class="index-page__hero"
+    />
+
+    <UContainer>
+      <Services />
+    </UContainer>
+  </div>
 </template>
 
 <script setup lang="ts">
+import Services from '~/components/Services.vue'
+
+const links = computed(() => [
+  {
+    label: 'Начать работу',
+    to: '/docs/getting-started',
+    icon: 'i-lucide-square-play',
+  },
+  {
+    label: 'Узнать больше',
+    to: '/docs/getting-started/theme/design-system',
+    color: 'neutral',
+    variant: 'subtle',
+    trailingIcon: 'i-lucide-arrow-right',
+  },
+])
 </script>
 
 <style lang="scss">
+.index-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('/hero.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>