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

added:

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

src/components/Button/Button.astro

@@ -10,7 +10,7 @@ const { className = '' } = Astro.props;
   <slot />
 </button>
 
-<style>
+<style lang="scss">
   button {
     font-size: 1rem;
     padding: var(--prj-spacing-1) var(--prj-spacing-3);
@@ -23,5 +23,18 @@ const { className = '' } = Astro.props;
     cursor: pointer;
 
     margin-bottom: 0;
+    box-shadow: 0 0 0px 0px var(--prj-accent-bg);
+
+    transition: color 0.2s, background-color 0.2s, translate 0.2s,
+      box-shadow 0.2s;
+
+    &:hover {
+      --anim-translation-value: -5px;
+      background-color: transparent;
+      color: var(--prj-text);
+      translate: var(--anim-translation-value) var(--anim-translation-value);
+      box-shadow: calc(var(--anim-translation-value) * -2)
+        calc(var(--anim-translation-value) * -2) 0px 0px var(--prj-accent-bg);
+    }
   }
 </style>

src/components/Card.astro

@@ -1,10 +1,13 @@
 ---
 export interface Props {
   title?: string;
+  className?: string;
 }
+
+const { className } = Astro.props;
 ---
 
-<div class="card vstack">
+<div class:list={['card', 'vstack', className]}>
   <div class="title">
     <slot name="title" />
   </div>