Feat add animations

assets/styles/tailwind.css

@@ -9,7 +9,7 @@
   /* Titles */
   .title-h1 {
     @apply font-title text-7xl font-semibold sm:text-6xl;
-    line-height: 0.9;
+    line-height: 1;
     color: #232323;
   }
 
@@ -80,26 +80,34 @@
     line-height: 1.5;
   }
 
-  .link-hover-style {
-    @apply hover:-mr-[5px] hover:font-semibold;
+  .link-list-item {
+    padding: 0;
+    margin: 0;
   }
 
-  .footer-hover-style {
-    @apply hover:-mr-[2.5px] hover:font-semibold;
+  .link-list-item .link {
+    @apply inline-block cursor-pointer text-left min-w-max w-full hover:font-semibold;
+    padding: 16px;
+    margin: -16px;
+  }
+
+  .link::before {
+    @apply font-semibold block overflow-hidden h-[0px] invisible;
+    content: attr(data-text);
   }
 
   /* Button */
   .btn {
     @apply w-full py-sm px-md-alt cursor-pointer border-2 border-black-950;
   }
   .btn-primary {
-    @apply font-semibold rounded-full shadow-md bg-wit-blue-500 hover:bg-wit-blue-400 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-black-950;
+    @apply font-semibold rounded-full bg-wit-blue-500 hover:bg-wit-blue-400 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-black-950 hover:shadow-none hover:translate-x-xs hover:translate-y-xs ease-[cubic-bezier(0.25,0.4,0.55,1.4)] duration-75;
   }
   .btn-dark {
-    @apply font-semibold rounded-full shadow-md bg-white-50 hover:bg-white-100 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-wit-blue-500;
+    @apply font-semibold rounded-full bg-white-50 hover:bg-white-100 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-wit-blue-500 hover:shadow-none hover:translate-x-xs hover:translate-y-xs ease-[cubic-bezier(0.25,0.4,0.55,1.4)] duration-75;
   }
   .btn-secondary {
-    @apply font-semibold rounded-full shadow-md bg-black-950 hover:bg-black-900 text-white-50 focus:outline-none focus:ring focus:ring-black-500 focus:ring-opacity-80 border-2 shadow-[3px_7px_0px] shadow-black-950;
+    @apply font-semibold rounded-full bg-black-950 hover:bg-black-900 text-white-50 focus:outline-none focus:ring focus:ring-black-500 focus:ring-opacity-80 border-2 shadow-[3px_7px_0px] shadow-black-950;
   }
   .btn-terciary {
     @apply font-semibold rounded-full border-white-50 bg-black-950 hover:bg-black-900 text-white-50 focus:outline-none focus:ring focus:ring-black-500 focus:ring-opacity-80 border-2;

components/AnimatedArrow.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="arrow">
+    <ArrowRightIcon class="arrow ml-md h-[14px]"></ArrowRightIcon>
+  </div>
+</template>
+
+<script setup>
+import ArrowRightIcon from '@/assets/svg/arrow_right.svg?component'
+const { gsap } = useGsap()
+const arrow = ref(null)
+
+const props = defineProps({
+  hover: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const hover = computed(() => props.hover)
+
+watch(hover, (value) => {
+  if (value) {
+    gsap.to(arrow.value, {
+      translateX: 8,
+      ease: 'circ.out',
+      yoyo: true,
+      repeat: -1,
+    })
+  } else {
+    gsap.killTweensOf(arrow.value)
+    gsap.to(arrow.value, {
+      translateX: 0,
+    })
+  }
+})
+</script>

components/ArrowButton.vue

@@ -1,16 +1,24 @@
 <template>
-  <CustomButton :type="ButtonType.terciary">
+  <CustomButton
+    :type="ButtonType.terciary"
+    @mouseenter="toggleHover()"
+    @mouseleave="toggleHover()"
+  >
     <span class="flex items-center">
       <slot></slot>
-      <ArrowRightIcon class="arrow ml-md"></ArrowRightIcon>
+      <AnimatedArrow :hover="hover" />
     </span>
   </CustomButton>
 </template>
 
 <script setup>
 import { ButtonType } from '@/types'
 
-import ArrowRightIcon from '@/assets/svg/arrow_right.svg?component'
+const hover = ref(false)
+
+function toggleHover() {
+  hover.value = !hover.value
+}
 defineProps({
   type: {
     type: String,
@@ -26,8 +34,4 @@ defineProps({
 .btn {
   font-size: 1rem;
 }
-
-.arrow {
-  height: 14px;
-}
 </style>

components/CustomButton.vue

@@ -18,9 +18,12 @@ defineProps({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .btn {
   font-size: 1rem;
+  &:hover {
+    transform: translate(3, 7px);
+  }
 }
 
 .btn-terciary {

components/FooterSection.vue

@@ -3,12 +3,13 @@
     name="section"
     :frame-classes="'bg-black-950'"
     :content-classes="'grid justify-items-center'"
+    :section-animation="false"
   >
     <template #content>
       <div class="footer grid gap-xl">
-        <div class="grid grid-cols-[max-content_1fr] md:grid-cols-1 gap-xl">
+        <div class="grid grid-cols-[max-content_1fr] md:grid-cols-1 gap-3xl">
           <div
-            class="grid grid-cols-[130px_130px_130px] gap-3xl sm:gap-md sm:grid-cols-2 justify-items-start"
+            class="grid grid-cols-[max-content_max-content_max-content] gap-3xl sm:gap-xl sm:grid-cols-2 justify-items-start"
           >
             <div
               v-for="section in footerLinks"
@@ -18,15 +19,22 @@
               <p class="title font-bold footer-text mb-sm">
                 {{ $t(`footer.links.${section.title}.title`) }}
               </p>
-              <a
-                v-for="link in section.links"
-                :key="link.text"
-                class="footer-text footer-hover-style cursor-pointer"
-                :href="link.url"
-                target="_blank"
-              >
-                {{ $t(link.text) }}
-              </a>
+              <ul class="py-2 flex flex-col gap-sm">
+                <li
+                  v-for="link in section.links"
+                  :key="link.text"
+                  class="link-list-item"
+                >
+                  <a
+                    class="link footer-text"
+                    :href="link.url"
+                    :data-text="$t(link.text)"
+                    target="_blank"
+                  >
+                    {{ $t(link.text) }}
+                  </a>
+                </li>
+              </ul>
             </div>
           </div>
           <div class="w-full grid gap-md xs:mt-lg">
@@ -48,7 +56,7 @@
           </div>
         </div>
         <div
-          class="grid grid-cols-[max-content_max-content_1fr] sm:grid-cols-1 align-middle gap-lg pt-10 items-center"
+          class="grid grid-cols-[max-content_max-content_1fr] sm:grid-cols-1 align-middle gap-lg pt-xl items-center"
         >
           <WitOracleIcon class="w-[140px] h-auto white" name="witnet_dark" />
           <div class="h-max self-center">

components/IconExternalLink.vue

@@ -23,7 +23,7 @@ defineProps({
 <style lang="scss">
 .icon {
   .social-icon {
-    @apply fill-white-400;
+    @apply fill-white-400 transition-all;
   }
 }
 .icon:hover > .social-icon {

components/IconWithText.vue

@@ -28,7 +28,7 @@ defineProps({
 
 <style lang="scss">
 .rounded-icon {
-  @apply bg-wit-blue-500;
+  @apply bg-wit-blue-500 transition-colors;
 }
 .icon-container:hover > .rounded-icon {
   @apply bg-wit-blue-300;

components/RotateOnScroll.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="blueStar" class="h-max w-auto">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  sectionId: {
+    type: String,
+    required: true,
+  },
+  endPosition: {
+    type: String,
+    default: '0',
+  },
+  startPosition: {
+    type: String,
+    default: 'top top',
+  },
+})
+const { gsap } = useGsap()
+
+const blueStar = ref(null)
+
+onMounted(() => {
+  startAnimation()
+})
+
+function startAnimation() {
+  gsap
+    .timeline({
+      duration: 5,
+      ease: 'slow',
+      scrollTrigger: {
+        trigger: `#${props.sectionId}`,
+        pin: false,
+        scrub: 0.5,
+        start: props.startPosition,
+        end: props.endPosition,
+      },
+    })
+    .from(blueStar.value, {
+      rotation: 360,
+      duration: 10,
+      repeat: -1,
+      ease: 'linear',
+    })
+}
+</script>

components/SocialLinks.vue

@@ -1,22 +1,24 @@
 <template>
-  <div
-    class="h-[90vh] max-h-[900px] grid gap-y-4 grid-flow-row content-center gap-y-md justify-items-end opacity-60 hover:opacity-100"
-  >
-    <IconExternalLink :url="URLS.x" :icon="Twitter" />
-    <IconExternalLink :url="URLS.telegram" :icon="Telegram" />
-    <IconExternalLink :url="URLS.discord" :icon="Discord" />
-    <IconExternalLink :url="URLS.github" :icon="Github" />
-    <div class="flex mt-3xl">
-      <p
-        class="text-sm font-light text-white-400 [writing-mode:vertical-lr] -rotate-180 subtitle"
-      >
-        {{ $t('socials-title-1') }}
-      </p>
-      <p
-        class="text-sm font-light text-white-400 [writing-mode:vertical-lr] -rotate-180 subtitle"
-      >
-        {{ $t('socials-title-2') }}
-      </p>
+  <div ref="socials" class="h-[90vh] max-h-[900px]">
+    <div
+      class="opacity-60 hover:opacity-100 transition-all grid gap-y-4 grid-flow-row content-center gap-y-md justify-items-end"
+    >
+      <IconExternalLink :url="URLS.x" :icon="Twitter" />
+      <IconExternalLink :url="URLS.telegram" :icon="Telegram" />
+      <IconExternalLink :url="URLS.discord" :icon="Discord" />
+      <IconExternalLink :url="URLS.github" :icon="Github" />
+      <div class="flex mt-3xl">
+        <p
+          class="text-sm font-light text-white-400 [writing-mode:vertical-lr] -rotate-180 subtitle"
+        >
+          {{ $t('socials-title-1') }}
+        </p>
+        <p
+          class="text-sm font-light text-white-400 [writing-mode:vertical-lr] -rotate-180 subtitle"
+        >
+          {{ $t('socials-title-2') }}
+        </p>
+      </div>
     </div>
   </div>
 </template>
@@ -26,4 +28,18 @@ import Telegram from '@/assets/svg/socials/telegram.svg?component'
 import Discord from '@/assets/svg/socials/discord.svg?component'
 import Github from '@/assets/svg/socials/github.svg?component'
 import { URLS } from '@/constants'
+
+const socials = ref(null)
+const { gsap } = useGsap()
+onMounted(() => {
+  startAnimation()
+})
+function startAnimation() {
+  gsap.from(socials.value, {
+    yPercent: 100,
+    ease: 'power2.out',
+    opacity: 0,
+    duration: 1,
+  })
+}
 </script>

components/cards/ExplorerLink.vue

@@ -1,7 +1,13 @@
 <template>
   <!-- extra div to be able to style margins from parent without collision with inner styles -->
   <div>
-    <a :href="url" target="_blank" class="cursor-pointer">
+    <a
+      :href="url"
+      target="_blank"
+      class="cursor-pointer"
+      @mouseenter="toggleHover"
+      @mouseleave="toggleHover"
+    >
       <div
         class="card border rounded-lg px-xl py-xl mr-sm mb-sm max-w-md h-full"
         :class="['shadow-' + shadowColor]"
@@ -10,7 +16,7 @@
           <h3 class="text-xl text-black-950 font-semibold leading-4">
             {{ title }}
           </h3>
-          <ArrowRightIcon class="arrow" />
+          <AnimatedArrow :hover="hover" />
         </div>
         <hr class="hr my-md" />
         <slot name="description" class="text-sm text-black-950"></slot>
@@ -20,8 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import ArrowRightIcon from '@/assets/svg/arrow_right.svg?component'
-
+const hover = ref(false)
 defineProps({
   title: {
     type: String,
@@ -36,6 +41,10 @@ defineProps({
     required: true,
   },
 })
+
+function toggleHover() {
+  hover.value = !hover.value
+}
 </script>
 
 <style scoped>