+ {/* Cinematic Image Cross-fade */}
+
+
+ {/* Fallback Gradient */}
+
+
+ {/* Main Image */}
+
+
+ {/* Vignette & Grain */}
+
+
+
+
+
+ {/* Overlay Glows */}
+
+
+ {/* Subtle Particles / Effects (conditionally rendered for extra depth) */}
+
+ {config.effect === "rain" &&
+ particles.slice(0, 15).map((p) => (
+
+ ))}
+
+ {config.effect === "sparkle" &&
+ particles.map((p) => (
+
+ ))}
+
+ {config.effect === "bokeh" &&
+ particles.slice(0, 10).map((p) => (
+
+ ))}
+
+
+ {/* Dark Overlay for content readability */}
+
+
+ );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 000000000..2227a2535
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion } from "framer-motion";
+import { Film, Sparkles, Bookmark, Home } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const navLinks = [
+ { href: "/", label: "Home", icon: Home },
+ { href: "/create", label: "Create", icon: Sparkles },
+ { href: "/saved", label: "Saved", icon: Bookmark },
+];
+
+export default function Navbar() {
+ const pathname = usePathname();
+
+ return (
+