src/App.tsx

@@ -1,91 +1,91 @@
-import React, { useState } from 'react';
-    import DeckManager from './components/DeckManager';
-    import DeckList from './components/DeckList';
-    import LoginForm from './components/LoginForm';
-    import Navigation from './components/Navigation';
-    import Collection from './components/Collection';
-    import DeckEditor from './components/DeckEditor';
-    import Profile from './components/Profile';
-    import CardSearch from './components/CardSearch';
-    import LifeCounter from './components/LifeCounter';
-    import { AuthProvider, useAuth } from './contexts/AuthContext';
-
-    type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter';
-
-    function AppContent() {
-      const [currentPage, setCurrentPage] = useState<Page>('home');
-      const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null);
-      const { user, loading } = useAuth();
-
-      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>
-        );
-      }
-
-      if (!user && currentPage !== 'login') {
-        return <LoginForm />;
-      }
-
-      const handleDeckEdit = (deckId: string) => {
-        setSelectedDeckId(deckId);
-        setCurrentPage('edit-deck');
-      };
-
-      const renderPage = () => {
-        switch (currentPage) {
-          case 'home':
-            return (
-              <div className="min-h-screen bg-gray-900 text-white p-6">
-                <div className="max-w-7xl mx-auto">
-                  <h1 className="text-3xl font-bold mb-6">My Decks</h1>
-                  <DeckList onDeckEdit={handleDeckEdit} />
-                </div>
-              </div>
-            );
-          case 'deck':
-            return <DeckManager />;
-          case 'edit-deck':
-            return selectedDeckId ? (
-              <DeckEditor 
-                deckId={selectedDeckId} 
-                onClose={() => {
-                  setSelectedDeckId(null);
-                  setCurrentPage('home');
-                }}
-              />
-            ) : null;
-          case 'collection':
-            return <Collection />;
-          case 'profile':
-            return <Profile />;
-          case 'search':
-            return <CardSearch />;
-          case 'life-counter':
-            return <LifeCounter />;
-          case 'login':
-            return <LoginForm />;
-          default:
-            return null;
-        }
-      };
-
-      return (
-        <div className="min-h-screen bg-gray-900">
-          <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
-          {renderPage()}
-        </div>
-      );
-    }
-
-    function App() {
-      return (
-        <AuthProvider>
-          <AppContent />
-        </AuthProvider>
-      );
-    }
-
+import React, { useState } from 'react';
+    import DeckManager from './components/DeckManager';
+    import DeckList from './components/DeckList';
+    import LoginForm from './components/LoginForm';
+    import Navigation from './components/Navigation';
+    import Collection from './components/Collection';
+    import DeckEditor from './components/DeckEditor';
+    import Profile from './components/Profile';
+    import CardSearch from './components/CardSearch';
+    import LifeCounter from './components/LifeCounter';
+    import { AuthProvider, useAuth } from './contexts/AuthContext';
+
+    type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter';
+
+    function AppContent() {
+      const [currentPage, setCurrentPage] = useState<Page>('home');
+      const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null);
+      const { user, loading } = useAuth();
+
+      if (loading) {
+        return (
+          <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+            <div className="loading-spinner h-32 w-32"></div>
+          </div>
+        );
+      }
+
+      if (!user && currentPage !== 'login') {
+        return <LoginForm />;
+      }
+
+      const handleDeckEdit = (deckId: string) => {
+        setSelectedDeckId(deckId);
+        setCurrentPage('edit-deck');
+      };
+
+      const renderPage = () => {
+        switch (currentPage) {
+          case 'home':
+            return (
+              <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 animate-slide-in-left">My Decks</h1>
+                  <DeckList onDeckEdit={handleDeckEdit} />
+                </div>
+              </div>
+            );
+          case 'deck':
+            return <DeckManager />;
+          case 'edit-deck':
+            return selectedDeckId ? (
+              <DeckEditor 
+                deckId={selectedDeckId} 
+                onClose={() => {
+                  setSelectedDeckId(null);
+                  setCurrentPage('home');
+                }}
+              />
+            ) : null;
+          case 'collection':
+            return <Collection />;
+          case 'profile':
+            return <Profile />;
+          case 'search':
+            return <CardSearch />;
+          case 'life-counter':
+            return <LifeCounter />;
+          case 'login':
+            return <LoginForm />;
+          default:
+            return null;
+        }
+      };
+
+      return (
+        <div className="min-h-screen bg-gray-900">
+          <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
+          {renderPage()}
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <AuthProvider>
+          <AppContent />
+        </AuthProvider>
+      );
+    }
+
     export default App;

