diff --git a/client/components/GamifiedBanner.tsx b/client/components/GamifiedBanner.tsx
index 4684f3e0..45abcf24 100644
--- a/client/components/GamifiedBanner.tsx
+++ b/client/components/GamifiedBanner.tsx
@@ -8,12 +8,15 @@ type Props = {
   style?: string | null;
 };
 
-const ACCENTS: Record<string, {
-  grad: string;
-  glowRing: string;
-  pill: string;
-  icon: any;
-}> = {
+const ACCENTS: Record<
+  string,
+  {
+    grad: string;
+    glowRing: string;
+    pill: string;
+    icon: any;
+  }
+> = {
   quest: {
     grad: "from-emerald-500/20 via-aethex-500/15 to-neon-blue/20",
     glowRing:
@@ -58,7 +61,9 @@ export function GamifiedBanner({ text, enabled, style }: Props) {
 
   const parts = useMemo(() => {
     // If user prefixed an emoji, use it
-    const m = /^([\p{Emoji}\p{Extended_Pictographic}]+)\s*(.*)$/u.exec(text || "");
+    const m = /^([\p{Emoji}\p{Extended_Pictographic}]+)\s*(.*)$/u.exec(
+      text || "",
+    );
     return {
       emoji: m?.[1] || "🎮",
       body: (m?.[2] || text || "").trim(),
diff --git a/client/components/SEO.tsx b/client/components/SEO.tsx
index 404e8e85..a3cecbee 100644
--- a/client/components/SEO.tsx
+++ b/client/components/SEO.tsx
@@ -11,40 +11,83 @@ export type SEOProps = {
 function upsertMeta(selector: string, attrs: Record<string, string>) {
   let el = document.querySelector(selector) as HTMLElement | null;
   if (!el) {
-    const tag = selector.startsWith('meta[') ? 'meta' : selector.startsWith('link[') ? 'link' : 'meta';
+    const tag = selector.startsWith("meta[")
+      ? "meta"
+      : selector.startsWith("link[")
+        ? "link"
+        : "meta";
     el = document.createElement(tag);
     document.head.appendChild(el);
   }
   Object.entries(attrs).forEach(([k, v]) => (el as any).setAttribute(k, v));
 }
 
-export default function SEO({ pageTitle, description, image, canonical, noIndex }: SEOProps) {
+export default function SEO({
+  pageTitle,
+  description,
+  image,
+  canonical,
+  noIndex,
+}: SEOProps) {
   useEffect(() => {
     const title = `AeThex | ${pageTitle}`;
     document.title = title;
 
     if (canonical) {
-      upsertMeta('link[rel="canonical"]', { rel: 'canonical', href: canonical });
-      upsertMeta('meta[property="og:url"]', { property: 'og:url', content: canonical });
+      upsertMeta('link[rel="canonical"]', {
+        rel: "canonical",
+        href: canonical,
+      });
+      upsertMeta('meta[property="og:url"]', {
+        property: "og:url",
+        content: canonical,
+      });
     }
 
     if (description) {
-      upsertMeta('meta[name="description"]', { name: 'description', content: description });
-      upsertMeta('meta[property="og:description"]', { property: 'og:description', content: description });
-      upsertMeta('meta[name="twitter:description"]', { name: 'twitter:description', content: description });
+      upsertMeta('meta[name="description"]', {
+        name: "description",
+        content: description,
+      });
+      upsertMeta('meta[property="og:description"]', {
+        property: "og:description",
+        content: description,
+      });
+      upsertMeta('meta[name="twitter:description"]', {
+        name: "twitter:description",
+        content: description,
+      });
     }
 
-    upsertMeta('meta[property="og:title"]', { property: 'og:title', content: title });
-    upsertMeta('meta[name="twitter:title"]', { name: 'twitter:title', content: title });
+    upsertMeta('meta[property="og:title"]', {
+      property: "og:title",
+      content: title,
+    });
+    upsertMeta('meta[name="twitter:title"]', {
+      name: "twitter:title",
+      content: title,
+    });
 
     if (image) {
-      upsertMeta('meta[property="og:image"]', { property: 'og:image', content: image });
-      upsertMeta('meta[name="twitter:image"]', { name: 'twitter:image', content: image });
+      upsertMeta('meta[property="og:image"]', {
+        property: "og:image",
+        content: image,
+      });
+      upsertMeta('meta[name="twitter:image"]', {
+        name: "twitter:image",
+        content: image,
+      });
     }
 
     if (noIndex) {
-      upsertMeta('meta[name="robots"]', { name: 'robots', content: 'noindex, nofollow' });
-      upsertMeta('meta[name="googlebot"]', { name: 'googlebot', content: 'noindex, nofollow' });
+      upsertMeta('meta[name="robots"]', {
+        name: "robots",
+        content: "noindex, nofollow",
+      });
+      upsertMeta('meta[name="googlebot"]', {
+        name: "googlebot",
+        content: "noindex, nofollow",
+      });
     }
   }, [pageTitle, description, image, canonical, noIndex]);
 
diff --git a/client/components/admin/BannerSettings.tsx b/client/components/admin/BannerSettings.tsx
index 64df8352..424a6c33 100644
--- a/client/components/admin/BannerSettings.tsx
+++ b/client/components/admin/BannerSettings.tsx
@@ -27,7 +27,10 @@ export default function BannerSettings() {
       const resp = await fetch("/api/site-settings", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ key: "home_banner", value: { text, enabled, style } }),
+        body: JSON.stringify({
+          key: "home_banner",
+          value: { text, enabled, style },
+        }),
       });
       if (!resp.ok) throw new Error("Save failed");
     } finally {
@@ -38,13 +41,17 @@ export default function BannerSettings() {
   return (
     <div className="space-y-3">
       <div className="grid gap-2 md:grid-cols-4">
-        <label className="text-sm text-muted-foreground md:col-span-1">Enabled</label>
+        <label className="text-sm text-muted-foreground md:col-span-1">
+          Enabled
+        </label>
         <div className="md:col-span-3">
           <Switch checked={enabled} onCheckedChange={setEnabled} />
         </div>
       </div>
       <div className="grid gap-2 md:grid-cols-4">
-        <label className="text-sm text-muted-foreground md:col-span-1">Banner text</label>
+        <label className="text-sm text-muted-foreground md:col-span-1">
+          Banner text
+        </label>
         <div className="md:col-span-3">
           <input
             className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
@@ -55,7 +62,9 @@ export default function BannerSettings() {
         </div>
       </div>
       <div className="grid gap-2 md:grid-cols-4">
-        <label className="text-sm text-muted-foreground md:col-span-1">Style</label>
+        <label className="text-sm text-muted-foreground md:col-span-1">
+          Style
+        </label>
         <div className="md:col-span-3">
           <select
             className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
diff --git a/client/lib/aethex-collab-service.ts b/client/lib/aethex-collab-service.ts
index 80532f53..245042f5 100644
--- a/client/lib/aethex-collab-service.ts
+++ b/client/lib/aethex-collab-service.ts
@@ -163,7 +163,10 @@ export const aethexCollabService = {
   },
 
   async deleteTask(taskId: string) {
-    const { error } = await supabase.from("project_tasks").delete().eq("id", taskId);
+    const { error } = await supabase
+      .from("project_tasks")
+      .delete()
+      .eq("id", taskId);
     if (error) throw new Error(error.message || "Unable to delete task");
   },
 
diff --git a/client/pages/Admin.tsx b/client/pages/Admin.tsx
index 38ae5de6..02d8a10d 100644
--- a/client/pages/Admin.tsx
+++ b/client/pages/Admin.tsx
@@ -235,31 +235,42 @@ export default function Admin() {
   if (!user || !isOwner) {
     return (
       <>
-        <SEO pageTitle="Admin" description="Administrative controls for AeThex." canonical={typeof window!== 'undefined' ? window.location.href : undefined as any} />
-      <Layout>
-        <div className="min-h-screen bg-aethex-gradient py-12">
-          <div className="container mx-auto px-4 max-w-3xl">
-            <Card className="bg-red-500/10 border-red-500/30 backdrop-blur">
-              <CardHeader>
-                <CardTitle className="text-red-400">Access denied</CardTitle>
-                <CardDescription>
-                  This panel is restricted to {ownerEmail}. If you need access,
-                  contact the site owner.
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex gap-2">
-                <Button onClick={() => navigate("/dashboard")}>
-                  Go to dashboard
-                </Button>
-                <Button variant="outline" onClick={() => navigate("/support")}>
-                  Contact support
-                </Button>
-              </CardContent>
-            </Card>
+        <SEO
+          pageTitle="Admin"
+          description="Administrative controls for AeThex."
+          canonical={
+            typeof window !== "undefined"
+              ? window.location.href
+              : (undefined as any)
+          }
+        />
+        <Layout>
+          <div className="min-h-screen bg-aethex-gradient py-12">
+            <div className="container mx-auto px-4 max-w-3xl">
+              <Card className="bg-red-500/10 border-red-500/30 backdrop-blur">
+                <CardHeader>
+                  <CardTitle className="text-red-400">Access denied</CardTitle>
+                  <CardDescription>
+                    This panel is restricted to {ownerEmail}. If you need
+                    access, contact the site owner.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex gap-2">
+                  <Button onClick={() => navigate("/dashboard")}>
+                    Go to dashboard
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => navigate("/support")}
+                  >
+                    Contact support
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
           </div>
-        </div>
-      </Layout>
-    </>
+        </Layout>
+      </>
     );
   }
 
@@ -663,87 +674,582 @@ export default function Admin() {
 
   return (
     <>
-      <SEO pageTitle="Admin" description="Administrative controls for AeThex: content, community, operations, and status." canonical={typeof window!== 'undefined' ? window.location.href : undefined as any} />
-    <Layout>
-      <div className="min-h-screen bg-aethex-gradient py-12">
-        <div className="container mx-auto px-4 max-w-7xl space-y-8">
-          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-            <div className="space-y-2">
-              <h1 className="text-3xl font-bold text-gradient">
-                Admin Control Center
-              </h1>
-              <p className="text-muted-foreground">
-                Unified oversight for AeThex operations, content, and community.
-              </p>
-              <div className="flex flex-wrap gap-2">
-                <Badge
-                  variant="outline"
-                  className="border-green-500/50 text-green-300"
-                >
-                  Owner
-                </Badge>
-                <Badge
-                  variant="outline"
-                  className="border-blue-500/50 text-blue-300"
-                >
-                  Admin
-                </Badge>
-                <Badge
-                  variant="outline"
-                  className="border-purple-500/50 text-purple-300"
-                >
-                  Founder
-                </Badge>
+      <SEO
+        pageTitle="Admin"
+        description="Administrative controls for AeThex: content, community, operations, and status."
+        canonical={
+          typeof window !== "undefined"
+            ? window.location.href
+            : (undefined as any)
+        }
+      />
+      <Layout>
+        <div className="min-h-screen bg-aethex-gradient py-12">
+          <div className="container mx-auto px-4 max-w-7xl space-y-8">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+              <div className="space-y-2">
+                <h1 className="text-3xl font-bold text-gradient">
+                  Admin Control Center
+                </h1>
+                <p className="text-muted-foreground">
+                  Unified oversight for AeThex operations, content, and
+                  community.
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  <Badge
+                    variant="outline"
+                    className="border-green-500/50 text-green-300"
+                  >
+                    Owner
+                  </Badge>
+                  <Badge
+                    variant="outline"
+                    className="border-blue-500/50 text-blue-300"
+                  >
+                    Admin
+                  </Badge>
+                  <Badge
+                    variant="outline"
+                    className="border-purple-500/50 text-purple-300"
+                  >
+                    Founder
+                  </Badge>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Signed in as{" "}
+                  <span className="text-foreground">
+                    {normalizedEmail || ownerEmail}
+                  </span>
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => navigate("/dashboard")}
+                >
+                  Dashboard
+                </Button>
+                <Button variant="outline" onClick={() => navigate("/profile")}>
+                  Profile
+                </Button>
+                <Button onClick={() => setActiveTab("content")}>
+                  Create update
+                </Button>
               </div>
-              <p className="text-xs text-muted-foreground">
-                Signed in as{" "}
-                <span className="text-foreground">
-                  {normalizedEmail || ownerEmail}
-                </span>
-              </p>
             </div>
-            <div className="flex flex-wrap gap-2">
-              <Button variant="outline" onClick={() => navigate("/dashboard")}>
-                Dashboard
-              </Button>
-              <Button variant="outline" onClick={() => navigate("/profile")}>
-                Profile
-              </Button>
-              <Button onClick={() => setActiveTab("content")}>
-                Create update
-              </Button>
-            </div>
-          </div>
 
-          <Tabs
-            value={activeTab}
-            onValueChange={setActiveTab}
-            className="space-y-6"
-          >
-            <TabsList className="w-full justify-start gap-2 overflow-x-auto border border-border/40 bg-background/40 px-1 py-1 backdrop-blur">
-              <TabsTrigger value="overview">Overview</TabsTrigger>
-              <TabsTrigger value="system-map">System Map</TabsTrigger>
-              <TabsTrigger value="roadmap">Roadmap</TabsTrigger>
-              <TabsTrigger value="content">Content</TabsTrigger>
-              <TabsTrigger value="community">Community</TabsTrigger>
-              <TabsTrigger value="mentorship">Mentorship</TabsTrigger>
-              <TabsTrigger value="operations">Operations</TabsTrigger>
-            </TabsList>
+            <Tabs
+              value={activeTab}
+              onValueChange={setActiveTab}
+              className="space-y-6"
+            >
+              <TabsList className="w-full justify-start gap-2 overflow-x-auto border border-border/40 bg-background/40 px-1 py-1 backdrop-blur">
+                <TabsTrigger value="overview">Overview</TabsTrigger>
+                <TabsTrigger value="system-map">System Map</TabsTrigger>
+                <TabsTrigger value="roadmap">Roadmap</TabsTrigger>
+                <TabsTrigger value="content">Content</TabsTrigger>
+                <TabsTrigger value="community">Community</TabsTrigger>
+                <TabsTrigger value="mentorship">Mentorship</TabsTrigger>
+                <TabsTrigger value="operations">Operations</TabsTrigger>
+              </TabsList>
 
-            <TabsContent value="overview" className="space-y-6">
-              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-                {overviewStats.map((stat) => (
-                  <AdminStatCard
-                    key={stat.title}
-                    title={stat.title}
-                    value={stat.value}
-                    description={stat.description}
-                    trend={stat.trend}
-                    icon={stat.icon}
-                    tone={stat.tone}
-                    actions={
-                      stat.title === "Featured studios" ? (
+              <TabsContent value="overview" className="space-y-6">
+                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                  {overviewStats.map((stat) => (
+                    <AdminStatCard
+                      key={stat.title}
+                      title={stat.title}
+                      value={stat.value}
+                      description={stat.description}
+                      trend={stat.trend}
+                      icon={stat.icon}
+                      tone={stat.tone}
+                      actions={
+                        stat.title === "Featured studios" ? (
+                          <div className="flex gap-2">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() =>
+                                navigate("/community#featured-studios")
+                              }
+                            >
+                              Open community
+                            </Button>
+                            <Button
+                              size="sm"
+                              onClick={() => setActiveTab("operations")}
+                            >
+                              Manage studios
+                            </Button>
+                          </div>
+                        ) : undefined
+                      }
+                    />
+                  ))}
+                </div>
+
+                <div className="grid gap-6 xl:grid-cols-2">
+                  <AdminStatusOverview
+                    services={statusSnapshot}
+                    overall={overallStatus}
+                    onViewStatus={() => navigate("/status")}
+                  />
+
+                  <Card className="bg-card/60 border-border/40 backdrop-blur">
+                    <CardHeader>
+                      <div className="flex items-center gap-2">
+                        <Command className="h-5 w-5 text-aethex-300" />
+                        <CardTitle>Quick actions</CardTitle>
+                      </div>
+                      <CardDescription>
+                        Launch frequent administrative workflows.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="grid gap-3">
+                      {quickActions.map(
+                        ({ label, description, icon: ActionIcon, action }) => (
+                          <button
+                            key={label}
+                            type="button"
+                            onClick={action}
+                            className="group flex items-start gap-3 rounded-lg border border-border/30 bg-background/40 px-4 py-3 text-left transition hover:border-aethex-400/60 hover:bg-background/60"
+                          >
+                            <ActionIcon className="mt-0.5 h-5 w-5 text-aethex-400 transition group-hover:text-aethex-200" />
+                            <div className="space-y-1">
+                              <p className="font-medium text-foreground">
+                                {label}
+                              </p>
+                              <p className="text-sm text-muted-foreground">
+                                {description}
+                              </p>
+                            </div>
+                          </button>
+                        ),
+                      )}
+                    </CardContent>
+                  </Card>
+
+                  <AdminChangelogDigest
+                    entries={latestChangelog}
+                    onViewChangelog={() => navigate("/changelog")}
+                  />
+
+                  <Card className="bg-card/60 border-border/40 backdrop-blur">
+                    <CardHeader>
+                      <div className="flex items-center gap-2">
+                        <Shield className="h-5 w-5 text-green-400" />
+                        <CardTitle>Access control</CardTitle>
+                      </div>
+                      <CardDescription>
+                        Owner-only access enforced via Supabase roles.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-3 text-sm text-muted-foreground">
+                      <ul className="space-y-2 leading-relaxed">
+                        <li>
+                          Owner email:{" "}
+                          <span className="text-foreground">{ownerEmail}</span>
+                        </li>
+                        <li>
+                          Roles are provisioned automatically on owner sign-in.
+                        </li>
+                        <li>
+                          Grant additional admins by updating Supabase role
+                          assignments.
+                        </li>
+                      </ul>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setActiveTab("community")}
+                        >
+                          View members
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => navigate("/support")}
+                        >
+                          Contact support
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="system-map" className="space-y-6">
+                <AdminSystemMap />
+              </TabsContent>
+
+              <TabsContent value="roadmap" className="space-y-6">
+                <AdminRoadmap />
+              </TabsContent>
+
+              <TabsContent value="content" className="space-y-6">
+                <Card className="bg-card/60 border-border/40 backdrop-blur">
+                  <CardHeader>
+                    <div className="flex items-center gap-2">
+                      <PenTool className="h-5 w-5 text-aethex-300" />
+                      <CardTitle>Content overview</CardTitle>
+                    </div>
+                    <CardDescription>
+                      {publishedPosts} published{" "}
+                      {publishedPosts === 1 ? "post" : "posts"} ·{" "}
+                      {loadingPosts
+                        ? "refreshing content…"
+                        : "latest Supabase sync"}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="text-sm text-muted-foreground space-y-2">
+                    <p>
+                      Drafts and announcements appear instantly on the public
+                      blog after saving. Use scheduled releases for major
+                      updates and keep thumbnails optimised for 1200×630.
+                    </p>
+                  </CardContent>
+                </Card>
+
+                <Card className="bg-card/60 border-border/40 backdrop-blur">
+                  <CardHeader>
+                    <div className="flex items-center gap-2">
+                      <PenTool className="h-5 w-5 text-aethex-400" />
+                      <CardTitle className="text-lg">Blog posts</CardTitle>
+                    </div>
+                    <CardDescription>
+                      Manage blog content stored in Supabase
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <div className="flex flex-wrap items-center gap-3">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        disabled={loadingPosts}
+                        onClick={async () => {
+                          try {
+                            setLoadingPosts(true);
+                            const res = await fetch("/api/blog?limit=100");
+                            const data = res.ok ? await res.json() : [];
+                            if (Array.isArray(data)) setBlogPosts(data);
+                          } finally {
+                            setLoadingPosts(false);
+                          }
+                        }}
+                      >
+                        {loadingPosts ? "Refreshing…" : "Refresh"}
+                      </Button>
+                      <Button
+                        size="sm"
+                        onClick={() =>
+                          setBlogPosts([
+                            {
+                              title: "New Post",
+                              slug: "new-post",
+                              category: "General",
+                            },
+                            ...blogPosts,
+                          ])
+                        }
+                      >
+                        Add post
+                      </Button>
+                    </div>
+
+                    {blogPosts.length === 0 && (
+                      <p className="text-sm text-muted-foreground">
+                        No posts loaded yet. Use “Refresh” or “Add post” to
+                        start managing content.
+                      </p>
+                    )}
+
+                    {blogPosts.map((p, i) => (
+                      <div
+                        key={p.id || p.slug || i}
+                        className="space-y-2 rounded border border-border/40 bg-background/40 p-3"
+                      >
+                        <div className="grid gap-2 md:grid-cols-2">
+                          <input
+                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                            placeholder="Title"
+                            value={p.title || ""}
+                            onChange={(e) => {
+                              const next = blogPosts.slice();
+                              next[i] = { ...next[i], title: e.target.value };
+                              setBlogPosts(next);
+                            }}
+                          />
+                          <input
+                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                            placeholder="Slug"
+                            value={p.slug || ""}
+                            onChange={(e) => {
+                              const next = blogPosts.slice();
+                              next[i] = { ...next[i], slug: e.target.value };
+                              setBlogPosts(next);
+                            }}
+                          />
+                        </div>
+                        <div className="grid gap-2 md:grid-cols-2">
+                          <input
+                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                            placeholder="Author"
+                            value={p.author || ""}
+                            onChange={(e) => {
+                              const n = blogPosts.slice();
+                              n[i] = { ...n[i], author: e.target.value };
+                              setBlogPosts(n);
+                            }}
+                          />
+                          <input
+                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                            placeholder="Date"
+                            value={p.date || ""}
+                            onChange={(e) => {
+                              const n = blogPosts.slice();
+                              n[i] = { ...n[i], date: e.target.value };
+                              setBlogPosts(n);
+                            }}
+                          />
+                        </div>
+                        <div className="grid gap-2 md:grid-cols-3">
+                          <input
+                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                            placeholder="Read time (e.g., 8 min read)"
+                            value={p.read_time || ""}
+                            onChange={(e) => {
+                              const n = blogPosts.slice();
+                              n[i] = { ...n[i], read_time: e.target.value };
+                              setBlogPosts(n);
+                            }}
+                          />
+                          <input
+                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                            placeholder="Category"
+                            value={p.category || ""}
+                            onChange={(e) => {
+                              const n = blogPosts.slice();
+                              n[i] = { ...n[i], category: e.target.value };
+                              setBlogPosts(n);
+                            }}
+                          />
+                          <input
+                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                            placeholder="Image URL"
+                            value={p.image || ""}
+                            onChange={(e) => {
+                              const n = blogPosts.slice();
+                              n[i] = { ...n[i], image: e.target.value };
+                              setBlogPosts(n);
+                            }}
+                          />
+                        </div>
+                        <textarea
+                          className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                          rows={2}
+                          placeholder="Excerpt"
+                          value={p.excerpt || ""}
+                          onChange={(e) => {
+                            const n = blogPosts.slice();
+                            n[i] = { ...n[i], excerpt: e.target.value };
+                            setBlogPosts(n);
+                          }}
+                        />
+                        <textarea
+                          className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                          rows={6}
+                          placeholder="Body HTML"
+                          value={p.body_html || ""}
+                          onChange={(e) => {
+                            const n = blogPosts.slice();
+                            n[i] = { ...n[i], body_html: e.target.value };
+                            setBlogPosts(n);
+                          }}
+                        />
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => deletePost(i)}
+                          >
+                            Delete
+                          </Button>
+                          <Button size="sm" onClick={() => savePost(i)}>
+                            Save
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              <TabsContent value="community" className="space-y-6">
+                <AdminMemberManager
+                  profiles={managedProfiles}
+                  selectedId={selectedMemberId}
+                  onSelectedIdChange={(id) => setSelectedMemberId(id)}
+                  onRefresh={loadProfiles}
+                  ownerEmail={ownerEmail}
+                />
+
+                <AdminAchievementManager targetUser={selectedMember} />
+
+                <AdminSpotlightManager profiles={managedProfiles} />
+
+                <Card className="bg-card/60 border-border/40 backdrop-blur">
+                  <CardHeader>
+                    <div className="flex items-center gap-2">
+                      <UserCog className="h-5 w-5 text-teal-300" />
+                      <CardTitle>Community actions</CardTitle>
+                    </div>
+                    <CardDescription>
+                      Grow the network and celebrate contributors.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex flex-wrap gap-2">
+                    <Button size="sm" onClick={() => navigate("/community")}>
+                      Open community hub
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => setActiveTab("mentorship")}
+                    >
+                      Manage mentorships
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => navigate("/support")}
+                    >
+                      Support queue
+                    </Button>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              <TabsContent value="mentorship" className="space-y-6">
+                <AdminMentorshipManager />
+              </TabsContent>
+
+              <TabsContent value="operations" className="space-y-6">
+                <div className="grid gap-6 lg:grid-cols-2">
+                  <Card className="bg-card/60 border-border/40 backdrop-blur">
+                    <CardHeader>
+                      <div className="flex items-center gap-2">
+                        <Settings className="h-5 w-5 text-aethex-300" />
+                        <CardTitle>Home banner</CardTitle>
+                      </div>
+                      <CardDescription>
+                        Controls the small notice shown at the top of the home
+                        page.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-3">
+                      <BannerSettings />
+                    </CardContent>
+                  </Card>
+                  <Card className="bg-card/60 border-border/40 backdrop-blur lg:col-span-2">
+                    <CardHeader>
+                      <div className="flex items-center gap-2">
+                        <Settings className="h-5 w-5 text-yellow-300" />
+                        <CardTitle>Featured studios</CardTitle>
+                      </div>
+                      <CardDescription>
+                        Control studios highlighted across AeThex experiences.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-3">
+                      {studios.map((s, i) => (
+                        <div
+                          key={`${s.name}-${i}`}
+                          className="space-y-2 rounded border border-border/40 bg-background/40 p-3"
+                        >
+                          <div className="grid gap-2 md:grid-cols-2">
+                            <input
+                              className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                              value={s.name}
+                              onChange={(e) => {
+                                const next = studios.slice();
+                                next[i] = { ...next[i], name: e.target.value };
+                                setStudios(next);
+                              }}
+                              placeholder="Studio name"
+                            />
+                            <input
+                              className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                              value={s.tagline || ""}
+                              onChange={(e) => {
+                                const next = studios.slice();
+                                next[i] = {
+                                  ...next[i],
+                                  tagline: e.target.value,
+                                };
+                                setStudios(next);
+                              }}
+                              placeholder="Tagline"
+                            />
+                          </div>
+                          <div className="grid gap-2 md:grid-cols-2">
+                            <input
+                              className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                              value={s.metrics || ""}
+                              onChange={(e) => {
+                                const next = studios.slice();
+                                next[i] = {
+                                  ...next[i],
+                                  metrics: e.target.value,
+                                };
+                                setStudios(next);
+                              }}
+                              placeholder="Metrics (e.g., 1B+ sessions)"
+                            />
+                            <input
+                              className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                              value={(s.specialties || []).join(", ")}
+                              onChange={(e) => {
+                                const next = studios.slice();
+                                next[i] = {
+                                  ...next[i],
+                                  specialties: e.target.value
+                                    .split(",")
+                                    .map((v) => v.trim())
+                                    .filter(Boolean),
+                                };
+                                setStudios(next);
+                              }}
+                              placeholder="Specialties (comma separated)"
+                            />
+                          </div>
+                          <div className="flex justify-end">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() =>
+                                setStudios(
+                                  studios.filter((_, idx) => idx !== i),
+                                )
+                              }
+                            >
+                              Remove
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                      <div className="flex flex-wrap justify-between gap-2">
                         <div className="flex gap-2">
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() =>
+                              setStudios([...studios, { name: "New Studio" }])
+                            }
+                          >
+                            Add studio
+                          </Button>
                           <Button
                             size="sm"
                             variant="outline"
@@ -753,755 +1259,289 @@ export default function Admin() {
                           >
                             Open community
                           </Button>
-                          <Button
-                            size="sm"
-                            onClick={() => setActiveTab("operations")}
-                          >
-                            Manage studios
-                          </Button>
                         </div>
-                      ) : undefined
-                    }
-                  />
-                ))}
-              </div>
-
-              <div className="grid gap-6 xl:grid-cols-2">
-                <AdminStatusOverview
-                  services={statusSnapshot}
-                  overall={overallStatus}
-                  onViewStatus={() => navigate("/status")}
-                />
-
-                <Card className="bg-card/60 border-border/40 backdrop-blur">
-                  <CardHeader>
-                    <div className="flex items-center gap-2">
-                      <Command className="h-5 w-5 text-aethex-300" />
-                      <CardTitle>Quick actions</CardTitle>
-                    </div>
-                    <CardDescription>
-                      Launch frequent administrative workflows.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="grid gap-3">
-                    {quickActions.map(
-                      ({ label, description, icon: ActionIcon, action }) => (
-                        <button
-                          key={label}
-                          type="button"
-                          onClick={action}
-                          className="group flex items-start gap-3 rounded-lg border border-border/30 bg-background/40 px-4 py-3 text-left transition hover:border-aethex-400/60 hover:bg-background/60"
-                        >
-                          <ActionIcon className="mt-0.5 h-5 w-5 text-aethex-400 transition group-hover:text-aethex-200" />
-                          <div className="space-y-1">
-                            <p className="font-medium text-foreground">
-                              {label}
-                            </p>
-                            <p className="text-sm text-muted-foreground">
-                              {description}
-                            </p>
-                          </div>
-                        </button>
-                      ),
-                    )}
-                  </CardContent>
-                </Card>
-
-                <AdminChangelogDigest
-                  entries={latestChangelog}
-                  onViewChangelog={() => navigate("/changelog")}
-                />
-
-                <Card className="bg-card/60 border-border/40 backdrop-blur">
-                  <CardHeader>
-                    <div className="flex items-center gap-2">
-                      <Shield className="h-5 w-5 text-green-400" />
-                      <CardTitle>Access control</CardTitle>
-                    </div>
-                    <CardDescription>
-                      Owner-only access enforced via Supabase roles.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-3 text-sm text-muted-foreground">
-                    <ul className="space-y-2 leading-relaxed">
-                      <li>
-                        Owner email:{" "}
-                        <span className="text-foreground">{ownerEmail}</span>
-                      </li>
-                      <li>
-                        Roles are provisioned automatically on owner sign-in.
-                      </li>
-                      <li>
-                        Grant additional admins by updating Supabase role
-                        assignments.
-                      </li>
-                    </ul>
-                    <div className="flex gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => setActiveTab("community")}
-                      >
-                        View members
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => navigate("/support")}
-                      >
-                        Contact support
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            </TabsContent>
-
-            <TabsContent value="system-map" className="space-y-6">
-              <AdminSystemMap />
-            </TabsContent>
-
-            <TabsContent value="roadmap" className="space-y-6">
-              <AdminRoadmap />
-            </TabsContent>
-
-            <TabsContent value="content" className="space-y-6">
-              <Card className="bg-card/60 border-border/40 backdrop-blur">
-                <CardHeader>
-                  <div className="flex items-center gap-2">
-                    <PenTool className="h-5 w-5 text-aethex-300" />
-                    <CardTitle>Content overview</CardTitle>
-                  </div>
-                  <CardDescription>
-                    {publishedPosts} published{" "}
-                    {publishedPosts === 1 ? "post" : "posts"} ·{" "}
-                    {loadingPosts
-                      ? "refreshing content…"
-                      : "latest Supabase sync"}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="text-sm text-muted-foreground space-y-2">
-                  <p>
-                    Drafts and announcements appear instantly on the public blog
-                    after saving. Use scheduled releases for major updates and
-                    keep thumbnails optimised for 1200×630.
-                  </p>
-                </CardContent>
-              </Card>
-
-              <Card className="bg-card/60 border-border/40 backdrop-blur">
-                <CardHeader>
-                  <div className="flex items-center gap-2">
-                    <PenTool className="h-5 w-5 text-aethex-400" />
-                    <CardTitle className="text-lg">Blog posts</CardTitle>
-                  </div>
-                  <CardDescription>
-                    Manage blog content stored in Supabase
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-3">
-                  <div className="flex flex-wrap items-center gap-3">
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      disabled={loadingPosts}
-                      onClick={async () => {
-                        try {
-                          setLoadingPosts(true);
-                          const res = await fetch("/api/blog?limit=100");
-                          const data = res.ok ? await res.json() : [];
-                          if (Array.isArray(data)) setBlogPosts(data);
-                        } finally {
-                          setLoadingPosts(false);
-                        }
-                      }}
-                    >
-                      {loadingPosts ? "Refreshing…" : "Refresh"}
-                    </Button>
-                    <Button
-                      size="sm"
-                      onClick={() =>
-                        setBlogPosts([
-                          {
-                            title: "New Post",
-                            slug: "new-post",
-                            category: "General",
-                          },
-                          ...blogPosts,
-                        ])
-                      }
-                    >
-                      Add post
-                    </Button>
-                  </div>
-
-                  {blogPosts.length === 0 && (
-                    <p className="text-sm text-muted-foreground">
-                      No posts loaded yet. Use “Refresh” or “Add post” to start
-                      managing content.
-                    </p>
-                  )}
-
-                  {blogPosts.map((p, i) => (
-                    <div
-                      key={p.id || p.slug || i}
-                      className="space-y-2 rounded border border-border/40 bg-background/40 p-3"
-                    >
-                      <div className="grid gap-2 md:grid-cols-2">
-                        <input
-                          className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                          placeholder="Title"
-                          value={p.title || ""}
-                          onChange={(e) => {
-                            const next = blogPosts.slice();
-                            next[i] = { ...next[i], title: e.target.value };
-                            setBlogPosts(next);
-                          }}
-                        />
-                        <input
-                          className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                          placeholder="Slug"
-                          value={p.slug || ""}
-                          onChange={(e) => {
-                            const next = blogPosts.slice();
-                            next[i] = { ...next[i], slug: e.target.value };
-                            setBlogPosts(next);
-                          }}
-                        />
-                      </div>
-                      <div className="grid gap-2 md:grid-cols-2">
-                        <input
-                          className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                          placeholder="Author"
-                          value={p.author || ""}
-                          onChange={(e) => {
-                            const n = blogPosts.slice();
-                            n[i] = { ...n[i], author: e.target.value };
-                            setBlogPosts(n);
-                          }}
-                        />
-                        <input
-                          className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                          placeholder="Date"
-                          value={p.date || ""}
-                          onChange={(e) => {
-                            const n = blogPosts.slice();
-                            n[i] = { ...n[i], date: e.target.value };
-                            setBlogPosts(n);
-                          }}
-                        />
-                      </div>
-                      <div className="grid gap-2 md:grid-cols-3">
-                        <input
-                          className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                          placeholder="Read time (e.g., 8 min read)"
-                          value={p.read_time || ""}
-                          onChange={(e) => {
-                            const n = blogPosts.slice();
-                            n[i] = { ...n[i], read_time: e.target.value };
-                            setBlogPosts(n);
-                          }}
-                        />
-                        <input
-                          className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                          placeholder="Category"
-                          value={p.category || ""}
-                          onChange={(e) => {
-                            const n = blogPosts.slice();
-                            n[i] = { ...n[i], category: e.target.value };
-                            setBlogPosts(n);
-                          }}
-                        />
-                        <input
-                          className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                          placeholder="Image URL"
-                          value={p.image || ""}
-                          onChange={(e) => {
-                            const n = blogPosts.slice();
-                            n[i] = { ...n[i], image: e.target.value };
-                            setBlogPosts(n);
-                          }}
-                        />
-                      </div>
-                      <textarea
-                        className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                        rows={2}
-                        placeholder="Excerpt"
-                        value={p.excerpt || ""}
-                        onChange={(e) => {
-                          const n = blogPosts.slice();
-                          n[i] = { ...n[i], excerpt: e.target.value };
-                          setBlogPosts(n);
-                        }}
-                      />
-                      <textarea
-                        className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                        rows={6}
-                        placeholder="Body HTML"
-                        value={p.body_html || ""}
-                        onChange={(e) => {
-                          const n = blogPosts.slice();
-                          n[i] = { ...n[i], body_html: e.target.value };
-                          setBlogPosts(n);
-                        }}
-                      />
-                      <div className="flex justify-end gap-2">
                         <Button
                           size="sm"
-                          variant="outline"
-                          onClick={() => deletePost(i)}
-                        >
-                          Delete
-                        </Button>
-                        <Button size="sm" onClick={() => savePost(i)}>
-                          Save
-                        </Button>
-                      </div>
-                    </div>
-                  ))}
-                </CardContent>
-              </Card>
-            </TabsContent>
-
-            <TabsContent value="community" className="space-y-6">
-              <AdminMemberManager
-                profiles={managedProfiles}
-                selectedId={selectedMemberId}
-                onSelectedIdChange={(id) => setSelectedMemberId(id)}
-                onRefresh={loadProfiles}
-                ownerEmail={ownerEmail}
-              />
-
-              <AdminAchievementManager targetUser={selectedMember} />
-
-              <AdminSpotlightManager profiles={managedProfiles} />
-
-              <Card className="bg-card/60 border-border/40 backdrop-blur">
-                <CardHeader>
-                  <div className="flex items-center gap-2">
-                    <UserCog className="h-5 w-5 text-teal-300" />
-                    <CardTitle>Community actions</CardTitle>
-                  </div>
-                  <CardDescription>
-                    Grow the network and celebrate contributors.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="flex flex-wrap gap-2">
-                  <Button size="sm" onClick={() => navigate("/community")}>
-                    Open community hub
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => setActiveTab("mentorship")}
-                  >
-                    Manage mentorships
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => navigate("/support")}
-                  >
-                    Support queue
-                  </Button>
-                </CardContent>
-              </Card>
-            </TabsContent>
-
-            <TabsContent value="mentorship" className="space-y-6">
-              <AdminMentorshipManager />
-            </TabsContent>
-
-            <TabsContent value="operations" className="space-y-6">
-              <div className="grid gap-6 lg:grid-cols-2">
-                <Card className="bg-card/60 border-border/40 backdrop-blur">
-                  <CardHeader>
-                    <div className="flex items-center gap-2">
-                      <Settings className="h-5 w-5 text-aethex-300" />
-                      <CardTitle>Home banner</CardTitle>
-                    </div>
-                    <CardDescription>
-                      Controls the small notice shown at the top of the home page.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-3">
-                    <BannerSettings />
-                  </CardContent>
-                </Card>
-                <Card className="bg-card/60 border-border/40 backdrop-blur lg:col-span-2">
-                  <CardHeader>
-                    <div className="flex items-center gap-2">
-                      <Settings className="h-5 w-5 text-yellow-300" />
-                      <CardTitle>Featured studios</CardTitle>
-                    </div>
-                    <CardDescription>
-                      Control studios highlighted across AeThex experiences.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-3">
-                    {studios.map((s, i) => (
-                      <div
-                        key={`${s.name}-${i}`}
-                        className="space-y-2 rounded border border-border/40 bg-background/40 p-3"
-                      >
-                        <div className="grid gap-2 md:grid-cols-2">
-                          <input
-                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                            value={s.name}
-                            onChange={(e) => {
-                              const next = studios.slice();
-                              next[i] = { ...next[i], name: e.target.value };
-                              setStudios(next);
-                            }}
-                            placeholder="Studio name"
-                          />
-                          <input
-                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                            value={s.tagline || ""}
-                            onChange={(e) => {
-                              const next = studios.slice();
-                              next[i] = { ...next[i], tagline: e.target.value };
-                              setStudios(next);
-                            }}
-                            placeholder="Tagline"
-                          />
-                        </div>
-                        <div className="grid gap-2 md:grid-cols-2">
-                          <input
-                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                            value={s.metrics || ""}
-                            onChange={(e) => {
-                              const next = studios.slice();
-                              next[i] = { ...next[i], metrics: e.target.value };
-                              setStudios(next);
-                            }}
-                            placeholder="Metrics (e.g., 1B+ sessions)"
-                          />
-                          <input
-                            className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
-                            value={(s.specialties || []).join(", ")}
-                            onChange={(e) => {
-                              const next = studios.slice();
-                              next[i] = {
-                                ...next[i],
-                                specialties: e.target.value
-                                  .split(",")
-                                  .map((v) => v.trim())
-                                  .filter(Boolean),
-                              };
-                              setStudios(next);
-                            }}
-                            placeholder="Specialties (comma separated)"
-                          />
-                        </div>
-                        <div className="flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() =>
-                              setStudios(studios.filter((_, idx) => idx !== i))
-                            }
-                          >
-                            Remove
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                    <div className="flex flex-wrap justify-between gap-2">
-                      <div className="flex gap-2">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() =>
-                            setStudios([...studios, { name: "New Studio" }])
-                          }
-                        >
-                          Add studio
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() =>
-                            navigate("/community#featured-studios")
-                          }
-                        >
-                          Open community
-                        </Button>
-                      </div>
-                      <Button
-                        size="sm"
-                        onClick={async () => {
-                          const resp = await fetch("/api/featured-studios", {
-                            method: "POST",
-                            headers: { "Content-Type": "application/json" },
-                            body: JSON.stringify({ studios }),
-                          });
-                          if (!resp.ok) {
-                            aethexToast.error({
-                              title: "Save failed",
-                              description:
-                                "Unable to persist featured studios.",
+                          onClick={async () => {
+                            const resp = await fetch("/api/featured-studios", {
+                              method: "POST",
+                              headers: { "Content-Type": "application/json" },
+                              body: JSON.stringify({ studios }),
                             });
-                          } else {
-                            aethexToast.success({
-                              title: "Studios saved",
-                              description:
-                                "Featured studios updated successfully.",
-                            });
-                          }
-                        }}
-                      >
-                        Save studios
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                <Card className="bg-card/60 border-border/40 backdrop-blur">
-                  <CardHeader>
-                    <div className="flex items-center gap-2">
-                      <ClipboardList className="h-5 w-5 text-sky-300" />
-                      <CardTitle>Project applications</CardTitle>
-                    </div>
-                    <CardDescription>
-                      Review collaboration requests and prioritize approvals.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-3 text-sm text-muted-foreground">
-                    <div className="flex flex-wrap items-center justify-between gap-2">
-                      <p>
-                        {projectApplicationsLoading
-                          ? "Loading application data…"
-                          : `${projectApplications.length} total submissions (${pendingProjectApplications} waiting)`}
-                      </p>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={loadProjectApplications}
-                        disabled={projectApplicationsLoading}
-                      >
-                        {projectApplicationsLoading ? (
-                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        ) : (
-                          <RefreshCw className="mr-2 h-4 w-4" />
-                        )}
-                        Refresh
-                      </Button>
-                    </div>
-                    {projectApplicationsLoading ? (
-                      <div className="flex items-center gap-2 text-sm">
-                        <Loader2 className="h-4 w-4 animate-spin text-aethex-300" />
-                        Synchronizing with Supabase…
-                      </div>
-                    ) : projectApplications.length ? (
-                      <div className="grid gap-2">
-                        {projectApplications.slice(0, 6).map((app) => (
-                          <div
-                            key={
-                              app.id ||
-                              `${app.applicant_email ?? "applicant"}-${app.projects?.id ?? "project"}`
+                            if (!resp.ok) {
+                              aethexToast.error({
+                                title: "Save failed",
+                                description:
+                                  "Unable to persist featured studios.",
+                              });
+                            } else {
+                              aethexToast.success({
+                                title: "Studios saved",
+                                description:
+                                  "Featured studios updated successfully.",
+                              });
                             }
-                            className="space-y-1 rounded border border-border/30 bg-background/40 p-3"
-                          >
-                            <div className="flex flex-wrap items-center justify-between gap-2">
-                              <p className="font-medium text-foreground">
-                                {app.applicant_name ||
-                                  app.applicant_email ||
-                                  "Unknown applicant"}
-                              </p>
-                              <Badge variant="outline" className="capitalize">
-                                {(app.status ?? "pending").toLowerCase()}
-                              </Badge>
-                            </div>
-                            <p className="text-xs text-muted-foreground">
-                              {app.projects?.title ?? "No project title"}
-                            </p>
-                            {app.created_at ? (
-                              <p className="text-[11px] text-muted-foreground/80">
-                                Submitted{" "}
-                                {new Date(app.created_at).toLocaleString()}
-                              </p>
-                            ) : null}
-                          </div>
-                        ))}
+                          }}
+                        >
+                          Save studios
+                        </Button>
                       </div>
-                    ) : (
-                      <p>
-                        No project applications on file. Encourage partners to
-                        apply via briefs.
-                      </p>
-                    )}
-                  </CardContent>
-                </Card>
+                    </CardContent>
+                  </Card>
 
-                <Card
-                  id="opportunity-applications"
-                  className="bg-card/60 border-border/40 backdrop-blur"
-                >
-                  <CardHeader>
-                    <div className="flex items-center gap-2">
-                      <Users className="h-5 w-5 text-emerald-300" />
-                      <CardTitle>Opportunity applications</CardTitle>
-                    </div>
-                    <CardDescription>
-                      View contributor and career submissions captured on the
-                      Opportunities page.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-3 text-sm text-muted-foreground">
-                    <div className="flex flex-wrap items-center justify-between gap-2">
-                      <p>
-                        {opportunityApplicationsLoading
-                          ? "Loading opportunity applicants…"
-                          : `${opportunityApplications.length} submissions`}
-                      </p>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={loadOpportunityApplications}
-                        disabled={opportunityApplicationsLoading}
-                      >
-                        {opportunityApplicationsLoading ? (
-                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        ) : (
-                          <RefreshCw className="mr-2 h-4 w-4" />
-                        )}
-                        Refresh
-                      </Button>
-                    </div>
-                    {opportunityApplicationsLoading ? (
-                      <div className="flex items-center gap-2 text-sm">
-                        <Loader2 className="h-4 w-4 animate-spin text-aethex-300" />
-                        Syncing with Supabase…
+                  <Card className="bg-card/60 border-border/40 backdrop-blur">
+                    <CardHeader>
+                      <div className="flex items-center gap-2">
+                        <ClipboardList className="h-5 w-5 text-sky-300" />
+                        <CardTitle>Project applications</CardTitle>
                       </div>
-                    ) : opportunityApplications.length ? (
-                      <div className="grid gap-2">
-                        {opportunityApplications.slice(0, 6).map((app) => (
-                          <div
-                            key={
-                              app.id ||
-                              `${app.email ?? "candidate"}-${app.submitted_at ?? "time"}`
-                            }
-                            className="space-y-2 rounded border border-border/30 bg-background/40 p-3"
-                          >
-                            <div className="flex flex-wrap items-center justify-between gap-2">
-                              <div>
+                      <CardDescription>
+                        Review collaboration requests and prioritize approvals.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-3 text-sm text-muted-foreground">
+                      <div className="flex flex-wrap items-center justify-between gap-2">
+                        <p>
+                          {projectApplicationsLoading
+                            ? "Loading application data…"
+                            : `${projectApplications.length} total submissions (${pendingProjectApplications} waiting)`}
+                        </p>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={loadProjectApplications}
+                          disabled={projectApplicationsLoading}
+                        >
+                          {projectApplicationsLoading ? (
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          ) : (
+                            <RefreshCw className="mr-2 h-4 w-4" />
+                          )}
+                          Refresh
+                        </Button>
+                      </div>
+                      {projectApplicationsLoading ? (
+                        <div className="flex items-center gap-2 text-sm">
+                          <Loader2 className="h-4 w-4 animate-spin text-aethex-300" />
+                          Synchronizing with Supabase…
+                        </div>
+                      ) : projectApplications.length ? (
+                        <div className="grid gap-2">
+                          {projectApplications.slice(0, 6).map((app) => (
+                            <div
+                              key={
+                                app.id ||
+                                `${app.applicant_email ?? "applicant"}-${app.projects?.id ?? "project"}`
+                              }
+                              className="space-y-1 rounded border border-border/30 bg-background/40 p-3"
+                            >
+                              <div className="flex flex-wrap items-center justify-between gap-2">
                                 <p className="font-medium text-foreground">
-                                  {app.full_name || app.email || "Anonymous"}
+                                  {app.applicant_name ||
+                                    app.applicant_email ||
+                                    "Unknown applicant"}
                                 </p>
-                                <p className="text-xs text-muted-foreground">
-                                  {app.email || "No email provided"}
-                                </p>
-                              </div>
-                              <div className="flex items-center gap-2">
                                 <Badge variant="outline" className="capitalize">
-                                  {(app.type ?? "contributor").toLowerCase()}
-                                </Badge>
-                                <Badge variant="outline" className="capitalize">
-                                  {(app.status ?? "new").toLowerCase()}
+                                  {(app.status ?? "pending").toLowerCase()}
                                 </Badge>
                               </div>
-                            </div>
-                            <div className="grid gap-1 text-xs text-muted-foreground">
-                              {app.role_interest ? (
-                                <p>
-                                  <span className="font-medium text-foreground/80">
-                                    Role:
-                                  </span>{" "}
-                                  {app.role_interest}
-                                </p>
-                              ) : null}
-                              {app.primary_skill ? (
-                                <p>
-                                  <span className="font-medium text-foreground/80">
-                                    Skill:
-                                  </span>{" "}
-                                  {app.primary_skill}
-                                </p>
-                              ) : null}
-                              {app.availability ? (
-                                <p>
-                                  <span className="font-medium text-foreground/80">
-                                    Availability:
-                                  </span>{" "}
-                                  {app.availability}
-                                </p>
-                              ) : null}
-                              {app.experience_level ? (
-                                <p>
-                                  <span className="font-medium text-foreground/80">
-                                    Experience:
-                                  </span>{" "}
-                                  {app.experience_level}
-                                </p>
-                              ) : null}
-                              {app.submitted_at ? (
-                                <p>
-                                  <span className="font-medium text-foreground/80">
-                                    Submitted:
-                                  </span>{" "}
-                                  {new Date(app.submitted_at).toLocaleString()}
-                                </p>
-                              ) : null}
-                            </div>
-                            {app.message ? (
-                              <p className="rounded bg-background/60 p-2 text-xs text-muted-foreground">
-                                {app.message}
+                              <p className="text-xs text-muted-foreground">
+                                {app.projects?.title ?? "No project title"}
                               </p>
-                            ) : null}
-                          </div>
-                        ))}
+                              {app.created_at ? (
+                                <p className="text-[11px] text-muted-foreground/80">
+                                  Submitted{" "}
+                                  {new Date(app.created_at).toLocaleString()}
+                                </p>
+                              ) : null}
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <p>
+                          No project applications on file. Encourage partners to
+                          apply via briefs.
+                        </p>
+                      )}
+                    </CardContent>
+                  </Card>
+
+                  <Card
+                    id="opportunity-applications"
+                    className="bg-card/60 border-border/40 backdrop-blur"
+                  >
+                    <CardHeader>
+                      <div className="flex items-center gap-2">
+                        <Users className="h-5 w-5 text-emerald-300" />
+                        <CardTitle>Opportunity applications</CardTitle>
                       </div>
-                    ) : (
+                      <CardDescription>
+                        View contributor and career submissions captured on the
+                        Opportunities page.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-3 text-sm text-muted-foreground">
+                      <div className="flex flex-wrap items-center justify-between gap-2">
+                        <p>
+                          {opportunityApplicationsLoading
+                            ? "Loading opportunity applicants…"
+                            : `${opportunityApplications.length} submissions`}
+                        </p>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={loadOpportunityApplications}
+                          disabled={opportunityApplicationsLoading}
+                        >
+                          {opportunityApplicationsLoading ? (
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          ) : (
+                            <RefreshCw className="mr-2 h-4 w-4" />
+                          )}
+                          Refresh
+                        </Button>
+                      </div>
+                      {opportunityApplicationsLoading ? (
+                        <div className="flex items-center gap-2 text-sm">
+                          <Loader2 className="h-4 w-4 animate-spin text-aethex-300" />
+                          Syncing with Supabase…
+                        </div>
+                      ) : opportunityApplications.length ? (
+                        <div className="grid gap-2">
+                          {opportunityApplications.slice(0, 6).map((app) => (
+                            <div
+                              key={
+                                app.id ||
+                                `${app.email ?? "candidate"}-${app.submitted_at ?? "time"}`
+                              }
+                              className="space-y-2 rounded border border-border/30 bg-background/40 p-3"
+                            >
+                              <div className="flex flex-wrap items-center justify-between gap-2">
+                                <div>
+                                  <p className="font-medium text-foreground">
+                                    {app.full_name || app.email || "Anonymous"}
+                                  </p>
+                                  <p className="text-xs text-muted-foreground">
+                                    {app.email || "No email provided"}
+                                  </p>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  <Badge
+                                    variant="outline"
+                                    className="capitalize"
+                                  >
+                                    {(app.type ?? "contributor").toLowerCase()}
+                                  </Badge>
+                                  <Badge
+                                    variant="outline"
+                                    className="capitalize"
+                                  >
+                                    {(app.status ?? "new").toLowerCase()}
+                                  </Badge>
+                                </div>
+                              </div>
+                              <div className="grid gap-1 text-xs text-muted-foreground">
+                                {app.role_interest ? (
+                                  <p>
+                                    <span className="font-medium text-foreground/80">
+                                      Role:
+                                    </span>{" "}
+                                    {app.role_interest}
+                                  </p>
+                                ) : null}
+                                {app.primary_skill ? (
+                                  <p>
+                                    <span className="font-medium text-foreground/80">
+                                      Skill:
+                                    </span>{" "}
+                                    {app.primary_skill}
+                                  </p>
+                                ) : null}
+                                {app.availability ? (
+                                  <p>
+                                    <span className="font-medium text-foreground/80">
+                                      Availability:
+                                    </span>{" "}
+                                    {app.availability}
+                                  </p>
+                                ) : null}
+                                {app.experience_level ? (
+                                  <p>
+                                    <span className="font-medium text-foreground/80">
+                                      Experience:
+                                    </span>{" "}
+                                    {app.experience_level}
+                                  </p>
+                                ) : null}
+                                {app.submitted_at ? (
+                                  <p>
+                                    <span className="font-medium text-foreground/80">
+                                      Submitted:
+                                    </span>{" "}
+                                    {new Date(
+                                      app.submitted_at,
+                                    ).toLocaleString()}
+                                  </p>
+                                ) : null}
+                              </div>
+                              {app.message ? (
+                                <p className="rounded bg-background/60 p-2 text-xs text-muted-foreground">
+                                  {app.message}
+                                </p>
+                              ) : null}
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <p>
+                          No opportunity applications yet. Share the
+                          Opportunities page to grow the pipeline.
+                        </p>
+                      )}
+                    </CardContent>
+                  </Card>
+
+                  <Card className="bg-card/60 border-border/40 backdrop-blur">
+                    <CardHeader>
+                      <div className="flex items-center gap-2">
+                        <Activity className="h-5 w-5 text-orange-300" />
+                        <CardTitle>System status</CardTitle>
+                      </div>
+                      <CardDescription>
+                        Auth, database, and realtime services.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="text-sm text-muted-foreground space-y-1">
+                      <p>Auth: Operational</p>
+                      <p>Database: Operational (mock fallback available)</p>
+                      <p>Realtime: Operational</p>
+                    </CardContent>
+                  </Card>
+
+                  <Card className="bg-card/60 border-border/40 backdrop-blur">
+                    <CardHeader>
+                      <div className="flex items-center gap-2">
+                        <UserCog className="h-5 w-5 text-teal-300" />
+                        <CardTitle>Your account</CardTitle>
+                      </div>
+                      <CardDescription>
+                        Owner privileges are active.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="text-sm text-muted-foreground space-y-2">
+                      <p>Signed in as {user.email}.</p>
                       <p>
-                        No opportunity applications yet. Share the Opportunities
-                        page to grow the pipeline.
+                        You have full administrative access across AeThex
+                        services.
                       </p>
-                    )}
-                  </CardContent>
-                </Card>
-
-                <Card className="bg-card/60 border-border/40 backdrop-blur">
-                  <CardHeader>
-                    <div className="flex items-center gap-2">
-                      <Activity className="h-5 w-5 text-orange-300" />
-                      <CardTitle>System status</CardTitle>
-                    </div>
-                    <CardDescription>
-                      Auth, database, and realtime services.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="text-sm text-muted-foreground space-y-1">
-                    <p>Auth: Operational</p>
-                    <p>Database: Operational (mock fallback available)</p>
-                    <p>Realtime: Operational</p>
-                  </CardContent>
-                </Card>
-
-                <Card className="bg-card/60 border-border/40 backdrop-blur">
-                  <CardHeader>
-                    <div className="flex items-center gap-2">
-                      <UserCog className="h-5 w-5 text-teal-300" />
-                      <CardTitle>Your account</CardTitle>
-                    </div>
-                    <CardDescription>
-                      Owner privileges are active.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="text-sm text-muted-foreground space-y-2">
-                    <p>Signed in as {user.email}.</p>
-                    <p>
-                      You have full administrative access across AeThex
-                      services.
-                    </p>
-                  </CardContent>
-                </Card>
-              </div>
-            </TabsContent>
-          </Tabs>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
         </div>
-      </div>
-    </Layout>
-  </>
+      </Layout>
+    </>
   );
 }
diff --git a/client/pages/Blog.tsx b/client/pages/Blog.tsx
index ae456c7d..3f8ad169 100644
--- a/client/pages/Blog.tsx
+++ b/client/pages/Blog.tsx
@@ -208,137 +208,145 @@ const Blog = () => {
 
   return (
     <>
-      <SEO pageTitle="Blog" description="Insights and updates from AeThex: tutorials, platform news, and community highlights." canonical={typeof window!== 'undefined' ? window.location.href : undefined as any} />
-    <Layout>
-      <div className="bg-slate-950 text-foreground">
-        <BlogHero
-          featured={featuredPost}
-          totalCount={dataset.length}
-          search={searchQuery}
-          onSearchChange={setSearchQuery}
-          onViewAll={handleResetFilters}
-        />
+      <SEO
+        pageTitle="Blog"
+        description="Insights and updates from AeThex: tutorials, platform news, and community highlights."
+        canonical={
+          typeof window !== "undefined"
+            ? window.location.href
+            : (undefined as any)
+        }
+      />
+      <Layout>
+        <div className="bg-slate-950 text-foreground">
+          <BlogHero
+            featured={featuredPost}
+            totalCount={dataset.length}
+            search={searchQuery}
+            onSearchChange={setSearchQuery}
+            onViewAll={handleResetFilters}
+          />
 
-        <section className="border-b border-border/30 bg-background/60 py-12">
-          <div className="container mx-auto px-4">
-            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
-              <div className="space-y-2">
-                <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground">
-                  Filter by track
-                </p>
-                <h2 className="text-2xl font-semibold text-white">
-                  Navigate the AeThex knowledge graph
-                </h2>
-              </div>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleResetFilters}
-                className="self-start lg:self-auto"
-              >
-                Reset filters
-              </Button>
-            </div>
-            <div className="mt-6">
-              <BlogCategoryChips
-                categories={categories}
-                selected={selectedCategory}
-                onSelect={setSelectedCategory}
-              />
-            </div>
-          </div>
-        </section>
-
-        <BlogTrendingRail posts={trendingPosts} />
-
-        <section className="border-b border-border/30 bg-background/80 py-16">
-          <div className="container mx-auto grid gap-6 px-4 md:grid-cols-3">
-            {insights.map((insight) => (
-              <Card
-                key={insight.label}
-                className="border-border/40 bg-background/60 backdrop-blur transition hover:border-aethex-400/50"
-              >
-                <CardContent className="flex items-center gap-4 p-6">
-                  <span className="flex h-12 w-12 items-center justify-center rounded-full border border-border/30 bg-background/70 text-aethex-200">
-                    {insight.icon}
-                  </span>
-                  <div>
-                    <p className="text-sm text-muted-foreground">
-                      {insight.label}
-                    </p>
-                    <p className="text-2xl font-semibold text-white">
-                      {insight.value}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {insight.helper}
-                    </p>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </section>
-
-        <section className="py-20">
-          <div className="container mx-auto space-y-12 px-4">
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-              <div className="space-y-2">
-                <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground">
-                  Latest updates
-                </p>
-                <h2 className="text-3xl font-semibold text-white">
-                  Fresh from the AeThex ship room
-                </h2>
-              </div>
-              <Button
-                asChild
-                variant="outline"
-                className="self-start border-border/60 text-sm"
-              >
-                <Link to="/changelog">
-                  View changelog
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Link>
-              </Button>
-            </div>
-
-            <BlogPostGrid posts={displayedPosts} />
-          </div>
-        </section>
-
-        <BlogNewsletterSection />
-
-        <section className="bg-background/70 py-16">
-          <div className="container mx-auto px-4">
-            <div className="rounded-2xl border border-border/40 bg-background/80 p-8">
-              <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+          <section className="border-b border-border/30 bg-background/60 py-12">
+            <div className="container mx-auto px-4">
+              <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
                 <div className="space-y-2">
                   <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground">
-                    Explore more
+                    Filter by track
                   </p>
-                  <h3 className="text-2xl font-semibold text-white">
-                    Dive into AeThex documentation
-                  </h3>
-                  <p className="max-w-2xl text-sm text-muted-foreground">
-                    Looking for implementation guides, deployment recipes, or
-                    program onboarding materials? Visit our documentation hub
-                    for developer tutorials, platform references, and community
-                    playbooks.
+                  <h2 className="text-2xl font-semibold text-white">
+                    Navigate the AeThex knowledge graph
+                  </h2>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleResetFilters}
+                  className="self-start lg:self-auto"
+                >
+                  Reset filters
+                </Button>
+              </div>
+              <div className="mt-6">
+                <BlogCategoryChips
+                  categories={categories}
+                  selected={selectedCategory}
+                  onSelect={setSelectedCategory}
+                />
+              </div>
+            </div>
+          </section>
+
+          <BlogTrendingRail posts={trendingPosts} />
+
+          <section className="border-b border-border/30 bg-background/80 py-16">
+            <div className="container mx-auto grid gap-6 px-4 md:grid-cols-3">
+              {insights.map((insight) => (
+                <Card
+                  key={insight.label}
+                  className="border-border/40 bg-background/60 backdrop-blur transition hover:border-aethex-400/50"
+                >
+                  <CardContent className="flex items-center gap-4 p-6">
+                    <span className="flex h-12 w-12 items-center justify-center rounded-full border border-border/30 bg-background/70 text-aethex-200">
+                      {insight.icon}
+                    </span>
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        {insight.label}
+                      </p>
+                      <p className="text-2xl font-semibold text-white">
+                        {insight.value}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {insight.helper}
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </section>
+
+          <section className="py-20">
+            <div className="container mx-auto space-y-12 px-4">
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+                <div className="space-y-2">
+                  <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground">
+                    Latest updates
                   </p>
+                  <h2 className="text-3xl font-semibold text-white">
+                    Fresh from the AeThex ship room
+                  </h2>
                 </div>
                 <Button
                   asChild
-                  className="bg-gradient-to-r from-aethex-500 to-neon-blue"
+                  variant="outline"
+                  className="self-start border-border/60 text-sm"
                 >
-                  <Link to="/docs">Open documentation hub</Link>
+                  <Link to="/changelog">
+                    View changelog
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </Link>
                 </Button>
               </div>
+
+              <BlogPostGrid posts={displayedPosts} />
             </div>
-          </div>
-        </section>
-      </div>
-    </Layout>
-  </>
+          </section>
+
+          <BlogNewsletterSection />
+
+          <section className="bg-background/70 py-16">
+            <div className="container mx-auto px-4">
+              <div className="rounded-2xl border border-border/40 bg-background/80 p-8">
+                <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+                  <div className="space-y-2">
+                    <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground">
+                      Explore more
+                    </p>
+                    <h3 className="text-2xl font-semibold text-white">
+                      Dive into AeThex documentation
+                    </h3>
+                    <p className="max-w-2xl text-sm text-muted-foreground">
+                      Looking for implementation guides, deployment recipes, or
+                      program onboarding materials? Visit our documentation hub
+                      for developer tutorials, platform references, and
+                      community playbooks.
+                    </p>
+                  </div>
+                  <Button
+                    asChild
+                    className="bg-gradient-to-r from-aethex-500 to-neon-blue"
+                  >
+                    <Link to="/docs">Open documentation hub</Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </Layout>
+    </>
   );
 };
 
diff --git a/client/pages/BlogPost.tsx b/client/pages/BlogPost.tsx
index dbb4d9b4..1a5b1c57 100644
--- a/client/pages/BlogPost.tsx
+++ b/client/pages/BlogPost.tsx
@@ -72,59 +72,68 @@ export default function BlogPost() {
 
   return (
     <>
-      <SEO pageTitle={post?.title || "Blog Post"} description={post?.excerpt || undefined} image={post?.image || null} canonical={typeof window!== 'undefined' ? window.location.href : undefined as any} />
-    <Layout>
-      <div className="min-h-screen bg-aethex-gradient py-12">
-        <div className="container mx-auto px-4 max-w-3xl">
-          <Card className="overflow-hidden border-border/50 animate-scale-in">
-            {post.image && (
-              <img
-                src={post.image}
-                alt={post.title}
-                className="w-full h-64 object-cover"
-              />
-            )}
-            <CardHeader>
-              {post.category && (
-                <Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">
-                  {post.category}
-                </Badge>
+      <SEO
+        pageTitle={post?.title || "Blog Post"}
+        description={post?.excerpt || undefined}
+        image={post?.image || null}
+        canonical={
+          typeof window !== "undefined"
+            ? window.location.href
+            : (undefined as any)
+        }
+      />
+      <Layout>
+        <div className="min-h-screen bg-aethex-gradient py-12">
+          <div className="container mx-auto px-4 max-w-3xl">
+            <Card className="overflow-hidden border-border/50 animate-scale-in">
+              {post.image && (
+                <img
+                  src={post.image}
+                  alt={post.title}
+                  className="w-full h-64 object-cover"
+                />
               )}
-              <CardTitle className="text-3xl mt-2">{post.title}</CardTitle>
-              {post.excerpt && (
-                <CardDescription className="text-muted-foreground mt-2">
-                  {post.excerpt}
-                </CardDescription>
-              )}
-              <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
-                {post.author && (
-                  <div className="flex items-center gap-2">
-                    <User className="h-4 w-4" /> <span>{post.author}</span>
-                  </div>
+              <CardHeader>
+                {post.category && (
+                  <Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">
+                    {post.category}
+                  </Badge>
                 )}
-                {post.date && (
-                  <div className="flex items-center gap-2">
-                    <Calendar className="h-4 w-4" /> <span>{post.date}</span>
-                  </div>
+                <CardTitle className="text-3xl mt-2">{post.title}</CardTitle>
+                {post.excerpt && (
+                  <CardDescription className="text-muted-foreground mt-2">
+                    {post.excerpt}
+                  </CardDescription>
                 )}
-              </div>
-            </CardHeader>
-            <CardContent className="prose max-w-none mt-6">
-              {post.body ? (
-                <div dangerouslySetInnerHTML={{ __html: post.body }} />
-              ) : (
-                <p>{post.excerpt}</p>
-              )}
-              <div className="pt-6">
-                <Link to="/blog" className="text-aethex-400 underline">
-                  Back to Blog
-                </Link>
-              </div>
-            </CardContent>
-          </Card>
+                <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
+                  {post.author && (
+                    <div className="flex items-center gap-2">
+                      <User className="h-4 w-4" /> <span>{post.author}</span>
+                    </div>
+                  )}
+                  {post.date && (
+                    <div className="flex items-center gap-2">
+                      <Calendar className="h-4 w-4" /> <span>{post.date}</span>
+                    </div>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent className="prose max-w-none mt-6">
+                {post.body ? (
+                  <div dangerouslySetInnerHTML={{ __html: post.body }} />
+                ) : (
+                  <p>{post.excerpt}</p>
+                )}
+                <div className="pt-6">
+                  <Link to="/blog" className="text-aethex-400 underline">
+                    Back to Blog
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
         </div>
-      </div>
-    </Layout>
-  </>
+      </Layout>
+    </>
   );
 }
diff --git a/client/pages/Community.tsx b/client/pages/Community.tsx
index bbc0ead2..3a788416 100644
--- a/client/pages/Community.tsx
+++ b/client/pages/Community.tsx
@@ -1790,349 +1790,511 @@ export default function Community() {
 
   return (
     <>
-      <SEO pageTitle="Community" description="AeThex Community: share progress, discover collaborators, and stay updated." canonical={typeof window!== 'undefined' ? window.location.href : undefined as any} />
-    <Layout>
-      <div className="min-h-screen bg-aethex-gradient">
-        {/* Hero Section */}
-        <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"
-              >
-                <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>
-              </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.
-              </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"
-                >
-                  <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
+      <SEO
+        pageTitle="Community"
+        description="AeThex Community: share progress, discover collaborators, and stay updated."
+        canonical={
+          typeof window !== "undefined"
+            ? window.location.href
+            : (undefined as any)
+        }
+      />
+      <Layout>
+        <div className="min-h-screen bg-aethex-gradient">
+          {/* Hero Section */}
+          <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"
-                  size="lg"
-                  className="border-border/50 hover-lift"
+                  className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
                 >
-                  <Link to="/github">View Projects</Link>
-                </Button>
+                  <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>
+                </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.
+                </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"
+                  >
+                    <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"
+                  >
+                    <Link to="/github">View Projects</Link>
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <Tabs
-          value={activeTab}
-          onValueChange={handleTabChange}
-          className="space-y-12"
-        >
-          <div className="container mx-auto px-4">
-            <div className="overflow-x-auto pb-2">
-              <TabsList className="flex w-max flex-nowrap gap-2 rounded-2xl border border-border/60 bg-background/60 p-2">
-                {communityTabItems.map((tab) => (
-                  <TabsTrigger
-                    key={tab.id}
-                    value={tab.id}
-                    className="rounded-xl px-4 py-2 text-sm font-semibold text-muted-foreground transition whitespace-nowrap data-[state=active]:bg-gradient-to-r data-[state=active]:from-aethex-500/20 data-[state=active]:to-neon-blue/20 data-[state=active]:text-foreground data-[state=active]:shadow"
-                  >
-                    {tab.label}
-                  </TabsTrigger>
-                ))}
-              </TabsList>
+          <Tabs
+            value={activeTab}
+            onValueChange={handleTabChange}
+            className="space-y-12"
+          >
+            <div className="container mx-auto px-4">
+              <div className="overflow-x-auto pb-2">
+                <TabsList className="flex w-max flex-nowrap gap-2 rounded-2xl border border-border/60 bg-background/60 p-2">
+                  {communityTabItems.map((tab) => (
+                    <TabsTrigger
+                      key={tab.id}
+                      value={tab.id}
+                      className="rounded-xl px-4 py-2 text-sm font-semibold text-muted-foreground transition whitespace-nowrap data-[state=active]:bg-gradient-to-r data-[state=active]:from-aethex-500/20 data-[state=active]:to-neon-blue/20 data-[state=active]:text-foreground data-[state=active]:shadow"
+                    >
+                      {tab.label}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </div>
             </div>
-          </div>
 
-          {activeTab === "new-members" && (
-            <TabsContent value="new-members" className="mt-0">
-              {/* New Member Hub */}
-              <section className="py-20 bg-background/40">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="New Member Hub"
-                    title="Start strong in your first 7 days"
-                    description="Follow a guided path, watch the welcome tour, and unlock your first achievements fast."
-                    align="left"
-                  />
-                  <div className="grid gap-8 lg:grid-cols-[2fr,3fr]">
-                    <Card className="relative overflow-hidden border-border/60 bg-background/80 backdrop-blur-xl">
-                      <CardContent className="p-0">
-                        <div className="relative aspect-video bg-gradient-to-br from-aethex-500/30 via-background to-neon-blue/30 flex items-center justify-center">
-                          <div className="flex flex-col items-center space-y-4">
-                            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-background/80 border border-aethex-400/50 shadow-lg shadow-aethex-500/20">
-                              <Play className="h-8 w-8 text-aethex-400" />
+            {activeTab === "new-members" && (
+              <TabsContent value="new-members" className="mt-0">
+                {/* New Member Hub */}
+                <section className="py-20 bg-background/40">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="New Member Hub"
+                      title="Start strong in your first 7 days"
+                      description="Follow a guided path, watch the welcome tour, and unlock your first achievements fast."
+                      align="left"
+                    />
+                    <div className="grid gap-8 lg:grid-cols-[2fr,3fr]">
+                      <Card className="relative overflow-hidden border-border/60 bg-background/80 backdrop-blur-xl">
+                        <CardContent className="p-0">
+                          <div className="relative aspect-video bg-gradient-to-br from-aethex-500/30 via-background to-neon-blue/30 flex items-center justify-center">
+                            <div className="flex flex-col items-center space-y-4">
+                              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-background/80 border border-aethex-400/50 shadow-lg shadow-aethex-500/20">
+                                <Play className="h-8 w-8 text-aethex-400" />
+                              </div>
+                              <div className="text-center space-y-2">
+                                <h3 className="text-xl font-semibold text-gradient">
+                                  Welcome to AeThex
+                                </h3>
+                                <p className="text-sm text-muted-foreground max-w-sm">
+                                  Learn how to customise your profile, meet
+                                  mentors, and ship your first contribution.
+                                </p>
+                              </div>
+                              <Button asChild>
+                                <a
+                                  href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                                  target="_blank"
+                                  rel="noreferrer"
+                                  className="flex items-center space-x-2"
+                                >
+                                  <span>Watch welcome briefing</span>
+                                  <ArrowRight className="h-4 w-4" />
+                                </a>
+                              </Button>
                             </div>
-                            <div className="text-center space-y-2">
-                              <h3 className="text-xl font-semibold text-gradient">
-                                Welcome to AeThex
-                              </h3>
-                              <p className="text-sm text-muted-foreground max-w-sm">
-                                Learn how to customise your profile, meet
-                                mentors, and ship your first contribution.
-                              </p>
-                            </div>
-                            <Button asChild>
-                              <a
-                                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-                                target="_blank"
-                                rel="noreferrer"
-                                className="flex items-center space-x-2"
-                              >
-                                <span>Watch welcome briefing</span>
-                                <ArrowRight className="h-4 w-4" />
-                              </a>
-                            </Button>
+                            <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_center,_rgba(80,199,255,0.25),_transparent_70%)]" />
                           </div>
-                          <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_center,_rgba(80,199,255,0.25),_transparent_70%)]" />
-                        </div>
-                        <div className="p-6 space-y-4">
-                          <h3 className="text-lg font-semibold text-foreground">
-                            Orientation snapshot
-                          </h3>
-                          <div className="grid gap-3">
-                            <div className="flex items-center justify-between text-sm text-muted-foreground">
-                              <span>Average onboarding time</span>
-                              <span className="font-semibold text-aethex-400">
-                                22 mins
-                              </span>
-                            </div>
-                            <div className="flex items-center justify-between text-sm text-muted-foreground">
-                              <span>Mentors online right now</span>
-                              <span className="font-semibold text-aethex-400">
-                                18
-                              </span>
-                            </div>
-                            <div className="flex items-center justify-between text-sm text-muted-foreground">
-                              <span>Starter quests completed this week</span>
-                              <span className="font-semibold text-aethex-400">
-                                412
-                              </span>
+                          <div className="p-6 space-y-4">
+                            <h3 className="text-lg font-semibold text-foreground">
+                              Orientation snapshot
+                            </h3>
+                            <div className="grid gap-3">
+                              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                                <span>Average onboarding time</span>
+                                <span className="font-semibold text-aethex-400">
+                                  22 mins
+                                </span>
+                              </div>
+                              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                                <span>Mentors online right now</span>
+                                <span className="font-semibold text-aethex-400">
+                                  18
+                                </span>
+                              </div>
+                              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                                <span>Starter quests completed this week</span>
+                                <span className="font-semibold text-aethex-400">
+                                  412
+                                </span>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      </CardContent>
-                    </Card>
-
-                    <div className="grid gap-6">
-                      <Card className="border-border/60 bg-background/80">
-                        <CardHeader className="space-y-2">
-                          <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                            <CheckCircle className="h-4 w-4 text-aethex-400" />
-                            First steps checklist
-                          </div>
-                          <CardTitle className="text-2xl">
-                            Ship your first wins this week
-                          </CardTitle>
-                          <CardDescription>
-                            Work through the essentials and unlock the New
-                            Recruit badge.
-                          </CardDescription>
-                        </CardHeader>
-                        <CardContent className="space-y-4">
-                          <ul className="space-y-4">
-                            {newMemberSteps.map((step) => {
-                              const Icon = step.icon;
-                              return (
-                                <li key={step.id} className="flex gap-4">
-                                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
-                                    <Icon className="h-5 w-5" />
-                                  </div>
-                                  <div className="space-y-1">
-                                    <p className="font-semibold text-foreground">
-                                      {step.title}
-                                    </p>
-                                    <p className="text-sm text-muted-foreground">
-                                      {step.description}
-                                    </p>
-                                  </div>
-                                </li>
-                              );
-                            })}
-                          </ul>
                         </CardContent>
                       </Card>
 
+                      <div className="grid gap-6">
+                        <Card className="border-border/60 bg-background/80">
+                          <CardHeader className="space-y-2">
+                            <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
+                              <CheckCircle className="h-4 w-4 text-aethex-400" />
+                              First steps checklist
+                            </div>
+                            <CardTitle className="text-2xl">
+                              Ship your first wins this week
+                            </CardTitle>
+                            <CardDescription>
+                              Work through the essentials and unlock the New
+                              Recruit badge.
+                            </CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-4">
+                            <ul className="space-y-4">
+                              {newMemberSteps.map((step) => {
+                                const Icon = step.icon;
+                                return (
+                                  <li key={step.id} className="flex gap-4">
+                                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
+                                      <Icon className="h-5 w-5" />
+                                    </div>
+                                    <div className="space-y-1">
+                                      <p className="font-semibold text-foreground">
+                                        {step.title}
+                                      </p>
+                                      <p className="text-sm text-muted-foreground">
+                                        {step.description}
+                                      </p>
+                                    </div>
+                                  </li>
+                                );
+                              })}
+                            </ul>
+                          </CardContent>
+                        </Card>
+
+                        <Card className="border-border/60 bg-background/80">
+                          <CardHeader className="space-y-2">
+                            <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
+                              <Sparkles className="h-4 w-4 text-aethex-400" />
+                              Quick wins
+                            </div>
+                            <CardTitle className="text-2xl">
+                              Jump into the right resources
+                            </CardTitle>
+                            <CardDescription>
+                              Explore guides and shortcuts tailored for
+                              first-time members.
+                            </CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-4">
+                            <div className="space-y-3">
+                              {newMemberResources.map((resource) => (
+                                <div
+                                  key={resource.id}
+                                  className="flex flex-col gap-2 rounded-lg border border-border/40 bg-background/60 p-4 hover:border-aethex-400/40 transition-colors"
+                                >
+                                  <div className="flex items-center justify-between gap-3">
+                                    <div>
+                                      <p className="font-semibold text-foreground">
+                                        {resource.title}
+                                      </p>
+                                      <p className="text-sm text-muted-foreground">
+                                        {resource.description}
+                                      </p>
+                                    </div>
+                                    <ArrowRight className="h-4 w-4 text-aethex-400" />
+                                  </div>
+                                  <Button
+                                    asChild
+                                    variant="outline"
+                                    size="sm"
+                                    className="w-fit"
+                                  >
+                                    <Link to={resource.href}>
+                                      {resource.label}
+                                    </Link>
+                                  </Button>
+                                </div>
+                              ))}
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "knowledge" && (
+              <TabsContent value="knowledge" className="mt-0">
+                {/* Knowledge Base */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Knowledge Base"
+                      title="Search answers and how-to guides"
+                      description="Get instant access to FAQs, tutorials, and troubleshooting playbooks maintained by the community."
+                      align="left"
+                    />
+                    <div className="grid gap-8 lg:grid-cols-[2fr,3fr]">
                       <Card className="border-border/60 bg-background/80">
-                        <CardHeader className="space-y-2">
+                        <CardHeader className="space-y-3">
                           <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                            <Sparkles className="h-4 w-4 text-aethex-400" />
-                            Quick wins
+                            <Search className="h-4 w-4 text-aethex-400" />
+                            Search the library
                           </div>
                           <CardTitle className="text-2xl">
-                            Jump into the right resources
+                            Find step-by-step help
                           </CardTitle>
                           <CardDescription>
-                            Explore guides and shortcuts tailored for first-time
-                            members.
+                            Enter a topic, tool, or problem and we will surface
+                            curated guides written by mentors and staff.
                           </CardDescription>
                         </CardHeader>
                         <CardContent className="space-y-4">
-                          <div className="space-y-3">
-                            {newMemberResources.map((resource) => (
-                              <div
-                                key={resource.id}
-                                className="flex flex-col gap-2 rounded-lg border border-border/40 bg-background/60 p-4 hover:border-aethex-400/40 transition-colors"
-                              >
-                                <div className="flex items-center justify-between gap-3">
-                                  <div>
-                                    <p className="font-semibold text-foreground">
-                                      {resource.title}
-                                    </p>
-                                    <p className="text-sm text-muted-foreground">
-                                      {resource.description}
-                                    </p>
+                          <form
+                            onSubmit={handleKnowledgeSearch}
+                            className="space-y-3"
+                          >
+                            <div className="relative">
+                              <Input
+                                value={knowledgeQuery}
+                                onChange={(event) =>
+                                  setKnowledgeQuery(event.target.value)
+                                }
+                                placeholder="e.g. Deploying multiplayer servers"
+                                className="pl-10 bg-background/60 border-border/60"
+                                aria-label="Search knowledge base"
+                              />
+                              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                            </div>
+                            <Button
+                              type="submit"
+                              className="w-full justify-center"
+                            >
+                              Search articles
+                            </Button>
+                          </form>
+                          <div className="space-y-2">
+                            <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                              Quick suggestions
+                            </p>
+                            <div className="flex flex-wrap gap-2">
+                              {knowledgeSuggestions.map((suggestion) => (
+                                <Button
+                                  key={suggestion}
+                                  type="button"
+                                  variant="outline"
+                                  size="sm"
+                                  className="border-border/60"
+                                  onClick={() => setKnowledgeQuery(suggestion)}
+                                >
+                                  {suggestion}
+                                </Button>
+                              ))}
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                      <div className="grid gap-4 sm:grid-cols-2">
+                        {knowledgeBaseTopics.map((topic) => {
+                          const Icon = topic.icon;
+                          return (
+                            <Card
+                              key={topic.id}
+                              className="border-border/50 bg-background/70 transition-all duration-300 hover:-translate-y-1 hover:border-aethex-400/60"
+                            >
+                              <CardHeader className="space-y-3">
+                                <div className="flex items-center justify-between">
+                                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                                    <Icon className="h-5 w-5 text-aethex-300" />
+                                    {topic.articles} articles
                                   </div>
-                                  <ArrowRight className="h-4 w-4 text-aethex-400" />
+                                  <Badge
+                                    variant="outline"
+                                    className="border-border/60"
+                                  >
+                                    Updated weekly
+                                  </Badge>
                                 </div>
+                                <CardTitle className="text-lg text-foreground">
+                                  {topic.title}
+                                </CardTitle>
+                                <CardDescription>
+                                  {topic.description}
+                                </CardDescription>
+                              </CardHeader>
+                              <CardContent>
                                 <Button
                                   asChild
                                   variant="outline"
                                   size="sm"
                                   className="w-fit"
                                 >
-                                  <Link to={resource.href}>
-                                    {resource.label}
-                                  </Link>
+                                  <Link to={topic.href}>Explore resources</Link>
                                 </Button>
-                              </div>
-                            ))}
+                              </CardContent>
+                            </Card>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "mentorship" && (
+              <TabsContent value="mentorship" className="mt-0">
+                {/* Mentorship Program */}
+                <section className="py-20 bg-background/20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Mentorship"
+                      title="Level up with experienced guides"
+                      description="Match with mentors for technical deep dives, creative direction, and career coaching."
+                      align="left"
+                    />
+                    <div className="grid gap-8 lg:grid-cols-[3fr,2fr]">
+                      <Card className="border-border/60 bg-background/80">
+                        <CardHeader className="space-y-3">
+                          <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
+                            <Sparkles className="h-4 w-4 text-aethex-400" />
+                            Mentor spotlight
+                          </div>
+                          <CardTitle className="text-2xl">
+                            Kick off a guided sprint
+                          </CardTitle>
+                          <CardDescription>
+                            Submit your goals and interests, and we’ll connect
+                            you with mentors who ship in similar spaces.
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                          <ul className="space-y-3 text-sm text-muted-foreground">
+                            <li className="flex items-center gap-2">
+                              <CheckCircle className="h-4 w-4 text-aethex-400" />
+                              1:1 sessions and group clinics each week
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <CheckCircle className="h-4 w-4 text-aethex-400" />
+                              Direct feedback on builds, pitch decks, and
+                              production plans
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <CheckCircle className="h-4 w-4 text-aethex-400" />
+                              Priority invites to closed playtests and God Mode
+                              rewards
+                            </li>
+                          </ul>
+                          <div className="flex flex-col sm:flex-row gap-3">
+                            <Button asChild className="flex-1">
+                              <Link to="/community/mentorship">
+                                Request mentorship
+                              </Link>
+                            </Button>
+                            <Button
+                              asChild
+                              variant="outline"
+                              className="flex-1"
+                            >
+                              <Link to="/community/mentorship/apply">
+                                Become a mentor
+                              </Link>
+                            </Button>
                           </div>
                         </CardContent>
                       </Card>
+                      <div className="grid gap-4">
+                        {mentorshipTracks.map((track) => {
+                          const Icon = track.icon;
+                          return (
+                            <div
+                              key={track.id}
+                              className="rounded-xl border border-border/50 bg-background/70 p-5 hover:border-aethex-400/50 transition"
+                            >
+                              <div className="flex items-start gap-3">
+                                <div className="mt-1 flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
+                                  <Icon className="h-5 w-5" />
+                                </div>
+                                <div className="space-y-1">
+                                  <p className="text-lg font-semibold text-foreground">
+                                    {track.title}
+                                  </p>
+                                  <p className="text-sm text-muted-foreground">
+                                    {track.description}
+                                  </p>
+                                  <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                                    {track.mentors} mentors available
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
                     </div>
                   </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
+                </section>
+              </TabsContent>
+            )}
 
-          {activeTab === "knowledge" && (
-            <TabsContent value="knowledge" className="mt-0">
-              {/* Knowledge Base */}
-              <section className="py-20">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Knowledge Base"
-                    title="Search answers and how-to guides"
-                    description="Get instant access to FAQs, tutorials, and troubleshooting playbooks maintained by the community."
-                    align="left"
-                  />
-                  <div className="grid gap-8 lg:grid-cols-[2fr,3fr]">
-                    <Card className="border-border/60 bg-background/80">
-                      <CardHeader className="space-y-3">
-                        <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                          <Search className="h-4 w-4 text-aethex-400" />
-                          Search the library
-                        </div>
-                        <CardTitle className="text-2xl">
-                          Find step-by-step help
-                        </CardTitle>
-                        <CardDescription>
-                          Enter a topic, tool, or problem and we will surface
-                          curated guides written by mentors and staff.
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-4">
-                        <form
-                          onSubmit={handleKnowledgeSearch}
-                          className="space-y-3"
-                        >
-                          <div className="relative">
-                            <Input
-                              value={knowledgeQuery}
-                              onChange={(event) =>
-                                setKnowledgeQuery(event.target.value)
-                              }
-                              placeholder="e.g. Deploying multiplayer servers"
-                              className="pl-10 bg-background/60 border-border/60"
-                              aria-label="Search knowledge base"
-                            />
-                            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                          </div>
-                          <Button
-                            type="submit"
-                            className="w-full justify-center"
-                          >
-                            Search articles
-                          </Button>
-                        </form>
-                        <div className="space-y-2">
-                          <p className="text-xs uppercase tracking-wide text-muted-foreground">
-                            Quick suggestions
-                          </p>
-                          <div className="flex flex-wrap gap-2">
-                            {knowledgeSuggestions.map((suggestion) => (
-                              <Button
-                                key={suggestion}
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                className="border-border/60"
-                                onClick={() => setKnowledgeQuery(suggestion)}
-                              >
-                                {suggestion}
-                              </Button>
-                            ))}
-                          </div>
-                        </div>
-                      </CardContent>
-                    </Card>
-                    <div className="grid gap-4 sm:grid-cols-2">
-                      {knowledgeBaseTopics.map((topic) => {
-                        const Icon = topic.icon;
+            {activeTab === "case-studies" && (
+              <TabsContent value="case-studies" className="mt-0">
+                {/* Case Studies */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Case Studies"
+                      title="See how teams scale with AeThex"
+                      description="Deep dives into projects that leveraged the community for momentum, funding, and retention."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-3">
+                      {caseStudyHighlights.map((study) => {
+                        const Icon = study.icon;
                         return (
                           <Card
-                            key={topic.id}
-                            className="border-border/50 bg-background/70 transition-all duration-300 hover:-translate-y-1 hover:border-aethex-400/60"
+                            key={study.id}
+                            className="relative overflow-hidden border-border/60 bg-background/80 backdrop-blur-xl"
                           >
-                            <CardHeader className="space-y-3">
-                              <div className="flex items-center justify-between">
-                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                                  <Icon className="h-5 w-5 text-aethex-300" />
-                                  {topic.articles} articles
-                                </div>
-                                <Badge
-                                  variant="outline"
-                                  className="border-border/60"
-                                >
-                                  Updated weekly
-                                </Badge>
+                            <div className="absolute inset-0 bg-gradient-to-br from-aethex-500/10 via-transparent to-neon-blue/10" />
+                            <CardHeader className="relative space-y-3">
+                              <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
+                                <Icon className="h-5 w-5 text-aethex-300" />
+                                {study.metricLabel}
                               </div>
-                              <CardTitle className="text-lg text-foreground">
-                                {topic.title}
+                              <CardTitle className="text-2xl text-foreground">
+                                {study.title}
                               </CardTitle>
-                              <CardDescription>
-                                {topic.description}
-                              </CardDescription>
+                              <p className="text-sm font-semibold text-aethex-300">
+                                {study.metricValue}
+                              </p>
                             </CardHeader>
-                            <CardContent>
+                            <CardContent className="relative space-y-4">
+                              <p className="text-sm text-muted-foreground leading-relaxed">
+                                {study.summary}
+                              </p>
                               <Button
                                 asChild
                                 variant="outline"
                                 size="sm"
                                 className="w-fit"
                               >
-                                <Link to={topic.href}>Explore resources</Link>
+                                <Link
+                                  to={`/community/case-studies/${study.id}`}
+                                >
+                                  Read full story
+                                </Link>
                               </Button>
                             </CardContent>
                           </Card>
@@ -2140,622 +2302,1461 @@ export default function Community() {
                       })}
                     </div>
                   </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
+                </section>
+              </TabsContent>
+            )}
 
-          {activeTab === "mentorship" && (
-            <TabsContent value="mentorship" className="mt-0">
-              {/* Mentorship Program */}
-              <section className="py-20 bg-background/20">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Mentorship"
-                    title="Level up with experienced guides"
-                    description="Match with mentors for technical deep dives, creative direction, and career coaching."
-                    align="left"
-                  />
-                  <div className="grid gap-8 lg:grid-cols-[3fr,2fr]">
-                    <Card className="border-border/60 bg-background/80">
-                      <CardHeader className="space-y-3">
-                        <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                          <Sparkles className="h-4 w-4 text-aethex-400" />
-                          Mentor spotlight
+            {activeTab === "leaderboards" && (
+              <TabsContent value="leaderboards" className="mt-0">
+                {/* Leaderboards */}
+                <section className="py-20 bg-background/30">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Gamification"
+                      title="Celebrate contributions across the network"
+                      description="Track streaks, highlight achievements, and fuel friendly competition among builders."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-3">
+                      {leaderboardCategories.map((category) => {
+                        const Icon = category.icon;
+                        return (
+                          <Card
+                            key={category.id}
+                            className="border border-border/50 bg-background/70 shadow-sm hover:border-aethex-400/50 transition"
+                          >
+                            <CardHeader className="space-y-3">
+                              <div className="flex items-center justify-between text-sm uppercase tracking-wide text-muted-foreground">
+                                <span className="flex items-center gap-2">
+                                  <Icon className="h-4 w-4 text-aethex-300" />
+                                  {category.title}
+                                </span>
+                                <Badge
+                                  variant="outline"
+                                  className="border-border/50"
+                                >
+                                  Updated daily
+                                </Badge>
+                              </div>
+                              <CardDescription>
+                                {category.description}
+                              </CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-2">
+                              <ol className="space-y-1 text-sm">
+                                {category.leaders.map((leader, index) => (
+                                  <li
+                                    key={leader}
+                                    className="flex items-center gap-2"
+                                  >
+                                    <span className="text-muted-foreground">
+                                      #{index + 1}
+                                    </span>
+                                    <span className="font-medium text-foreground">
+                                      {leader}
+                                    </span>
+                                  </li>
+                                ))}
+                              </ol>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                    <div className="mt-8 text-left">
+                      <Button
+                        asChild
+                        variant="outline"
+                        className="border-border/60"
+                      >
+                        <Link to="/community/leaderboards">
+                          View full leaderboards
+                        </Link>
+                      </Button>
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "newsletter" && (
+              <TabsContent value="newsletter" className="mt-0">
+                {/* Community Newsletter */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Community Briefing"
+                      title="Get the top discussions in your inbox"
+                      description="Stay ahead with weekly highlights, upcoming events, and featured creators curated by the AeThex team."
+                      align="left"
+                    />
+                    <Card className="border-border/60 bg-background/80 max-w-3xl">
+                      <CardContent className="space-y-4 p-6 lg:p-8">
+                        <div className="flex flex-col gap-3 text-sm text-muted-foreground">
+                          <div className="flex items-center gap-2 text-xs uppercase tracking-wide">
+                            <Mail className="h-4 w-4 text-aethex-300" />
+                            Weekly digest
+                          </div>
+                          <p>
+                            Each Monday we share major updates, spotlight
+                            champions, and surface new opportunities—no noise,
+                            just impact.
+                          </p>
                         </div>
-                        <CardTitle className="text-2xl">
-                          Kick off a guided sprint
-                        </CardTitle>
-                        <CardDescription>
-                          Submit your goals and interests, and we’ll connect you
-                          with mentors who ship in similar spaces.
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-4">
-                        <ul className="space-y-3 text-sm text-muted-foreground">
-                          <li className="flex items-center gap-2">
-                            <CheckCircle className="h-4 w-4 text-aethex-400" />
-                            1:1 sessions and group clinics each week
-                          </li>
-                          <li className="flex items-center gap-2">
-                            <CheckCircle className="h-4 w-4 text-aethex-400" />
-                            Direct feedback on builds, pitch decks, and
-                            production plans
-                          </li>
-                          <li className="flex items-center gap-2">
-                            <CheckCircle className="h-4 w-4 text-aethex-400" />
-                            Priority invites to closed playtests and God Mode
-                            rewards
-                          </li>
-                        </ul>
-                        <div className="flex flex-col sm:flex-row gap-3">
-                          <Button asChild className="flex-1">
-                            <Link to="/community/mentorship">
-                              Request mentorship
-                            </Link>
+                        <form
+                          onSubmit={handleNewsletterSignup}
+                          className="flex flex-col gap-3 sm:flex-row"
+                        >
+                          <Input
+                            type="email"
+                            required
+                            value={newsletterEmail}
+                            onChange={(event) =>
+                              setNewsletterEmail(event.target.value)
+                            }
+                            placeholder="you@example.com"
+                            className="bg-background/60 border-border/60"
+                            aria-label="Email address"
+                          />
+                          <Button type="submit" className="sm:w-auto">
+                            Subscribe
                           </Button>
-                          <Button asChild variant="outline" className="flex-1">
-                            <Link to="/community/mentorship/apply">
-                              Become a mentor
-                            </Link>
-                          </Button>
-                        </div>
+                        </form>
+                        <p className="text-xs text-muted-foreground">
+                          We respect your time—unsubscribe anytime with a single
+                          click.
+                        </p>
                       </CardContent>
                     </Card>
-                    <div className="grid gap-4">
-                      {mentorshipTracks.map((track) => {
-                        const Icon = track.icon;
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "growth" && (
+              <TabsContent value="growth" className="mt-0">
+                {/* Professional Growth & Fun */}
+                <section className="py-20 bg-background/20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Professional Growth & Fun"
+                      title="Discover new opportunities and show your AeThex pride"
+                      description="Connect with studios, earn bounties, and rock exclusive merch designed by the community."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-2">
+                      {opportunityHighlights.map((item) => {
+                        const Icon = item.icon;
+                        return (
+                          <Card
+                            key={item.id}
+                            className="border-border/50 bg-background/75 transition hover:-translate-y-1 hover:border-aethex-400/50"
+                          >
+                            <CardHeader className="space-y-3">
+                              <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
+                                <Icon className="h-4 w-4 text-aethex-300" />
+                                {item.title}
+                              </div>
+                              <CardDescription>
+                                {item.description}
+                              </CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                              <div className="grid gap-3 sm:grid-cols-2">
+                                {item.metrics.map((metric) => (
+                                  <div
+                                    key={metric.label}
+                                    className="rounded-lg border border-border/40 bg-background/60 p-3 text-sm"
+                                  >
+                                    <p className="text-muted-foreground">
+                                      {metric.label}
+                                    </p>
+                                    <p className="text-xl font-semibold text-foreground">
+                                      {metric.value}
+                                    </p>
+                                  </div>
+                                ))}
+                              </div>
+                              <Button
+                                asChild
+                                variant="outline"
+                                className="w-fit"
+                              >
+                                <Link to={item.href}>{item.ctaLabel}</Link>
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "activities" && (
+              <TabsContent value="activities" className="mt-0">
+                {/* Content & Activities */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Content & Activities"
+                      title="Create, compete, and build the universe together"
+                      description="From lore summits to fan-art showcases, the community drives the culture forward."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
+                      {creativeActivities.map((activity) => {
+                        const Icon = activity.icon;
+                        return (
+                          <Card
+                            key={activity.id}
+                            className="border-border/50 bg-background/75 hover:border-aethex-400/50 transition"
+                          >
+                            <CardHeader className="space-y-3">
+                              <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
+                                <Icon className="h-4 w-4 text-aethex-300" />
+                                {activity.title}
+                              </div>
+                              <CardDescription>
+                                {activity.description}
+                              </CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-3">
+                              <ul className="space-y-2 text-xs text-muted-foreground">
+                                {activity.highlights.map((highlight) => (
+                                  <li
+                                    key={highlight}
+                                    className="flex items-start gap-2"
+                                  >
+                                    <ArrowRight className="mt-0.5 h-3 w-3 text-aethex-400" />
+                                    <span>{highlight}</span>
+                                  </li>
+                                ))}
+                              </ul>
+                              <Button
+                                asChild
+                                variant="outline"
+                                size="sm"
+                                className="w-fit"
+                              >
+                                <Link to={activity.href}>Join in</Link>
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "recognition" && (
+              <TabsContent value="recognition" className="mt-0">
+                {/* Recognition & Roles */}
+                <section className="py-20 bg-background/30">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Recognition & Roles"
+                      title="Support champions powering the community"
+                      description="Formal programs that reward ambassadors, creators, and playtest squads for their impact."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-3">
+                      {recognitionPrograms.map((program) => {
+                        const Icon = program.icon;
+                        return (
+                          <Card
+                            key={program.id}
+                            className="border-border/50 bg-background/75 hover:border-aethex-400/60 transition"
+                          >
+                            <CardHeader className="space-y-3">
+                              <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
+                                <Icon className="h-4 w-4 text-aethex-300" />
+                                {program.title}
+                              </div>
+                              <CardDescription>
+                                {program.description}
+                              </CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-3">
+                              <ul className="space-y-2 text-xs text-muted-foreground">
+                                {program.perks.map((perk) => (
+                                  <li
+                                    key={perk}
+                                    className="flex items-start gap-2"
+                                  >
+                                    <ArrowRight className="mt-0.5 h-3 w-3 text-aethex-400" />
+                                    <span>{perk}</span>
+                                  </li>
+                                ))}
+                              </ul>
+                              <Button
+                                asChild
+                                variant="outline"
+                                size="sm"
+                                className="w-fit"
+                              >
+                                <Link to={program.href}>
+                                  {program.ctaLabel}
+                                </Link>
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "features" && (
+              <TabsContent value="features" className="mt-0">
+                {/* Community Features */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Community Features"
+                      title="Form squads and celebrate your setup"
+                      description="Tools that make it easy to find teammates and showcase the spaces where you build."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-2">
+                      {socialFeatures.map((feature) => {
+                        const Icon = feature.icon;
+                        return (
+                          <Card
+                            key={feature.id}
+                            className="border-border/50 bg-background/80 hover:border-aethex-400/50 transition"
+                          >
+                            <CardHeader className="space-y-3">
+                              <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
+                                <Icon className="h-4 w-4 text-aethex-300" />
+                                {feature.title}
+                              </div>
+                              <CardDescription>
+                                {feature.description}
+                              </CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-3">
+                              <ul className="space-y-2 text-xs text-muted-foreground">
+                                {feature.bullets.map((bullet) => (
+                                  <li
+                                    key={bullet}
+                                    className="flex items-start gap-2"
+                                  >
+                                    <ArrowRight className="mt-0.5 h-3 w-3 text-aethex-400" />
+                                    <span>{bullet}</span>
+                                  </li>
+                                ))}
+                              </ul>
+                              <Button
+                                asChild
+                                variant="outline"
+                                size="sm"
+                                className="w-fit"
+                              >
+                                <Link to={feature.href}>Explore</Link>
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "stats" && (
+              <TabsContent value="stats" className="mt-0">
+                {/* Community Stats */}
+                <section className="py-16 bg-background/30">
+                  <div className="container mx-auto px-4">
+                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 max-w-4xl mx-auto">
+                      {stats.map((stat, index) => {
+                        const Icon = stat.icon;
                         return (
                           <div
-                            key={track.id}
-                            className="rounded-xl border border-border/50 bg-background/70 p-5 hover:border-aethex-400/50 transition"
+                            key={stat.label}
+                            className="text-center space-y-3 animate-scale-in"
+                            style={{ animationDelay: `${index * 0.1}s` }}
                           >
-                            <div className="flex items-start gap-3">
-                              <div className="mt-1 flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
-                                <Icon className="h-5 w-5" />
+                            <div className="flex justify-center">
+                              <div className="p-3 rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20">
+                                <Icon className="h-6 w-6 text-aethex-400" />
                               </div>
-                              <div className="space-y-1">
-                                <p className="text-lg font-semibold text-foreground">
-                                  {track.title}
-                                </p>
-                                <p className="text-sm text-muted-foreground">
-                                  {track.description}
-                                </p>
-                                <p className="text-xs uppercase tracking-wide text-muted-foreground">
-                                  {track.mentors} mentors available
-                                </p>
+                            </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>
                           </div>
                         );
                       })}
                     </div>
                   </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
+                </section>
+              </TabsContent>
+            )}
 
-          {activeTab === "case-studies" && (
-            <TabsContent value="case-studies" className="mt-0">
-              {/* Case Studies */}
-              <section className="py-20">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Case Studies"
-                    title="See how teams scale with AeThex"
-                    description="Deep dives into projects that leveraged the community for momentum, funding, and retention."
-                    align="left"
-                  />
-                  <div className="grid gap-6 md:grid-cols-3">
-                    {caseStudyHighlights.map((study) => {
-                      const Icon = study.icon;
-                      return (
-                        <Card
-                          key={study.id}
-                          className="relative overflow-hidden border-border/60 bg-background/80 backdrop-blur-xl"
-                        >
-                          <div className="absolute inset-0 bg-gradient-to-br from-aethex-500/10 via-transparent to-neon-blue/10" />
-                          <CardHeader className="relative space-y-3">
-                            <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                              <Icon className="h-5 w-5 text-aethex-300" />
-                              {study.metricLabel}
+            {activeTab === "platforms" && (
+              <TabsContent value="platforms" className="mt-0">
+                {/* Community Platforms */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <div className="text-center mb-16 animate-slide-up">
+                      <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
+                        Connect on Your Favorite Platform
+                      </h2>
+                      <p className="text-lg text-muted-foreground">
+                        Multiple ways to engage with the AeThex community
+                      </p>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
+                      {platforms.map((platform, index) => {
+                        const Icon = platform.icon;
+                        return (
+                          <Card
+                            key={platform.name}
+                            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`}
+                              >
+                                <Icon className="h-8 w-8 text-white" />
+                              </div>
+                              <CardTitle className="text-xl">
+                                {platform.name}
+                              </CardTitle>
+                              <CardDescription>
+                                {platform.description}
+                              </CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                              <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>
+                                </div>
+                                <div className="flex justify-between">
+                                  <span>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
+                                  <ArrowRight className="h-4 w-4 ml-2" />
+                                </Link>
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "devconnect" && (
+              <TabsContent value="devconnect" className="mt-0">
+                {/* DevConnect Spotlight */}
+                <section className="relative py-20 overflow-hidden">
+                  <div className="absolute inset-0 bg-gradient-to-r from-aethex-900/40 via-transparent to-neon-blue/30" />
+                  <div className="container mx-auto px-4 relative z-10">
+                    <div className="max-w-5xl mx-auto grid lg:grid-cols-[2fr_3fr] gap-10 items-center">
+                      <div className="space-y-6 animate-slide-left">
+                        <Badge className="bg-gradient-to-r from-aethex-500 to-neon-blue w-fit">
+                          New Platform
+                        </Badge>
+                        <h2 className="text-3xl lg:text-4xl font-bold text-gradient">
+                          Introducing DevConnect
+                        </h2>
+                        <p className="text-lg text-muted-foreground">
+                          DevConnect is our dedicated hub for platform teams
+                          building the next wave of AeThex experiences. Launch
+                          collabs, monitor live services, and activate the
+                          Studio network — all from one command center.
+                        </p>
+                        <div className="flex flex-col sm:flex-row gap-4">
+                          <Button
+                            asChild
+                            size="lg"
+                            className="bg-gradient-to-r from-neon-blue to-aethex-500 hover:from-neon-blue/90 hover:to-aethex-500/90 glow-blue hover-lift"
+                          >
+                            <a
+                              href="https://devconnect.sbs"
+                              target="_blank"
+                              rel="noreferrer"
+                              className="flex items-center space-x-2"
+                            >
+                              <span>Launch DevConnect</span>
+                              <ArrowRight className="h-5 w-5" />
+                            </a>
+                          </Button>
+                          <Button
+                            asChild
+                            variant="outline"
+                            size="lg"
+                            className="border-border/60"
+                          >
+                            <Link to="/contact">Talk with AeThex Team</Link>
+                          </Button>
+                        </div>
+                      </div>
+                      <Card className="border-border/40 bg-background/80 backdrop-blur-xl shadow-lg shadow-aethex-500/10 animate-slide-right">
+                        <CardContent className="p-8 space-y-6">
+                          <div className="grid gap-4">
+                            {devConnectHighlights.map((highlight, index) => {
+                              const Icon = highlight.icon;
+                              return (
+                                <div
+                                  key={highlight.title}
+                                  className="flex items-start gap-4 p-4 rounded-xl border border-border/40 bg-background/60"
+                                >
+                                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 text-aethex-300">
+                                    <Icon className="h-5 w-5" />
+                                  </div>
+                                  <div className="space-y-1">
+                                    <h3 className="font-semibold text-foreground">
+                                      {highlight.title}
+                                    </h3>
+                                    <p className="text-sm text-muted-foreground">
+                                      {highlight.description}
+                                    </p>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                          <div className="rounded-lg border border-aethex-400/40 bg-gradient-to-r from-aethex-500/10 to-neon-blue/10 p-4 text-sm text-muted-foreground">
+                            DevConnect syncs directly with AeThex developer
+                            profiles, so your activity, streaks, and
+                            achievements follow you across every build.
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "forums" && (
+              <TabsContent value="forums" className="mt-0">
+                {/* Forums & Discussion */}
+                <section className="py-20 bg-background/30">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Forums & Discussions"
+                      title="Deep-dive with peers in dedicated boards"
+                      description="Launch structured conversations for strategy, support, and storytelling."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-3">
+                      {forumSpaces.map((space, index) => {
+                        const Icon = space.icon;
+                        return (
+                          <Card
+                            key={space.id}
+                            className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift"
+                            style={{ animationDelay: `${index * 0.1}s` }}
+                          >
+                            <CardHeader className="space-y-4">
+                              <div className="flex items-start justify-between gap-4">
+                                <div className="flex items-start gap-3">
+                                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
+                                    <Icon className="h-5 w-5" />
+                                  </div>
+                                  <div>
+                                    <CardTitle className="text-lg">
+                                      {space.name}
+                                    </CardTitle>
+                                    <CardDescription>
+                                      {space.description}
+                                    </CardDescription>
+                                  </div>
+                                </div>
+                                <Badge
+                                  variant="outline"
+                                  className="border-border/50"
+                                >
+                                  {space.threads} threads
+                                </Badge>
+                              </div>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                              <div className="flex items-center justify-between text-xs text-muted-foreground uppercase tracking-wide">
+                                <span>{space.activeToday} active today</span>
+                                <span className="flex items-center gap-2">
+                                  <MessageCircle className="h-3.5 w-3.5" />{" "}
+                                  Latest
+                                </span>
+                              </div>
+                              <div className="rounded-lg border border-border/40 bg-background/80 p-4">
+                                <p className="text-sm font-medium text-foreground">
+                                  {space.latestThread.title}
+                                </p>
+                                <p className="text-xs text-muted-foreground">
+                                  by {space.latestThread.author} •{" "}
+                                  {space.latestThread.timeAgo}
+                                </p>
+                              </div>
+                              <Button
+                                asChild
+                                variant="ghost"
+                                className="w-full justify-between text-sm"
+                              >
+                                <Link to={`/forums/${space.id}`}>
+                                  Enter space
+                                  <ArrowRight className="h-4 w-4" />
+                                </Link>
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "feedback" && (
+              <TabsContent value="feedback" className="mt-0">
+                {/* Feedback & Roadmap */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Feedback & Roadmap"
+                      title="Collect insights and close the loop with players"
+                      description="Organise bug reports, balance discussions, and feature ideas in a transparent queue."
+                      align="left"
+                    />
+                    <div className="grid gap-8 lg:grid-cols-[2fr_3fr]">
+                      <div className="space-y-6">
+                        {feedbackChannels.map((channel) => {
+                          const Icon = channel.icon;
+                          return (
+                            <Card
+                              key={channel.id}
+                              className="border-border/50 bg-background/80 backdrop-blur"
+                            >
+                              <CardHeader className="space-y-3">
+                                <div className="flex items-start justify-between gap-4">
+                                  <div className="flex items-center gap-3">
+                                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
+                                      <Icon className="h-5 w-5" />
+                                    </div>
+                                    <div>
+                                      <CardTitle className="text-lg">
+                                        {channel.title}
+                                      </CardTitle>
+                                      <CardDescription>
+                                        {channel.description}
+                                      </CardDescription>
+                                    </div>
+                                  </div>
+                                  <Badge
+                                    variant="outline"
+                                    className="border-aethex-400/40 text-aethex-200"
+                                  >
+                                    {channel.submissionsThisWeek} this week
+                                  </Badge>
+                                </div>
+                                <p className="text-xs text-muted-foreground uppercase tracking-wide">
+                                  Stewarded by {channel.owner}
+                                </p>
+                              </CardHeader>
+                              <CardContent className="space-y-3">
+                                <div className="flex flex-wrap gap-2">
+                                  {channel.statuses.map((status) => (
+                                    <Badge
+                                      key={status.label}
+                                      className={cn(
+                                        "text-xs",
+                                        feedbackToneStyles[status.tone],
+                                      )}
+                                    >
+                                      {status.label}: {status.count}
+                                    </Badge>
+                                  ))}
+                                </div>
+                                <Button
+                                  asChild
+                                  variant="ghost"
+                                  className="w-full justify-between text-sm"
+                                >
+                                  <Link to="/feedback">
+                                    Submit feedback
+                                    <ArrowRight className="h-4 w-4" />
+                                  </Link>
+                                </Button>
+                              </CardContent>
+                            </Card>
+                          );
+                        })}
+                      </div>
+                      <Card className="border-border/50 bg-background/80 backdrop-blur">
+                        <CardHeader>
+                          <CardTitle>Live roadmap snapshot</CardTitle>
+                          <CardDescription>
+                            Track what the team is shipping next based on player
+                            momentum.
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                          {roadmapSnapshot.map((item) => (
+                            <div
+                              key={item.id}
+                              className="flex flex-col gap-2 rounded-lg border border-border/40 bg-background/80 p-4 sm:flex-row sm:items-center sm:justify-between"
+                            >
+                              <div>
+                                <p className="font-medium text-foreground">
+                                  {item.title}
+                                </p>
+                                <p className="text-xs text-muted-foreground">
+                                  {item.eta}
+                                </p>
+                              </div>
+                              <Badge
+                                className={feedbackToneStyles[item.statusTone]}
+                              >
+                                {item.status}
+                              </Badge>
                             </div>
-                            <CardTitle className="text-2xl text-foreground">
-                              {study.title}
-                            </CardTitle>
-                            <p className="text-sm font-semibold text-aethex-300">
-                              {study.metricValue}
-                            </p>
-                          </CardHeader>
-                          <CardContent className="relative space-y-4">
-                            <p className="text-sm text-muted-foreground leading-relaxed">
-                              {study.summary}
+                          ))}
+                          <Button
+                            asChild
+                            variant="outline"
+                            className="w-full border-aethex-400/40"
+                          >
+                            <Link to="/roadmap">Open public roadmap</Link>
+                          </Button>
+                        </CardContent>
+                      </Card>
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "polls" && (
+              <TabsContent value="polls" className="mt-0">
+                {/* Community Polls */}
+                <section className="py-20 bg-background/30">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Community Polls"
+                      title="Let players steer the next big moves"
+                      description="Run lightweight polls to validate cosmetics, roadmap priorities, and upcoming events."
+                      align="center"
+                    />
+                    <div className="grid gap-6 md:grid-cols-2 max-w-5xl mx-auto">
+                      {polls.map((poll) => (
+                        <PollCard
+                          key={poll.id}
+                          poll={poll}
+                          selectedOption={pollSelections[poll.id]}
+                          onSelect={(optionId) =>
+                            handlePollVote(poll.id, optionId)
+                          }
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "collaboration" && (
+              <TabsContent value="collaboration" className="mt-0">
+                {/* Real-time Collaboration */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Real-time Collaboration"
+                      title="Integrated chat with Discord-style presence"
+                      description="Spin up voice, text, and co-working rooms that bridge seamlessly with our forums and developer hubs."
+                      align="left"
+                    />
+                    <div className="grid gap-8 lg:grid-cols-[3fr_2fr]">
+                      <Card className="border-border/50 bg-background/80 backdrop-blur">
+                        <CardHeader>
+                          <CardTitle>Active channels</CardTitle>
+                          <CardDescription>
+                            See who’s online and jump into the conversations
+                            that matter right now.
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                          {chatChannels.map((channel) => {
+                            const Icon = channel.icon;
+                            return (
+                              <div
+                                key={channel.id}
+                                className="rounded-lg border border-border/40 bg-background/80 p-4 space-y-3"
+                              >
+                                <div className="flex items-start justify-between gap-3">
+                                  <div className="flex items-start gap-3">
+                                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
+                                      <Icon className="h-5 w-5" />
+                                    </div>
+                                    <div>
+                                      <p className="font-medium text-foreground">
+                                        {channel.name}
+                                      </p>
+                                      <p className="text-sm text-muted-foreground">
+                                        {channel.description}
+                                      </p>
+                                    </div>
+                                  </div>
+                                  <Badge
+                                    variant="outline"
+                                    className="border-aethex-400/40 text-aethex-200"
+                                  >
+                                    {channel.participants} members
+                                  </Badge>
+                                </div>
+                                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                                  <span>Synced with Discord</span>
+                                  <span className="flex items-center gap-1 text-emerald-200">
+                                    <Sparkles className="h-3 w-3" />{" "}
+                                    {channel.activeNow} live now
+                                  </span>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </CardContent>
+                      </Card>
+                      <Card className="border-border/50 bg-background/80 backdrop-blur">
+                        <CardHeader>
+                          <CardTitle>
+                            Why players love integrated chat
+                          </CardTitle>
+                          <CardDescription>
+                            Keep every squad aligned across devices with
+                            presence, threads, and recordings.
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                          <ul className="space-y-3 text-sm text-muted-foreground">
+                            {chatFeatures.map((feature) => (
+                              <li
+                                key={feature}
+                                className="flex items-start gap-3"
+                              >
+                                <CheckCircle className="mt-0.5 h-4 w-4 text-aethex-400" />
+                                <span>{feature}</span>
+                              </li>
+                            ))}
+                          </ul>
+                          <Button asChild className="w-full">
+                            <Link to="/chat">Launch real-time hub</Link>
+                          </Button>
+                        </CardContent>
+                      </Card>
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "events" && (
+              <TabsContent value="events" className="mt-0">
+                {/* Upcoming Events */}
+                <section className="py-20 bg-background/30">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Events"
+                      title="Upcoming events"
+                      description="Join our community events and level up your skills."
+                      align="center"
+                    />
+                    <div className="max-w-4xl mx-auto space-y-6">
+                      {events.map((event, index) => (
+                        <EventCard
+                          key={event.id}
+                          event={event}
+                          animationDelay={index * 0.12}
+                          isRegistered={Boolean(registeredEvents[event.id])}
+                          registrant={registeredEvents[event.id]}
+                          onRegister={(payload) =>
+                            handleEventRegistration(event, payload)
+                          }
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "profiles" && (
+              <TabsContent value="profiles" className="mt-0">
+                {/* Developer Profile Highlights */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Developer Profiles"
+                      title="Showcase your journey across AeThex"
+                      description="Developer profiles blend achievements, portfolio pieces, and social proof so collaborators can find you fast."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-3">
+                      {profileHighlights.map((highlight) => {
+                        const Icon = highlight.icon;
+                        return (
+                          <Card
+                            key={highlight.id}
+                            className="border-border/50 bg-background/80 backdrop-blur"
+                          >
+                            <CardHeader className="space-y-3">
+                              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
+                                <Icon className="h-6 w-6" />
+                              </div>
+                              <CardTitle className="text-lg">
+                                {highlight.title}
+                              </CardTitle>
+                              <CardDescription>
+                                {highlight.description}
+                              </CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                              <div className="rounded-lg border border-border/40 bg-background/80 p-4">
+                                <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                                  {highlight.metricLabel}
+                                </p>
+                                <p className="text-2xl font-semibold text-gradient-purple">
+                                  {highlight.metricValue}
+                                </p>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "featured" && (
+              <TabsContent value="featured" className="mt-0">
+                {/* Featured Developers */}
+                <section
+                  id="featured-developers"
+                  className="py-20 bg-background/30"
+                >
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Community Leaders"
+                      title="Featured developers"
+                      description="Highlighting builders who mentor others, ship mods, and level up the entire network."
+                      align="center"
+                    />
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
+                      {contributors.map((contributor, index) => (
+                        <Card
+                          key={contributor.name}
+                          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 space-y-4 text-center">
+                            <img
+                              src={contributor.avatar}
+                              alt={contributor.name}
+                              className="w-20 h-20 rounded-full mx-auto ring-4 ring-aethex-400/20"
+                            />
+                            <div className="space-y-1">
+                              <h3 className="font-semibold text-lg text-gradient">
+                                {contributor.name}
+                              </h3>
+                              <p className="text-sm text-muted-foreground">
+                                {contributor.title}
+                              </p>
+                            </div>
+                            <Badge variant="outline" className="mx-auto">
+                              {contributor.speciality}
+                            </Badge>
+                            <p className="text-sm text-muted-foreground text-left">
+                              {contributor.bio}
                             </p>
+                            <div className="rounded-lg border border-border/40 bg-background/80 p-4 space-y-2 text-left">
+                              <p className="text-sm font-medium text-foreground">
+                                {contributor.recentContribution}
+                              </p>
+                              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                                <span>{contributor.reputation}</span>
+                                <span>
+                                  {contributor.contributions} contributions
+                                </span>
+                              </div>
+                            </div>
+                            <Badge className="bg-aethex-500/10 text-aethex-200 border border-aethex-400/40">
+                              {contributor.badge}
+                            </Badge>
                             <Button
                               asChild
                               variant="outline"
-                              size="sm"
-                              className="w-fit"
+                              className="w-full border-aethex-400/40"
                             >
-                              <Link to={`/community/case-studies/${study.id}`}>
-                                Read full story
+                              <Link to={contributor.profileUrl}>
+                                View passport
                               </Link>
                             </Button>
                           </CardContent>
                         </Card>
-                      );
-                    })}
+                      ))}
+                    </div>
                   </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
+                </section>
+                <section id="featured-studios" className="py-16">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Studios"
+                      title="Featured studios"
+                      description="Studios building with AeThex across games and real-time apps."
+                      align="center"
+                    />
+                    <FeaturedStudiosGrid />
+                  </div>
+                </section>
+              </TabsContent>
+            )}
 
-          {activeTab === "leaderboards" && (
-            <TabsContent value="leaderboards" className="mt-0">
-              {/* Leaderboards */}
-              <section className="py-20 bg-background/30">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Gamification"
-                    title="Celebrate contributions across the network"
-                    description="Track streaks, highlight achievements, and fuel friendly competition among builders."
-                    align="left"
-                  />
-                  <div className="grid gap-6 md:grid-cols-3">
-                    {leaderboardCategories.map((category) => {
-                      const Icon = category.icon;
-                      return (
-                        <Card
-                          key={category.id}
-                          className="border border-border/50 bg-background/70 shadow-sm hover:border-aethex-400/50 transition"
-                        >
-                          <CardHeader className="space-y-3">
-                            <div className="flex items-center justify-between text-sm uppercase tracking-wide text-muted-foreground">
-                              <span className="flex items-center gap-2">
-                                <Icon className="h-4 w-4 text-aethex-300" />
-                                {category.title}
-                              </span>
-                              <Badge
-                                variant="outline"
-                                className="border-border/50"
+            {activeTab === "workshop" && (
+              <TabsContent value="workshop" className="mt-0">
+                {/* Workshop & Mod Support */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Workshop & Mods"
+                      title="Build, share, and iterate with the community workshop"
+                      description="Mods, templates, and toolkits come with analytics so teams can iterate quickly."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-3">
+                      {workshopItems.map((item) => {
+                        const Icon = item.icon;
+                        return (
+                          <Card
+                            key={item.id}
+                            className="border-border/50 bg-background/80 backdrop-blur"
+                          >
+                            <CardHeader className="space-y-3">
+                              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
+                                <Icon className="h-6 w-6" />
+                              </div>
+                              <CardTitle className="text-lg">
+                                {item.title}
+                              </CardTitle>
+                              <CardDescription>
+                                {item.description}
+                              </CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-3">
+                              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                                <span>Downloads</span>
+                                <span className="font-semibold text-aethex-200">
+                                  {item.downloads.toLocaleString()}
+                                </span>
+                              </div>
+                              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                                <span>Rating</span>
+                                <span className="font-semibold text-aethex-200">
+                                  {item.rating.toFixed(1)}
+                                </span>
+                              </div>
+                              <p className="text-xs text-muted-foreground">
+                                Created by {item.author}
+                              </p>
+                              <Button
+                                asChild
+                                variant="ghost"
+                                className="w-full justify-between text-sm"
                               >
-                                Updated daily
-                              </Badge>
-                            </div>
-                            <CardDescription>
-                              {category.description}
-                            </CardDescription>
-                          </CardHeader>
-                          <CardContent className="space-y-2">
-                            <ol className="space-y-1 text-sm">
-                              {category.leaders.map((leader, index) => (
-                                <li
-                                  key={leader}
-                                  className="flex items-center gap-2"
-                                >
-                                  <span className="text-muted-foreground">
-                                    #{index + 1}
-                                  </span>
-                                  <span className="font-medium text-foreground">
-                                    {leader}
-                                  </span>
-                                </li>
-                              ))}
-                            </ol>
-                          </CardContent>
-                        </Card>
-                      );
-                    })}
+                                <Link to={`/workshop/${item.id}`}>
+                                  View asset
+                                  <ArrowRight className="h-4 w-4" />
+                                </Link>
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
                   </div>
-                  <div className="mt-8 text-left">
-                    <Button
-                      asChild
-                      variant="outline"
-                      className="border-border/60"
-                    >
-                      <Link to="/community/leaderboards">
-                        View full leaderboards
-                      </Link>
-                    </Button>
-                  </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
+                </section>
+              </TabsContent>
+            )}
 
-          {activeTab === "newsletter" && (
-            <TabsContent value="newsletter" className="mt-0">
-              {/* Community Newsletter */}
-              <section className="py-20">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Community Briefing"
-                    title="Get the top discussions in your inbox"
-                    description="Stay ahead with weekly highlights, upcoming events, and featured creators curated by the AeThex team."
-                    align="left"
-                  />
-                  <Card className="border-border/60 bg-background/80 max-w-3xl">
-                    <CardContent className="space-y-4 p-6 lg:p-8">
-                      <div className="flex flex-col gap-3 text-sm text-muted-foreground">
-                        <div className="flex items-center gap-2 text-xs uppercase tracking-wide">
-                          <Mail className="h-4 w-4 text-aethex-300" />
-                          Weekly digest
-                        </div>
-                        <p>
-                          Each Monday we share major updates, spotlight
-                          champions, and surface new opportunities—no noise,
-                          just impact.
-                        </p>
-                      </div>
-                      <form
-                        onSubmit={handleNewsletterSignup}
-                        className="flex flex-col gap-3 sm:flex-row"
-                      >
-                        <Input
-                          type="email"
-                          required
-                          value={newsletterEmail}
-                          onChange={(event) =>
-                            setNewsletterEmail(event.target.value)
-                          }
-                          placeholder="you@example.com"
-                          className="bg-background/60 border-border/60"
-                          aria-label="Email address"
-                        />
-                        <Button type="submit" className="sm:w-auto">
-                          Subscribe
-                        </Button>
-                      </form>
-                      <p className="text-xs text-muted-foreground">
-                        We respect your time—unsubscribe anytime with a single
-                        click.
-                      </p>
-                    </CardContent>
-                  </Card>
-                </div>
-              </section>
-            </TabsContent>
-          )}
-
-          {activeTab === "growth" && (
-            <TabsContent value="growth" className="mt-0">
-              {/* Professional Growth & Fun */}
-              <section className="py-20 bg-background/20">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Professional Growth & Fun"
-                    title="Discover new opportunities and show your AeThex pride"
-                    description="Connect with studios, earn bounties, and rock exclusive merch designed by the community."
-                    align="left"
-                  />
-                  <div className="grid gap-6 md:grid-cols-2">
-                    {opportunityHighlights.map((item) => {
-                      const Icon = item.icon;
-                      return (
+            {activeTab === "media" && (
+              <TabsContent value="media" className="mt-0">
+                {/* Media Galleries */}
+                <section className="py-20 bg-background/30">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Media Galleries"
+                      title="Show off your best captures and recaps"
+                      description="Screenshots, artwork, and videos are curated into themed galleries to inspire the community."
+                      align="left"
+                    />
+                    <div className="grid gap-6 md:grid-cols-3">
+                      {mediaGallery.map((item) => (
                         <Card
                           key={item.id}
-                          className="border-border/50 bg-background/75 transition hover:-translate-y-1 hover:border-aethex-400/50"
+                          className="border-border/40 bg-background/80 backdrop-blur overflow-hidden"
                         >
-                          <CardHeader className="space-y-3">
-                            <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                              <Icon className="h-4 w-4 text-aethex-300" />
-                              {item.title}
+                          <div className="relative">
+                            <img
+                              src={item.thumbnail}
+                              alt={item.title}
+                              className="h-48 w-full object-cover"
+                              loading="lazy"
+                            />
+                            <Badge className="absolute left-4 top-4 bg-background/80 backdrop-blur border-border/60">
+                              {item.type}
+                            </Badge>
+                          </div>
+                          <CardContent className="space-y-3 p-5">
+                            <div className="space-y-1">
+                              <h3 className="font-semibold text-foreground">
+                                {item.title}
+                              </h3>
+                              <p className="text-sm text-muted-foreground">
+                                by {item.author}
+                              </p>
                             </div>
-                            <CardDescription>
-                              {item.description}
-                            </CardDescription>
-                          </CardHeader>
-                          <CardContent className="space-y-4">
-                            <div className="grid gap-3 sm:grid-cols-2">
-                              {item.metrics.map((metric) => (
+                            <div className="flex items-center justify-between text-sm text-muted-foreground">
+                              <span className="flex items-center gap-2">
+                                <Heart className="h-4 w-4 text-aethex-400" />
+                                {item.likes}
+                              </span>
+                              <Button
+                                asChild
+                                variant="ghost"
+                                className="px-0 text-sm"
+                              >
+                                <Link to={`/gallery/${item.id}`}>
+                                  Open gallery
+                                </Link>
+                              </Button>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      ))}
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "spotlight" && (
+              <TabsContent value="spotlight" className="mt-0">
+                {/* Creator Spotlight */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Creator Spotlight"
+                      title="Recognising standout community creators"
+                      description="Spotlight creators whose mods, art, and systems elevate the AeThex ecosystem."
+                      align="center"
+                    />
+                    <div className="grid gap-6 lg:grid-cols-2 max-w-6xl mx-auto">
+                      {spotlightCreators.map((creator) => (
+                        <Card
+                          key={creator.id}
+                          className="border-border/50 bg-background/80 backdrop-blur"
+                        >
+                          <CardContent className="p-6 space-y-5">
+                            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                              <div className="flex items-center gap-3">
+                                <img
+                                  src={creator.avatar}
+                                  alt={creator.name}
+                                  className="h-14 w-14 rounded-full ring-4 ring-aethex-400/20"
+                                />
+                                <div>
+                                  <p className="text-lg font-semibold text-gradient">
+                                    {creator.name}
+                                  </p>
+                                  <p className="text-sm text-muted-foreground">
+                                    {creator.role}
+                                  </p>
+                                </div>
+                              </div>
+                              <Badge className="bg-aethex-500/10 border-aethex-400/40 text-aethex-200">
+                                Featured creator
+                              </Badge>
+                            </div>
+                            <p className="text-sm text-muted-foreground leading-relaxed">
+                              {creator.highlight}
+                            </p>
+                            <div className="grid grid-cols-3 gap-3">
+                              {creator.metrics.map((metric) => (
                                 <div
-                                  key={metric.label}
-                                  className="rounded-lg border border-border/40 bg-background/60 p-3 text-sm"
+                                  key={`${creator.id}-${metric.label}`}
+                                  className="rounded-lg border border-border/40 bg-background/80 p-3 text-center"
                                 >
-                                  <p className="text-muted-foreground">
+                                  <p className="text-xs text-muted-foreground uppercase tracking-wide">
                                     {metric.label}
                                   </p>
-                                  <p className="text-xl font-semibold text-foreground">
+                                  <p className="text-lg font-semibold text-foreground">
                                     {metric.value}
                                   </p>
                                 </div>
                               ))}
                             </div>
-                            <Button asChild variant="outline" className="w-fit">
-                              <Link to={item.href}>{item.ctaLabel}</Link>
-                            </Button>
-                          </CardContent>
-                        </Card>
-                      );
-                    })}
-                  </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
-
-          {activeTab === "activities" && (
-            <TabsContent value="activities" className="mt-0">
-              {/* Content & Activities */}
-              <section className="py-20">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Content & Activities"
-                    title="Create, compete, and build the universe together"
-                    description="From lore summits to fan-art showcases, the community drives the culture forward."
-                    align="left"
-                  />
-                  <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
-                    {creativeActivities.map((activity) => {
-                      const Icon = activity.icon;
-                      return (
-                        <Card
-                          key={activity.id}
-                          className="border-border/50 bg-background/75 hover:border-aethex-400/50 transition"
-                        >
-                          <CardHeader className="space-y-3">
-                            <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                              <Icon className="h-4 w-4 text-aethex-300" />
-                              {activity.title}
-                            </div>
-                            <CardDescription>
-                              {activity.description}
-                            </CardDescription>
-                          </CardHeader>
-                          <CardContent className="space-y-3">
-                            <ul className="space-y-2 text-xs text-muted-foreground">
-                              {activity.highlights.map((highlight) => (
-                                <li
-                                  key={highlight}
-                                  className="flex items-start gap-2"
-                                >
-                                  <ArrowRight className="mt-0.5 h-3 w-3 text-aethex-400" />
-                                  <span>{highlight}</span>
-                                </li>
-                              ))}
-                            </ul>
-                            <Button
-                              asChild
-                              variant="outline"
-                              size="sm"
-                              className="w-fit"
-                            >
-                              <Link to={activity.href}>Join in</Link>
-                            </Button>
-                          </CardContent>
-                        </Card>
-                      );
-                    })}
-                  </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
-
-          {activeTab === "recognition" && (
-            <TabsContent value="recognition" className="mt-0">
-              {/* Recognition & Roles */}
-              <section className="py-20 bg-background/30">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Recognition & Roles"
-                    title="Support champions powering the community"
-                    description="Formal programs that reward ambassadors, creators, and playtest squads for their impact."
-                    align="left"
-                  />
-                  <div className="grid gap-6 md:grid-cols-3">
-                    {recognitionPrograms.map((program) => {
-                      const Icon = program.icon;
-                      return (
-                        <Card
-                          key={program.id}
-                          className="border-border/50 bg-background/75 hover:border-aethex-400/60 transition"
-                        >
-                          <CardHeader className="space-y-3">
-                            <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                              <Icon className="h-4 w-4 text-aethex-300" />
-                              {program.title}
-                            </div>
-                            <CardDescription>
-                              {program.description}
-                            </CardDescription>
-                          </CardHeader>
-                          <CardContent className="space-y-3">
-                            <ul className="space-y-2 text-xs text-muted-foreground">
-                              {program.perks.map((perk) => (
-                                <li
-                                  key={perk}
-                                  className="flex items-start gap-2"
-                                >
-                                  <ArrowRight className="mt-0.5 h-3 w-3 text-aethex-400" />
-                                  <span>{perk}</span>
-                                </li>
-                              ))}
-                            </ul>
-                            <Button
-                              asChild
-                              variant="outline"
-                              size="sm"
-                              className="w-fit"
-                            >
-                              <Link to={program.href}>{program.ctaLabel}</Link>
-                            </Button>
-                          </CardContent>
-                        </Card>
-                      );
-                    })}
-                  </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
-
-          {activeTab === "features" && (
-            <TabsContent value="features" className="mt-0">
-              {/* Community Features */}
-              <section className="py-20">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Community Features"
-                    title="Form squads and celebrate your setup"
-                    description="Tools that make it easy to find teammates and showcase the spaces where you build."
-                    align="left"
-                  />
-                  <div className="grid gap-6 md:grid-cols-2">
-                    {socialFeatures.map((feature) => {
-                      const Icon = feature.icon;
-                      return (
-                        <Card
-                          key={feature.id}
-                          className="border-border/50 bg-background/80 hover:border-aethex-400/50 transition"
-                        >
-                          <CardHeader className="space-y-3">
-                            <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground">
-                              <Icon className="h-4 w-4 text-aethex-300" />
-                              {feature.title}
-                            </div>
-                            <CardDescription>
-                              {feature.description}
-                            </CardDescription>
-                          </CardHeader>
-                          <CardContent className="space-y-3">
-                            <ul className="space-y-2 text-xs text-muted-foreground">
-                              {feature.bullets.map((bullet) => (
-                                <li
-                                  key={bullet}
-                                  className="flex items-start gap-2"
-                                >
-                                  <ArrowRight className="mt-0.5 h-3 w-3 text-aethex-400" />
-                                  <span>{bullet}</span>
-                                </li>
-                              ))}
-                            </ul>
-                            <Button
-                              asChild
-                              variant="outline"
-                              size="sm"
-                              className="w-fit"
-                            >
-                              <Link to={feature.href}>Explore</Link>
-                            </Button>
-                          </CardContent>
-                        </Card>
-                      );
-                    })}
-                  </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
-
-          {activeTab === "stats" && (
-            <TabsContent value="stats" className="mt-0">
-              {/* Community Stats */}
-              <section className="py-16 bg-background/30">
-                <div className="container mx-auto px-4">
-                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 max-w-4xl mx-auto">
-                    {stats.map((stat, index) => {
-                      const Icon = stat.icon;
-                      return (
-                        <div
-                          key={stat.label}
-                          className="text-center space-y-3 animate-scale-in"
-                          style={{ animationDelay: `${index * 0.1}s` }}
-                        >
-                          <div className="flex justify-center">
-                            <div className="p-3 rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20">
-                              <Icon className="h-6 w-6 text-aethex-400" />
-                            </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>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
-
-          {activeTab === "platforms" && (
-            <TabsContent value="platforms" className="mt-0">
-              {/* Community Platforms */}
-              <section className="py-20">
-                <div className="container mx-auto px-4">
-                  <div className="text-center mb-16 animate-slide-up">
-                    <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
-                      Connect on Your Favorite Platform
-                    </h2>
-                    <p className="text-lg text-muted-foreground">
-                      Multiple ways to engage with the AeThex community
-                    </p>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
-                    {platforms.map((platform, index) => {
-                      const Icon = platform.icon;
-                      return (
-                        <Card
-                          key={platform.name}
-                          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`}
-                            >
-                              <Icon className="h-8 w-8 text-white" />
-                            </div>
-                            <CardTitle className="text-xl">
-                              {platform.name}
-                            </CardTitle>
-                            <CardDescription>
-                              {platform.description}
-                            </CardDescription>
-                          </CardHeader>
-                          <CardContent className="space-y-4">
-                            <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>
-                              </div>
-                              <div className="flex justify-between">
-                                <span>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
-                                <ArrowRight className="h-4 w-4 ml-2" />
+                              <Link to={creator.link}>
+                                View creator profile
                               </Link>
                             </Button>
                           </CardContent>
                         </Card>
-                      );
-                    })}
+                      ))}
+                    </div>
                   </div>
-                </div>
-              </section>
-            </TabsContent>
-          )}
+                </section>
+              </TabsContent>
+            )}
 
-          {activeTab === "devconnect" && (
-            <TabsContent value="devconnect" className="mt-0">
+            {activeTab === "governance" && (
+              <TabsContent value="governance" className="mt-0">
+                {/* Community Governance */}
+                <section className="py-20 bg-background/30">
+                  <div className="container mx-auto px-4">
+                    <SectionHeader
+                      badge="Community Governance"
+                      title="Clear guidelines, empowered moderators"
+                      description="We invest in tools and processes so every player feels safe, heard, and respected."
+                      align="left"
+                    />
+                    <div className="grid gap-8 lg:grid-cols-[2fr_3fr]">
+                      <Card className="border-border/50 bg-background/80 backdrop-blur">
+                        <CardHeader className="flex items-start justify-between gap-4">
+                          <div>
+                            <CardTitle>Community guidelines</CardTitle>
+                            <CardDescription>
+                              Expectations for every player and contributor.
+                            </CardDescription>
+                          </div>
+                          <Badge
+                            variant="outline"
+                            className="border-aethex-400/40 text-aethex-200"
+                          >
+                            Updated weekly
+                          </Badge>
+                        </CardHeader>
+                        <CardContent>
+                          <ul className="space-y-3">
+                            {moderationGuidelines.map((guideline) => (
+                              <li
+                                key={guideline.title}
+                                className="flex items-start gap-3"
+                              >
+                                <Shield className="mt-0.5 h-4 w-4 text-aethex-400" />
+                                <div>
+                                  <p className="text-sm font-medium text-foreground">
+                                    {guideline.title}
+                                  </p>
+                                  <p className="text-sm text-muted-foreground">
+                                    {guideline.description}
+                                  </p>
+                                </div>
+                              </li>
+                            ))}
+                          </ul>
+                        </CardContent>
+                      </Card>
+                      <div className="grid gap-8">
+                        <Card className="border-border/50 bg-background/80 backdrop-blur">
+                          <CardHeader>
+                            <CardTitle>Moderation toolkit</CardTitle>
+                            <CardDescription>
+                              Equip community managers with actionable,
+                              auditable controls.
+                            </CardDescription>
+                          </CardHeader>
+                          <CardContent className="grid gap-4 sm:grid-cols-3">
+                            {moderationTools.map((tool) => {
+                              const Icon = tool.icon;
+                              return (
+                                <div
+                                  key={tool.id}
+                                  className="rounded-lg border border-border/40 bg-background/80 p-4 space-y-3"
+                                >
+                                  <div className="flex h-10 w-10 items-center justify-center rounded-md bg-aethex-500/10 text-aethex-300">
+                                    <Icon className="h-5 w-5" />
+                                  </div>
+                                  <p className="text-sm font-medium text-foreground">
+                                    {tool.title}
+                                  </p>
+                                  <p className="text-sm text-muted-foreground">
+                                    {tool.description}
+                                  </p>
+                                </div>
+                              );
+                            })}
+                          </CardContent>
+                        </Card>
+                        <Card className="border-border/50 bg-background/80 backdrop-blur">
+                          <CardHeader>
+                            <CardTitle>Submit a report</CardTitle>
+                            <CardDescription>
+                              Reports are routed to the right channel owners for
+                              fast follow-up.
+                            </CardDescription>
+                          </CardHeader>
+                          <CardContent>
+                            <form
+                              onSubmit={handleReportSubmit}
+                              className="space-y-4"
+                            >
+                              <div className="space-y-2">
+                                <Label htmlFor="report-reason">Reason</Label>
+                                <select
+                                  id="report-reason"
+                                  value={reportForm.reason}
+                                  onChange={(event) =>
+                                    setReportForm((prev) => ({
+                                      ...prev,
+                                      reason: event.target.value,
+                                    }))
+                                  }
+                                  className="w-full rounded-lg border border-border/50 bg-background/80 px-3 py-2 text-sm focus:border-aethex-400 focus:outline-none focus:ring-2 focus:ring-aethex-400/40"
+                                >
+                                  <option value="">Select a reason</option>
+                                  {reportReasons.map((reason) => (
+                                    <option key={reason.id} value={reason.id}>
+                                      {reason.label}
+                                    </option>
+                                  ))}
+                                </select>
+                                {selectedReportReason && (
+                                  <p className="text-xs text-muted-foreground">
+                                    {selectedReportReason.description}
+                                  </p>
+                                )}
+                              </div>
+                              <div className="space-y-2">
+                                <Label htmlFor="report-details">Details</Label>
+                                <Textarea
+                                  id="report-details"
+                                  value={reportForm.details}
+                                  onChange={(event) =>
+                                    setReportForm((prev) => ({
+                                      ...prev,
+                                      details: event.target.value,
+                                    }))
+                                  }
+                                  placeholder="Share links, timestamps, or context so moderators can follow up quickly."
+                                  rows={4}
+                                />
+                              </div>
+                              <Button type="submit" className="w-full">
+                                Submit report
+                              </Button>
+                            </form>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+
+            {activeTab === "cta" && (
+              <TabsContent value="cta" className="mt-0">
+                {/* CTA Section */}
+                <section className="py-20">
+                  <div className="container mx-auto px-4 text-center">
+                    <div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
+                      <h2 className="text-3xl lg:text-4xl font-bold text-gradient-purple">
+                        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.
+                      </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"
+                        >
+                          <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"
+                        >
+                          <Link to="/events">View All Events</Link>
+                        </Button>
+                      </div>
+
+                      <div className="grid grid-cols-3 gap-8 mt-12">
+                        <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>
+                        </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>
+                        </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>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </TabsContent>
+            )}
+          </Tabs>
+
+          {false && (
+            <>
               {/* DevConnect Spotlight */}
               <section className="relative py-20 overflow-hidden">
                 <div className="absolute inset-0 bg-gradient-to-r from-aethex-900/40 via-transparent to-neon-blue/30" />
@@ -2835,11 +3836,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "forums" && (
-            <TabsContent value="forums" className="mt-0">
               {/* Forums & Discussion */}
               <section className="py-20 bg-background/30">
                 <div className="container mx-auto px-4">
@@ -2914,11 +3911,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "feedback" && (
-            <TabsContent value="feedback" className="mt-0">
               {/* Feedback & Roadmap */}
               <section className="py-20">
                 <div className="container mx-auto px-4">
@@ -3033,11 +4026,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "polls" && (
-            <TabsContent value="polls" className="mt-0">
               {/* Community Polls */}
               <section className="py-20 bg-background/30">
                 <div className="container mx-auto px-4">
@@ -3061,11 +4050,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "collaboration" && (
-            <TabsContent value="collaboration" className="mt-0">
               {/* Real-time Collaboration */}
               <section className="py-20">
                 <div className="container mx-auto px-4">
@@ -3153,11 +4138,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "events" && (
-            <TabsContent value="events" className="mt-0">
               {/* Upcoming Events */}
               <section className="py-20 bg-background/30">
                 <div className="container mx-auto px-4">
@@ -3183,11 +4164,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "profiles" && (
-            <TabsContent value="profiles" className="mt-0">
               {/* Developer Profile Highlights */}
               <section className="py-20">
                 <div className="container mx-auto px-4">
@@ -3232,16 +4209,9 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "featured" && (
-            <TabsContent value="featured" className="mt-0">
               {/* Featured Developers */}
-              <section
-                id="featured-developers"
-                className="py-20 bg-background/30"
-              >
+              <section className="py-20 bg-background/30">
                 <div className="container mx-auto px-4">
                   <SectionHeader
                     badge="Community Leaders"
@@ -3305,22 +4275,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-              <section id="featured-studios" className="py-16">
-                <div className="container mx-auto px-4">
-                  <SectionHeader
-                    badge="Studios"
-                    title="Featured studios"
-                    description="Studios building with AeThex across games and real-time apps."
-                    align="center"
-                  />
-                  <FeaturedStudiosGrid />
-                </div>
-              </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "workshop" && (
-            <TabsContent value="workshop" className="mt-0">
               {/* Workshop & Mod Support */}
               <section className="py-20">
                 <div className="container mx-auto px-4">
@@ -3382,11 +4337,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "media" && (
-            <TabsContent value="media" className="mt-0">
               {/* Media Galleries */}
               <section className="py-20 bg-background/30">
                 <div className="container mx-auto px-4">
@@ -3443,11 +4394,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "spotlight" && (
-            <TabsContent value="spotlight" className="mt-0">
               {/* Creator Spotlight */}
               <section className="py-20">
                 <div className="container mx-auto px-4">
@@ -3511,11 +4458,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "governance" && (
-            <TabsContent value="governance" className="mt-0">
               {/* Community Governance */}
               <section className="py-20 bg-background/30">
                 <div className="container mx-auto px-4">
@@ -3657,11 +4600,7 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
-          )}
 
-          {activeTab === "cta" && (
-            <TabsContent value="cta" className="mt-0">
               {/* CTA Section */}
               <section className="py-20">
                 <div className="container mx-auto px-4 text-center">
@@ -3726,913 +4665,10 @@ export default function Community() {
                   </div>
                 </div>
               </section>
-            </TabsContent>
+            </>
           )}
-        </Tabs>
-
-        {false && (
-          <>
-            {/* DevConnect Spotlight */}
-            <section className="relative py-20 overflow-hidden">
-              <div className="absolute inset-0 bg-gradient-to-r from-aethex-900/40 via-transparent to-neon-blue/30" />
-              <div className="container mx-auto px-4 relative z-10">
-                <div className="max-w-5xl mx-auto grid lg:grid-cols-[2fr_3fr] gap-10 items-center">
-                  <div className="space-y-6 animate-slide-left">
-                    <Badge className="bg-gradient-to-r from-aethex-500 to-neon-blue w-fit">
-                      New Platform
-                    </Badge>
-                    <h2 className="text-3xl lg:text-4xl font-bold text-gradient">
-                      Introducing DevConnect
-                    </h2>
-                    <p className="text-lg text-muted-foreground">
-                      DevConnect is our dedicated hub for platform teams
-                      building the next wave of AeThex experiences. Launch
-                      collabs, monitor live services, and activate the Studio
-                      network — all from one command center.
-                    </p>
-                    <div className="flex flex-col sm:flex-row gap-4">
-                      <Button
-                        asChild
-                        size="lg"
-                        className="bg-gradient-to-r from-neon-blue to-aethex-500 hover:from-neon-blue/90 hover:to-aethex-500/90 glow-blue hover-lift"
-                      >
-                        <a
-                          href="https://devconnect.sbs"
-                          target="_blank"
-                          rel="noreferrer"
-                          className="flex items-center space-x-2"
-                        >
-                          <span>Launch DevConnect</span>
-                          <ArrowRight className="h-5 w-5" />
-                        </a>
-                      </Button>
-                      <Button
-                        asChild
-                        variant="outline"
-                        size="lg"
-                        className="border-border/60"
-                      >
-                        <Link to="/contact">Talk with AeThex Team</Link>
-                      </Button>
-                    </div>
-                  </div>
-                  <Card className="border-border/40 bg-background/80 backdrop-blur-xl shadow-lg shadow-aethex-500/10 animate-slide-right">
-                    <CardContent className="p-8 space-y-6">
-                      <div className="grid gap-4">
-                        {devConnectHighlights.map((highlight, index) => {
-                          const Icon = highlight.icon;
-                          return (
-                            <div
-                              key={highlight.title}
-                              className="flex items-start gap-4 p-4 rounded-xl border border-border/40 bg-background/60"
-                            >
-                              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 text-aethex-300">
-                                <Icon className="h-5 w-5" />
-                              </div>
-                              <div className="space-y-1">
-                                <h3 className="font-semibold text-foreground">
-                                  {highlight.title}
-                                </h3>
-                                <p className="text-sm text-muted-foreground">
-                                  {highlight.description}
-                                </p>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                      <div className="rounded-lg border border-aethex-400/40 bg-gradient-to-r from-aethex-500/10 to-neon-blue/10 p-4 text-sm text-muted-foreground">
-                        DevConnect syncs directly with AeThex developer
-                        profiles, so your activity, streaks, and achievements
-                        follow you across every build.
-                      </div>
-                    </CardContent>
-                  </Card>
-                </div>
-              </div>
-            </section>
-
-            {/* Forums & Discussion */}
-            <section className="py-20 bg-background/30">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Forums & Discussions"
-                  title="Deep-dive with peers in dedicated boards"
-                  description="Launch structured conversations for strategy, support, and storytelling."
-                  align="left"
-                />
-                <div className="grid gap-6 md:grid-cols-3">
-                  {forumSpaces.map((space, index) => {
-                    const Icon = space.icon;
-                    return (
-                      <Card
-                        key={space.id}
-                        className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift"
-                        style={{ animationDelay: `${index * 0.1}s` }}
-                      >
-                        <CardHeader className="space-y-4">
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="flex items-start gap-3">
-                              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
-                                <Icon className="h-5 w-5" />
-                              </div>
-                              <div>
-                                <CardTitle className="text-lg">
-                                  {space.name}
-                                </CardTitle>
-                                <CardDescription>
-                                  {space.description}
-                                </CardDescription>
-                              </div>
-                            </div>
-                            <Badge
-                              variant="outline"
-                              className="border-border/50"
-                            >
-                              {space.threads} threads
-                            </Badge>
-                          </div>
-                        </CardHeader>
-                        <CardContent className="space-y-4">
-                          <div className="flex items-center justify-between text-xs text-muted-foreground uppercase tracking-wide">
-                            <span>{space.activeToday} active today</span>
-                            <span className="flex items-center gap-2">
-                              <MessageCircle className="h-3.5 w-3.5" /> Latest
-                            </span>
-                          </div>
-                          <div className="rounded-lg border border-border/40 bg-background/80 p-4">
-                            <p className="text-sm font-medium text-foreground">
-                              {space.latestThread.title}
-                            </p>
-                            <p className="text-xs text-muted-foreground">
-                              by {space.latestThread.author} •{" "}
-                              {space.latestThread.timeAgo}
-                            </p>
-                          </div>
-                          <Button
-                            asChild
-                            variant="ghost"
-                            className="w-full justify-between text-sm"
-                          >
-                            <Link to={`/forums/${space.id}`}>
-                              Enter space
-                              <ArrowRight className="h-4 w-4" />
-                            </Link>
-                          </Button>
-                        </CardContent>
-                      </Card>
-                    );
-                  })}
-                </div>
-              </div>
-            </section>
-
-            {/* Feedback & Roadmap */}
-            <section className="py-20">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Feedback & Roadmap"
-                  title="Collect insights and close the loop with players"
-                  description="Organise bug reports, balance discussions, and feature ideas in a transparent queue."
-                  align="left"
-                />
-                <div className="grid gap-8 lg:grid-cols-[2fr_3fr]">
-                  <div className="space-y-6">
-                    {feedbackChannels.map((channel) => {
-                      const Icon = channel.icon;
-                      return (
-                        <Card
-                          key={channel.id}
-                          className="border-border/50 bg-background/80 backdrop-blur"
-                        >
-                          <CardHeader className="space-y-3">
-                            <div className="flex items-start justify-between gap-4">
-                              <div className="flex items-center gap-3">
-                                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
-                                  <Icon className="h-5 w-5" />
-                                </div>
-                                <div>
-                                  <CardTitle className="text-lg">
-                                    {channel.title}
-                                  </CardTitle>
-                                  <CardDescription>
-                                    {channel.description}
-                                  </CardDescription>
-                                </div>
-                              </div>
-                              <Badge
-                                variant="outline"
-                                className="border-aethex-400/40 text-aethex-200"
-                              >
-                                {channel.submissionsThisWeek} this week
-                              </Badge>
-                            </div>
-                            <p className="text-xs text-muted-foreground uppercase tracking-wide">
-                              Stewarded by {channel.owner}
-                            </p>
-                          </CardHeader>
-                          <CardContent className="space-y-3">
-                            <div className="flex flex-wrap gap-2">
-                              {channel.statuses.map((status) => (
-                                <Badge
-                                  key={status.label}
-                                  className={cn(
-                                    "text-xs",
-                                    feedbackToneStyles[status.tone],
-                                  )}
-                                >
-                                  {status.label}: {status.count}
-                                </Badge>
-                              ))}
-                            </div>
-                            <Button
-                              asChild
-                              variant="ghost"
-                              className="w-full justify-between text-sm"
-                            >
-                              <Link to="/feedback">
-                                Submit feedback
-                                <ArrowRight className="h-4 w-4" />
-                              </Link>
-                            </Button>
-                          </CardContent>
-                        </Card>
-                      );
-                    })}
-                  </div>
-                  <Card className="border-border/50 bg-background/80 backdrop-blur">
-                    <CardHeader>
-                      <CardTitle>Live roadmap snapshot</CardTitle>
-                      <CardDescription>
-                        Track what the team is shipping next based on player
-                        momentum.
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      {roadmapSnapshot.map((item) => (
-                        <div
-                          key={item.id}
-                          className="flex flex-col gap-2 rounded-lg border border-border/40 bg-background/80 p-4 sm:flex-row sm:items-center sm:justify-between"
-                        >
-                          <div>
-                            <p className="font-medium text-foreground">
-                              {item.title}
-                            </p>
-                            <p className="text-xs text-muted-foreground">
-                              {item.eta}
-                            </p>
-                          </div>
-                          <Badge
-                            className={feedbackToneStyles[item.statusTone]}
-                          >
-                            {item.status}
-                          </Badge>
-                        </div>
-                      ))}
-                      <Button
-                        asChild
-                        variant="outline"
-                        className="w-full border-aethex-400/40"
-                      >
-                        <Link to="/roadmap">Open public roadmap</Link>
-                      </Button>
-                    </CardContent>
-                  </Card>
-                </div>
-              </div>
-            </section>
-
-            {/* Community Polls */}
-            <section className="py-20 bg-background/30">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Community Polls"
-                  title="Let players steer the next big moves"
-                  description="Run lightweight polls to validate cosmetics, roadmap priorities, and upcoming events."
-                  align="center"
-                />
-                <div className="grid gap-6 md:grid-cols-2 max-w-5xl mx-auto">
-                  {polls.map((poll) => (
-                    <PollCard
-                      key={poll.id}
-                      poll={poll}
-                      selectedOption={pollSelections[poll.id]}
-                      onSelect={(optionId) => handlePollVote(poll.id, optionId)}
-                    />
-                  ))}
-                </div>
-              </div>
-            </section>
-
-            {/* Real-time Collaboration */}
-            <section className="py-20">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Real-time Collaboration"
-                  title="Integrated chat with Discord-style presence"
-                  description="Spin up voice, text, and co-working rooms that bridge seamlessly with our forums and developer hubs."
-                  align="left"
-                />
-                <div className="grid gap-8 lg:grid-cols-[3fr_2fr]">
-                  <Card className="border-border/50 bg-background/80 backdrop-blur">
-                    <CardHeader>
-                      <CardTitle>Active channels</CardTitle>
-                      <CardDescription>
-                        See who’s online and jump into the conversations that
-                        matter right now.
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      {chatChannels.map((channel) => {
-                        const Icon = channel.icon;
-                        return (
-                          <div
-                            key={channel.id}
-                            className="rounded-lg border border-border/40 bg-background/80 p-4 space-y-3"
-                          >
-                            <div className="flex items-start justify-between gap-3">
-                              <div className="flex items-start gap-3">
-                                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
-                                  <Icon className="h-5 w-5" />
-                                </div>
-                                <div>
-                                  <p className="font-medium text-foreground">
-                                    {channel.name}
-                                  </p>
-                                  <p className="text-sm text-muted-foreground">
-                                    {channel.description}
-                                  </p>
-                                </div>
-                              </div>
-                              <Badge
-                                variant="outline"
-                                className="border-aethex-400/40 text-aethex-200"
-                              >
-                                {channel.participants} members
-                              </Badge>
-                            </div>
-                            <div className="flex items-center justify-between text-xs text-muted-foreground">
-                              <span>Synced with Discord</span>
-                              <span className="flex items-center gap-1 text-emerald-200">
-                                <Sparkles className="h-3 w-3" />{" "}
-                                {channel.activeNow} live now
-                              </span>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </CardContent>
-                  </Card>
-                  <Card className="border-border/50 bg-background/80 backdrop-blur">
-                    <CardHeader>
-                      <CardTitle>Why players love integrated chat</CardTitle>
-                      <CardDescription>
-                        Keep every squad aligned across devices with presence,
-                        threads, and recordings.
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      <ul className="space-y-3 text-sm text-muted-foreground">
-                        {chatFeatures.map((feature) => (
-                          <li key={feature} className="flex items-start gap-3">
-                            <CheckCircle className="mt-0.5 h-4 w-4 text-aethex-400" />
-                            <span>{feature}</span>
-                          </li>
-                        ))}
-                      </ul>
-                      <Button asChild className="w-full">
-                        <Link to="/chat">Launch real-time hub</Link>
-                      </Button>
-                    </CardContent>
-                  </Card>
-                </div>
-              </div>
-            </section>
-
-            {/* Upcoming Events */}
-            <section className="py-20 bg-background/30">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Events"
-                  title="Upcoming events"
-                  description="Join our community events and level up your skills."
-                  align="center"
-                />
-                <div className="max-w-4xl mx-auto space-y-6">
-                  {events.map((event, index) => (
-                    <EventCard
-                      key={event.id}
-                      event={event}
-                      animationDelay={index * 0.12}
-                      isRegistered={Boolean(registeredEvents[event.id])}
-                      registrant={registeredEvents[event.id]}
-                      onRegister={(payload) =>
-                        handleEventRegistration(event, payload)
-                      }
-                    />
-                  ))}
-                </div>
-              </div>
-            </section>
-
-            {/* Developer Profile Highlights */}
-            <section className="py-20">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Developer Profiles"
-                  title="Showcase your journey across AeThex"
-                  description="Developer profiles blend achievements, portfolio pieces, and social proof so collaborators can find you fast."
-                  align="left"
-                />
-                <div className="grid gap-6 md:grid-cols-3">
-                  {profileHighlights.map((highlight) => {
-                    const Icon = highlight.icon;
-                    return (
-                      <Card
-                        key={highlight.id}
-                        className="border-border/50 bg-background/80 backdrop-blur"
-                      >
-                        <CardHeader className="space-y-3">
-                          <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
-                            <Icon className="h-6 w-6" />
-                          </div>
-                          <CardTitle className="text-lg">
-                            {highlight.title}
-                          </CardTitle>
-                          <CardDescription>
-                            {highlight.description}
-                          </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="rounded-lg border border-border/40 bg-background/80 p-4">
-                            <p className="text-xs uppercase tracking-wide text-muted-foreground">
-                              {highlight.metricLabel}
-                            </p>
-                            <p className="text-2xl font-semibold text-gradient-purple">
-                              {highlight.metricValue}
-                            </p>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    );
-                  })}
-                </div>
-              </div>
-            </section>
-
-            {/* Featured Developers */}
-            <section className="py-20 bg-background/30">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Community Leaders"
-                  title="Featured developers"
-                  description="Highlighting builders who mentor others, ship mods, and level up the entire network."
-                  align="center"
-                />
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
-                  {contributors.map((contributor, index) => (
-                    <Card
-                      key={contributor.name}
-                      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 space-y-4 text-center">
-                        <img
-                          src={contributor.avatar}
-                          alt={contributor.name}
-                          className="w-20 h-20 rounded-full mx-auto ring-4 ring-aethex-400/20"
-                        />
-                        <div className="space-y-1">
-                          <h3 className="font-semibold text-lg text-gradient">
-                            {contributor.name}
-                          </h3>
-                          <p className="text-sm text-muted-foreground">
-                            {contributor.title}
-                          </p>
-                        </div>
-                        <Badge variant="outline" className="mx-auto">
-                          {contributor.speciality}
-                        </Badge>
-                        <p className="text-sm text-muted-foreground text-left">
-                          {contributor.bio}
-                        </p>
-                        <div className="rounded-lg border border-border/40 bg-background/80 p-4 space-y-2 text-left">
-                          <p className="text-sm font-medium text-foreground">
-                            {contributor.recentContribution}
-                          </p>
-                          <div className="flex items-center justify-between text-xs text-muted-foreground">
-                            <span>{contributor.reputation}</span>
-                            <span>
-                              {contributor.contributions} contributions
-                            </span>
-                          </div>
-                        </div>
-                        <Badge className="bg-aethex-500/10 text-aethex-200 border border-aethex-400/40">
-                          {contributor.badge}
-                        </Badge>
-                        <Button
-                          asChild
-                          variant="outline"
-                          className="w-full border-aethex-400/40"
-                        >
-                          <Link to={contributor.profileUrl}>View passport</Link>
-                        </Button>
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
-              </div>
-            </section>
-
-            {/* Workshop & Mod Support */}
-            <section className="py-20">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Workshop & Mods"
-                  title="Build, share, and iterate with the community workshop"
-                  description="Mods, templates, and toolkits come with analytics so teams can iterate quickly."
-                  align="left"
-                />
-                <div className="grid gap-6 md:grid-cols-3">
-                  {workshopItems.map((item) => {
-                    const Icon = item.icon;
-                    return (
-                      <Card
-                        key={item.id}
-                        className="border-border/50 bg-background/80 backdrop-blur"
-                      >
-                        <CardHeader className="space-y-3">
-                          <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
-                            <Icon className="h-6 w-6" />
-                          </div>
-                          <CardTitle className="text-lg">
-                            {item.title}
-                          </CardTitle>
-                          <CardDescription>{item.description}</CardDescription>
-                        </CardHeader>
-                        <CardContent className="space-y-3">
-                          <div className="flex items-center justify-between text-sm text-muted-foreground">
-                            <span>Downloads</span>
-                            <span className="font-semibold text-aethex-200">
-                              {item.downloads.toLocaleString()}
-                            </span>
-                          </div>
-                          <div className="flex items-center justify-between text-sm text-muted-foreground">
-                            <span>Rating</span>
-                            <span className="font-semibold text-aethex-200">
-                              {item.rating.toFixed(1)}
-                            </span>
-                          </div>
-                          <p className="text-xs text-muted-foreground">
-                            Created by {item.author}
-                          </p>
-                          <Button
-                            asChild
-                            variant="ghost"
-                            className="w-full justify-between text-sm"
-                          >
-                            <Link to={`/workshop/${item.id}`}>
-                              View asset
-                              <ArrowRight className="h-4 w-4" />
-                            </Link>
-                          </Button>
-                        </CardContent>
-                      </Card>
-                    );
-                  })}
-                </div>
-              </div>
-            </section>
-
-            {/* Media Galleries */}
-            <section className="py-20 bg-background/30">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Media Galleries"
-                  title="Show off your best captures and recaps"
-                  description="Screenshots, artwork, and videos are curated into themed galleries to inspire the community."
-                  align="left"
-                />
-                <div className="grid gap-6 md:grid-cols-3">
-                  {mediaGallery.map((item) => (
-                    <Card
-                      key={item.id}
-                      className="border-border/40 bg-background/80 backdrop-blur overflow-hidden"
-                    >
-                      <div className="relative">
-                        <img
-                          src={item.thumbnail}
-                          alt={item.title}
-                          className="h-48 w-full object-cover"
-                          loading="lazy"
-                        />
-                        <Badge className="absolute left-4 top-4 bg-background/80 backdrop-blur border-border/60">
-                          {item.type}
-                        </Badge>
-                      </div>
-                      <CardContent className="space-y-3 p-5">
-                        <div className="space-y-1">
-                          <h3 className="font-semibold text-foreground">
-                            {item.title}
-                          </h3>
-                          <p className="text-sm text-muted-foreground">
-                            by {item.author}
-                          </p>
-                        </div>
-                        <div className="flex items-center justify-between text-sm text-muted-foreground">
-                          <span className="flex items-center gap-2">
-                            <Heart className="h-4 w-4 text-aethex-400" />
-                            {item.likes}
-                          </span>
-                          <Button
-                            asChild
-                            variant="ghost"
-                            className="px-0 text-sm"
-                          >
-                            <Link to={`/gallery/${item.id}`}>Open gallery</Link>
-                          </Button>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
-              </div>
-            </section>
-
-            {/* Creator Spotlight */}
-            <section className="py-20">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Creator Spotlight"
-                  title="Recognising standout community creators"
-                  description="Spotlight creators whose mods, art, and systems elevate the AeThex ecosystem."
-                  align="center"
-                />
-                <div className="grid gap-6 lg:grid-cols-2 max-w-6xl mx-auto">
-                  {spotlightCreators.map((creator) => (
-                    <Card
-                      key={creator.id}
-                      className="border-border/50 bg-background/80 backdrop-blur"
-                    >
-                      <CardContent className="p-6 space-y-5">
-                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                          <div className="flex items-center gap-3">
-                            <img
-                              src={creator.avatar}
-                              alt={creator.name}
-                              className="h-14 w-14 rounded-full ring-4 ring-aethex-400/20"
-                            />
-                            <div>
-                              <p className="text-lg font-semibold text-gradient">
-                                {creator.name}
-                              </p>
-                              <p className="text-sm text-muted-foreground">
-                                {creator.role}
-                              </p>
-                            </div>
-                          </div>
-                          <Badge className="bg-aethex-500/10 border-aethex-400/40 text-aethex-200">
-                            Featured creator
-                          </Badge>
-                        </div>
-                        <p className="text-sm text-muted-foreground leading-relaxed">
-                          {creator.highlight}
-                        </p>
-                        <div className="grid grid-cols-3 gap-3">
-                          {creator.metrics.map((metric) => (
-                            <div
-                              key={`${creator.id}-${metric.label}`}
-                              className="rounded-lg border border-border/40 bg-background/80 p-3 text-center"
-                            >
-                              <p className="text-xs text-muted-foreground uppercase tracking-wide">
-                                {metric.label}
-                              </p>
-                              <p className="text-lg font-semibold text-foreground">
-                                {metric.value}
-                              </p>
-                            </div>
-                          ))}
-                        </div>
-                        <Button asChild className="w-full">
-                          <Link to={creator.link}>View creator profile</Link>
-                        </Button>
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
-              </div>
-            </section>
-
-            {/* Community Governance */}
-            <section className="py-20 bg-background/30">
-              <div className="container mx-auto px-4">
-                <SectionHeader
-                  badge="Community Governance"
-                  title="Clear guidelines, empowered moderators"
-                  description="We invest in tools and processes so every player feels safe, heard, and respected."
-                  align="left"
-                />
-                <div className="grid gap-8 lg:grid-cols-[2fr_3fr]">
-                  <Card className="border-border/50 bg-background/80 backdrop-blur">
-                    <CardHeader className="flex items-start justify-between gap-4">
-                      <div>
-                        <CardTitle>Community guidelines</CardTitle>
-                        <CardDescription>
-                          Expectations for every player and contributor.
-                        </CardDescription>
-                      </div>
-                      <Badge
-                        variant="outline"
-                        className="border-aethex-400/40 text-aethex-200"
-                      >
-                        Updated weekly
-                      </Badge>
-                    </CardHeader>
-                    <CardContent>
-                      <ul className="space-y-3">
-                        {moderationGuidelines.map((guideline) => (
-                          <li
-                            key={guideline.title}
-                            className="flex items-start gap-3"
-                          >
-                            <Shield className="mt-0.5 h-4 w-4 text-aethex-400" />
-                            <div>
-                              <p className="text-sm font-medium text-foreground">
-                                {guideline.title}
-                              </p>
-                              <p className="text-sm text-muted-foreground">
-                                {guideline.description}
-                              </p>
-                            </div>
-                          </li>
-                        ))}
-                      </ul>
-                    </CardContent>
-                  </Card>
-                  <div className="grid gap-8">
-                    <Card className="border-border/50 bg-background/80 backdrop-blur">
-                      <CardHeader>
-                        <CardTitle>Moderation toolkit</CardTitle>
-                        <CardDescription>
-                          Equip community managers with actionable, auditable
-                          controls.
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent className="grid gap-4 sm:grid-cols-3">
-                        {moderationTools.map((tool) => {
-                          const Icon = tool.icon;
-                          return (
-                            <div
-                              key={tool.id}
-                              className="rounded-lg border border-border/40 bg-background/80 p-4 space-y-3"
-                            >
-                              <div className="flex h-10 w-10 items-center justify-center rounded-md bg-aethex-500/10 text-aethex-300">
-                                <Icon className="h-5 w-5" />
-                              </div>
-                              <p className="text-sm font-medium text-foreground">
-                                {tool.title}
-                              </p>
-                              <p className="text-sm text-muted-foreground">
-                                {tool.description}
-                              </p>
-                            </div>
-                          );
-                        })}
-                      </CardContent>
-                    </Card>
-                    <Card className="border-border/50 bg-background/80 backdrop-blur">
-                      <CardHeader>
-                        <CardTitle>Submit a report</CardTitle>
-                        <CardDescription>
-                          Reports are routed to the right channel owners for
-                          fast follow-up.
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <form
-                          onSubmit={handleReportSubmit}
-                          className="space-y-4"
-                        >
-                          <div className="space-y-2">
-                            <Label htmlFor="report-reason">Reason</Label>
-                            <select
-                              id="report-reason"
-                              value={reportForm.reason}
-                              onChange={(event) =>
-                                setReportForm((prev) => ({
-                                  ...prev,
-                                  reason: event.target.value,
-                                }))
-                              }
-                              className="w-full rounded-lg border border-border/50 bg-background/80 px-3 py-2 text-sm focus:border-aethex-400 focus:outline-none focus:ring-2 focus:ring-aethex-400/40"
-                            >
-                              <option value="">Select a reason</option>
-                              {reportReasons.map((reason) => (
-                                <option key={reason.id} value={reason.id}>
-                                  {reason.label}
-                                </option>
-                              ))}
-                            </select>
-                            {selectedReportReason && (
-                              <p className="text-xs text-muted-foreground">
-                                {selectedReportReason.description}
-                              </p>
-                            )}
-                          </div>
-                          <div className="space-y-2">
-                            <Label htmlFor="report-details">Details</Label>
-                            <Textarea
-                              id="report-details"
-                              value={reportForm.details}
-                              onChange={(event) =>
-                                setReportForm((prev) => ({
-                                  ...prev,
-                                  details: event.target.value,
-                                }))
-                              }
-                              placeholder="Share links, timestamps, or context so moderators can follow up quickly."
-                              rows={4}
-                            />
-                          </div>
-                          <Button type="submit" className="w-full">
-                            Submit report
-                          </Button>
-                        </form>
-                      </CardContent>
-                    </Card>
-                  </div>
-                </div>
-              </div>
-            </section>
-
-            {/* CTA Section */}
-            <section className="py-20">
-              <div className="container mx-auto px-4 text-center">
-                <div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
-                  <h2 className="text-3xl lg:text-4xl font-bold text-gradient-purple">
-                    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.
-                  </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"
-                    >
-                      <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"
-                    >
-                      <Link to="/events">View All Events</Link>
-                    </Button>
-                  </div>
-
-                  <div className="grid grid-cols-3 gap-8 mt-12">
-                    <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>
-                    </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>
-                    </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>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </>
-        )}
-      </div>
-    </Layout>
-  </>
+        </div>
+      </Layout>
+    </>
   );
 }
diff --git a/client/pages/Index.tsx b/client/pages/Index.tsx
index 627acdd2..fb9e22a9 100644
--- a/client/pages/Index.tsx
+++ b/client/pages/Index.tsx
@@ -244,7 +244,11 @@ export default function Index() {
     },
   ];
 
-  const [homeBanner, setHomeBanner] = useState<{ text: string; enabled?: boolean; style?: string } | null>(null);
+  const [homeBanner, setHomeBanner] = useState<{
+    text: string;
+    enabled?: boolean;
+    style?: string;
+  } | null>(null);
 
   useEffect(() => {
     fetch("/api/site-settings?key=home_banner")
@@ -270,230 +274,236 @@ export default function Index() {
       <SEO
         pageTitle="Home"
         description="AeThex: Where vision meets execution. Build, learn, and grow through design, development, and community."
-        canonical={typeof window !== 'undefined' ? window.location.href : undefined as any}
+        canonical={
+          typeof window !== "undefined"
+            ? window.location.href
+            : (undefined as any)
+        }
       />
       <Layout hideFooter>
-      {/* Top Banner (editable via Admin → Operations) */}
-      {homeBanner?.enabled !== false && (
-        <GamifiedBanner
-          text={homeBanner?.text || "ROBLOX AUTH SOON"}
-          enabled={homeBanner?.enabled !== false}
-          style={(homeBanner as any)?.style || null}
-        />
-      )}
+        {/* Top Banner (editable via Admin → Operations) */}
+        {homeBanner?.enabled !== false && (
+          <GamifiedBanner
+            text={homeBanner?.text || "ROBLOX AUTH SOON"}
+            enabled={homeBanner?.enabled !== false}
+            style={(homeBanner as any)?.style || null}
+          />
+        )}
 
-      {/* Hero Section - Geometric Design */}
-      <section className="relative min-h-screen flex items-start justify-center overflow-hidden pt-24 sm:pt-36">
-        {/* Geometric Background Pattern */}
-        <div className="absolute inset-0">
-          <div className="absolute inset-0 bg-gradient-to-br from-aethex-900/50 via-background to-aethex-800/50" />
+        {/* Hero Section - Geometric Design */}
+        <section className="relative min-h-screen flex items-start justify-center overflow-hidden pt-24 sm:pt-36">
+          {/* Geometric Background Pattern */}
           <div className="absolute inset-0">
-            {/* Large Logo-inspired Geometric Shape */}
-            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-              <div className="relative w-96 h-96 opacity-5">
-                <img
-                  src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3979ec9a8a28471d900a80e94e2c45fe?format=webp&width=800"
-                  alt="Background"
-                  className="w-full h-full animate-float"
+            <div className="absolute inset-0 bg-gradient-to-br from-aethex-900/50 via-background to-aethex-800/50" />
+            <div className="absolute inset-0">
+              {/* Large Logo-inspired Geometric Shape */}
+              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                <div className="relative w-96 h-96 opacity-5">
+                  <img
+                    src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3979ec9a8a28471d900a80e94e2c45fe?format=webp&width=800"
+                    alt="Background"
+                    className="w-full h-full animate-float"
+                  />
+                </div>
+              </div>
+
+              {/* Floating Geometric Elements */}
+              {[...Array(20)].map((_, i) => (
+                <div
+                  key={i}
+                  className="absolute bg-aethex-400/20 animate-float"
+                  style={{
+                    width: `${10 + Math.random() * 20}px`,
+                    height: `${10 + Math.random() * 20}px`,
+                    left: `${Math.random() * 100}%`,
+                    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%)",
+                  }}
                 />
-              </div>
+              ))}
             </div>
-
-            {/* Floating Geometric Elements */}
-            {[...Array(20)].map((_, i) => (
-              <div
-                key={i}
-                className="absolute bg-aethex-400/20 animate-float"
-                style={{
-                  width: `${10 + Math.random() * 20}px`,
-                  height: `${10 + Math.random() * 20}px`,
-                  left: `${Math.random() * 100}%`,
-                  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%)",
-                }}
-              />
-            ))}
           </div>
-        </div>
 
-        {/* Main Content */}
-        <div className="container mx-auto px-4 relative z-10 pb-24 sm:pb-28">
-          <div className="text-center space-y-12">
-            {/* Title */}
-            <div className="space-y-6 animate-scale-in">
-              <div className="space-y-4">
-                <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold">
-                  <span className="text-gradient-purple">AeThex</span>
-                </h1>
-                <h2 className="text-2xl lg:text-3xl text-gradient animate-fade-in">
-                  Crafting Digital Realities
-                </h2>
-                <p className="text-lg text-muted-foreground max-w-2xl mx-auto animate-slide-up">
-                  Where vision meets execution. We craft experiences through
-                  design, development, and community.
-                </p>
+          {/* Main Content */}
+          <div className="container mx-auto px-4 relative z-10 pb-24 sm:pb-28">
+            <div className="text-center space-y-12">
+              {/* Title */}
+              <div className="space-y-6 animate-scale-in">
+                <div className="space-y-4">
+                  <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold">
+                    <span className="text-gradient-purple">AeThex</span>
+                  </h1>
+                  <h2 className="text-2xl lg:text-3xl text-gradient animate-fade-in">
+                    Crafting Digital Realities
+                  </h2>
+                  <p className="text-lg text-muted-foreground max-w-2xl mx-auto animate-slide-up">
+                    Where vision meets execution. We craft experiences through
+                    design, development, and community.
+                  </p>
+                </div>
               </div>
-            </div>
 
-            {/* Interactive Features Grid (Services) */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto animate-slide-up">
-              {features.map((feature, index) => {
-                const Icon = feature.icon;
-                const isActive = activeSection === index;
-                return (
-                  <Card
-                    key={`old-${index}`}
-                    className={`relative overflow-hidden rounded-xl border transition-all duration-500 group animate-fade-in ${
-                      isActive
-                        ? "border-aethex-500/60 glow-blue"
-                        : "border-border/30 hover:border-aethex-400/50"
-                    } bg-card/60 backdrop-blur-sm hover:translate-y-[-2px] hover:shadow-[0_8px_30px_rgba(80,80,120,0.25)]`}
-                    style={{ animationDelay: `${index * 0.08}s` }}
-                  >
-                    <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-white/6 via-transparent to-white/0" />
-                    <CardContent className="p-5 sm:p-6 flex flex-col items-center text-center gap-3">
-                      <div
-                        className={`relative w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} grid place-items-center shadow-inner`}
-                      >
-                        <div className="absolute -inset-[2px] rounded-xl bg-gradient-to-r from-white/20 to-transparent blur-md opacity-0 group-hover:opacity-100 transition-opacity" />
-                        <Icon className="h-6 w-6 text-white drop-shadow" />
-                      </div>
-                      <h3 className="font-semibold text-sm tracking-wide">
-                        {feature.title}
-                      </h3>
-                      <div className="flex flex-wrap justify-center gap-2 min-h-[24px]">
-                        {(feature.tags || []).slice(0, 2).map((tag, i) => (
-                          <Badge
-                            key={i}
-                            variant="outline"
-                            className="border-white/10 text-xs text-foreground/80"
-                          >
-                            {tag}
-                          </Badge>
-                        ))}
-                      </div>
-                      <p className="text-xs text-muted-foreground line-clamp-2">
-                        {feature.description}
-                      </p>
-                      <div
-                        className={`mt-1 h-[2px] w-16 rounded-full bg-gradient-to-r ${feature.color} opacity-60 group-hover:opacity-100 transition-opacity`}
-                      />
-                      {feature.link ? (
-                        <div className="pt-1">
-                          <Link
-                            to={feature.link}
-                            className="text-xs inline-flex items-center gap-1 text-aethex-300 hover:text-aethex-200"
-                          >
-                            Explore
-                            <ArrowRight className="h-3 w-3" />
-                          </Link>
+              {/* Interactive Features Grid (Services) */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto animate-slide-up">
+                {features.map((feature, index) => {
+                  const Icon = feature.icon;
+                  const isActive = activeSection === index;
+                  return (
+                    <Card
+                      key={`old-${index}`}
+                      className={`relative overflow-hidden rounded-xl border transition-all duration-500 group animate-fade-in ${
+                        isActive
+                          ? "border-aethex-500/60 glow-blue"
+                          : "border-border/30 hover:border-aethex-400/50"
+                      } bg-card/60 backdrop-blur-sm hover:translate-y-[-2px] hover:shadow-[0_8px_30px_rgba(80,80,120,0.25)]`}
+                      style={{ animationDelay: `${index * 0.08}s` }}
+                    >
+                      <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-white/6 via-transparent to-white/0" />
+                      <CardContent className="p-5 sm:p-6 flex flex-col items-center text-center gap-3">
+                        <div
+                          className={`relative w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} grid place-items-center shadow-inner`}
+                        >
+                          <div className="absolute -inset-[2px] rounded-xl bg-gradient-to-r from-white/20 to-transparent blur-md opacity-0 group-hover:opacity-100 transition-opacity" />
+                          <Icon className="h-6 w-6 text-white drop-shadow" />
                         </div>
-                      ) : null}
-                    </CardContent>
-                  </Card>
-                );
-              })}
-            </div>
-
-            {/* Platform Feature Cards */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto animate-slide-up mt-6">
-              {platformFeatures.map((feature, index) => {
-                const Icon = feature.icon;
-                const isActive = activeSection === index;
-                return (
-                  <Card
-                    key={`platform-${index}`}
-                    className={`relative overflow-hidden rounded-xl border transition-all duration-500 group animate-fade-in ${
-                      isActive
-                        ? "border-aethex-500/60 glow-blue"
-                        : "border-border/30 hover:border-aethex-400/50"
-                    } bg-card/60 backdrop-blur-sm hover:translate-y-[-2px] hover:shadow-[0_8px_30px_rgba(80,80,120,0.25)]`}
-                    style={{ animationDelay: `${(index + 4) * 0.08}s` }}
-                  >
-                    <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-white/6 via-transparent to-white/0" />
-                    <CardContent className="p-5 sm:p-6 flex flex-col items-center text-center gap-3">
-                      <div
-                        className={`relative w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} grid place-items-center shadow-inner`}
-                      >
-                        <div className="absolute -inset-[2px] rounded-xl bg-gradient-to-r from-white/20 to-transparent blur-md opacity-0 group-hover:opacity-100 transition-opacity" />
-                        <Icon className="h-6 w-6 text-white drop-shadow" />
-                      </div>
-                      <h3 className="font-semibold text-sm tracking-wide">
-                        {feature.title}
-                      </h3>
-                      <div className="flex flex-wrap justify-center gap-2 min-h-[24px]">
-                        {(feature.tags || []).slice(0, 2).map((tag, i) => (
-                          <Badge
-                            key={i}
-                            variant="outline"
-                            className="border-white/10 text-xs text-foreground/80"
-                          >
-                            {tag}
-                          </Badge>
-                        ))}
-                      </div>
-                      <p className="text-xs text-muted-foreground line-clamp-2">
-                        {feature.description}
-                      </p>
-                      <div
-                        className={`mt-1 h-[2px] w-16 rounded-full bg-gradient-to-r ${feature.color} opacity-60 group-hover:opacity-100 transition-opacity`}
-                      />
-                      {feature.link ? (
-                        <div className="pt-1">
-                          <Link
-                            to={feature.link}
-                            className="text-xs inline-flex items-center gap-1 text-aethex-300 hover:text-aethex-200"
-                          >
-                            Explore
-                            <ArrowRight className="h-3 w-3" />
-                          </Link>
+                        <h3 className="font-semibold text-sm tracking-wide">
+                          {feature.title}
+                        </h3>
+                        <div className="flex flex-wrap justify-center gap-2 min-h-[24px]">
+                          {(feature.tags || []).slice(0, 2).map((tag, i) => (
+                            <Badge
+                              key={i}
+                              variant="outline"
+                              className="border-white/10 text-xs text-foreground/80"
+                            >
+                              {tag}
+                            </Badge>
+                          ))}
                         </div>
-                      ) : null}
-                    </CardContent>
-                  </Card>
-                );
-              })}
-            </div>
+                        <p className="text-xs text-muted-foreground line-clamp-2">
+                          {feature.description}
+                        </p>
+                        <div
+                          className={`mt-1 h-[2px] w-16 rounded-full bg-gradient-to-r ${feature.color} opacity-60 group-hover:opacity-100 transition-opacity`}
+                        />
+                        {feature.link ? (
+                          <div className="pt-1">
+                            <Link
+                              to={feature.link}
+                              className="text-xs inline-flex items-center gap-1 text-aethex-300 hover:text-aethex-200"
+                            >
+                              Explore
+                              <ArrowRight className="h-3 w-3" />
+                            </Link>
+                          </div>
+                        ) : null}
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
 
-            {/* Action Buttons */}
-            <div className="flex flex-col sm:flex-row justify-center gap-6 animate-slide-up mb-8 sm:mb-10">
-              <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-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
-              >
-                <Link
-                  to="/onboarding"
-                  className="flex items-center space-x-2 group"
+              {/* Platform Feature Cards */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto animate-slide-up mt-6">
+                {platformFeatures.map((feature, index) => {
+                  const Icon = feature.icon;
+                  const isActive = activeSection === index;
+                  return (
+                    <Card
+                      key={`platform-${index}`}
+                      className={`relative overflow-hidden rounded-xl border transition-all duration-500 group animate-fade-in ${
+                        isActive
+                          ? "border-aethex-500/60 glow-blue"
+                          : "border-border/30 hover:border-aethex-400/50"
+                      } bg-card/60 backdrop-blur-sm hover:translate-y-[-2px] hover:shadow-[0_8px_30px_rgba(80,80,120,0.25)]`}
+                      style={{ animationDelay: `${(index + 4) * 0.08}s` }}
+                    >
+                      <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-white/6 via-transparent to-white/0" />
+                      <CardContent className="p-5 sm:p-6 flex flex-col items-center text-center gap-3">
+                        <div
+                          className={`relative w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} grid place-items-center shadow-inner`}
+                        >
+                          <div className="absolute -inset-[2px] rounded-xl bg-gradient-to-r from-white/20 to-transparent blur-md opacity-0 group-hover:opacity-100 transition-opacity" />
+                          <Icon className="h-6 w-6 text-white drop-shadow" />
+                        </div>
+                        <h3 className="font-semibold text-sm tracking-wide">
+                          {feature.title}
+                        </h3>
+                        <div className="flex flex-wrap justify-center gap-2 min-h-[24px]">
+                          {(feature.tags || []).slice(0, 2).map((tag, i) => (
+                            <Badge
+                              key={i}
+                              variant="outline"
+                              className="border-white/10 text-xs text-foreground/80"
+                            >
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                        <p className="text-xs text-muted-foreground line-clamp-2">
+                          {feature.description}
+                        </p>
+                        <div
+                          className={`mt-1 h-[2px] w-16 rounded-full bg-gradient-to-r ${feature.color} opacity-60 group-hover:opacity-100 transition-opacity`}
+                        />
+                        {feature.link ? (
+                          <div className="pt-1">
+                            <Link
+                              to={feature.link}
+                              className="text-xs inline-flex items-center gap-1 text-aethex-300 hover:text-aethex-200"
+                            >
+                              Explore
+                              <ArrowRight className="h-3 w-3" />
+                            </Link>
+                          </div>
+                        ) : null}
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex flex-col sm:flex-row justify-center gap-6 animate-slide-up mb-8 sm:mb-10">
+                <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-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
                 >
-                  <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-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
-              >
-                <Link to="/explore">Explore Platform</Link>
-              </Button>
-              <Button
-                asChild
-                variant="ghost"
-                size="lg"
-                className="hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
-              >
-                <a href="https://aethex.net" target="_blank" rel="noreferrer">Visit aethex.net</a>
-              </Button>
+                  <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-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
+                >
+                  <Link to="/explore">Explore Platform</Link>
+                </Button>
+                <Button
+                  asChild
+                  variant="ghost"
+                  size="lg"
+                  className="hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
+                >
+                  <a href="https://aethex.net" target="_blank" rel="noreferrer">
+                    Visit aethex.net
+                  </a>
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
-    </Layout>
+        </section>
+      </Layout>
     </>
   );
 }
diff --git a/client/pages/Login.tsx b/client/pages/Login.tsx
index 89079a93..0705c785 100644
--- a/client/pages/Login.tsx
+++ b/client/pages/Login.tsx
@@ -247,308 +247,321 @@ export default function Login() {
 
   return (
     <>
-      <SEO pageTitle="Login" description="Sign in to your AeThex account to access the dashboard and community." canonical={typeof window !== 'undefined' ? window.location.href : undefined as any} />
-    <Layout>
-      <div className="min-h-screen bg-aethex-gradient py-12 flex items-center justify-center">
-        <div className="container mx-auto px-4 max-w-md">
-          {/* Floating particles effect */}
-          <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-10">
-            {[...Array(20)].map((_, i) => (
-              <div
-                key={i}
-                className="absolute w-1 h-1 bg-aethex-400 rounded-full animate-float"
-                style={{
-                  left: `${Math.random() * 100}%`,
-                  top: `${Math.random() * 100}%`,
-                  animationDelay: `${Math.random() * 3}s`,
-                  animationDuration: `${3 + Math.random() * 2}s`,
-                }}
-              />
-            ))}
-          </div>
-
-          <Card className="bg-card/50 backdrop-blur-sm border border-border/50 shadow-2xl animate-scale-in relative z-10">
-            <CardHeader className="text-center space-y-4">
-              <div className="flex justify-center">
-                <div className="p-4 rounded-full bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20">
-                  <Shield className="h-8 w-8 text-aethex-400 animate-pulse-glow" />
-                </div>
-              </div>
-              <div className="space-y-2">
-                <CardTitle className="text-2xl text-gradient-purple">
-                  {isSignUp ? "Create Account" : "Welcome Back"}
-                </CardTitle>
-                <CardDescription>
-                  {isSignUp
-                    ? "Create your AeThex account to get started"
-                    : "Sign in to your AeThex account to access the dashboard"}
-                </CardDescription>
-              </div>
-              <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">
-              {manualVerificationLink ? (
-                <Alert className="border-aethex-400/30 bg-aethex-500/10 text-foreground">
-                  <Info className="h-4 w-4 text-aethex-300" />
-                  <AlertTitle>Manual verification required</AlertTitle>
-                  <AlertDescription>
-                    <p>
-                      We couldn't send the verification email automatically. Use
-                      the link below to confirm your account:
-                    </p>
-                    <p className="mt-2 break-all rounded bg-background/60 px-3 py-2 font-mono text-xs text-foreground/90">
-                      {manualVerificationLink}
-                    </p>
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="outline"
-                      className="mt-3 border-aethex-400/40"
-                      onClick={() =>
-                        window.open(
-                          manualVerificationLink,
-                          "_blank",
-                          "noopener",
-                        )
-                      }
-                    >
-                      Open verification link
-                    </Button>
-                  </AlertDescription>
-                </Alert>
-              ) : null}
-              {/* Social Login Buttons */}
-              <div className="space-y-3">
-                <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"
-                  className="w-full hover-lift interactive-scale"
-                  onClick={() => handleSocialLogin("google")}
-                >
-                  <Mail className="h-4 w-4 mr-2" />
-                  Continue with Google
-                </Button>
-                <Button
-                  variant="outline"
-                  className="w-full hover-lift interactive-scale"
-                  onClick={() => {
-                    const apiBase =
-                      (import.meta as any)?.env?.VITE_API_BASE ||
-                      window.location.origin;
-                    const u = new URL("/api/roblox/oauth/start", apiBase);
-                    const next = new URLSearchParams(
-                      window.location.search,
-                    ).get("next");
-                    if (next && next.startsWith("/"))
-                      u.searchParams.set("state", next);
-                    window.location.href = u.toString();
+      <SEO
+        pageTitle="Login"
+        description="Sign in to your AeThex account to access the dashboard and community."
+        canonical={
+          typeof window !== "undefined"
+            ? window.location.href
+            : (undefined as any)
+        }
+      />
+      <Layout>
+        <div className="min-h-screen bg-aethex-gradient py-12 flex items-center justify-center">
+          <div className="container mx-auto px-4 max-w-md">
+            {/* Floating particles effect */}
+            <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-10">
+              {[...Array(20)].map((_, i) => (
+                <div
+                  key={i}
+                  className="absolute w-1 h-1 bg-aethex-400 rounded-full animate-float"
+                  style={{
+                    left: `${Math.random() * 100}%`,
+                    top: `${Math.random() * 100}%`,
+                    animationDelay: `${Math.random() * 3}s`,
+                    animationDuration: `${3 + Math.random() * 2}s`,
                   }}
+                />
+              ))}
+            </div>
+
+            <Card className="bg-card/50 backdrop-blur-sm border border-border/50 shadow-2xl animate-scale-in relative z-10">
+              <CardHeader className="text-center space-y-4">
+                <div className="flex justify-center">
+                  <div className="p-4 rounded-full bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20">
+                    <Shield className="h-8 w-8 text-aethex-400 animate-pulse-glow" />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <CardTitle className="text-2xl text-gradient-purple">
+                    {isSignUp ? "Create Account" : "Welcome Back"}
+                  </CardTitle>
+                  <CardDescription>
+                    {isSignUp
+                      ? "Create your AeThex account to get started"
+                      : "Sign in to your AeThex account to access the dashboard"}
+                  </CardDescription>
+                </div>
+                <Badge
+                  variant="outline"
+                  className="border-aethex-400/50 text-aethex-400"
                 >
-                  <Sparkles className="h-4 w-4 mr-2" />
-                  Continue with Roblox
-                </Button>
-              </div>
+                  <Sparkles className="h-3 w-3 mr-1" />
+                  Secure Login
+                </Badge>
+              </CardHeader>
 
-              <div className="relative">
-                <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-border/50" />
+              <CardContent className="space-y-6">
+                {manualVerificationLink ? (
+                  <Alert className="border-aethex-400/30 bg-aethex-500/10 text-foreground">
+                    <Info className="h-4 w-4 text-aethex-300" />
+                    <AlertTitle>Manual verification required</AlertTitle>
+                    <AlertDescription>
+                      <p>
+                        We couldn't send the verification email automatically.
+                        Use the link below to confirm your account:
+                      </p>
+                      <p className="mt-2 break-all rounded bg-background/60 px-3 py-2 font-mono text-xs text-foreground/90">
+                        {manualVerificationLink}
+                      </p>
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="outline"
+                        className="mt-3 border-aethex-400/40"
+                        onClick={() =>
+                          window.open(
+                            manualVerificationLink,
+                            "_blank",
+                            "noopener",
+                          )
+                        }
+                      >
+                        Open verification link
+                      </Button>
+                    </AlertDescription>
+                  </Alert>
+                ) : null}
+                {/* Social Login Buttons */}
+                <div className="space-y-3">
+                  <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"
+                    className="w-full hover-lift interactive-scale"
+                    onClick={() => handleSocialLogin("google")}
+                  >
+                    <Mail className="h-4 w-4 mr-2" />
+                    Continue with Google
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="w-full hover-lift interactive-scale"
+                    onClick={() => {
+                      const apiBase =
+                        (import.meta as any)?.env?.VITE_API_BASE ||
+                        window.location.origin;
+                      const u = new URL("/api/roblox/oauth/start", apiBase);
+                      const next = new URLSearchParams(
+                        window.location.search,
+                      ).get("next");
+                      if (next && next.startsWith("/"))
+                        u.searchParams.set("state", next);
+                      window.location.href = u.toString();
+                    }}
+                  >
+                    <Sparkles className="h-4 w-4 mr-2" />
+                    Continue with Roblox
+                  </Button>
                 </div>
-                <div className="relative flex justify-center text-xs uppercase">
-                  <span className="bg-background px-2 text-muted-foreground">
-                    Or continue with email
-                  </span>
+
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <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>
+                  </div>
                 </div>
-              </div>
 
-              {/* Aethex Org Login (Magic Link) */}
-              <OrgLogin />
+                {/* Aethex Org Login (Magic Link) */}
+                <OrgLogin />
+
+                {/* Email/Password Form */}
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  {isSignUp && (
+                    <div className="space-y-2">
+                      <Label htmlFor="fullName" className="text-sm font-medium">
+                        Full Name
+                      </Label>
+                      <div className="relative">
+                        <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                        <Input
+                          id="fullName"
+                          type="text"
+                          value={fullName}
+                          onChange={(e) => setFullName(e.target.value)}
+                          placeholder="Enter your full name"
+                          className="pl-10 bg-background/50 border-border/50 focus:border-aethex-400"
+                          required={isSignUp}
+                        />
+                      </div>
+                    </div>
+                  )}
 
-              {/* Email/Password Form */}
-              <form onSubmit={handleSubmit} className="space-y-4">
-                {isSignUp && (
                   <div className="space-y-2">
-                    <Label htmlFor="fullName" className="text-sm font-medium">
-                      Full Name
+                    <Label htmlFor="email" className="text-sm font-medium">
+                      Email Address
                     </Label>
                     <div className="relative">
-                      <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                       <Input
-                        id="fullName"
-                        type="text"
-                        value={fullName}
-                        onChange={(e) => setFullName(e.target.value)}
-                        placeholder="Enter your full name"
+                        id="email"
+                        type="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        placeholder="Enter your email"
                         className="pl-10 bg-background/50 border-border/50 focus:border-aethex-400"
-                        required={isSignUp}
+                        required
                       />
                     </div>
                   </div>
-                )}
 
-                <div className="space-y-2">
-                  <Label htmlFor="email" className="text-sm font-medium">
-                    Email Address
-                  </Label>
-                  <div className="relative">
-                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="email"
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      placeholder="Enter your email"
-                      className="pl-10 bg-background/50 border-border/50 focus:border-aethex-400"
-                      required
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="password" className="text-sm font-medium">
-                    Password
-                  </Label>
-                  <div className="relative">
-                    <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="password"
-                      type="password"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      placeholder={
-                        isSignUp ? "Create a password" : "Enter your password"
-                      }
-                      className="pl-10 bg-background/50 border-border/50 focus:border-aethex-400"
-                      required
-                      minLength={isSignUp ? 6 : undefined}
-                    />
-                  </div>
-                  {isSignUp && (
-                    <p className="text-xs text-muted-foreground">
-                      Password must be at least 6 characters long
-                    </p>
-                  )}
-                </div>
-
-                {!isSignUp && (
-                  <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"
+                  <div className="space-y-2">
+                    <Label htmlFor="password" className="text-sm font-medium">
+                      Password
+                    </Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        id="password"
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        placeholder={
+                          isSignUp ? "Create a password" : "Enter your password"
+                        }
+                        className="pl-10 bg-background/50 border-border/50 focus:border-aethex-400"
+                        required
+                        minLength={isSignUp ? 6 : undefined}
                       />
-                      <span className="text-muted-foreground">Remember me</span>
-                    </label>
-                    <button
-                      type="button"
-                      className="text-aethex-400 hover:underline"
-                      onClick={() => {
-                        setResetEmail(email || "");
-                        setShowReset(true);
-                      }}
-                    >
-                      Forgot password?
-                    </button>
+                    </div>
+                    {isSignUp && (
+                      <p className="text-xs text-muted-foreground">
+                        Password must be at least 6 characters long
+                      </p>
+                    )}
                   </div>
-                )}
 
-                <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 || (isSignUp && !fullName) || isLoading
-                  }
-                >
-                  <LogIn className="h-4 w-4 mr-2" />
-                  {isSignUp ? "Create Account" : "Sign In"}
-                  <ArrowRight className="h-4 w-4 ml-2" />
-                </Button>
-              </form>
+                  {!isSignUp && (
+                    <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"
+                        />
+                        <span className="text-muted-foreground">
+                          Remember me
+                        </span>
+                      </label>
+                      <button
+                        type="button"
+                        className="text-aethex-400 hover:underline"
+                        onClick={() => {
+                          setResetEmail(email || "");
+                          setShowReset(true);
+                        }}
+                      >
+                        Forgot password?
+                      </button>
+                    </div>
+                  )}
 
-              <div className="text-center pt-4">
-                <p className="text-sm text-muted-foreground">
-                  {isSignUp
-                    ? "Already have an account?"
-                    : "Don't have an account?"}{" "}
-                  <button
-                    onClick={() => {
-                      setIsSignUp((prev) => !prev);
-                      setManualVerificationLink(null);
-                    }}
-                    className="text-aethex-400 hover:underline font-medium"
+                  <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 ||
+                      (isSignUp && !fullName) ||
+                      isLoading
+                    }
                   >
-                    {isSignUp ? "Sign In" : "Join AeThex"}
-                  </button>
-                </p>
-              </div>
-            </CardContent>
-          </Card>
+                    <LogIn className="h-4 w-4 mr-2" />
+                    {isSignUp ? "Create Account" : "Sign In"}
+                    <ArrowRight className="h-4 w-4 ml-2" />
+                  </Button>
+                </form>
 
-          {/* Security Notice */}
-          <div className="mt-6 text-center animate-fade-in">
-            <p className="text-xs text-muted-foreground">
-              🔒 Your data is protected with enterprise-grade security
-            </p>
+                <div className="text-center pt-4">
+                  <p className="text-sm text-muted-foreground">
+                    {isSignUp
+                      ? "Already have an account?"
+                      : "Don't have an account?"}{" "}
+                    <button
+                      onClick={() => {
+                        setIsSignUp((prev) => !prev);
+                        setManualVerificationLink(null);
+                      }}
+                      className="text-aethex-400 hover:underline font-medium"
+                    >
+                      {isSignUp ? "Sign In" : "Join AeThex"}
+                    </button>
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Security Notice */}
+            <div className="mt-6 text-center animate-fade-in">
+              <p className="text-xs text-muted-foreground">
+                🔒 Your data is protected with enterprise-grade security
+              </p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <Dialog open={showReset} onOpenChange={setShowReset}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Reset your password</DialogTitle>
-            <DialogDescription>
-              Enter the email associated with your account. We'll send a reset
-              link.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-3 py-2">
-            <Label htmlFor="resetEmail" className="text-sm font-medium">
-              Email Address
-            </Label>
-            <Input
-              id="resetEmail"
-              type="email"
-              value={resetEmail}
-              onChange={(e) => setResetEmail(e.target.value)}
-              placeholder="you@example.com"
-            />
-          </div>
-          <DialogFooter className="sm:justify-end">
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button
-              onClick={async () => {
-                if (!resetEmail) return;
-                setIsLoading(true);
-                try {
-                  await requestPasswordReset(resetEmail);
-                  setShowReset(false);
-                } catch {}
-                setIsLoading(false);
-              }}
-              disabled={!resetEmail || isLoading}
-            >
-              Send reset link
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Layout>
-  </>
+        <Dialog open={showReset} onOpenChange={setShowReset}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Reset your password</DialogTitle>
+              <DialogDescription>
+                Enter the email associated with your account. We'll send a reset
+                link.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-3 py-2">
+              <Label htmlFor="resetEmail" className="text-sm font-medium">
+                Email Address
+              </Label>
+              <Input
+                id="resetEmail"
+                type="email"
+                value={resetEmail}
+                onChange={(e) => setResetEmail(e.target.value)}
+                placeholder="you@example.com"
+              />
+            </div>
+            <DialogFooter className="sm:justify-end">
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <Button
+                onClick={async () => {
+                  if (!resetEmail) return;
+                  setIsLoading(true);
+                  try {
+                    await requestPasswordReset(resetEmail);
+                    setShowReset(false);
+                  } catch {}
+                  setIsLoading(false);
+                }}
+                disabled={!resetEmail || isLoading}
+              >
+                Send reset link
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </Layout>
+    </>
   );
 }
diff --git a/client/pages/MentorshipPrograms.tsx b/client/pages/MentorshipPrograms.tsx
index c0e766e7..f566c583 100644
--- a/client/pages/MentorshipPrograms.tsx
+++ b/client/pages/MentorshipPrograms.tsx
@@ -277,412 +277,424 @@ export default function MentorshipPrograms() {
 
   return (
     <>
-      <SEO pageTitle="Mentorship" description="AeThex mentorship programs: 1:1 guidance, workshops, and boot camps to accelerate your journey." canonical={typeof window!== 'undefined' ? window.location.href : undefined as any} />
-    <Layout>
-      <div className="min-h-screen bg-aethex-gradient">
-        {/* Hero Section */}
-        <section className="relative py-16 sm:py-24 lg:py-32 overflow-hidden">
-          <div className="absolute inset-0 opacity-10">
-            {[...Array(25)].map((_, i) => (
-              <div
-                key={i}
-                className="absolute text-emerald-400/80 animate-float"
-                style={{
-                  left: `${Math.random() * 100}%`,
-                  top: `${Math.random() * 100}%`,
-                  animationDelay: `${Math.random() * 3}s`,
-                  animationDuration: `${3 + Math.random() * 2}s`,
-                  fontSize: `${8 + Math.random() * 6}px`,
-                }}
-              >
-                {"🎓📚💡🚀".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-emerald-400/50 text-emerald-300 animate-bounce-gentle"
-              >
-                <GraduationCap className="h-3 w-3 mr-1" />
-                Mentorship & Education Division
-              </Badge>
-
-              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
-                <span className="bg-gradient-to-r from-emerald-300 via-aethex-400 to-neon-blue bg-clip-text text-transparent">
-                  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.
-              </p>
-
-              <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button
-                  asChild
-                  size="lg"
-                  className="bg-gradient-to-r from-emerald-400 to-neon-blue shadow-[0_0_25px_rgba(16,185,129,0.35)] hover:from-emerald-500 hover:to-aethex-500 hover-lift"
+      <SEO
+        pageTitle="Mentorship"
+        description="AeThex mentorship programs: 1:1 guidance, workshops, and boot camps to accelerate your journey."
+        canonical={
+          typeof window !== "undefined"
+            ? window.location.href
+            : (undefined as any)
+        }
+      />
+      <Layout>
+        <div className="min-h-screen bg-aethex-gradient">
+          {/* Hero Section */}
+          <section className="relative py-16 sm:py-24 lg:py-32 overflow-hidden">
+            <div className="absolute inset-0 opacity-10">
+              {[...Array(25)].map((_, i) => (
+                <div
+                  key={i}
+                  className="absolute text-emerald-400/80 animate-float"
+                  style={{
+                    left: `${Math.random() * 100}%`,
+                    top: `${Math.random() * 100}%`,
+                    animationDelay: `${Math.random() * 3}s`,
+                    animationDuration: `${3 + Math.random() * 2}s`,
+                    fontSize: `${8 + Math.random() * 6}px`,
+                  }}
                 >
-                  <Link
-                    to="/engage#mentorship"
-                    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
+                  {"🎓📚💡🚀".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"
-                  size="lg"
-                  className="border-emerald-400/50 text-emerald-200 hover:border-emerald-400 hover:bg-emerald-500/10 hover-lift"
+                  className="border-emerald-400/50 text-emerald-300 animate-bounce-gentle"
                 >
-                  <Link to="/docs">Program Details</Link>
-                </Button>
+                  <GraduationCap className="h-3 w-3 mr-1" />
+                  Mentorship & Education Division
+                </Badge>
+
+                <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
+                  <span className="bg-gradient-to-r from-emerald-300 via-aethex-400 to-neon-blue bg-clip-text text-transparent">
+                    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.
+                </p>
+
+                <div className="flex flex-col sm:flex-row justify-center gap-4">
+                  <Button
+                    asChild
+                    size="lg"
+                    className="bg-gradient-to-r from-emerald-400 to-neon-blue shadow-[0_0_25px_rgba(16,185,129,0.35)] hover:from-emerald-500 hover:to-aethex-500 hover-lift"
+                  >
+                    <Link
+                      to="/engage#mentorship"
+                      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-emerald-400/50 text-emerald-200 hover:border-emerald-400 hover:bg-emerald-500/10 hover-lift"
+                  >
+                    <Link to="/docs">Program Details</Link>
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        {/* Programs Overview */}
-        <section className="py-16 sm:py-20 bg-background/30">
-          <div className="container mx-auto px-4">
-            <div className="text-center mb-16 animate-slide-up">
-              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
-                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
-              </p>
-            </div>
+          {/* Programs Overview */}
+          <section className="py-16 sm:py-20 bg-background/30">
+            <div className="container mx-auto px-4">
+              <div className="text-center mb-16 animate-slide-up">
+                <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
+                  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
+                </p>
+              </div>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
-              {programs.map((program, index) => {
-                const Icon = program.icon;
-                return (
-                  <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-start justify-between">
-                        <div className="flex items-center space-x-4">
-                          <div
-                            className={`p-3 rounded-lg bg-gradient-to-r ${program.color}`}
-                          >
-                            <Icon className="h-6 w-6 text-white" />
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
+                {programs.map((program, index) => {
+                  const Icon = program.icon;
+                  return (
+                    <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-start justify-between">
+                          <div className="flex items-center space-x-4">
+                            <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>
+                              <CardDescription className="mt-1">
+                                {program.description}
+                              </CardDescription>
+                            </div>
                           </div>
-                          <div>
-                            <CardTitle className="text-xl">
-                              {program.title}
-                            </CardTitle>
-                            <CardDescription className="mt-1">
-                              {program.description}
-                            </CardDescription>
+                          <Badge variant="outline" className="shrink-0">
+                            {program.participants}
+                          </Badge>
+                        </div>
+                      </CardHeader>
+                      <CardContent className="space-y-4">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                          {program.features.map((feature, featureIndex) => (
+                            <div
+                              key={featureIndex}
+                              className="flex items-center space-x-2 text-sm"
+                            >
+                              <CheckCircle className="h-3 w-3 text-emerald-400 flex-shrink-0" />
+                              <span>{feature}</span>
+                            </div>
+                          ))}
+                        </div>
+
+                        <div className="grid grid-cols-1 sm: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>
+                          <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>
+                          <div className="text-center">
+                            <span className="text-sm font-semibold text-emerald-400">
+                              {program.price}
+                            </span>
                           </div>
                         </div>
-                        <Badge variant="outline" className="shrink-0">
-                          {program.participants}
-                        </Badge>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+
+          {/* Learning Tracks */}
+          <section className="py-16 sm:py-20">
+            <div className="container mx-auto px-4">
+              <div className="text-center mb-16 animate-slide-up">
+                <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
+                  Specialized Learning Tracks
+                </h2>
+                <p className="text-lg text-muted-foreground">
+                  Focused curricula designed by industry experts
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+                {tracks.map((track, index) => {
+                  const Icon = track.icon;
+                  const isSelected = selectedTrack === index;
+                  return (
+                    <Card
+                      key={index}
+                      className={`cursor-pointer transition-all duration-300 hover-lift animate-scale-in ${
+                        isSelected
+                          ? "border-emerald-500 shadow-[0_0_25px_rgba(16,185,129,0.35)] scale-105"
+                          : "border-border/50 hover:border-emerald-400/60"
+                      }`}
+                      style={{ animationDelay: `${index * 0.1}s` }}
+                      onClick={() => setSelectedTrack(index)}
+                    >
+                      <CardHeader className="text-center">
+                        <Icon className="h-12 w-12 text-emerald-400 mx-auto mb-3" />
+                        <CardTitle
+                          className={`text-lg ${
+                            isSelected
+                              ? "bg-gradient-to-r from-emerald-400 to-aethex-500 bg-clip-text text-transparent"
+                              : ""
+                          }`}
+                        >
+                          {track.name}
+                        </CardTitle>
+                        <CardDescription className="text-sm">
+                          {track.description}
+                        </CardDescription>
+                      </CardHeader>
+                      <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"
+                            >
+                              {skill}
+                            </Badge>
+                          ))}
+                        </div>
+
+                        <div className="text-center space-y-1">
+                          <div className="text-sm text-muted-foreground">
+                            {track.level}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {track.duration} • {track.projects} projects
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+
+          {/* Featured Mentors */}
+          <section className="py-16 sm:py-20 bg-background/30">
+            <div className="container mx-auto px-4">
+              <div className="text-center mb-16 animate-slide-up">
+                <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
+                  Meet Our Expert Mentors
+                </h2>
+                <p className="text-lg text-muted-foreground">
+                  Learn from industry leaders at top technology companies
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+                {mentors.map((mentor, index) => (
+                  <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
+                        src={mentor.avatar}
+                        alt={mentor.name}
+                        className="w-24 h-24 rounded-full mx-auto mb-4 ring-4 ring-emerald-400/20"
+                      />
+                      <h3 className="font-semibold text-lg bg-gradient-to-r from-emerald-400 to-aethex-500 bg-clip-text text-transparent">
+                        {mentor.name}
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        {mentor.title}
+                      </p>
+                      <p className="text-sm font-medium text-emerald-400">
+                        {mentor.company}
+                      </p>
+
+                      <div className="mt-4 space-y-2">
+                        <div className="flex justify-between text-sm">
+                          <span>Experience:</span>
+                          <span className="font-medium">
+                            {mentor.experience}
+                          </span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span>Students Mentored:</span>
+                          <span className="font-medium">
+                            {mentor.students}+
+                          </span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span>Rating:</span>
+                          <div className="flex items-center space-x-1">
+                            <Star className="h-3 w-3 text-yellow-500 fill-current" />
+                            <span className="font-medium">{mentor.rating}</span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <Badge variant="outline" className="mt-3 text-xs">
+                        {mentor.specialty}
+                      </Badge>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Success Stories */}
+          <section className="py-16 sm:py-20">
+            <div className="container mx-auto px-4">
+              <div className="text-center mb-16 animate-slide-up">
+                <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
+                  Success Stories
+                </h2>
+                <p className="text-lg text-muted-foreground">
+                  Real career transformations from our mentorship programs
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
+                {testimonials.map((testimonial, index) => (
+                  <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>
+                      <div className="flex items-center space-x-3">
+                        <div className="w-12 h-12 rounded-full bg-gradient-to-r from-emerald-500 via-aethex-500 to-neon-blue flex items-center justify-center text-white font-semibold">
+                          {testimonial.name.charAt(0)}
+                        </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>
+                        </div>
                       </div>
                     </CardHeader>
                     <CardContent className="space-y-4">
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                        {program.features.map((feature, featureIndex) => (
-                          <div
-                            key={featureIndex}
-                            className="flex items-center space-x-2 text-sm"
-                          >
-                            <CheckCircle className="h-3 w-3 text-emerald-400 flex-shrink-0" />
-                            <span>{feature}</span>
-                          </div>
-                        ))}
-                      </div>
-
-                      <div className="grid grid-cols-1 sm: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>
-                        <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>
-                        <div className="text-center">
-                          <span className="text-sm font-semibold text-emerald-400">
-                            {program.price}
-                          </span>
-                        </div>
+                      <blockquote className="text-sm italic text-muted-foreground">
+                        "{testimonial.content}"
+                      </blockquote>
+                      <div className="flex justify-between text-xs text-muted-foreground">
+                        <span>Program: {testimonial.program}</span>
+                        <span>Mentor: {testimonial.mentor}</span>
                       </div>
                     </CardContent>
                   </Card>
-                );
-              })}
+                ))}
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        {/* Learning Tracks */}
-        <section className="py-16 sm:py-20">
-          <div className="container mx-auto px-4">
-            <div className="text-center mb-16 animate-slide-up">
-              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
-                Specialized Learning Tracks
-              </h2>
-              <p className="text-lg text-muted-foreground">
-                Focused curricula designed by industry experts
-              </p>
-            </div>
+          {/* CTA Section */}
+          <section className="py-16 sm:py-20 bg-background/30">
+            <div className="container mx-auto px-4 text-center">
+              <div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
+                <h2 className="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-emerald-300 via-aethex-400 to-neon-blue bg-clip-text text-transparent">
+                  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.
+                </p>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
-              {tracks.map((track, index) => {
-                const Icon = track.icon;
-                const isSelected = selectedTrack === index;
-                return (
-                  <Card
-                    key={index}
-                    className={`cursor-pointer transition-all duration-300 hover-lift animate-scale-in ${
-                      isSelected
-                        ? "border-emerald-500 shadow-[0_0_25px_rgba(16,185,129,0.35)] scale-105"
-                        : "border-border/50 hover:border-emerald-400/60"
-                    }`}
-                    style={{ animationDelay: `${index * 0.1}s` }}
-                    onClick={() => setSelectedTrack(index)}
+                <div className="flex flex-col sm:flex-row justify-center gap-4">
+                  <Button
+                    asChild
+                    size="lg"
+                    className="bg-gradient-to-r from-emerald-400 to-neon-blue shadow-[0_0_25px_rgba(16,185,129,0.35)] hover:from-emerald-500 hover:to-aethex-500 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
                   >
-                    <CardHeader className="text-center">
-                      <Icon className="h-12 w-12 text-emerald-400 mx-auto mb-3" />
-                      <CardTitle
-                        className={`text-lg ${
-                          isSelected
-                            ? "bg-gradient-to-r from-emerald-400 to-aethex-500 bg-clip-text text-transparent"
-                            : ""
-                        }`}
-                      >
-                        {track.name}
-                      </CardTitle>
-                      <CardDescription className="text-sm">
-                        {track.description}
-                      </CardDescription>
-                    </CardHeader>
-                    <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"
-                          >
-                            {skill}
-                          </Badge>
-                        ))}
-                      </div>
+                    <Link
+                      to="/engage#mentorship"
+                      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-emerald-400/60 text-emerald-200 hover:border-emerald-400 hover:bg-emerald-500/10 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
+                  >
+                    <Link to="/docs/curriculum">View Curriculum</Link>
+                  </Button>
+                </div>
 
-                      <div className="text-center space-y-1">
-                        <div className="text-sm text-muted-foreground">
-                          {track.level}
-                        </div>
-                        <div className="text-xs text-muted-foreground">
-                          {track.duration} • {track.projects} projects
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
-            </div>
-          </div>
-        </section>
-
-        {/* Featured Mentors */}
-        <section className="py-16 sm:py-20 bg-background/30">
-          <div className="container mx-auto px-4">
-            <div className="text-center mb-16 animate-slide-up">
-              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
-                Meet Our Expert Mentors
-              </h2>
-              <p className="text-lg text-muted-foreground">
-                Learn from industry leaders at top technology companies
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
-              {mentors.map((mentor, index) => (
-                <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
-                      src={mentor.avatar}
-                      alt={mentor.name}
-                      className="w-24 h-24 rounded-full mx-auto mb-4 ring-4 ring-emerald-400/20"
-                    />
-                    <h3 className="font-semibold text-lg bg-gradient-to-r from-emerald-400 to-aethex-500 bg-clip-text text-transparent">
-                      {mentor.name}
-                    </h3>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mt-12">
+                  <div className="text-center">
+                    <MessageCircle className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
+                    <h3 className="font-semibold">24/7 Support</h3>
                     <p className="text-sm text-muted-foreground">
-                      {mentor.title}
+                      Always available
                     </p>
-                    <p className="text-sm font-medium text-emerald-400">
-                      {mentor.company}
+                  </div>
+                  <div className="text-center">
+                    <Video className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
+                    <h3 className="font-semibold">Live Sessions</h3>
+                    <p className="text-sm text-muted-foreground">
+                      Interactive learning
                     </p>
-
-                    <div className="mt-4 space-y-2">
-                      <div className="flex justify-between text-sm">
-                        <span>Experience:</span>
-                        <span className="font-medium">{mentor.experience}</span>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span>Students Mentored:</span>
-                        <span className="font-medium">{mentor.students}+</span>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span>Rating:</span>
-                        <div className="flex items-center space-x-1">
-                          <Star className="h-3 w-3 text-yellow-500 fill-current" />
-                          <span className="font-medium">{mentor.rating}</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <Badge variant="outline" className="mt-3 text-xs">
-                      {mentor.specialty}
-                    </Badge>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* Success Stories */}
-        <section className="py-16 sm:py-20">
-          <div className="container mx-auto px-4">
-            <div className="text-center mb-16 animate-slide-up">
-              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
-                Success Stories
-              </h2>
-              <p className="text-lg text-muted-foreground">
-                Real career transformations from our mentorship programs
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
-              {testimonials.map((testimonial, index) => (
-                <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>
-                    <div className="flex items-center space-x-3">
-                      <div className="w-12 h-12 rounded-full bg-gradient-to-r from-emerald-500 via-aethex-500 to-neon-blue flex items-center justify-center text-white font-semibold">
-                        {testimonial.name.charAt(0)}
-                      </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>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <blockquote className="text-sm italic text-muted-foreground">
-                      "{testimonial.content}"
-                    </blockquote>
-                    <div className="flex justify-between text-xs text-muted-foreground">
-                      <span>Program: {testimonial.program}</span>
-                      <span>Mentor: {testimonial.mentor}</span>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* CTA Section */}
-        <section className="py-16 sm:py-20 bg-background/30">
-          <div className="container mx-auto px-4 text-center">
-            <div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
-              <h2 className="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-emerald-300 via-aethex-400 to-neon-blue bg-clip-text text-transparent">
-                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.
-              </p>
-
-              <div className="flex flex-col sm:flex-row justify-center gap-4">
-                <Button
-                  asChild
-                  size="lg"
-                  className="bg-gradient-to-r from-emerald-400 to-neon-blue shadow-[0_0_25px_rgba(16,185,129,0.35)] hover:from-emerald-500 hover:to-aethex-500 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
-                >
-                  <Link
-                    to="/engage#mentorship"
-                    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-emerald-400/60 text-emerald-200 hover:border-emerald-400 hover:bg-emerald-500/10 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
-                >
-                  <Link to="/docs/curriculum">View Curriculum</Link>
-                </Button>
-              </div>
-
-              <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mt-12">
-                <div className="text-center">
-                  <MessageCircle className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
-                  <h3 className="font-semibold">24/7 Support</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Always available
-                  </p>
-                </div>
-                <div className="text-center">
-                  <Video className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
-                  <h3 className="font-semibold">Live Sessions</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Interactive learning
-                  </p>
-                </div>
-                <div className="text-center">
-                  <Award className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
-                  <h3 className="font-semibold">Certification</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Industry recognized
-                  </p>
+                  </div>
+                  <div className="text-center">
+                    <Award className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
+                    <h3 className="font-semibold">Certification</h3>
+                    <p className="text-sm text-muted-foreground">
+                      Industry recognized
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </section>
-      </div>
-    </Layout>
-  </>
+          </section>
+        </div>
+      </Layout>
+    </>
   );
 }
diff --git a/client/pages/ProjectBoard.tsx b/client/pages/ProjectBoard.tsx
index fd701e9c..88efa788 100644
--- a/client/pages/ProjectBoard.tsx
+++ b/client/pages/ProjectBoard.tsx
@@ -12,7 +12,13 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
 import { aethexCollabService } from "@/lib/aethex-collab-service";
 import LoadingScreen from "@/components/LoadingScreen";
@@ -74,10 +80,19 @@ export default function ProjectBoard() {
       blocked: [],
     };
     const normalized = tasks.filter((t) => {
-      if (q && !String(t.title || "").toLowerCase().includes(q.toLowerCase()) && !String(t.description || "").toLowerCase().includes(q.toLowerCase())) {
+      if (
+        q &&
+        !String(t.title || "")
+          .toLowerCase()
+          .includes(q.toLowerCase()) &&
+        !String(t.description || "")
+          .toLowerCase()
+          .includes(q.toLowerCase())
+      ) {
         return false;
       }
-      if (filterAssignee && String(t.assignee_id || "") !== filterAssignee) return false;
+      if (filterAssignee && String(t.assignee_id || "") !== filterAssignee)
+        return false;
       if (filterStatus && String(t.status || "") !== filterStatus) return false;
       return true;
     });
@@ -125,172 +140,41 @@ export default function ProjectBoard() {
 
   return (
     <>
-      <SEO pageTitle="Project Board" description="Kanban task tracking for your AeThex project: statuses, assignees, and due dates." canonical={typeof window!== 'undefined' ? window.location.href : undefined as any} />
-    <Layout>
-      <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(110,141,255,0.12),transparent_60%)] py-10">
-        <div className="mx-auto w-full max-w-6xl px-4 lg:px-6 space-y-6">
-          <section className="rounded-3xl border border-border/40 bg-background/80 p-6 shadow-2xl backdrop-blur">
-            <h1 className="text-3xl font-semibold text-foreground">
-              Project Board
-            </h1>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Track tasks by status. Filters, assignees, and due dates enabled.
-            </p>
-            <div className="mt-4 grid gap-3 md:grid-cols-4">
-              <Input
-                placeholder="Search tasks…"
-                value={q}
-                onChange={(e) => setQ(e.target.value)}
-              />
-              <Select value={filterAssignee} onValueChange={setFilterAssignee}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Filter by assignee" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="">All assignees</SelectItem>
-                  {members.map((m) => (
-                    <SelectItem key={m.user_id} value={m.user_id}>
-                      {m.user?.full_name || m.user?.username || m.user_id}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Select value={filterStatus} onValueChange={setFilterStatus}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Filter by status" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="">All statuses</SelectItem>
-                  <SelectItem value="todo">To do</SelectItem>
-                  <SelectItem value="doing">In progress</SelectItem>
-                  <SelectItem value="done">Done</SelectItem>
-                  <SelectItem value="blocked">Blocked</SelectItem>
-                </SelectContent>
-              </Select>
-              <div className="flex gap-2">
-                <Button variant="outline" onClick={() => { setQ(""); setFilterAssignee(""); setFilterStatus(""); }}>
-                  Reset filters
-                </Button>
-              </div>
-            </div>
-          </section>
-
-          <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)]">
-            {columns.map((col) => (
-              <Card
-                key={col.key}
-                className="rounded-3xl border-border/40 bg-background/70 shadow-xl backdrop-blur-lg"
-              >
-                <CardHeader>
-                  <CardTitle className="text-base flex items-center gap-2">
-                    {col.title}
-                    <Badge
-                      variant="outline"
-                      className="border-border/50 text-xs"
-                    >
-                      {grouped[col.key].length}
-                    </Badge>
-                  </CardTitle>
-                  <CardDescription>{col.hint}</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-3">
-                  {grouped[col.key].length === 0 ? (
-                    <p className="text-sm text-muted-foreground">No tasks.</p>
-                  ) : (
-                    grouped[col.key].map((t) => (
-                      <div
-                        key={t.id}
-                        className="rounded-2xl border border-border/30 bg-background/60 p-3"
-                      >
-                        <div className="font-medium text-foreground">
-                          {t.title}
-                        </div>
-                        {t.description ? (
-                          <p className="text-xs text-muted-foreground mt-1">
-                            {t.description}
-                          </p>
-                        ) : null}
-                        <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
-                          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                            {t.assignee ? (
-                              <span className="inline-flex items-center gap-1">
-                                <span className="inline-block h-4 w-4 rounded-full bg-cover bg-center" style={{ backgroundImage: `url(${t.assignee.avatar_url || ""})` }} />
-                                {t.assignee.full_name || t.assignee.username || "Assignee"}
-                              </span>
-                            ) : (
-                              <span>Unassigned</span>
-                            )}
-                            {t.due_date ? (
-                              <span>• Due {new Date(t.due_date).toLocaleDateString()}</span>
-                            ) : null}
-                          </div>
-                          <div className="flex flex-wrap gap-2">
-                            {columns.map((k) => (
-                              <Button
-                                key={`${t.id}-${k.key}`}
-                                size="xs"
-                                variant="outline"
-                                onClick={() => move(t.id, k.key)}
-                              >
-                                {k.title}
-                              </Button>
-                            ))}
-                            <Button
-                              size="xs"
-                              variant="ghost"
-                              onClick={async () => {
-                                if (!user?.id) return;
-                                await aethexCollabService.updateTask(t.id, { assignee_id: user.id });
-                                await load();
-                              }}
-                            >
-                              Assign me
-                            </Button>
-                            <Button
-                              size="xs"
-                              variant="destructive"
-                              onClick={async () => {
-                                await aethexCollabService.deleteTask(t.id);
-                                await load();
-                              }}
-                            >
-                              Delete
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-
-          <Card className="rounded-3xl border-border/40 bg-background/70 shadow-xl backdrop-blur-lg">
-            <CardHeader>
-              <CardTitle className="text-lg">Add task</CardTitle>
-              <CardDescription>
-                Keep titles concise; details optional.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <Input
-                placeholder="Task title"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-              />
-              <Textarea
-                placeholder="Description (optional)"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-              />
-              <div className="grid gap-3 md:grid-cols-3">
-                <Select value={assigneeId} onValueChange={setAssigneeId}>
+      <SEO
+        pageTitle="Project Board"
+        description="Kanban task tracking for your AeThex project: statuses, assignees, and due dates."
+        canonical={
+          typeof window !== "undefined"
+            ? window.location.href
+            : (undefined as any)
+        }
+      />
+      <Layout>
+        <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(110,141,255,0.12),transparent_60%)] py-10">
+          <div className="mx-auto w-full max-w-6xl px-4 lg:px-6 space-y-6">
+            <section className="rounded-3xl border border-border/40 bg-background/80 p-6 shadow-2xl backdrop-blur">
+              <h1 className="text-3xl font-semibold text-foreground">
+                Project Board
+              </h1>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Track tasks by status. Filters, assignees, and due dates
+                enabled.
+              </p>
+              <div className="mt-4 grid gap-3 md:grid-cols-4">
+                <Input
+                  placeholder="Search tasks…"
+                  value={q}
+                  onChange={(e) => setQ(e.target.value)}
+                />
+                <Select
+                  value={filterAssignee}
+                  onValueChange={setFilterAssignee}
+                >
                   <SelectTrigger>
-                    <SelectValue placeholder="Assign to…" />
+                    <SelectValue placeholder="Filter by assignee" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="">Unassigned</SelectItem>
+                    <SelectItem value="">All assignees</SelectItem>
                     {members.map((m) => (
                       <SelectItem key={m.user_id} value={m.user_id}>
                         {m.user?.full_name || m.user?.username || m.user_id}
@@ -298,26 +182,188 @@ export default function ProjectBoard() {
                     ))}
                   </SelectContent>
                 </Select>
-                <Input
-                  type="date"
-                  value={dueDate}
-                  onChange={(e) => setDueDate(e.target.value)}
-                />
-                <div className="flex justify-end">
+                <Select value={filterStatus} onValueChange={setFilterStatus}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Filter by status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="">All statuses</SelectItem>
+                    <SelectItem value="todo">To do</SelectItem>
+                    <SelectItem value="doing">In progress</SelectItem>
+                    <SelectItem value="done">Done</SelectItem>
+                    <SelectItem value="blocked">Blocked</SelectItem>
+                  </SelectContent>
+                </Select>
+                <div className="flex gap-2">
                   <Button
-                    onClick={handleCreate}
-                    disabled={creating || !title.trim()}
-                    className="rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue text-white"
+                    variant="outline"
+                    onClick={() => {
+                      setQ("");
+                      setFilterAssignee("");
+                      setFilterStatus("");
+                    }}
                   >
-                    {creating ? "Creating..." : "Create task"}
+                    Reset filters
                   </Button>
                 </div>
               </div>
-            </CardContent>
-          </Card>
+            </section>
+
+            <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)]">
+              {columns.map((col) => (
+                <Card
+                  key={col.key}
+                  className="rounded-3xl border-border/40 bg-background/70 shadow-xl backdrop-blur-lg"
+                >
+                  <CardHeader>
+                    <CardTitle className="text-base flex items-center gap-2">
+                      {col.title}
+                      <Badge
+                        variant="outline"
+                        className="border-border/50 text-xs"
+                      >
+                        {grouped[col.key].length}
+                      </Badge>
+                    </CardTitle>
+                    <CardDescription>{col.hint}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    {grouped[col.key].length === 0 ? (
+                      <p className="text-sm text-muted-foreground">No tasks.</p>
+                    ) : (
+                      grouped[col.key].map((t) => (
+                        <div
+                          key={t.id}
+                          className="rounded-2xl border border-border/30 bg-background/60 p-3"
+                        >
+                          <div className="font-medium text-foreground">
+                            {t.title}
+                          </div>
+                          {t.description ? (
+                            <p className="text-xs text-muted-foreground mt-1">
+                              {t.description}
+                            </p>
+                          ) : null}
+                          <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
+                            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                              {t.assignee ? (
+                                <span className="inline-flex items-center gap-1">
+                                  <span
+                                    className="inline-block h-4 w-4 rounded-full bg-cover bg-center"
+                                    style={{
+                                      backgroundImage: `url(${t.assignee.avatar_url || ""})`,
+                                    }}
+                                  />
+                                  {t.assignee.full_name ||
+                                    t.assignee.username ||
+                                    "Assignee"}
+                                </span>
+                              ) : (
+                                <span>Unassigned</span>
+                              )}
+                              {t.due_date ? (
+                                <span>
+                                  • Due{" "}
+                                  {new Date(t.due_date).toLocaleDateString()}
+                                </span>
+                              ) : null}
+                            </div>
+                            <div className="flex flex-wrap gap-2">
+                              {columns.map((k) => (
+                                <Button
+                                  key={`${t.id}-${k.key}`}
+                                  size="xs"
+                                  variant="outline"
+                                  onClick={() => move(t.id, k.key)}
+                                >
+                                  {k.title}
+                                </Button>
+                              ))}
+                              <Button
+                                size="xs"
+                                variant="ghost"
+                                onClick={async () => {
+                                  if (!user?.id) return;
+                                  await aethexCollabService.updateTask(t.id, {
+                                    assignee_id: user.id,
+                                  });
+                                  await load();
+                                }}
+                              >
+                                Assign me
+                              </Button>
+                              <Button
+                                size="xs"
+                                variant="destructive"
+                                onClick={async () => {
+                                  await aethexCollabService.deleteTask(t.id);
+                                  await load();
+                                }}
+                              >
+                                Delete
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      ))
+                    )}
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            <Card className="rounded-3xl border-border/40 bg-background/70 shadow-xl backdrop-blur-lg">
+              <CardHeader>
+                <CardTitle className="text-lg">Add task</CardTitle>
+                <CardDescription>
+                  Keep titles concise; details optional.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <Input
+                  placeholder="Task title"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                />
+                <Textarea
+                  placeholder="Description (optional)"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                />
+                <div className="grid gap-3 md:grid-cols-3">
+                  <Select value={assigneeId} onValueChange={setAssigneeId}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Assign to…" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="">Unassigned</SelectItem>
+                      {members.map((m) => (
+                        <SelectItem key={m.user_id} value={m.user_id}>
+                          {m.user?.full_name || m.user?.username || m.user_id}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Input
+                    type="date"
+                    value={dueDate}
+                    onChange={(e) => setDueDate(e.target.value)}
+                  />
+                  <div className="flex justify-end">
+                    <Button
+                      onClick={handleCreate}
+                      disabled={creating || !title.trim()}
+                      className="rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue text-white"
+                    >
+                      {creating ? "Creating..." : "Create task"}
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
         </div>
-      </div>
-    </Layout>
-  </>
+      </Layout>
+    </>
   );
 }
diff --git a/server/index.ts b/server/index.ts
index 4b5dfe04..f758a00e 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -454,7 +454,8 @@ export function createServer() {
           return res.status(500).json({ error: error.message });
         }
         const map: Record<string, any> = {};
-        for (const row of data || []) map[(row as any).key] = (row as any).value;
+        for (const row of data || [])
+          map[(row as any).key] = (row as any).value;
         return res.json(map);
       } catch (e: any) {
         return res.status(500).json({ error: e?.message || String(e) });
@@ -463,7 +464,10 @@ export function createServer() {
 
     app.post("/api/site-settings", async (req, res) => {
       try {
-        const { key, value } = (req.body || {}) as { key?: string; value?: any };
+        const { key, value } = (req.body || {}) as {
+          key?: string;
+          value?: any;
+        };
         if (!key || typeof key !== "string") {
           return res.status(400).json({ error: "key required" });
         }
@@ -472,7 +476,10 @@ export function createServer() {
           .from("site_settings")
           .upsert(payload, { onConflict: "key" as any });
         if (error) {
-          if (isTableMissing(error)) return res.status(400).json({ error: "site_settings table missing" });
+          if (isTableMissing(error))
+            return res
+              .status(400)
+              .json({ error: "site_settings table missing" });
           return res.status(500).json({ error: error.message });
         }
         return res.json({ ok: true });