feat: Enhance dashboard UI with Spider-Man theme

- Added Spider-Man themed watermarks and gradients to the dashboard components.
- Updated color scheme for various dashboard elements to match the Spider-Man theme.
- Introduced new styles and animations for loading states and visual elements.
- Refactored existing components to incorporate the new design elements, including charts and cards.
- Updated global styles to support the new theme and added custom fonts.
- Adjusted layout and responsiveness for better user experience.

.gitattributes

@@ -0,0 +1 @@
+rust-ai/target/** linguist-generated=true -diff -merge

.gitignore

@@ -55,9 +55,3 @@ browser-use-service/.env
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.git
-.git_bak
-node_modules
-target
-# rust build artifacts
-rust-ai/target/

src/app/(dashboard)/dashboard/page.tsx

@@ -62,8 +62,15 @@ export default function DashboardPage() {
     : []
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 relative">
-      <PageHeader title="Dashboard" description="Overview of your sales pipeline">
+      {/* Daily Bugle watermark */}
+      <div className="absolute top-12 right-4 pointer-events-none select-none z-0 opacity-[0.04] dark:opacity-[0.06]">
+        <span className="text-[96px] font-['Bangers',cursive] leading-none text-[#CC0000] dark:text-[#FF1111] tracking-wider">
+          DAILY BUGLE
+        </span>
+      </div>
+
+      <PageHeader title={<span style={{fontFamily:"'Bangers',cursive"}}>Dashboard</span>} description="Overview of your sales pipeline">
         <Select value={period} onValueChange={setPeriod}>
           <SelectTrigger className="h-9 w-[160px]">
             <ListFilter className="mr-2 h-4 w-4" />
