From d669ee159ad544dd4b8580dcec81bedad93ffe51 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 8 Aug 2025 11:12:21 +0000
Subject: [PATCH] Prettier format pending files

---
 client/pages/DocsLayout.tsx         |  41 +++++---
 client/pages/Status.tsx             | 149 +++++++++++++++------------
 client/pages/Tutorials.tsx          | 151 ++++++++++++++++++----------
 client/pages/docs/DocsOverview.tsx  | 119 +++++++++++++++-------
 client/pages/docs/DocsTutorials.tsx | 139 ++++++++++++++++---------
 5 files changed, 386 insertions(+), 213 deletions(-)

diff --git a/client/pages/DocsLayout.tsx b/client/pages/DocsLayout.tsx
index fb5b5f7a..cb62e1c0 100644
--- a/client/pages/DocsLayout.tsx
+++ b/client/pages/DocsLayout.tsx
@@ -30,7 +30,7 @@ const navigation = [
   },
   {
     name: "Tutorials",
-    href: "/docs/tutorials", 
+    href: "/docs/tutorials",
     icon: Video,
     badge: "New",
   },
@@ -65,24 +65,27 @@ export default function DocsLayout() {
 
   const getBreadcrumb = () => {
     const path = location.pathname;
-    const segments = path.split('/').filter(Boolean);
-    
+    const segments = path.split("/").filter(Boolean);
+
     if (segments.length <= 1) return [];
-    
+
     const breadcrumbs = [];
-    let currentPath = '';
-    
+    let currentPath = "";
+
     segments.forEach((segment, index) => {
       currentPath += `/${segment}`;
-      if (index > 0) { // Skip the first 'docs' segment
+      if (index > 0) {
+        // Skip the first 'docs' segment
         breadcrumbs.push({
-          name: segment.charAt(0).toUpperCase() + segment.slice(1).replace('-', ' '),
+          name:
+            segment.charAt(0).toUpperCase() +
+            segment.slice(1).replace("-", " "),
           href: currentPath,
-          isLast: index === segments.length - 1
+          isLast: index === segments.length - 1,
         });
       }
     });
-    
+
     return breadcrumbs;
   };
 
@@ -107,7 +110,11 @@ export default function DocsLayout() {
                 onClick={() => setSidebarOpen(!sidebarOpen)}
                 className="lg:hidden p-2 text-white bg-slate-800 rounded-md"
               >
-                {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+                {sidebarOpen ? (
+                  <X className="h-5 w-5" />
+                ) : (
+                  <Menu className="h-5 w-5" />
+                )}
               </button>
             </div>
 
@@ -123,7 +130,7 @@ export default function DocsLayout() {
                     {crumb.isLast ? (
                       <span className="text-white">{crumb.name}</span>
                     ) : (
-                      <Link 
+                      <Link
                         to={crumb.href}
                         className="hover:text-white transition-colors"
                       >
@@ -149,21 +156,23 @@ export default function DocsLayout() {
 
           <div className="flex flex-col lg:flex-row gap-8">
             {/* Sidebar */}
-            <div className={`w-full lg:w-64 ${sidebarOpen ? 'block' : 'hidden lg:block'}`}>
+            <div
+              className={`w-full lg:w-64 ${sidebarOpen ? "block" : "hidden lg:block"}`}
+            >
               <div className="bg-slate-800/50 border border-slate-700 rounded-lg p-4 sticky top-4">
                 <nav className="space-y-2">
                   {navigation.map((item) => {
                     const Icon = item.icon;
                     const active = isActive(item.href, item.exact);
-                    
+
                     return (
                       <Link
                         key={item.name}
                         to={item.href}
                         className={`flex items-center justify-between px-3 py-2 rounded-md text-sm transition-all ${
                           active
-                            ? 'bg-purple-600 text-white'
-                            : 'text-gray-300 hover:bg-slate-700/50 hover:text-white'
+                            ? "bg-purple-600 text-white"
+                            : "text-gray-300 hover:bg-slate-700/50 hover:text-white"
                         }`}
                         onClick={() => setSidebarOpen(false)}
                       >
diff --git a/client/pages/Status.tsx b/client/pages/Status.tsx
index 2283b9ba..7ce8ca2e 100644
--- a/client/pages/Status.tsx
+++ b/client/pages/Status.tsx
@@ -1,6 +1,12 @@
 import { useState, useEffect } from "react";
 import Layout from "@/components/Layout";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,7 +26,7 @@ import {
 
 interface ServiceStatus {
   name: string;
-  status: 'operational' | 'degraded' | 'outage';
+  status: "operational" | "degraded" | "outage";
   responseTime: number;
   uptime: string;
   lastCheck: string;
@@ -31,7 +37,7 @@ interface SystemMetric {
   name: string;
   value: string;
   unit: string;
-  status: 'good' | 'warning' | 'critical';
+  status: "good" | "warning" | "critical";
   icon: any;
 }
 
@@ -39,44 +45,44 @@ export default function Status() {
   const [services, setServices] = useState<ServiceStatus[]>([
     {
       name: "AeThex Core API",
-      status: 'operational',
+      status: "operational",
       responseTime: 145,
       uptime: "99.98%",
       lastCheck: "30 seconds ago",
-      description: "Main application API and authentication services"
+      description: "Main application API and authentication services",
     },
     {
       name: "Database Services",
-      status: 'operational',
+      status: "operational",
       responseTime: 89,
       uptime: "99.99%",
       lastCheck: "1 minute ago",
-      description: "Supabase database and storage services"
+      description: "Supabase database and storage services",
     },
     {
       name: "CDN & Assets",
-      status: 'operational',
+      status: "operational",
       responseTime: 67,
       uptime: "99.95%",
       lastCheck: "45 seconds ago",
-      description: "Content delivery network and static assets"
+      description: "Content delivery network and static assets",
     },
     {
       name: "Authentication",
-      status: 'operational',
+      status: "operational",
       responseTime: 123,
       uptime: "99.97%",
       lastCheck: "2 minutes ago",
-      description: "OAuth and email authentication systems"
+      description: "OAuth and email authentication systems",
     },
     {
       name: "Project Management",
-      status: 'degraded',
+      status: "degraded",
       responseTime: 245,
       uptime: "98.84%",
       lastCheck: "3 minutes ago",
-      description: "Project creation and management features"
-    }
+      description: "Project creation and management features",
+    },
   ]);
 
   const [metrics, setMetrics] = useState<SystemMetric[]>([
@@ -84,30 +90,30 @@ export default function Status() {
       name: "Global Uptime",
       value: "99.96",
       unit: "%",
-      status: 'good',
-      icon: Activity
+      status: "good",
+      icon: Activity,
     },
     {
       name: "Response Time",
       value: "142",
       unit: "ms",
-      status: 'good',
-      icon: Zap
+      status: "good",
+      icon: Zap,
     },
     {
       name: "Active Users",
       value: "1,247",
       unit: "",
-      status: 'good',
-      icon: Globe
+      status: "good",
+      icon: Globe,
     },
     {
       name: "Error Rate",
       value: "0.04",
       unit: "%",
-      status: 'good',
-      icon: Shield
-    }
+      status: "good",
+      icon: Shield,
+    },
   ]);
 
   const [lastUpdated, setLastUpdated] = useState(new Date());
@@ -115,11 +121,11 @@ export default function Status() {
 
   const getStatusIcon = (status: string) => {
     switch (status) {
-      case 'operational':
+      case "operational":
         return <CheckCircle className="h-5 w-5 text-green-500" />;
-      case 'degraded':
+      case "degraded":
         return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
-      case 'outage':
+      case "outage":
         return <XCircle className="h-5 w-5 text-red-500" />;
       default:
         return <CheckCircle className="h-5 w-5 text-gray-400" />;
@@ -128,43 +134,43 @@ export default function Status() {
 
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'operational':
-        return 'bg-green-500';
-      case 'degraded':
-        return 'bg-yellow-500';
-      case 'outage':
-        return 'bg-red-500';
+      case "operational":
+        return "bg-green-500";
+      case "degraded":
+        return "bg-yellow-500";
+      case "outage":
+        return "bg-red-500";
       default:
-        return 'bg-gray-400';
+        return "bg-gray-400";
     }
   };
 
   const getMetricColor = (status: string) => {
     switch (status) {
-      case 'good':
-        return 'text-green-400';
-      case 'warning':
-        return 'text-yellow-400';
-      case 'critical':
-        return 'text-red-400';
+      case "good":
+        return "text-green-400";
+      case "warning":
+        return "text-yellow-400";
+      case "critical":
+        return "text-red-400";
       default:
-        return 'text-gray-400';
+        return "text-gray-400";
     }
   };
 
   const getOverallStatus = () => {
-    const hasOutage = services.some(s => s.status === 'outage');
-    const hasDegraded = services.some(s => s.status === 'degraded');
-    
-    if (hasOutage) return { status: 'outage', message: 'Service Disruption' };
-    if (hasDegraded) return { status: 'degraded', message: 'Partial Outage' };
-    return { status: 'operational', message: 'All Systems Operational' };
+    const hasOutage = services.some((s) => s.status === "outage");
+    const hasDegraded = services.some((s) => s.status === "degraded");
+
+    if (hasOutage) return { status: "outage", message: "Service Disruption" };
+    if (hasDegraded) return { status: "degraded", message: "Partial Outage" };
+    return { status: "operational", message: "All Systems Operational" };
   };
 
   const refreshStatus = async () => {
     setIsRefreshing(true);
     // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1000));
+    await new Promise((resolve) => setTimeout(resolve, 1000));
     setLastUpdated(new Date());
     setIsRefreshing(false);
   };
@@ -191,11 +197,13 @@ export default function Status() {
                 disabled={isRefreshing}
                 className="bg-purple-600 hover:bg-purple-700"
               >
-                <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
+                <RefreshCw
+                  className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`}
+                />
                 Refresh
               </Button>
             </div>
-            
+
             {/* Overall Status */}
             <Card className="bg-slate-800/50 border-slate-700">
               <CardContent className="p-6">
@@ -211,7 +219,7 @@ export default function Status() {
                       </p>
                     </div>
                   </div>
-                  <Badge 
+                  <Badge
                     className={`${getStatusColor(overall.status)} text-white border-0 px-3 py-1`}
                   >
                     {overall.status.toUpperCase()}
@@ -231,11 +239,16 @@ export default function Status() {
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="text-sm text-gray-400">{metric.name}</p>
-                        <p className={`text-2xl font-bold ${getMetricColor(metric.status)}`}>
-                          {metric.value}{metric.unit}
+                        <p
+                          className={`text-2xl font-bold ${getMetricColor(metric.status)}`}
+                        >
+                          {metric.value}
+                          {metric.unit}
                         </p>
                       </div>
-                      <Icon className={`h-8 w-8 ${getMetricColor(metric.status)}`} />
+                      <Icon
+                        className={`h-8 w-8 ${getMetricColor(metric.status)}`}
+                      />
                     </div>
                   </CardContent>
                 </Card>
@@ -257,28 +270,36 @@ export default function Status() {
             <CardContent>
               <div className="space-y-4">
                 {services.map((service, index) => (
-                  <div 
-                    key={index} 
+                  <div
+                    key={index}
                     className="flex items-center justify-between p-4 bg-slate-900/50 rounded-lg border border-slate-600"
                   >
                     <div className="flex items-center space-x-4">
                       {getStatusIcon(service.status)}
                       <div>
-                        <h4 className="text-white font-medium">{service.name}</h4>
-                        <p className="text-sm text-gray-400">{service.description}</p>
+                        <h4 className="text-white font-medium">
+                          {service.name}
+                        </h4>
+                        <p className="text-sm text-gray-400">
+                          {service.description}
+                        </p>
                       </div>
                     </div>
                     <div className="text-right">
                       <div className="flex items-center space-x-4">
                         <div>
                           <p className="text-sm text-gray-400">Response Time</p>
-                          <p className="text-white font-medium">{service.responseTime}ms</p>
+                          <p className="text-white font-medium">
+                            {service.responseTime}ms
+                          </p>
                         </div>
                         <div>
                           <p className="text-sm text-gray-400">Uptime</p>
-                          <p className="text-white font-medium">{service.uptime}</p>
+                          <p className="text-white font-medium">
+                            {service.uptime}
+                          </p>
                         </div>
-                        <Badge 
+                        <Badge
                           className={`${getStatusColor(service.status)} text-white border-0`}
                         >
                           {service.status}
@@ -311,14 +332,15 @@ export default function Status() {
                       Project Management Performance Restored
                     </p>
                     <p className="text-sm text-gray-400">
-                      Response times have returned to normal after brief degradation
+                      Response times have returned to normal after brief
+                      degradation
                     </p>
                     <p className="text-xs text-gray-500 mt-1">
                       2 hours ago • Resolved
                     </p>
                   </div>
                 </div>
-                
+
                 <div className="flex items-start space-x-3 p-3 bg-slate-900/50 rounded-lg border border-slate-600">
                   <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                   <div>
@@ -326,7 +348,8 @@ export default function Status() {
                       Scheduled Maintenance Completed
                     </p>
                     <p className="text-sm text-gray-400">
-                      Database optimization and security updates applied successfully
+                      Database optimization and security updates applied
+                      successfully
                     </p>
                     <p className="text-xs text-gray-500 mt-1">
                       1 day ago • Resolved
diff --git a/client/pages/Tutorials.tsx b/client/pages/Tutorials.tsx
index d416b969..bfc6aa9c 100644
--- a/client/pages/Tutorials.tsx
+++ b/client/pages/Tutorials.tsx
@@ -1,6 +1,12 @@
 import { useState } from "react";
 import Layout from "@/components/Layout";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -31,7 +37,7 @@ interface Tutorial {
   title: string;
   description: string;
   category: string;
-  difficulty: 'beginner' | 'intermediate' | 'advanced';
+  difficulty: "beginner" | "intermediate" | "advanced";
   duration: string;
   author: string;
   rating: number;
@@ -47,7 +53,8 @@ const tutorials: Tutorial[] = [
   {
     id: "1",
     title: "Getting Started with AeThex Platform",
-    description: "Complete beginner's guide to navigating and using the AeThex development platform",
+    description:
+      "Complete beginner's guide to navigating and using the AeThex development platform",
     category: "Platform",
     difficulty: "beginner",
     duration: "15 min",
@@ -56,13 +63,15 @@ const tutorials: Tutorial[] = [
     views: 2847,
     likes: 234,
     tags: ["getting-started", "platform", "basics"],
-    thumbnail: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400",
-    isNew: true
+    thumbnail:
+      "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400",
+    isNew: true,
   },
   {
-    id: "2", 
+    id: "2",
     title: "Building Your First Game with Unity & AeThex",
-    description: "Step-by-step tutorial for creating a 2D platformer game using Unity and AeThex tools",
+    description:
+      "Step-by-step tutorial for creating a 2D platformer game using Unity and AeThex tools",
     category: "Game Development",
     difficulty: "beginner",
     duration: "45 min",
@@ -71,12 +80,14 @@ const tutorials: Tutorial[] = [
     views: 1923,
     likes: 187,
     tags: ["unity", "2d", "platformer", "game-dev"],
-    thumbnail: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400"
+    thumbnail:
+      "https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400",
   },
   {
     id: "3",
     title: "Advanced AI Integration Patterns",
-    description: "Learn how to integrate advanced AI systems into your projects using AeThex AI tools",
+    description:
+      "Learn how to integrate advanced AI systems into your projects using AeThex AI tools",
     category: "AI/ML",
     difficulty: "advanced",
     duration: "60 min",
@@ -85,13 +96,15 @@ const tutorials: Tutorial[] = [
     views: 856,
     likes: 98,
     tags: ["ai", "machine-learning", "integration", "advanced"],
-    thumbnail: "https://images.unsplash.com/photo-1507146426996-ef05306b995a?w=400",
-    isPremium: true
+    thumbnail:
+      "https://images.unsplash.com/photo-1507146426996-ef05306b995a?w=400",
+    isPremium: true,
   },
   {
     id: "4",
     title: "Database Design Best Practices",
-    description: "Master database architecture and optimization for high-performance applications",
+    description:
+      "Master database architecture and optimization for high-performance applications",
     category: "Backend",
     difficulty: "intermediate",
     duration: "35 min",
@@ -100,12 +113,14 @@ const tutorials: Tutorial[] = [
     views: 1456,
     likes: 142,
     tags: ["database", "sql", "optimization", "backend"],
-    thumbnail: "https://images.unsplash.com/photo-1544383835-bda2bc66a55d?w=400"
+    thumbnail:
+      "https://images.unsplash.com/photo-1544383835-bda2bc66a55d?w=400",
   },
   {
     id: "5",
     title: "UI/UX Design for Games",
-    description: "Create compelling user interfaces and experiences for modern games",
+    description:
+      "Create compelling user interfaces and experiences for modern games",
     category: "Design",
     difficulty: "intermediate",
     duration: "40 min",
@@ -114,12 +129,14 @@ const tutorials: Tutorial[] = [
     views: 2134,
     likes: 203,
     tags: ["ui", "ux", "design", "games"],
-    thumbnail: "https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=400"
+    thumbnail:
+      "https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=400",
   },
   {
     id: "6",
     title: "Performance Optimization Techniques",
-    description: "Advanced strategies for optimizing application performance and reducing load times",
+    description:
+      "Advanced strategies for optimizing application performance and reducing load times",
     category: "Performance",
     difficulty: "advanced",
     duration: "50 min",
@@ -128,9 +145,10 @@ const tutorials: Tutorial[] = [
     views: 987,
     likes: 124,
     tags: ["performance", "optimization", "advanced"],
-    thumbnail: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400",
-    isNew: true
-  }
+    thumbnail:
+      "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400",
+    isNew: true,
+  },
 ];
 
 const categories = [
@@ -151,30 +169,45 @@ export default function Tutorials() {
 
   const getDifficultyColor = (difficulty: string) => {
     switch (difficulty) {
-      case 'beginner': return 'bg-green-500';
-      case 'intermediate': return 'bg-yellow-500';
-      case 'advanced': return 'bg-red-500';
-      default: return 'bg-gray-500';
+      case "beginner":
+        return "bg-green-500";
+      case "intermediate":
+        return "bg-yellow-500";
+      case "advanced":
+        return "bg-red-500";
+      default:
+        return "bg-gray-500";
     }
   };
 
   const getDifficultyTextColor = (difficulty: string) => {
     switch (difficulty) {
-      case 'beginner': return 'text-green-400';
-      case 'intermediate': return 'text-yellow-400';
-      case 'advanced': return 'text-red-400';
-      default: return 'text-gray-400';
+      case "beginner":
+        return "text-green-400";
+      case "intermediate":
+        return "text-yellow-400";
+      case "advanced":
+        return "text-red-400";
+      default:
+        return "text-gray-400";
     }
   };
 
-  const filteredTutorials = tutorials.filter(tutorial => {
-    const matchesSearch = tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         tutorial.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
-    const matchesCategory = selectedCategory === "all" || 
-                           tutorial.category.toLowerCase().replace(/[\/\s]/g, '-') === selectedCategory;
-    const matchesDifficulty = selectedDifficulty === "all" || tutorial.difficulty === selectedDifficulty;
-    
+  const filteredTutorials = tutorials.filter((tutorial) => {
+    const matchesSearch =
+      tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      tutorial.tags.some((tag) =>
+        tag.toLowerCase().includes(searchTerm.toLowerCase()),
+      );
+    const matchesCategory =
+      selectedCategory === "all" ||
+      tutorial.category.toLowerCase().replace(/[\/\s]/g, "-") ===
+        selectedCategory;
+    const matchesDifficulty =
+      selectedDifficulty === "all" ||
+      tutorial.difficulty === selectedDifficulty;
+
     return matchesSearch && matchesCategory && matchesDifficulty;
   });
 
@@ -188,9 +221,10 @@ export default function Tutorials() {
               AeThex Tutorials
             </h1>
             <p className="text-xl text-gray-300 mb-6">
-              Master cutting-edge development skills with our comprehensive tutorial library
+              Master cutting-edge development skills with our comprehensive
+              tutorial library
             </p>
-            
+
             {/* Search and Filters */}
             <div className="flex flex-col lg:flex-row gap-4 mb-6">
               <div className="flex-1">
@@ -247,13 +281,15 @@ export default function Tutorials() {
                         onClick={() => setSelectedCategory(category.id)}
                         className={`w-full flex items-center justify-between p-3 rounded-lg transition-all ${
                           selectedCategory === category.id
-                            ? 'bg-purple-600 text-white'
-                            : 'bg-slate-900/50 text-gray-300 hover:bg-slate-700/50'
+                            ? "bg-purple-600 text-white"
+                            : "bg-slate-900/50 text-gray-300 hover:bg-slate-700/50"
                         }`}
                       >
                         <div className="flex items-center space-x-3">
                           <Icon className="h-4 w-4" />
-                          <span className="text-sm font-medium">{category.name}</span>
+                          <span className="text-sm font-medium">
+                            {category.name}
+                          </span>
                         </div>
                         <Badge variant="outline" className="text-xs">
                           {category.count}
@@ -275,7 +311,10 @@ export default function Tutorials() {
 
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 {filteredTutorials.map((tutorial) => (
-                  <Card key={tutorial.id} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group">
+                  <Card
+                    key={tutorial.id}
+                    className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"
+                  >
                     <div className="relative">
                       <img
                         src={tutorial.thumbnail}
@@ -283,7 +322,10 @@ export default function Tutorials() {
                         className="w-full h-48 object-cover rounded-t-lg"
                       />
                       <div className="absolute inset-0 bg-black/40 rounded-t-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                        <Button size="lg" className="bg-purple-600 hover:bg-purple-700">
+                        <Button
+                          size="lg"
+                          className="bg-purple-600 hover:bg-purple-700"
+                        >
                           <Play className="h-5 w-5 mr-2" />
                           Start Tutorial
                         </Button>
@@ -299,25 +341,27 @@ export default function Tutorials() {
                         </Badge>
                       )}
                     </div>
-                    
+
                     <CardContent className="p-4">
                       <div className="flex items-center justify-between mb-2">
                         <Badge variant="outline" className="text-xs">
                           {tutorial.category}
                         </Badge>
-                        <Badge className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}>
+                        <Badge
+                          className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}
+                        >
                           {tutorial.difficulty}
                         </Badge>
                       </div>
-                      
+
                       <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors">
                         {tutorial.title}
                       </h3>
-                      
+
                       <p className="text-gray-400 text-sm mb-3 line-clamp-2">
                         {tutorial.description}
                       </p>
-                      
+
                       <div className="flex items-center justify-between text-xs text-gray-500 mb-3">
                         <div className="flex items-center space-x-3">
                           <div className="flex items-center">
@@ -330,7 +374,7 @@ export default function Tutorials() {
                           </div>
                         </div>
                       </div>
-                      
+
                       <div className="flex items-center justify-between">
                         <div className="flex items-center space-x-3 text-xs text-gray-500">
                           <div className="flex items-center">
@@ -348,10 +392,14 @@ export default function Tutorials() {
                         </div>
                         <ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-purple-400 transition-colors" />
                       </div>
-                      
+
                       <div className="flex flex-wrap gap-1 mt-3">
                         {tutorial.tags.slice(0, 3).map((tag) => (
-                          <Badge key={tag} variant="outline" className="text-xs">
+                          <Badge
+                            key={tag}
+                            variant="outline"
+                            className="text-xs"
+                          >
                             {tag}
                           </Badge>
                         ))}
@@ -369,7 +417,8 @@ export default function Tutorials() {
                       No tutorials found
                     </h3>
                     <p className="text-gray-400">
-                      Try adjusting your search terms or filters to find what you're looking for.
+                      Try adjusting your search terms or filters to find what
+                      you're looking for.
                     </p>
                   </CardContent>
                 </Card>
diff --git a/client/pages/docs/DocsOverview.tsx b/client/pages/docs/DocsOverview.tsx
index 4d4d0674..e22605ea 100644
--- a/client/pages/docs/DocsOverview.tsx
+++ b/client/pages/docs/DocsOverview.tsx
@@ -1,4 +1,10 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Link } from "react-router-dom";
@@ -26,16 +32,17 @@ const quickStartCards = [
     icon: Rocket,
     href: "/docs/getting-started",
     duration: "5 min read",
-    difficulty: "Beginner"
+    difficulty: "Beginner",
   },
   {
     title: "First Tutorial",
-    description: "Follow your first interactive tutorial to build something amazing",
+    description:
+      "Follow your first interactive tutorial to build something amazing",
     icon: Play,
     href: "/docs/tutorials",
     duration: "15 min",
     difficulty: "Beginner",
-    isNew: true
+    isNew: true,
   },
   {
     title: "API Integration",
@@ -43,7 +50,7 @@ const quickStartCards = [
     icon: Code,
     href: "/docs/api",
     duration: "10 min read",
-    difficulty: "Intermediate"
+    difficulty: "Intermediate",
   },
   {
     title: "CLI Tools",
@@ -51,8 +58,8 @@ const quickStartCards = [
     icon: Terminal,
     href: "/docs/cli",
     duration: "8 min read",
-    difficulty: "Intermediate"
-  }
+    difficulty: "Intermediate",
+  },
 ];
 
 const resourceSections = [
@@ -61,8 +68,13 @@ const resourceSections = [
     description: "Step-by-step tutorials and comprehensive guides",
     icon: Video,
     href: "/docs/tutorials",
-    items: ["Platform Quick Start", "Game Development", "AI Integration", "Performance Optimization"],
-    badge: "6 tutorials"
+    items: [
+      "Platform Quick Start",
+      "Game Development",
+      "AI Integration",
+      "Performance Optimization",
+    ],
+    badge: "6 tutorials",
   },
   {
     title: "API Reference",
@@ -70,16 +82,21 @@ const resourceSections = [
     icon: Code,
     href: "/docs/api",
     items: ["Authentication", "Project Management", "User APIs", "Webhooks"],
-    badge: "40+ endpoints"
+    badge: "40+ endpoints",
   },
   {
     title: "Examples",
     description: "Ready-to-use code examples and templates",
     icon: FileText,
     href: "/docs/examples",
-    items: ["React Components", "Game Templates", "API Integration", "Deployment Scripts"],
-    badge: "25+ examples"
-  }
+    items: [
+      "React Components",
+      "Game Templates",
+      "API Integration",
+      "Deployment Scripts",
+    ],
+    badge: "25+ examples",
+  },
 ];
 
 const featuredUpdates = [
@@ -88,20 +105,20 @@ const featuredUpdates = [
     description: "Learn how to integrate cutting-edge AI features",
     date: "2 days ago",
     type: "Tutorial",
-    isNew: true
+    isNew: true,
   },
   {
     title: "API v2.1 Documentation",
     description: "Updated API docs with new endpoints and features",
     date: "1 week ago",
-    type: "API"
+    type: "API",
   },
   {
     title: "Performance Best Practices",
     description: "New guide on optimizing application performance",
     date: "2 weeks ago",
-    type: "Guide"
-  }
+    type: "Guide",
+  },
 ];
 
 export default function DocsOverview() {
@@ -113,18 +130,28 @@ export default function DocsOverview() {
           Welcome to AeThex Documentation
         </h2>
         <p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
-          Everything you need to build, deploy, and scale amazing projects with AeThex. 
-          Get started with our guides, explore our APIs, and learn from comprehensive tutorials.
+          Everything you need to build, deploy, and scale amazing projects with
+          AeThex. Get started with our guides, explore our APIs, and learn from
+          comprehensive tutorials.
         </p>
-        
+
         <div className="flex flex-col sm:flex-row gap-4 justify-center">
-          <Button asChild size="lg" className="bg-purple-600 hover:bg-purple-700">
+          <Button
+            asChild
+            size="lg"
+            className="bg-purple-600 hover:bg-purple-700"
+          >
             <Link to="/docs/getting-started">
               <Rocket className="h-5 w-5 mr-2" />
               Get Started
             </Link>
           </Button>
-          <Button asChild variant="outline" size="lg" className="border-slate-600 text-white hover:bg-slate-800">
+          <Button
+            asChild
+            variant="outline"
+            size="lg"
+            className="border-slate-600 text-white hover:bg-slate-800"
+          >
             <Link to="/docs/tutorials">
               <Play className="h-5 w-5 mr-2" />
               Watch Tutorials
@@ -140,7 +167,10 @@ export default function DocsOverview() {
           {quickStartCards.map((card, index) => {
             const Icon = card.icon;
             return (
-              <Card key={index} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group">
+              <Card
+                key={index}
+                className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"
+              >
                 <Link to={card.href}>
                   <CardHeader className="pb-3">
                     <div className="flex items-center justify-between mb-2">
@@ -175,19 +205,22 @@ export default function DocsOverview() {
 
       {/* Resource Sections */}
       <div className="mb-12">
-        <h3 className="text-2xl font-bold text-white mb-6">Documentation Sections</h3>
+        <h3 className="text-2xl font-bold text-white mb-6">
+          Documentation Sections
+        </h3>
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           {resourceSections.map((section, index) => {
             const Icon = section.icon;
             return (
-              <Card key={index} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group">
+              <Card
+                key={index}
+                className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
+              >
                 <Link to={section.href}>
                   <CardHeader>
                     <div className="flex items-center justify-between mb-2">
                       <Icon className="h-8 w-8 text-purple-400" />
-                      <Badge variant="outline">
-                        {section.badge}
-                      </Badge>
+                      <Badge variant="outline">{section.badge}</Badge>
                     </div>
                     <CardTitle className="text-white group-hover:text-purple-400 transition-colors">
                       {section.title}
@@ -199,7 +232,10 @@ export default function DocsOverview() {
                   <CardContent>
                     <ul className="space-y-2 mb-4">
                       {section.items.map((item, itemIndex) => (
-                        <li key={itemIndex} className="text-sm text-gray-400 flex items-center">
+                        <li
+                          key={itemIndex}
+                          className="text-sm text-gray-400 flex items-center"
+                        >
                           <ArrowRight className="h-3 w-3 mr-2 text-purple-400" />
                           {item}
                         </li>
@@ -221,13 +257,20 @@ export default function DocsOverview() {
       <div className="mb-12">
         <div className="flex items-center justify-between mb-6">
           <h3 className="text-2xl font-bold text-white">Recent Updates</h3>
-          <Button variant="outline" size="sm" className="border-slate-600 text-white hover:bg-slate-800">
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-slate-600 text-white hover:bg-slate-800"
+          >
             View All Updates
           </Button>
         </div>
         <div className="space-y-4">
           {featuredUpdates.map((update, index) => (
-            <Card key={index} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer">
+            <Card
+              key={index}
+              className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer"
+            >
               <CardContent className="p-4">
                 <div className="flex items-center justify-between">
                   <div>
@@ -242,7 +285,9 @@ export default function DocsOverview() {
                         {update.type}
                       </Badge>
                     </div>
-                    <p className="text-gray-400 text-sm">{update.description}</p>
+                    <p className="text-gray-400 text-sm">
+                      {update.description}
+                    </p>
                   </div>
                   <div className="text-right">
                     <p className="text-xs text-gray-500">{update.date}</p>
@@ -267,7 +312,10 @@ export default function DocsOverview() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Button variant="outline" className="border-slate-600 text-white hover:bg-slate-800">
+            <Button
+              variant="outline"
+              className="border-slate-600 text-white hover:bg-slate-800"
+            >
               <ExternalLink className="h-4 w-4 mr-2" />
               View on GitHub
             </Button>
@@ -285,7 +333,10 @@ export default function DocsOverview() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Button variant="outline" className="border-slate-600 text-white hover:bg-slate-800">
+            <Button
+              variant="outline"
+              className="border-slate-600 text-white hover:bg-slate-800"
+            >
               <ExternalLink className="h-4 w-4 mr-2" />
               Join Community
             </Button>
diff --git a/client/pages/docs/DocsTutorials.tsx b/client/pages/docs/DocsTutorials.tsx
index 920a7f88..e9d5593b 100644
--- a/client/pages/docs/DocsTutorials.tsx
+++ b/client/pages/docs/DocsTutorials.tsx
@@ -1,5 +1,11 @@
 import { useState } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -27,7 +33,7 @@ interface DocsTutorial {
   title: string;
   description: string;
   category: string;
-  difficulty: 'beginner' | 'intermediate' | 'advanced';
+  difficulty: "beginner" | "intermediate" | "advanced";
   duration: string;
   author: string;
   rating: number;
@@ -35,7 +41,7 @@ interface DocsTutorial {
   likes: number;
   tags: string[];
   isNew?: boolean;
-  type: 'video' | 'article' | 'interactive';
+  type: "video" | "article" | "interactive";
   path: string;
 }
 
@@ -43,7 +49,8 @@ const docsTutorials: DocsTutorial[] = [
   {
     id: "1",
     title: "AeThex Platform Quick Start",
-    description: "Get up and running with AeThex in under 10 minutes. Learn the basics of project creation, navigation, and core features.",
+    description:
+      "Get up and running with AeThex in under 10 minutes. Learn the basics of project creation, navigation, and core features.",
     category: "Getting Started",
     difficulty: "beginner",
     duration: "8 min",
@@ -54,12 +61,13 @@ const docsTutorials: DocsTutorial[] = [
     tags: ["platform", "basics", "quickstart"],
     isNew: true,
     type: "video",
-    path: "/docs/tutorials/quickstart"
+    path: "/docs/tutorials/quickstart",
   },
   {
     id: "2",
     title: "Project Setup and Configuration",
-    description: "Deep dive into project configuration, environment setup, and best practices for organizing your AeThex projects.",
+    description:
+      "Deep dive into project configuration, environment setup, and best practices for organizing your AeThex projects.",
     category: "Setup",
     difficulty: "beginner",
     duration: "15 min",
@@ -69,12 +77,13 @@ const docsTutorials: DocsTutorial[] = [
     likes: 287,
     tags: ["setup", "configuration", "projects"],
     type: "article",
-    path: "/docs/tutorials/project-setup"
+    path: "/docs/tutorials/project-setup",
   },
   {
     id: "3",
     title: "Working with the AeThex API",
-    description: "Comprehensive guide to integrating with AeThex APIs, authentication, rate limiting, and error handling.",
+    description:
+      "Comprehensive guide to integrating with AeThex APIs, authentication, rate limiting, and error handling.",
     category: "API Integration",
     difficulty: "intermediate",
     duration: "25 min",
@@ -84,12 +93,13 @@ const docsTutorials: DocsTutorial[] = [
     likes: 198,
     tags: ["api", "integration", "authentication"],
     type: "interactive",
-    path: "/docs/tutorials/api-integration"
+    path: "/docs/tutorials/api-integration",
   },
   {
     id: "4",
     title: "Building Games with AeThex Tools",
-    description: "Step-by-step tutorial for creating your first game using AeThex development tools and frameworks.",
+    description:
+      "Step-by-step tutorial for creating your first game using AeThex development tools and frameworks.",
     category: "Game Development",
     difficulty: "intermediate",
     duration: "45 min",
@@ -99,12 +109,13 @@ const docsTutorials: DocsTutorial[] = [
     likes: 523,
     tags: ["games", "development", "tools"],
     type: "video",
-    path: "/docs/tutorials/game-development"
+    path: "/docs/tutorials/game-development",
   },
   {
     id: "5",
     title: "Advanced Database Patterns",
-    description: "Learn advanced database design patterns, optimization techniques, and performance tuning for AeThex applications.",
+    description:
+      "Learn advanced database design patterns, optimization techniques, and performance tuning for AeThex applications.",
     category: "Database",
     difficulty: "advanced",
     duration: "35 min",
@@ -114,12 +125,13 @@ const docsTutorials: DocsTutorial[] = [
     likes: 165,
     tags: ["database", "optimization", "patterns"],
     type: "article",
-    path: "/docs/tutorials/database-patterns"
+    path: "/docs/tutorials/database-patterns",
   },
   {
     id: "6",
     title: "AI Integration Workshop",
-    description: "Hands-on workshop for integrating AI and machine learning capabilities into your AeThex projects.",
+    description:
+      "Hands-on workshop for integrating AI and machine learning capabilities into your AeThex projects.",
     category: "AI/ML",
     difficulty: "advanced",
     duration: "60 min",
@@ -130,8 +142,8 @@ const docsTutorials: DocsTutorial[] = [
     tags: ["ai", "machine-learning", "integration"],
     isNew: true,
     type: "interactive",
-    path: "/docs/tutorials/ai-integration"
-  }
+    path: "/docs/tutorials/ai-integration",
+  },
 ];
 
 const categories = [
@@ -152,40 +164,60 @@ export default function DocsTutorials() {
 
   const getDifficultyColor = (difficulty: string) => {
     switch (difficulty) {
-      case 'beginner': return 'bg-green-500';
-      case 'intermediate': return 'bg-yellow-500';
-      case 'advanced': return 'bg-red-500';
-      default: return 'bg-gray-500';
+      case "beginner":
+        return "bg-green-500";
+      case "intermediate":
+        return "bg-yellow-500";
+      case "advanced":
+        return "bg-red-500";
+      default:
+        return "bg-gray-500";
     }
   };
 
   const getTypeIcon = (type: string) => {
     switch (type) {
-      case 'video': return Play;
-      case 'article': return BookOpen;
-      case 'interactive': return Code;
-      default: return BookOpen;
+      case "video":
+        return Play;
+      case "article":
+        return BookOpen;
+      case "interactive":
+        return Code;
+      default:
+        return BookOpen;
     }
   };
 
   const getTypeColor = (type: string) => {
     switch (type) {
-      case 'video': return 'text-red-400';
-      case 'article': return 'text-blue-400';
-      case 'interactive': return 'text-green-400';
-      default: return 'text-gray-400';
+      case "video":
+        return "text-red-400";
+      case "article":
+        return "text-blue-400";
+      case "interactive":
+        return "text-green-400";
+      default:
+        return "text-gray-400";
     }
   };
 
-  const filteredTutorials = docsTutorials.filter(tutorial => {
-    const matchesSearch = tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         tutorial.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
-    const matchesCategory = selectedCategory === "all" || 
-                           tutorial.category.toLowerCase().replace(/[\/\s]/g, '-') === selectedCategory;
-    const matchesDifficulty = selectedDifficulty === "all" || tutorial.difficulty === selectedDifficulty;
-    const matchesType = selectedType === "all" || tutorial.type === selectedType;
-    
+  const filteredTutorials = docsTutorials.filter((tutorial) => {
+    const matchesSearch =
+      tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      tutorial.tags.some((tag) =>
+        tag.toLowerCase().includes(searchTerm.toLowerCase()),
+      );
+    const matchesCategory =
+      selectedCategory === "all" ||
+      tutorial.category.toLowerCase().replace(/[\/\s]/g, "-") ===
+        selectedCategory;
+    const matchesDifficulty =
+      selectedDifficulty === "all" ||
+      tutorial.difficulty === selectedDifficulty;
+    const matchesType =
+      selectedType === "all" || tutorial.type === selectedType;
+
     return matchesSearch && matchesCategory && matchesDifficulty && matchesType;
   });
 
@@ -197,9 +229,10 @@ export default function DocsTutorials() {
           Documentation Tutorials
         </h2>
         <p className="text-gray-300 mb-6">
-          Step-by-step guides and interactive tutorials to help you master AeThex
+          Step-by-step guides and interactive tutorials to help you master
+          AeThex
         </p>
-        
+
         {/* Filters */}
         <div className="flex flex-col lg:flex-row gap-4 mb-6">
           <div className="flex-1">
@@ -257,8 +290,8 @@ export default function DocsTutorials() {
                     onClick={() => setSelectedCategory(category.id)}
                     className={`w-full flex items-center space-x-3 p-3 rounded-lg transition-all ${
                       selectedCategory === category.id
-                        ? 'bg-purple-600 text-white'
-                        : 'bg-slate-900/50 text-gray-300 hover:bg-slate-700/50'
+                        ? "bg-purple-600 text-white"
+                        : "bg-slate-900/50 text-gray-300 hover:bg-slate-700/50"
                     }`}
                   >
                     <Icon className="h-4 w-4" />
@@ -282,16 +315,23 @@ export default function DocsTutorials() {
             {filteredTutorials.map((tutorial) => {
               const TypeIcon = getTypeIcon(tutorial.type);
               return (
-                <Card key={tutorial.id} className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group">
+                <Card
+                  key={tutorial.id}
+                  className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
+                >
                   <CardContent className="p-6">
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
                         <div className="flex items-center space-x-3 mb-3">
-                          <TypeIcon className={`h-5 w-5 ${getTypeColor(tutorial.type)}`} />
+                          <TypeIcon
+                            className={`h-5 w-5 ${getTypeColor(tutorial.type)}`}
+                          />
                           <Badge variant="outline" className="text-xs">
                             {tutorial.category}
                           </Badge>
-                          <Badge className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}>
+                          <Badge
+                            className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}
+                          >
                             {tutorial.difficulty}
                           </Badge>
                           {tutorial.isNew && (
@@ -300,15 +340,15 @@ export default function DocsTutorials() {
                             </Badge>
                           )}
                         </div>
-                        
+
                         <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors">
                           {tutorial.title}
                         </h3>
-                        
+
                         <p className="text-gray-400 mb-4">
                           {tutorial.description}
                         </p>
-                        
+
                         <div className="flex items-center justify-between">
                           <div className="flex items-center space-x-4 text-sm text-gray-500">
                             <div className="flex items-center">
@@ -332,7 +372,7 @@ export default function DocsTutorials() {
                               {tutorial.likes}
                             </div>
                           </div>
-                          
+
                           <Button className="bg-purple-600 hover:bg-purple-700">
                             Start Tutorial
                             <ChevronRight className="h-4 w-4 ml-2" />
@@ -354,7 +394,8 @@ export default function DocsTutorials() {
                   No tutorials found
                 </h3>
                 <p className="text-gray-400">
-                  Try adjusting your search terms or filters to find what you're looking for.
+                  Try adjusting your search terms or filters to find what you're
+                  looking for.
                 </p>
               </CardContent>
             </Card>