From 0e3926c7408288fb4182f339f34707578609ff6b Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Tue, 7 May 2024 18:31:50 -0500
Subject: [PATCH] Add animation to cards in homepage

---
 src/components/Card.tsx |  4 ++--
 src/pages/Index.tsx     | 18 ++++--------------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index ff37435..5e9de2c 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -35,14 +35,14 @@ export function Card(props: {value: number}) {
     }
 
     return (
-        <div class={"inline-block w-16 h-24 border-2 border-c-border-1 relative"}
+        <button class={"inline-block w-16 h-24 border-2 border-c-border-1 relative select-none"}
             style={{"color": textColor, "background-color": bgColor}}
         >
             <span class="absolute top-1 left-1 font-bold text-4xl font-sans-serif">
                 {cardValue}
             </span>
             {icon}
-        </div>
+        </button>
     );
 }
 
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index b288ba0..231fdd5 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -92,27 +92,17 @@ export function Index() {
                     Go to game rules
                 </A>
             </div>
-            <div class="h-16" />
-            <div class="text-center">
-                <div class="inline-block -rotate-6 translate-x-2 translate-y-1">
+            <div class="text-center py-8">
+                <div class="inline-block -rotate-6 translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
                     <Card value={38} />
                 </div>
-                <div class="inline-block">
+                <div class="inline-block hover:-translate-y-2 transition-transform">
                     <Card value={4} />
                 </div>
-                <div class="inline-block rotate-6 -translate-x-2 translate-y-1">
+                <div class="inline-block rotate-6 -translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
                     <Card value={36} />
                 </div>
             </div>
-            <div class="text-center">
-                <Card value={64} />
-                <Card value={96} />
-                <Card value={128} />
-                <Card value={160} />
-                <Card value={192} />
-                <Card value={224} />
-                <Card value={256} />
-            </div>
         </div>
     );
 }