@@ -78,7 +85,7 @@ export default function DashboardPage() {
         </Select>
       </PageHeader>
 
-      <p className="text-xs font-semibold tracking-widest uppercase text-muted-foreground">Pipeline Overview</p>
+      <p className="text-xs font-semibold tracking-widest uppercase text-[#888888] dark:text-[#666666]">Pipeline Overview</p>
 
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
         {stats
@@ -89,7 +96,7 @@ export default function DashboardPage() {
         }
       </div>
 
-      <p className="text-xs font-semibold tracking-widest uppercase text-muted-foreground">Analytics</p>
+      <p className="text-xs font-semibold tracking-widest uppercase text-[#888888] dark:text-[#666666]">Analytics</p>
 
       <div className="grid gap-6 lg:grid-cols-2">
         <LeadStatusChart data={stats?.statusDistribution ?? []} />

src/app/globals.css

@@ -1,7 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@keyframes loading {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}
+
 :root {
   --background: 210 40% 98%;
   --foreground: 222.2 84% 4.9%;
@@ -9,7 +16,7 @@
   --card-foreground: 222.2 84% 4.9%;
   --popover: 0 0% 100%;
   --popover-foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;
+  --primary: 0 100% 40%;
   --primary-foreground: 210 40% 98%;
   --secondary: 210 40% 96.1%;
   --secondary-foreground: 222.2 47.4% 11.2%;
@@ -22,14 +29,14 @@
   --border: 214.3 31.8% 91.4%;
   --input: 214.3 31.8% 91.4%;
   --ring: 221.2 83.2% 53.3%;
-  --sidebar: 0 0% 100%;
+  --sidebar: 222.2 84% 4.9%;
-  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
-  --sidebar-primary: 221.2 83.2% 53.3%;
+  --sidebar-primary: 217.2 91.2% 59.8%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 210 40% 96.1%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
-  --sidebar-accent-foreground: 222.2 84% 4.9%;
+  --sidebar-accent-foreground: 210 40% 98%;
-  --sidebar-border: 214.3 31.8% 91.4%;
+  --sidebar-border: 217.2 32.6% 17.5%;
-  --sidebar-ring: 221.2 83.2% 53.3%;
+  --sidebar-ring: 224.3 76.3% 48%;
   --radius: 0.5rem;
 }
 
@@ -40,7 +47,7 @@
   --card-foreground: 210 40% 98%;
   --popover: 222.2 84% 4.9%;
   --popover-foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;
+  --primary: 0 100% 53%;
   --primary-foreground: 222.2 47.4% 11.2%;
   --secondary: 217.2 32.6% 17.5%;
   --secondary-foreground: 210 40% 98%;
@@ -52,15 +59,267 @@
   --destructive-foreground: 210 40% 98%;
   --border: 217.2 32.6% 17.5%;
   --input: 217.2 32.6% 17.5%;
-  --ring: 224.3 76.3% 48%;
+  --ring: 0 100% 53%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-foreground: 210 40% 98%;
-  --sidebar-primary: 217.2 91.2% 59.8%;
+  --sidebar-primary: 0 100% 53%;
   --sidebar-primary-foreground: 0 0% 100%;
   --sidebar-accent: 217.2 32.6% 17.5%;
   --sidebar-accent-foreground: 210 40% 98%;
   --sidebar-border: 217.2 32.6% 17.5%;
-  --sidebar-ring: 224.3 76.3% 48%;
+  --sidebar-ring: 0 100% 53%;
+}
+
+.ocean {
+  --primary: 187 75% 42%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 187 75% 42%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 187 75% 42%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 187 30% 94%;
+  --sidebar-accent-foreground: 187 50% 20%;
+  --sidebar-border: 187 20% 88%;
+  --sidebar-ring: 187 75% 42%;
+}
+
+.dark.ocean {
+  --primary: 187 75% 50%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 187 75% 50%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 187 75% 55%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 187 75% 50%;
+}
+
+.forest {
+  --primary: 142 76% 36%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 142 76% 36%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 142 76% 36%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 142 30% 94%;
+  --sidebar-accent-foreground: 142 50% 20%;
+  --sidebar-border: 142 20% 88%;
+  --sidebar-ring: 142 76% 36%;
+}
+
+.dark.forest {
+  --primary: 142 76% 44%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 142 76% 44%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 142 76% 50%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 142 76% 44%;
+}
+
+.sunset {
+  --primary: 24 95% 53%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 24 95% 53%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 24 95% 53%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 24 30% 94%;
+  --sidebar-accent-foreground: 24 50% 20%;
+  --sidebar-border: 24 20% 88%;
+  --sidebar-ring: 24 95% 53%;
+}
+
+.dark.sunset {
+  --primary: 24 95% 58%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 24 95% 58%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 24 95% 65%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 24 95% 58%;
+}
+
+.midnight {
+  --primary: 230 75% 55%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 230 75% 55%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 230 75% 55%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 230 30% 94%;
+  --sidebar-accent-foreground: 230 50% 20%;
+  --sidebar-border: 230 20% 88%;
+  --sidebar-ring: 230 75% 55%;
+}
+
+.dark.midnight {
+  --primary: 230 75% 62%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 230 75% 62%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 230 75% 65%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 230 75% 62%;
+}
+
+.rose {
+  --primary: 346 77% 50%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 346 77% 50%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 346 77% 50%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 346 30% 94%;
+  --sidebar-accent-foreground: 346 50% 20%;
+  --sidebar-border: 346 20% 88%;
+  --sidebar-ring: 346 77% 50%;
+}
+
+.dark.rose {
+  --primary: 346 77% 58%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 346 77% 58%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 346 77% 60%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 346 77% 58%;
+}
+
+.amber {
+  --primary: 38 92% 50%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 38 92% 50%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 38 92% 50%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 38 30% 94%;
+  --sidebar-accent-foreground: 38 50% 20%;
+  --sidebar-border: 38 20% 88%;
+  --sidebar-ring: 38 92% 50%;
+}
+
+.dark.amber {
+  --primary: 38 92% 56%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 38 92% 56%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 38 92% 60%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 38 92% 56%;
+}
+
+.violet {
+  --primary: 262 83% 58%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 262 83% 58%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 262 83% 58%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 262 30% 94%;
+  --sidebar-accent-foreground: 262 50% 20%;
+  --sidebar-border: 262 20% 88%;
+  --sidebar-ring: 262 83% 58%;
+}
+
+.dark.violet {
+  --primary: 262 83% 65%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 262 83% 65%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 262 83% 68%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 262 83% 65%;
+}
+
+.slate {
+  --primary: 215 20% 45%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 215 20% 45%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 215 20% 45%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 215 20% 94%;
+  --sidebar-accent-foreground: 215 50% 20%;
+  --sidebar-border: 215 20% 88%;
+  --sidebar-ring: 215 20% 45%;
+}
+
+.dark.slate {
+  --primary: 215 20% 60%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 215 20% 60%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 215 20% 65%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 215 20% 60%;
+}
+
+.ruby {
+  --primary: 351 85% 45%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 351 85% 45%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-primary: 351 85% 45%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 351 30% 94%;
+  --sidebar-accent-foreground: 351 50% 20%;
+  --sidebar-border: 351 20% 88%;
+  --sidebar-ring: 351 85% 45%;
+}
+
+.dark.ruby {
+  --primary: 351 85% 52%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 351 85% 52%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 351 85% 55%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 351 85% 52%;
 }
 
 .ocean {

src/components/dashboard/lead-status-chart.tsx

@@ -68,11 +68,24 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
       transition={{ duration: 0.3, delay: 0.2 }}
       className="h-full"
     >
-      <Card className="h-full">
+      <Card className="h-full relative overflow-hidden">
+        {/* Spider watermark */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-0 opacity-[0.03] dark:opacity-[0.05]">
+          <svg width="220" height="220" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <line x1="90" y1="0" x2="90" y2="180" stroke="#CC0000" strokeWidth="1" />
+            <line x1="0" y1="90" x2="180" y2="90" stroke="#CC0000" strokeWidth="1" />
+            <line x1="30" y1="30" x2="150" y2="150" stroke="#0033CC" strokeWidth="1" />
+            <line x1="150" y1="30" x2="30" y2="150" stroke="#0033CC" strokeWidth="1" />
+            <circle cx="90" cy="90" r="40" stroke="#CC0000" strokeWidth="1" fill="none" />
+            <circle cx="90" cy="90" r="60" stroke="#0033CC" strokeWidth="0.8" fill="none" strokeDasharray="4 4" />
+            <circle cx="90" cy="90" r="80" stroke="#CC0000" strokeWidth="0.5" fill="none" strokeDasharray="2 6" />
+          </svg>
+        </div>
+
         <CardHeader>
           <CardTitle>Lead Status</CardTitle>
         </CardHeader>
-        <CardContent className="flex flex-1 flex-col">
+        <CardContent className="flex flex-1 flex-col relative z-10">
           <div className="flex flex-1 flex-col items-center justify-center">
             {/* Donut */}
             <svg width="100%" height="100%" viewBox="0 0 320 320" className="max-h-full overflow-visible" style={{ maxWidth: "280px" }}>

src/components/dashboard/leads-per-month-chart.tsx

@@ -16,8 +16,8 @@ interface LeadsPerMonthChartProps {
   data: IntervalData[]
 }
 
-const NEW_LEADS = "#0d9488"
+const NEW_LEADS = "#CC0000"
-const CLOSED = "#c9a96e"
+const CLOSED = "#0033CC"
 
 export function LeadsPerMonthChart({ data: initialData }: LeadsPerMonthChartProps) {
   const [year, setYear] = useState(new Date().getFullYear())
@@ -153,11 +153,11 @@ export function LeadsPerMonthChart({ data: initialData }: LeadsPerMonthChartProp
             >
               <defs>
                 <linearGradient id="newLeadsGrad" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#0d9488" />
+                  <stop offset="0%" stopColor="#FF1111" />
                   <stop offset="100%" stopColor={NEW_LEADS} />
                 </linearGradient>
                 <linearGradient id="closedGrad" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#e8d5a3" />
+                  <stop offset="0%" stopColor="#1144FF" />
                   <stop offset="100%" stopColor={CLOSED} />
                 </linearGradient>
                 <filter id="shadowNew">

src/components/dashboard/stat-card-skeleton.tsx

@@ -1,20 +1,17 @@
 "use client"
 
-import { Card, CardContent } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
-
 export function StatCardSkeleton() {
   return (
-    <Card className="h-full">
+    <div className="col-span-full flex flex-col items-center justify-center py-20">
-      <CardContent className="p-6 flex flex-col">
+      <p className="text-[#CC0000] dark:text-[#FF1111] text-5xl font-['Bangers',cursive] animate-pulse">
-        <div className="flex items-center justify-between">
+        THWIP!
-          <div className="space-y-2">
+      </p>
-            <Skeleton className="h-4 w-24" />
+      <p className="text-[#444444] dark:text-[#AAAAAA] text-sm mt-3">
-            <Skeleton className="h-8 w-16" />
+        Loading your data...
+      </p>
+      <div className="w-48 h-1 rounded-full overflow-hidden bg-[#E0E0E0] dark:bg-[#222222] mt-4">
+        <div className="w-full h-full rounded-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] animate-[loading_1.5s_ease-in-out_infinite]" />
       </div>
-          <Skeleton className="h-12 w-12 rounded-xl" />
     </div>
-      </CardContent>
-    </Card>
   )
 }

src/components/dashboard/stat-card.tsx

@@ -19,12 +19,12 @@ interface StatCardProps {
 }
 
 const cardColors: Record<string, { bg: string; text: string; glow: string; accent: string }> = {
-  "Total Leads":      { bg: "bg-cyan-500/10",   text: "text-cyan-600 dark:text-cyan-400",     glow: "via-[rgba(6,182,212,0.25)]",  accent: "#06b6d4" },
+  "Total Leads":      { bg: "bg-[#CC0000]/10",   text: "text-[#CC0000] dark:text-[#FF1111]",     glow: "via-[rgba(204,0,0,0.25)]",  accent: "#CC0000" },
-  "Open Leads":       { bg: "bg-blue-500/10",   text: "text-blue-600 dark:text-blue-400",     glow: "via-[rgba(59,130,246,0.25)]", accent: "#3b82f6" },
+  "Open Leads":       { bg: "bg-[#0033CC]/10",   text: "text-[#0033CC] dark:text-[#1144FF]",     glow: "via-[rgba(0,51,204,0.25)]", accent: "#0033CC" },
-  "Contacted":        { bg: "bg-amber-500/10",  text: "text-amber-600 dark:text-amber-400",   glow: "via-[rgba(245,158,11,0.25)]", accent: "#f59e0b" },
+  "Contacted":        { bg: "bg-[#CC0000]/10",   text: "text-[#CC0000] dark:text-[#FF1111]",    glow: "via-[rgba(204,0,0,0.25)]",  accent: "#CC0000" },
-  "Pending":          { bg: "bg-violet-500/10", text: "text-violet-600 dark:text-violet-400", glow: "via-[rgba(139,92,246,0.25)]", accent: "#8b5cf6" },
+  "Pending":          { bg: "bg-[#0033CC]/10",   text: "text-[#0033CC] dark:text-[#1144FF]",    glow: "via-[rgba(0,51,204,0.25)]", accent: "#0033CC" },
-  "Closed":           { bg: "bg-yellow-500/10", text: "text-yellow-600 dark:text-yellow-400", glow: "via-[rgba(234,179,8,0.25)]",  accent: "#eab308" },
+  "Closed":           { bg: "bg-[#CC0000]/10",   text: "text-[#CC0000] dark:text-[#FF1111]",    glow: "via-[rgba(204,0,0,0.25)]",  accent: "#CC0000" },
-  "Conversion Rate":  { bg: "bg-rose-500/10",   text: "text-rose-600 dark:text-rose-400",     glow: "via-[rgba(244,63,94,0.25)]",  accent: "#f43f5e" },
+  "Conversion Rate":  { bg: "bg-[#0033CC]/10",   text: "text-[#0033CC] dark:text-[#1144FF]",    glow: "via-[rgba(0,51,204,0.25)]", accent: "#0033CC" },
 }
 
 function computeGoal(max: number): number {
@@ -107,6 +107,10 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
   const { path: sparkPath, area: sparkArea, goal, gridLines } = buildSparklineSvg()
   const sparkColor = color.accent
 
+  const isRed = index % 2 === 0
+  const stripColor = isRed ? "from-[#CC0000] via-[#FF1111] to-[#CC0000]" : "from-[#0033CC] via-[#1144FF] to-[#0033CC]"
+  const stripGlow = isRed ? "shadow-[#CC0000]/20" : "shadow-[#0033CC]/20"
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -114,16 +118,50 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
       transition={{ duration: 0.3, delay: index * 0.05 }}
       className="relative"
     >
-      <Card className="group h-full hover:shadow-md transition-all duration-200">
+      {/* Web overlay decorative */}
+      <div className="absolute inset-0 pointer-events-none z-0 opacity-[0.03] dark:opacity-[0.06]">
+        <svg width="100%" height="100%" viewBox="0 0 180 180" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <line key={`wl-${i}`} x1="0" y1={i * 36} x2="180" y2={i * 36} stroke="#CC0000" strokeWidth="0.5" />
+          ))}
+          {Array.from({ length: 6 }).map((_, i) => (
+            <line key={`wc-${i}`} x1={i * 36} y1="0" x2={i * 36} y2="180" stroke="#CC0000" strokeWidth="0.5" />
+          ))}
+          {Array.from({ length: 6 }).map((_, i) => (
+            <line key={`wd-${i}`} x1="0" y1={i * 36} x2={180 - i * 36} y2="180" stroke="#0033CC" strokeWidth="0.5" />
+          ))}
+        </svg>
+      </div>
+
+      {/* Comic action lines on hover */}
+      <div className="absolute -inset-2 pointer-events-none z-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+        <svg width="100%" height="100%" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <line x1="100" y1="0" x2="100" y2="20" stroke="#CC0000" strokeWidth="2" strokeLinecap="round" />
+          <line x1="100" y1="180" x2="100" y2="200" stroke="#CC0000" strokeWidth="2" strokeLinecap="round" />
+          <line x1="0" y1="100" x2="20" y2="100" stroke="#CC0000" strokeWidth="2" strokeLinecap="round" />
+          <line x1="180" y1="100" x2="200" y2="100" stroke="#CC0000" strokeWidth="2" strokeLinecap="round" />
+          <line x1="30" y1="30" x2="44" y2="44" stroke="#0033CC" strokeWidth="1.5" strokeLinecap="round" />
+          <line x1="170" y1="30" x2="156" y2="44" stroke="#0033CC" strokeWidth="1.5" strokeLinecap="round" />
+          <line x1="30" y1="170" x2="44" y2="156" stroke="#0033CC" strokeWidth="1.5" strokeLinecap="round" />
+          <line x1="170" y1="170" x2="156" y2="156" stroke="#0033CC" strokeWidth="1.5" strokeLinecap="round" />
+          <circle cx="100" cy="100" r="90" stroke="#CC0000" strokeWidth="0.5" strokeDasharray="4 4" opacity="0.4" />
+          <circle cx="100" cy="100" r="80" stroke="#0033CC" strokeWidth="0.5" strokeDasharray="3 5" opacity="0.3" />
+        </svg>
+      </div>
+
+      <Card className="group h-full hover:shadow-xl transition-all duration-200 relative z-10 overflow-hidden">
+        {/* Red/Blue gradient top strip */}
+        <div className={`h-1 w-full bg-gradient-to-r ${stripColor} ${stripGlow} shadow-sm`} />
+
         <CardContent className="p-6 flex flex-col">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-sm font-medium text-muted-foreground">{title}</p>
-              <p className="text-3xl font-bold tracking-tight">
+              <p className="text-3xl font-bold tracking-tight text-[#111111] dark:text-white">
                 {isNumeric ? display : value}
               </p>
               {description && (
-                <p className="text-xs text-muted-foreground">{description}</p>
+                <p className="text-xs text-[#888888] dark:text-[#666666]">{description}</p>
               )}
               {trend && (
                 <span className={cn(
@@ -134,8 +172,8 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
                 </span>
               )}
             </div>
-            <div className={cn("flex h-12 w-12 items-center justify-center rounded-xl shrink-0", color.bg)}>
+            <div className={`flex h-12 w-12 items-center justify-center rounded-xl shrink-0 ${color.bg}`}>
-              <Icon className={cn("h-6 w-6", color.text)} />
+              <Icon className={`h-6 w-6 ${color.text}`} />
             </div>
           </div>
 
@@ -179,9 +217,9 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
           {title === "Conversion Rate" && conversionRate !== undefined && (
             <div className="mt-3">
               <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
-                <div className="h-full rounded-full bg-gradient-to-r from-[#f43f5e] to-[#fda4af]" style={{ width: `${Math.min(conversionRate, 100)}%` }} />
+                <div className="h-full rounded-full bg-gradient-to-r from-[#CC0000] to-[#0033CC]" style={{ width: `${Math.min(conversionRate, 100)}%` }} />
               </div>
-              <p className="text-xs text-muted-foreground mt-1">{conversionRate}% conversion rate</p>
+              <p className="text-xs text-[#888888] dark:text-[#666666] mt-1">{conversionRate}% conversion rate</p>
             </div>
           )}
         </CardContent>

src/components/layout/app-shell.tsx

@@ -34,7 +34,52 @@ export function AppShell({ children }: AppShellProps) {
   }
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-[#F8F8F8] dark:bg-[#0A0A0A] relative overflow-hidden"
+      style={{
+        backgroundImage: "radial-gradient(circle, #CC000010 1px, transparent 1px), radial-gradient(circle, #0033CC06 1px, transparent 1px)",
+        backgroundSize: "28px 28px, 14px 14px",
+        backgroundPosition: "0 0, 7px 7px",
+      }}
+    >
+      {/* Spider-Man top gradient bar */}
+      <div className="fixed top-0 left-0 right-0 h-[3px] w-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] dark:from-[#FF1111] dark:via-[#FFFFFF] dark:to-[#1144FF] z-50" />
+
+      {/* Corner spider webs */}
+      <div className="hidden lg:block fixed top-0 left-0 pointer-events-none z-0 opacity-[0.07] dark:opacity-[0.12]">
+        <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <line x1="0" y1="0" x2="180" y2="0" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="60" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="120" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="120" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="60" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="0" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <path d="M0,30 Q30,30 30,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,60 Q60,60 60,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,90 Q90,90 90,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,120 Q120,120 120,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,150 Q150,150 150,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,180 Q180,180 180,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+        </svg>
+      </div>
+      <div className="hidden lg:block fixed top-0 right-0 pointer-events-none z-0 opacity-[0.07] dark:opacity-[0.12]">
+        <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: "scaleX(-1)" }}>
+          <line x1="0" y1="0" x2="180" y2="0" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="60" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="120" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="120" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="60" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="0" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <path d="M0,30 Q30,30 30,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,60 Q60,60 60,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,90 Q90,90 90,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,120 Q120,120 120,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,150 Q150,150 150,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,180 Q180,180 180,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+        </svg>
+      </div>
+
       <SystemMonitor />
       <Sidebar
         collapsed={sidebarCollapsed}

src/components/layout/topbar.tsx

@@ -67,11 +67,18 @@ export function Topbar({ onMenuClick }: TopbarProps) {
     .toUpperCase();
 
   return (
-    <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
+    <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-white dark:bg-[#141414] px-4 lg:px-6 relative overflow-hidden">
+      {/* Red/Blue diagonal split accent */}
+      <div className="absolute right-0 top-0 bottom-0 w-[6px] bg-gradient-to-b from-[#CC0000] via-[#0033CC] to-[#CC0000] dark:from-[#FF1111] dark:via-[#1144FF] dark:to-[#FF1111]" />
+
       {/* Logo */}
       <div className="flex items-center gap-2 mr-2 shrink-0">
-        <div className="w-3 h-3 rounded-full bg-[#0d9488]" />
+        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <span className="text-[#0d9488] font-bold text-sm tracking-wide">
+          <circle cx="14" cy="14" r="13" fill="#CC0000" />
+          <circle cx="14" cy="14" r="8" fill="#0033CC" />
+          <path d="M14 6 L16 12 L22 12 L17 15 L19 21 L14 17 L9 21 L11 15 L6 12 L12 12 Z" fill="white" />
+        </svg>
+        <span className="text-[#CC0000] dark:text-[#FF1111] font-bold text-sm tracking-wide">
           CRM
         </span>
       </div>
@@ -88,10 +95,10 @@ export function Topbar({ onMenuClick }: TopbarProps) {
 
       {/* Search */}
       <div className="relative hidden flex-1 sm:block md:w-80">
-        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#888888] dark:text-[#666666]" />
         <Input
           placeholder="Search leads, companies..."
-          className="h-9 w-full max-w-sm pl-9 bg-muted/50"
+          className="h-9 w-full max-w-sm pl-9 bg-[#F0F0F0] dark:bg-[#1E1E1E] border-[#E0E0E0] dark:border-[#222222] text-[#111111] dark:text-white"
         />
       </div>
 

src/components/shared/page-header.tsx

@@ -19,8 +19,8 @@ export function PageHeader({ title, description, children, className }: PageHead
       className={cn("flex items-center justify-between pb-6", className)}
     >
       <div>
-        <h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#0d9488] pl-4">{title}</h1>
+        <h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#CC0000] dark:border-[#FF1111] pl-4 text-[#111111] dark:text-white">{title}</h1>
-        {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
+        {description && <p className="text-sm text-[#444444] dark:text-[#AAAAAA] mt-1">{description}</p>}
       </div>
       {children && <div className="flex items-center gap-3">{children}</div>}
     </motion.div>

src/data/dashboard.ts

@@ -30,11 +30,11 @@ export function getDashboardStats(period: string): DashboardStats {
     })
 
   return [
-    { name: "Open", value: statusCounts.open, color: "#3b82f6" },
+    { name: "Open", value: statusCounts.open, color: "#CC0000" },
-    { name: "Contacted", value: statusCounts.contacted, color: "#f59e0b" },
+    { name: "Contacted", value: statusCounts.contacted, color: "#0033CC" },
-    { name: "Pending", value: statusCounts.pending, color: "#8b5cf6" },
+    { name: "Pending", value: statusCounts.pending, color: "#FFFFFF" },
-    { name: "Closed", value: statusCounts.closed, color: "#10b981" },
+    { name: "Closed", value: statusCounts.closed, color: "#0033CC" },
-    { name: "Ignored", value: statusCounts.ignored, color: "#6B7280" },
+    { name: "Ignored", value: statusCounts.ignored, color: "#CC0000" },
   ]
 }