chore: webinar visual update (#201)

Author: hmbanan666

apps/webinar/app/components/ForWhom.vue

@@ -10,7 +10,7 @@
   >
     <div
       class="w-full h-fit aspect-square min-h-56 text-muted bg-cover rounded-lg"
-      :class="{ 'motion-preset-slide-right': isVisible }"
+      :class="{ 'motion-preset-slide-right motion-preset-pop motion-duration-2000': isVisible }"
       style="background-image: url('/bg-whom.png');"
     />
   </UPageSection>
@@ -45,7 +45,9 @@ const firstSectionItems = [
 ]
 
 const target = useTemplateRef<HTMLDivElement>('target')
-const targetIsVisible = useElementVisibility(target)
+const targetIsVisible = useElementVisibility(target, {
+  rootMargin: '0px 0px -100px 0px',
+})
 
 const isVisible = ref(false)
 watch(targetIsVisible, () => {

apps/webinar/app/components/Header.vue

@@ -2,10 +2,11 @@
   <UContainer class="mt-4 md:mt-6 flex flex-row gap-2 items-center justify-between">
     <UNavigationMenu
       :items="items"
+      variant="link"
       class="hidden md:flex"
       :ui="{
-        item: 'mr-2',
-        link: '!text-xl',
+        item: 'mr-3',
+        link: '!text-xl text-primary hover:text-secondary pl-0.5',
       }"
     />
 

apps/webinar/app/components/Hero.vue

@@ -42,7 +42,7 @@
       </UButton>
 
       <div class="mt-2 max-w-120 flex flex-row gap-3.5 items-center">
-        <UIcon name="i-lucide-gift" class="shrink-0 size-12 text-secondary motion-preset-wobble-sm" />
+        <UIcon name="i-lucide-gift" class="shrink-0 size-12 text-secondary motion-preset-pulse motion-duration-2000" />
         <p class="text-base/5">
           Сразу <span class="font-bold">после регистрации получи</span> гайд по документообороту открытия своего заведения
         </p>

apps/webinar/app/components/Register.vue

@@ -17,7 +17,7 @@
               Узнай все секреты бизнеса в сфере общепита и применяй их уже завтра!
             </h2>
             <div class="text-lg sm:text-2xl/7 text-muted text-pretty">
-              Каждому, в конце вебинара, <span class="font-semibold">мы подарим “Пошаговую инструкцию по открытию своего заведения”.</span>
+              Каждому, в конце вебинара, <span class="font-bold">мы подарим “Пошаговую инструкцию по открытию своего заведения”.</span>
             </div>
           </div>
 

apps/webinar/app/components/SpeakerCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="flex flex-col gap-3.5 motion-preset-slide-up">
+  <div
+    ref="target"
+    class="flex flex-col gap-3.5"
+    :class="{ 'motion-preset-slide-up motion-duration-2000': isVisible }"
+  >
     <div class="shrink-0 relative w-full h-auto aspect-square">
       <div class="w-full h-full bg-secondary mask-[url(/heart-fill.svg)] mask-origin-fill mask-cover mask-center -rotate-4" />
       <div
@@ -24,4 +28,16 @@
 
 <script setup lang="ts">
 defineProps<{ speaker: { name: string, caption: string, description: string, image: string } }>()
+
+const target = useTemplateRef<HTMLDivElement>('target')
+const targetIsVisible = useElementVisibility(target)
+
+const isVisible = ref(false)
+watch(targetIsVisible, () => {
+  if (!targetIsVisible.value) {
+    return
+  }
+
+  isVisible.value = targetIsVisible.value
+})
 </script>

apps/webinar/app/components/WillKnow.vue

@@ -11,7 +11,7 @@
   >
     <div
       class="w-full h-fit aspect-square min-h-56 text-muted bg-cover rounded-lg"
-      :class="{ 'motion-preset-slide-left': isVisible }"
+      :class="{ 'motion-preset-slide-left motion-preset-pop motion-duration-2000': isVisible }"
       style="background-image: url('/bg-know.png');"
     />
   </UPageSection>
@@ -57,7 +57,9 @@ const secondSectionItems = [
 ]
 
 const target = useTemplateRef<HTMLDivElement>('target')
-const targetIsVisible = useElementVisibility(target)
+const targetIsVisible = useElementVisibility(target, {
+  rootMargin: '0px 0px -100px 0px',
+})
 
 const isVisible = ref(false)
 watch(targetIsVisible, () => {