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

added:

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

src/pages/index.astro

@@ -46,7 +46,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
     <h2 class="text-center">Featured Work</h2>
 
     <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
-      <Card>
+      <Card className="anim-hover-zoom">
         <img
           src="https://placehold.co/600x400"
           alt="project img"
@@ -63,7 +63,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
         </div>
       </Card>
 
-      <Card>
+      <Card className="anim-hover-zoom">
         <img
           src="https://placehold.co/600x400"
           alt="project img"
@@ -80,7 +80,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
         </div>
       </Card>
 
-      <Card>
+      <Card className="anim-hover-zoom">
         <img
           src="https://placehold.co/600x400"
           alt="project img"
@@ -99,7 +99,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
     </div>
 
     <div class="mt-4 text-center">
-      <Button className="px-4 py-2 fs-5">View Work</Button>
+      <Button className="px-4 py-2 fs-5 ">View Work</Button>
     </div>
   </section>
 
@@ -231,7 +231,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
 
       <div class="vstack justify-content-center">
         <ul
-          class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around"
+          class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
         >
           {
             [