fix(portal): corporate landing SEO, favicon, and public home UX

Add sankofa.nexus marketing site with institutional grade scorecards,
server-side metadata/title, dynamic icons, favicon rewrite, and instant
landing render without session-loading flash; split authenticated AppShell
from unauthenticated corporate chrome.

Co-authored-by: Cursor <cursoragent@cursor.com>

portal/src/app/admin/page.tsx

@@ -3,40 +3,12 @@
 import { Building2, Users, CreditCard, Shield, ArrowRight } from 'lucide-react';
 import Link from 'next/link';
 import { useSession } from 'next-auth/react';
-import { signIn } from 'next-auth/react';
 
+import { RoleGate } from '@/components/auth/RoleGate';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
 
 export default function AdminPortalPage() {
-  const { data: session, status } = useSession();
-
-  if (status === 'loading') {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-gray-900">
-        <div className="text-center">
-          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600 mx-auto"></div>
-          <p className="text-gray-400">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (status === 'unauthenticated') {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-gray-900">
-        <div className="text-center max-w-md mx-auto p-8">
-          <h1 className="text-2xl font-bold text-white mb-4">Welcome to Admin Portal</h1>
-          <p className="text-gray-400 mb-6">Please sign in to continue</p>
-          <button
-            onClick={() => signIn()}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            Sign In
-          </button>
-        </div>
-      </div>
-    );
-  }
+  const { data: session } = useSession();
 
   const adminSections = [
     {
@@ -70,48 +42,55 @@ export default function AdminPortalPage() {
   ];
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-white mb-2">Customer / Tenant Admin Portal</h1>
-        <p className="text-gray-400">Manage your organization, users, billing, and compliance</p>
-        {session?.user?.email && (
-          <p className="text-sm text-gray-500 mt-2">Signed in as {session.user.email}</p>
-        )}
-      </div>
+    <RoleGate
+      allowedRoles={['admin', 'tenant-admin', 'ADMIN', 'TENANT_ADMIN']}
+      callbackUrl="/admin"
+      badge="Admin"
+      title="Welcome to Admin Portal"
+      subtitle="Sign in with a client-admin or internal-admin account to continue."
+    >
+      <div className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-white mb-2">Customer / Tenant Admin Portal</h1>
+          <p className="text-gray-400">Manage your organization, users, billing, and compliance</p>
+          {session?.user?.email && (
+            <p className="text-sm text-gray-500 mt-2">Signed in as {session.user.email}</p>
+          )}
+        </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {adminSections.map((section) => {
-          const Icon = section.icon;
-          return (
-            <Card key={section.href} className="bg-gray-800 border-gray-700 hover:border-orange-500 transition-colors">
-              <CardHeader>
-                <div className="flex items-center gap-3 mb-2">
-                  <Icon className="h-6 w-6 text-orange-500" />
-                  <CardTitle className="text-white">{section.title}</CardTitle>
-                </div>
-                <p className="text-sm text-gray-400">{section.description}</p>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 mb-4">
-                  {section.features.map((feature) => (
-                    <li key={feature} className="flex items-center gap-2 text-sm text-gray-300">
-                      <span className="text-orange-500">•</span>
-                      <span>{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-                <Link
-                  href={section.href}
-                  className="inline-flex items-center gap-2 text-sm text-orange-500 hover:text-orange-400 transition-colors"
-                >
-                  Manage <ArrowRight className="h-4 w-4" />
-                </Link>
-              </CardContent>
-            </Card>
-          );
-        })}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {adminSections.map((section) => {
+            const Icon = section.icon;
+            return (
+              <Card key={section.href} className="bg-gray-800 border-gray-700 hover:border-orange-500 transition-colors">
+                <CardHeader>
+                  <div className="flex items-center gap-3 mb-2">
+                    <Icon className="h-6 w-6 text-orange-500" />
+                    <CardTitle className="text-white">{section.title}</CardTitle>
+                  </div>
+                  <p className="text-sm text-gray-400">{section.description}</p>
+                </CardHeader>
+                <CardContent>
+                  <ul className="space-y-2 mb-4">
+                    {section.features.map((feature) => (
+                      <li key={feature} className="flex items-center gap-2 text-sm text-gray-300">
+                        <span className="text-orange-500">•</span>
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  <Link
+                    href={section.href}
+                    className="inline-flex items-center gap-2 text-sm text-orange-500 hover:text-orange-400 transition-colors"
+                  >
+                    Manage <ArrowRight className="h-4 w-4" />
+                  </Link>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
       </div>
-    </div>
+    </RoleGate>
   );
 }
-