add Diwali FestiveModal

Author: parthsali

app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Analytics } from "@vercel/analytics/next";
 import { SITE_URL } from "@/lib/constants";
+import { FestiveModal } from "@/components/FestiveModal";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -74,6 +75,10 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           {children}
+          <FestiveModal
+            storageKey="diwali_2025_modal"
+            expireDate="2025-10-23"
+          />
           <Analytics />
         </ThemeProvider>
       </body>

components/FestiveModal.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface FestiveModalProps {
+  storageKey: string;
+  title?: string;
+  description?: string;
+  dismissible?: boolean;
+  expireDate?: string;
+}
+
+export const FestiveModal: React.FC<FestiveModalProps> = ({
+  storageKey,
+  title = "🪔 Happy Diwali!",
+  description = "Wishing you a joyous Diwali filled with lights, happiness, and prosperity.",
+  dismissible = true,
+  expireDate,
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const now = new Date();
+    if (expireDate && now > new Date(expireDate)) {
+      return;
+    }
+
+    const hasSeen = localStorage.getItem(storageKey);
+    if (!hasSeen) {
+      setVisible(true);
+      localStorage.setItem(storageKey, "true");
+    }
+  }, [storageKey, expireDate]);
+
+  if (!visible) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <motion.div
+          className="relative w-full max-w-lg rounded-2xl bg-background shadow-2xl overflow-hidden"
+          initial={{ scale: 0.8 }}
+          animate={{ scale: 1 }}
+          exit={{ scale: 0.8 }}
+          transition={{ duration: 0.5 }}
+        >
+          {dismissible && (
+            <button
+              onClick={() => setVisible(false)}
+              className="absolute top-3 right-3 p-2 rounded-full text-muted-foreground hover:bg-muted/20 transition z-50"
+              aria-label="Close"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          )}
+
+          <div className="relative p-8 flex flex-col items-center justify-center gap-4 text-center">
+            <h2 className="text-3xl font-bold text-foreground">{title}</h2>
+            <p className="text-muted-foreground">{description}</p>
+
+            {/* Crackers Animation */}
+            <div className="absolute inset-0 pointer-events-none overflow-hidden">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <motion.span
+                  key={i}
+                  className={`absolute w-2 h-2 bg-orange-400 rounded-full`}
+                  style={{
+                    left: `${10 + i * 15}%`,
+                    top: "90%",
+                  }}
+                  initial={{ opacity: 0, y: 0, scale: 0.5 }}
+                  animate={{ opacity: 1, y: -200, scale: 0.5 }}
+                  transition={{
+                    delay: i * 0.3,
+                    duration: 2,
+                    ease: "easeInOut",
+                    repeat: Infinity,
+                    repeatType: "loop",
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.12.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.24",
     "lucide-react": "^0.544.0",
     "next": "15.5.4",
     "next-themes": "^0.4.6",