Merge version_3 into main

Merge version_3 into main

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 ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
@@ -13,7 +14,20 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 
+const LoadingScreen = () => (
+  <div className="fixed inset-0 z-50 flex items-center justify-center bg-[var(--background)]">
+    <div className="h-16 w-16 animate-spin rounded-full border-4 border-[var(--primary-cta)] border-t-transparent"></div>
+  </div>
+);
+
 export default function LandingPage() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 1500);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
@@ -27,6 +41,7 @@ export default function LandingPage() {
         secondaryButtonStyle="layered"
         headingFontWeight="normal"
     >
+      {loading && <LoadingScreen />}
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline