create all proj components also build main screen ui also create sambil dashbord

app/globals.css

@@ -1,9 +1,29 @@
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
 @import "tailwindcss";
 
-
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --blue: #1A73E8;
+  --blue-dark: #1557B0;
+  --blue-light: #EBF3FF;
+  --green: #34A853;
+  --green-light: #D1FAE5;
+  --amber: #F59E0B;
+  --amber-light: #FEF3C7;
+  --red: #E53935;
+  --red-light: #FEE2E2;
+  --text: #111827;
+  --text-muted: #6B7280;
+  --text-hint: #9CA3AF;
+  --border: #E5E7EB;
+  --surface: #F9FAFB;
+  --white: #fff;
+  --sidebar: 230px;
+  --radius: 10px;
+  --radius-sm: 7px;
+  --font: 'Plus Jakarta Sans', sans-serif;
+  --mono: 'IBM Plex Mono', monospace;
+  --background: #ECEEF2;
+  --foreground: #111827;
 }
 
 @theme inline {
@@ -13,15 +33,12 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; font-size: 14px; }
 body {
-  background: var(--background);
+  margin: 0;
+  min-height: 100vh;
+  background: #ECEEF2;
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font);
 }