init

app.vue

@@ -6,6 +6,14 @@
   </UApp>
 </template>
 
+<script setup lang="ts">
+import gsap from 'gsap'
+import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)
+</script>
+
 <style lang="scss">
 @use '@/assets/scss/main' as *;
 </style>

components/Benefits.vue

@@ -6,7 +6,7 @@
     :ui="{ container: '!p-0' }"
   >
     <template #body>
-      <div class="benefits">
+      <div ref="benefitsRef" class="benefits">
         <div
           v-for="benefit in benefits"
           :key="benefit.title"
@@ -30,6 +30,41 @@
 </template>
 
 <script setup lang="ts">
+import gsap from 'gsap'
+import ScrollTrigger from 'gsap/ScrollTrigger'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+gsap.registerPlugin(ScrollTrigger)
+
+const benefitsRef = ref()
+let benefitsCtx
+
+onMounted(() => {
+  desktopAnimation()
+})
+
+function desktopAnimation() {
+  benefitsCtx = gsap.context((self) => {
+    const boxes = self.selector('.benefit')
+
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: benefitsRef.value,
+        start: 'top 80%',
+        toggleActions: 'play none none reverse',
+      },
+    })
+
+    tl.from(boxes, {
+      y: 50,
+      opacity: 0,
+      duration: 0.8,
+      ease: 'power3.out',
+      stagger: 0.25,
+    })
+  }, benefitsRef.value)
+}
+
 const benefits = [
   {
     icon: '⏱️',
@@ -62,6 +97,10 @@ const benefits = [
     description: 'Более 10 лет на рынке консьерж-услуг',
   },
 ]
+
+onUnmounted(() => {
+  benefitsCtx?.revert()
+})
 </script>
 
 <style lang="scss">

components/HowWorks.vue

@@ -6,25 +6,22 @@
     :ui="{ container: '!p-0' }"
   >
     <template #body>
-      <div class="how-works">
+      <div ref="howWorksRef" class="how-works">
         <UCard
           v-for="item in items"
           :key="item.title"
           class="how-work"
-          :ui="{ body: 'flex flex-col gap-4 h-[350px] !pb-15' }"
+          :ui="cardUi"
         >
           <div class="how-work__number">
             {{ item.number }}
           </div>
-
           <div class="how-work__icon">
             {{ item.icon }}
           </div>
-
           <div class="how-work__title">
             {{ item.title }}
           </div>
-
           <div class="how-work__description">
             {{ item.description }}
           </div>
@@ -35,6 +32,50 @@
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import gsap from 'gsap'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const isMobile = useMediaQuery('(max-width: 1280px)')
+const cardUi = computed(() => {
+  return isMobile.value
+    ? { body: 'flex flex-col gap-2 h-[270px] !pb-5' }
+    : { body: 'flex flex-col gap-4 h-[350px] !pb-15' }
+})
+
+const howWorksRef = ref()
+let ctx
+
+onMounted(() => {
+  desktopAnimation()
+})
+
+function desktopAnimation() {
+  ctx = gsap.context((self) => {
+    const boxes = self.selector('.how-work')
+
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: howWorksRef.value,
+        start: 'top 50%',
+        toggleActions: 'play none none reverse',
+      },
+    })
+
+    tl.from(boxes, {
+      x: -80,
+      opacity: 0,
+      duration: 0.8,
+      ease: 'power3.out',
+      stagger: 0.25,
+    })
+  }, howWorksRef.value)
+}
+
+onUnmounted(() => {
+  ctx.revert()
+})
+
 const items = [
   {
     icon: '💬',
@@ -72,7 +113,7 @@ const items = [
 
   @include mobile {
     gap: 10px;
-    grid-template-columns: repeat(2, minmax(150px, 350px));
+    grid-template-columns: repeat(1, minmax(150px, 350px));
   }
 }
 

components/Services.vue

@@ -1,11 +1,12 @@
 <template>
   <UPageSection
+    id="services"
     title="Что мы предлагаем"
     description="Полный спектр консьерж-услуг для работы с недвижимостью и автомобилями"
     :ui="{ container: '!p-0' }"
   >
     <template #body>
-      <div class="services">
+      <div ref="servicesRef" class="services">
         <NuxtLink
           v-for="service in services"
           :key="service.name"
@@ -41,6 +42,52 @@
 </template>
 
 <script setup lang="ts">
+import gsap from 'gsap'
+import ScrollTrigger from 'gsap/ScrollTrigger'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+gsap.registerPlugin(ScrollTrigger)
+
+const servicesRef = ref()
+let servicesCtx
+
+onMounted(() => {
+  servicesAnimation()
+})
+
+function servicesAnimation() {
+  servicesCtx = gsap.context((self) => {
+    const cards = self.selector('.service')
+
+    cards.forEach((card) => {
+      gsap.from(card, {
+        y: 80,
+        rotateY: 15,
+        opacity: 0,
+        duration: 1,
+        ease: 'power4.out',
+        scrollTrigger: {
+          trigger: card,
+          start: 'top 70%',
+          toggleActions: 'play none none reverse',
+        },
+      })
+    })
+
+    cards.forEach((card) => {
+      const hover = gsap.to(card, {
+        scale: 1.01,
+        duration: 0.3,
+        paused: true,
+        ease: 'power2.out',
+      })
+
+      card.addEventListener('mouseenter', () => hover.play())
+      card.addEventListener('mouseleave', () => hover.reverse())
+    })
+  }, servicesRef.value)
+}
+
 const services = [
   {
     name: 'nedvizhimost',
@@ -87,6 +134,10 @@ const services = [
     ],
   },
 ]
+
+onUnmounted(() => {
+  servicesCtx?.revert()
+})
 </script>
 
 <style lang="scss">
@@ -109,11 +160,6 @@ const services = [
   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%;

nuxt.config.ts

@@ -21,6 +21,9 @@ export default defineNuxtConfig({
     ],
   ],
   css: ['~/assets/css/main.css', '~/assets/scss/main.scss'],
+  build: {
+    transpile: ['gsap'],
+  },
   i18n: {
     locales: [
       { code: 'en', name: 'English', file: 'en.json' },

pages/index.vue

@@ -3,10 +3,27 @@
     <UPageHero
       title="Консьерж-сервис премиум класса"
       :description="`Недвижимость и авто под ключ\nМы берем на себя все заботы по поиску, проверке и оформлению недвижимости и автомобилей. Экономьте время — доверьтесь профессионалам.`"
-      :links="links"
       class="index-page__hero"
+    >
+      <template #footer>
+        <div class="flex gap-2 place-content-center">
+          <UButton
+            size="xl"
+            label="Узанть больше"
+            href="#services"
           />
 
+          <UButton
+            size="xl"
+            label="Почему выбирают нас"
+            href="#benefits"
+            color="neutral"
+            variant="subtle"
+          />
+        </div>
+      </template>
+    </UPageHero>
+
     <UContainer class="flex flex-col gap-32 my-32">
       <Services />
 
@@ -19,21 +36,6 @@
 
 <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">