Upload pages/index.js with huggingface_hub

pages/index.js

@@ -40,11 +40,9 @@ export default function Home() {
   const [stats, setStats] = useState(null);
   const [projects, setProjects] = useState([]);
 
-  // Fetch initial data
   useEffect(() => {
     const fetchData = async () => {
       try {
-        // Simulate API delay
         await new Promise(resolve => setTimeout(resolve, 1000));
         
         const statsRes = await fetch('/api/stats');
@@ -66,7 +64,6 @@ export default function Home() {
 
   return (
     <div className={`min-h-screen flex ${darkMode ? 'dark' : ''}`}>
-      {/* Mobile Sidebar Overlay */}
       {sidebarOpen && (
         <div 
           className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
@@ -74,27 +71,22 @@ export default function Home() {
         ></div>
       )}
 
-      {/* Sidebar */}
       <Sidebar 
         isOpen={sidebarOpen} 
         onClose={() => setSidebarOpen(false)} 
       />
 
-      {/* Main Content */}
       <div className="flex-1 flex flex-col lg:pl-64 transition-all duration-300">
-        {/* Top Header */}
         <Header 
           onMenuClick={() => setSidebarOpen(true)} 
           onThemeToggle={toggleTheme}
           isDark={darkMode}
         />
 
-        {/* Main Page Content */}
-        <main className="flex-1 p-4 lg:p-8 overflow-y-auto">
-          <div className="max-w-7xl mx-auto space-y-8">
+        <main className="flex-1 p-4 lg:p-8 overflow-y-auto bg-gray-50 dark:bg-dark-bg">
+          <div className="max-w-7xl mx-auto space-y-8 animate-fade-in">
             
-            {/* Welcome Section */}
-            <div className="flex flex-col md:flex-row md:items-center md:justify-between">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between animate-slide-up">
               <div>
                 <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
                   Dashboard Overview
@@ -115,7 +107,6 @@ export default function Home() {
               </div>
             </div>
 
-            {/* Stats Grid */}
             {loading ? (
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                 {[1, 2, 3, 4].map((i) => (
@@ -123,7 +114,7 @@ export default function Home() {
                 ))}
               </div>
             ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 animate-slide-up" style={{animationDelay: '0.1s'}}>
                 <StatCard 
                   title="Total Revenue" 
                   value={stats?.revenue} 
@@ -155,8 +146,7 @@ export default function Home() {
               </div>
             )}
 
-            {/* Charts Section */}
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-slide-up" style={{animationDelay: '0.2s'}}>
               <div className="lg:col-span-2 card">
                 <div className="flex items-center justify-between mb-6">
                   <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -183,8 +173,7 @@ export default function Home() {
               </div>
             </div>
 
-            {/* Projects and Activity Section */}
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-slide-up" style={{animationDelay: '0.3s'}}>
               <div className="lg:col-span-2 card">
                 <div className="flex items-center justify-between mb-6">
                   <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -205,8 +194,7 @@ export default function Home() {
               </div>
             </div>
 
-            {/* Task Board Preview */}
-            <div className="card">
+            <div className="card animate-slide-up" style={{animationDelay: '0.4s'}}>
               <div className="flex items-center justify-between mb-6">
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                   Sprint Task Board