src/components/DeckCard.tsx

@@ -1,77 +1,77 @@
-import React from 'react';
-import { AlertTriangle, Check, Edit } from 'lucide-react';
-import { Deck } from '../types';
-import { validateDeck } from '../utils/deckValidation';
-
-interface DeckCardProps {
-  deck: Deck;
-  onEdit?: (deckId: string) => void;
-}
-
-export default function DeckCard({ deck, onEdit }: DeckCardProps) {
-
-  if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
-    console.log("deck", deck.name);
-    console.log("cardEntities", deck.cards);
-  }
-
-  const validation = validateDeck(deck);
-  const commander = deck.format === 'commander' ? deck.cards.find(card => 
-    card.is_commander
-  )?.card : null;
-
-  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"
-      onClick={() => onEdit?.(deck.id)}
-    >
-      <div className="relative h-48 overflow-hidden">
-        <img
-          src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
-          alt={commander?.name || deck.cards[0]?.card.name}
-          className="w-full object-cover object-top transform translate-y-[-12%]"
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
-      </div>
-      
-      <div className="p-4">
-        <div className="flex items-center justify-between mb-2">
-          <h3 className="text-xl font-bold text-white">{deck.name}</h3>
-          {validation.isValid ? (
-            <div className="flex items-center text-green-400">
-              <Check size={16} className="mr-1" />
-              <span className="text-sm">Legal</span>
-            </div>
-          ) : (
-            <div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}>
-              <AlertTriangle size={16} className="mr-1" />
-              <span className="text-sm">Issues</span>
-            </div>
-          )}
-        </div>
-        
-        <div className="flex items-center justify-between text-sm text-gray-400">
-          <span className="capitalize">{deck.format}</span>
-          <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
-        </div>
-        
-        {commander && (
-          <div className="mt-2 text-sm text-gray-300">
-            <span className="text-blue-400">Commander:</span> {commander.name}
-          </div>
-        )}
-
-        <button
-          onClick={(e) => {
-            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"
-        >
-          <Edit size={20} />
-          Edit Deck
-        </button>
-      </div>
-    </div>
-  );
+import React from 'react';
+import { AlertTriangle, Check, Edit } from 'lucide-react';
+import { Deck } from '../types';
+import { validateDeck } from '../utils/deckValidation';
+
+interface DeckCardProps {
+  deck: Deck;
+  onEdit?: (deckId: string) => void;
+}
+
+export default function DeckCard({ deck, onEdit }: DeckCardProps) {
+
+  if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
+    console.log("deck", deck.name);
+    console.log("cardEntities", deck.cards);
+  }
+
+  const validation = validateDeck(deck);
+  const commander = deck.format === 'commander' ? deck.cards.find(card => 
+    card.is_commander
+  )?.card : null;
+
+  return (
+    <div
+      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">
+        <img
+          src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
+          alt={commander?.name || deck.cards[0]?.card.name}
+          className="w-full object-cover object-top transform translate-y-[-12%]"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
+      </div>
+      
+      <div className="p-4">
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-xl font-bold text-white">{deck.name}</h3>
+          {validation.isValid ? (
+            <div className="flex items-center text-green-400">
+              <Check size={16} className="mr-1" />
+              <span className="text-sm">Legal</span>
+            </div>
+          ) : (
+            <div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}>
+              <AlertTriangle size={16} className="mr-1" />
+              <span className="text-sm">Issues</span>
+            </div>
+          )}
+        </div>
+        
+        <div className="flex items-center justify-between text-sm text-gray-400">
+          <span className="capitalize">{deck.format}</span>
+          <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
+        </div>
+        
+        {commander && (
+          <div className="mt-2 text-sm text-gray-300">
+            <span className="text-blue-400">Commander:</span> {commander.name}
+          </div>
+        )}
+
+        <button
+          onClick={(e) => {
+            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 btn-ripple transition-smooth glow-on-hover"
+        >
+          <Edit size={20} />
+          Edit Deck
+        </button>
+      </div>
+    </div>
+  );
 }

src/components/DeckList.tsx

@@ -1,99 +1,99 @@
-import React, { useEffect, useState } from 'react';
-import { getCardById, getCardsByIds } from '../services/api';
-import { Deck } from '../types';
-import { supabase } from "../lib/supabase";
-import DeckCard from "./DeckCard";
-
-interface DeckListProps {
-  onDeckEdit?: (deckId: string) => void;
-}
-
-const DeckList = ({ onDeckEdit }: DeckListProps) => {
-  const [decks, setDecks] = useState<Deck[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchDecks = async () => {
-      const { data: decksData, error: decksError } = await supabase.from('decks').select('*');
-      if (decksError) {
-        console.error('Error fetching decks:', decksError);
-        setLoading(false);
-        return;
-      }
-
-      const decksWithCards = await Promise.all(decksData.map(async (deck) => {
-        const { data: cardEntities, error: cardsError } = await supabase
-          .from('deck_cards')
-          .select('*')
-          .eq('deck_id', deck.id);
-
-
-
-        if (cardsError) {
-          console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
-          return { ...deck, cards: [] };
-        }
-
-        const cardIds = cardEntities.map((entity) => entity.card_id);
-        const uniqueCardIds = [...new Set(cardIds)];
-
-        if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
-          console.log("uniqueCardIds", uniqueCardIds);
-        }
-
-
-
-        try {
-          const scryfallCards = await getCardsByIds(uniqueCardIds);
-
-          if (!scryfallCards) {
-            console.error("scryfallCards is undefined after getCardsByIds");
-            return { ...deck, cards: [] };
-          }
-
-          const cards = cardEntities.map((entity) => {
-            const card = scryfallCards.find((c) => c.id === entity.card_id);
-            return {
-              card,
-              quantity: entity.quantity,
-              is_commander: entity.is_commander,
-            };
-          });
-
-          return {
-            ...deck,
-            cards,
-            createdAt: new Date(deck.created_at),
-            updatedAt: new Date(deck.updated_at),
-          };
-        } catch (error) {
-          console.error("Error fetching cards from Scryfall:", error);
-          return { ...deck, cards: [] };
-        }
-      }));
-
-      setDecks(decksWithCards);
-      setLoading(false);
-    };
-
-    fetchDecks();
-  }, []);
-
-  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>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {decks.map((deck) => (
-        <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
-      ))}
-    </div>
-  );
-};
-
+import React, { useEffect, useState } from 'react';
+import { getCardById, getCardsByIds } from '../services/api';
+import { Deck } from '../types';
+import { supabase } from "../lib/supabase";
+import DeckCard from "./DeckCard";
+
+interface DeckListProps {
+  onDeckEdit?: (deckId: string) => void;
+}
+
+const DeckList = ({ onDeckEdit }: DeckListProps) => {
+  const [decks, setDecks] = useState<Deck[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchDecks = async () => {
+      const { data: decksData, error: decksError } = await supabase.from('decks').select('*');
+      if (decksError) {
+        console.error('Error fetching decks:', decksError);
+        setLoading(false);
+        return;
+      }
+
+      const decksWithCards = await Promise.all(decksData.map(async (deck) => {
+        const { data: cardEntities, error: cardsError } = await supabase
+          .from('deck_cards')
+          .select('*')
+          .eq('deck_id', deck.id);
+
+
+
+        if (cardsError) {
+          console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
+          return { ...deck, cards: [] };
+        }
+
+        const cardIds = cardEntities.map((entity) => entity.card_id);
+        const uniqueCardIds = [...new Set(cardIds)];
+
+        if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
+          console.log("uniqueCardIds", uniqueCardIds);
+        }
+
+
+
+        try {
+          const scryfallCards = await getCardsByIds(uniqueCardIds);
+
+          if (!scryfallCards) {
+            console.error("scryfallCards is undefined after getCardsByIds");
+            return { ...deck, cards: [] };
+          }
+
+          const cards = cardEntities.map((entity) => {
+            const card = scryfallCards.find((c) => c.id === entity.card_id);
+            return {
+              card,
+              quantity: entity.quantity,
+              is_commander: entity.is_commander,
+            };
+          });
+
+          return {
+            ...deck,
+            cards,
+            createdAt: new Date(deck.created_at),
+            updatedAt: new Date(deck.updated_at),
+          };
+        } catch (error) {
+          console.error("Error fetching cards from Scryfall:", error);
+          return { ...deck, cards: [] };
+        }
+      }));
+
+      setDecks(decksWithCards);
+      setLoading(false);
+    };
+
+    fetchDecks();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="loading-spinner h-32 w-32"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {decks.map((deck) => (
+        <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
+      ))}
+    </div>
+  );
+};
+
 export default DeckList;

