From 0af22f0488645f688bc6f0f8e05a080a88e5013b Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 5 Aug 2025 23:41:41 +0000
Subject: [PATCH] Prettier format pending files

---
 client/App.tsx                                |  50 ++-
 client/components/Layout.tsx                  | 162 ++++++++--
 client/components/LoadingScreen.tsx           |  53 ++--
 client/components/PageTransition.tsx          |  12 +-
 client/components/Skeleton.tsx                |  53 ++--
 client/components/onboarding/Experience.tsx   | 129 +++++---
 client/components/onboarding/Interests.tsx    | 201 ++++++------
 client/components/onboarding/PersonalInfo.tsx |  58 ++--
 .../onboarding/UserTypeSelection.tsx          | 123 +++++---
 client/components/onboarding/Welcome.tsx      | 145 +++++++--
 client/components/ui/button.tsx               |  21 +-
 client/components/ui/toast.tsx                |   3 +-
 client/global.css                             | 191 ++++++++---
 client/pages/Blog.tsx                         | 136 +++++---
 client/pages/Community.tsx                    | 207 ++++++++----
 client/pages/Dashboard.tsx                    | 222 +++++++++----
 client/pages/DevelopmentConsulting.tsx        | 296 ++++++++++++------
 client/pages/Documentation.tsx                | 150 ++++++---
 client/pages/GameDevelopment.tsx              | 241 +++++++++-----
 client/pages/Index.tsx                        | 130 ++++++--
 client/pages/Login.tsx                        |  73 +++--
 client/pages/MentorshipPrograms.tsx           | 291 +++++++++++------
 client/pages/NotFound.tsx                     | 134 +++++---
 client/pages/Onboarding.tsx                   |  42 ++-
 client/pages/Placeholder.tsx                  |  52 ++-
 client/pages/ResearchLabs.tsx                 | 214 +++++++++----
 client/pages/Support.tsx                      | 242 +++++++++-----
 27 files changed, 2503 insertions(+), 1128 deletions(-)

