import React, { useContext, useState } from 'react';

import { Link, useNavigate } from 'react-router-dom';
import { UserContext } from '../context/User';
import {
Button,
Container,
Icon,
Menu,
Segment,
} from 'semantic-ui-react';
import {
API,
getLogo,
getSystemName,
isAdmin,
isMobile,
showSuccess,
} from '../helpers';
import '../index.css';

// Header Buttons
let headerButtons = [
{
name: 'Channel',
to: '/channel',
icon: 'sitemap',
admin: true,
},
{
name: 'Token',
to: '/token',
icon: 'key',
},
{
name: 'Redemption',
to: '/redemption',
icon: 'dollar sign',
admin: true,
},
{
name: 'Topup',
to: '/topup',
icon: 'cart',
},
{
name: 'Users',
to: '/user',
icon: 'user',
admin: true,
},
{
name: 'Dashboard',
to: '/dashboard',
icon: 'chart bar',
},
{
name: 'Logs',
to: '/log',
icon: 'book',
},
{
name: 'Settings',
to: '/setting',
icon: 'setting',
},
{
name: 'Docs',
external: 'https://doc.llmx.in',
icon: 'file alternate outline',
},
];

if (localStorage.getItem('chat_link')) {
headerButtons.splice(1, 0, {
name: 'Chat',
to: '/chat',
icon: 'comments',
});
}

const Header = () => {
const [userState, userDispatch] = useContext(UserContext);
const navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState(false);
const systemName = getSystemName();
const logo = getLogo();

async function logout() {
setShowSidebar(false);
await API.get('/api/user/logout');
showSuccess('Logout successful!');
userDispatch({ type: 'logout' });
localStorage.removeItem('user');
navigate('/login');
}

const toggleSidebar = () => setShowSidebar(!showSidebar);
const goHome = () => (window.location.href = 'https://llmx.in');

const renderButtons = (isMobile) =>
headerButtons.map((button) => {
if (button.admin && !isAdmin()) return null;
if (button.external) {
return (
<Menu.Item
key={button.name}
onClick={() => window.open(button.external, '_blank')}
style={{
fontSize: '15px',
fontWeight: '400',
color: '#555',
cursor: 'pointer',
}}
>
<Icon name={button.icon} style={{ marginRight: '4px' }} />
{button.name}
</Menu.Item>
);
}

if (isMobile) {
return (
<Menu.Item
key={button.name}
onClick={() => {
navigate(button.to);
setShowSidebar(false);
}}
style={{ fontSize: '15px' }}
>
<Icon name={button.icon} style={{ marginRight: '4px' }} />
{button.name}
</Menu.Item>
);
}

return (
<Menu.Item
key={button.name}
as={Link}
to={button.to}
style={{
fontSize: '15px',
fontWeight: '400',
color: '#555',
}}
>
<Icon name={button.icon} style={{ marginRight: '4px' }} />
{button.name}
</Menu.Item>
);
});

if (isMobile()) {
return (
<>
<Menu
borderless
size='large'
style={
showSidebar
? {
borderBottom: 'none',
marginBottom: '0',
borderTop: 'none',
height: '51px',
}
: { borderTop: 'none', height: '52px' }
}
>
<Container
style={{
width: '100%',
maxWidth: isMobile() ? '100%' : '1200px',
padding: isMobile() ? '0 10px' : '0 20px',
}}
>
<Menu.Item onClick={goHome} style={{ cursor: 'pointer' }}>
<img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
<div style={{ fontSize: '20px' }}>
<b>{systemName}</b>
</div>
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item onClick={toggleSidebar}>
<Icon name={showSidebar ? 'close' : 'sidebar'} />
</Menu.Item>
</Menu.Menu>
</Container>
</Menu>
{showSidebar ? (
<Segment style={{ marginTop: 0, borderTop: '0' }}>
<Menu secondary vertical style={{ width: '100%', margin: 0 }}>
{renderButtons(true)}
<Menu.Item>
{userState.user ? (
<Button onClick={logout} style={{ color: '#666666' }}>
Logout
</Button>
) : (
<>
<Button
onClick={() => {
setShowSidebar(false);
navigate('/login');
}}
>
Login
</Button>
<Button
onClick={() => {
setShowSidebar(false);
navigate('/register');
}}
>
Register
</Button>
</>
)}
</Menu.Item>
</Menu>
</Segment>
) : null}
</>
);
}

return (
<>
<Menu
borderless
style={{
borderTop: 'none',
boxShadow: 'rgba(0, 0, 0, 0.04) 0px 2px 12px 0px',
border: 'none',
}}
>
<Container
style={{
width: '100%',
maxWidth: isMobile() ? '100%' : '1200px',
padding: isMobile() ? '0 10px' : '0 20px',
}}
>
<Menu.Item onClick={goHome} style={{ cursor: 'pointer' }}>
<img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
<div
style={{
fontSize: '18px',
fontWeight: '500',
color: '#333',
}}
>
{systemName}
</div>
</Menu.Item>
{renderButtons(false)}
<Menu.Menu position='right'>
{userState.user ? (
<Menu.Item
name='Logout'
onClick={logout}
style={{
fontSize: '15px',
fontWeight: '400',
color: '#666',
cursor: 'pointer',
}}
/>
) : (
<Menu.Item
name='Login'
as={Link}
to='/login'
className='btn btn-link'
style={{
fontSize: '15px',
fontWeight: '400',
color: '#666',
}}
/>
)}
</Menu.Menu>
</Container>
</Menu>
</>
);
};

