Add Christmas theme and snow effects for December

Introduces a Christmas theme that activates in December, including themed colors, subtle background patterns, and snowflake effects on loading screens. Adds a reusable SnowLoader component and utility for December detection. Updates layout and loading components to conditionally apply decorations and styles only during December.

components/christmas-decorations.tsx

@@ -1,21 +1,31 @@
 "use client"
 
 import { useEffect, useState } from "react"
+import { isDecember } from "@/lib/utils/christmas"
 
 export function ChristmasDecorations() {
   const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number }>>([])
+  const [isDec, setIsDec] = useState(false)
 
   useEffect(() => {
-    // Generate snowflakes
-    const flakes = Array.from({ length: 30 }, (_, i) => ({
-      id: i,
-      left: Math.random() * 100,
-      delay: Math.random() * 5,
-      duration: 8 + Math.random() * 4,
-    }))
-    setSnowflakes(flakes)
+    setIsDec(isDecember())
+    
+    if (isDecember()) {
+      // Generate snowflakes
+      const flakes = Array.from({ length: 30 }, (_, i) => ({
+        id: i,
+        left: Math.random() * 100,
+        delay: Math.random() * 5,
+        duration: 8 + Math.random() * 4,
+      }))
+      setSnowflakes(flakes)
+    }
   }, [])
 
+  if (!isDec) {
+    return null
+  }
+
   return (
     <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
       {/* Snowflakes */}

components/dashboard/page-loading.tsx

@@ -3,6 +3,7 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import { Card } from "@/components/ui/card";
 import { Loader2 } from "lucide-react";
+import { SnowLoader } from "@/components/snow-loader";
 
 interface PageLoadingProps {
   title?: string;
@@ -30,6 +31,7 @@ export default function PageLoading({
 
       {/* Main content skeleton */}
       <Card className="relative overflow-hidden">
+        <SnowLoader className="z-0" count={25} />
         <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
           <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg shadow-sm">
             <Loader2 className="h-10 w-10 animate-spin text-primary mb-3" />

components/snow-loader.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { isDecember } from "@/lib/utils/christmas"
+
+interface SnowLoaderProps {
+  className?: string;
+  count?: number;
+}
+
+export function SnowLoader({ className = "", count = 20 }: SnowLoaderProps) {
+  const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number; size: number }>>([])
+  const [isDec, setIsDec] = useState(false)
+
+  useEffect(() => {
+    setIsDec(isDecember())
+    
+    if (isDecember()) {
+      // Generate snowflakes
+      const flakes = Array.from({ length: count }, (_, i) => ({
+        id: i,
+        left: Math.random() * 100,
+        delay: Math.random() * 3,
+        duration: 5 + Math.random() * 3,
+        size: 0.5 + Math.random() * 0.5,
+      }))
+      setSnowflakes(flakes)
+    }
+  }, [count])
+
+  if (!isDec) {
+    return null
+  }
+
+  return (
+    <div className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}>
+      {snowflakes.map((flake) => (
+        <div
+          key={flake.id}
+          className="absolute top-0 text-white/70 text-xs animate-snowflake"
+          style={{
+            left: `${flake.left}%`,
+            animationDelay: `${flake.delay}s`,
+            animationDuration: `${flake.duration}s`,
+            fontSize: `${flake.size}rem`,
+          }}
+        >
+          ❄
+        </div>
+      ))}
+    </div>
+  )
+}
+