feat(dashboard): restyle dashboard in black-white theme

src/app/components/dashboard/dashboard.css

@@ -1,16 +1,58 @@
-.dashboard-container {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
+:host {
+  display: block;
+  min-height: 100vh;
+  background: #f4f4f4;
+  color: #0a0a0a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.noise {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.02;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
 
-header {
+.dashboard-shell {
+  position: relative;
+  z-index: 1;
+  min-height: 100vh;
+}
+
+.hero {
+  background: #050505;
+  color: #f7f7f7;
+  padding: 28px 32px 44px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.hero-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 40px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 20px;
+  gap: 16px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.brand-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: #f7f7f7;
+  color: #050505;
+  display: grid;
+  place-items: center;
 }
 
 nav {
@@ -25,59 +67,123 @@ nav {
 }
 
 .logout-btn {
-  background-color: #f44336;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  background: transparent;
+  color: #f7f7f7;
+  border-radius: 10px;
+  padding: 9px 14px;
   cursor: pointer;
 }
 
+.logout-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.hero-copy {
+  margin-top: 24px;
+  max-width: 760px;
+}
+
+.hero-copy h1 {
+  margin: 0 0 10px;
+  font-size: 42px;
+  line-height: 1.1;
+}
+
+.hero-copy p {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.65;
+  color: rgba(247, 247, 247, 0.75);
+}
+
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 30px 32px 40px;
+}
+
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.section-header h2 {
+  margin: 0;
+  font-size: 28px;
 }
 
 .create-btn {
-  background-color: #4CAF50;
-  color: white;
   text-decoration: none;
-  padding: 10px 20px;
-  border-radius: 4px;
-  font-weight: bold;
+  background: #050505;
+  color: #f7f7f7;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-weight: 600;
+}
+
+.create-btn:hover {
+  opacity: 0.92;
 }
 
 .workspace-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+  gap: 16px;
 }
 
 .workspace-card {
-  border: 1px solid #ddd;
-  padding: 20px;
-  border-radius: 8px;
-  background-color: white;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  transition: transform 0.2s;
+  background: #ffffff;
+  border: 1px solid #e2e2e2;
+  border-radius: 12px;
+  padding: 18px;
 }
 
-.workspace-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+.workspace-card h3 {
+  margin: 0 0 8px;
+  font-size: 20px;
 }
 
-.workspace-card h3 {
-  margin-top: 0;
-  color: #333;
+.workspace-card p {
+  margin: 0 0 12px;
+  color: #444;
+}
+
+.workspace-card small {
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
 .empty-state {
+  border: 1px dashed #bcbcbc;
+  border-radius: 12px;
+  background: #fff;
+  padding: 26px;
   text-align: center;
-  padding: 40px;
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  color: #666;
+}
+
+.empty-state h3 {
+  margin: 0 0 8px;
+  font-size: 20px;
+}
+
+.empty-state p {
+  margin: 0;
+  color: #555;
+}
+
+@media (max-width: 768px) {
+  .hero,
+  .content {
+    padding-left: 18px;
+    padding-right: 18px;
+  }
+
+  .hero-copy h1 {
+    font-size: 32px;
+  }
 }

src/app/components/dashboard/dashboard.html

@@ -1,13 +1,30 @@
-<div class="dashboard-container">
-  <header>
-    <h1>Sentinent Dashboard</h1>
-    <button (click)="logout()" class="logout-btn">Logout</button>
-  </header>
+<div class="dashboard-shell">
+  <div class="noise"></div>
 
-  <section class="workspaces-section">
+  <section class="hero">
+    <div class="hero-top">
+      <div class="brand">
+        <div class="brand-icon">
+          <svg width="22" height="22" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
+            <rect x="4" y="6" width="20" height="8" rx="1.5"></rect>
+            <rect x="8" y="18" width="20" height="8" rx="1.5"></rect>
+          </svg>
+        </div>
+        <span>Sentinent</span>
+      </div>
+      <button (click)="logout()" class="logout-btn">Logout</button>
+    </div>
+
+    <div class="hero-copy">
+      <h1>Decision Workspace Dashboard</h1>
+      <p>Track all active workspaces in one place with clean structure and minimal noise.</p>
+    </div>
+  </section>
+
+  <section class="content">
     <div class="section-header">
       <h2>Your Workspaces</h2>
-      <a routerLink="/workspace/create" class="create-btn">Create New Workspace</a>
+      <a routerLink="/workspace/create" class="create-btn">Create Workspace</a>
     </div>
 
     <div class="workspace-list">
@@ -23,5 +40,12 @@ <h3>{{ ws.name }}</h3>
     <div *ngIf="workspaces.length === 0" class="empty-state">
       <p>No workspaces found. Create one to get started!</p>
     </div>
+
+    <ng-template #empty>
+      <div class="empty-state">
+        <h3>No workspaces yet</h3>
+        <p>Create your first workspace to get started.</p>
+      </div>
+    </ng-template>
   </section>
 </div>