diff --git a/client/App.tsx b/client/App.tsx
index aebffbea..11af5af1 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -51,13 +51,53 @@ const App = () => (
             <Route path="/support" element={<Support />} />
 
             {/* Placeholder routes for navigation links */}
-            <Route path="/about" element={<Placeholder title="About AeThex" description="Learn more about our company, mission, and team." />} />
-            <Route path="/contact" element={<Placeholder title="Contact Us" description="Get in touch with our team for support or inquiries." />} />
-            <Route path="/get-started" element={<Placeholder title="Get Started" description="Begin your journey with AeThex tools and services." />} />
+            <Route
+              path="/about"
+              element={
+                <Placeholder
+                  title="About AeThex"
+                  description="Learn more about our company, mission, and team."
+                />
+              }
+            />
+            <Route
+              path="/contact"
+              element={
+                <Placeholder
+                  title="Contact Us"
+                  description="Get in touch with our team for support or inquiries."
+                />
+              }
+            />
+            <Route
+              path="/get-started"
+              element={
+                <Placeholder
+                  title="Get Started"
+                  description="Begin your journey with AeThex tools and services."
+                />
+              }
+            />
 
             {/* Legal routes */}
-            <Route path="/privacy" element={<Placeholder title="Privacy Policy" description="Our commitment to protecting your privacy." />} />
-            <Route path="/terms" element={<Placeholder title="Terms of Service" description="Terms and conditions for using AeThex services." />} />
+            <Route
+              path="/privacy"
+              element={
+                <Placeholder
+                  title="Privacy Policy"
+                  description="Our commitment to protecting your privacy."
+                />
+              }
+            />
+            <Route
+              path="/terms"
+              element={
+                <Placeholder
+                  title="Terms of Service"
+                  description="Terms and conditions for using AeThex services."
+                />
+              }
+            />
 
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />
diff --git a/client/components/Layout.tsx b/client/components/Layout.tsx
index 653f24b4..a791d12c 100644
--- a/client/components/Layout.tsx
+++ b/client/components/Layout.tsx
@@ -17,7 +17,7 @@ export default function Layout({ children }: LayoutProps) {
   ];
 
   const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
   return (
@@ -32,7 +32,9 @@ export default function Layout({ children }: LayoutProps) {
                 alt="AeThex Logo"
                 className="h-10 w-10 transition-all duration-300 group-hover:scale-110 group-hover:rotate-12"
               />
-              <span className="text-xl font-bold text-gradient group-hover:animate-pulse">AeThex</span>
+              <span className="text-xl font-bold text-gradient group-hover:animate-pulse">
+                AeThex
+              </span>
             </div>
           </Link>
 
@@ -46,7 +48,7 @@ export default function Layout({ children }: LayoutProps) {
                   "text-sm font-medium transition-all duration-300 hover:text-aethex-400 hover:scale-105 relative animate-fade-in",
                   location.pathname === item.href
                     ? "text-aethex-500 animate-pulse-glow"
-                    : "text-muted-foreground"
+                    : "text-muted-foreground",
                 )}
                 style={{ animationDelay: `${index * 0.1}s` }}
               >
@@ -60,10 +62,17 @@ export default function Layout({ children }: LayoutProps) {
 
           {/* CTA */}
           <div className="flex items-center space-x-4 animate-slide-left">
-            <Button asChild variant="outline" className="hidden sm:inline-flex hover-lift interactive-scale">
+            <Button
+              asChild
+              variant="outline"
+              className="hidden sm:inline-flex hover-lift interactive-scale"
+            >
               <Link to="/login">Sign In</Link>
             </Button>
-            <Button asChild className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue">
+            <Button
+              asChild
+              className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue"
+            >
               <Link to="/onboarding">Join AeThex</Link>
             </Button>
           </div>
@@ -83,55 +92,154 @@ export default function Layout({ children }: LayoutProps) {
                   alt="AeThex Logo"
                   className="h-6 w-6 transition-all duration-300 group-hover:scale-110 group-hover:rotate-6"
                 />
-                <span className="font-bold text-gradient group-hover:animate-pulse">AeThex</span>
+                <span className="font-bold text-gradient group-hover:animate-pulse">
+                  AeThex
+                </span>
               </div>
               <p className="text-sm text-muted-foreground hover:text-muted-foreground/80 transition-colors">
-                Pushing the boundaries of technology through cutting-edge research and breakthrough discoveries.
+                Pushing the boundaries of technology through cutting-edge
+                research and breakthrough discoveries.
               </p>
             </div>
 
             {/* Services */}
-            <div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.1s' }}>
-              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Services</h3>
+            <div
+              className="space-y-4 animate-slide-up"
+              style={{ animationDelay: "0.1s" }}
+            >
+              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">
+                Services
+              </h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
-                <li><Link to="/game-development" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Game Development</Link></li>
-                <li><Link to="/consulting" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Development Consulting</Link></li>
-                <li><Link to="/mentorship" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Mentorship Programs</Link></li>
-                <li><Link to="/research" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Research & Labs</Link></li>
+                <li>
+                  <Link
+                    to="/game-development"
+                    onClick={scrollToTop}
+                    className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
+                  >
+                    Game Development
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    to="/consulting"
+                    onClick={scrollToTop}
+                    className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
+                  >
+                    Development Consulting
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    to="/mentorship"
+                    onClick={scrollToTop}
+                    className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
+                  >
+                    Mentorship Programs
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    to="/research"
+                    onClick={scrollToTop}
+                    className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
+                  >
+                    Research & Labs
+                  </Link>
+                </li>
               </ul>
             </div>
 
             {/* Resources */}
-            <div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.2s' }}>
-              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Resources</h3>
+            <div
+              className="space-y-4 animate-slide-up"
+              style={{ animationDelay: "0.2s" }}
+            >
+              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">
+                Resources
+              </h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
-                <li><Link to="/docs" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Documentation</Link></li>
-                <li><Link to="/blog" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Blog</Link></li>
-                <li><Link to="/community" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Community</Link></li>
-                <li><Link to="/support" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Support</Link></li>
+                <li>
+                  <Link
+                    to="/docs"
+                    onClick={scrollToTop}
+                    className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
+                  >
+                    Documentation
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    to="/blog"
+                    onClick={scrollToTop}
+                    className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
+                  >
+                    Blog
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    to="/community"
+                    onClick={scrollToTop}
+                    className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
+                  >
+                    Community
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    to="/support"
+                    onClick={scrollToTop}
+                    className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
+                  >
+                    Support
+                  </Link>
+                </li>
               </ul>
             </div>
 
             {/* Contact */}
-            <div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.3s' }}>
-              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Contact</h3>
+            <div
+              className="space-y-4 animate-slide-up"
+              style={{ animationDelay: "0.3s" }}
+            >
+              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">
+                Contact
+              </h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
-                <li className="hover:text-aethex-400 transition-colors">Queen Creek, Arizona</li>
-                <li className="hover:text-aethex-400 transition-colors">info@aethex.biz</li>
-                <li className="hover:text-aethex-400 transition-colors">(530) 784-1287</li>
+                <li className="hover:text-aethex-400 transition-colors">
+                  Queen Creek, Arizona
+                </li>
+                <li className="hover:text-aethex-400 transition-colors">
+                  info@aethex.biz
+                </li>
+                <li className="hover:text-aethex-400 transition-colors">
+                  (530) 784-1287
+                </li>
               </ul>
             </div>
           </div>
 
-          <div className="mt-8 pt-8 border-t border-border/40 flex flex-col sm:flex-row justify-between items-center animate-fade-in" style={{ animationDelay: '0.4s' }}>
+          <div
+            className="mt-8 pt-8 border-t border-border/40 flex flex-col sm:flex-row justify-between items-center animate-fade-in"
+            style={{ animationDelay: "0.4s" }}
+          >
             <p className="text-xs text-muted-foreground hover:text-aethex-400 transition-colors">
               © 2024 AeThex Corporation. All rights reserved.
             </p>
             <div className="flex items-center space-x-4 mt-4 sm:mt-0">
-              <Link to="/privacy" onClick={scrollToTop} className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105">
+              <Link
+                to="/privacy"
+                onClick={scrollToTop}
+                className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105"
+              >
                 Privacy Policy
               </Link>
-              <Link to="/terms" onClick={scrollToTop} className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105">
+              <Link
+                to="/terms"
+                onClick={scrollToTop}
+                className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105"
+              >
                 Terms of Service
               </Link>
             </div>
diff --git a/client/components/LoadingScreen.tsx b/client/components/LoadingScreen.tsx
index dc1e5944..402f284d 100644
--- a/client/components/LoadingScreen.tsx
+++ b/client/components/LoadingScreen.tsx
@@ -3,18 +3,18 @@ import { cn } from "@/lib/utils";
 
 interface LoadingScreenProps {
   message?: string;
-  variant?: 'full' | 'overlay' | 'inline';
-  size?: 'sm' | 'md' | 'lg';
+  variant?: "full" | "overlay" | "inline";
+  size?: "sm" | "md" | "lg";
   showProgress?: boolean;
   duration?: number;
 }
 
-export default function LoadingScreen({ 
-  message = "Loading...", 
-  variant = 'full',
-  size = 'md',
+export default function LoadingScreen({
+  message = "Loading...",
+  variant = "full",
+  size = "md",
   showProgress = false,
-  duration = 3000
+  duration = 3000,
 }: LoadingScreenProps) {
   const [progress, setProgress] = useState(0);
   const [currentMessage, setCurrentMessage] = useState(message);
@@ -22,8 +22,8 @@ export default function LoadingScreen({
   useEffect(() => {
     if (showProgress) {
       const interval = setInterval(() => {
-        setProgress(prev => {
-          const newProgress = prev + (100 / (duration / 100));
+        setProgress((prev) => {
+          const newProgress = prev + 100 / (duration / 100);
           return newProgress > 100 ? 100 : newProgress;
         });
       }, 100);
@@ -38,10 +38,10 @@ export default function LoadingScreen({
       "Loading quantum processors...",
       "Calibrating neural networks...",
       "Synchronizing data streams...",
-      "Preparing your experience..."
+      "Preparing your experience...",
     ];
 
-    if (variant === 'full') {
+    if (variant === "full") {
       let index = 0;
       const interval = setInterval(() => {
         setCurrentMessage(messages[index % messages.length]);
@@ -53,26 +53,29 @@ export default function LoadingScreen({
   }, [variant]);
 
   const sizeClasses = {
-    sm: 'h-4 w-4',
-    md: 'h-8 w-8',
-    lg: 'h-12 w-12'
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    lg: "h-12 w-12",
   };
 
-  if (variant === 'inline') {
+  if (variant === "inline") {
     return (
       <div className="flex items-center space-x-3">
         <div className={cn("relative", sizeClasses[size])}>
           <div className="absolute inset-0 rounded-full border-2 border-aethex-400/30"></div>
           <div className="absolute inset-0 rounded-full border-2 border-transparent border-t-aethex-400 animate-spin"></div>
         </div>
-        <span className="text-sm text-muted-foreground animate-pulse">{message}</span>
+        <span className="text-sm text-muted-foreground animate-pulse">
+          {message}
+        </span>
       </div>
     );
   }
 
-  const containerClasses = variant === 'full' 
-    ? "fixed inset-0 bg-background/95 backdrop-blur-sm z-50"
-    : "absolute inset-0 bg-background/80 backdrop-blur-sm z-40";
+  const containerClasses =
+    variant === "full"
+      ? "fixed inset-0 bg-background/95 backdrop-blur-sm z-50"
+      : "absolute inset-0 bg-background/80 backdrop-blur-sm z-40";
 
   return (
     <div className={containerClasses}>
@@ -100,9 +103,9 @@ export default function LoadingScreen({
                   key={i}
                   className="w-1 bg-aethex-400 rounded-full animate-pulse"
                   style={{
-                    height: `${20 + (i * 10)}px`,
+                    height: `${20 + i * 10}px`,
                     animationDelay: `${i * 0.2}s`,
-                    animationDuration: '1s'
+                    animationDuration: "1s",
                   }}
                 />
               ))}
@@ -113,12 +116,14 @@ export default function LoadingScreen({
           {showProgress && (
             <div className="space-y-2">
               <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
-                <div 
+                <div
                   className="h-full bg-gradient-to-r from-aethex-500 to-neon-blue transition-all duration-300 ease-out"
                   style={{ width: `${progress}%` }}
                 />
               </div>
-              <div className="text-xs text-muted-foreground">{Math.round(progress)}%</div>
+              <div className="text-xs text-muted-foreground">
+                {Math.round(progress)}%
+              </div>
             </div>
           )}
 
@@ -142,7 +147,7 @@ export default function LoadingScreen({
                   left: `${Math.random() * 100}%`,
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 2}s`,
-                  animationDuration: `${2 + Math.random() * 3}s`
+                  animationDuration: `${2 + Math.random() * 3}s`,
                 }}
               >
                 {Math.random().toString(2).substr(2, 1)}
diff --git a/client/components/PageTransition.tsx b/client/components/PageTransition.tsx
index 39010642..3637a14f 100644
--- a/client/components/PageTransition.tsx
+++ b/client/components/PageTransition.tsx
@@ -14,7 +14,7 @@ export default function PageTransition({ children }: PageTransitionProps) {
   useEffect(() => {
     setIsLoading(true);
     setIsVisible(false);
-    
+
     const timer = setTimeout(() => {
       setIsLoading(false);
       setIsVisible(true);
@@ -26,13 +26,11 @@ export default function PageTransition({ children }: PageTransitionProps) {
   return (
     <>
       {isLoading && (
-        <LoadingScreen 
-          message="Transitioning..." 
-          variant="overlay" 
-          size="md"
-        />
+        <LoadingScreen message="Transitioning..." variant="overlay" size="md" />
       )}
-      <div className={`transition-all duration-500 ${isVisible ? 'animate-fade-in' : 'opacity-0'}`}>
+      <div
+        className={`transition-all duration-500 ${isVisible ? "animate-fade-in" : "opacity-0"}`}
+      >
         {children}
       </div>
     </>
diff --git a/client/components/Skeleton.tsx b/client/components/Skeleton.tsx
index c9dbb39a..d078db9f 100644
--- a/client/components/Skeleton.tsx
+++ b/client/components/Skeleton.tsx
@@ -2,29 +2,30 @@ import { cn } from "@/lib/utils";
 
 interface SkeletonProps {
   className?: string;
-  variant?: 'text' | 'avatar' | 'card' | 'button' | 'image';
+  variant?: "text" | "avatar" | "card" | "button" | "image";
   lines?: number;
   animate?: boolean;
 }
 
-export function Skeleton({ className, variant = 'text', lines = 1, animate = true }: SkeletonProps) {
-  const baseClasses = cn(
-    "bg-muted rounded",
-    animate && "skeleton",
-    className
-  );
+export function Skeleton({
+  className,
+  variant = "text",
+  lines = 1,
+  animate = true,
+}: SkeletonProps) {
+  const baseClasses = cn("bg-muted rounded", animate && "skeleton", className);
 
   switch (variant) {
-    case 'avatar':
+    case "avatar":
       return <div className={cn(baseClasses, "h-12 w-12 rounded-full")} />;
-    
-    case 'button':
+
+    case "button":
       return <div className={cn(baseClasses, "h-10 w-24")} />;
-    
-    case 'image':
+
+    case "image":
       return <div className={cn(baseClasses, "h-48 w-full")} />;
-    
-    case 'card':
+
+    case "card":
       return (
         <div className={cn("space-y-3 p-4 border rounded-lg", className)}>
           <div className={cn(baseClasses, "h-6 w-3/4")} />
@@ -32,8 +33,8 @@ export function Skeleton({ className, variant = 'text', lines = 1, animate = tru
           <div className={cn(baseClasses, "h-4 w-2/3")} />
         </div>
       );
-    
-    case 'text':
+
+    case "text":
     default:
       return (
         <div className="space-y-2">
@@ -43,7 +44,7 @@ export function Skeleton({ className, variant = 'text', lines = 1, animate = tru
               className={cn(
                 baseClasses,
                 "h-4",
-                i === lines - 1 ? "w-2/3" : "w-full"
+                i === lines - 1 ? "w-2/3" : "w-full",
               )}
             />
           ))}
@@ -93,7 +94,10 @@ export function SkeletonUserPath() {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
       {Array.from({ length: 4 }).map((_, i) => (
-        <div key={i} className="bg-card/50 border border-border/50 rounded-xl p-6 space-y-4">
+        <div
+          key={i}
+          className="bg-card/50 border border-border/50 rounded-xl p-6 space-y-4"
+        >
           <div className="flex items-center space-x-4">
             <Skeleton className="h-12 w-12 rounded-lg" />
             <div className="space-y-2 flex-1">
@@ -120,18 +124,21 @@ export function SkeletonOnboardingStep() {
         <Skeleton className="h-8 w-64 mx-auto" />
         <Skeleton className="h-4 w-96 mx-auto" />
       </div>
-      
+
       <div className="max-w-2xl mx-auto space-y-6">
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="p-4 border-2 border-border/50 rounded-lg space-y-2">
+            <div
+              key={i}
+              className="p-4 border-2 border-border/50 rounded-lg space-y-2"
+            >
               <Skeleton className="h-5 w-32" />
               <Skeleton className="h-4 w-full" />
             </div>
           ))}
         </div>
       </div>
-      
+
       <div className="flex justify-between pt-6">
         <Skeleton variant="button" className="w-20" />
         <Skeleton variant="button" className="w-24" />
@@ -161,7 +168,7 @@ export function SkeletonLayout() {
           </div>
         </div>
       </div>
-      
+
       {/* Content Skeleton */}
       <div className="py-20">
         <div className="container mx-auto px-4 space-y-16">
@@ -173,7 +180,7 @@ export function SkeletonLayout() {
               <Skeleton variant="button" className="w-32 h-12" />
             </div>
           </div>
-          
+
           <SkeletonStats />
           <SkeletonUserPath />
         </div>
diff --git a/client/components/onboarding/Experience.tsx b/client/components/onboarding/Experience.tsx
index 88bec90d..13c235b5 100644
--- a/client/components/onboarding/Experience.tsx
+++ b/client/components/onboarding/Experience.tsx
@@ -14,40 +14,77 @@ interface ExperienceProps {
 }
 
 const experienceLevels = [
-  { id: 'beginner', label: 'Beginner', description: 'New to the field' },
-  { id: 'intermediate', label: 'Intermediate', description: '1-3 years experience' },
-  { id: 'advanced', label: 'Advanced', description: '3-7 years experience' },
-  { id: 'expert', label: 'Expert', description: '7+ years experience' },
+  { id: "beginner", label: "Beginner", description: "New to the field" },
+  {
+    id: "intermediate",
+    label: "Intermediate",
+    description: "1-3 years experience",
+  },
+  { id: "advanced", label: "Advanced", description: "3-7 years experience" },
+  { id: "expert", label: "Expert", description: "7+ years experience" },
 ];
 
 const skillSuggestions = {
-  'game-developer': [
-    'Unity', 'Unreal Engine', 'C#', 'C++', 'JavaScript', 'Python', 'Blender', '3D Modeling',
-    'Game Design', 'Level Design', 'Animation', 'Shader Programming', 'Roblox Development'
+  "game-developer": [
+    "Unity",
+    "Unreal Engine",
+    "C#",
+    "C++",
+    "JavaScript",
+    "Python",
+    "Blender",
+    "3D Modeling",
+    "Game Design",
+    "Level Design",
+    "Animation",
+    "Shader Programming",
+    "Roblox Development",
   ],
-  'client': [
-    'Project Management', 'Business Strategy', 'Product Development', 'Marketing',
-    'Team Leadership', 'Budget Management', 'Quality Assurance', 'User Experience'
+  client: [
+    "Project Management",
+    "Business Strategy",
+    "Product Development",
+    "Marketing",
+    "Team Leadership",
+    "Budget Management",
+    "Quality Assurance",
+    "User Experience",
   ],
-  'member': [
-    'Research', 'Innovation', 'Technology Trends', 'Community Building', 'Networking',
-    'Content Creation', 'Documentation', 'Knowledge Sharing'
+  member: [
+    "Research",
+    "Innovation",
+    "Technology Trends",
+    "Community Building",
+    "Networking",
+    "Content Creation",
+    "Documentation",
+    "Knowledge Sharing",
+  ],
+  customer: [
+    "Gaming",
+    "Technology Adoption",
+    "User Feedback",
+    "Beta Testing",
+    "Community Participation",
+    "Content Consumption",
+    "Product Evaluation",
   ],
-  'customer': [
-    'Gaming', 'Technology Adoption', 'User Feedback', 'Beta Testing', 'Community Participation',
-    'Content Consumption', 'Product Evaluation'
-  ]
 };
 
-export default function Experience({ data, updateData, nextStep, prevStep }: ExperienceProps) {
-  const [newSkill, setNewSkill] = useState('');
+export default function Experience({
+  data,
+  updateData,
+  nextStep,
+  prevStep,
+}: ExperienceProps) {
+  const [newSkill, setNewSkill] = useState("");
 
   const handleLevelChange = (level: string) => {
     updateData({
       experience: {
         ...data.experience,
-        level
-      }
+        level,
+      },
     });
   };
 
@@ -56,19 +93,21 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
       updateData({
         experience: {
           ...data.experience,
-          skills: [...data.experience.skills, skill]
-        }
+          skills: [...data.experience.skills, skill],
+        },
       });
     }
-    setNewSkill('');
+    setNewSkill("");
   };
 
   const handleSkillRemove = (skillToRemove: string) => {
     updateData({
       experience: {
         ...data.experience,
-        skills: data.experience.skills.filter(skill => skill !== skillToRemove)
-      }
+        skills: data.experience.skills.filter(
+          (skill) => skill !== skillToRemove,
+        ),
+      },
     });
   };
 
@@ -76,13 +115,15 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
     updateData({
       experience: {
         ...data.experience,
-        previousProjects: projects
-      }
+        previousProjects: projects,
+      },
     });
   };
 
   const isValid = data.experience.level && data.experience.skills.length > 0;
-  const suggestions = data.userType ? skillSuggestions[data.userType] || [] : [];
+  const suggestions = data.userType
+    ? skillSuggestions[data.userType] || []
+    : [];
 
   return (
     <div className="space-y-6">
@@ -103,12 +144,14 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
                 onClick={() => handleLevelChange(level.id)}
                 className={`p-4 rounded-lg border-2 text-left transition-all duration-200 ${
                   data.experience.level === level.id
-                    ? 'border-aethex-500 bg-aethex-500/10 glow-purple'
-                    : 'border-border/50 hover:border-aethex-400/50 bg-background/50'
+                    ? "border-aethex-500 bg-aethex-500/10 glow-purple"
+                    : "border-border/50 hover:border-aethex-400/50 bg-background/50"
                 }`}
               >
                 <div className="font-medium">{level.label}</div>
-                <div className="text-sm text-muted-foreground">{level.description}</div>
+                <div className="text-sm text-muted-foreground">
+                  {level.description}
+                </div>
               </button>
             ))}
           </div>
@@ -117,7 +160,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
         {/* Skills */}
         <div className="space-y-3">
           <Label className="text-sm font-medium">Skills & Technologies *</Label>
-          
+
           {/* Current Skills */}
           {data.experience.skills.length > 0 && (
             <div className="flex flex-wrap gap-2">
@@ -145,7 +188,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
               onChange={(e) => setNewSkill(e.target.value)}
               placeholder="Add a skill..."
               className="flex-1 px-3 py-2 text-sm rounded-md border border-border/50 bg-background/50 focus:border-aethex-400 focus:outline-none"
-              onKeyPress={(e) => e.key === 'Enter' && handleSkillAdd(newSkill)}
+              onKeyPress={(e) => e.key === "Enter" && handleSkillAdd(newSkill)}
             />
             <Button
               size="sm"
@@ -160,10 +203,12 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
           {/* Skill Suggestions */}
           {suggestions.length > 0 && (
             <div className="space-y-2">
-              <Label className="text-xs text-muted-foreground">Suggested skills:</Label>
+              <Label className="text-xs text-muted-foreground">
+                Suggested skills:
+              </Label>
               <div className="flex flex-wrap gap-2">
                 {suggestions
-                  .filter(skill => !data.experience.skills.includes(skill))
+                  .filter((skill) => !data.experience.skills.includes(skill))
                   .slice(0, 8)
                   .map((skill) => (
                     <button
@@ -180,7 +225,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
         </div>
 
         {/* Previous Projects (optional for some user types) */}
-        {(data.userType === 'game-developer' || data.userType === 'client') && (
+        {(data.userType === "game-developer" || data.userType === "client") && (
           <div className="space-y-2">
             <Label htmlFor="projects" className="text-sm font-medium">
               Previous Projects or Experience
@@ -188,7 +233,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
             </Label>
             <Textarea
               id="projects"
-              value={data.experience.previousProjects || ''}
+              value={data.experience.previousProjects || ""}
               onChange={(e) => handleProjectsChange(e.target.value)}
               placeholder="Tell us about your previous projects, experiences, or achievements..."
               className="bg-background/50 border-border/50 focus:border-aethex-400 min-h-[100px]"
@@ -198,16 +243,16 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
       </div>
 
       <div className="flex justify-between pt-6">
-        <Button 
-          variant="outline" 
+        <Button
+          variant="outline"
           onClick={prevStep}
           className="flex items-center space-x-2"
         >
           <ArrowLeft className="h-4 w-4" />
           <span>Back</span>
         </Button>
-        
-        <Button 
+
+        <Button
           onClick={nextStep}
           disabled={!isValid}
           className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
diff --git a/client/components/onboarding/Interests.tsx b/client/components/onboarding/Interests.tsx
index 08e96553..942b774c 100644
--- a/client/components/onboarding/Interests.tsx
+++ b/client/components/onboarding/Interests.tsx
@@ -11,130 +11,138 @@ interface InterestsProps {
 }
 
 const goalOptions = {
-  'game-developer': [
-    'Learn new game development technologies',
-    'Get mentorship from industry experts',
-    'Collaborate on innovative projects',
-    'Build a portfolio of game projects',
-    'Join a development team',
-    'Start freelancing in game development',
-    'Improve programming skills',
-    'Learn game design principles'
+  "game-developer": [
+    "Learn new game development technologies",
+    "Get mentorship from industry experts",
+    "Collaborate on innovative projects",
+    "Build a portfolio of game projects",
+    "Join a development team",
+    "Start freelancing in game development",
+    "Improve programming skills",
+    "Learn game design principles",
   ],
-  'client': [
-    'Develop a custom game or application',
-    'Get technical consulting for my project',
-    'Find reliable development partners',
-    'Scale my existing game/platform',
-    'Implement new features or technologies',
-    'Optimize performance and user experience',
-    'Launch a new digital product',
-    'Build a development team'
+  client: [
+    "Develop a custom game or application",
+    "Get technical consulting for my project",
+    "Find reliable development partners",
+    "Scale my existing game/platform",
+    "Implement new features or technologies",
+    "Optimize performance and user experience",
+    "Launch a new digital product",
+    "Build a development team",
   ],
-  'member': [
-    'Stay updated on industry trends',
-    'Network with tech professionals',
-    'Access research and insights',
-    'Participate in innovation projects',
-    'Share knowledge with the community',
-    'Explore new technologies',
-    'Contribute to open source projects',
-    'Attend workshops and events'
+  member: [
+    "Stay updated on industry trends",
+    "Network with tech professionals",
+    "Access research and insights",
+    "Participate in innovation projects",
+    "Share knowledge with the community",
+    "Explore new technologies",
+    "Contribute to open source projects",
+    "Attend workshops and events",
+  ],
+  customer: [
+    "Play cutting-edge games",
+    "Access premium development tools",
+    "Get early access to new releases",
+    "Join beta testing programs",
+    "Connect with other gamers",
+    "Learn about game development",
+    "Provide feedback on products",
+    "Explore interactive experiences",
   ],
-  'customer': [
-    'Play cutting-edge games',
-    'Access premium development tools',
-    'Get early access to new releases',
-    'Join beta testing programs',
-    'Connect with other gamers',
-    'Learn about game development',
-    'Provide feedback on products',
-    'Explore interactive experiences'
-  ]
 };
 
 const serviceOptions = {
-  'game-developer': [
-    'Mentorship Programs',
-    'Development Tools Access',
-    'Collaborative Projects',
-    'Technical Workshops',
-    'Code Review Services',
-    'Career Guidance',
-    'Networking Events',
-    'Skill Assessments'
+  "game-developer": [
+    "Mentorship Programs",
+    "Development Tools Access",
+    "Collaborative Projects",
+    "Technical Workshops",
+    "Code Review Services",
+    "Career Guidance",
+    "Networking Events",
+    "Skill Assessments",
   ],
-  'client': [
-    'Custom Game Development',
-    'Technical Consulting',
-    'Project Management',
-    'Quality Assurance',
-    'Performance Optimization',
-    'Team Augmentation',
-    'Technology Integration',
-    'Ongoing Support'
+  client: [
+    "Custom Game Development",
+    "Technical Consulting",
+    "Project Management",
+    "Quality Assurance",
+    "Performance Optimization",
+    "Team Augmentation",
+    "Technology Integration",
+    "Ongoing Support",
   ],
-  'member': [
-    'Research Access',
-    'Community Forums',
-    'Expert Insights',
-    'Innovation Labs',
-    'Knowledge Base',
-    'Networking Platform',
-    'Event Participation',
-    'Content Library'
+  member: [
+    "Research Access",
+    "Community Forums",
+    "Expert Insights",
+    "Innovation Labs",
+    "Knowledge Base",
+    "Networking Platform",
+    "Event Participation",
+    "Content Library",
+  ],
+  customer: [
+    "Premium Games",
+    "Development Tools",
+    "Beta Access",
+    "Community Features",
+    "Customer Support",
+    "Regular Updates",
+    "Educational Content",
+    "User Forums",
   ],
-  'customer': [
-    'Premium Games',
-    'Development Tools',
-    'Beta Access',
-    'Community Features',
-    'Customer Support',
-    'Regular Updates',
-    'Educational Content',
-    'User Forums'
-  ]
 };
 
-export default function Interests({ data, updateData, nextStep, prevStep }: InterestsProps) {
+export default function Interests({
+  data,
+  updateData,
+  nextStep,
+  prevStep,
+}: InterestsProps) {
   const goals = data.userType ? goalOptions[data.userType] || [] : [];
   const services = data.userType ? serviceOptions[data.userType] || [] : [];
 
   const handleGoalToggle = (goal: string) => {
     const currentGoals = data.interests.primaryGoals;
     const updatedGoals = currentGoals.includes(goal)
-      ? currentGoals.filter(g => g !== goal)
+      ? currentGoals.filter((g) => g !== goal)
       : [...currentGoals, goal];
-    
+
     updateData({
       interests: {
         ...data.interests,
-        primaryGoals: updatedGoals
-      }
+        primaryGoals: updatedGoals,
+      },
     });
   };
 
   const handleServiceToggle = (service: string) => {
     const currentServices = data.interests.preferredServices;
     const updatedServices = currentServices.includes(service)
-      ? currentServices.filter(s => s !== service)
+      ? currentServices.filter((s) => s !== service)
       : [...currentServices, service];
-    
+
     updateData({
       interests: {
         ...data.interests,
-        preferredServices: updatedServices
-      }
+        preferredServices: updatedServices,
+      },
     });
   };
 
-  const isValid = data.interests.primaryGoals.length > 0 && data.interests.preferredServices.length > 0;
+  const isValid =
+    data.interests.primaryGoals.length > 0 &&
+    data.interests.preferredServices.length > 0;
 
   return (
     <div className="space-y-6">
       <div className="text-center space-y-2">
         <p className="text-muted-foreground">
-          Tell us about your goals and interests so we can personalize your experience
+          Tell us about your goals and interests so we can personalize your
+          experience
         </p>
       </div>
 
@@ -152,8 +160,8 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
                   onClick={() => handleGoalToggle(goal)}
                   className={`p-3 rounded-lg border-2 text-left text-sm transition-all duration-200 ${
                     isSelected
-                      ? 'border-aethex-500 bg-aethex-500/10 text-aethex-300'
-                      : 'border-border/50 hover:border-aethex-400/50 bg-background/50 hover:bg-aethex-500/5'
+                      ? "border-aethex-500 bg-aethex-500/10 text-aethex-300"
+                      : "border-border/50 hover:border-aethex-400/50 bg-background/50 hover:bg-aethex-500/5"
                   }`}
                 >
                   {goal}
@@ -166,18 +174,21 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
         {/* Preferred Services */}
         <div className="space-y-3">
           <Label className="text-sm font-medium">Services of Interest *</Label>
-          <p className="text-xs text-muted-foreground">Select all that interest you</p>
+          <p className="text-xs text-muted-foreground">
+            Select all that interest you
+          </p>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             {services.map((service) => {
-              const isSelected = data.interests.preferredServices.includes(service);
+              const isSelected =
+                data.interests.preferredServices.includes(service);
               return (
                 <button
                   key={service}
                   onClick={() => handleServiceToggle(service)}
                   className={`p-3 rounded-lg border-2 text-left text-sm transition-all duration-200 ${
                     isSelected
-                      ? 'border-neon-blue bg-neon-blue/10 text-neon-blue'
-                      : 'border-border/50 hover:border-neon-blue/50 bg-background/50 hover:bg-neon-blue/5'
+                      ? "border-neon-blue bg-neon-blue/10 text-neon-blue"
+                      : "border-border/50 hover:border-neon-blue/50 bg-background/50 hover:bg-neon-blue/5"
                   }`}
                 >
                   {service}
@@ -189,16 +200,16 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
       </div>
 
       <div className="flex justify-between pt-6">
-        <Button 
-          variant="outline" 
+        <Button
+          variant="outline"
           onClick={prevStep}
           className="flex items-center space-x-2"
         >
           <ArrowLeft className="h-4 w-4" />
           <span>Back</span>
         </Button>
-        
-        <Button 
+
+        <Button
           onClick={nextStep}
           disabled={!isValid}
           className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
diff --git a/client/components/onboarding/PersonalInfo.tsx b/client/components/onboarding/PersonalInfo.tsx
index 010c6c0e..27beb58b 100644
--- a/client/components/onboarding/PersonalInfo.tsx
+++ b/client/components/onboarding/PersonalInfo.tsx
@@ -11,25 +11,38 @@ interface PersonalInfoProps {
   prevStep: () => void;
 }
 
-export default function PersonalInfo({ data, updateData, nextStep, prevStep }: PersonalInfoProps) {
+export default function PersonalInfo({
+  data,
+  updateData,
+  nextStep,
+  prevStep,
+}: PersonalInfoProps) {
   const handleInputChange = (field: string, value: string) => {
     updateData({
       personalInfo: {
         ...data.personalInfo,
-        [field]: value
-      }
+        [field]: value,
+      },
     });
   };
 
-  const isValid = data.personalInfo.firstName && data.personalInfo.lastName && data.personalInfo.email;
+  const isValid =
+    data.personalInfo.firstName &&
+    data.personalInfo.lastName &&
+    data.personalInfo.email;
 
   const getUserTypeLabel = () => {
     switch (data.userType) {
-      case 'game-developer': return 'Game Developer';
-      case 'client': return 'Client';
-      case 'member': return 'Community Member';
-      case 'customer': return 'Customer';
-      default: return 'User';
+      case "game-developer":
+        return "Game Developer";
+      case "client":
+        return "Client";
+      case "member":
+        return "Community Member";
+      case "customer":
+        return "Customer";
+      default:
+        return "User";
     }
   };
 
@@ -50,7 +63,7 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
             <Input
               id="firstName"
               value={data.personalInfo.firstName}
-              onChange={(e) => handleInputChange('firstName', e.target.value)}
+              onChange={(e) => handleInputChange("firstName", e.target.value)}
               placeholder="Enter your first name"
               className="bg-background/50 border-border/50 focus:border-aethex-400"
             />
@@ -62,7 +75,7 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
             <Input
               id="lastName"
               value={data.personalInfo.lastName}
-              onChange={(e) => handleInputChange('lastName', e.target.value)}
+              onChange={(e) => handleInputChange("lastName", e.target.value)}
               placeholder="Enter your last name"
               className="bg-background/50 border-border/50 focus:border-aethex-400"
             />
@@ -77,25 +90,25 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
             id="email"
             type="email"
             value={data.personalInfo.email}
-            onChange={(e) => handleInputChange('email', e.target.value)}
+            onChange={(e) => handleInputChange("email", e.target.value)}
             placeholder="Enter your email address"
             className="bg-background/50 border-border/50 focus:border-aethex-400"
           />
         </div>
 
-        {(data.userType === 'client' || data.userType === 'game-developer') && (
+        {(data.userType === "client" || data.userType === "game-developer") && (
           <div className="space-y-2">
             <Label htmlFor="company" className="text-sm font-medium">
               Company / Organization
-              {data.userType === 'client' && ' *'}
+              {data.userType === "client" && " *"}
             </Label>
             <Input
               id="company"
-              value={data.personalInfo.company || ''}
-              onChange={(e) => handleInputChange('company', e.target.value)}
+              value={data.personalInfo.company || ""}
+              onChange={(e) => handleInputChange("company", e.target.value)}
               placeholder={
-                data.userType === 'client' 
-                  ? "Enter your company name" 
+                data.userType === "client"
+                  ? "Enter your company name"
                   : "Enter your company/organization (optional)"
               }
               className="bg-background/50 border-border/50 focus:border-aethex-400"
@@ -116,7 +129,10 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
 
         <Button
           onClick={nextStep}
-          disabled={!isValid || (data.userType === 'client' && !data.personalInfo.company)}
+          disabled={
+            !isValid ||
+            (data.userType === "client" && !data.personalInfo.company)
+          }
           className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue group disabled:opacity-50 disabled:cursor-not-allowed"
         >
           <span>Continue</span>
@@ -125,9 +141,7 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
       </div>
 
       <div className="text-center">
-        <p className="text-xs text-muted-foreground">
-          * Required fields
-        </p>
+        <p className="text-xs text-muted-foreground">* Required fields</p>
       </div>
     </div>
   );
diff --git a/client/components/onboarding/UserTypeSelection.tsx b/client/components/onboarding/UserTypeSelection.tsx
index d6a8b290..99e48c08 100644
--- a/client/components/onboarding/UserTypeSelection.tsx
+++ b/client/components/onboarding/UserTypeSelection.tsx
@@ -1,7 +1,18 @@
 import { UserType, OnboardingData } from "@/pages/Onboarding";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { GamepadIcon, BriefcaseIcon, UsersIcon, ShoppingCartIcon } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  GamepadIcon,
+  BriefcaseIcon,
+  UsersIcon,
+  ShoppingCartIcon,
+} from "lucide-react";
 
 interface UserTypeSelectionProps {
   data: OnboardingData;
@@ -11,60 +22,68 @@ interface UserTypeSelectionProps {
 
 const userTypes = [
   {
-    id: 'game-developer' as UserType,
-    title: 'Game Developer',
-    description: 'Join our development community, access tools, mentorship, and collaborate on cutting-edge game projects.',
+    id: "game-developer" as UserType,
+    title: "Game Developer",
+    description:
+      "Join our development community, access tools, mentorship, and collaborate on cutting-edge game projects.",
     icon: GamepadIcon,
     benefits: [
-      'Access to development tools and frameworks',
-      'Mentorship from industry veterans',
-      'Collaborative project opportunities',
-      'Technical workshops and boot camps'
+      "Access to development tools and frameworks",
+      "Mentorship from industry veterans",
+      "Collaborative project opportunities",
+      "Technical workshops and boot camps",
     ],
-    color: 'from-neon-purple to-aethex-500'
+    color: "from-neon-purple to-aethex-500",
   },
   {
-    id: 'client' as UserType,
-    title: 'Client',
-    description: 'Partner with us for custom game development, consulting services, and technical solutions.',
+    id: "client" as UserType,
+    title: "Client",
+    description:
+      "Partner with us for custom game development, consulting services, and technical solutions.",
     icon: BriefcaseIcon,
     benefits: [
-      'Custom game development services',
-      'Technical consulting and strategy',
-      'Project management expertise',
-      'End-to-end solution delivery'
+      "Custom game development services",
+      "Technical consulting and strategy",
+      "Project management expertise",
+      "End-to-end solution delivery",
     ],
-    color: 'from-neon-blue to-aethex-400'
+    color: "from-neon-blue to-aethex-400",
   },
   {
-    id: 'member' as UserType,
-    title: 'Community Member',
-    description: 'Be part of our innovation community with access to research, networking, and exclusive content.',
+    id: "member" as UserType,
+    title: "Community Member",
+    description:
+      "Be part of our innovation community with access to research, networking, and exclusive content.",
     icon: UsersIcon,
     benefits: [
-      'Access to research and publications',
-      'Networking with industry professionals',
-      'Exclusive community events',
-      'Early access to new technologies'
+      "Access to research and publications",
+      "Networking with industry professionals",
+      "Exclusive community events",
+      "Early access to new technologies",
     ],
-    color: 'from-neon-green to-aethex-600'
+    color: "from-neon-green to-aethex-600",
   },
   {
-    id: 'customer' as UserType,
-    title: 'Customer',
-    description: 'Explore our games, tools, and products designed to enhance your gaming and development experience.',
+    id: "customer" as UserType,
+    title: "Customer",
+    description:
+      "Explore our games, tools, and products designed to enhance your gaming and development experience.",
     icon: ShoppingCartIcon,
     benefits: [
-      'Access to premium games and tools',
-      'Customer support and documentation',
-      'Regular updates and new releases',
-      'Community forums and discussions'
+      "Access to premium games and tools",
+      "Customer support and documentation",
+      "Regular updates and new releases",
+      "Community forums and discussions",
     ],
-    color: 'from-neon-yellow to-aethex-700'
-  }
+    color: "from-neon-yellow to-aethex-700",
+  },
 ];
 
-export default function UserTypeSelection({ data, updateData, nextStep }: UserTypeSelectionProps) {
+export default function UserTypeSelection({
+  data,
+  updateData,
+  nextStep,
+}: UserTypeSelectionProps) {
   const handleSelectType = (userType: UserType) => {
     updateData({ userType });
     setTimeout(() => {
@@ -90,19 +109,23 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
               key={type.id}
               className={`cursor-pointer transition-all duration-500 hover-lift interactive-scale border-2 animate-scale-in ${
                 isSelected
-                  ? 'border-aethex-500 glow-purple animate-pulse-glow'
-                  : 'border-border/50 hover:border-aethex-400/50'
+                  ? "border-aethex-500 glow-purple animate-pulse-glow"
+                  : "border-border/50 hover:border-aethex-400/50"
               }`}
               style={{ animationDelay: `${index * 0.1}s` }}
               onClick={() => handleSelectType(type.id)}
             >
               <CardHeader className="pb-3">
                 <div className="flex items-center space-x-3">
-                  <div className={`p-2 rounded-lg bg-gradient-to-r ${type.color} transition-all duration-300 hover:scale-110 ${isSelected ? 'animate-bounce-gentle' : ''}`}>
+                  <div
+                    className={`p-2 rounded-lg bg-gradient-to-r ${type.color} transition-all duration-300 hover:scale-110 ${isSelected ? "animate-bounce-gentle" : ""}`}
+                  >
                     <Icon className="h-6 w-6 text-white" />
                   </div>
                   <div>
-                    <CardTitle className={`text-lg transition-all duration-300 ${isSelected ? 'text-gradient animate-pulse' : ''}`}>
+                    <CardTitle
+                      className={`text-lg transition-all duration-300 ${isSelected ? "text-gradient animate-pulse" : ""}`}
+                    >
                       {type.title}
                     </CardTitle>
                   </div>
@@ -117,11 +140,17 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
                     <li
                       key={benefitIndex}
                       className={`text-xs text-muted-foreground flex items-start transition-all duration-300 animate-slide-left ${
-                        isSelected ? 'text-aethex-300' : ''
+                        isSelected ? "text-aethex-300" : ""
                       }`}
-                      style={{ animationDelay: `${(index * 0.1) + (benefitIndex * 0.05)}s` }}
+                      style={{
+                        animationDelay: `${index * 0.1 + benefitIndex * 0.05}s`,
+                      }}
                     >
-                      <span className={`mr-2 transition-all duration-300 ${isSelected ? 'text-aethex-400 animate-pulse' : 'text-aethex-400'}`}>•</span>
+                      <span
+                        className={`mr-2 transition-all duration-300 ${isSelected ? "text-aethex-400 animate-pulse" : "text-aethex-400"}`}
+                      >
+                        •
+                      </span>
                       {benefit}
                     </li>
                   ))}
@@ -132,9 +161,13 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
         })}
       </div>
 
-      <div className="flex justify-center pt-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
+      <div
+        className="flex justify-center pt-6 animate-fade-in"
+        style={{ animationDelay: "0.5s" }}
+      >
         <p className="text-sm text-muted-foreground text-center max-w-lg">
-          Don't worry - you can always change your preferences later or access multiple areas of our platform.
+          Don't worry - you can always change your preferences later or access
+          multiple areas of our platform.
         </p>
       </div>
     </div>
diff --git a/client/components/onboarding/Welcome.tsx b/client/components/onboarding/Welcome.tsx
index 06ace633..3c943cb1 100644
--- a/client/components/onboarding/Welcome.tsx
+++ b/client/components/onboarding/Welcome.tsx
@@ -1,6 +1,12 @@
 import { OnboardingData } from "@/pages/Onboarding";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { CheckCircle, ArrowRight, Sparkles } from "lucide-react";
 import { Link } from "react-router-dom";
 
@@ -11,43 +17,97 @@ interface WelcomeProps {
 export default function Welcome({ data }: WelcomeProps) {
   const getUserTypeLabel = () => {
     switch (data.userType) {
-      case 'game-developer': return 'Game Developer';
-      case 'client': return 'Client';
-      case 'member': return 'Community Member';
-      case 'customer': return 'Customer';
-      default: return 'User';
+      case "game-developer":
+        return "Game Developer";
+      case "client":
+        return "Client";
+      case "member":
+        return "Community Member";
+      case "customer":
+        return "Customer";
+      default:
+        return "User";
     }
   };
 
   const getNextSteps = () => {
     switch (data.userType) {
-      case 'game-developer':
+      case "game-developer":
         return [
-          { title: 'Access Development Tools', description: 'Get started with our development toolkit and resources' },
-          { title: 'Join Mentorship Program', description: 'Connect with experienced developers for guidance' },
-          { title: 'Explore Projects', description: 'Browse collaborative projects and opportunities' },
-          { title: 'Attend Workshops', description: 'Join our next technical workshop or boot camp' }
+          {
+            title: "Access Development Tools",
+            description:
+              "Get started with our development toolkit and resources",
+          },
+          {
+            title: "Join Mentorship Program",
+            description: "Connect with experienced developers for guidance",
+          },
+          {
+            title: "Explore Projects",
+            description: "Browse collaborative projects and opportunities",
+          },
+          {
+            title: "Attend Workshops",
+            description: "Join our next technical workshop or boot camp",
+          },
         ];
-      case 'client':
+      case "client":
         return [
-          { title: 'Schedule Consultation', description: 'Book a free consultation to discuss your project' },
-          { title: 'View Our Portfolio', description: 'Explore our previous work and case studies' },
-          { title: 'Get Project Quote', description: 'Receive a detailed quote for your development needs' },
-          { title: 'Meet Your Team', description: 'Connect with our development specialists' }
+          {
+            title: "Schedule Consultation",
+            description: "Book a free consultation to discuss your project",
+          },
+          {
+            title: "View Our Portfolio",
+            description: "Explore our previous work and case studies",
+          },
+          {
+            title: "Get Project Quote",
+            description: "Receive a detailed quote for your development needs",
+          },
+          {
+            title: "Meet Your Team",
+            description: "Connect with our development specialists",
+          },
         ];
-      case 'member':
+      case "member":
         return [
-          { title: 'Explore Research', description: 'Access our latest research and publications' },
-          { title: 'Join Community', description: 'Connect with other members in our forums' },
-          { title: 'Upcoming Events', description: 'Register for community events and workshops' },
-          { title: 'Innovation Labs', description: 'Participate in cutting-edge research projects' }
+          {
+            title: "Explore Research",
+            description: "Access our latest research and publications",
+          },
+          {
+            title: "Join Community",
+            description: "Connect with other members in our forums",
+          },
+          {
+            title: "Upcoming Events",
+            description: "Register for community events and workshops",
+          },
+          {
+            title: "Innovation Labs",
+            description: "Participate in cutting-edge research projects",
+          },
         ];
-      case 'customer':
+      case "customer":
         return [
-          { title: 'Browse Products', description: 'Explore our games, tools, and digital products' },
-          { title: 'Join Beta Programs', description: 'Get early access to new releases and features' },
-          { title: 'Community Hub', description: 'Connect with other users and share feedback' },
-          { title: 'Support Center', description: 'Access documentation and customer support' }
+          {
+            title: "Browse Products",
+            description: "Explore our games, tools, and digital products",
+          },
+          {
+            title: "Join Beta Programs",
+            description: "Get early access to new releases and features",
+          },
+          {
+            title: "Community Hub",
+            description: "Connect with other users and share feedback",
+          },
+          {
+            title: "Support Center",
+            description: "Access documentation and customer support",
+          },
         ];
       default:
         return [];
@@ -64,13 +124,14 @@ export default function Welcome({ data }: WelcomeProps) {
             <CheckCircle className="h-12 w-12 text-white" />
           </div>
         </div>
-        
+
         <div className="space-y-2">
           <h2 className="text-2xl font-bold text-gradient-purple">
             Welcome to AeThex, {data.personalInfo.firstName}!
           </h2>
           <p className="text-muted-foreground">
-            Your {getUserTypeLabel().toLowerCase()} account has been successfully set up
+            Your {getUserTypeLabel().toLowerCase()} account has been
+            successfully set up
           </p>
         </div>
       </div>
@@ -91,15 +152,22 @@ export default function Welcome({ data }: WelcomeProps) {
             </div>
             <div>
               <strong className="text-foreground">Experience:</strong>
-              <p className="text-muted-foreground capitalize">{data.experience.level}</p>
+              <p className="text-muted-foreground capitalize">
+                {data.experience.level}
+              </p>
             </div>
             <div>
               <strong className="text-foreground">Skills:</strong>
-              <p className="text-muted-foreground">{data.experience.skills.slice(0, 3).join(', ')}{data.experience.skills.length > 3 ? '...' : ''}</p>
+              <p className="text-muted-foreground">
+                {data.experience.skills.slice(0, 3).join(", ")}
+                {data.experience.skills.length > 3 ? "..." : ""}
+              </p>
             </div>
             <div>
               <strong className="text-foreground">Primary Goals:</strong>
-              <p className="text-muted-foreground">{data.interests.primaryGoals.length} selected</p>
+              <p className="text-muted-foreground">
+                {data.interests.primaryGoals.length} selected
+              </p>
             </div>
           </div>
         </CardContent>
@@ -110,7 +178,10 @@ export default function Welcome({ data }: WelcomeProps) {
         <h3 className="text-lg font-semibold text-center">What's Next?</h3>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           {nextSteps.map((step, index) => (
-            <Card key={index} className="bg-background/30 border-border/50 hover:border-aethex-400/50 transition-all duration-200">
+            <Card
+              key={index}
+              className="bg-background/30 border-border/50 hover:border-aethex-400/50 transition-all duration-200"
+            >
               <CardHeader className="pb-2">
                 <CardTitle className="text-sm">{step.title}</CardTitle>
               </CardHeader>
@@ -129,7 +200,10 @@ export default function Welcome({ data }: WelcomeProps) {
         <Button asChild variant="outline" className="border-border/50">
           <Link to="/dashboard">Go to Dashboard</Link>
         </Button>
-        <Button asChild className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90">
+        <Button
+          asChild
+          className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
+        >
           <Link to="/get-started" className="flex items-center space-x-2">
             <span>Get Started</span>
             <ArrowRight className="h-4 w-4" />
@@ -139,7 +213,10 @@ export default function Welcome({ data }: WelcomeProps) {
 
       <div className="text-center pt-4">
         <p className="text-xs text-muted-foreground">
-          Need help getting started? <Link to="/support" className="text-aethex-400 hover:underline">Contact our support team</Link>
+          Need help getting started?{" "}
+          <Link to="/support" className="text-aethex-400 hover:underline">
+            Contact our support team
+          </Link>
         </p>
       </div>
     </div>
diff --git a/client/components/ui/button.tsx b/client/components/ui/button.tsx
index 811e085c..5b88ddd9 100644
--- a/client/components/ui/button.tsx
+++ b/client/components/ui/button.tsx
@@ -9,7 +9,8 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25",
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25",
         outline:
@@ -50,17 +51,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
 
-      const ripple = document.createElement('span');
-      ripple.style.position = 'absolute';
-      ripple.style.borderRadius = '50%';
-      ripple.style.transform = 'scale(0)';
-      ripple.style.animation = 'ripple 0.6s linear';
-      ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
+      const ripple = document.createElement("span");
+      ripple.style.position = "absolute";
+      ripple.style.borderRadius = "50%";
+      ripple.style.transform = "scale(0)";
+      ripple.style.animation = "ripple 0.6s linear";
+      ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
 
       const size = Math.max(rect.width, rect.height);
-      ripple.style.width = ripple.style.height = size + 'px';
-      ripple.style.left = x - size / 2 + 'px';
-      ripple.style.top = y - size / 2 + 'px';
+      ripple.style.width = ripple.style.height = size + "px";
+      ripple.style.left = x - size / 2 + "px";
+      ripple.style.top = y - size / 2 + "px";
 
       button.appendChild(ripple);
 
diff --git a/client/components/ui/toast.tsx b/client/components/ui/toast.tsx
index c355b93a..ba813068 100644
--- a/client/components/ui/toast.tsx
+++ b/client/components/ui/toast.tsx
@@ -34,8 +34,7 @@ const toastVariants = cva(
           "border-green-500/50 bg-green-500/10 text-green-400 shadow-2xl shadow-green-500/20",
         warning:
           "border-yellow-500/50 bg-yellow-500/10 text-yellow-400 shadow-2xl shadow-yellow-500/20",
-        info:
-          "border-aethex-400/50 bg-aethex-500/10 text-aethex-300 shadow-2xl shadow-aethex-500/20 glow-blue",
+        info: "border-aethex-400/50 bg-aethex-500/10 text-aethex-300 shadow-2xl shadow-aethex-500/20 glow-blue",
         aethex:
           "border-aethex-400/50 bg-gradient-to-r from-aethex-500/20 via-neon-blue/20 to-aethex-600/20 text-aethex-300 shadow-2xl shadow-aethex-500/30 glow-purple animate-pulse-glow",
       },
diff --git a/client/global.css b/client/global.css
index 95829bbe..944ee536 100644
--- a/client/global.css
+++ b/client/global.css
@@ -67,7 +67,6 @@
     --neon-green: 120 100% 70%;
     --neon-yellow: 50 100% 70%;
   }
-
 }
 
 @layer base {
@@ -77,7 +76,7 @@
 
   body {
     @apply bg-background text-foreground;
-    font-family: 'Courier New', 'Courier', monospace;
+    font-family: "Courier New", "Courier", monospace;
     letter-spacing: 0.025em;
   }
 
@@ -108,39 +107,53 @@
   }
 
   .border-gradient::before {
-    content: '';
+    content: "";
     @apply absolute inset-0 rounded-[inherit] p-[1px] bg-gradient-to-r from-aethex-400 via-neon-blue to-aethex-600;
-    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
     mask-composite: xor;
     background-size: 200% 200%;
     animation: gradient-shift 2s ease-in-out infinite;
   }
 
   .glow-purple {
-    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.2);
+    box-shadow:
+      0 0 20px rgba(139, 92, 246, 0.3),
+      0 0 40px rgba(139, 92, 246, 0.2);
     transition: box-shadow 0.3s ease;
   }
 
   .glow-purple:hover {
-    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 0 60px rgba(139, 92, 246, 0.3);
+    box-shadow:
+      0 0 30px rgba(139, 92, 246, 0.5),
+      0 0 60px rgba(139, 92, 246, 0.3);
   }
 
   .glow-blue {
-    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(59, 130, 246, 0.2);
+    box-shadow:
+      0 0 20px rgba(59, 130, 246, 0.3),
+      0 0 40px rgba(59, 130, 246, 0.2);
     transition: box-shadow 0.3s ease;
   }
 
   .glow-blue:hover {
-    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), 0 0 60px rgba(59, 130, 246, 0.3);
+    box-shadow:
+      0 0 30px rgba(59, 130, 246, 0.5),
+      0 0 60px rgba(59, 130, 246, 0.3);
   }
 
   .glow-green {
-    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 0 40px rgba(34, 197, 94, 0.2);
+    box-shadow:
+      0 0 20px rgba(34, 197, 94, 0.3),
+      0 0 40px rgba(34, 197, 94, 0.2);
     transition: box-shadow 0.3s ease;
   }
 
   .glow-yellow {
-    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 40px rgba(251, 191, 36, 0.2);
+    box-shadow:
+      0 0 20px rgba(251, 191, 36, 0.3),
+      0 0 40px rgba(251, 191, 36, 0.2);
     transition: box-shadow 0.3s ease;
   }
 
@@ -181,7 +194,9 @@
   }
 
   .animate-typing {
-    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
+    animation:
+      typing 3s steps(40, end),
+      blink-caret 0.75s step-end infinite;
     overflow: hidden;
     border-right: 3px solid;
     white-space: nowrap;
@@ -189,7 +204,9 @@
   }
 
   .hover-lift {
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    transition:
+      transform 0.3s ease,
+      box-shadow 0.3s ease;
   }
 
   .hover-lift:hover {
@@ -217,86 +234,170 @@
   }
 
   .loading-dots::after {
-    content: '';
+    content: "";
     animation: loading-dots 1.5s infinite;
   }
 
   .skeleton {
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.1),
+      transparent
+    );
     background-size: 200% 100%;
     animation: skeleton-loading 1.5s infinite;
   }
 }
 
 @keyframes gradient-shift {
-  0%, 100% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
 }
 
 @keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slide-up {
-  from { opacity: 0; transform: translateY(30px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes slide-down {
-  from { opacity: 0; transform: translateY(-30px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes slide-left {
-  from { opacity: 0; transform: translateX(30px); }
-  to { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes slide-right {
-  from { opacity: 0; transform: translateX(-30px); }
-  to { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes scale-in {
-  from { opacity: 0; transform: scale(0.9); }
-  to { opacity: 1; transform: scale(1); }
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
 @keyframes bounce-gentle {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
 }
 
 @keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-20px); }
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
 }
 
 @keyframes pulse-glow {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.8; transform: scale(1.05); }
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
 }
 
 @keyframes typing {
-  from { width: 0; }
-  to { width: 100%; }
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
 }
 
 @keyframes blink-caret {
-  from, to { border-color: transparent; }
-  50% { border-color: currentColor; }
+  from,
+  to {
+    border-color: transparent;
+  }
+  50% {
+    border-color: currentColor;
+  }
 }
 
 @keyframes loading-dots {
-  0% { content: ''; }
-  25% { content: '.'; }
-  50% { content: '..'; }
-  75% { content: '...'; }
-  100% { content: ''; }
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
+  }
 }
 
 @keyframes skeleton-loading {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
 }
diff --git a/client/pages/Blog.tsx b/client/pages/Blog.tsx
index e89da0fd..81b783f4 100644
--- a/client/pages/Blog.tsx
+++ b/client/pages/Blog.tsx
@@ -1,15 +1,21 @@
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { aethexToast } from "@/lib/aethex-toast";
 import { Link } from "react-router-dom";
-import { 
-  PenTool, 
-  Calendar, 
-  User, 
+import {
+  PenTool,
+  Calendar,
+  User,
   ArrowRight,
   Search,
   Filter,
@@ -17,7 +23,7 @@ import {
   Share,
   ThumbsUp,
   MessageCircle,
-  TrendingUp
+  TrendingUp,
 } from "lucide-react";
 
 export default function Blog() {
@@ -42,96 +48,113 @@ export default function Blog() {
     { id: "technology", name: "Technology", count: 18 },
     { id: "tutorials", name: "Tutorials", count: 12 },
     { id: "research", name: "Research", count: 8 },
-    { id: "company", name: "Company News", count: 7 }
+    { id: "company", name: "Company News", count: 7 },
   ];
 
   const featuredPost = {
     title: "The Future of Quantum Game Development",
-    excerpt: "Exploring how quantum computing will revolutionize game AI, physics simulations, and procedural generation in the next decade.",
+    excerpt:
+      "Exploring how quantum computing will revolutionize game AI, physics simulations, and procedural generation in the next decade.",
     author: "Dr. Sarah Chen",
     date: "December 15, 2024",
     readTime: "8 min read",
     category: "Research",
     likes: 124,
     comments: 23,
-    image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=600&h=300&fit=crop"
+    image:
+      "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=600&h=300&fit=crop",
   };
 
   const posts = [
     {
       title: "Building Scalable Game Architecture with Microservices",
-      excerpt: "Learn how to design game backends that can handle millions of concurrent players using modern microservices patterns.",
+      excerpt:
+        "Learn how to design game backends that can handle millions of concurrent players using modern microservices patterns.",
       author: "Marcus Rodriguez",
       date: "December 12, 2024",
       readTime: "6 min read",
       category: "Technology",
       likes: 89,
       comments: 15,
-      trending: true
+      trending: true,
     },
     {
       title: "Advanced Unity Optimization Techniques",
-      excerpt: "Performance optimization strategies that can boost your Unity game's frame rate by up to 300%.",
+      excerpt:
+        "Performance optimization strategies that can boost your Unity game's frame rate by up to 300%.",
       author: "Alex Thompson",
       date: "December 10, 2024",
       readTime: "12 min read",
       category: "Tutorials",
       likes: 156,
       comments: 34,
-      trending: false
+      trending: false,
     },
     {
       title: "AeThex Labs: Breakthrough in Neural Network Compression",
-      excerpt: "Our research team achieves 90% model size reduction while maintaining accuracy for mobile game AI.",
+      excerpt:
+        "Our research team achieves 90% model size reduction while maintaining accuracy for mobile game AI.",
       author: "Dr. Aisha Patel",
       date: "December 8, 2024",
       readTime: "5 min read",
       category: "Research",
       likes: 203,
       comments: 41,
-      trending: true
+      trending: true,
     },
     {
       title: "Introducing AeThex Cloud Gaming Platform",
-      excerpt: "Launch games instantly across any device with our new cloud gaming infrastructure and global CDN.",
+      excerpt:
+        "Launch games instantly across any device with our new cloud gaming infrastructure and global CDN.",
       author: "AeThex Team",
       date: "December 5, 2024",
       readTime: "4 min read",
       category: "Company News",
       likes: 278,
       comments: 52,
-      trending: false
+      trending: false,
     },
     {
       title: "Real-time Ray Tracing in Web Games",
-      excerpt: "Tutorial: Implementing hardware-accelerated ray tracing in browser-based games using WebGPU.",
+      excerpt:
+        "Tutorial: Implementing hardware-accelerated ray tracing in browser-based games using WebGPU.",
       author: "Jordan Kim",
       date: "December 3, 2024",
       readTime: "15 min read",
       category: "Tutorials",
       likes: 94,
       comments: 18,
-      trending: false
+      trending: false,
     },
     {
       title: "The Evolution of Game AI: From Scripts to Neural Networks",
-      excerpt: "A comprehensive look at how artificial intelligence in games has evolved and where it's heading next.",
+      excerpt:
+        "A comprehensive look at how artificial intelligence in games has evolved and where it's heading next.",
       author: "Dr. Michael Chen",
       date: "December 1, 2024",
       readTime: "10 min read",
       category: "Technology",
       likes: 167,
       comments: 29,
-      trending: false
-    }
+      trending: false,
+    },
   ];
 
-  const filteredPosts = selectedCategory === "all" 
-    ? posts 
-    : posts.filter(post => post.category.toLowerCase() === selectedCategory);
+  const filteredPosts =
+    selectedCategory === "all"
+      ? posts
+      : posts.filter(
+          (post) => post.category.toLowerCase() === selectedCategory,
+        );
 
   if (isLoading) {
-    return <LoadingScreen message="Loading AeThex Blog..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Loading AeThex Blog..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -141,18 +164,23 @@ export default function Blog() {
         <section className="relative py-20 lg:py-32">
           <div className="container mx-auto px-4 text-center relative z-10">
             <div className="max-w-4xl mx-auto space-y-8">
-              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
+              <Badge
+                variant="outline"
+                className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
+              >
                 <PenTool className="h-3 w-3 mr-1" />
                 AeThex Blog
               </Badge>
-              
+
               <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
-                <span className="text-gradient-purple">Insights & Innovation</span>
+                <span className="text-gradient-purple">
+                  Insights & Innovation
+                </span>
               </h1>
-              
+
               <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                Stay updated with the latest developments in game technology, AI research, 
-                and industry insights from the AeThex team.
+                Stay updated with the latest developments in game technology, AI
+                research, and industry insights from the AeThex team.
               </p>
 
               {/* Search and Filter */}
@@ -165,7 +193,10 @@ export default function Blog() {
                     className="w-full pl-10 pr-4 py-3 rounded-lg border border-border/50 bg-background/50 backdrop-blur-sm focus:border-aethex-400 focus:outline-none"
                   />
                 </div>
-                <Button variant="outline" className="flex items-center space-x-2">
+                <Button
+                  variant="outline"
+                  className="flex items-center space-x-2"
+                >
                   <Filter className="h-4 w-4" />
                   <span>Filter</span>
                 </Button>
@@ -181,13 +212,15 @@ export default function Blog() {
               {categories.map((category, index) => (
                 <Button
                   key={category.id}
-                  variant={selectedCategory === category.id ? "default" : "outline"}
+                  variant={
+                    selectedCategory === category.id ? "default" : "outline"
+                  }
                   size="sm"
                   onClick={() => setSelectedCategory(category.id)}
                   className={`animate-scale-in ${
-                    selectedCategory === category.id 
-                      ? 'bg-gradient-to-r from-aethex-500 to-neon-blue' 
-                      : ''
+                    selectedCategory === category.id
+                      ? "bg-gradient-to-r from-aethex-500 to-neon-blue"
+                      : ""
                   }`}
                   style={{ animationDelay: `${index * 0.1}s` }}
                 >
@@ -204,7 +237,7 @@ export default function Blog() {
             <Card className="max-w-4xl mx-auto overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-scale-in">
               <div className="md:flex">
                 <div className="md:w-1/2">
-                  <img 
+                  <img
                     src={featuredPost.image}
                     alt={featuredPost.title}
                     className="w-full h-64 md:h-full object-cover"
@@ -220,7 +253,7 @@ export default function Blog() {
                   <CardDescription className="text-base mb-6">
                     {featuredPost.excerpt}
                   </CardDescription>
-                  
+
                   <div className="flex items-center justify-between mb-6">
                     <div className="flex items-center space-x-4 text-sm text-muted-foreground">
                       <div className="flex items-center space-x-1">
@@ -234,7 +267,7 @@ export default function Blog() {
                     </div>
                     <Badge variant="outline">{featuredPost.readTime}</Badge>
                   </div>
-                  
+
                   <div className="flex items-center justify-between">
                     <Button asChild>
                       <Link to="/blog/quantum-game-development">
@@ -273,7 +306,7 @@ export default function Blog() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
               {filteredPosts.map((post, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
                   style={{ animationDelay: `${index * 0.1}s` }}
@@ -297,7 +330,7 @@ export default function Blog() {
                       {post.excerpt}
                     </CardDescription>
                   </CardHeader>
-                  
+
                   <CardContent className="space-y-4">
                     <div className="flex items-center justify-between text-xs text-muted-foreground">
                       <div className="flex items-center space-x-2">
@@ -309,7 +342,7 @@ export default function Blog() {
                         <span>{post.date}</span>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-center justify-between">
                       <Badge variant="outline" className="text-xs">
                         {post.readTime}
@@ -323,7 +356,7 @@ export default function Blog() {
                         </Button>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-center justify-between pt-2 border-t border-border/30">
                       <div className="flex items-center space-x-4 text-xs text-muted-foreground">
                         <div className="flex items-center space-x-1">
@@ -336,7 +369,9 @@ export default function Blog() {
                         </div>
                       </div>
                       <Button size="sm" asChild>
-                        <Link to={`/blog/${post.title.toLowerCase().replace(/\s+/g, '-')}`}>
+                        <Link
+                          to={`/blog/${post.title.toLowerCase().replace(/\s+/g, "-")}`}
+                        >
                           Read More
                         </Link>
                       </Button>
@@ -356,10 +391,10 @@ export default function Blog() {
                 Stay in the Loop
               </h2>
               <p className="text-xl text-muted-foreground">
-                Subscribe to our newsletter for the latest articles, tutorials, and technology insights 
-                delivered directly to your inbox.
+                Subscribe to our newsletter for the latest articles, tutorials,
+                and technology insights delivered directly to your inbox.
               </p>
-              
+
               <div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
                 <input
                   type="email"
@@ -370,9 +405,10 @@ export default function Blog() {
                   Subscribe
                 </Button>
               </div>
-              
+
               <p className="text-sm text-muted-foreground">
-                Join 10,000+ developers getting weekly insights. Unsubscribe anytime.
+                Join 10,000+ developers getting weekly insights. Unsubscribe
+                anytime.
               </p>
             </div>
           </div>
diff --git a/client/pages/Community.tsx b/client/pages/Community.tsx
index 74d6179d..0359ae12 100644
--- a/client/pages/Community.tsx
+++ b/client/pages/Community.tsx
@@ -1,17 +1,23 @@
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { aethexToast } from "@/lib/aethex-toast";
 import { Link } from "react-router-dom";
-import { 
-  Users, 
-  MessageCircle, 
+import {
+  Users,
+  MessageCircle,
   Github,
   MessageSquare,
-  Twitter, 
+  Twitter,
   ArrowRight,
   Star,
   Calendar,
@@ -21,7 +27,7 @@ import {
   Heart,
   Coffee,
   Code,
-  Gamepad2
+  Gamepad2,
 } from "lucide-react";
 
 export default function Community() {
@@ -48,7 +54,7 @@ export default function Community() {
       members: "15K+ members",
       activity: "500+ daily active",
       link: "/discord",
-      color: "from-purple-500 to-indigo-600"
+      color: "from-purple-500 to-indigo-600",
     },
     {
       name: "GitHub Community",
@@ -57,7 +63,7 @@ export default function Community() {
       members: "8K+ contributors",
       activity: "200+ repositories",
       link: "/github",
-      color: "from-gray-700 to-gray-900"
+      color: "from-gray-700 to-gray-900",
     },
     {
       name: "Twitter Community",
@@ -66,8 +72,8 @@ export default function Community() {
       members: "25K+ followers",
       activity: "Daily updates",
       link: "/twitter",
-      color: "from-blue-400 to-blue-600"
-    }
+      color: "from-blue-400 to-blue-600",
+    },
   ];
 
   const events = [
@@ -78,7 +84,7 @@ export default function Community() {
       type: "Competition",
       participants: 500,
       prize: "$10,000",
-      status: "Registration Open"
+      status: "Registration Open",
     },
     {
       title: "Weekly Developer Meetup",
@@ -87,7 +93,7 @@ export default function Community() {
       type: "Meetup",
       participants: 50,
       prize: null,
-      status: "Recurring"
+      status: "Recurring",
     },
     {
       title: "AI in Games Workshop",
@@ -96,46 +102,55 @@ export default function Community() {
       type: "Workshop",
       participants: 100,
       prize: null,
-      status: "Upcoming"
-    }
+      status: "Upcoming",
+    },
   ];
 
   const contributors = [
     {
       name: "Alex Developer",
-      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
+      avatar:
+        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
       title: "Community Leader",
       contributions: 156,
       badge: "🏆 Top Contributor",
-      speciality: "Game Development"
+      speciality: "Game Development",
     },
     {
       name: "Sarah Coder",
-      avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b029?w=100&h=100&fit=crop&crop=face",
+      avatar:
+        "https://images.unsplash.com/photo-1494790108755-2616b612b029?w=100&h=100&fit=crop&crop=face",
       title: "Documentation Expert",
       contributions: 89,
       badge: "📚 Knowledge Hero",
-      speciality: "Technical Writing"
+      speciality: "Technical Writing",
     },
     {
       name: "Jordan AI",
-      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
+      avatar:
+        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
       title: "AI Researcher",
       contributions: 134,
       badge: "🧠 AI Pioneer",
-      speciality: "Machine Learning"
-    }
+      speciality: "Machine Learning",
+    },
   ];
 
   const stats = [
     { label: "Community Members", value: "50K+", icon: Users },
     { label: "Daily Messages", value: "2K+", icon: MessageCircle },
     { label: "Open Source Projects", value: "200+", icon: Code },
-    { label: "Games Created", value: "1K+", icon: Gamepad2 }
+    { label: "Games Created", value: "1K+", icon: Gamepad2 },
   ];
 
   if (isLoading) {
-    return <LoadingScreen message="Connecting to Community..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Connecting to Community..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -145,29 +160,44 @@ export default function Community() {
         <section className="relative py-20 lg:py-32">
           <div className="container mx-auto px-4 text-center relative z-10">
             <div className="max-w-4xl mx-auto space-y-8">
-              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
+              <Badge
+                variant="outline"
+                className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
+              >
                 <Users className="h-3 w-3 mr-1" />
                 AeThex Community
               </Badge>
-              
+
               <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
-                <span className="text-gradient-purple">Join the Innovation Network</span>
+                <span className="text-gradient-purple">
+                  Join the Innovation Network
+                </span>
               </h1>
-              
+
               <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                Connect with developers, creators, and innovators from around the world. 
-                Share knowledge, collaborate on projects, and grow together.
+                Connect with developers, creators, and innovators from around
+                the world. Share knowledge, collaborate on projects, and grow
+                together.
               </p>
 
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift"
+                >
                   <Link to="/discord" className="flex items-center space-x-2">
                     <MessageSquare className="h-5 w-5" />
                     <span>Join Discord</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-border/50 hover-lift">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-border/50 hover-lift"
+                >
                   <Link to="/github">View Projects</Link>
                 </Button>
               </div>
@@ -182,7 +212,7 @@ export default function Community() {
               {stats.map((stat, index) => {
                 const Icon = stat.icon;
                 return (
-                  <div 
+                  <div
                     key={index}
                     className="text-center space-y-3 animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
@@ -193,8 +223,12 @@ export default function Community() {
                       </div>
                     </div>
                     <div>
-                      <div className="text-3xl font-bold text-gradient">{stat.value}</div>
-                      <p className="text-sm text-muted-foreground uppercase tracking-wide">{stat.label}</p>
+                      <div className="text-3xl font-bold text-gradient">
+                        {stat.value}
+                      </div>
+                      <p className="text-sm text-muted-foreground uppercase tracking-wide">
+                        {stat.label}
+                      </p>
                     </div>
                   </div>
                 );
@@ -219,13 +253,15 @@ export default function Community() {
               {platforms.map((platform, index) => {
                 const Icon = platform.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.2}s` }}
                   >
                     <CardHeader>
-                      <div className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${platform.color} flex items-center justify-center mb-4`}>
+                      <div
+                        className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${platform.color} flex items-center justify-center mb-4`}
+                      >
                         <Icon className="h-8 w-8 text-white" />
                       </div>
                       <CardTitle className="text-xl">{platform.name}</CardTitle>
@@ -235,14 +271,18 @@ export default function Community() {
                       <div className="grid grid-cols-1 gap-2 text-sm">
                         <div className="flex justify-between">
                           <span>Members:</span>
-                          <span className="font-semibold text-aethex-400">{platform.members}</span>
+                          <span className="font-semibold text-aethex-400">
+                            {platform.members}
+                          </span>
                         </div>
                         <div className="flex justify-between">
                           <span>Activity:</span>
-                          <span className="font-semibold text-aethex-400">{platform.activity}</span>
+                          <span className="font-semibold text-aethex-400">
+                            {platform.activity}
+                          </span>
                         </div>
                       </div>
-                      
+
                       <Button asChild className="w-full">
                         <Link to={platform.link}>
                           Join Now
@@ -271,7 +311,7 @@ export default function Community() {
 
             <div className="max-w-4xl mx-auto space-y-6">
               {events.map((event, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right"
                   style={{ animationDelay: `${index * 0.1}s` }}
@@ -280,15 +320,25 @@ export default function Community() {
                     <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                       <div className="space-y-2">
                         <div className="flex items-center space-x-2">
-                          <h3 className="text-xl font-semibold text-gradient">{event.title}</h3>
-                          <Badge 
-                            variant={event.status === 'Registration Open' ? 'default' : 'outline'}
-                            className={event.status === 'Registration Open' ? 'animate-pulse' : ''}
+                          <h3 className="text-xl font-semibold text-gradient">
+                            {event.title}
+                          </h3>
+                          <Badge
+                            variant={
+                              event.status === "Registration Open"
+                                ? "default"
+                                : "outline"
+                            }
+                            className={
+                              event.status === "Registration Open"
+                                ? "animate-pulse"
+                                : ""
+                            }
                           >
                             {event.status}
                           </Badge>
                         </div>
-                        
+
                         <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
                           <div className="flex items-center space-x-1">
                             <Calendar className="h-4 w-4" />
@@ -310,11 +360,13 @@ export default function Community() {
                           )}
                         </div>
                       </div>
-                      
+
                       <div className="flex items-center space-x-2">
                         <Badge variant="outline">{event.type}</Badge>
                         <Button size="sm">
-                          {event.status === 'Registration Open' ? 'Register' : 'Learn More'}
+                          {event.status === "Registration Open"
+                            ? "Register"
+                            : "Learn More"}
                         </Button>
                       </div>
                     </div>
@@ -339,25 +391,37 @@ export default function Community() {
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
               {contributors.map((contributor, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                   style={{ animationDelay: `${index * 0.2}s` }}
                 >
                   <CardContent className="p-6">
-                    <img 
+                    <img
                       src={contributor.avatar}
                       alt={contributor.name}
                       className="w-20 h-20 rounded-full mx-auto mb-4 ring-4 ring-aethex-400/20"
                     />
-                    <h3 className="font-semibold text-lg text-gradient">{contributor.name}</h3>
-                    <p className="text-sm text-muted-foreground mb-2">{contributor.title}</p>
-                    <Badge variant="outline" className="mb-4">{contributor.speciality}</Badge>
-                    
+                    <h3 className="font-semibold text-lg text-gradient">
+                      {contributor.name}
+                    </h3>
+                    <p className="text-sm text-muted-foreground mb-2">
+                      {contributor.title}
+                    </p>
+                    <Badge variant="outline" className="mb-4">
+                      {contributor.speciality}
+                    </Badge>
+
                     <div className="space-y-2">
-                      <div className="text-2xl font-bold text-aethex-400">{contributor.contributions}</div>
-                      <div className="text-sm text-muted-foreground">Contributions</div>
-                      <div className="text-sm font-medium">{contributor.badge}</div>
+                      <div className="text-2xl font-bold text-aethex-400">
+                        {contributor.contributions}
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        Contributions
+                      </div>
+                      <div className="text-sm font-medium">
+                        {contributor.badge}
+                      </div>
                     </div>
                   </CardContent>
                 </Card>
@@ -374,19 +438,28 @@ export default function Community() {
                 Ready to Join Our Community?
               </h2>
               <p className="text-xl text-muted-foreground">
-                Connect with thousands of developers, share your projects, and grow your skills 
-                in our supportive and innovative community.
+                Connect with thousands of developers, share your projects, and
+                grow your skills in our supportive and innovative community.
               </p>
-              
+
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/discord" className="flex items-center space-x-2">
                     <Heart className="h-5 w-5" />
                     <span>Join Community</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/events">View All Events</Link>
                 </Button>
               </div>
@@ -395,17 +468,23 @@ export default function Community() {
                 <div className="text-center">
                   <Coffee className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Weekly Meetups</h3>
-                  <p className="text-sm text-muted-foreground">Virtual coffee chats</p>
+                  <p className="text-sm text-muted-foreground">
+                    Virtual coffee chats
+                  </p>
                 </div>
                 <div className="text-center">
                   <Star className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Recognition</h3>
-                  <p className="text-sm text-muted-foreground">Contributor rewards</p>
+                  <p className="text-sm text-muted-foreground">
+                    Contributor rewards
+                  </p>
                 </div>
                 <div className="text-center">
                   <TrendingUp className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Growth</h3>
-                  <p className="text-sm text-muted-foreground">Learn & advance</p>
+                  <p className="text-sm text-muted-foreground">
+                    Learn & advance
+                  </p>
                 </div>
               </div>
             </div>
diff --git a/client/pages/Dashboard.tsx b/client/pages/Dashboard.tsx
index 79da1bb6..727a7d4c 100644
--- a/client/pages/Dashboard.tsx
+++ b/client/pages/Dashboard.tsx
@@ -1,18 +1,24 @@
 import { useState, useEffect } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { Link } from "react-router-dom";
-import { 
-  User, 
-  Settings, 
-  Activity, 
-  TrendingUp, 
-  Zap, 
-  Target, 
-  Users, 
+import {
+  User,
+  Settings,
+  Activity,
+  TrendingUp,
+  Zap,
+  Target,
+  Users,
   Calendar,
   Bell,
   Star,
@@ -25,7 +31,7 @@ import {
   MoreHorizontal,
   Play,
   Pause,
-  BarChart3
+  BarChart3,
 } from "lucide-react";
 
 export default function Dashboard() {
@@ -47,16 +53,37 @@ export default function Dashboard() {
     level: 15,
     xp: 2450,
     nextLevelXp: 3000,
-    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
+    avatar:
+      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
     joinDate: "March 2024",
-    streak: 12
+    streak: 12,
   };
 
   const stats = [
-    { label: "Active Projects", value: activeProjects, icon: Rocket, color: "from-blue-500 to-purple-600" },
-    { label: "Completed Tasks", value: 47, icon: Trophy, color: "from-green-500 to-blue-600" },
-    { label: "Team Members", value: 8, icon: Users, color: "from-purple-500 to-pink-600" },
-    { label: "Performance Score", value: "94%", icon: TrendingUp, color: "from-orange-500 to-red-600" }
+    {
+      label: "Active Projects",
+      value: activeProjects,
+      icon: Rocket,
+      color: "from-blue-500 to-purple-600",
+    },
+    {
+      label: "Completed Tasks",
+      value: 47,
+      icon: Trophy,
+      color: "from-green-500 to-blue-600",
+    },
+    {
+      label: "Team Members",
+      value: 8,
+      icon: Users,
+      color: "from-purple-500 to-pink-600",
+    },
+    {
+      label: "Performance Score",
+      value: "94%",
+      icon: TrendingUp,
+      color: "from-orange-500 to-red-600",
+    },
   ];
 
   const recentProjects = [
@@ -66,7 +93,7 @@ export default function Dashboard() {
       status: "In Progress",
       dueDate: "Dec 15",
       team: 4,
-      priority: "High"
+      priority: "High",
     },
     {
       name: "Blockchain Integration",
@@ -74,7 +101,7 @@ export default function Dashboard() {
       status: "Development",
       dueDate: "Dec 20",
       team: 3,
-      priority: "Medium"
+      priority: "Medium",
     },
     {
       name: "Cloud Infrastructure",
@@ -82,26 +109,60 @@ export default function Dashboard() {
       status: "Testing",
       dueDate: "Dec 10",
       team: 6,
-      priority: "High"
-    }
+      priority: "High",
+    },
   ];
 
   const achievements = [
-    { title: "Code Master", description: "Completed 50+ coding challenges", icon: Code, earned: true },
-    { title: "Team Player", description: "Collaborated on 10+ projects", icon: Users, earned: true },
-    { title: "Innovation Leader", description: "Led 5+ innovative projects", icon: Rocket, earned: false },
-    { title: "Database Wizard", description: "Optimized 20+ databases", icon: Database, earned: false }
+    {
+      title: "Code Master",
+      description: "Completed 50+ coding challenges",
+      icon: Code,
+      earned: true,
+    },
+    {
+      title: "Team Player",
+      description: "Collaborated on 10+ projects",
+      icon: Users,
+      earned: true,
+    },
+    {
+      title: "Innovation Leader",
+      description: "Led 5+ innovative projects",
+      icon: Rocket,
+      earned: false,
+    },
+    {
+      title: "Database Wizard",
+      description: "Optimized 20+ databases",
+      icon: Database,
+      earned: false,
+    },
   ];
 
   const quickActions = [
-    { title: "Start New Project", icon: Rocket, color: "from-blue-500 to-purple-600" },
+    {
+      title: "Start New Project",
+      icon: Rocket,
+      color: "from-blue-500 to-purple-600",
+    },
     { title: "Join Team", icon: Users, color: "from-green-500 to-blue-600" },
     { title: "Access Labs", icon: Zap, color: "from-yellow-500 to-orange-600" },
-    { title: "View Analytics", icon: BarChart3, color: "from-purple-500 to-pink-600" }
+    {
+      title: "View Analytics",
+      icon: BarChart3,
+      color: "from-purple-500 to-pink-600",
+    },
   ];
 
   if (isLoading) {
-    return <LoadingScreen message="Loading your dashboard..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Loading your dashboard..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -140,7 +201,7 @@ export default function Dashboard() {
                 <CardContent className="p-6">
                   <div className="text-center space-y-4">
                     <div className="relative">
-                      <img 
+                      <img
                         src={user.avatar}
                         alt="User Avatar"
                         className="w-20 h-20 rounded-full mx-auto ring-4 ring-aethex-400/20 hover:ring-aethex-400/50 transition-all duration-300"
@@ -148,23 +209,34 @@ export default function Dashboard() {
                       <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-background animate-pulse" />
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gradient">{user.name}</h3>
-                      <p className="text-sm text-muted-foreground">{user.role}</p>
-                      <Badge variant="outline" className="mt-2 border-aethex-400/50 text-aethex-400">
+                      <h3 className="font-semibold text-gradient">
+                        {user.name}
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        {user.role}
+                      </p>
+                      <Badge
+                        variant="outline"
+                        className="mt-2 border-aethex-400/50 text-aethex-400"
+                      >
                         Level {user.level}
                       </Badge>
                     </div>
-                    
+
                     {/* XP Progress */}
                     <div className="space-y-2">
                       <div className="flex justify-between text-sm">
                         <span>XP Progress</span>
-                        <span>{user.xp} / {user.nextLevelXp}</span>
+                        <span>
+                          {user.xp} / {user.nextLevelXp}
+                        </span>
                       </div>
                       <div className="w-full bg-muted rounded-full h-2">
-                        <div 
+                        <div
                           className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full transition-all duration-500 glow-blue"
-                          style={{ width: `${(user.xp / user.nextLevelXp) * 100}%` }}
+                          style={{
+                            width: `${(user.xp / user.nextLevelXp) * 100}%`,
+                          }}
                         />
                       </div>
                     </div>
@@ -187,7 +259,9 @@ export default function Dashboard() {
                         className="w-full justify-start hover-lift interactive-scale"
                         style={{ animationDelay: `${index * 0.1}s` }}
                       >
-                        <div className={`p-1 rounded bg-gradient-to-r ${action.color} mr-3`}>
+                        <div
+                          className={`p-1 rounded bg-gradient-to-r ${action.color} mr-3`}
+                        >
                           <Icon className="h-4 w-4 text-white" />
                         </div>
                         {action.title}
@@ -205,7 +279,7 @@ export default function Dashboard() {
                 {stats.map((stat, index) => {
                   const Icon = stat.icon;
                   return (
-                    <Card 
+                    <Card
                       key={index}
                       className="bg-card/50 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                       style={{ animationDelay: `${index * 0.1}s` }}
@@ -213,10 +287,16 @@ export default function Dashboard() {
                       <CardContent className="p-6">
                         <div className="flex items-center justify-between">
                           <div>
-                            <p className="text-sm text-muted-foreground">{stat.label}</p>
-                            <p className="text-2xl font-bold text-gradient">{stat.value}</p>
+                            <p className="text-sm text-muted-foreground">
+                              {stat.label}
+                            </p>
+                            <p className="text-2xl font-bold text-gradient">
+                              {stat.value}
+                            </p>
                           </div>
-                          <div className={`p-3 rounded-lg bg-gradient-to-r ${stat.color}`}>
+                          <div
+                            className={`p-3 rounded-lg bg-gradient-to-r ${stat.color}`}
+                          >
                             <Icon className="h-6 w-6 text-white" />
                           </div>
                         </div>
@@ -231,8 +311,12 @@ export default function Dashboard() {
                 <CardHeader>
                   <div className="flex justify-between items-center">
                     <div>
-                      <CardTitle className="text-gradient">Recent Projects</CardTitle>
-                      <CardDescription>Your active development projects</CardDescription>
+                      <CardTitle className="text-gradient">
+                        Recent Projects
+                      </CardTitle>
+                      <CardDescription>
+                        Your active development projects
+                      </CardDescription>
                     </div>
                     <Button variant="outline" size="sm" className="hover-lift">
                       View All
@@ -242,7 +326,7 @@ export default function Dashboard() {
                 </CardHeader>
                 <CardContent className="space-y-4">
                   {recentProjects.map((project, index) => (
-                    <div 
+                    <div
                       key={index}
                       className="flex items-center justify-between p-4 rounded-lg border border-border/30 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right"
                       style={{ animationDelay: `${index * 0.1}s` }}
@@ -260,21 +344,31 @@ export default function Dashboard() {
                       </div>
                       <div className="flex items-center space-x-4">
                         <div className="text-right">
-                          <p className="text-sm font-medium">{project.progress}%</p>
+                          <p className="text-sm font-medium">
+                            {project.progress}%
+                          </p>
                           <div className="w-20 bg-muted rounded-full h-2 mt-1">
-                            <div 
+                            <div
                               className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full"
                               style={{ width: `${project.progress}%` }}
                             />
                           </div>
                         </div>
-                        <Badge 
-                          variant={project.priority === 'High' ? 'destructive' : 'secondary'}
+                        <Badge
+                          variant={
+                            project.priority === "High"
+                              ? "destructive"
+                              : "secondary"
+                          }
                           className="animate-pulse"
                         >
                           {project.priority}
                         </Badge>
-                        <Button variant="ghost" size="sm" className="hover-lift">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="hover-lift"
+                        >
                           <MoreHorizontal className="h-4 w-4" />
                         </Button>
                       </div>
@@ -287,32 +381,40 @@ export default function Dashboard() {
               <Card className="bg-card/50 border-border/50 animate-slide-up">
                 <CardHeader>
                   <CardTitle className="text-gradient">Achievements</CardTitle>
-                  <CardDescription>Your progress and accomplishments</CardDescription>
+                  <CardDescription>
+                    Your progress and accomplishments
+                  </CardDescription>
                 </CardHeader>
                 <CardContent>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     {achievements.map((achievement, index) => {
                       const Icon = achievement.icon;
                       return (
-                        <div 
+                        <div
                           key={index}
                           className={`p-4 rounded-lg border transition-all duration-300 hover-lift animate-scale-in ${
-                            achievement.earned 
-                              ? 'border-aethex-400/50 bg-aethex-500/10' 
-                              : 'border-border/30 opacity-60'
+                            achievement.earned
+                              ? "border-aethex-400/50 bg-aethex-500/10"
+                              : "border-border/30 opacity-60"
                           }`}
                           style={{ animationDelay: `${index * 0.1}s` }}
                         >
                           <div className="flex items-center space-x-3">
-                            <div className={`p-2 rounded-lg ${
-                              achievement.earned 
-                                ? 'bg-gradient-to-r from-aethex-500 to-neon-blue' 
-                                : 'bg-muted'
-                            }`}>
-                              <Icon className={`h-5 w-5 ${achievement.earned ? 'text-white' : 'text-muted-foreground'}`} />
+                            <div
+                              className={`p-2 rounded-lg ${
+                                achievement.earned
+                                  ? "bg-gradient-to-r from-aethex-500 to-neon-blue"
+                                  : "bg-muted"
+                              }`}
+                            >
+                              <Icon
+                                className={`h-5 w-5 ${achievement.earned ? "text-white" : "text-muted-foreground"}`}
+                              />
                             </div>
                             <div>
-                              <h4 className={`font-semibold ${achievement.earned ? 'text-gradient' : ''}`}>
+                              <h4
+                                className={`font-semibold ${achievement.earned ? "text-gradient" : ""}`}
+                              >
                                 {achievement.title}
                               </h4>
                               <p className="text-sm text-muted-foreground">
diff --git a/client/pages/DevelopmentConsulting.tsx b/client/pages/DevelopmentConsulting.tsx
index 57b799e2..5d365961 100644
--- a/client/pages/DevelopmentConsulting.tsx
+++ b/client/pages/DevelopmentConsulting.tsx
@@ -1,18 +1,24 @@
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { aethexToast } from "@/lib/aethex-toast";
 import { Link } from "react-router-dom";
-import { 
-  BriefcaseIcon, 
-  Code, 
-  Sparkles, 
-  Zap, 
-  Users, 
-  Trophy, 
+import {
+  BriefcaseIcon,
+  Code,
+  Sparkles,
+  Zap,
+  Users,
+  Trophy,
   Target,
   ArrowRight,
   CheckCircle,
@@ -27,7 +33,7 @@ import {
   Lightbulb,
   Puzzle,
   Rocket,
-  Globe
+  Globe,
 } from "lucide-react";
 
 export default function DevelopmentConsulting() {
@@ -51,48 +57,50 @@ export default function DevelopmentConsulting() {
   const consultingServices = [
     {
       title: "Technical Architecture Review",
-      description: "Comprehensive analysis of your system architecture and scalability",
+      description:
+        "Comprehensive analysis of your system architecture and scalability",
       icon: Database,
       duration: "2-4 weeks",
       price: "Starting at $8,000",
       features: [
         "System architecture audit",
-        "Performance bottleneck analysis", 
+        "Performance bottleneck analysis",
         "Scalability recommendations",
         "Security assessment",
-        "Technology stack evaluation"
+        "Technology stack evaluation",
       ],
-      color: "from-blue-500 to-cyan-600"
+      color: "from-blue-500 to-cyan-600",
     },
     {
       title: "DevOps & Infrastructure",
-      description: "Streamline your development pipeline and cloud infrastructure",
+      description:
+        "Streamline your development pipeline and cloud infrastructure",
       icon: Cloud,
-      duration: "3-6 weeks", 
+      duration: "3-6 weeks",
       price: "Starting at $12,000",
       features: [
         "CI/CD pipeline setup",
         "Cloud migration strategy",
         "Monitoring & alerting",
         "Container orchestration",
-        "Infrastructure as code"
+        "Infrastructure as code",
       ],
-      color: "from-green-500 to-emerald-600"
+      color: "from-green-500 to-emerald-600",
     },
     {
       title: "Code Quality & Optimization",
       description: "Improve code quality, performance, and maintainability",
       icon: Code,
       duration: "2-8 weeks",
-      price: "Starting at $6,000", 
+      price: "Starting at $6,000",
       features: [
         "Code review & refactoring",
         "Performance optimization",
         "Testing strategy",
         "Documentation improvement",
-        "Best practices implementation"
+        "Best practices implementation",
       ],
-      color: "from-purple-500 to-indigo-600"
+      color: "from-purple-500 to-indigo-600",
     },
     {
       title: "Team & Process Consulting",
@@ -105,37 +113,57 @@ export default function DevelopmentConsulting() {
         "Team structure optimization",
         "Workflow automation",
         "Knowledge transfer",
-        "Leadership coaching"
+        "Leadership coaching",
       ],
-      color: "from-orange-500 to-red-600"
-    }
+      color: "from-orange-500 to-red-600",
+    },
   ];
 
   const expertise = [
     {
       category: "Frontend Technologies",
-      technologies: ["React", "Vue.js", "Angular", "TypeScript", "Next.js", "Tailwind CSS"],
+      technologies: [
+        "React",
+        "Vue.js",
+        "Angular",
+        "TypeScript",
+        "Next.js",
+        "Tailwind CSS",
+      ],
       icon: Puzzle,
-      projects: "200+ projects"
+      projects: "200+ projects",
     },
     {
       category: "Backend & APIs",
       technologies: ["Node.js", "Python", "Java", "Go", "GraphQL", "REST APIs"],
       icon: Settings,
-      projects: "150+ systems"
+      projects: "150+ systems",
     },
     {
       category: "Cloud & Infrastructure",
-      technologies: ["AWS", "Azure", "GCP", "Docker", "Kubernetes", "Terraform"],
+      technologies: [
+        "AWS",
+        "Azure",
+        "GCP",
+        "Docker",
+        "Kubernetes",
+        "Terraform",
+      ],
       icon: Cloud,
-      projects: "100+ deployments"
+      projects: "100+ deployments",
     },
     {
       category: "Databases & Analytics",
-      technologies: ["PostgreSQL", "MongoDB", "Redis", "Elasticsearch", "BigQuery"],
+      technologies: [
+        "PostgreSQL",
+        "MongoDB",
+        "Redis",
+        "Elasticsearch",
+        "BigQuery",
+      ],
       icon: Database,
-      projects: "80+ implementations"
-    }
+      projects: "80+ implementations",
+    },
   ];
 
   const packages = [
@@ -149,10 +177,10 @@ export default function DevelopmentConsulting() {
         "Key recommendations",
         "Priority action items",
         "Executive summary",
-        "30-min follow-up call"
+        "30-min follow-up call",
       ],
       popular: false,
-      color: "from-gray-500 to-gray-600"
+      color: "from-gray-500 to-gray-600",
     },
     {
       name: "Comprehensive Audit",
@@ -165,10 +193,10 @@ export default function DevelopmentConsulting() {
         "Implementation roadmap",
         "Risk assessment",
         "Team presentation",
-        "3 months email support"
+        "3 months email support",
       ],
       popular: true,
-      color: "from-aethex-500 to-neon-blue"
+      color: "from-aethex-500 to-neon-blue",
     },
     {
       name: "Strategic Partnership",
@@ -181,11 +209,11 @@ export default function DevelopmentConsulting() {
         "Implementation support",
         "Team training",
         "Priority support",
-        "Quarterly reviews"
+        "Quarterly reviews",
       ],
       popular: false,
-      color: "from-purple-500 to-pink-600"
-    }
+      color: "from-purple-500 to-pink-600",
+    },
   ];
 
   const caseStudies = [
@@ -194,8 +222,12 @@ export default function DevelopmentConsulting() {
       client: "Fortune 500 Retailer",
       challenge: "10x traffic growth causing system failures",
       solution: "Microservices architecture with auto-scaling",
-      results: ["99.99% uptime achieved", "50% cost reduction", "3x faster load times"],
-      tech: ["Kubernetes", "Redis", "CDN"]
+      results: [
+        "99.99% uptime achieved",
+        "50% cost reduction",
+        "3x faster load times",
+      ],
+      tech: ["Kubernetes", "Redis", "CDN"],
     },
     {
       title: "FinTech Security Overhaul",
@@ -203,20 +235,30 @@ export default function DevelopmentConsulting() {
       challenge: "Security compliance for banking regulations",
       solution: "Zero-trust architecture with enhanced monitoring",
       results: ["SOC 2 compliance", "Zero breaches", "40% faster audits"],
-      tech: ["OAuth 2.0", "Vault", "Istio"]
+      tech: ["OAuth 2.0", "Vault", "Istio"],
     },
     {
       title: "Legacy System Modernization",
       client: "Healthcare Provider",
       challenge: "20-year-old system blocking innovation",
       solution: "Gradual migration to cloud-native architecture",
-      results: ["6 months migration", "60% performance boost", "Modern API ecosystem"],
-      tech: ["Docker", "GraphQL", "Postgres"]
-    }
+      results: [
+        "6 months migration",
+        "60% performance boost",
+        "Modern API ecosystem",
+      ],
+      tech: ["Docker", "GraphQL", "Postgres"],
+    },
   ];
 
   if (isLoading) {
-    return <LoadingScreen message="Loading Development Consulting..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Loading Development Consulting..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -234,39 +276,54 @@ export default function DevelopmentConsulting() {
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 3}s`,
                   animationDuration: `${3 + Math.random() * 2}s`,
-                  fontSize: `${8 + Math.random() * 6}px`
+                  fontSize: `${8 + Math.random() * 6}px`,
                 }}
               >
-                {'⚡🔧📊💡'.charAt(Math.floor(Math.random() * 4))}
+                {"⚡🔧📊💡".charAt(Math.floor(Math.random() * 4))}
               </div>
             ))}
           </div>
 
           <div className="container mx-auto px-4 text-center relative z-10">
             <div className="max-w-4xl mx-auto space-y-8">
-              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
+              <Badge
+                variant="outline"
+                className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
+              >
                 <BriefcaseIcon className="h-3 w-3 mr-1" />
                 Development Consulting Division
               </Badge>
-              
+
               <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
-                <span className="text-gradient-purple">Strategic Technology Consulting</span>
+                <span className="text-gradient-purple">
+                  Strategic Technology Consulting
+                </span>
               </h1>
-              
+
               <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                Expert guidance to optimize your development processes, scale your systems, 
-                and accelerate your digital transformation journey.
+                Expert guidance to optimize your development processes, scale
+                your systems, and accelerate your digital transformation
+                journey.
               </p>
 
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <Target className="h-5 w-5" />
                     <span>Get Free Assessment</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-border/50 hover-lift">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-border/50 hover-lift"
+                >
                   <Link to="/docs">Case Studies</Link>
                 </Button>
               </div>
@@ -290,18 +347,22 @@ export default function DevelopmentConsulting() {
               {consultingServices.map((service, index) => {
                 const Icon = service.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
                   >
                     <CardHeader>
                       <div className="flex items-center space-x-4">
-                        <div className={`p-3 rounded-lg bg-gradient-to-r ${service.color}`}>
+                        <div
+                          className={`p-3 rounded-lg bg-gradient-to-r ${service.color}`}
+                        >
                           <Icon className="h-6 w-6 text-white" />
                         </div>
                         <div className="flex-1">
-                          <CardTitle className="text-xl">{service.title}</CardTitle>
+                          <CardTitle className="text-xl">
+                            {service.title}
+                          </CardTitle>
                           <CardDescription className="mt-1">
                             {service.description}
                           </CardDescription>
@@ -311,13 +372,16 @@ export default function DevelopmentConsulting() {
                     <CardContent className="space-y-4">
                       <div className="grid grid-cols-1 gap-2">
                         {service.features.map((feature, featureIndex) => (
-                          <div key={featureIndex} className="flex items-center space-x-2 text-sm">
+                          <div
+                            key={featureIndex}
+                            className="flex items-center space-x-2 text-sm"
+                          >
                             <CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
                             <span>{feature}</span>
                           </div>
                         ))}
                       </div>
-                      
+
                       <div className="flex justify-between items-center pt-4 border-t border-border/30">
                         <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                           <Clock className="h-4 w-4" />
@@ -352,7 +416,7 @@ export default function DevelopmentConsulting() {
               {expertise.map((area, index) => {
                 const Icon = area.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="bg-card/30 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
@@ -360,12 +424,18 @@ export default function DevelopmentConsulting() {
                     <CardHeader className="text-center">
                       <Icon className="h-12 w-12 text-aethex-400 mx-auto mb-3" />
                       <CardTitle className="text-lg">{area.category}</CardTitle>
-                      <Badge variant="outline" className="text-xs">{area.projects}</Badge>
+                      <Badge variant="outline" className="text-xs">
+                        {area.projects}
+                      </Badge>
                     </CardHeader>
                     <CardContent>
                       <div className="flex flex-wrap gap-1">
                         {area.technologies.map((tech, techIndex) => (
-                          <Badge key={techIndex} variant="secondary" className="text-xs">
+                          <Badge
+                            key={techIndex}
+                            variant="secondary"
+                            className="text-xs"
+                          >
                             {tech}
                           </Badge>
                         ))}
@@ -392,12 +462,12 @@ export default function DevelopmentConsulting() {
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
               {packages.map((pkg, index) => (
-                <Card 
+                <Card
                   key={index}
                   className={`relative overflow-hidden transition-all duration-500 hover-lift animate-scale-in ${
-                    pkg.popular 
-                      ? 'border-aethex-500 glow-blue scale-105' 
-                      : 'border-border/50 hover:border-aethex-400/50'
+                    pkg.popular
+                      ? "border-aethex-500 glow-blue scale-105"
+                      : "border-border/50 hover:border-aethex-400/50"
                   }`}
                   style={{ animationDelay: `${index * 0.2}s` }}
                   onClick={() => setActivePackage(index)}
@@ -407,36 +477,45 @@ export default function DevelopmentConsulting() {
                       MOST POPULAR
                     </div>
                   )}
-                  
+
                   <CardHeader className="text-center">
                     <CardTitle className="text-2xl">{pkg.name}</CardTitle>
-                    <CardDescription className="mt-2">{pkg.description}</CardDescription>
+                    <CardDescription className="mt-2">
+                      {pkg.description}
+                    </CardDescription>
                     <div className="mt-4">
-                      <div className={`text-3xl font-bold bg-gradient-to-r ${pkg.color} bg-clip-text text-transparent`}>
+                      <div
+                        className={`text-3xl font-bold bg-gradient-to-r ${pkg.color} bg-clip-text text-transparent`}
+                      >
                         {pkg.price}
                       </div>
-                      <div className="text-sm text-muted-foreground">{pkg.duration}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {pkg.duration}
+                      </div>
                     </div>
                   </CardHeader>
-                  
+
                   <CardContent className="space-y-4">
                     <div className="space-y-2">
                       {pkg.features.map((feature, featureIndex) => (
-                        <div key={featureIndex} className="flex items-center space-x-2 text-sm">
+                        <div
+                          key={featureIndex}
+                          className="flex items-center space-x-2 text-sm"
+                        >
                           <CheckCircle className="h-4 w-4 text-aethex-400 flex-shrink-0" />
                           <span>{feature}</span>
                         </div>
                       ))}
                     </div>
-                    
-                    <Button 
-                      asChild 
+
+                    <Button
+                      asChild
                       className={`w-full ${
-                        pkg.popular 
-                          ? 'bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90' 
-                          : ''
+                        pkg.popular
+                          ? "bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
+                          : ""
                       }`}
-                      variant={pkg.popular ? 'default' : 'outline'}
+                      variant={pkg.popular ? "default" : "outline"}
                     >
                       <Link to="/contact">Get Started</Link>
                     </Button>
@@ -461,40 +540,51 @@ export default function DevelopmentConsulting() {
 
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
               {caseStudies.map((study, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
                   style={{ animationDelay: `${index * 0.2}s` }}
                 >
                   <CardHeader>
-                    <Badge variant="outline" className="w-fit mb-2">{study.client}</Badge>
+                    <Badge variant="outline" className="w-fit mb-2">
+                      {study.client}
+                    </Badge>
                     <CardTitle className="text-lg">{study.title}</CardTitle>
                     <CardDescription className="text-sm">
                       <strong>Challenge:</strong> {study.challenge}
                     </CardDescription>
                   </CardHeader>
-                  
+
                   <CardContent className="space-y-4">
                     <div>
                       <h4 className="font-semibold text-sm mb-2">Solution:</h4>
-                      <p className="text-sm text-muted-foreground">{study.solution}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {study.solution}
+                      </p>
                     </div>
-                    
+
                     <div>
                       <h4 className="font-semibold text-sm mb-2">Results:</h4>
                       <ul className="space-y-1">
                         {study.results.map((result, resultIndex) => (
-                          <li key={resultIndex} className="flex items-center space-x-2 text-sm">
+                          <li
+                            key={resultIndex}
+                            className="flex items-center space-x-2 text-sm"
+                          >
                             <TrendingUp className="h-3 w-3 text-green-400 flex-shrink-0" />
                             <span>{result}</span>
                           </li>
                         ))}
                       </ul>
                     </div>
-                    
+
                     <div className="flex flex-wrap gap-1">
                       {study.tech.map((tech, techIndex) => (
-                        <Badge key={techIndex} variant="secondary" className="text-xs">
+                        <Badge
+                          key={techIndex}
+                          variant="secondary"
+                          className="text-xs"
+                        >
                           {tech}
                         </Badge>
                       ))}
@@ -514,18 +604,28 @@ export default function DevelopmentConsulting() {
                 Ready to Accelerate Your Development?
               </h2>
               <p className="text-xl text-muted-foreground">
-                Let our experts analyze your current setup and provide a roadmap for optimal performance and scalability.
+                Let our experts analyze your current setup and provide a roadmap
+                for optimal performance and scalability.
               </p>
-              
+
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <Lightbulb className="h-5 w-5" />
                     <span>Get Free Consultation</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/docs">Download Case Studies</Link>
                 </Button>
               </div>
@@ -534,17 +634,23 @@ export default function DevelopmentConsulting() {
                 <div className="text-center">
                   <Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Confidential</h3>
-                  <p className="text-sm text-muted-foreground">NDAs & security first</p>
+                  <p className="text-sm text-muted-foreground">
+                    NDAs & security first
+                  </p>
                 </div>
                 <div className="text-center">
                   <Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Global Expertise</h3>
-                  <p className="text-sm text-muted-foreground">World-class consultants</p>
+                  <p className="text-sm text-muted-foreground">
+                    World-class consultants
+                  </p>
                 </div>
                 <div className="text-center">
                   <Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Proven Results</h3>
-                  <p className="text-sm text-muted-foreground">500+ successful projects</p>
+                  <p className="text-sm text-muted-foreground">
+                    500+ successful projects
+                  </p>
                 </div>
               </div>
             </div>
diff --git a/client/pages/Documentation.tsx b/client/pages/Documentation.tsx
index af005521..ec35215e 100644
--- a/client/pages/Documentation.tsx
+++ b/client/pages/Documentation.tsx
@@ -1,16 +1,22 @@
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { aethexToast } from "@/lib/aethex-toast";
 import { Link } from "react-router-dom";
-import { 
-  BookOpen, 
-  Code, 
-  Terminal, 
-  Download, 
+import {
+  BookOpen,
+  Code,
+  Terminal,
+  Download,
   ExternalLink,
   ArrowRight,
   Search,
@@ -18,7 +24,7 @@ import {
   Video,
   Headphones,
   Github,
-  Play
+  Play,
 } from "lucide-react";
 
 export default function Documentation() {
@@ -45,7 +51,12 @@ export default function Documentation() {
       icon: Play,
       docs: 12,
       color: "from-green-500 to-emerald-600",
-      sections: ["Installation", "First Steps", "Basic Concepts", "Hello World"]
+      sections: [
+        "Installation",
+        "First Steps",
+        "Basic Concepts",
+        "Hello World",
+      ],
     },
     {
       title: "API Reference",
@@ -53,7 +64,7 @@ export default function Documentation() {
       icon: Code,
       docs: 45,
       color: "from-blue-500 to-cyan-600",
-      sections: ["Authentication", "Endpoints", "SDKs", "Rate Limits"]
+      sections: ["Authentication", "Endpoints", "SDKs", "Rate Limits"],
     },
     {
       title: "Tutorials",
@@ -61,7 +72,12 @@ export default function Documentation() {
       icon: BookOpen,
       docs: 28,
       color: "from-purple-500 to-indigo-600",
-      sections: ["Game Development", "Web Apps", "Mobile Apps", "AI Integration"]
+      sections: [
+        "Game Development",
+        "Web Apps",
+        "Mobile Apps",
+        "AI Integration",
+      ],
     },
     {
       title: "CLI Tools",
@@ -69,26 +85,26 @@ export default function Documentation() {
       icon: Terminal,
       docs: 15,
       color: "from-orange-500 to-red-600",
-      sections: ["Installation", "Commands", "Configuration", "Scripts"]
-    }
+      sections: ["Installation", "Commands", "Configuration", "Scripts"],
+    },
   ];
 
   const quickStart = [
     {
       title: "Install AeThex SDK",
       command: "npm install @aethex/sdk",
-      description: "Get started with our JavaScript SDK"
+      description: "Get started with our JavaScript SDK",
     },
     {
       title: "Initialize Project",
       command: "aethex init my-project",
-      description: "Create a new AeThex project"
+      description: "Create a new AeThex project",
     },
     {
       title: "Deploy to Cloud",
       command: "aethex deploy --env production",
-      description: "Deploy your application to AeThex Cloud"
-    }
+      description: "Deploy your application to AeThex Cloud",
+    },
   ];
 
   const resources = [
@@ -98,7 +114,7 @@ export default function Documentation() {
       icon: Video,
       count: "50+ videos",
       link: "/tutorials",
-      color: "from-red-500 to-pink-600"
+      color: "from-red-500 to-pink-600",
     },
     {
       title: "Podcast Series",
@@ -106,7 +122,7 @@ export default function Documentation() {
       icon: Headphones,
       count: "20+ episodes",
       link: "/podcast",
-      color: "from-purple-500 to-indigo-600"
+      color: "from-purple-500 to-indigo-600",
     },
     {
       title: "Code Examples",
@@ -114,7 +130,7 @@ export default function Documentation() {
       icon: Github,
       count: "100+ repos",
       link: "/examples",
-      color: "from-green-500 to-emerald-600"
+      color: "from-green-500 to-emerald-600",
     },
     {
       title: "Downloads",
@@ -122,12 +138,18 @@ export default function Documentation() {
       icon: Download,
       count: "Latest releases",
       link: "/downloads",
-      color: "from-blue-500 to-cyan-600"
-    }
+      color: "from-blue-500 to-cyan-600",
+    },
   ];
 
   if (isLoading) {
-    return <LoadingScreen message="Loading Documentation..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Loading Documentation..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -137,18 +159,23 @@ export default function Documentation() {
         <section className="relative py-20 lg:py-32">
           <div className="container mx-auto px-4 text-center relative z-10">
             <div className="max-w-4xl mx-auto space-y-8">
-              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
+              <Badge
+                variant="outline"
+                className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
+              >
                 <FileText className="h-3 w-3 mr-1" />
                 Documentation Center
               </Badge>
-              
+
               <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
-                <span className="text-gradient-purple">Developer Documentation</span>
+                <span className="text-gradient-purple">
+                  Developer Documentation
+                </span>
               </h1>
-              
+
               <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                Comprehensive guides, API references, and tutorials to help you build 
-                amazing applications with AeThex technologies.
+                Comprehensive guides, API references, and tutorials to help you
+                build amazing applications with AeThex technologies.
               </p>
 
               {/* Search Bar */}
@@ -182,20 +209,26 @@ export default function Documentation() {
               {docCategories.map((category, index) => {
                 const Icon = category.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
                   >
                     <CardHeader>
                       <div className="flex items-center space-x-4">
-                        <div className={`p-3 rounded-lg bg-gradient-to-r ${category.color}`}>
+                        <div
+                          className={`p-3 rounded-lg bg-gradient-to-r ${category.color}`}
+                        >
                           <Icon className="h-6 w-6 text-white" />
                         </div>
                         <div className="flex-1">
                           <div className="flex items-center justify-between">
-                            <CardTitle className="text-xl">{category.title}</CardTitle>
-                            <Badge variant="outline">{category.docs} docs</Badge>
+                            <CardTitle className="text-xl">
+                              {category.title}
+                            </CardTitle>
+                            <Badge variant="outline">
+                              {category.docs} docs
+                            </Badge>
                           </div>
                           <CardDescription className="mt-1">
                             {category.description}
@@ -216,9 +249,11 @@ export default function Documentation() {
                           </Button>
                         ))}
                       </div>
-                      
+
                       <Button asChild className="w-full">
-                        <Link to={`/docs/${category.title.toLowerCase().replace(' ', '-')}`}>
+                        <Link
+                          to={`/docs/${category.title.toLowerCase().replace(" ", "-")}`}
+                        >
                           View {category.title}
                           <ArrowRight className="h-4 w-4 ml-2" />
                         </Link>
@@ -245,7 +280,7 @@ export default function Documentation() {
 
             <div className="max-w-3xl mx-auto space-y-6">
               {quickStart.map((step, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right"
                   style={{ animationDelay: `${index * 0.2}s` }}
@@ -256,11 +291,17 @@ export default function Documentation() {
                         {index + 1}
                       </div>
                       <div className="flex-1">
-                        <h3 className="font-semibold text-lg text-gradient mb-2">{step.title}</h3>
-                        <p className="text-sm text-muted-foreground mb-3">{step.description}</p>
+                        <h3 className="font-semibold text-lg text-gradient mb-2">
+                          {step.title}
+                        </h3>
+                        <p className="text-sm text-muted-foreground mb-3">
+                          {step.description}
+                        </p>
                         <div className="bg-background/50 border border-border/30 rounded-lg p-3 font-mono text-sm">
                           <span className="text-muted-foreground">$ </span>
-                          <span className="text-aethex-400">{step.command}</span>
+                          <span className="text-aethex-400">
+                            {step.command}
+                          </span>
                         </div>
                       </div>
                     </div>
@@ -287,20 +328,26 @@ export default function Documentation() {
               {resources.map((resource, index) => {
                 const Icon = resource.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
                   >
                     <CardHeader>
-                      <div className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}>
+                      <div
+                        className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}
+                      >
                         <Icon className="h-8 w-8 text-white" />
                       </div>
-                      <CardTitle className="text-lg">{resource.title}</CardTitle>
+                      <CardTitle className="text-lg">
+                        {resource.title}
+                      </CardTitle>
                       <CardDescription>{resource.description}</CardDescription>
                     </CardHeader>
                     <CardContent>
-                      <Badge variant="outline" className="mb-4">{resource.count}</Badge>
+                      <Badge variant="outline" className="mb-4">
+                        {resource.count}
+                      </Badge>
                       <Button asChild size="sm" className="w-full">
                         <Link to={resource.link}>
                           Explore
@@ -323,19 +370,28 @@ export default function Documentation() {
                 Need Help Getting Started?
               </h2>
               <p className="text-xl text-muted-foreground">
-                Our documentation is continuously updated. Can't find what you're looking for? 
-                Our support team is here to help.
+                Our documentation is continuously updated. Can't find what
+                you're looking for? Our support team is here to help.
               </p>
-              
+
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/support" className="flex items-center space-x-2">
                     <BookOpen className="h-5 w-5" />
                     <span>Get Support</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/community">Join Community</Link>
                 </Button>
               </div>
diff --git a/client/pages/GameDevelopment.tsx b/client/pages/GameDevelopment.tsx
index db054e47..2803c907 100644
--- a/client/pages/GameDevelopment.tsx
+++ b/client/pages/GameDevelopment.tsx
@@ -1,18 +1,24 @@
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { aethexToast } from "@/lib/aethex-toast";
 import { Link } from "react-router-dom";
-import { 
-  Gamepad2, 
-  Code, 
-  Sparkles, 
-  Zap, 
-  Users, 
-  Trophy, 
+import {
+  Gamepad2,
+  Code,
+  Sparkles,
+  Zap,
+  Users,
+  Trophy,
   Rocket,
   Target,
   Star,
@@ -26,7 +32,7 @@ import {
   Palette,
   Volume2,
   Globe,
-  Smartphone
+  Smartphone,
 } from "lucide-react";
 
 export default function GameDevelopment() {
@@ -52,38 +58,58 @@ export default function GameDevelopment() {
       title: "Custom Game Development",
       description: "End-to-end game creation from concept to deployment",
       icon: Gamepad2,
-      features: ["Full-stack development", "Multi-platform support", "Performance optimization", "Live deployment"],
+      features: [
+        "Full-stack development",
+        "Multi-platform support",
+        "Performance optimization",
+        "Live deployment",
+      ],
       timeline: "3-12 months",
       price: "Custom pricing",
-      color: "from-blue-500 to-purple-600"
+      color: "from-blue-500 to-purple-600",
     },
     {
       title: "Roblox Development",
       description: "Specialized Roblox game creation and scripting",
       icon: Code,
-      features: ["Lua scripting", "UI/UX design", "Monetization setup", "Analytics integration"],
+      features: [
+        "Lua scripting",
+        "UI/UX design",
+        "Monetization setup",
+        "Analytics integration",
+      ],
       timeline: "2-8 weeks",
       price: "Starting at $2,500",
-      color: "from-green-500 to-blue-600"
+      color: "from-green-500 to-blue-600",
     },
     {
       title: "Game Porting",
       description: "Adapt existing games to new platforms and devices",
       icon: Smartphone,
-      features: ["Cross-platform compatibility", "Performance tuning", "Platform-specific features", "Quality assurance"],
+      features: [
+        "Cross-platform compatibility",
+        "Performance tuning",
+        "Platform-specific features",
+        "Quality assurance",
+      ],
       timeline: "4-16 weeks",
       price: "Starting at $5,000",
-      color: "from-orange-500 to-red-600"
+      color: "from-orange-500 to-red-600",
     },
     {
       title: "Game Optimization",
       description: "Enhance performance and user experience of existing games",
       icon: Zap,
-      features: ["Performance profiling", "Memory optimization", "Load time reduction", "Frame rate improvement"],
+      features: [
+        "Performance profiling",
+        "Memory optimization",
+        "Load time reduction",
+        "Frame rate improvement",
+      ],
       timeline: "2-6 weeks",
       price: "Starting at $1,500",
-      color: "from-purple-500 to-pink-600"
-    }
+      color: "from-purple-500 to-pink-600",
+    },
   ];
 
   const technologies = [
@@ -101,11 +127,12 @@ export default function GameDevelopment() {
   const portfolio = [
     {
       title: "Neural Combat Arena",
-      description: "AI-powered multiplayer battle arena with dynamic environments",
+      description:
+        "AI-powered multiplayer battle arena with dynamic environments",
       tech: ["Unity", "C#", "Photon"],
       players: "10K+ active",
       rating: 4.8,
-      category: "Action"
+      category: "Action",
     },
     {
       title: "Quantum Puzzle Lab",
@@ -113,7 +140,7 @@ export default function GameDevelopment() {
       tech: ["Custom Engine", "C++", "OpenGL"],
       players: "25K+ downloads",
       rating: 4.9,
-      category: "Puzzle"
+      category: "Puzzle",
     },
     {
       title: "Roblox Tycoon Empire",
@@ -121,43 +148,63 @@ export default function GameDevelopment() {
       tech: ["Roblox Studio", "Lua", "DataStore"],
       players: "100K+ visits",
       rating: 4.7,
-      category: "Simulation"
-    }
+      category: "Simulation",
+    },
   ];
 
   const process = [
     {
       step: 1,
       title: "Discovery & Planning",
-      description: "We analyze your vision, target audience, and technical requirements",
+      description:
+        "We analyze your vision, target audience, and technical requirements",
       duration: "1-2 weeks",
-      deliverables: ["Project roadmap", "Technical specifications", "Art direction"]
+      deliverables: [
+        "Project roadmap",
+        "Technical specifications",
+        "Art direction",
+      ],
     },
     {
       step: 2,
       title: "Prototyping",
       description: "Create playable prototypes to validate core mechanics",
       duration: "2-4 weeks",
-      deliverables: ["Playable prototype", "Mechanics validation", "User feedback analysis"]
+      deliverables: [
+        "Playable prototype",
+        "Mechanics validation",
+        "User feedback analysis",
+      ],
     },
     {
       step: 3,
       title: "Production",
-      description: "Full development with regular milestones and client reviews",
+      description:
+        "Full development with regular milestones and client reviews",
       duration: "8-40 weeks",
-      deliverables: ["Weekly builds", "Progress reports", "Quality assurance"]
+      deliverables: ["Weekly builds", "Progress reports", "Quality assurance"],
     },
     {
       step: 4,
       title: "Launch & Support",
       description: "Deployment, marketing support, and ongoing maintenance",
       duration: "Ongoing",
-      deliverables: ["Live deployment", "Performance monitoring", "Update releases"]
-    }
+      deliverables: [
+        "Live deployment",
+        "Performance monitoring",
+        "Update releases",
+      ],
+    },
   ];
 
   if (isLoading) {
-    return <LoadingScreen message="Loading Game Development services..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Loading Game Development services..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -175,39 +222,54 @@ export default function GameDevelopment() {
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 3}s`,
                   animationDuration: `${3 + Math.random() * 2}s`,
-                  fontSize: `${8 + Math.random() * 6}px`
+                  fontSize: `${8 + Math.random() * 6}px`,
                 }}
               >
-                {'🎮🕹️🎯🏆'.charAt(Math.floor(Math.random() * 4))}
+                {"🎮🕹️🎯🏆".charAt(Math.floor(Math.random() * 4))}
               </div>
             ))}
           </div>
 
           <div className="container mx-auto px-4 text-center relative z-10">
             <div className="max-w-4xl mx-auto space-y-8">
-              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
+              <Badge
+                variant="outline"
+                className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
+              >
                 <Gamepad2 className="h-3 w-3 mr-1" />
                 Game Development Division
               </Badge>
-              
+
               <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
-                <span className="text-gradient-purple">Crafting Digital Worlds</span>
+                <span className="text-gradient-purple">
+                  Crafting Digital Worlds
+                </span>
               </h1>
-              
+
               <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                From concept to launch, we create immersive gaming experiences that captivate players 
-                and push the boundaries of interactive entertainment.
+                From concept to launch, we create immersive gaming experiences
+                that captivate players and push the boundaries of interactive
+                entertainment.
               </p>
 
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <Rocket className="h-5 w-5" />
                     <span>Start Your Project</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-border/50 hover-lift">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-border/50 hover-lift"
+                >
                   <Link to="/docs">View Portfolio</Link>
                 </Button>
               </div>
@@ -232,10 +294,12 @@ export default function GameDevelopment() {
                 const Icon = service.icon;
                 const isActive = activeService === index;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className={`relative overflow-hidden transition-all duration-500 hover-lift cursor-pointer animate-scale-in ${
-                      isActive ? 'border-aethex-500 glow-blue scale-105' : 'border-border/50 hover:border-aethex-400/50'
+                      isActive
+                        ? "border-aethex-500 glow-blue scale-105"
+                        : "border-border/50 hover:border-aethex-400/50"
                     }`}
                     style={{ animationDelay: `${index * 0.1}s` }}
                     onClick={() => setActiveService(index)}
@@ -243,11 +307,15 @@ export default function GameDevelopment() {
                     <CardHeader>
                       <div className="flex items-center justify-between">
                         <div className="flex items-center space-x-4">
-                          <div className={`p-3 rounded-lg bg-gradient-to-r ${service.color} transition-all duration-300 hover:scale-110`}>
+                          <div
+                            className={`p-3 rounded-lg bg-gradient-to-r ${service.color} transition-all duration-300 hover:scale-110`}
+                          >
                             <Icon className="h-6 w-6 text-white" />
                           </div>
                           <div>
-                            <CardTitle className={`text-xl ${isActive ? 'text-gradient' : ''}`}>
+                            <CardTitle
+                              className={`text-xl ${isActive ? "text-gradient" : ""}`}
+                            >
                               {service.title}
                             </CardTitle>
                             <CardDescription className="mt-1">
@@ -260,13 +328,16 @@ export default function GameDevelopment() {
                     <CardContent className="space-y-4">
                       <div className="grid grid-cols-2 gap-2">
                         {service.features.map((feature, featureIndex) => (
-                          <div key={featureIndex} className="flex items-center space-x-2 text-sm">
+                          <div
+                            key={featureIndex}
+                            className="flex items-center space-x-2 text-sm"
+                          >
                             <CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
                             <span>{feature}</span>
                           </div>
                         ))}
                       </div>
-                      
+
                       <div className="flex justify-between items-center pt-4 border-t border-border/30">
                         <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                           <Clock className="h-4 w-4" />
@@ -301,7 +372,7 @@ export default function GameDevelopment() {
               {technologies.map((tech, index) => {
                 const Icon = tech.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="bg-card/30 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.05}s` }}
@@ -334,7 +405,7 @@ export default function GameDevelopment() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
               {portfolio.map((project, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
                   style={{ animationDelay: `${index * 0.1}s` }}
@@ -344,31 +415,39 @@ export default function GameDevelopment() {
                       {project.category}
                     </Badge>
                   </div>
-                  
+
                   <CardHeader>
                     <div className="space-y-2">
                       <CardTitle className="text-lg">{project.title}</CardTitle>
                       <CardDescription>{project.description}</CardDescription>
                     </div>
                   </CardHeader>
-                  
+
                   <CardContent className="space-y-4">
                     <div className="flex flex-wrap gap-1">
                       {project.tech.map((tech, techIndex) => (
-                        <Badge key={techIndex} variant="secondary" className="text-xs">
+                        <Badge
+                          key={techIndex}
+                          variant="secondary"
+                          className="text-xs"
+                        >
                           {tech}
                         </Badge>
                       ))}
                     </div>
-                    
+
                     <div className="flex justify-between items-center">
                       <div className="flex items-center space-x-2">
                         <Users className="h-4 w-4 text-muted-foreground" />
-                        <span className="text-sm text-muted-foreground">{project.players}</span>
+                        <span className="text-sm text-muted-foreground">
+                          {project.players}
+                        </span>
                       </div>
                       <div className="flex items-center space-x-1">
                         <Star className="h-4 w-4 text-yellow-500" />
-                        <span className="text-sm font-semibold">{project.rating}</span>
+                        <span className="text-sm font-semibold">
+                          {project.rating}
+                        </span>
                       </div>
                     </div>
                   </CardContent>
@@ -392,7 +471,7 @@ export default function GameDevelopment() {
 
             <div className="max-w-4xl mx-auto">
               {process.map((phase, index) => (
-                <div 
+                <div
                   key={index}
                   className="relative flex items-start mb-12 animate-slide-right"
                   style={{ animationDelay: `${index * 0.2}s` }}
@@ -401,7 +480,7 @@ export default function GameDevelopment() {
                   <div className="flex-shrink-0 w-12 h-12 rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue flex items-center justify-center text-white font-bold mr-6 glow-blue">
                     {phase.step}
                   </div>
-                  
+
                   {/* Content */}
                   <div className="flex-1">
                     <Card className="bg-card/50 border-border/50 hover:border-aethex-400/50 transition-all duration-300">
@@ -415,11 +494,17 @@ export default function GameDevelopment() {
                               {phase.description}
                             </p>
                             <div className="flex flex-wrap gap-1">
-                              {phase.deliverables.map((deliverable, delIndex) => (
-                                <Badge key={delIndex} variant="outline" className="text-xs">
-                                  {deliverable}
-                                </Badge>
-                              ))}
+                              {phase.deliverables.map(
+                                (deliverable, delIndex) => (
+                                  <Badge
+                                    key={delIndex}
+                                    variant="outline"
+                                    className="text-xs"
+                                  >
+                                    {deliverable}
+                                  </Badge>
+                                ),
+                              )}
                             </div>
                           </div>
                           <div className="flex items-center">
@@ -432,7 +517,7 @@ export default function GameDevelopment() {
                       </CardContent>
                     </Card>
                   </div>
-                  
+
                   {/* Connector Line */}
                   {index < process.length - 1 && (
                     <div className="absolute left-6 top-12 w-0.5 h-12 bg-gradient-to-b from-aethex-400 to-transparent" />
@@ -451,18 +536,28 @@ export default function GameDevelopment() {
                 Ready to Build Your Game?
               </h2>
               <p className="text-xl text-muted-foreground">
-                Let's transform your vision into an engaging gaming experience that players will love.
+                Let's transform your vision into an engaging gaming experience
+                that players will love.
               </p>
-              
+
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <Play className="h-5 w-5" />
                     <span>Start Your Project</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/onboarding">Join Our Team</Link>
                 </Button>
               </div>
@@ -471,17 +566,23 @@ export default function GameDevelopment() {
                 <div className="text-center">
                   <Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Enterprise Security</h3>
-                  <p className="text-sm text-muted-foreground">Your IP is protected</p>
+                  <p className="text-sm text-muted-foreground">
+                    Your IP is protected
+                  </p>
                 </div>
                 <div className="text-center">
                   <Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Global Reach</h3>
-                  <p className="text-sm text-muted-foreground">Worldwide deployment</p>
+                  <p className="text-sm text-muted-foreground">
+                    Worldwide deployment
+                  </p>
                 </div>
                 <div className="text-center">
                   <Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Award Winning</h3>
-                  <p className="text-sm text-muted-foreground">Industry recognition</p>
+                  <p className="text-sm text-muted-foreground">
+                    Industry recognition
+                  </p>
                 </div>
               </div>
             </div>
diff --git a/client/pages/Index.tsx b/client/pages/Index.tsx
index ac906ba4..0867e190 100644
--- a/client/pages/Index.tsx
+++ b/client/pages/Index.tsx
@@ -1,7 +1,13 @@
 import { useState, useEffect } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { SkeletonStats, SkeletonUserPath } from "@/components/Skeleton";
@@ -17,7 +23,7 @@ import {
   Zap,
   Target,
   Users,
-  TrendingUp
+  TrendingUp,
 } from "lucide-react";
 
 export default function Index() {
@@ -34,7 +40,7 @@ export default function Index() {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setActiveSection(prev => (prev + 1) % 4);
+      setActiveSection((prev) => (prev + 1) % 4);
     }, 4000);
 
     return () => clearInterval(interval);
@@ -45,37 +51,43 @@ export default function Index() {
       title: "Neural Networks",
       description: "Advanced AI-powered development tools",
       icon: Zap,
-      color: "from-blue-500 to-purple-600"
+      color: "from-blue-500 to-purple-600",
     },
     {
       title: "Quantum Computing",
       description: "Next-generation processing capabilities",
       icon: Target,
-      color: "from-purple-500 to-pink-600"
+      color: "from-purple-500 to-pink-600",
     },
     {
       title: "Blockchain Integration",
       description: "Secure, decentralized solutions",
       icon: Users,
-      color: "from-green-500 to-blue-600"
+      color: "from-green-500 to-blue-600",
     },
     {
       title: "Cloud Infrastructure",
       description: "Scalable, global deployment systems",
       icon: TrendingUp,
-      color: "from-orange-500 to-red-600"
-    }
+      color: "from-orange-500 to-red-600",
+    },
   ];
 
   const achievements = [
     { metric: "10K+", label: "Active Developers" },
     { metric: "500+", label: "Projects Deployed" },
     { metric: "99.99%", label: "System Uptime" },
-    { metric: "24/7", label: "Global Support" }
+    { metric: "24/7", label: "Global Support" },
   ];
 
   if (isLoading) {
-    return <LoadingScreen message="Initializing AeThex OS..." showProgress={true} duration={1200} />;
+    return (
+      <LoadingScreen
+        message="Initializing AeThex OS..."
+        showProgress={true}
+        duration={1200}
+      />
+    );
   }
 
   return (
@@ -109,7 +121,7 @@ export default function Index() {
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 5}s`,
                   animationDuration: `${4 + Math.random() * 3}s`,
-                  clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)'
+                  clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
                 }}
               />
             ))}
@@ -129,8 +141,9 @@ export default function Index() {
                   Crafting Digital Realities
                 </h2>
                 <p className="text-lg text-muted-foreground max-w-2xl mx-auto animate-slide-up">
-                  Where innovation meets execution. We build the future through advanced
-                  technology, creative solutions, and limitless possibilities.
+                  Where innovation meets execution. We build the future through
+                  advanced technology, creative solutions, and limitless
+                  possibilities.
                 </p>
               </div>
             </div>
@@ -145,13 +158,15 @@ export default function Index() {
                     key={index}
                     className={`relative overflow-hidden border-2 transition-all duration-500 hover-lift cursor-pointer group ${
                       isActive
-                        ? 'border-aethex-500 glow-blue scale-105'
-                        : 'border-border/30 hover:border-aethex-400/50'
+                        ? "border-aethex-500 glow-blue scale-105"
+                        : "border-border/30 hover:border-aethex-400/50"
                     }`}
                     onClick={() => setActiveSection(index)}
                   >
                     <CardContent className="p-6 text-center space-y-3">
-                      <div className={`mx-auto w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} flex items-center justify-center transition-all duration-300 group-hover:scale-110`}>
+                      <div
+                        className={`mx-auto w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} flex items-center justify-center transition-all duration-300 group-hover:scale-110`}
+                      >
                         <Icon className="h-6 w-6 text-white" />
                       </div>
                       <h3 className="font-semibold text-sm">{feature.title}</h3>
@@ -166,14 +181,26 @@ export default function Index() {
 
             {/* Action Buttons */}
             <div className="flex flex-col sm:flex-row justify-center gap-6 animate-slide-up">
-              <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
-                <Link to="/onboarding" className="flex items-center space-x-2 group">
+              <Button
+                asChild
+                size="lg"
+                className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
+              >
+                <Link
+                  to="/onboarding"
+                  className="flex items-center space-x-2 group"
+                >
                   <Sparkles className="h-5 w-5" />
                   <span>Start Your Journey</span>
                   <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-2" />
                 </Link>
               </Button>
-              <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
+              <Button
+                asChild
+                variant="outline"
+                size="lg"
+                className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
+              >
                 <Link to="/dashboard">Explore Dashboard</Link>
               </Button>
             </div>
@@ -228,19 +255,44 @@ export default function Index() {
                 Next-Generation Technology Stack
               </h2>
               <p className="text-lg text-muted-foreground">
-                Built on cutting-edge frameworks and powered by advanced algorithms
+                Built on cutting-edge frameworks and powered by advanced
+                algorithms
               </p>
             </div>
 
             {/* Interactive Technology Grid */}
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
               {[
-                { name: "Quantum AI", status: "Active", color: "from-purple-500 to-blue-600" },
-                { name: "Neural Networks", status: "Optimizing", color: "from-blue-500 to-green-600" },
-                { name: "Blockchain Core", status: "Secure", color: "from-green-500 to-yellow-600" },
-                { name: "Cloud Matrix", status: "Scaling", color: "from-yellow-500 to-red-600" },
-                { name: "Data Fusion", status: "Processing", color: "from-red-500 to-purple-600" },
-                { name: "Edge Computing", status: "Deployed", color: "from-purple-500 to-pink-600" }
+                {
+                  name: "Quantum AI",
+                  status: "Active",
+                  color: "from-purple-500 to-blue-600",
+                },
+                {
+                  name: "Neural Networks",
+                  status: "Optimizing",
+                  color: "from-blue-500 to-green-600",
+                },
+                {
+                  name: "Blockchain Core",
+                  status: "Secure",
+                  color: "from-green-500 to-yellow-600",
+                },
+                {
+                  name: "Cloud Matrix",
+                  status: "Scaling",
+                  color: "from-yellow-500 to-red-600",
+                },
+                {
+                  name: "Data Fusion",
+                  status: "Processing",
+                  color: "from-red-500 to-purple-600",
+                },
+                {
+                  name: "Edge Computing",
+                  status: "Deployed",
+                  color: "from-purple-500 to-pink-600",
+                },
               ].map((tech, index) => (
                 <Card
                   key={index}
@@ -252,9 +304,13 @@ export default function Index() {
                       <h3 className="font-semibold text-gradient group-hover:animate-pulse">
                         {tech.name}
                       </h3>
-                      <div className={`w-3 h-3 rounded-full bg-gradient-to-r ${tech.color} animate-pulse`} />
+                      <div
+                        className={`w-3 h-3 rounded-full bg-gradient-to-r ${tech.color} animate-pulse`}
+                      />
                     </div>
-                    <p className="text-sm text-muted-foreground">{tech.status}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {tech.status}
+                    </p>
                     <div className="absolute inset-0 bg-gradient-to-r from-transparent via-aethex-400/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
                   </CardContent>
                 </Card>
@@ -267,14 +323,26 @@ export default function Index() {
                 Ready to Build the Future?
               </h3>
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift interactive-scale">
-                  <Link to="/onboarding" className="flex items-center space-x-2 group">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift interactive-scale"
+                >
+                  <Link
+                    to="/onboarding"
+                    className="flex items-center space-x-2 group"
+                  >
                     <Sparkles className="h-5 w-5" />
                     <span>Join AeThex</span>
                     <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift interactive-scale">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-aethex-400/50 hover:border-aethex-400 hover-lift interactive-scale"
+                >
                   <Link to="/dashboard">Explore Platform</Link>
                 </Button>
               </div>
diff --git a/client/pages/Login.tsx b/client/pages/Login.tsx
index 4f3217d8..efe1a300 100644
--- a/client/pages/Login.tsx
+++ b/client/pages/Login.tsx
@@ -2,20 +2,26 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import LoadingScreen from "@/components/LoadingScreen";
-import { 
-  LogIn, 
-  ArrowRight, 
-  Shield, 
-  Sparkles, 
-  Github, 
+import {
+  LogIn,
+  ArrowRight,
+  Shield,
+  Sparkles,
+  Github,
   Mail,
   Lock,
-  User
+  User,
 } from "lucide-react";
 
 export default function Login() {
@@ -27,7 +33,7 @@ export default function Login() {
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
-    
+
     // Simulate login process
     setTimeout(() => {
       setIsLoading(false);
@@ -45,7 +51,13 @@ export default function Login() {
   };
 
   if (isLoading) {
-    return <LoadingScreen message="Authenticating your account..." showProgress={true} duration={2000} />;
+    return (
+      <LoadingScreen
+        message="Authenticating your account..."
+        showProgress={true}
+        duration={2000}
+      />
+    );
   }
 
   return (
@@ -62,7 +74,7 @@ export default function Login() {
                   left: `${Math.random() * 100}%`,
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 3}s`,
-                  animationDuration: `${3 + Math.random() * 2}s`
+                  animationDuration: `${3 + Math.random() * 2}s`,
                 }}
               />
             ))}
@@ -76,30 +88,35 @@ export default function Login() {
                 </div>
               </div>
               <div className="space-y-2">
-                <CardTitle className="text-2xl text-gradient-purple">Welcome Back</CardTitle>
+                <CardTitle className="text-2xl text-gradient-purple">
+                  Welcome Back
+                </CardTitle>
                 <CardDescription>
                   Sign in to your AeThex account to access the dashboard
                 </CardDescription>
               </div>
-              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400">
+              <Badge
+                variant="outline"
+                className="border-aethex-400/50 text-aethex-400"
+              >
                 <Sparkles className="h-3 w-3 mr-1" />
                 Secure Login
               </Badge>
             </CardHeader>
-            
+
             <CardContent className="space-y-6">
               {/* Social Login Buttons */}
               <div className="space-y-3">
-                <Button 
-                  variant="outline" 
+                <Button
+                  variant="outline"
                   className="w-full hover-lift interactive-scale"
                   onClick={() => handleSocialLogin("github")}
                 >
                   <Github className="h-4 w-4 mr-2" />
                   Continue with GitHub
                 </Button>
-                <Button 
-                  variant="outline" 
+                <Button
+                  variant="outline"
                   className="w-full hover-lift interactive-scale"
                   onClick={() => handleSocialLogin("google")}
                 >
@@ -113,7 +130,9 @@ export default function Login() {
                   <div className="w-full border-t border-border/50" />
                 </div>
                 <div className="relative flex justify-center text-xs uppercase">
-                  <span className="bg-background px-2 text-muted-foreground">Or continue with email</span>
+                  <span className="bg-background px-2 text-muted-foreground">
+                    Or continue with email
+                  </span>
                 </div>
               </div>
 
@@ -157,16 +176,22 @@ export default function Login() {
 
                 <div className="flex items-center justify-between text-sm">
                   <label className="flex items-center space-x-2 cursor-pointer">
-                    <input type="checkbox" className="rounded border-border/50" />
+                    <input
+                      type="checkbox"
+                      className="rounded border-border/50"
+                    />
                     <span className="text-muted-foreground">Remember me</span>
                   </label>
-                  <button type="button" className="text-aethex-400 hover:underline">
+                  <button
+                    type="button"
+                    className="text-aethex-400 hover:underline"
+                  >
                     Forgot password?
                   </button>
                 </div>
 
-                <Button 
-                  type="submit" 
+                <Button
+                  type="submit"
                   className="w-full bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue"
                   disabled={!email || !password}
                 >
@@ -179,7 +204,7 @@ export default function Login() {
               <div className="text-center pt-4">
                 <p className="text-sm text-muted-foreground">
                   Don't have an account?{" "}
-                  <button 
+                  <button
                     onClick={() => navigate("/onboarding")}
                     className="text-aethex-400 hover:underline font-medium"
                   >
diff --git a/client/pages/MentorshipPrograms.tsx b/client/pages/MentorshipPrograms.tsx
index ee5db2dc..c67d13dd 100644
--- a/client/pages/MentorshipPrograms.tsx
+++ b/client/pages/MentorshipPrograms.tsx
@@ -1,16 +1,22 @@
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { aethexToast } from "@/lib/aethex-toast";
 import { Link } from "react-router-dom";
-import { 
-  Users, 
-  BookOpen, 
-  Star, 
-  Trophy, 
+import {
+  Users,
+  BookOpen,
+  Star,
+  Trophy,
   Target,
   ArrowRight,
   CheckCircle,
@@ -25,7 +31,7 @@ import {
   Calendar,
   MessageCircle,
   Video,
-  GraduationCap
+  GraduationCap,
 } from "lucide-react";
 
 export default function MentorshipPrograms() {
@@ -49,7 +55,8 @@ export default function MentorshipPrograms() {
   const programs = [
     {
       title: "Individual Mentorship",
-      description: "One-on-one guidance tailored to your specific goals and challenges",
+      description:
+        "One-on-one guidance tailored to your specific goals and challenges",
       icon: User,
       duration: "3-12 months",
       commitment: "2 hours/week",
@@ -60,14 +67,15 @@ export default function MentorshipPrograms() {
         "Code reviews & feedback",
         "Career guidance",
         "Portfolio development",
-        "24/7 chat support"
+        "24/7 chat support",
       ],
       color: "from-blue-500 to-purple-600",
-      participants: "1:1"
+      participants: "1:1",
     },
     {
       title: "Group Workshops",
-      description: "Collaborative learning with peers in structured group sessions",
+      description:
+        "Collaborative learning with peers in structured group sessions",
       icon: Users,
       duration: "8-16 weeks",
       commitment: "4 hours/week",
@@ -78,14 +86,15 @@ export default function MentorshipPrograms() {
         "Project-based learning",
         "Industry guest speakers",
         "Team challenges",
-        "Group portfolio projects"
+        "Group portfolio projects",
       ],
       color: "from-green-500 to-blue-600",
-      participants: "6-12 people"
+      participants: "6-12 people",
     },
     {
       title: "Intensive Boot Camps",
-      description: "Fast-track your skills with immersive, intensive training programs",
+      description:
+        "Fast-track your skills with immersive, intensive training programs",
       icon: Rocket,
       duration: "12-24 weeks",
       commitment: "20+ hours/week",
@@ -96,10 +105,10 @@ export default function MentorshipPrograms() {
         "Job placement assistance",
         "Capstone project",
         "Certification",
-        "Alumni network access"
+        "Alumni network access",
       ],
       color: "from-orange-500 to-red-600",
-      participants: "15-25 people"
+      participants: "15-25 people",
     },
     {
       title: "Corporate Training",
@@ -114,11 +123,11 @@ export default function MentorshipPrograms() {
         "Team assessments",
         "Progress tracking",
         "Certification programs",
-        "Ongoing support"
+        "Ongoing support",
       ],
       color: "from-purple-500 to-pink-600",
-      participants: "10-100+ people"
-    }
+      participants: "10-100+ people",
+    },
   ];
 
   const tracks = [
@@ -126,38 +135,67 @@ export default function MentorshipPrograms() {
       name: "Game Development",
       description: "Master game development from concept to publishing",
       icon: Code,
-      skills: ["Unity/Unreal", "C#/C++", "Game Design", "3D Modeling", "Audio", "Publishing"],
+      skills: [
+        "Unity/Unreal",
+        "C#/C++",
+        "Game Design",
+        "3D Modeling",
+        "Audio",
+        "Publishing",
+      ],
       level: "Beginner to Advanced",
       duration: "6-12 months",
-      projects: 5
+      projects: 5,
     },
     {
       name: "Web Development",
-      description: "Build modern web applications with cutting-edge technologies",
+      description:
+        "Build modern web applications with cutting-edge technologies",
       icon: Globe,
-      skills: ["React/Vue", "Node.js", "Databases", "Cloud Deploy", "Testing", "DevOps"],
+      skills: [
+        "React/Vue",
+        "Node.js",
+        "Databases",
+        "Cloud Deploy",
+        "Testing",
+        "DevOps",
+      ],
       level: "Beginner to Expert",
       duration: "4-8 months",
-      projects: 8
+      projects: 8,
     },
     {
       name: "Mobile Development",
       description: "Create native and cross-platform mobile applications",
       icon: Rocket,
-      skills: ["React Native", "Flutter", "iOS/Android", "API Integration", "Publishing", "Analytics"],
+      skills: [
+        "React Native",
+        "Flutter",
+        "iOS/Android",
+        "API Integration",
+        "Publishing",
+        "Analytics",
+      ],
       level: "Intermediate to Advanced",
-      duration: "5-10 months", 
-      projects: 6
+      duration: "5-10 months",
+      projects: 6,
     },
     {
       name: "Data Science & AI",
       description: "Harness the power of data and artificial intelligence",
       icon: Lightbulb,
-      skills: ["Python", "Machine Learning", "Data Analysis", "Neural Networks", "Big Data", "Visualization"],
+      skills: [
+        "Python",
+        "Machine Learning",
+        "Data Analysis",
+        "Neural Networks",
+        "Big Data",
+        "Visualization",
+      ],
       level: "Beginner to Expert",
       duration: "8-16 months",
-      projects: 10
-    }
+      projects: 10,
+    },
   ];
 
   const mentors = [
@@ -169,28 +207,31 @@ export default function MentorshipPrograms() {
       specialty: "Unreal Engine, C++",
       students: 85,
       rating: 4.9,
-      avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b029?w=150&h=150&fit=crop&crop=face"
+      avatar:
+        "https://images.unsplash.com/photo-1494790108755-2616b612b029?w=150&h=150&fit=crop&crop=face",
     },
     {
       name: "Marcus Rodriguez",
       title: "Full Stack Architect",
       company: "Netflix",
-      experience: "15 years", 
+      experience: "15 years",
       specialty: "React, Node.js, AWS",
       students: 120,
       rating: 4.8,
-      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
+      avatar:
+        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
     },
     {
       name: "Dr. Aisha Patel",
       title: "AI Research Scientist",
-      company: "Google DeepMind", 
+      company: "Google DeepMind",
       experience: "10 years",
       specialty: "Machine Learning, Python",
       students: 95,
       rating: 5.0,
-      avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=150&h=150&fit=crop&crop=face"
-    }
+      avatar:
+        "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=150&h=150&fit=crop&crop=face",
+    },
   ];
 
   const testimonials = [
@@ -198,30 +239,39 @@ export default function MentorshipPrograms() {
       name: "Alex Thompson",
       role: "Junior Developer → Senior Developer",
       company: "Stripe",
-      content: "The mentorship program completely transformed my career. Within 8 months, I went from struggling with basic concepts to landing a senior role at a top tech company.",
+      content:
+        "The mentorship program completely transformed my career. Within 8 months, I went from struggling with basic concepts to landing a senior role at a top tech company.",
       program: "Individual Mentorship",
-      mentor: "Marcus Rodriguez"
+      mentor: "Marcus Rodriguez",
     },
     {
       name: "Jamie Wu",
-      role: "Career Changer → Game Developer", 
+      role: "Career Changer → Game Developer",
       company: "Indie Studio",
-      content: "Coming from a marketing background, I never thought I could become a game developer. The boot camp gave me the skills and confidence to launch my own indie studio.",
+      content:
+        "Coming from a marketing background, I never thought I could become a game developer. The boot camp gave me the skills and confidence to launch my own indie studio.",
       program: "Intensive Boot Camp",
-      mentor: "Sarah Chen"
+      mentor: "Sarah Chen",
     },
     {
       name: "Taylor Davis",
       role: "Student → ML Engineer",
       company: "OpenAI",
-      content: "The AI track mentorship opened doors I never knew existed. The hands-on projects and expert guidance helped me land my dream job in machine learning.",
+      content:
+        "The AI track mentorship opened doors I never knew existed. The hands-on projects and expert guidance helped me land my dream job in machine learning.",
       program: "Group Workshop",
-      mentor: "Dr. Aisha Patel"
-    }
+      mentor: "Dr. Aisha Patel",
+    },
   ];
 
   if (isLoading) {
-    return <LoadingScreen message="Loading Mentorship Programs..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Loading Mentorship Programs..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -239,39 +289,54 @@ export default function MentorshipPrograms() {
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 3}s`,
                   animationDuration: `${3 + Math.random() * 2}s`,
-                  fontSize: `${8 + Math.random() * 6}px`
+                  fontSize: `${8 + Math.random() * 6}px`,
                 }}
               >
-                {'🎓📚💡🚀'.charAt(Math.floor(Math.random() * 4))}
+                {"🎓📚💡🚀".charAt(Math.floor(Math.random() * 4))}
               </div>
             ))}
           </div>
 
           <div className="container mx-auto px-4 text-center relative z-10">
             <div className="max-w-4xl mx-auto space-y-8">
-              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
+              <Badge
+                variant="outline"
+                className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
+              >
                 <GraduationCap className="h-3 w-3 mr-1" />
                 Mentorship & Education Division
               </Badge>
-              
+
               <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
-                <span className="text-gradient-purple">Accelerate Your Tech Journey</span>
+                <span className="text-gradient-purple">
+                  Accelerate Your Tech Journey
+                </span>
               </h1>
-              
+
               <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                Learn from industry experts through personalized mentorship, hands-on workshops, 
-                and intensive boot camps designed to fast-track your technology career.
+                Learn from industry experts through personalized mentorship,
+                hands-on workshops, and intensive boot camps designed to
+                fast-track your technology career.
               </p>
 
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <BookOpen className="h-5 w-5" />
                     <span>Apply Now</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-border/50 hover-lift">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-border/50 hover-lift"
+                >
                   <Link to="/docs">Program Details</Link>
                 </Button>
               </div>
@@ -287,7 +352,8 @@ export default function MentorshipPrograms() {
                 Mentorship Programs
               </h2>
               <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-                Choose the learning format that best fits your schedule and goals
+                Choose the learning format that best fits your schedule and
+                goals
               </p>
             </div>
 
@@ -295,7 +361,7 @@ export default function MentorshipPrograms() {
               {programs.map((program, index) => {
                 const Icon = program.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
@@ -303,11 +369,15 @@ export default function MentorshipPrograms() {
                     <CardHeader>
                       <div className="flex items-start justify-between">
                         <div className="flex items-center space-x-4">
-                          <div className={`p-3 rounded-lg bg-gradient-to-r ${program.color}`}>
+                          <div
+                            className={`p-3 rounded-lg bg-gradient-to-r ${program.color}`}
+                          >
                             <Icon className="h-6 w-6 text-white" />
                           </div>
                           <div>
-                            <CardTitle className="text-xl">{program.title}</CardTitle>
+                            <CardTitle className="text-xl">
+                              {program.title}
+                            </CardTitle>
                             <CardDescription className="mt-1">
                               {program.description}
                             </CardDescription>
@@ -321,24 +391,33 @@ export default function MentorshipPrograms() {
                     <CardContent className="space-y-4">
                       <div className="grid grid-cols-2 gap-2">
                         {program.features.map((feature, featureIndex) => (
-                          <div key={featureIndex} className="flex items-center space-x-2 text-sm">
+                          <div
+                            key={featureIndex}
+                            className="flex items-center space-x-2 text-sm"
+                          >
                             <CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
                             <span>{feature}</span>
                           </div>
                         ))}
                       </div>
-                      
+
                       <div className="grid grid-cols-3 gap-4 pt-4 border-t border-border/30">
                         <div className="text-center">
                           <Clock className="h-4 w-4 text-muted-foreground mx-auto mb-1" />
-                          <div className="text-xs text-muted-foreground">{program.duration}</div>
+                          <div className="text-xs text-muted-foreground">
+                            {program.duration}
+                          </div>
                         </div>
                         <div className="text-center">
                           <Calendar className="h-4 w-4 text-muted-foreground mx-auto mb-1" />
-                          <div className="text-xs text-muted-foreground">{program.commitment}</div>
+                          <div className="text-xs text-muted-foreground">
+                            {program.commitment}
+                          </div>
                         </div>
                         <div className="text-center">
-                          <span className="text-sm font-semibold text-aethex-400">{program.price}</span>
+                          <span className="text-sm font-semibold text-aethex-400">
+                            {program.price}
+                          </span>
                         </div>
                       </div>
                     </CardContent>
@@ -366,19 +445,21 @@ export default function MentorshipPrograms() {
                 const Icon = track.icon;
                 const isSelected = selectedTrack === index;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className={`cursor-pointer transition-all duration-300 hover-lift animate-scale-in ${
-                      isSelected 
-                        ? 'border-aethex-500 glow-blue scale-105' 
-                        : 'border-border/50 hover:border-aethex-400/50'
+                      isSelected
+                        ? "border-aethex-500 glow-blue scale-105"
+                        : "border-border/50 hover:border-aethex-400/50"
                     }`}
                     style={{ animationDelay: `${index * 0.1}s` }}
                     onClick={() => setSelectedTrack(index)}
                   >
                     <CardHeader className="text-center">
                       <Icon className="h-12 w-12 text-aethex-400 mx-auto mb-3" />
-                      <CardTitle className={`text-lg ${isSelected ? 'text-gradient' : ''}`}>
+                      <CardTitle
+                        className={`text-lg ${isSelected ? "text-gradient" : ""}`}
+                      >
                         {track.name}
                       </CardTitle>
                       <CardDescription className="text-sm">
@@ -388,14 +469,20 @@ export default function MentorshipPrograms() {
                     <CardContent className="space-y-3">
                       <div className="flex flex-wrap gap-1">
                         {track.skills.slice(0, 4).map((skill, skillIndex) => (
-                          <Badge key={skillIndex} variant="secondary" className="text-xs">
+                          <Badge
+                            key={skillIndex}
+                            variant="secondary"
+                            className="text-xs"
+                          >
                             {skill}
                           </Badge>
                         ))}
                       </div>
-                      
+
                       <div className="text-center space-y-1">
-                        <div className="text-sm text-muted-foreground">{track.level}</div>
+                        <div className="text-sm text-muted-foreground">
+                          {track.level}
+                        </div>
                         <div className="text-xs text-muted-foreground">
                           {track.duration} • {track.projects} projects
                         </div>
@@ -422,21 +509,27 @@ export default function MentorshipPrograms() {
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
               {mentors.map((mentor, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                   style={{ animationDelay: `${index * 0.2}s` }}
                 >
                   <CardContent className="p-6 text-center">
-                    <img 
+                    <img
                       src={mentor.avatar}
                       alt={mentor.name}
                       className="w-24 h-24 rounded-full mx-auto mb-4 ring-4 ring-aethex-400/20"
                     />
-                    <h3 className="font-semibold text-lg text-gradient">{mentor.name}</h3>
-                    <p className="text-sm text-muted-foreground">{mentor.title}</p>
-                    <p className="text-sm font-medium text-aethex-400">{mentor.company}</p>
-                    
+                    <h3 className="font-semibold text-lg text-gradient">
+                      {mentor.name}
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      {mentor.title}
+                    </p>
+                    <p className="text-sm font-medium text-aethex-400">
+                      {mentor.company}
+                    </p>
+
                     <div className="mt-4 space-y-2">
                       <div className="flex justify-between text-sm">
                         <span>Experience:</span>
@@ -454,7 +547,7 @@ export default function MentorshipPrograms() {
                         </div>
                       </div>
                     </div>
-                    
+
                     <Badge variant="outline" className="mt-3 text-xs">
                       {mentor.specialty}
                     </Badge>
@@ -479,7 +572,7 @@ export default function MentorshipPrograms() {
 
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
               {testimonials.map((testimonial, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
                   style={{ animationDelay: `${index * 0.2}s` }}
@@ -491,8 +584,12 @@ export default function MentorshipPrograms() {
                       </div>
                       <div>
                         <h3 className="font-semibold">{testimonial.name}</h3>
-                        <p className="text-sm text-muted-foreground">{testimonial.role}</p>
-                        <Badge variant="outline" className="text-xs">{testimonial.company}</Badge>
+                        <p className="text-sm text-muted-foreground">
+                          {testimonial.role}
+                        </p>
+                        <Badge variant="outline" className="text-xs">
+                          {testimonial.company}
+                        </Badge>
                       </div>
                     </div>
                   </CardHeader>
@@ -519,18 +616,28 @@ export default function MentorshipPrograms() {
                 Start Your Learning Journey Today
               </h2>
               <p className="text-xl text-muted-foreground">
-                Join thousands of developers who have accelerated their careers through our mentorship programs.
+                Join thousands of developers who have accelerated their careers
+                through our mentorship programs.
               </p>
-              
+
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <Heart className="h-5 w-5" />
                     <span>Apply for Mentorship</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/docs">View Curriculum</Link>
                 </Button>
               </div>
@@ -539,17 +646,23 @@ export default function MentorshipPrograms() {
                 <div className="text-center">
                   <MessageCircle className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">24/7 Support</h3>
-                  <p className="text-sm text-muted-foreground">Always available</p>
+                  <p className="text-sm text-muted-foreground">
+                    Always available
+                  </p>
                 </div>
                 <div className="text-center">
                   <Video className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Live Sessions</h3>
-                  <p className="text-sm text-muted-foreground">Interactive learning</p>
+                  <p className="text-sm text-muted-foreground">
+                    Interactive learning
+                  </p>
                 </div>
                 <div className="text-center">
                   <Award className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Certification</h3>
-                  <p className="text-sm text-muted-foreground">Industry recognized</p>
+                  <p className="text-sm text-muted-foreground">
+                    Industry recognized
+                  </p>
                 </div>
               </div>
             </div>
diff --git a/client/pages/NotFound.tsx b/client/pages/NotFound.tsx
index 035dda8c..1115b7c6 100644
--- a/client/pages/NotFound.tsx
+++ b/client/pages/NotFound.tsx
@@ -2,7 +2,13 @@ import { useState, useEffect, useCallback } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 {
   Home,
@@ -19,7 +25,7 @@ import {
   ChevronUp,
   ChevronDown,
   ChevronLeft,
-  ChevronRight
+  ChevronRight,
 } from "lucide-react";
 
 interface GameState {
@@ -52,10 +58,19 @@ const NotFound = () => {
     "Error 404: This page is in another castle.",
     "404: The page you seek is in another universe.",
     "404: Lost in cyberspace? We'll guide you home.",
-    "404: Page not found, but great adventures await."
+    "404: Page not found, but great adventures await.",
   ];
 
-  const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight'];
+  const konamiCode = [
+    "ArrowUp",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowLeft",
+    "ArrowRight",
+  ];
 
   // Game state
   const [gameState, setGameState] = useState<GameState>({
@@ -65,7 +80,7 @@ const NotFound = () => {
     playerPosition: { x: 5, y: 5 },
     collectibles: [],
     gameActive: false,
-    gameWon: false
+    gameWon: false,
   });
 
   // Initialize collectibles
@@ -76,28 +91,28 @@ const NotFound = () => {
         x: Math.floor(Math.random() * 10),
         y: Math.floor(Math.random() * 10),
         id: i,
-        collected: false
+        collected: false,
       });
     }
-    setGameState(prev => ({
+    setGameState((prev) => ({
       ...prev,
       collectibles: newCollectibles,
       gameActive: true,
       score: 0,
       lives: 3,
       playerPosition: { x: 5, y: 5 },
-      gameWon: false
+      gameWon: false,
     }));
   }, []);
 
   // Timer and quote rotation
   useEffect(() => {
     const timer = setInterval(() => {
-      setTimeSpent(prev => prev + 1);
+      setTimeSpent((prev) => prev + 1);
     }, 1000);
 
     const quoteTimer = setInterval(() => {
-      setCurrentQuote(prev => (prev + 1) % quotes.length);
+      setCurrentQuote((prev) => (prev + 1) % quotes.length);
     }, 3000);
 
     return () => {
@@ -118,8 +133,8 @@ const NotFound = () => {
       }
     };
 
-    window.addEventListener('keydown', handleKeyPress);
-    return () => window.removeEventListener('keydown', handleKeyPress);
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
   }, [konami, konamiCode]);
 
   // Game controls
@@ -132,37 +147,42 @@ const NotFound = () => {
       let newY = gameState.playerPosition.y;
 
       switch (e.key) {
-        case 'ArrowUp':
-        case 'w':
+        case "ArrowUp":
+        case "w":
           newY = Math.max(0, newY - 1);
           break;
-        case 'ArrowDown':
-        case 's':
+        case "ArrowDown":
+        case "s":
           newY = Math.min(9, newY + 1);
           break;
-        case 'ArrowLeft':
-        case 'a':
+        case "ArrowLeft":
+        case "a":
           newX = Math.max(0, newX - 1);
           break;
-        case 'ArrowRight':
-        case 'd':
+        case "ArrowRight":
+        case "d":
           newX = Math.min(9, newX + 1);
           break;
         default:
           return;
       }
 
-      setGameState(prev => {
+      setGameState((prev) => {
         const newPosition = { x: newX, y: newY };
-        const updatedCollectibles = prev.collectibles.map(collectible => {
-          if (collectible.x === newX && collectible.y === newY && !collectible.collected) {
+        const updatedCollectibles = prev.collectibles.map((collectible) => {
+          if (
+            collectible.x === newX &&
+            collectible.y === newY &&
+            !collectible.collected
+          ) {
             return { ...collectible, collected: true };
           }
           return collectible;
         });
 
-        const newScore = updatedCollectibles.filter(c => c.collected).length * 10;
-        const gameWon = updatedCollectibles.every(c => c.collected);
+        const newScore =
+          updatedCollectibles.filter((c) => c.collected).length * 10;
+        const gameWon = updatedCollectibles.every((c) => c.collected);
 
         return {
           ...prev,
@@ -170,14 +190,14 @@ const NotFound = () => {
           collectibles: updatedCollectibles,
           score: newScore,
           gameWon: gameWon,
-          gameActive: !gameWon
+          gameActive: !gameWon,
         };
       });
     };
 
     if (gameState.gameActive) {
-      window.addEventListener('keydown', handleGameControls);
-      return () => window.removeEventListener('keydown', handleGameControls);
+      window.addEventListener("keydown", handleGameControls);
+      return () => window.removeEventListener("keydown", handleGameControls);
     }
   }, [gameState.gameActive, gameState.playerPosition]);
 
@@ -185,19 +205,26 @@ const NotFound = () => {
     const grid = [];
     for (let y = 0; y < 10; y++) {
       for (let x = 0; x < 10; x++) {
-        const isPlayer = gameState.playerPosition.x === x && gameState.playerPosition.y === y;
-        const collectible = gameState.collectibles.find(c => c.x === x && c.y === y && !c.collected);
+        const isPlayer =
+          gameState.playerPosition.x === x && gameState.playerPosition.y === y;
+        const collectible = gameState.collectibles.find(
+          (c) => c.x === x && c.y === y && !c.collected,
+        );
 
         grid.push(
           <div
             key={`${x}-${y}`}
             className={`w-6 h-6 border border-border/20 flex items-center justify-center text-xs transition-all duration-200 ${
-              isPlayer ? 'bg-aethex-500 animate-pulse' : collectible ? 'bg-yellow-500/50 animate-bounce' : 'bg-background/30'
+              isPlayer
+                ? "bg-aethex-500 animate-pulse"
+                : collectible
+                  ? "bg-yellow-500/50 animate-bounce"
+                  : "bg-background/30"
             }`}
           >
-            {isPlayer && '🚀'}
-            {collectible && '⭐'}
-          </div>
+            {isPlayer && "🚀"}
+            {collectible && "⭐"}
+          </div>,
         );
       }
     }
@@ -219,7 +246,7 @@ const NotFound = () => {
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 3}s`,
                   animationDuration: `${3 + Math.random() * 2}s`,
-                  fontSize: `${12 + Math.random() * 8}px`
+                  fontSize: `${12 + Math.random() * 8}px`,
                 }}
               >
                 404
@@ -253,11 +280,17 @@ const NotFound = () => {
               </div>
 
               <div className="flex justify-center space-x-4">
-                <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-pulse">
+                <Badge
+                  variant="outline"
+                  className="border-aethex-400/50 text-aethex-400 animate-pulse"
+                >
                   <Zap className="h-3 w-3 mr-1" />
                   Time Lost: {timeSpent}s
                 </Badge>
-                <Badge variant="outline" className="border-neon-blue/50 text-neon-blue animate-bounce-gentle">
+                <Badge
+                  variant="outline"
+                  className="border-neon-blue/50 text-neon-blue animate-bounce-gentle"
+                >
                   <Target className="h-3 w-3 mr-1" />
                   Location: {location.pathname}
                 </Badge>
@@ -272,7 +305,8 @@ const NotFound = () => {
                   <span>404 Rescue Mission</span>
                 </CardTitle>
                 <CardDescription>
-                  Help the rocket collect all stars to unlock the way home! Use WASD or arrow keys.
+                  Help the rocket collect all stars to unlock the way home! Use
+                  WASD or arrow keys.
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
@@ -290,10 +324,16 @@ const NotFound = () => {
                   <div className="space-y-4">
                     <div className="flex justify-between items-center">
                       <div className="text-sm">
-                        Score: <span className="text-gradient font-bold">{gameState.score}</span>
+                        Score:{" "}
+                        <span className="text-gradient font-bold">
+                          {gameState.score}
+                        </span>
                       </div>
                       <div className="text-sm">
-                        Lives: <span className="text-red-400">{'❤️'.repeat(gameState.lives)}</span>
+                        Lives:{" "}
+                        <span className="text-red-400">
+                          {"❤️".repeat(gameState.lives)}
+                        </span>
                       </div>
                     </div>
 
@@ -302,7 +342,9 @@ const NotFound = () => {
                     </div>
 
                     <div className="text-xs text-muted-foreground">
-                      Collected: {gameState.collectibles.filter(c => c.collected).length} / {gameState.collectibles.length}
+                      Collected:{" "}
+                      {gameState.collectibles.filter((c) => c.collected).length}{" "}
+                      / {gameState.collectibles.length}
                     </div>
                   </div>
                 )}
@@ -311,9 +353,12 @@ const NotFound = () => {
                   <div className="space-y-4 animate-scale-in">
                     <div className="text-center space-y-2">
                       <Trophy className="h-12 w-12 text-yellow-500 mx-auto animate-bounce" />
-                      <h3 className="text-xl font-bold text-gradient">Mission Complete!</h3>
+                      <h3 className="text-xl font-bold text-gradient">
+                        Mission Complete!
+                      </h3>
                       <p className="text-muted-foreground">
-                        You've rescued the lost page! Final Score: {gameState.score}
+                        You've rescued the lost page! Final Score:{" "}
+                        {gameState.score}
                       </p>
                     </div>
                     <Button
@@ -337,7 +382,8 @@ const NotFound = () => {
                     🎉 Konami Code Activated! 🎉
                   </h3>
                   <p className="text-muted-foreground mb-4">
-                    You've unlocked the secret developer mode! You're clearly a person of culture.
+                    You've unlocked the secret developer mode! You're clearly a
+                    person of culture.
                   </p>
                   <Button
                     onClick={() => navigate("/dashboard")}
diff --git a/client/pages/Onboarding.tsx b/client/pages/Onboarding.tsx
index 3746a0e8..21010c38 100644
--- a/client/pages/Onboarding.tsx
+++ b/client/pages/Onboarding.tsx
@@ -8,7 +8,7 @@ import Experience from "@/components/onboarding/Experience";
 import Interests from "@/components/onboarding/Interests";
 import Welcome from "@/components/onboarding/Welcome";
 
-export type UserType = 'game-developer' | 'client' | 'member' | 'customer';
+export type UserType = "game-developer" | "client" | "member" | "customer";
 
 export interface OnboardingData {
   userType: UserType | null;
@@ -32,15 +32,15 @@ export interface OnboardingData {
 const initialData: OnboardingData = {
   userType: null,
   personalInfo: {
-    firstName: '',
-    lastName: '',
-    email: '',
-    company: '',
+    firstName: "",
+    lastName: "",
+    email: "",
+    company: "",
   },
   experience: {
-    level: '',
+    level: "",
     skills: [],
-    previousProjects: '',
+    previousProjects: "",
   },
   interests: {
     primaryGoals: [],
@@ -71,14 +71,14 @@ export default function Onboarding() {
   }, []);
 
   const updateData = (newData: Partial<OnboardingData>) => {
-    setData(prev => ({ ...prev, ...newData }));
+    setData((prev) => ({ ...prev, ...newData }));
   };
 
   const nextStep = () => {
     if (currentStep < steps.length - 1) {
       setIsTransitioning(true);
       setTimeout(() => {
-        setCurrentStep(prev => prev + 1);
+        setCurrentStep((prev) => prev + 1);
         setIsTransitioning(false);
       }, 300);
     }
@@ -88,7 +88,7 @@ export default function Onboarding() {
     if (currentStep > 0) {
       setIsTransitioning(true);
       setTimeout(() => {
-        setCurrentStep(prev => prev - 1);
+        setCurrentStep((prev) => prev - 1);
         setIsTransitioning(false);
       }, 300);
     }
@@ -97,7 +97,13 @@ export default function Onboarding() {
   const CurrentStepComponent = steps[currentStep].component;
 
   if (isLoading) {
-    return <LoadingScreen message="Preparing your onboarding experience..." showProgress={true} duration={1200} />;
+    return (
+      <LoadingScreen
+        message="Preparing your onboarding experience..."
+        showProgress={true}
+        duration={1200}
+      />
+    );
   }
 
   return (
@@ -107,7 +113,9 @@ export default function Onboarding() {
           {/* Progress Bar */}
           <div className="mb-8 animate-slide-down">
             <div className="flex items-center justify-between mb-4">
-              <h1 className="text-2xl font-bold text-gradient animate-pulse-glow">Join AeThex</h1>
+              <h1 className="text-2xl font-bold text-gradient animate-pulse-glow">
+                Join AeThex
+              </h1>
               <span className="text-sm text-muted-foreground animate-fade-in">
                 Step {currentStep + 1} of {steps.length}
               </span>
@@ -115,7 +123,9 @@ export default function Onboarding() {
             <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
               <div
                 className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full transition-all duration-700 ease-out glow-blue"
-                style={{ width: `${((currentStep + 1) / steps.length) * 100}%` }}
+                style={{
+                  width: `${((currentStep + 1) / steps.length) * 100}%`,
+                }}
               />
             </div>
             {/* Step Indicators */}
@@ -125,8 +135,8 @@ export default function Onboarding() {
                   key={index}
                   className={`w-2 h-2 rounded-full transition-all duration-300 ${
                     index <= currentStep
-                      ? 'bg-aethex-400 glow-blue animate-pulse'
-                      : 'bg-muted'
+                      ? "bg-aethex-400 glow-blue animate-pulse"
+                      : "bg-muted"
                   }`}
                 />
               ))}
@@ -167,7 +177,7 @@ export default function Onboarding() {
                   left: `${Math.random() * 100}%`,
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 3}s`,
-                  animationDuration: `${3 + Math.random() * 2}s`
+                  animationDuration: `${3 + Math.random() * 2}s`,
                 }}
               />
             ))}
diff --git a/client/pages/Placeholder.tsx b/client/pages/Placeholder.tsx
index 4152c186..7efbcc55 100644
--- a/client/pages/Placeholder.tsx
+++ b/client/pages/Placeholder.tsx
@@ -1,6 +1,12 @@
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Construction, ArrowLeft, MessageCircle } from "lucide-react";
 import { Link } from "react-router-dom";
 
@@ -22,37 +28,47 @@ export default function Placeholder({ title, description }: PlaceholderProps) {
                 </div>
               </div>
               <div className="space-y-2">
-                <CardTitle className="text-2xl text-gradient">{title}</CardTitle>
+                <CardTitle className="text-2xl text-gradient">
+                  {title}
+                </CardTitle>
                 <CardDescription className="text-lg">
                   {description}
                 </CardDescription>
               </div>
             </CardHeader>
-            
+
             <CardContent className="space-y-6">
               <div className="text-center space-y-4">
                 <p className="text-muted-foreground">
-                  This page is currently under development. We're working hard to bring you 
-                  amazing features and content. Check back soon!
+                  This page is currently under development. We're working hard
+                  to bring you amazing features and content. Check back soon!
                 </p>
-                
+
                 <div className="bg-background/30 rounded-lg p-4 border border-border/30">
                   <p className="text-sm text-muted-foreground">
-                    💡 <strong>Want to help us prioritize?</strong> Let us know what you'd like to see 
-                    on this page by contacting our team. Your feedback helps shape our development roadmap.
+                    💡 <strong>Want to help us prioritize?</strong> Let us know
+                    what you'd like to see on this page by contacting our team.
+                    Your feedback helps shape our development roadmap.
                   </p>
                 </div>
               </div>
 
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button asChild variant="outline" className="flex items-center space-x-2">
+                <Button
+                  asChild
+                  variant="outline"
+                  className="flex items-center space-x-2"
+                >
                   <Link to="/">
                     <ArrowLeft className="h-4 w-4" />
                     <span>Back to Home</span>
                   </Link>
                 </Button>
-                
-                <Button asChild className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 flex items-center space-x-2">
+
+                <Button
+                  asChild
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 flex items-center space-x-2"
+                >
                   <Link to="/contact">
                     <MessageCircle className="h-4 w-4" />
                     <span>Contact Us</span>
@@ -62,8 +78,18 @@ export default function Placeholder({ title, description }: PlaceholderProps) {
 
               <div className="text-center pt-4">
                 <p className="text-xs text-muted-foreground">
-                  In the meantime, explore our <Link to="/onboarding" className="text-aethex-400 hover:underline">onboarding process</Link> or 
-                  visit our <Link to="/" className="text-aethex-400 hover:underline">homepage</Link> to learn more about AeThex.
+                  In the meantime, explore our{" "}
+                  <Link
+                    to="/onboarding"
+                    className="text-aethex-400 hover:underline"
+                  >
+                    onboarding process
+                  </Link>{" "}
+                  or visit our{" "}
+                  <Link to="/" className="text-aethex-400 hover:underline">
+                    homepage
+                  </Link>{" "}
+                  to learn more about AeThex.
                 </p>
               </div>
             </CardContent>
diff --git a/client/pages/ResearchLabs.tsx b/client/pages/ResearchLabs.tsx
index d75e8fac..043a7c8e 100644
--- a/client/pages/ResearchLabs.tsx
+++ b/client/pages/ResearchLabs.tsx
@@ -1,18 +1,24 @@
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { aethexToast } from "@/lib/aethex-toast";
 import { Link } from "react-router-dom";
-import { 
-  Zap, 
-  Brain, 
-  Atom, 
-  Cpu, 
-  Database, 
-  Shield, 
+import {
+  Zap,
+  Brain,
+  Atom,
+  Cpu,
+  Database,
+  Shield,
   Rocket,
   ArrowRight,
   CheckCircle,
@@ -20,7 +26,7 @@ import {
   Download,
   ExternalLink,
   Beaker,
-  Microscope
+  Microscope,
 } from "lucide-react";
 
 export default function ResearchLabs() {
@@ -49,7 +55,7 @@ export default function ResearchLabs() {
       papers: 12,
       breakthrough: "Quantum ML optimization algorithm",
       impact: "50% faster training",
-      color: "from-purple-500 to-indigo-600"
+      color: "from-purple-500 to-indigo-600",
     },
     {
       title: "Neural Architecture Search",
@@ -59,7 +65,7 @@ export default function ResearchLabs() {
       papers: 8,
       breakthrough: "AutoML framework",
       impact: "90% accuracy improvement",
-      color: "from-blue-500 to-cyan-600"
+      color: "from-blue-500 to-cyan-600",
     },
     {
       title: "Edge AI Systems",
@@ -69,18 +75,19 @@ export default function ResearchLabs() {
       papers: 6,
       breakthrough: "Model compression technique",
       impact: "10x smaller models",
-      color: "from-green-500 to-emerald-600"
+      color: "from-green-500 to-emerald-600",
     },
     {
       title: "Blockchain Security",
-      description: "Next-generation consensus algorithms and smart contract security",
+      description:
+        "Next-generation consensus algorithms and smart contract security",
       icon: Shield,
       status: "Research Phase",
       papers: 4,
       breakthrough: "Zero-knowledge protocols",
       impact: "Enhanced privacy",
-      color: "from-orange-500 to-red-600"
-    }
+      color: "from-orange-500 to-red-600",
+    },
   ];
 
   const publications = [
@@ -91,16 +98,17 @@ export default function ResearchLabs() {
       year: "2024",
       citations: 127,
       type: "Peer Reviewed",
-      impact: "High"
+      impact: "High",
     },
     {
-      title: "Efficient Neural Architecture Search Using Evolutionary Algorithms",
+      title:
+        "Efficient Neural Architecture Search Using Evolutionary Algorithms",
       authors: "Dr. Aisha Patel, Dr. John Liu",
       journal: "International Conference on Machine Learning",
       year: "2024",
       citations: 89,
       type: "Conference",
-      impact: "Medium"
+      impact: "Medium",
     },
     {
       title: "Edge Computing Framework for Real-time Game Analytics",
@@ -109,36 +117,50 @@ export default function ResearchLabs() {
       year: "2023",
       citations: 156,
       type: "Peer Reviewed",
-      impact: "High"
-    }
+      impact: "High",
+    },
   ];
 
   const labs = [
     {
       name: "Quantum AI Lab",
       location: "Building A, Floor 3",
-      equipment: ["IBM Quantum System", "Superconducting Qubits", "Cryogenic Systems"],
+      equipment: [
+        "IBM Quantum System",
+        "Superconducting Qubits",
+        "Cryogenic Systems",
+      ],
       capacity: "12 researchers",
-      status: "Operational"
+      status: "Operational",
     },
     {
       name: "Neural Networks Lab",
-      location: "Building B, Floor 2", 
+      location: "Building B, Floor 2",
       equipment: ["GPU Clusters", "TPU Arrays", "High-Memory Systems"],
       capacity: "20 researchers",
-      status: "Operational"
+      status: "Operational",
     },
     {
       name: "Blockchain Security Lab",
       location: "Building C, Floor 1",
-      equipment: ["Security Testing Rigs", "Network Simulators", "Hardware Wallets"],
+      equipment: [
+        "Security Testing Rigs",
+        "Network Simulators",
+        "Hardware Wallets",
+      ],
       capacity: "8 researchers",
-      status: "Expanding"
-    }
+      status: "Expanding",
+    },
   ];
 
   if (isLoading) {
-    return <LoadingScreen message="Accessing Research Division..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Accessing Research Division..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -156,39 +178,52 @@ export default function ResearchLabs() {
                   top: `${Math.random() * 100}%`,
                   animationDelay: `${Math.random() * 3}s`,
                   animationDuration: `${3 + Math.random() * 2}s`,
-                  fontSize: `${8 + Math.random() * 6}px`
+                  fontSize: `${8 + Math.random() * 6}px`,
                 }}
               >
-                {'⚛️🧠🔬⚡'.charAt(Math.floor(Math.random() * 4))}
+                {"⚛️🧠🔬⚡".charAt(Math.floor(Math.random() * 4))}
               </div>
             ))}
           </div>
 
           <div className="container mx-auto px-4 text-center relative z-10">
             <div className="max-w-4xl mx-auto space-y-8">
-              <Badge variant="outline" className="border-neon-yellow/50 text-neon-yellow animate-bounce-gentle">
+              <Badge
+                variant="outline"
+                className="border-neon-yellow/50 text-neon-yellow animate-bounce-gentle"
+              >
                 <Beaker className="h-3 w-3 mr-1" />
                 Research & Experimental Division
               </Badge>
-              
+
               <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
                 <span className="text-gradient">AeThex | L.A.B.S.</span>
               </h1>
-              
+
               <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                Pushing the boundaries of technology through cutting-edge research 
-                and breakthrough discoveries that shape the future of digital innovation.
+                Pushing the boundaries of technology through cutting-edge
+                research and breakthrough discoveries that shape the future of
+                digital innovation.
               </p>
 
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-neon-yellow to-aethex-600 hover:from-neon-yellow/90 hover:to-aethex-700 glow-yellow hover-lift">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-neon-yellow to-aethex-600 hover:from-neon-yellow/90 hover:to-aethex-700 glow-yellow hover-lift"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <Microscope className="h-5 w-5" />
                     <span>Collaborate With Us</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-border/50 hover-lift">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-border/50 hover-lift"
+                >
                   <Link to="/docs">Research Papers</Link>
                 </Button>
               </div>
@@ -204,7 +239,8 @@ export default function ResearchLabs() {
                 Active Research Areas
               </h2>
               <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-                Exploring frontiers in quantum computing, AI, and emerging technologies
+                Exploring frontiers in quantum computing, AI, and emerging
+                technologies
               </p>
             </div>
 
@@ -212,19 +248,23 @@ export default function ResearchLabs() {
               {researchAreas.map((area, index) => {
                 const Icon = area.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="relative overflow-hidden border-border/50 hover:border-neon-yellow/50 transition-all duration-500 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
                   >
                     <CardHeader>
                       <div className="flex items-center space-x-4">
-                        <div className={`p-3 rounded-lg bg-gradient-to-r ${area.color}`}>
+                        <div
+                          className={`p-3 rounded-lg bg-gradient-to-r ${area.color}`}
+                        >
                           <Icon className="h-6 w-6 text-white" />
                         </div>
                         <div className="flex-1">
                           <div className="flex items-center justify-between">
-                            <CardTitle className="text-xl">{area.title}</CardTitle>
+                            <CardTitle className="text-xl">
+                              {area.title}
+                            </CardTitle>
                             <Badge variant="outline" className="text-xs">
                               {area.status}
                             </Badge>
@@ -238,12 +278,20 @@ export default function ResearchLabs() {
                     <CardContent className="space-y-4">
                       <div className="grid grid-cols-3 gap-4 text-center">
                         <div>
-                          <div className="text-lg font-bold text-gradient">{area.papers}</div>
-                          <div className="text-xs text-muted-foreground">Publications</div>
+                          <div className="text-lg font-bold text-gradient">
+                            {area.papers}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            Publications
+                          </div>
                         </div>
                         <div className="col-span-2">
-                          <div className="text-sm font-semibold">{area.breakthrough}</div>
-                          <div className="text-xs text-muted-foreground">{area.impact}</div>
+                          <div className="text-sm font-semibold">
+                            {area.breakthrough}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {area.impact}
+                          </div>
                         </div>
                       </div>
                     </CardContent>
@@ -268,7 +316,7 @@ export default function ResearchLabs() {
 
             <div className="max-w-4xl mx-auto space-y-6">
               {publications.map((pub, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right"
                   style={{ animationDelay: `${index * 0.1}s` }}
@@ -276,12 +324,22 @@ export default function ResearchLabs() {
                   <CardContent className="p-6">
                     <div className="flex justify-between items-start mb-4">
                       <div className="flex-1">
-                        <h3 className="text-lg font-semibold text-gradient mb-2">{pub.title}</h3>
-                        <p className="text-sm text-muted-foreground mb-2">{pub.authors}</p>
-                        <p className="text-sm font-medium">{pub.journal} • {pub.year}</p>
+                        <h3 className="text-lg font-semibold text-gradient mb-2">
+                          {pub.title}
+                        </h3>
+                        <p className="text-sm text-muted-foreground mb-2">
+                          {pub.authors}
+                        </p>
+                        <p className="text-sm font-medium">
+                          {pub.journal} • {pub.year}
+                        </p>
                       </div>
                       <div className="flex space-x-2">
-                        <Badge variant={pub.impact === 'High' ? 'default' : 'secondary'}>
+                        <Badge
+                          variant={
+                            pub.impact === "High" ? "default" : "secondary"
+                          }
+                        >
                           {pub.impact} Impact
                         </Badge>
                         <Badge variant="outline">{pub.type}</Badge>
@@ -289,7 +347,10 @@ export default function ResearchLabs() {
                     </div>
                     <div className="flex justify-between items-center">
                       <div className="text-sm text-muted-foreground">
-                        Citations: <span className="font-semibold text-aethex-400">{pub.citations}</span>
+                        Citations:{" "}
+                        <span className="font-semibold text-aethex-400">
+                          {pub.citations}
+                        </span>
                       </div>
                       <div className="flex space-x-2">
                         <Button size="sm" variant="outline">
@@ -317,13 +378,14 @@ export default function ResearchLabs() {
                 Research Facilities
               </h2>
               <p className="text-lg text-muted-foreground">
-                State-of-the-art laboratories equipped with cutting-edge technology
+                State-of-the-art laboratories equipped with cutting-edge
+                technology
               </p>
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
               {labs.map((lab, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border-border/50 hover:border-neon-yellow/50 transition-all duration-300 hover-lift animate-scale-in"
                   style={{ animationDelay: `${index * 0.2}s` }}
@@ -331,8 +393,10 @@ export default function ResearchLabs() {
                   <CardHeader>
                     <div className="flex items-center justify-between">
                       <CardTitle className="text-lg">{lab.name}</CardTitle>
-                      <Badge 
-                        variant={lab.status === 'Operational' ? 'default' : 'secondary'}
+                      <Badge
+                        variant={
+                          lab.status === "Operational" ? "default" : "secondary"
+                        }
                         className="text-xs"
                       >
                         {lab.status}
@@ -345,7 +409,10 @@ export default function ResearchLabs() {
                       <h4 className="font-semibold text-sm mb-2">Equipment:</h4>
                       <div className="space-y-1">
                         {lab.equipment.map((item, itemIndex) => (
-                          <div key={itemIndex} className="flex items-center space-x-2 text-sm">
+                          <div
+                            key={itemIndex}
+                            className="flex items-center space-x-2 text-sm"
+                          >
                             <CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
                             <span>{item}</span>
                           </div>
@@ -353,7 +420,8 @@ export default function ResearchLabs() {
                       </div>
                     </div>
                     <div className="text-sm text-muted-foreground">
-                      Capacity: <span className="font-medium">{lab.capacity}</span>
+                      Capacity:{" "}
+                      <span className="font-medium">{lab.capacity}</span>
                     </div>
                   </CardContent>
                 </Card>
@@ -370,19 +438,29 @@ export default function ResearchLabs() {
                 Join Our Research Community
               </h2>
               <p className="text-xl text-muted-foreground">
-                Collaborate with world-class researchers and contribute to breakthrough discoveries 
-                that will shape the future of technology.
+                Collaborate with world-class researchers and contribute to
+                breakthrough discoveries that will shape the future of
+                technology.
               </p>
-              
+
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-neon-yellow to-aethex-600 hover:from-neon-yellow/90 hover:to-aethex-700 glow-yellow hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-neon-yellow to-aethex-600 hover:from-neon-yellow/90 hover:to-aethex-700 glow-yellow hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <Beaker className="h-5 w-5" />
                     <span>Research Partnership</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-neon-yellow/50 hover:border-neon-yellow hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-neon-yellow/50 hover:border-neon-yellow hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/docs">Access Publications</Link>
                 </Button>
               </div>
@@ -391,17 +469,23 @@ export default function ResearchLabs() {
                 <div className="text-center">
                   <Database className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Open Data</h3>
-                  <p className="text-sm text-muted-foreground">Research datasets</p>
+                  <p className="text-sm text-muted-foreground">
+                    Research datasets
+                  </p>
                 </div>
                 <div className="text-center">
                   <ExternalLink className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Collaborations</h3>
-                  <p className="text-sm text-muted-foreground">University partnerships</p>
+                  <p className="text-sm text-muted-foreground">
+                    University partnerships
+                  </p>
                 </div>
                 <div className="text-center">
                   <Rocket className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Innovation</h3>
-                  <p className="text-sm text-muted-foreground">Breakthrough research</p>
+                  <p className="text-sm text-muted-foreground">
+                    Breakthrough research
+                  </p>
                 </div>
               </div>
             </div>
diff --git a/client/pages/Support.tsx b/client/pages/Support.tsx
index 0ad6fb37..be386a19 100644
--- a/client/pages/Support.tsx
+++ b/client/pages/Support.tsx
@@ -1,15 +1,21 @@
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-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 LoadingScreen from "@/components/LoadingScreen";
 import { aethexToast } from "@/lib/aethex-toast";
 import { Link } from "react-router-dom";
-import { 
-  Headphones, 
-  MessageCircle, 
-  Clock, 
+import {
+  Headphones,
+  MessageCircle,
+  Clock,
   CheckCircle,
   ArrowRight,
   Search,
@@ -23,7 +29,7 @@ import {
   Bug,
   Lightbulb,
   Shield,
-  Zap
+  Zap,
 } from "lucide-react";
 
 export default function Support() {
@@ -51,7 +57,7 @@ export default function Support() {
       availability: "24/7",
       responseTime: "< 5 minutes",
       bestFor: "Urgent issues, quick questions",
-      color: "from-green-500 to-emerald-600"
+      color: "from-green-500 to-emerald-600",
     },
     {
       title: "Email Support",
@@ -60,7 +66,7 @@ export default function Support() {
       availability: "Business hours",
       responseTime: "< 4 hours",
       bestFor: "Technical issues, account problems",
-      color: "from-blue-500 to-cyan-600"
+      color: "from-blue-500 to-cyan-600",
     },
     {
       title: "Phone Support",
@@ -69,7 +75,7 @@ export default function Support() {
       availability: "Mon-Fri 9AM-6PM PST",
       responseTime: "Immediate",
       bestFor: "Enterprise customers, urgent issues",
-      color: "from-purple-500 to-indigo-600"
+      color: "from-purple-500 to-indigo-600",
     },
     {
       title: "Community Forum",
@@ -78,8 +84,8 @@ export default function Support() {
       availability: "24/7",
       responseTime: "< 2 hours",
       bestFor: "General questions, discussions",
-      color: "from-orange-500 to-red-600"
-    }
+      color: "from-orange-500 to-red-600",
+    },
   ];
 
   const faqs = [
@@ -88,46 +94,52 @@ export default function Support() {
       questions: [
         {
           question: "How do I create my first AeThex project?",
-          answer: "Install the AeThex CLI with 'npm install -g @aethex/cli', then run 'aethex create my-project' to get started.",
-          helpful: 89
+          answer:
+            "Install the AeThex CLI with 'npm install -g @aethex/cli', then run 'aethex create my-project' to get started.",
+          helpful: 89,
         },
         {
           question: "What are the system requirements?",
-          answer: "AeThex works on Windows 10+, macOS 10.15+, and Ubuntu 18.04+. You'll need Node.js 16+ and 4GB RAM minimum.",
-          helpful: 76
-        }
-      ]
+          answer:
+            "AeThex works on Windows 10+, macOS 10.15+, and Ubuntu 18.04+. You'll need Node.js 16+ and 4GB RAM minimum.",
+          helpful: 76,
+        },
+      ],
     },
     {
       category: "Technical Issues",
       questions: [
         {
           question: "My game is running slowly, how can I optimize it?",
-          answer: "Check our performance optimization guide. Common fixes include reducing texture sizes, optimizing scripts, and using object pooling.",
-          helpful: 94
+          answer:
+            "Check our performance optimization guide. Common fixes include reducing texture sizes, optimizing scripts, and using object pooling.",
+          helpful: 94,
         },
         {
           question: "How do I fix deployment errors?",
-          answer: "Most deployment errors are due to configuration issues. Check your environment variables and API keys in the AeThex dashboard.",
-          helpful: 82
-        }
-      ]
+          answer:
+            "Most deployment errors are due to configuration issues. Check your environment variables and API keys in the AeThex dashboard.",
+          helpful: 82,
+        },
+      ],
     },
     {
       category: "Billing & Account",
       questions: [
         {
           question: "How do I upgrade my plan?",
-          answer: "Visit your account dashboard and click 'Upgrade Plan'. Changes take effect immediately with prorated billing.",
-          helpful: 91
+          answer:
+            "Visit your account dashboard and click 'Upgrade Plan'. Changes take effect immediately with prorated billing.",
+          helpful: 91,
         },
         {
           question: "Can I cancel my subscription anytime?",
-          answer: "Yes, you can cancel anytime from your account settings. You'll retain access until the end of your billing period.",
-          helpful: 88
-        }
-      ]
-    }
+          answer:
+            "Yes, you can cancel anytime from your account settings. You'll retain access until the end of your billing period.",
+          helpful: 88,
+        },
+      ],
+    },
   ];
 
   const resources = [
@@ -136,39 +148,57 @@ export default function Support() {
       description: "Comprehensive guides and API references",
       icon: Book,
       link: "/docs",
-      color: "from-blue-500 to-cyan-600"
+      color: "from-blue-500 to-cyan-600",
     },
     {
       title: "Video Tutorials",
       description: "Step-by-step visual learning",
       icon: Video,
       link: "/tutorials",
-      color: "from-red-500 to-pink-600"
+      color: "from-red-500 to-pink-600",
     },
     {
       title: "System Status",
       description: "Real-time service status and updates",
       icon: Settings,
       link: "/status",
-      color: "from-green-500 to-emerald-600"
+      color: "from-green-500 to-emerald-600",
     },
     {
       title: "Feature Requests",
       description: "Suggest new features and improvements",
       icon: Lightbulb,
       link: "/feedback",
-      color: "from-yellow-500 to-orange-600"
-    }
+      color: "from-yellow-500 to-orange-600",
+    },
   ];
 
-  const categories = ["all", "getting-started", "technical", "billing", "account"];
+  const categories = [
+    "all",
+    "getting-started",
+    "technical",
+    "billing",
+    "account",
+  ];
 
-  const filteredFaqs = selectedCategory === "all" 
-    ? faqs 
-    : faqs.filter(faq => faq.category.toLowerCase().replace(/\s+/g, '-').includes(selectedCategory.replace('-', ' ')));
+  const filteredFaqs =
+    selectedCategory === "all"
+      ? faqs
+      : faqs.filter((faq) =>
+          faq.category
+            .toLowerCase()
+            .replace(/\s+/g, "-")
+            .includes(selectedCategory.replace("-", " ")),
+        );
 
   if (isLoading) {
-    return <LoadingScreen message="Loading Support Center..." showProgress={true} duration={1000} />;
+    return (
+      <LoadingScreen
+        message="Loading Support Center..."
+        showProgress={true}
+        duration={1000}
+      />
+    );
   }
 
   return (
@@ -178,18 +208,21 @@ export default function Support() {
         <section className="relative py-20 lg:py-32">
           <div className="container mx-auto px-4 text-center relative z-10">
             <div className="max-w-4xl mx-auto space-y-8">
-              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
+              <Badge
+                variant="outline"
+                className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
+              >
                 <Headphones className="h-3 w-3 mr-1" />
                 Support Center
               </Badge>
-              
+
               <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
                 <span className="text-gradient-purple">We're Here to Help</span>
               </h1>
-              
+
               <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                Get the support you need to succeed with AeThex. Our team of experts 
-                is ready to help you overcome any challenge.
+                Get the support you need to succeed with AeThex. Our team of
+                experts is ready to help you overcome any challenge.
               </p>
 
               {/* Search Bar */}
@@ -221,18 +254,22 @@ export default function Support() {
               {supportOptions.map((option, index) => {
                 const Icon = option.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
                   >
                     <CardHeader>
                       <div className="flex items-center space-x-4">
-                        <div className={`p-3 rounded-lg bg-gradient-to-r ${option.color}`}>
+                        <div
+                          className={`p-3 rounded-lg bg-gradient-to-r ${option.color}`}
+                        >
                           <Icon className="h-6 w-6 text-white" />
                         </div>
                         <div className="flex-1">
-                          <CardTitle className="text-xl">{option.title}</CardTitle>
+                          <CardTitle className="text-xl">
+                            {option.title}
+                          </CardTitle>
                           <CardDescription className="mt-1">
                             {option.description}
                           </CardDescription>
@@ -242,19 +279,31 @@ export default function Support() {
                     <CardContent className="space-y-4">
                       <div className="grid grid-cols-1 gap-3 text-sm">
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">Availability:</span>
-                          <span className="font-semibold text-aethex-400">{option.availability}</span>
+                          <span className="text-muted-foreground">
+                            Availability:
+                          </span>
+                          <span className="font-semibold text-aethex-400">
+                            {option.availability}
+                          </span>
                         </div>
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">Response Time:</span>
-                          <span className="font-semibold text-aethex-400">{option.responseTime}</span>
+                          <span className="text-muted-foreground">
+                            Response Time:
+                          </span>
+                          <span className="font-semibold text-aethex-400">
+                            {option.responseTime}
+                          </span>
                         </div>
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">Best For:</span>
-                          <span className="font-semibold">{option.bestFor}</span>
+                          <span className="text-muted-foreground">
+                            Best For:
+                          </span>
+                          <span className="font-semibold">
+                            {option.bestFor}
+                          </span>
                         </div>
                       </div>
-                      
+
                       <Button asChild className="w-full">
                         <Link to="/contact">
                           Get Support
@@ -287,17 +336,20 @@ export default function Support() {
                 {categories.map((category, index) => (
                   <Button
                     key={category}
-                    variant={selectedCategory === category ? "default" : "outline"}
+                    variant={
+                      selectedCategory === category ? "default" : "outline"
+                    }
                     size="sm"
                     onClick={() => setSelectedCategory(category)}
                     className={`animate-scale-in ${
-                      selectedCategory === category 
-                        ? 'bg-gradient-to-r from-aethex-500 to-neon-blue' 
-                        : ''
+                      selectedCategory === category
+                        ? "bg-gradient-to-r from-aethex-500 to-neon-blue"
+                        : ""
                     }`}
                     style={{ animationDelay: `${index * 0.1}s` }}
                   >
-                    {category.charAt(0).toUpperCase() + category.slice(1).replace('-', ' ')}
+                    {category.charAt(0).toUpperCase() +
+                      category.slice(1).replace("-", " ")}
                   </Button>
                 ))}
               </div>
@@ -306,10 +358,12 @@ export default function Support() {
               <div className="space-y-8">
                 {filteredFaqs.map((category, categoryIndex) => (
                   <div key={categoryIndex}>
-                    <h3 className="text-xl font-semibold text-gradient mb-4">{category.category}</h3>
+                    <h3 className="text-xl font-semibold text-gradient mb-4">
+                      {category.category}
+                    </h3>
                     <div className="space-y-4">
                       {category.questions.map((faq, faqIndex) => (
-                        <Card 
+                        <Card
                           key={faqIndex}
                           className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right"
                           style={{ animationDelay: `${faqIndex * 0.1}s` }}
@@ -317,10 +371,14 @@ export default function Support() {
                           <CardContent className="p-6">
                             <div className="space-y-3">
                               <div className="flex items-start justify-between">
-                                <h4 className="font-semibold text-lg">{faq.question}</h4>
+                                <h4 className="font-semibold text-lg">
+                                  {faq.question}
+                                </h4>
                                 <HelpCircle className="h-5 w-5 text-aethex-400 flex-shrink-0 mt-0.5" />
                               </div>
-                              <p className="text-muted-foreground">{faq.answer}</p>
+                              <p className="text-muted-foreground">
+                                {faq.answer}
+                              </p>
                               <div className="flex items-center justify-between pt-3 border-t border-border/30">
                                 <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                   <CheckCircle className="h-4 w-4 text-green-400" />
@@ -363,16 +421,20 @@ export default function Support() {
               {resources.map((resource, index) => {
                 const Icon = resource.icon;
                 return (
-                  <Card 
+                  <Card
                     key={index}
                     className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                     style={{ animationDelay: `${index * 0.1}s` }}
                   >
                     <CardHeader>
-                      <div className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}>
+                      <div
+                        className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}
+                      >
                         <Icon className="h-8 w-8 text-white" />
                       </div>
-                      <CardTitle className="text-lg">{resource.title}</CardTitle>
+                      <CardTitle className="text-lg">
+                        {resource.title}
+                      </CardTitle>
                       <CardDescription>{resource.description}</CardDescription>
                     </CardHeader>
                     <CardContent>
@@ -400,17 +462,24 @@ export default function Support() {
                     <Zap className="h-8 w-8 text-red-400" />
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold text-gradient mb-4">Critical Issue?</h3>
+                <h3 className="text-2xl font-bold text-gradient mb-4">
+                  Critical Issue?
+                </h3>
                 <p className="text-muted-foreground mb-6">
-                  If you're experiencing a critical production issue that's affecting your users, 
-                  contact our emergency support line for immediate assistance.
+                  If you're experiencing a critical production issue that's
+                  affecting your users, contact our emergency support line for
+                  immediate assistance.
                 </p>
                 <div className="flex flex-col sm:flex-row justify-center gap-4">
                   <Button size="lg" className="bg-red-500 hover:bg-red-600">
                     <Phone className="h-5 w-5 mr-2" />
                     Emergency Hotline
                   </Button>
-                  <Button size="lg" variant="outline" className="border-red-500/50 text-red-400 hover:bg-red-500/10">
+                  <Button
+                    size="lg"
+                    variant="outline"
+                    className="border-red-500/50 text-red-400 hover:bg-red-500/10"
+                  >
                     <Bug className="h-5 w-5 mr-2" />
                     Report Critical Bug
                   </Button>
@@ -428,19 +497,28 @@ export default function Support() {
                 Still Need Help?
               </h2>
               <p className="text-xl text-muted-foreground">
-                Our support team is standing by to help you succeed. Don't hesitate to reach out 
-                with any questions or concerns.
+                Our support team is standing by to help you succeed. Don't
+                hesitate to reach out with any questions or concerns.
               </p>
-              
+
               <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/contact" className="flex items-center space-x-2">
                     <MessageCircle className="h-5 w-5" />
                     <span>Contact Support</span>
                     <ArrowRight className="h-5 w-5" />
                   </Link>
                 </Button>
-                <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
+                >
                   <Link to="/community">Join Community</Link>
                 </Button>
               </div>
@@ -449,17 +527,23 @@ export default function Support() {
                 <div className="text-center">
                   <Clock className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">24/7 Availability</h3>
-                  <p className="text-sm text-muted-foreground">Always here for you</p>
+                  <p className="text-sm text-muted-foreground">
+                    Always here for you
+                  </p>
                 </div>
                 <div className="text-center">
                   <Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Expert Team</h3>
-                  <p className="text-sm text-muted-foreground">Technical specialists</p>
+                  <p className="text-sm text-muted-foreground">
+                    Technical specialists
+                  </p>
                 </div>
                 <div className="text-center">
                   <FileText className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                   <h3 className="font-semibold">Comprehensive Docs</h3>
-                  <p className="text-sm text-muted-foreground">Detailed guides</p>
+                  <p className="text-sm text-muted-foreground">
+                    Detailed guides
+                  </p>
                 </div>
               </div>
             </div>