feat(Style): add animations and effects to landing page

added:

- float like group
- button hover effect
- link hover glow effect
- component zoom effect

src/assets/style/_animations.scss

@@ -0,0 +1,60 @@
+@use './mixins';
+
+@include mixins.responsive using ($screen-size) {
+  .anim-#{$screen-size}-none {
+    animation: none !important;
+  }
+
+  .anim-group-#{$screen-size}-none > * {
+    animation: none !important;
+  }
+}
+
+@keyframes hover {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(0, var(--anim-translation-value));
+  }
+}
+
+$anim-base-offset: -1s;
+
+.anim-idle-hover {
+  --anim-translation-value: var(--prj-spacing-1);
+  --anim-offset: 0s;
+  animation: hover 1.5s ease-in-out var(--anim-offset) infinite alternate;
+}
+
+.anim-idle-hover-group {
+  & > * {
+    @extend .anim-idle-hover;
+  }
+
+  @for $index from 1 through 20 {
+    $anim-offset: $anim-base-offset * $index;
+    & > :nth-child(#{$index}n) {
+      --anim-offset: #{$anim-offset};
+    }
+  }
+}
+
+.anim-hover-zoom {
+  transition: scale 0.2s;
+  &:hover {
+    scale: 1.05;
+  }
+}
+
+.anim-hover-translate {
+  --anim-translation-value: -5px;
+  --anim-shadow-color: var(--prj-accent-bg);
+  transition: translate 0.2s;
+
+  &:hover {
+    translate: var(--anim-translation-value) var(--anim-translation-value);
+    box-shadow: calc(var(--anim-translation-value) * -1)
+      calc(var(--anim-translation-value) * -1) 0px 0px var(--anim-shadow-color);
+  }
+}