src/components/LoginForm.tsx

@@ -1,147 +1,147 @@
-import { useState, useEffect } from 'react';
-    import { Mail, Lock, LogIn } from 'lucide-react';
-    import { useAuth } from '../contexts/AuthContext';
-    import { Card } from '../types';
-    import { getRandomCards } from '../services/api';
-
-    export default function LoginForm() {
-      const [email, setEmail] = useState('');
-      const [password, setPassword] = useState('');
-      const [isSignUp, setIsSignUp] = useState(false);
-      const [error, setError] = useState<string | null>(null);
-      const { signIn, signUp } = useAuth();
-      const [cards, setCards] = useState<Card[]>([]);
-      const [loading, setLoading] = useState(true);
-
-      useEffect(() => {
-        const loadCards = async () => {
-          try {
-            const randomCards = await getRandomCards(6);
-            setCards(randomCards);
-          } catch (error) {
-            console.error('Failed to load cards:', error);
-          } finally {
-            setLoading(false);
-          }
-        };
-
-        loadCards();
-      }, []);
-
-      const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError(null);
-
-        try {
-          if (isSignUp) {
-            await signUp(email, password);
-          } else {
-            await signIn(email, password);
-          }
-          window.location.href = '/'; // Redirect to home after successful login
-        } catch (error) {
-          setError(error instanceof Error ? error.message : 'An error occurred');
-        }
-      };
-
-      if (loading) {
-        return <div className="animate-pulse h-96 bg-gray-700/50 rounded-lg"></div>;
-      }
-
-      return (
-        <div className="relative min-h-screen flex items-center justify-center p-6 overflow-hidden">
-          {/* Animated Background */}
-          <div className="absolute inset-0 overflow-hidden">
-            <div 
-              className="flex animate-slide"
-              style={{
-                width: `${cards.length * 100}%`,
-                animation: 'slide 60s linear infinite'
-              }}
-            >
-              {[...cards, ...cards].map((card, index) => (
-                <div
-                  key={`${card.id}-${index}`}
-                  className="relative w-full h-screen"
-                  style={{
-                    width: `${100 / (cards.length * 2)}%`
-                  }}
-                >
-                  <div
-                    className="absolute inset-0 bg-cover bg-center transform transition-transform duration-1000"
-                    style={{
-                      backgroundImage: `url(${card.image_uris?.normal})`,
-                      filter: 'blur(8px) brightness(0.4)',
-                    }}
-                  />
-                </div>
-              ))}
-            </div>
-          </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">
-            <h2 className="text-3xl font-bold text-orange-500 mb-6 text-center">
-              Deckerr
-            </h2>
-            
-            {error && (
-              <div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500">
-                {error}
-              </div>
-            )}
-            
-            <form onSubmit={handleSubmit} className="space-y-6">
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  Email
-                </label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-                  <input
-                    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"
-                    placeholder="Enter your email"
-                    required
-                  />
-                </div>
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  Password
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-                  <input
-                    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"
-                    placeholder="Enter your password"
-                    required
-                  />
-                </div>
-              </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"
-              >
-                <LogIn size={20} />
-                {isSignUp ? 'Sign Up' : 'Sign In'}
-              </button>
-            </form>
-
-            <div className="mt-4 text-center">
-              <button
-                onClick={() => setIsSignUp(!isSignUp)}
-                className="text-blue-400 hover:text-blue-300"
-              >
-                {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
-              </button>
-            </div>
-          </div>
-        </div>
-      );
+import { useState, useEffect } from 'react';
+    import { Mail, Lock, LogIn } from 'lucide-react';
+    import { useAuth } from '../contexts/AuthContext';
+    import { Card } from '../types';
+    import { getRandomCards } from '../services/api';
+
+    export default function LoginForm() {
+      const [email, setEmail] = useState('');
+      const [password, setPassword] = useState('');
+      const [isSignUp, setIsSignUp] = useState(false);
+      const [error, setError] = useState<string | null>(null);
+      const { signIn, signUp } = useAuth();
+      const [cards, setCards] = useState<Card[]>([]);
+      const [loading, setLoading] = useState(true);
+
+      useEffect(() => {
+        const loadCards = async () => {
+          try {
+            const randomCards = await getRandomCards(6);
+            setCards(randomCards);
+          } catch (error) {
+            console.error('Failed to load cards:', error);
+          } finally {
+            setLoading(false);
+          }
+        };
+
+        loadCards();
+      }, []);
+
+      const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        try {
+          if (isSignUp) {
+            await signUp(email, password);
+          } else {
+            await signIn(email, password);
+          }
+          window.location.href = '/'; // Redirect to home after successful login
+        } catch (error) {
+          setError(error instanceof Error ? error.message : 'An error occurred');
+        }
+      };
+
+      if (loading) {
+        return <div className="animate-pulse h-96 bg-gray-700/50 rounded-lg"></div>;
+      }
+
+      return (
+        <div className="relative min-h-screen flex items-center justify-center p-6 overflow-hidden">
+          {/* Animated Background */}
+          <div className="absolute inset-0 overflow-hidden">
+            <div 
+              className="flex animate-slide"
+              style={{
+                width: `${cards.length * 100}%`,
+                animation: 'slide 60s linear infinite'
+              }}
+            >
+              {[...cards, ...cards].map((card, index) => (
+                <div
+                  key={`${card.id}-${index}`}
+                  className="relative w-full h-screen"
+                  style={{
+                    width: `${100 / (cards.length * 2)}%`
+                  }}
+                >
+                  <div
+                    className="absolute inset-0 bg-cover bg-center transform transition-transform duration-1000"
+                    style={{
+                      backgroundImage: `url(${card.image_uris?.normal})`,
+                      filter: 'blur(8px) brightness(0.4)',
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          </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 glass-effect animate-scale-in">
+            <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 animate-fade-in">
+                {error}
+              </div>
+            )}
+            
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-2">
+                  Email
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+                  <input
+                    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 transition-smooth"
+                    placeholder="Enter your email"
+                    required
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-2">
+                  Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+                  <input
+                    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 transition-smooth"
+                    placeholder="Enter your password"
+                    required
+                  />
+                </div>
+              </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 btn-ripple glow-on-hover transition-smooth"
+              >
+                <LogIn size={20} />
+                {isSignUp ? 'Sign Up' : 'Sign In'}
+              </button>
+            </form>
+
+            <div className="mt-4 text-center">
+              <button
+                onClick={() => setIsSignUp(!isSignUp)}
+                className="text-blue-400 hover:text-blue-300 transition-smooth"
+              >
+                {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
+              </button>
+            </div>
+          </div>
+        </div>
+      );
     }

src/components/MagicCard.tsx

@@ -1,31 +1,31 @@
-import React from 'react';
-import { Card } from '../types';
-
-interface MagicCardProps {
-  card: Card;
-}
-
-const MagicCard = ({ card }: MagicCardProps) => {
-  return (
-    <div className="relative">
-      {card.image_uris?.normal ? (
-        <img
-          src={card.image_uris.normal}
-          alt={card.name}
-          className="w-full h-auto rounded-lg"
-        />
-      ) : (
-        <div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400">
-          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">
-          ${card.prices.usd}
-        </div>
-      )}
-    </div>
-  );
-};
-
+import React from 'react';
+import { Card } from '../types';
+
+interface MagicCardProps {
+  card: Card;
+}
+
+const MagicCard = ({ card }: MagicCardProps) => {
+  return (
+    <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 transition-smooth"
+        />
+      ) : (
+        <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 transition-smooth">
+          ${card.prices.usd}
+        </div>
+      )}
+    </div>
+  );
+};
+
 export default MagicCard;

src/components/Navigation.tsx

@@ -1,199 +1,199 @@
-import React, { useState, useRef, useEffect } from 'react';
-    import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search, Heart, Menu } from 'lucide-react';
-    import { useAuth } from '../contexts/AuthContext';
-    import { supabase } from '../lib/supabase';
-
-    type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter';
-
-    interface NavigationProps {
-      currentPage: Page;
-      setCurrentPage: (page: Page) => void;
-    }
-
-    export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
-      const { user, signOut } = useAuth();
-      const [showDropdown, setShowDropdown] = useState(false);
-      const [showMobileMenu, setShowMobileMenu] = useState(false);
-      const dropdownRef = useRef<HTMLDivElement>(null);
-      const mobileMenuRef = useRef<HTMLDivElement>(null);
-      const [username, setUsername] = useState<string | null>(null);
-
-      useEffect(() => {
-        const fetchProfile = async () => {
-          if (user) {
-            const { data } = await supabase
-              .from('profiles')
-              .select('username')
-              .eq('id', user.id)
-              .single();
-            
-            if (data) {
-              setUsername(data.username);
-            }
-          }
-        };
-
-        fetchProfile();
-      }, [user]);
-
-      useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-          if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-            setShowDropdown(false);
-          }
-          if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
-            setShowMobileMenu(false);
-          }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-      }, []);
-
-      const navItems = [
-        { id: 'home' as const, label: 'Home', icon: Home },
-        { id: 'deck' as const, label: 'New Deck', icon: PlusSquare },
-        { id: 'collection' as const, label: 'Collection', icon: Library },
-        { id: 'search' as const, label: 'Search', icon: Search },
-        { id: 'life-counter' as const, label: 'Life Counter', icon: Heart },
-      ];
-
-      const handleSignOut = async () => {
-        try {
-          await signOut();
-          setCurrentPage('login');
-        } catch (error) {
-          console.error('Error signing out:', error);
-        }
-      };
-
-      const getAvatarUrl = (userId: string) => {
-        return `https://api.dicebear.com/7.x/avataaars/svg?seed=${userId}&backgroundColor=b6e3f4,c0aede,d1d4f9`;
-      };
-
-      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">
-            <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>
-                  {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
-                        ${currentPage === item.id
-                          ? 'text-white bg-gray-900'
-                          : 'text-gray-300 hover:text-white hover:bg-gray-700'
-                        }`}
-                    >
-                      <item.icon size={20} />
-                      <span>{item.label}</span>
-                    </button>
-                  ))}
-                </div>
-
-                {user && (
-                  <div className="flex items-center space-x-4">
-                    <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"
-                      >
-                        <img
-                          src={getAvatarUrl(user.id)}
-                          alt="User avatar"
-                          className="w-8 h-8 rounded-full bg-gray-700"
-                        />
-                        <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">
-                          <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"
-                          >
-                            <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"
-                          >
-                            <LogOut size={16} />
-                            <span>Sign Out</span>
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </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">
-            <div className="flex justify-between items-center h-16 px-4">
-              <span className="text-2xl font-bold text-orange-500">Deckerr</span>
-              <div className="relative" ref={mobileMenuRef}>
-                <button
-                  onClick={() => setShowMobileMenu(!showMobileMenu)}
-                  className="text-gray-300 hover:text-white"
-                >
-                  <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">
-                    {navItems.map((item) => (
-                      <button
-                        key={item.id}
-                        onClick={() => {
-                          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"
-                      >
-                        <item.icon size={16} />
-                        <span>{item.label}</span>
-                      </button>
-                    ))}
-                    {user && (
-                      <>
-                        <button
-                          onClick={() => {
-                            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"
-                        >
-                          <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"
-                        >
-                          <LogOut size={16} />
-                          <span>Sign Out</span>
-                        </button>
-                      </>
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-          </nav>
-
-          {/* Content Padding */}
-          <div className="md:pt-16 pb-16 md:pb-0" />
-        </>
-      );
+import React, { useState, useRef, useEffect } from 'react';
+    import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search, Heart, Menu } from 'lucide-react';
+    import { useAuth } from '../contexts/AuthContext';
+    import { supabase } from '../lib/supabase';
+
+    type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter';
+
+    interface NavigationProps {
+      currentPage: Page;
+      setCurrentPage: (page: Page) => void;
+    }
+
+    export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
+      const { user, signOut } = useAuth();
+      const [showDropdown, setShowDropdown] = useState(false);
+      const [showMobileMenu, setShowMobileMenu] = useState(false);
+      const dropdownRef = useRef<HTMLDivElement>(null);
+      const mobileMenuRef = useRef<HTMLDivElement>(null);
+      const [username, setUsername] = useState<string | null>(null);
+
+      useEffect(() => {
+        const fetchProfile = async () => {
+          if (user) {
+            const { data } = await supabase
+              .from('profiles')
+              .select('username')
+              .eq('id', user.id)
+              .single();
+            
+            if (data) {
+              setUsername(data.username);
+            }
+          }
+        };
+
+        fetchProfile();
+      }, [user]);
+
+      useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+          if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+            setShowDropdown(false);
+          }
+          if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
+            setShowMobileMenu(false);
+          }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+      }, []);
+
+      const navItems = [
+        { id: 'home' as const, label: 'Home', icon: Home },
+        { id: 'deck' as const, label: 'New Deck', icon: PlusSquare },
+        { id: 'collection' as const, label: 'Collection', icon: Library },
+        { id: 'search' as const, label: 'Search', icon: Search },
+        { id: 'life-counter' as const, label: 'Life Counter', icon: Heart },
+      ];
+
+      const handleSignOut = async () => {
+        try {
+          await signOut();
+          setCurrentPage('login');
+        } catch (error) {
+          console.error('Error signing out:', error);
+        }
+      };
+
+      const getAvatarUrl = (userId: string) => {
+        return `https://api.dicebear.com/7.x/avataaars/svg?seed=${userId}&backgroundColor=b6e3f4,c0aede,d1d4f9`;
+      };
+
+      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 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 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-smooth
+                        ${currentPage === item.id
+                          ? 'text-white bg-gray-900 animate-pulse-glow'
+                          : 'text-gray-300 hover:text-white hover:bg-gray-700'
+                        }`}
+                    >
+                      <item.icon size={20} />
+                      <span>{item.label}</span>
+                    </button>
+                  ))}
+                </div>
+
+                {user && (
+                  <div className="flex items-center space-x-4">
+                    <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 transition-smooth"
+                      >
+                        <img
+                          src={getAvatarUrl(user.id)}
+                          alt="User avatar"
+                          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 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 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 transition-smooth"
+                          >
+                            <LogOut size={16} />
+                            <span>Sign Out</span>
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </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 animate-slide-in-right">
+            <div className="flex justify-between items-center h-16 px-4">
+              <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
+              <div className="relative" ref={mobileMenuRef}>
+                <button
+                  onClick={() => setShowMobileMenu(!showMobileMenu)}
+                  className="text-gray-300 hover:text-white"
+                >
+                  <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 animate-scale-in glass-effect">
+                    {navItems.map((item) => (
+                      <button
+                        key={item.id}
+                        onClick={() => {
+                          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 transition-smooth"
+                      >
+                        <item.icon size={16} />
+                        <span>{item.label}</span>
+                      </button>
+                    ))}
+                    {user && (
+                      <>
+                        <button
+                          onClick={() => {
+                            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 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 transition-smooth"
+                        >
+                          <LogOut size={16} />
+                          <span>Sign Out</span>
+                        </button>
+                      </>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </nav>
+
+          {/* Content Padding */}
+          <div className="md:pt-16 pb-16 md:pb-0" />
+        </>
+      );
     }

src/index.css

@@ -1,16 +1,297 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@keyframes slide {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}
-
-.animate-slide {
-  animation: slide 60s linear infinite;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Existing slide animation */
+@keyframes slide {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.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;
 }