feat(app): wire dashboard administration flows

ts_web/elements/idp-centercontainer.ts

@@ -58,7 +58,7 @@ export class IdpCenterContainer extends DeesElement {
 
       /* Left Panel - Branding */
       .brand-panel {
-        background: linear-gradient(135deg, hsl(240 10% 8%) 0%, hsl(240 10% 4%) 50%, hsl(240 12% 6%) 100%);
+        background: #09090B;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -74,8 +74,9 @@ export class IdpCenterContainer extends DeesElement {
         left: 0;
         right: 0;
         bottom: 0;
-        background: radial-gradient(ellipse at 30% 20%, hsla(240 20% 20% / 0.3) 0%, transparent 50%),
-                    radial-gradient(ellipse at 70% 80%, hsla(240 20% 15% / 0.2) 0%, transparent 50%);
+        background:
+          radial-gradient(ellipse at 50% -10%, rgb(110 91 230 / 0.18) 0%, transparent 58%),
+          radial-gradient(circle at 2px 2px, rgb(255 255 255 / 0.04) 1px, transparent 0) 0 0 / 32px 32px;
         pointer-events: none;
       }
 
@@ -87,18 +88,41 @@ export class IdpCenterContainer extends DeesElement {
 
       .logo {
         font-family: 'Cal Sans', 'Geist Sans', sans-serif;
-        font-size: 42px;
-        font-weight: 600;
+        font-size: clamp(44px, 6vw, 72px);
+        font-weight: 900;
         color: var(--foreground);
-        margin: 0 0 12px 0;
-        letter-spacing: -0.02em;
+        margin: 0 0 8px 0;
+        letter-spacing: -0.05em;
+        line-height: 1;
       }
 
       .tagline {
         font-size: 18px;
         color: var(--muted-foreground);
-        margin: 0 0 48px 0;
-        line-height: 1.5;
+        margin: 0 0 44px 0;
+        line-height: 1.65;
+        max-width: 420px;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        margin-bottom: 28px;
+        padding: 5px 12px;
+        border: 1px solid rgb(255 255 255 / 0.1);
+        border-radius: 999px;
+        background: rgb(255 255 255 / 0.05);
+        color: rgb(255 255 255 / 0.5);
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .badge-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 999px;
+        background: #16A34A;
       }
 
       .features {
@@ -117,17 +141,16 @@ export class IdpCenterContainer extends DeesElement {
         width: 40px;
         height: 40px;
         border-radius: 10px;
-        background: hsla(240 10% 20% / 0.5);
-        border: 1px solid hsla(240 10% 30% / 0.3);
+        background: rgb(255 255 255 / 0.045);
+        border: 1px solid rgb(255 255 255 / 0.08);
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
       }
 
-      .feature-icon dees-icon {
+      .feature-icon idp-icon {
         color: var(--muted-foreground);
-        font-size: 18px;
       }
 
       .feature-text h3 {
@@ -146,6 +169,9 @@ export class IdpCenterContainer extends DeesElement {
 
       .learn-more {
         margin-top: 48px;
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
       }
 
       /* Right Panel - Form */
@@ -258,12 +284,13 @@ export class IdpCenterContainer extends DeesElement {
         <div class="brand-panel">
           <div class="brand-content">
             <h1 class="logo">idp.global</h1>
-            <p class="tagline">Your permanent identity on the web</p>
+            <div class="badge"><span class="badge-dot"></span>Open identity infrastructure</div>
+            <p class="tagline">One Identity. Any Scale. Yours Forever.</p>
 
             <div class="features">
               <div class="feature">
                 <div class="feature-icon">
-                  <dees-icon .icon=${'lucide:code'}></dees-icon>
+                  <idp-icon name="globe" size="18"></idp-icon>
                 </div>
                 <div class="feature-text">
                   <h3>Open Source</h3>
@@ -273,7 +300,7 @@ export class IdpCenterContainer extends DeesElement {
 
               <div class="feature">
                 <div class="feature-icon">
-                  <dees-icon .icon=${'lucide:heart'}></dees-icon>
+                  <idp-icon name="shield" size="18"></idp-icon>
                 </div>
                 <div class="feature-text">
                   <h3>Always Free</h3>
@@ -283,7 +310,7 @@ export class IdpCenterContainer extends DeesElement {
 
               <div class="feature">
                 <div class="feature-icon">
-                  <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
+                  <idp-icon name="key" size="18"></idp-icon>
                 </div>
                 <div class="feature-text">
                   <h3>Permanent Identity</h3>
@@ -293,10 +320,14 @@ export class IdpCenterContainer extends DeesElement {
             </div>
 
             <div class="learn-more">
-              <dees-button
-                type="secondary"
+              <idp-button
+                variant="outline"
                 @click=${() => window.open('https://about.idp.global', '_blank')}
-              >Learn more</dees-button>
+              >Learn more</idp-button>
+              <idp-button
+                variant="ghost"
+                @click=${() => window.open('https://code.foss.global/idp.global/app', '_blank')}
+              >Source code</idp-button>
             </div>
           </div>
         </div>