Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useEffect, useState } from "react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
@@ -11,6 +12,23 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 
 export default function LandingPage() {
+  const [showTitle, setShowTitle] = useState(true);
+  const [showBlur, setShowBlur] = useState(true);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        setShowTitle(false);
+        setShowBlur(false);
+      } else {
+        setShowTitle(true);
+        setShowBlur(true);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
@@ -25,7 +43,7 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav" className={showBlur ? "backdrop-blur-sm transition-all duration-300" : "transition-all duration-300"}>
       <NavbarStyleCentered
       navItems={[
         { name: "Home", id: "hero" },
@@ -33,7 +51,7 @@ export default function LandingPage() {
         { name: "Gallery", id: "gallery" },
         { name: "Contact", id: "contact" }
       ]}
-      brandName="Elite Barber Shop"
+      brandName={showTitle ? "Elite Barber Shop" : ""}
     />
   </div>
 
@@ -87,6 +105,7 @@ export default function LandingPage() {
       ]}
       title="Portfolio"
       description="Browse our latest work from the shop floor."
+      cardRatingClassName="text-orange-500"
     />
   </div>
 
@@ -108,6 +127,7 @@ export default function LandingPage() {
       ]}
       title="Happy Clients"
       description="What our local community has to say about us."
+      ratingClassName="text-orange-500"
     />
   </div>