Spiderman Theme Fixed

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

@@ -98,6 +98,8 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
                     key={i}
                     d={arcPath(160, 160, oR, iR, s.start, s.end)}
                     fill={`url(#chart-grad-${i})`}
+                    stroke="#d4d4d4"
+                    strokeWidth="1"
                     opacity={hov !== null && !isH ? 0.3 : 1}
                     style={{
                       cursor: "pointer",

src/components/dashboard/recent-leads-table.tsx

@@ -9,11 +9,11 @@ import { Lead } from "@/types"
 import { ArrowRight } from "lucide-react"
 
 const statusStyles: Record<string, string> = {
-  open: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
-  contacted: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
-  pending: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
-  closed: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
-  ignored: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
+  open: "bg-white/40 text-gray-700 dark:text-gray-300 border-gray-300/50 dark:border-gray-600/50",
+  contacted: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+  pending: "bg-blue-900/10 text-blue-900 dark:text-blue-300 border-blue-900/20",
+  closed: "bg-blue-400/10 text-blue-600 dark:text-blue-300 border-blue-400/20",
+  ignored: "bg-black/10 text-black dark:text-gray-300 border-black/20 dark:border-black/40",
 }
 
 interface RecentLeadsTableProps {

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

@@ -1,6 +1,26 @@
 "use client"
 
+import { useWebsiteTheme } from "@/providers/website-theme-provider"
+
 export function StatCardSkeleton() {
+  const { websiteTheme } = useWebsiteTheme()
+
+  if (websiteTheme === "spidey") {
+    return (
+      <div className="col-span-full flex flex-col items-center justify-center py-20">
+        <p className="text-[#CC0000] dark:text-[#FF1111] text-5xl font-['Bangers',cursive] animate-pulse">
+          THWIP!
+        </p>
+        <p className="text-[#444444] dark:text-[#AAAAAA] text-sm mt-2">
+          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>
+      </div>
+    )
+  }
+
   return (
     <div className="col-span-full flex flex-col items-center justify-center py-20">
       <p className="text-[#444444] dark:text-[#AAAAAA] text-sm">

src/components/dashboard/stat-card.tsx

@@ -122,7 +122,17 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
         {/* 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">
+        {/* Action lines on hover */}
+        <div
+          className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23CC0000' stroke-width='0.4' opacity='0.15'%3E%3Cline x1='100' y1='100' x2='0' y2='0'/%3E%3Cline x1='100' y1='100' x2='50' y2='0'/%3E%3Cline x1='100' y1='100' x2='100' y2='0'/%3E%3Cline x1='100' y1='100' x2='150' y2='0'/%3E%3Cline x1='100' y1='100' x2='200' y2='0'/%3E%3Cline x1='100' y1='100' x2='200' y2='50'/%3E%3Cline x1='100' y1='100' x2='200' y2='100'/%3E%3Cline x1='100' y1='100' x2='200' y2='150'/%3E%3Cline x1='100' y1='100' x2='200' y2='200'/%3E%3Cline x1='100' y1='100' x2='150' y2='200'/%3E%3Cline x1='100' y1='100' x2='100' y2='200'/%3E%3Cline x1='100' y1='100' x2='50' y2='200'/%3E%3Cline x1='100' y1='100' x2='0' y2='200'/%3E%3Cline x1='100' y1='100' x2='0' y2='150'/%3E%3Cline x1='100' y1='100' x2='0' y2='100'/%3E%3Cline x1='100' y1='100' x2='0' y2='50'/%3E%3C/g%3E%3C/svg%3E")`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        />
+
+        <CardContent className="p-6 flex flex-col relative z-[1]">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-sm font-medium text-muted-foreground">{title}</p>