export default Header;
inhence this ui and add some animtion backend same

components/footer.js

@@ -26,7 +26,6 @@ class CustomFooter extends HTMLElement {
           gap: 1.5rem;
           flex-wrap: wrap;
         }
-        
         .footer-link {
           color: #475569;
           text-decoration: none;
@@ -34,14 +33,18 @@ class CustomFooter extends HTMLElement {
           display: flex;
           align-items: center;
           gap: 0.5rem;
-          transition: color 0.2s ease;
+          transition: all 0.3s ease;
+          padding: 0.5rem 0.75rem;
+          border-radius: 8px;
+          position: relative;
+          overflow: hidden;
         }
         
         .footer-link:hover {
           color: #0ea5e9;
+          background: rgba(125, 211, 252, 0.1);
         }
-        
-        .copyright {
+.copyright {
           color: #64748b;
           font-size: 0.875rem;
         }

components/navbar.js

@@ -1,3 +1,4 @@
+
 class CustomNavbar extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
@@ -9,13 +10,13 @@ class CustomNavbar extends HTMLElement {
           height: 80px;
           width: 100%;
           overflow: hidden;
-          z-index: 10;
+          z-index: 50;
         }
         
         nav {
-          background: rgba(255, 255, 255, 0.9);
-          backdrop-filter: blur(10px);
-          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
+          background: rgba(255, 255, 255, 0.95);
+          backdrop-filter: blur(20px);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
           padding: 0 2rem;
           height: 80px;
           display: flex;
@@ -23,16 +24,26 @@ class CustomNavbar extends HTMLElement {
           align-items: center;
           position: relative;
           z-index: 2;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
         }
         
         .logo-container {
           display: flex;
           align-items: center;
           gap: 0.75rem;
+          cursor: pointer;
+          transition: all 0.3s ease;
+        }
+        
+        .logo-container:hover {
+          transform: scale(1.05);
         }
         
         .logo {
-          color: #0ea5e9;
+          background: linear-gradient(90deg, #7dd3fc 0%, #4ade80 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
           font-weight: 700;
           font-size: 1.5rem;
           letter-spacing: -0.5px;
@@ -41,6 +52,13 @@ class CustomNavbar extends HTMLElement {
         .logo-img {
           height: 2.5rem;
           width: auto;
+          border-radius: 12px;
+          box-shadow: 0 4px 15px rgba(125, 211, 252, 0.3);
+          transition: all 0.3s ease;
+        }
+        
+        .logo-img:hover {
+          transform: rotate(5deg) scale(1.1);
         }
         
         .nav-links {
@@ -59,27 +77,32 @@ class CustomNavbar extends HTMLElement {
           display: flex;
           align-items: center;
           gap: 0.5rem;
-          padding: 0.5rem 0;
+          padding: 0.5rem 0.75rem;
+          border-radius: 8px;
           position: relative;
+          overflow: hidden;
+          transition: all 0.3s ease;
         }
         
         .nav-link:hover {
           color: #0ea5e9;
+          background: rgba(125, 211, 252, 0.1);
+          transform: translateY(-2px);
         }
         
-        .nav-link::after {
+        .nav-link::before {
           content: '';
           position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 0;
-          height: 2px;
-          background: linear-gradient(90deg, #7dd3fc 0%, #4ade80 100%);
-          transition: width 0.3s ease;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.2), transparent);
+          transition: left 0.5s ease;
         }
         
-        .nav-link:hover::after {
-          width: 100%;
+        .nav-link:hover::before {
+          left: 100%;
         }
         
         .nav-actions {
@@ -93,26 +116,48 @@ class CustomNavbar extends HTMLElement {
           color: white;
           border: none;
           padding: 0.5rem 1.25rem;
-          border-radius: 9999px;
+          border-radius: 12px;
           font-weight: 600;
           cursor: pointer;
-          transition: all 0.2s ease;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
         }
         
         .login-btn:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 4px 15px rgba(125, 211, 252, 0.3);
+          transform: translateY(-3px);
+          box-shadow: 0 8px 25px rgba(125, 211, 252, 0.4);
+        }
+        
+        .login-btn::after {
+          content: '';
+          position: absolute;
+          top: -50%;
+          left: -50%;
+          width: 200%;
+          height: 200%;
+          background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
+          transform: scale(0);
+          transition: transform 0.5s ease;
+        }
+        
+        .login-btn:hover::after {
+          transform: scale(1);
         }
         
         .logout-btn {
           color: #64748b;
           font-weight: 500;
           cursor: pointer;
-          transition: color 0.2s ease;
+          padding: 0.5rem 1rem;
+          border-radius: 8px;
+          transition: all 0.3s ease;
         }
         
         .logout-btn:hover {
           color: #ef4444;
+          background: rgba(239, 68, 68, 0.1);
+          transform: translateY(-2px);
         }
         
         .mobile-menu-btn {
@@ -121,23 +166,32 @@ class CustomNavbar extends HTMLElement {
           border: none;
           cursor: pointer;
           color: #334155;
+          padding: 0.5rem;
+          border-radius: 8px;
+          transition: all 0.3s ease;
+        }
+        
+        .mobile-menu-btn:hover {
+          background: rgba(125, 211, 252, 0.1);
         }
         
         .mobile-menu {
-          display: none;
-          position: absolute;
+          position: fixed;
           top: 80px;
           left: 0;
           right: 0;
-          background: white;
+          bottom: 0;
+          background: rgba(255, 255, 255, 0.98);
+          backdrop-filter: blur(20px);
           padding: 1rem;
-          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-          border-radius: 0 0 1rem 1rem;
-          z-index: 1;
+          z-index: 49;
+          transform: translateX(-100%);
+          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          overflow-y: auto;
         }
         
         .mobile-menu.open {
-          display: block;
+          transform: translateX(0);
         }
         
         .mobile-nav-links {
@@ -153,16 +207,47 @@ class CustomNavbar extends HTMLElement {
           color: #334155;
           text-decoration: none;
           font-weight: 500;
-          padding: 0.75rem 1rem;
-          border-radius: 0.5rem;
+          padding: 1rem;
+          border-radius: 12px;
           display: flex;
           align-items: center;
           gap: 0.75rem;
+          transition: all 0.3s ease;
         }
         
         .mobile-nav-link:hover {
-          background: #f1f5f9;
+          background: linear-gradient(90deg, rgba(125, 211, 252, 0.1) 0%, rgba(74, 222, 128, 0.1) 100%);
+          color: #0ea5e9;
+          transform: translateX(10px);
+        }
+        
+        .active {
+          background: linear-gradient(90deg, rgba(125, 211, 252, 0.15) 0%, rgba(74, 222, 128, 0.15) 100%);
           color: #0ea5e9;
+          font-weight: 600;
+        }
+        
+        .pulse-indicator {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          width: 8px;
+          height: 8px;
+          background: #4ade80;
+          border-radius: 50%;
+          animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+          0% {
+            box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
+          }
+          70% {
+            box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
+          }
+          100% {
+            box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
+          }
         }
         
         @media (max-width: 1024px) {
@@ -177,7 +262,7 @@ class CustomNavbar extends HTMLElement {
       </style>
       
       <nav>
-        <div class="logo-container">
+        <div class="logo-container" onclick="window.location.href='/'">
           <img src="http://static.photos/blue/200x200/42" alt="Logo" class="logo-img">
           <span class="logo">LightStream</span>
         </div>
@@ -206,7 +291,7 @@ class CustomNavbar extends HTMLElement {
         </div>
       </nav>
       
-      <div id="mobile-menu" class="mobile-menu hidden">
+      <div id="mobile-menu" class="mobile-menu">
         <ul class="mobile-nav-links">
           <li><a href="/channel" class="mobile-nav-link"><i data-feather="sitemap"></i> Channel</a></li>
           <li><a href="/token" class="mobile-nav-link"><i data-feather="key"></i> Token</a></li>
@@ -223,21 +308,88 @@ class CustomNavbar extends HTMLElement {
       <script>
         feather.replace();
         
+        // Add animation to logo on load
+        setTimeout(() => {
+          const logoImg = this.shadowRoot.querySelector('.logo-img');
+          const logoContainer = this.shadowRoot.querySelector('.logo-container');
+          
+          logoContainer.style.opacity = '1';
+          logoContainer.style.transform = 'translateY(0)';
+        }, 100);
+        
+        // Mobile menu functionality with smooth animations
         this.shadowRoot.getElementById('menu-button').addEventListener('click', () => {
           const menu = this.shadowRoot.getElementById('mobile-menu');
-          menu.classList.toggle('hidden');
+          const isOpen = menu.classList.contains('open');
+          
+          if (isOpen) {
+            menu.classList.remove('open');
+            menu.style.transform = 'translateX(-100%)';
+          const icon = this.shadowRoot.querySelector('#menu-button i');
+          icon.setAttribute('data-feather', 'menu');
+          feather.replace();
+          document.body.style.overflow = 'auto';
+          document.documentElement.style.overflow = 'auto';
+          document.body.style.height = 'auto';
+          document.documentElement.style.height = 'auto';
+          document.body.style.position = 'static';
+          document.documentElement.style.position = 'static';
+        } else {
+          menu.classList.add('open');
+          menu.style.transform = 'translateX(0)';
+          const icon = this.shadowRoot.querySelector('#menu-button i');
+          icon.setAttribute('data-feather', 'x');
+          feather.replace();
+          document.body.style.overflow = 'hidden';
+          document.documentElement.style.overflow = 'hidden';
+          document.body.style.height = '100vh';
+          document.documentElement.style.height = '100vh';
+          document.body.style.position = 'fixed';
+          document.documentElement.style.position = 'fixed';
+        }
+        });
+        
+        // Add hover effects to nav links
+        const navLinks = this.shadowRoot.querySelectorAll('.nav-link');
+        navLinks.forEach(link => {
+          link.addEventListener('mouseenter', () => {
+            link.style.transform = 'translateY(-2px)';
+          link.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1);
+          });
+          
+          link.addEventListener('mouseleave', () => {
+            link.style.transform = 'translateY(0)';
+            link.style.boxShadow = 'none';
+          });
+        });
+        
+        // Add active state based on current URL
+        const currentPath = window.location.pathname;
+        const allLinks = this.shadowRoot.querySelectorAll('.nav-link, .mobile-nav-link');
+        
+        allLinks.forEach(link => {
+          if (link.getAttribute('href') === currentPath) {
+            link.classList.add('active');
+          }
+        });
+        
+        // Add click outside to close mobile menu
+        document.addEventListener('click', (e) => {
+          const menu = this.shadowRoot.getElementById('mobile-menu');
+          const menuButton = this.shadowRoot.getElementById('menu-button');
           
+          if (menu && menuButton && !menu.contains(e.target) && !menuButton.contains(e.target)) {
+          menu.classList.remove('open');
+          menu.style.transform = 'translateX(-100%)';
           const icon = this.shadowRoot.querySelector('#menu-button i');
-          if (menu.classList.contains('hidden')) {
+          if (icon) {
             icon.setAttribute('data-feather', 'menu');
-          } else {
-            icon.setAttribute('data-feather', 'x');
+            feather.replace();
           }
-          feather.replace();
         });
       </script>
     `;
   }
 }
 
-customElements.define('custom-navbar', CustomNavbar);
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -12,13 +12,55 @@
 </head>
 <body class="bg-gradient-to-br from-blue-50 to-green-50 min-h-screen">
     <custom-navbar></custom-navbar>
-    
     <main class="container mx-auto px-4 py-8">
         <!-- Content will be loaded here by React -->
-        <div id="root" class="bg-white rounded-xl shadow-md p-6"></div>
+        <div id="root" class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 p-8 slide-up">
+          <div class="text-center mb-8 fade-in">
+            <h1 class="text-4xl font-bold gradient-text mb-4">Welcome to LightStream</h1>
+            <p class="text-gray-600 text-lg">Your AI-powered dashboard for seamless management</p>
+          </div>
+          
+          <!-- Feature Grid with Animations -->
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+            <div class="bg-gradient-to-br from-blue-50 to-green-50 rounded-xl p-6 border border-blue-100 hover-lift fade-in" style="animation-delay: 0.1s">
+              <div class="text-blue-500 mb-3">
+                <i data-feather="sitemap" class="w-8 h-8"></i>
+              </div>
+              <h3 class="text-xl font-semibold text-gray-800 mb-2">Channel Management</h3>
+              <p class="text-gray-600">Efficiently manage your communication channels</p>
+            </div>
+            
+            <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 border border-purple-100 hover-lift fade-in" style="animation-delay: 0.2s">
+              <div class="text-purple-500 mb-3">
+                <i data-feather="key" class="w-8 h-8"></i>
+            </div>
+            <h3 class="text-xl font-semibold text-gray-800 mb-2">Token System</h3>
+            <p class="text-gray-600">Secure and scalable token management</p>
+          </div>
+          
+          <div class="bg-gradient-to-br from-green-50 to-blue-50 rounded-xl p-6 border border-green-100 hover-lift fade-in" style="animation-delay: 0.3s">
+            <div class="text-green-500 mb-3">
+              <i data-feather="dollar-sign" class="w-8 h-8"></i>
+            </div>
+            <h3 class="text-xl font-semibold text-gray-800 mb-2">Redemption Center</h3>
+            <p class="text-gray-600">Streamline your redemption processes</p>
+            </div>
+          </div>
+          
+          <!-- Quick Stats -->
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+            <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-100 fade-in" style="animation-delay: 0.4s">
+            <div class="text-center">
+              <div class="text-2xl font-bold text-blue-600 mb-1">1,234</div>
+            <div class="text-sm text-gray-500">Active Users</div>
+          </div>
+          
+          <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-100 fade-in" style="animation-delay: 0.5s">Active Tokens</div>
+          <div class="text-sm text-gray-500">Total Revenue</div>
+        </div>
+      </div>
     </main>
-
-    <custom-footer></custom-footer>
+<custom-footer></custom-footer>
     
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>

script.js

@@ -1,3 +1,4 @@
+
 // Shared JavaScript across all pages
 console.log('LightStream Dashboard loaded');
 
@@ -20,4 +21,86 @@ document.addEventListener('click', (e) => {
     if (mobileMenu && !mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
         mobileMenu.classList.add('hidden');
     }
-});
+});
+
+// Add scroll animations
+function handleScrollAnimations() {
+    const elements = document.querySelectorAll('.fade-in, .slide-up, .bounce-in');
+    
+    elements.forEach(element => {
+        const elementTop = element.getBoundingClientRect().top;
+        const elementVisible = 150;
+        
+        if (elementTop < window.innerHeight - elementVisible) {
+            element.style.opacity = '1';
+            element.style.transform = 'translateY(0)';
+        }
+    });
+}
+
+// Initialize animations on load and scroll
+window.addEventListener('load', handleScrollAnimations);
+window.addEventListener('scroll', handleScrollAnimations);
+
+// Add typing animation effect
+function typeWriter(element, text, speed = 50) {
+    let i = 0;
+    element.innerHTML = '';
+    
+    function type() {
+        if (i < text.length) {
+            element.innerHTML += text.charAt(i);
+            i++;
+            setTimeout(type, speed);
+        }
+    }
+    
+    type();
+}
+
+// Add ripple effect to buttons
+function addRippleEffect() {
+    const buttons = document.querySelectorAll('.login-btn, .logout-btn');
+    
+    buttons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            const ripple = document.createElement('span');
+            const rect = button.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            
+            ripple.style.width = ripple.style.height = size + 'px';
+            ripple.style.left = x + 'px';
+            ripple.style.top = y + 'px';
+            ripple.style.position = 'absolute';
+            ripple.style.borderRadius = '50%';
+            ripple.style.background = 'rgba(255, 255, 255, 0.6);
+            ripple.style.transform = 'scale(0)';
+            ripple.style.transition = 'transform 0.6s ease, opacity 0.6s ease';
+            ripple.style.opacity = '1';
+            ripple.style.transform = 'scale(4)';
+            ripple.style.opacity = '0';
+            
+            button.style.position = 'relative';
+            button.style.overflow = 'hidden';
+            
+            button.appendChild(ripple);
+            
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        });
+    });
+}
+
+// Initialize effects when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    addRippleEffect();
+    
+    // Add staggered animation delays to grid items
+    const gridItems = document.querySelectorAll('.grid > div');
+    gridItems.forEach((item, index) => {
+        item.style.animationDelay = (index * 0.1) + 's';
+    });
+});

style.css

@@ -1,8 +1,10 @@
+
 /* Shared styles across all pages */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 body {
     font-family: 'Inter', sans-serif;
+    overflow-x: hidden;
 }
 
 /* Smooth transitions */
@@ -23,4 +25,92 @@ a, button {
 }
 ::-webkit-scrollbar-thumb:hover {
     background: #0ea5e9;
-}
+}
+
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.6s ease-in-out;
+}
+
+.slide-up {
+    animation: slideUp 0.8s ease-out;
+}
+
+.pulse-glow {
+    animation: pulseGlow 2s infinite;
+}
+
+.bounce-in {
+    animation: bounceIn 0.8s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pulseGlow {
+    0%, 100% {
+        box-shadow: 0 0 20px rgba(125, 211, 252, 0.3);
+    }
+    50% {
+        box-shadow: 0 0 30px rgba(125, 211, 252, 0.6);
+    }
+}
+
+@keyframes bounceIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.3);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.05);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Hover effects */
+.hover-lift {
+    transition: all 0.3s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* Glass morphism effect */
+.glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(90deg, #7dd3fc 0%, #4ade80 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}