Merge pull request 'Add some css animation to make the project prettier' (#7) from feature/issue-6-add-some-css-animation-to-make-the-project-prettie into master

Reviewed-on: #7

src/App.tsx

@@ -20,7 +20,7 @@ import React, { useState } from 'react';
       if (loading) {
         return (
           <div className="min-h-screen bg-gray-900 flex items-center justify-center">
-            <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+            <div className="loading-spinner h-32 w-32"></div>
           </div>
         );
       }
@@ -38,9 +38,9 @@ import React, { useState } from 'react';
         switch (currentPage) {
           case 'home':
             return (
-              <div className="min-h-screen bg-gray-900 text-white p-6">
+              <div className="min-h-screen bg-gray-900 text-white p-6 animate-fade-in">
                 <div className="max-w-7xl mx-auto">
-                  <h1 className="text-3xl font-bold mb-6">My Decks</h1>
+                  <h1 className="text-3xl font-bold mb-6 animate-slide-in-left">My Decks</h1>
                   <DeckList onDeckEdit={handleDeckEdit} />
                 </div>
               </div>

src/components/DeckCard.tsx

@@ -22,7 +22,7 @@ export default function DeckCard({ deck, onEdit }: DeckCardProps) {
 
   return (
     <div
-      className="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
+      className="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover cursor-pointer animate-scale-in"
       onClick={() => onEdit?.(deck.id)}
     >
       <div className="relative h-48 overflow-hidden">
@@ -66,7 +66,7 @@ export default function DeckCard({ deck, onEdit }: DeckCardProps) {
             e.stopPropagation();
             onEdit?.(deck.id);
           }}
-          className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white"
+          className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white btn-ripple transition-smooth glow-on-hover"
         >
           <Edit size={20} />
           Edit Deck

src/components/DeckList.tsx

@@ -82,7 +82,7 @@ const DeckList = ({ onDeckEdit }: DeckListProps) => {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+        <div className="loading-spinner h-32 w-32"></div>
       </div>
     );
   }

src/components/LoginForm.tsx

@@ -80,13 +80,13 @@ import { useState, useEffect } from 'react';
           </div>
 
           {/* Login Form */}
-          <div className="relative z-10 bg-gray-900/80 p-8 rounded-lg shadow-xl backdrop-blur-sm w-full max-w-md">
+          <div className="relative z-10 bg-gray-900/80 p-8 rounded-lg shadow-xl backdrop-blur-sm w-full max-w-md glass-effect animate-scale-in">
-            <h2 className="text-3xl font-bold text-orange-500 mb-6 text-center">
+            <h2 className="text-3xl font-bold text-orange-500 mb-6 text-center animate-bounce-in">
               Deckerr
             </h2>
             
             {error && (
-              <div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500">
+              <div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500 animate-fade-in">
                 {error}
               </div>
             )}
@@ -102,7 +102,7 @@ import { useState, useEffect } from 'react';
                     type="email"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
+                    className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white transition-smooth"
                     placeholder="Enter your email"
                     required
                   />
@@ -118,7 +118,7 @@ import { useState, useEffect } from 'react';
                     type="password"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
+                    className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white transition-smooth"
                     placeholder="Enter your password"
                     required
                   />
@@ -126,7 +126,7 @@ import { useState, useEffect } from 'react';
               </div>
               <button
                 type="submit"
-                className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
+                className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg btn-ripple glow-on-hover transition-smooth"
               >
                 <LogIn size={20} />
                 {isSignUp ? 'Sign Up' : 'Sign In'}
@@ -136,7 +136,7 @@ import { useState, useEffect } from 'react';
             <div className="mt-4 text-center">
               <button
                 onClick={() => setIsSignUp(!isSignUp)}
-                className="text-blue-400 hover:text-blue-300"
+                className="text-blue-400 hover:text-blue-300 transition-smooth"
               >
                 {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
               </button>

src/components/MagicCard.tsx

@@ -7,20 +7,20 @@ interface MagicCardProps {
 
 const MagicCard = ({ card }: MagicCardProps) => {
   return (
-    <div className="relative">
+    <div className="relative card-hover animate-fade-in">
       {card.image_uris?.normal ? (
         <img
           src={card.image_uris.normal}
           alt={card.name}
-          className="w-full h-auto rounded-lg"
+          className="w-full h-auto rounded-lg transition-smooth"
         />
       ) : (
-        <div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400">
+        <div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400 transition-smooth">
           No Image Available
         </div>
       )}
       {card.prices?.usd && (
-        <div className="absolute bottom-0 left-0 p-2 bg-gray-900 bg-opacity-50 text-white rounded-bl-lg rounded-tr-lg">
+        <div className="absolute bottom-0 left-0 p-2 bg-gray-900 bg-opacity-50 text-white rounded-bl-lg rounded-tr-lg transition-smooth">
           ${card.prices.usd}
         </div>
       )}

src/components/Navigation.tsx

@@ -74,18 +74,18 @@ import React, { useState, useRef, useEffect } from 'react';
       return (
         <>
           {/* Desktop Navigation - Top */}
-          <nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50">
+          <nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50 animate-slide-in-left">
             <div className="max-w-7xl mx-auto px-4">
               <div className="flex items-center justify-between h-16">
                 <div className="flex items-center space-x-8">
-                  <span className="text-2xl font-bold text-orange-500">Deckerr</span>
+                  <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
                   {navItems.map((item) => (
                     <button
                       key={item.id}
                       onClick={() => setCurrentPage(item.id)}
-                      className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors
+                      className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-smooth
                         ${currentPage === item.id
-                          ? 'text-white bg-gray-900'
+                          ? 'text-white bg-gray-900 animate-pulse-glow'
                           : 'text-gray-300 hover:text-white hover:bg-gray-700'
                         }`}
                     >
@@ -100,32 +100,32 @@ import React, { useState, useRef, useEffect } from 'react';
                     <div className="relative" ref={dropdownRef}>
                       <button
                         onClick={() => setShowDropdown(!showDropdown)}
-                        className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700"
+                        className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700 transition-smooth"
                       >
                         <img
                           src={getAvatarUrl(user.id)}
                           alt="User avatar"
-                          className="w-8 h-8 rounded-full bg-gray-700"
+                          className="w-8 h-8 rounded-full bg-gray-700 transition-smooth hover:scale-110"
                         />
                         <span className="text-gray-300 text-sm">{username || user.email}</span>
                         <ChevronDown size={16} className="text-gray-400" />
                       </button>
 
                       {showDropdown && (
-                        <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700">
+                        <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
                           <button
                             onClick={() => {
                               setCurrentPage('profile');
                               setShowDropdown(false);
                             }}
-                            className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+                            className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
                           >
                             <Settings size={16} />
                             <span>Profile Settings</span>
                           </button>
                           <button
                             onClick={handleSignOut}
-                            className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+                            className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
                           >
                             <LogOut size={16} />
                             <span>Sign Out</span>
@@ -140,9 +140,9 @@ import React, { useState, useRef, useEffect } from 'react';
           </nav>
 
           {/* Mobile Navigation - Bottom */}
-          <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50">
+          <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50 animate-slide-in-right">
             <div className="flex justify-between items-center h-16 px-4">
-              <span className="text-2xl font-bold text-orange-500">Deckerr</span>
+              <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
               <div className="relative" ref={mobileMenuRef}>
                 <button
                   onClick={() => setShowMobileMenu(!showMobileMenu)}
@@ -151,7 +151,7 @@ import React, { useState, useRef, useEffect } from 'react';
                   <Menu size={24} />
                 </button>
                 {showMobileMenu && (
-                  <div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700">
+                  <div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
                     {navItems.map((item) => (
                       <button
                         key={item.id}
@@ -159,7 +159,7 @@ import React, { useState, useRef, useEffect } from 'react';
                           setCurrentPage(item.id);
                           setShowMobileMenu(false);
                         }}
-                        className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+                        className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
                       >
                         <item.icon size={16} />
                         <span>{item.label}</span>
@@ -172,14 +172,14 @@ import React, { useState, useRef, useEffect } from 'react';
                             setCurrentPage('profile');
                             setShowMobileMenu(false);
                           }}
-                          className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+                          className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
                         >
                           <Settings size={16} />
                           <span>Profile Settings</span>
                         </button>
                         <button
                           onClick={handleSignOut}
-                          className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+                          className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
                         >
                           <LogOut size={16} />
                           <span>Sign Out</span>

src/index.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Existing slide animation */
 @keyframes slide {
   0% {
     transform: translateX(0);
@@ -14,3 +15,283 @@
 .animate-slide {
   animation: slide 60s linear infinite;
 }
+
+/* Fade In Animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out forwards;
+}
+
+/* Fade In Delayed - for staggered animations */
+.animate-fade-in-delay-1 {
+  animation: fadeIn 0.6s ease-out 0.1s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in-delay-2 {
+  animation: fadeIn 0.6s ease-out 0.2s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in-delay-3 {
+  animation: fadeIn 0.6s ease-out 0.3s forwards;
+  opacity: 0;
+}
+
+/* Slide In From Left */
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.5s ease-out forwards;
+}
+
+/* Slide In From Right */
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.5s ease-out forwards;
+}
+
+/* Scale In Animation */
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.4s ease-out forwards;
+}
+
+/* Pulse Glow Animation */
+@keyframes pulseGlow {
+  0%, 100% {
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
+  }
+}
+
+.animate-pulse-glow {
+  animation: pulseGlow 2s ease-in-out infinite;
+}
+
+/* Shimmer Effect */
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 2s infinite;
+}
+
+/* Bounce In Animation */
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-bounce-in {
+  animation: bounceIn 0.6s ease-out forwards;
+}
+
+/* Float Animation */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* Gradient Animation */
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient {
+  background: linear-gradient(
+    -45deg,
+    #ee7752,
+    #e73c7e,
+    #23a6d5,
+    #23d5ab
+  );
+  background-size: 400% 400%;
+  animation: gradientShift 15s ease infinite;
+}
+
+/* Card Flip Animation */
+@keyframes flipCard {
+  0% {
+    transform: perspective(1000px) rotateY(0);
+  }
+  100% {
+    transform: perspective(1000px) rotateY(180deg);
+  }
+}
+
+.animate-flip {
+  animation: flipCard 0.6s ease-in-out;
+}
+
+/* Rotate Animation */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-rotate {
+  animation: rotate 2s linear infinite;
+}
+
+/* Enhanced Hover Effects */
+.card-hover {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-hover:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
+              0 0 20px rgba(59, 130, 246, 0.3);
+}
+
+/* Button Ripple Effect */
+.btn-ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-ripple::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.btn-ripple:active::after {
+  width: 300px;
+  height: 300px;
+}
+
+/* Smooth Transitions */
+.transition-smooth {
+  transition: all 0.3s ease-in-out;
+}
+
+/* Glass Morphism Effect */
+.glass-effect {
+  background: rgba(31, 41, 55, 0.8);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Glow on Hover */
+.glow-on-hover {
+  transition: all 0.3s ease;
+}
+
+.glow-on-hover:hover {
+  box-shadow: 0 0 15px rgba(59, 130, 246, 0.6),
+              0 0 30px rgba(59, 130, 246, 0.4),
+              0 0 45px rgba(59, 130, 246, 0.2);
+  transform: scale(1.05);
+}
+
+/* Loading Animation */
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-spinner {
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: loading 1s linear infinite;
+}