src/app/page.tsx

@@ -10,8 +10,38 @@ import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import { Zap, Target } from "lucide-react";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const SplashScreen = ({ onComplete }: { onComplete: () => void }) => (
+  <motion.div
+    initial={{ opacity: 1 }}
+    animate={{ opacity: 0 }}
+    transition={{ delay: 2, duration: 0.8 }}
+    onAnimationComplete={onComplete}
+    className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-background"
+  >
+    <motion.div
+      initial={{ scale: 0.8, opacity: 0 }}
+      animate={{ scale: 1, opacity: 1 }}
+      transition={{ type: "spring", stiffness: 200, damping: 20 }}
+      className="flex flex-col items-center gap-4"
+    >
+      <motion.img
+        animate={{ scale: [1, 1.05, 1] }}
+        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+        src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DhE9kloAj7sgphsljU3n3hBaXI/uploaded-1778727825823-mzx0gsmw.png"
+        alt="Lanova Arena Logo"
+        className="w-32 h-32 object-contain"
+      />
+      <motion.h1 className="text-2xl font-bold text-foreground">Lanova Arena</motion.h1>
+    </motion.div>
+  </motion.div>
+);
 
 export default function LandingPage() {
+  const [loading, setLoading] = useState(true);
+
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -25,6 +55,9 @@ export default function LandingPage() {
         secondaryButtonStyle="solid"
         headingFontWeight="bold"
     >
+      <AnimatePresence>
+        {loading && <SplashScreen onComplete={() => setLoading(false)} />}
+      </AnimatePresence>
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline