src/app/page.tsx

@@ -2,6 +2,8 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
@@ -14,6 +16,13 @@ import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 
 export default function LandingPage() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 2000);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -27,6 +36,25 @@ export default function LandingPage() {
         secondaryButtonStyle="radial-glow"
         headingFontWeight="light"
     >
+      <AnimatePresence>
+        {loading && (
+          <motion.div
+            key="loader"
+            initial={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[9999] flex items-center justify-center bg-background"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              className="text-2xl font-bold tracking-widest text-primary-cta"
+            >
+              PORTFOLIO
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       <ReactLenis root>
         <div className="[&>div]:sticky [&>div]:top-0 [&>div]:h-screen [&>div]:overflow-hidden">
           <div id="nav" data-section="nav">
@@ -41,7 +69,14 @@ export default function LandingPage() {
             />
           </div>
 
-          <div id="hero" data-section="hero">
+          <motion.div 
+            id="hero" 
+            data-section="hero"
+            initial={{ opacity: 0, y: 100 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+          >
             <HeroCarouselLogo
               logoText="PORTFOLIO"
               description="Scroll through layered projects that unfold in real time. Experience design that transcends static display."
@@ -56,7 +91,7 @@ export default function LandingPage() {
               ]}
               autoplayDelay={4000}
             />
-          </div>
+          </motion.div>
 
           <div id="about" data-section="about">
             <SplitAbout