From 546f27027baff579cfb534b5d298e0f793a82560 Mon Sep 17 00:00:00 2001
From: thuggys <scottheney68@gmail.com>
Date: Fri, 6 Jun 2025 10:57:06 -0400
Subject: [PATCH] gg

---
 app/components/background.tsx | 522 ++++++++++++++++++++++++++++++++++
 package-lock.json             | 217 +++++++-------
 package.json                  |   2 +-
 tailwind.config.js            |  11 +
 4 files changed, 646 insertions(+), 106 deletions(-)

diff --git a/app/components/background.tsx b/app/components/background.tsx
index 44773ae..e9e3e5a 100644
--- a/app/components/background.tsx
+++ b/app/components/background.tsx
@@ -156,6 +156,417 @@ const BgDarkGrid3 = () => {
   );
 };
 
+// New background components
+const BgAnimatedGradient = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-white">
+      <div className="absolute inset-0 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 opacity-30 animate-pulse" />
+      <div className="absolute inset-0 bg-gradient-to-br from-transparent via-white/50 to-transparent" />
+    </div>
+  );
+};
+
+const BgHexagonPattern = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-slate-50">
+      <div 
+        className="absolute inset-0 opacity-20"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='m36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+        }}
+      />
+    </div>
+  );
+};
+
+const BgFloatingOrbs = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-br from-blue-50 to-indigo-100">
+      <div className="absolute top-[10%] left-[10%] h-64 w-64 rounded-full bg-gradient-to-br from-blue-400 to-purple-600 opacity-20 blur-3xl animate-pulse" />
+      <div className="absolute top-[60%] right-[15%] h-48 w-48 rounded-full bg-gradient-to-br from-pink-400 to-red-600 opacity-25 blur-2xl animate-pulse [animation-delay:2s]" />
+      <div className="absolute bottom-[20%] left-[20%] h-32 w-32 rounded-full bg-gradient-to-br from-green-400 to-teal-600 opacity-30 blur-xl animate-pulse [animation-delay:4s]" />
+    </div>
+  );
+};
+
+const BgGhibliDream = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-b from-sky-200 via-emerald-50 to-green-100">
+      {/* Soft clouds */}
+      <div className="absolute top-[5%] left-[10%] h-16 w-32 rounded-full bg-white/70 blur-sm" />
+      <div className="absolute top-[8%] left-[15%] h-12 w-24 rounded-full bg-white/50 blur-sm" />
+      <div className="absolute top-[12%] right-[20%] h-20 w-40 rounded-full bg-white/60 blur-md" />
+      <div className="absolute top-[15%] right-[25%] h-14 w-28 rounded-full bg-white/40 blur-sm" />
+      <div className="absolute top-[20%] left-[60%] h-18 w-36 rounded-full bg-white/55 blur-md" />
+      
+      {/* Rolling hills */}
+      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-green-300/40 to-transparent rounded-t-full transform scale-x-150" />
+      <div className="absolute bottom-0 left-[20%] right-0 h-24 bg-gradient-to-t from-emerald-200/30 to-transparent rounded-t-full transform scale-x-125" />
+      
+      {/* Floating dandelion seeds */}
+      <div className="absolute top-[30%] left-[15%] h-1 w-1 bg-yellow-200 rounded-full animate-pulse" />
+      <div className="absolute top-[45%] left-[25%] h-0.5 w-0.5 bg-white rounded-full animate-pulse [animation-delay:1s]" />
+      <div className="absolute top-[55%] right-[30%] h-1 w-1 bg-yellow-100 rounded-full animate-pulse [animation-delay:2s]" />
+      <div className="absolute top-[35%] right-[20%] h-0.5 w-0.5 bg-green-100 rounded-full animate-pulse [animation-delay:1.5s]" />
+      <div className="absolute top-[65%] left-[40%] h-1 w-1 bg-yellow-200 rounded-full animate-pulse [animation-delay:3s]" />
+      
+      {/* Magical sparkles */}
+      <div className="absolute top-[25%] left-[70%] h-2 w-2 bg-yellow-300/60 rounded-full blur-sm animate-pulse [animation-delay:0.5s]" />
+      <div className="absolute top-[40%] right-[15%] h-1.5 w-1.5 bg-pink-200/70 rounded-full blur-sm animate-pulse [animation-delay:2.5s]" />
+      <div className="absolute top-[60%] left-[20%] h-2 w-2 bg-blue-200/50 rounded-full blur-sm animate-pulse [animation-delay:1.8s]" />
+      
+      {/* Soft overlay for dreamy effect */}
+      <div className="absolute inset-0 bg-gradient-to-b from-white/20 via-transparent to-green-50/30" />
+    </div>
+  );
+};
+
+const BgLiquidGradient = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-white">
+      <div className="absolute inset-0 bg-gradient-to-br from-violet-200/40 via-pink-200/40 to-cyan-200/40" />
+      <div className="absolute top-[20%] left-[10%] h-96 w-96 rounded-full bg-gradient-to-br from-blue-300/30 to-purple-400/30 blur-3xl animate-pulse" />
+      <div className="absolute bottom-[10%] right-[15%] h-80 w-80 rounded-full bg-gradient-to-br from-pink-300/30 to-orange-400/30 blur-3xl animate-pulse [animation-delay:2s]" />
+      <div className="absolute top-[50%] left-[50%] h-72 w-72 rounded-full bg-gradient-to-br from-cyan-300/25 to-teal-400/25 blur-2xl animate-pulse [animation-delay:4s]" />
+    </div>
+  );
+};
+
+const BgDarkNeon = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gray-900">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.3)_0%,transparent_50%)] opacity-50" />
+      <div className="absolute top-[20%] left-[20%] h-px w-32 bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-pulse" />
+      <div className="absolute top-[60%] right-[30%] h-px w-48 bg-gradient-to-r from-transparent via-purple-400 to-transparent animate-pulse [animation-delay:1s]" />
+      <div className="absolute bottom-[30%] left-[40%] h-px w-24 bg-gradient-to-r from-transparent via-pink-400 to-transparent animate-pulse [animation-delay:2s]" />
+    </div>
+  );
+};
+
+const BgMeshGradient = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-white">
+      <div className="absolute inset-0 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 opacity-30" />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/50 to-blue-200/50" />
+      <div className="absolute inset-0 bg-gradient-to-tr from-green-200/30 via-transparent to-yellow-200/30" />
+    </div>
+  );
+};
+
+const BgDarkParticles = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gray-950">
+      <div className="absolute top-[10%] left-[5%] h-1 w-1 bg-white rounded-full animate-pulse" />
+      <div className="absolute top-[25%] left-[15%] h-0.5 w-0.5 bg-blue-400 rounded-full animate-pulse [animation-delay:1s]" />
+      <div className="absolute top-[45%] left-[8%] h-1 w-1 bg-purple-400 rounded-full animate-pulse [animation-delay:2s]" />
+      <div className="absolute top-[65%] left-[12%] h-0.5 w-0.5 bg-pink-400 rounded-full animate-pulse [animation-delay:3s]" />
+      <div className="absolute top-[80%] left-[6%] h-1 w-1 bg-cyan-400 rounded-full animate-pulse [animation-delay:4s]" />
+      
+      <div className="absolute top-[15%] right-[10%] h-0.5 w-0.5 bg-white rounded-full animate-pulse [animation-delay:0.5s]" />
+      <div className="absolute top-[35%] right-[20%] h-1 w-1 bg-green-400 rounded-full animate-pulse [animation-delay:1.5s]" />
+      <div className="absolute top-[55%] right-[15%] h-0.5 w-0.5 bg-yellow-400 rounded-full animate-pulse [animation-delay:2.5s]" />
+      <div className="absolute top-[75%] right-[8%] h-1 w-1 bg-red-400 rounded-full animate-pulse [animation-delay:3.5s]" />
+      
+      <div className="absolute top-[30%] left-[50%] h-0.5 w-0.5 bg-indigo-400 rounded-full animate-pulse [animation-delay:1.2s]" />
+      <div className="absolute top-[70%] left-[45%] h-1 w-1 bg-teal-400 rounded-full animate-pulse [animation-delay:2.8s]" />
+      
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-gray-950/50 to-gray-950" />
+    </div>
+  );
+};
+
+const BgDottedPattern = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-br from-rose-50 to-teal-50">
+      <div 
+        className="absolute inset-0 opacity-30"
+        style={{
+          backgroundImage: 'radial-gradient(circle, #ec4899 1.5px, transparent 1.5px)',
+          backgroundSize: '30px 30px',
+        }}
+      />
+      <div 
+        className="absolute inset-0 opacity-20"
+        style={{
+          backgroundImage: 'radial-gradient(circle, #06b6d4 1px, transparent 1px)',
+          backgroundSize: '50px 50px',
+          backgroundPosition: '25px 25px',
+        }}
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-white/50 to-transparent" />
+    </div>
+  );
+};
+
+const BgBokehLights = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900">
+      <div className="absolute top-[15%] left-[10%] h-24 w-24 rounded-full bg-yellow-300/30 blur-xl animate-pulse" />
+      <div className="absolute top-[45%] right-[15%] h-32 w-32 rounded-full bg-pink-300/25 blur-2xl animate-pulse [animation-delay:1s]" />
+      <div className="absolute bottom-[30%] left-[25%] h-16 w-16 rounded-full bg-blue-300/35 blur-lg animate-pulse [animation-delay:2s]" />
+      <div className="absolute top-[25%] left-[60%] h-20 w-20 rounded-full bg-green-300/30 blur-xl animate-pulse [animation-delay:1.5s]" />
+      <div className="absolute bottom-[15%] right-[30%] h-28 w-28 rounded-full bg-purple-300/25 blur-2xl animate-pulse [animation-delay:2.5s]" />
+      <div className="absolute top-[70%] left-[70%] h-12 w-12 rounded-full bg-orange-300/40 blur-lg animate-pulse [animation-delay:3s]" />
+      <div className="absolute top-[80%] right-[50%] h-18 w-18 rounded-full bg-cyan-300/30 blur-xl animate-pulse [animation-delay:0.5s]" />
+      
+      <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
+    </div>
+  );
+};
+
+const BgGhibliNight = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-b from-indigo-950 via-purple-900 to-indigo-800">
+      {/* Moon */}
+      <div className="absolute top-[15%] right-[20%] h-16 w-16 rounded-full bg-yellow-100/90 blur-sm" />
+      <div className="absolute top-[15%] right-[20%] h-14 w-14 rounded-full bg-white/70" />
+      
+      {/* Stars */}
+      <div className="absolute top-[10%] left-[15%] h-1 w-1 bg-white rounded-full animate-pulse" />
+      <div className="absolute top-[25%] left-[8%] h-0.5 w-0.5 bg-yellow-200 rounded-full animate-pulse [animation-delay:1s]" />
+      <div className="absolute top-[20%] left-[30%] h-1 w-1 bg-white rounded-full animate-pulse [animation-delay:2s]" />
+      <div className="absolute top-[35%] right-[15%] h-0.5 w-0.5 bg-blue-100 rounded-full animate-pulse [animation-delay:1.5s]" />
+      <div className="absolute top-[45%] left-[25%] h-1 w-1 bg-white rounded-full animate-pulse [animation-delay:3s]" />
+      <div className="absolute top-[30%] right-[40%] h-0.5 w-0.5 bg-yellow-200 rounded-full animate-pulse [animation-delay:0.8s]" />
+      <div className="absolute top-[50%] right-[10%] h-1 w-1 bg-white rounded-full animate-pulse [animation-delay:2.3s]" />
+      
+      {/* Floating castle silhouette */}
+      <div className="absolute top-[40%] left-[10%] h-8 w-12 bg-black/30 rounded-sm" />
+      <div className="absolute top-[42%] left-[12%] h-4 w-8 bg-black/20 rounded-sm" />
+      
+      {/* Magical particles */}
+      <div className="absolute top-[60%] left-[20%] h-1.5 w-1.5 bg-green-300/60 rounded-full blur-sm animate-pulse [animation-delay:1.2s]" />
+      <div className="absolute top-[70%] right-[25%] h-2 w-2 bg-blue-300/50 rounded-full blur-sm animate-pulse [animation-delay:2.8s]" />
+      <div className="absolute top-[55%] left-[60%] h-1 w-1 bg-pink-300/70 rounded-full blur-sm animate-pulse [animation-delay:0.7s]" />
+      
+      {/* Soft cloud wisps */}
+      <div className="absolute bottom-[20%] left-[5%] h-6 w-20 rounded-full bg-white/10 blur-md" />
+      <div className="absolute bottom-[15%] right-[10%] h-8 w-24 rounded-full bg-white/8 blur-lg" />
+      
+      <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent" />
+    </div>
+  );
+};
+
+const BgGhibliForest = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-b from-emerald-800 via-green-700 to-green-900">
+      {/* Tree silhouettes */}
+      <div className="absolute bottom-0 left-[5%] h-40 w-3 bg-green-950/60 rounded-t-full" />
+      <div className="absolute bottom-0 left-[15%] h-32 w-2 bg-green-950/50 rounded-t-full" />
+      <div className="absolute bottom-0 left-[25%] h-48 w-4 bg-green-950/70 rounded-t-full" />
+      <div className="absolute bottom-0 right-[20%] h-36 w-3 bg-green-950/55 rounded-t-full" />
+      <div className="absolute bottom-0 right-[8%] h-44 w-3 bg-green-950/65 rounded-t-full" />
+      
+      {/* Tree canopies */}
+      <div className="absolute bottom-[25%] left-[3%] h-20 w-20 bg-green-800/40 rounded-full blur-sm" />
+      <div className="absolute bottom-[20%] left-[13%] h-16 w-16 bg-green-700/30 rounded-full blur-sm" />
+      <div className="absolute bottom-[30%] left-[22%] h-24 w-24 bg-green-800/50 rounded-full blur-md" />
+      <div className="absolute bottom-[22%] right-[18%] h-18 w-18 bg-green-700/35 rounded-full blur-sm" />
+      <div className="absolute bottom-[28%] right-[6%] h-22 w-22 bg-green-800/45 rounded-full blur-md" />
+      
+      {/* Kodama (tree spirits) - tiny white glowing dots */}
+      <div className="absolute top-[40%] left-[30%] h-2 w-2 bg-white/80 rounded-full blur-sm animate-pulse" />
+      <div className="absolute top-[55%] right-[35%] h-1.5 w-1.5 bg-white/70 rounded-full blur-sm animate-pulse [animation-delay:1.5s]" />
+      <div className="absolute top-[65%] left-[45%] h-2 w-2 bg-white/75 rounded-full blur-sm animate-pulse [animation-delay:2.2s]" />
+      
+      {/* Magical forest sparkles */}
+      <div className="absolute top-[35%] left-[20%] h-1 w-1 bg-green-300/60 rounded-full animate-pulse [animation-delay:0.8s]" />
+      <div className="absolute top-[50%] right-[25%] h-1 w-1 bg-yellow-300/50 rounded-full animate-pulse [animation-delay:1.8s]" />
+      <div className="absolute top-[45%] left-[60%] h-1 w-1 bg-blue-300/40 rounded-full animate-pulse [animation-delay:2.5s]" />
+      
+      {/* Sunlight filtering through */}
+      <div className="absolute top-[10%] left-[40%] h-32 w-2 bg-yellow-200/20 blur-md rotate-12" />
+      <div className="absolute top-[15%] right-[30%] h-28 w-1.5 bg-yellow-100/15 blur-md rotate-[-8deg]" />
+      
+      <div className="absolute inset-0 bg-gradient-to-t from-green-950/30 via-transparent to-emerald-800/20" />
+    </div>
+  );
+};
+
+const BgGhibliOcean = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-b from-sky-300 via-blue-400 to-blue-600">
+      {/* Ocean waves - fixed and more natural */}
+      <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-blue-500/50 to-transparent" 
+           style={{ clipPath: 'ellipse(100% 100% at 50% 100%)' }} />
+      <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-blue-400/40 to-transparent animate-pulse [animation-delay:1s]" 
+           style={{ clipPath: 'ellipse(120% 80% at 30% 100%)' }} />
+      <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-cyan-400/30 to-transparent animate-pulse [animation-delay:2s]" 
+           style={{ clipPath: 'ellipse(110% 90% at 70% 100%)' }} />
+      
+      {/* Sea foam and bubbles */}
+      <div className="absolute bottom-[12%] left-[20%] h-3 w-3 bg-white/60 rounded-full blur-sm animate-pulse" />
+      <div className="absolute bottom-[15%] right-[30%] h-2 w-2 bg-white/50 rounded-full blur-sm animate-pulse [animation-delay:0.5s]" />
+      <div className="absolute bottom-[18%] left-[60%] h-4 w-4 bg-white/40 rounded-full blur-md animate-pulse [animation-delay:1.2s]" />
+      <div className="absolute bottom-[20%] left-[40%] h-2 w-2 bg-cyan-100/60 rounded-full blur-sm animate-pulse [animation-delay:1.8s]" />
+      
+      {/* Fish-like magical creatures */}
+      <div className="absolute top-[30%] left-[15%] h-1 w-3 bg-pink-300/70 rounded-full blur-sm animate-pulse [animation-delay:2.3s]" />
+      <div className="absolute top-[45%] right-[25%] h-1 w-2 bg-orange-300/60 rounded-full blur-sm animate-pulse [animation-delay:1.7s]" />
+      <div className="absolute top-[60%] left-[50%] h-1 w-4 bg-yellow-300/50 rounded-full blur-sm animate-pulse [animation-delay:0.9s]" />
+      
+      {/* Soft clouds in the sky */}
+      <div className="absolute top-[5%] left-[20%] h-8 w-16 rounded-full bg-white/70 blur-sm" />
+      <div className="absolute top-[10%] right-[15%] h-6 w-12 rounded-full bg-white/60 blur-sm" />
+      <div className="absolute top-[15%] left-[60%] h-10 w-20 rounded-full bg-white/50 blur-md" />
+      
+      {/* Water sparkles */}
+      <div className="absolute top-[35%] left-[25%] h-1.5 w-1.5 bg-white/80 rounded-full blur-sm animate-pulse [animation-delay:1.1s]" />
+      <div className="absolute top-[50%] right-[20%] h-1 w-1 bg-cyan-200/70 rounded-full blur-sm animate-pulse [animation-delay:2.1s]" />
+      <div className="absolute top-[65%] left-[70%] h-2 w-2 bg-blue-200/60 rounded-full blur-sm animate-pulse [animation-delay:1.4s]" />
+      
+      <div className="absolute inset-0 bg-gradient-to-t from-blue-700/20 via-transparent to-sky-200/30" />
+    </div>
+  );
+};
+
+const BgLightGridDiagonal = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(45deg,#f0f0f0_1px,transparent_1px),linear-gradient(-45deg,#e5e7eb_1px,transparent_1px)] bg-[size:20px_20px]">
+      <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_49%,#d1d5db_50%,transparent_51%),linear-gradient(-45deg,transparent_49%,#d1d5db_50%,transparent_51%)] bg-[size:40px_40px] opacity-30" />
+      <div className="absolute top-[20%] right-[20%] h-[300px] w-[300px] rounded-full bg-gradient-to-br from-violet-200/40 via-pink-200/30 to-cyan-200/40 blur-3xl" />
+      <div className="absolute bottom-[15%] left-[15%] h-[200px] w-[200px] rounded-full bg-gradient-to-br from-blue-200/30 via-purple-200/20 to-teal-200/30 blur-2xl" />
+    </div>
+  );
+};
+
+const BgDarkGridHex = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gray-950">
+      {/* Base aurora layers with smooth fades */}
+      <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/20 via-purple-500/10 to-transparent" />
+      <div className="absolute inset-0 bg-gradient-to-tr from-emerald-500/15 via-teal-500/8 to-transparent" />
+      <div className="absolute inset-0 bg-gradient-to-bl from-pink-500/12 via-rose-500/6 to-transparent" />
+      
+      {/* Floating ethereal orbs */}
+      <div className="absolute top-[20%] left-[15%] h-[300px] w-[300px] rounded-full bg-gradient-to-br from-violet-400/25 to-purple-600/5 blur-3xl animate-pulse [animation-duration:8s]" />
+      <div className="absolute top-[50%] right-[10%] h-[250px] w-[250px] rounded-full bg-gradient-to-br from-cyan-400/20 to-blue-600/5 blur-3xl animate-pulse [animation-duration:6s] [animation-delay:2s]" />
+      <div className="absolute bottom-[30%] left-[40%] h-[280px] w-[280px] rounded-full bg-gradient-to-br from-emerald-400/18 to-green-600/4 blur-3xl animate-pulse [animation-duration:10s] [animation-delay:4s]" />
+      <div className="absolute top-[40%] left-[60%] h-[200px] w-[200px] rounded-full bg-gradient-to-br from-rose-400/15 to-pink-600/3 blur-2xl animate-pulse [animation-duration:7s] [animation-delay:1s]" />
+      
+      {/* Atmospheric layers for depth */}
+      <div className="absolute inset-0 bg-gradient-to-t from-gray-950/80 via-gray-950/20 to-transparent" />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-gray-950/10 to-gray-950/60" />
+      
+      {/* Subtle shimmer effect */}
+      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/2 to-transparent animate-pulse [animation-duration:12s]" />
+    </div>
+  );
+};
+
+const BgCosmicFlow = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-[#020010]">
+      {/* Particle field */}
+      <div
+        className="absolute inset-0"
+        style={{
+          backgroundImage:
+            "radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%)",
+          backgroundSize: "1px 1px, 2px 2px",
+          backgroundPosition: "center, center",
+        }}
+      />
+
+      {/* Flowing energy ribbons */}
+      <div className="absolute bottom-0 left-0 right-0 h-2/3 bg-gradient-to-t from-indigo-900/50 via-purple-900/30 to-transparent blur-3xl" />
+      <div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-cyan-800/40 via-blue-800/20 to-transparent blur-3xl" />
+      
+      {/* Animated ribbons */}
+      <div className="absolute top-1/4 left-0 h-48 w-full -skew-y-12 animate-pulse [animation-duration:8s]">
+        <div className="h-full w-full bg-gradient-to-r from-purple-500/30 via-transparent to-indigo-500/30" />
+      </div>
+       <div className="absolute bottom-1/4 right-0 h-48 w-full skew-y-6 animate-pulse [animation-duration:10s]">
+        <div className="h-full w-full bg-gradient-to-l from-emerald-500/20 via-transparent to-cyan-500/20" />
+      </div>
+
+      {/* Vignette */}
+      <div className="absolute inset-0 bg-black/40" />
+    </div>
+  );
+};
+
+const BgNeonRain = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-black">
+      <div
+        className="absolute inset-0 animate-[rain_1s_linear_infinite]"
+        style={{
+          backgroundImage: `linear-gradient(to bottom, rgba(13, 222, 222, 0.5) 0%, rgba(13, 222, 222, 0) 100%)`,
+          backgroundSize: '2px 100%',
+          backgroundRepeat: 'repeat-x',
+          backgroundPosition: '0% 0%',
+        }}
+      />
+      <div
+        className="absolute inset-0 animate-[rain_1.5s_linear_infinite]"
+        style={{
+          backgroundImage: `linear-gradient(to bottom, rgba(235, 52, 196, 0.5) 0%, rgba(235, 52, 196, 0) 100%)`,
+          backgroundSize: '2px 100%',
+          backgroundRepeat: 'repeat-x',
+          backgroundPosition: '20% 0%',
+        }}
+      />
+    </div>
+  );
+};
+
+const BgCrystalShards = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gray-50 overflow-hidden">
+      <div className="absolute -top-1/4 -left-1/4 h-1/2 w-1/2 bg-gradient-to-br from-white to-gray-200/50 transform rotate-45" />
+      <div className="absolute -bottom-1/4 -right-1/4 h-1/2 w-1/2 bg-gradient-to-tl from-white to-gray-200/50 transform rotate-45" />
+       <div className="absolute top-1/2 left-1/2 h-64 w-64 bg-white/50 backdrop-blur-md rounded-2xl transform -translate-x-1/2 -translate-y-1/2 rotate-12" />
+    </div>
+  );
+};
+
+const BgWarpSpeed = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-black">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,white_1px,transparent_1px)] [background-size:2px_2px] animate-[zoom_10s_linear_infinite]" />
+    </div>
+  );
+};
+
+const BgSoftAurora = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-blue-50 overflow-hidden">
+        <div className="absolute top-0 left-0 h-full w-full bg-gradient-to-br from-pink-200/50 via-purple-200/50 to-blue-200/50 animate-pulse [animation-duration:10s]" />
+        <div className="absolute top-1/4 left-1/4 h-96 w-96 bg-cyan-200/50 rounded-full blur-3xl animate-pulse [animation-duration:8s] [animation-delay:2s]" />
+        <div className="absolute bottom-1/4 right-1/4 h-96 w-96 bg-rose-200/50 rounded-full blur-3xl animate-pulse [animation-duration:12s] [animation-delay:4s]" />
+    </div>
+  );
+};
+
+const BgGoldenVeins = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-[#1a1a1a]">
+      <div 
+        className="absolute inset-0 opacity-5"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E")`,
+        }}
+      />
+      <div className="absolute inset-0 animate-[shimmer_5s_infinite]">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,_transparent_40%,_#e6c83a_150%)] opacity-30" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,_transparent_40%,_#e6c83a_150%)] opacity-30" />
+      </div>
+    </div>
+  );
+};
+
+const BgLayeredPeaks = () => {
+  return (
+    <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-b from-sky-100 to-white">
+      <div className="absolute bottom-0 left-0 w-full h-2/3 bg-gradient-to-t from-emerald-200/50 to-emerald-100/50" />
+      <div className="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-teal-200/60 to-teal-100/60 [clip-path:polygon(0_100%,100%_100%,100%_40%,70%_20%,30%_50%,0_30%)]" />
+      <div className="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-cyan-200/70 to-cyan-100/70 [clip-path:polygon(0_100%,100%_100%,100%_60%,80%_30%,40%_70%,20%_40%,0_80%)]" />
+    </div>
+  );
+};
+
 export const BACKGROUND_OPTIONS = [
   {
     name: 'Background Light Gradient 1',
@@ -222,6 +633,41 @@ export const BACKGROUND_OPTIONS = [
     component: <BgLightGrid5 />,
     theme: 'light',
   },
+  {
+    name: 'Animated Gradient',
+    component: <BgAnimatedGradient />,
+    theme: 'light',
+  },
+  {
+    name: 'Hexagon Pattern',
+    component: <BgHexagonPattern />,
+    theme: 'light',
+  },
+  {
+    name: 'Floating Orbs',
+    component: <BgFloatingOrbs />,
+    theme: 'light',
+  },
+  {
+    name: 'Ghibli Dream',
+    component: <BgGhibliDream />,
+    theme: 'light',
+  },
+  {
+    name: 'Liquid Gradient',
+    component: <BgLiquidGradient />,
+    theme: 'light',
+  },
+  {
+    name: 'Mesh Gradient',
+    component: <BgMeshGradient />,
+    theme: 'light',
+  },
+  {
+    name: 'Dotted Pattern',
+    component: <BgDottedPattern />,
+    theme: 'light',
+  },
   {
     name: 'Background Dark Gradient',
     component: <BgDarkGradient1 />,
@@ -247,6 +693,22 @@ export const BACKGROUND_OPTIONS = [
     component: <BgDarkGradient5 />,
     theme: 'dark',
   },
+  {
+    name: 'Dark Neon',
+    component: <BgDarkNeon />,
+    theme: 'dark',
+  },
+  {
+    name: 'Dark Particles',
+    component: <BgDarkParticles />,
+    theme: 'dark',
+  },
+
+  {
+    name: 'Bokeh Lights',
+    component: <BgBokehLights />,
+    theme: 'dark',
+  },
   {
     name: 'Background Dark Grid Gradient 1',
     component: <BgDarkGridGradient1 />,
@@ -267,4 +729,64 @@ export const BACKGROUND_OPTIONS = [
     component: <BgDarkGrid3 />,
     theme: 'dark',
   },
+  {
+    name: 'Ghibli Night',
+    component: <BgGhibliNight />,
+    theme: 'light',
+  },
+  {
+    name: 'Ghibli Forest',
+    component: <BgGhibliForest />,
+    theme: 'light',
+  },
+  {
+    name: 'Ghibli Ocean',
+    component: <BgGhibliOcean />,
+    theme: 'light',
+  },
+  {
+    name: 'Light Grid Diagonal',
+    component: <BgLightGridDiagonal />,
+    theme: 'light',
+  },
+  {
+    name: 'Dark Grid Hex',
+    component: <BgDarkGridHex />,
+    theme: 'dark',
+  },
+  {
+    name: 'Cosmic Flow',
+    component: <BgCosmicFlow />,
+    theme: 'dark',
+  },
+  {
+    name: 'Neon Rain',
+    component: <BgNeonRain />,
+    theme: 'dark',
+  },
+  {
+    name: 'Crystal Shards',
+    component: <BgCrystalShards />,
+    theme: 'light',
+  },
+  {
+    name: 'Warp Speed',
+    component: <BgWarpSpeed />,
+    theme: 'dark',
+  },
+  {
+    name: 'Soft Aurora',
+    component: <BgSoftAurora />,
+    theme: 'light',
+  },
+  {
+    name: 'Golden Veins',
+    component: <BgGoldenVeins />,
+    theme: 'dark',
+  },
+  {
+    name: 'Layered Peaks',
+    component: <BgLayeredPeaks />,
+    theme: 'light',
+  },
 ] as const;
diff --git a/package-lock.json b/package-lock.json
index 19d51f0..d321e26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "eslint": "8.44.0",
         "eslint-config-next": "13.4.8",
         "lucide-react": "^0.258.0",
-        "next": "13.4.8",
+        "next": "^13.5.11",
         "postcss": "8.4.24",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -53,12 +53,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.11"
-      },
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -194,9 +192,10 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
     "node_modules/@next/env": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.8.tgz",
-      "integrity": "sha512-twuSf1klb3k9wXI7IZhbZGtFCWvGD4wXTY2rmvzIgVhXhs7ISThrbNyutBx3jWIL8Y/Hk9+woytFz5QsgtcRKQ=="
+      "version": "13.5.11",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.11.tgz",
+      "integrity": "sha512-fbb2C7HChgM7CemdCY+y3N1n8pcTKdqtQLbC7/EQtPdLvlMUT9JX/dBYl8MMZAtYG4uVMyPFHXckb68q/NRwqg==",
+      "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "13.4.8",
@@ -207,12 +206,13 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.8.tgz",
-      "integrity": "sha512-MSFplVM4dTWOuKAUv0XR9gY7AWtMSBu9os9f+kp+s5rWhM1I2CdR3obFttd6366nS/W/VZxbPM5oEIdlIa46zA==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.9.tgz",
+      "integrity": "sha512-pVyd8/1y1l5atQRvOaLOvfbmRwefxLhqQOzYo/M7FQ5eaRwA1+wuCn7t39VwEgDd7Aw1+AIWwd+MURXUeXhwDw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -222,12 +222,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.8.tgz",
-      "integrity": "sha512-Reox+UXgonon9P0WNDE6w85DGtyBqGitl/ryznOvn6TvfxEaZIpTgeu3ZrJLU9dHSMhiK7YAM793mE/Zii2/Qw==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.9.tgz",
+      "integrity": "sha512-DwdeJqP7v8wmoyTWPbPVodTwCybBZa02xjSJ6YQFIFZFZ7dFgrieKW4Eo0GoIcOJq5+JxkQyejmI+8zwDp3pwA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -237,12 +238,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.8.tgz",
-      "integrity": "sha512-kdyzYvAYtqQVgzIKNN7e1rLU8aZv86FDSRqPlOkKZlvqudvTO0iohuTPmnEEDlECeBM6qRPShNffotDcU/R2KA==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.9.tgz",
+      "integrity": "sha512-wdQsKsIsGSNdFojvjW3Ozrh8Q00+GqL3wTaMjDkQxVtRbAqfFBtrLPO0IuWChVUP2UeuQcHpVeUvu0YgOP00+g==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -252,12 +254,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.8.tgz",
-      "integrity": "sha512-oWxx4yRkUGcR81XwbI+T0zhZ3bDF6V1aVLpG+C7hSG50ULpV8gC39UxVO22/bv93ZlcfMY4zl8xkz9Klct6dpQ==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.9.tgz",
+      "integrity": "sha512-6VpS+bodQqzOeCwGxoimlRoosiWlSc0C224I7SQWJZoyJuT1ChNCo+45QQH+/GtbR/s7nhaUqmiHdzZC9TXnXA==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -267,12 +270,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.8.tgz",
-      "integrity": "sha512-anhtvuO6eE9YRhYnaEGTfbpH3L5gT/9qPFcNoi6xS432r/4DAtpJY8kNktqkTVevVIC/pVumqO8tV59PR3zbNg==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.9.tgz",
+      "integrity": "sha512-XxG3yj61WDd28NA8gFASIR+2viQaYZEFQagEodhI/R49gXWnYhiflTeeEmCn7Vgnxa/OfK81h1gvhUZ66lozpw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -282,12 +286,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.8.tgz",
-      "integrity": "sha512-aR+J4wWfNgH1DwCCBNjan7Iumx0lLtn+2/rEYuhIrYLY4vnxqSVGz9u3fXcgUwo6Q9LT8NFkaqK1vPprdq+BXg==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.9.tgz",
+      "integrity": "sha512-/dnscWqfO3+U8asd+Fc6dwL2l9AZDl7eKtPNKW8mKLh4Y4wOpjJiamhe8Dx+D+Oq0GYVjuW0WwjIxYWVozt2bA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -297,12 +302,13 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.8.tgz",
-      "integrity": "sha512-OWBKIrJwQBTqrat0xhxEB/jcsjJR3+diD9nc/Y8F1mRdQzsn4bPsomgJyuqPVZs6Lz3K18qdIkvywmfSq75SsQ==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.9.tgz",
+      "integrity": "sha512-T/iPnyurOK5a4HRUcxAlss8uzoEf5h9tkd+W2dSWAfzxv8WLKlUgbfk+DH43JY3Gc2xK5URLuXrxDZ2mGfk/jw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -312,12 +318,13 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.8.tgz",
-      "integrity": "sha512-agiPWGjUndXGTOn4ChbKipQXRA6/UPkywAWIkx7BhgGv48TiJfHTK6MGfBoL9tS6B4mtW39++uy0wFPnfD0JWg==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.9.tgz",
+      "integrity": "sha512-BLiPKJomaPrTAb7ykjA0LPcuuNMLDVK177Z1xe0nAem33+9FIayU4k/OWrtSn9SAJW/U60+1hoey5z+KCHdRLQ==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -327,12 +334,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.8.tgz",
-      "integrity": "sha512-UIRKoByVKbuR6SnFG4JM8EMFlJrfEGuUQ1ihxzEleWcNwRMMiVaCj1KyqfTOW8VTQhJ0u8P1Ngg6q1RwnIBTtw==",
+      "version": "13.5.9",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.9.tgz",
+      "integrity": "sha512-/72/dZfjXXNY/u+n8gqZDjI6rxKMpYsgBBYNZKWOQw0BpBF7WCnPflRy3ZtvQ2+IYI3ZH2bPyj7K+6a6wNk90Q==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -433,9 +441,10 @@
       "integrity": "sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw=="
     },
     "node_modules/@swc/helpers": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
-      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -855,11 +864,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -1074,9 +1084,10 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1575,9 +1586,10 @@
       }
     },
     "node_modules/eslint-plugin-import/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1612,9 +1624,10 @@
       }
     },
     "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1686,9 +1699,10 @@
       }
     },
     "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1856,9 +1870,10 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2411,6 +2426,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2721,11 +2737,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -2778,15 +2795,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -2800,39 +2818,38 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
     "node_modules/next": {
-      "version": "13.4.8",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.4.8.tgz",
-      "integrity": "sha512-lxUjndYKjZHGK3CWeN2RI+/6ni6EUvjiqGWXAYPxUfGIdFGQ5XoisrqAJ/dF74aP27buAfs8MKIbIMMdxjqSBg==",
+      "version": "13.5.11",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.11.tgz",
+      "integrity": "sha512-WUPJ6WbAX9tdC86kGTu92qkrRdgRqVrY++nwM+shmWQwmyxt4zhZfR59moXSI4N8GDYCBY3lIAqhzjDd4rTC8Q==",
+      "license": "MIT",
       "dependencies": {
-        "@next/env": "13.4.8",
-        "@swc/helpers": "0.5.1",
+        "@next/env": "13.5.11",
+        "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
-        "postcss": "8.4.14",
+        "postcss": "8.4.31",
         "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0",
-        "zod": "3.21.4"
+        "watchpack": "2.4.0"
       },
       "bin": {
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=16.8.0"
+        "node": ">=16.14.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.4.8",
-        "@next/swc-darwin-x64": "13.4.8",
-        "@next/swc-linux-arm64-gnu": "13.4.8",
-        "@next/swc-linux-arm64-musl": "13.4.8",
-        "@next/swc-linux-x64-gnu": "13.4.8",
-        "@next/swc-linux-x64-musl": "13.4.8",
-        "@next/swc-win32-arm64-msvc": "13.4.8",
-        "@next/swc-win32-ia32-msvc": "13.4.8",
-        "@next/swc-win32-x64-msvc": "13.4.8"
+        "@next/swc-darwin-arm64": "13.5.9",
+        "@next/swc-darwin-x64": "13.5.9",
+        "@next/swc-linux-arm64-gnu": "13.5.9",
+        "@next/swc-linux-arm64-musl": "13.5.9",
+        "@next/swc-linux-x64-gnu": "13.5.9",
+        "@next/swc-linux-x64-musl": "13.5.9",
+        "@next/swc-win32-arm64-msvc": "13.5.9",
+        "@next/swc-win32-ia32-msvc": "13.5.9",
+        "@next/swc-win32-x64-msvc": "13.5.9"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
-        "fibers": ">= 3.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -2841,18 +2858,15 @@
         "@opentelemetry/api": {
           "optional": true
         },
-        "fibers": {
-          "optional": true
-        },
         "sass": {
           "optional": true
         }
       }
     },
     "node_modules/next/node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -2861,10 +2875,15 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -3492,11 +3511,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
@@ -4092,6 +4106,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -4338,14 +4353,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/zod": {
-      "version": "3.21.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
-      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index ef8fd62..1429a38 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.8",
     "lucide-react": "^0.258.0",
-    "next": "13.4.8",
+    "next": "^13.5.11",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/tailwind.config.js b/tailwind.config.js
index c05b2ff..35bed17 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -65,10 +65,21 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        shoot: {
+          "0%": { transform: "translateX(-150%) translateY(-150%) rotate(-45deg)", opacity: 1 },
+          "80%": { opacity: 1 },
+          "100%": { transform: "translateX(150%) translateY(150%) rotate(-45deg)", opacity: 0 },
+        },
+        zoom: {
+          "0%": { transform: "scale(1)" },
+          "100%": { transform: "scale(1.5)" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        shoot: "shoot 3s ease-in-out infinite",
+        zoom: "zoom 10s linear infinite",
       },
     },
   },