Update src/app/page.tsx

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState, useEffect } from "react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
@@ -14,6 +15,28 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import { Award, CheckCircle, MessageCircle, Zap } from "lucide-react";
 
 export default function LandingPage() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 1200);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black transition-opacity duration-500">
+        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-700">
+          <div className="w-24 h-24 flex items-center justify-center bg-white/5 rounded-2xl backdrop-blur-sm border border-white/10">
+            <span className="text-4xl font-extrabold text-white tracking-tighter">N11</span>
+          </div>
+          <div className="h-1 w-32 bg-white/10 rounded-full overflow-hidden">
+            <div className="h-full bg-white animate-loading-bar w-1/3" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -188,4 +211,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}