diff --git a/src/app/page.tsx b/src/app/page.tsx index dc6d0aa..e4829a8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -11,6 +11,7 @@ import PricingCardEight from '@/components/sections/pricing/PricingCardEight'; import ProductCardFour from '@/components/sections/product/ProductCardFour'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen'; import { Shield, Zap } from "lucide-react"; +import LoadingScreen from '@/components/layout/LoadingScreen'; export default function LandingPage() { return ( @@ -26,278 +27,180 @@ export default function LandingPage() { secondaryButtonStyle="glass" headingFontWeight="semibold" > - - + + + -
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
- - + + + ); -} +} \ No newline at end of file diff --git a/src/components/layout/LoadingScreen.tsx b/src/components/layout/LoadingScreen.tsx new file mode 100644 index 0000000..69e309b --- /dev/null +++ b/src/components/layout/LoadingScreen.tsx @@ -0,0 +1,34 @@ +"use client"; + +import React, { useState, useEffect } from 'react'; + +const LoadingScreen = ({ children }: { children: React.ReactNode }) => { + const [isLoading, setIsLoading] = useState(true); + const [isFadingOut, setIsFadingOut] = useState(false); + + useEffect(() => { + // Simulate content loading delay + const timer = setTimeout(() => { + setIsFadingOut(true); // Start fade-out animation + setTimeout(() => { + setIsLoading(false); // Remove loader after fade-out + }, 500); // Duration of fade-out animation + }, 1500); // Show loader for at least 1.5 seconds + + return () => clearTimeout(timer); + }, []); + + if (isLoading) { + return ( +
+ {/* Simple spinner */} +
+ Loading... +
+ ); + } + + return <>{children}; +}; + +export default LoadingScreen;