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.

app/dashboard/analytics/loading.tsx

@@ -1,11 +1,13 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import Layout from "@/components/layout/layout";
+import { SnowLoader } from "@/components/snow-loader";
 
 export default function AnalyticsLoading() {
   return (
     <Layout>
-      <div className="space-y-6">
+      <div className="space-y-6 relative">
+        <SnowLoader className="z-0" count={25} />
         <div>
           <Skeleton className="h-8 w-64 mb-2" />
           <Skeleton className="h-4 w-96" />

app/dashboard/chats/[id]/loading.tsx

@@ -2,6 +2,7 @@ import Layout from "@/components/layout/layout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Loader2 } from "lucide-react";
+import { SnowLoader } from "@/components/snow-loader";
 
 export default function ChatDetailLoading() {
   return (
@@ -18,6 +19,7 @@ export default function ChatDetailLoading() {
 
         {/* Chat window */}
         <div className="border rounded-lg h-[calc(100vh-12rem)] flex flex-col relative">
+          <SnowLoader className="z-0" count={20} />
           {/* Chat messages area */}
           <div className="flex-1 p-4 overflow-hidden">
             <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">

app/dashboard/loading.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Skeleton } from "@/components/ui/skeleton";
 import Layout from "@/components/layout/layout";
 import { Loader2 } from "lucide-react";
+import { SnowLoader } from "@/components/snow-loader";
 
 export default function DashboardLoading() {
   return (
@@ -36,7 +37,8 @@ export default function DashboardLoading() {
 
         {/* Best selling products skeleton */}
         <Card className="border-border/40 shadow-sm mt-8 relative">
-          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <SnowLoader className="z-0" count={30} />
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
             <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg">
               <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
               <p className="text-lg font-medium">Loading dashboard data...</p>

app/dashboard/orders/[id]/loading.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import Layout from "@/components/layout/layout";
 import { Loader2 } from "lucide-react";
+import { SnowLoader } from "@/components/snow-loader";
 
 export default function OrderDetailsLoading() {
   return (
@@ -77,7 +78,8 @@ export default function OrderDetailsLoading() {
 
         {/* Loading overlay */}
         <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-[2px] pointer-events-none">
-          <div className="flex flex-col items-center justify-center p-6 rounded-lg">
+          <SnowLoader className="z-0" count={30} />
+          <div className="flex flex-col items-center justify-center p-6 rounded-lg z-10 relative">
             <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
             <p className="text-lg font-medium">Loading order details...</p>
           </div>

app/globals.css

@@ -317,8 +317,15 @@ body {
       hsl(var(--christmas-gold))) 1;
   }
 
-  /* Subtle Christmas pattern overlay */
+  /* Christmas-themed styles - only active in December */
-  body::before {
+  .christmas-theme {
+    /* Subtle Christmas pattern overlay */
+    --christmas-pattern: radial-gradient(circle at 20% 50%, hsl(var(--christmas-red) / 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, hsl(var(--christmas-green) / 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 40% 20%, hsl(var(--christmas-gold) / 0.03) 0%, transparent 50%);
+  }
+
+  .christmas-theme body::before {
     content: '';
     position: fixed;
     top: 0;
@@ -334,13 +341,13 @@ body {
   }
 
   /* Christmas-themed card hover effects */
-  .card:hover {
+  .christmas-theme .card:hover {
     border-color: hsl(var(--christmas-red) / 0.3);
     transition: border-color 0.3s ease;
   }
 
   /* Christmas-themed button hover effects */
-  button.bg-primary:hover {
+  .christmas-theme button.bg-primary:hover {
     background: linear-gradient(135deg, 
       hsl(var(--christmas-red)), 
       hsl(var(--christmas-green)));
@@ -348,13 +355,13 @@ body {
   }
 
   /* Christmas-themed link colors */
-  a:hover {
+  .christmas-theme a:hover {
     color: hsl(var(--christmas-red));
     transition: color 0.2s ease;
   }
 
   /* Subtle Christmas border on focus */
-  *:focus-visible {
+  .christmas-theme *:focus-visible {
     outline-color: hsl(var(--christmas-red));
   }
 }
@@ -398,28 +405,46 @@ body {
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    /* Christmas colors */
+    --christmas-red: 0 84% 50%;
+    --christmas-green: 142 76% 36%;
+    --christmas-gold: 43 96% 56%;
+  }
+
+  /* Apply Christmas colors only in December */
+  html.christmas-theme.dark,
+  html.christmas-theme .dark {
     --primary: 0 84% 50%;
     --primary-foreground: 0 0% 98%;
     --secondary: 142 76% 36%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
     --accent: 142 76% 36%;
     --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
     --border: 142 76% 20%;
-    --input: 0 0% 14.9%;
     --ring: 0 84% 50%;
     --chart-1: 0 84% 50%;
     --chart-2: 142 76% 36%;
     --chart-3: 43 96% 56%;
     --chart-4: 0 84% 50%;
     --chart-5: 142 76% 36%;
-    /* Christmas colors */
-    --christmas-red: 0 84% 50%;
-    --christmas-green: 142 76% 36%;
-    --christmas-gold: 43 96% 56%;
   }
 }
 

app/layout.tsx

@@ -7,6 +7,7 @@ import { NotificationProvider } from "@/lib/notification-context"
 import { Metadata, Viewport } from "next"
 import KeepOnlineWrapper from "@/components/layout/KeepOnlineWrapper"
 import { ChristmasDecorations } from "@/components/christmas-decorations"
+import { isDecember } from "@/lib/utils/christmas"
 
 const inter = Inter({ subsets: ["latin"] })
   
@@ -70,12 +71,14 @@ export default function RootLayout({
 }: {
   children: React.ReactNode
 }) {
+  const isDec = isDecember()
+  
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={isDec ? "christmas-theme" : ""}>
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
           <NotificationProvider>
-            <ChristmasDecorations />
+            {isDec && <ChristmasDecorations />}
             <Toaster 
               theme="dark" 
               richColors 

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
+    setIsDec(isDecember())
-    const flakes = Array.from({ length: 30 }, (_, i) => ({
+    
-      id: i,
+    if (isDecember()) {
-      left: Math.random() * 100,
+      // Generate snowflakes
-      delay: Math.random() * 5,
+      const flakes = Array.from({ length: 30 }, (_, i) => ({
-      duration: 8 + Math.random() * 4,
+        id: i,
-    }))
+        left: Math.random() * 100,
-    setSnowflakes(flakes)
+        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>
+  )
+}
+

lib/utils/christmas.ts

@@ -0,0 +1,9 @@
+/**
+ * Check if the current date is in December
+ * @returns true if current month is December (0-indexed, so 11 = December)
+ */
+export function isDecember(): boolean {
+  const now = new Date();
+  return now.getMonth() === 11; // December is month 11 (0-indexed)
+}
+