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>
 
@@ -51,7 +69,7 @@ export default function LandingPage() {
         { imageSrc: "http://img.b2bpic.net/free-photo/close-up-leather-armchair_1156-3.jpg", imageAlt: "modern barber shop interior" },
         { imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects-with-copyspace_23-2148122052.jpg", imageAlt: "barber tools and accessories" },
         { imageSrc: "http://img.b2bpic.net/free-photo/barber-spraying-hair-man_23-2147778776.jpg", imageAlt: "happy customer at barber shop" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-985.jpg", imageAlt: "close up fresh fade haircut" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barbershop_1157-21635.jpg?_wi=1", imageAlt: "close up fresh fade haircut" },
         { imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg", imageAlt: "barber grooming kit accessories" }
       ]}
     />
@@ -63,10 +81,10 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        { id: "f1", title: "Classic Cuts", author: "Precision", description: "Timeless styles meeting modern standards.", tags: ["Hair", "Classic"], imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barbershop_1157-21635.jpg" },
+        { id: "f1", title: "Classic Cuts", author: "Precision", description: "Timeless styles meeting modern standards.", tags: ["Hair", "Classic"], imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barbershop_1157-21635.jpg?_wi=2" },
-        { id: "f2", title: "Skin Fades", author: "Expertise", description: "Detailed fades with perfect blending techniques.", tags: ["Fade", "Modern"], imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-with-gold-body-painting_23-2150466357.jpg" },
+        { id: "f2", title: "Skin Fades", author: "Expertise", description: "Detailed fades with perfect blending techniques.", tags: ["Fade", "Modern"], imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-posing-with-modern-tattoos_23-2150466357.jpg" },
         { id: "f3", title: "Beard Trim", author: "Detail", description: "Sharp lines and clean finishes for a sharp look.", tags: ["Beard", "Grooming"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-groomed-salon_23-2149220524.jpg" },
-        { id: "f4", title: "Full Package", author: "Premium", description: "Complete haircut and beard grooming combination.", tags: ["Combo", "Premium"], imageSrc: "http://img.b2bpic.net/free-photo/tanned-girl-with-elegant-manicure-pedicure-playing-with-funny-beagle-dog-which-resting-carpet_197531-4850.jpg" }
+        { id: "f4", title: "Full Package", author: "Premium", description: "Complete haircut and beard grooming combination.", tags: ["Combo", "Premium"], imageSrc: "http://img.b2bpic.net/free-photo/tanned-man-with-elegant-style-playing-with-funny-beagle-dog-which-resting-carpet_197531-4850.jpg" }
       ]}
       title="Our Services"
       description="Professional grooming services tailored for every individual need."
@@ -83,10 +101,11 @@ export default function LandingPage() {
         { id: "p1", brand: "Style", name: "Modern Fade", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-psd/barbershop-instagram-posts-collection_23-2149487551.jpg" },
         { id: "p2", brand: "Style", name: "Sharp Beard", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-with-beard-smiling_23-2148618892.jpg" },
         { id: "p3", brand: "Style", name: "Classic Taper", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/close-up-stylist-drying-wet-hair_23-2147769808.jpg" },
-        { id: "p4", brand: "Style", name: "Interior", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-talking-phone_23-2149361903.jpg" }
+        { id: "p4", brand: "Style", name: "Interior", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-talking-phone_23-2149361903.jpg" }
       ]}
       title="Portfolio"
       description="Browse our latest work from the shop floor."
+      cardRatingClassName="text-orange-500"
     />
   </div>
 
@@ -96,10 +115,10 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        { id: "t1", name: "John D.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-talking-phone_23-2149235740.jpg" },
+        { id: "t1", name: "John D.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-talking-phone_23-2149235740.jpg" },
-        { id: "t2", name: "Mike S.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-female-blazer-beauty-blonde_1139-773.jpg" },
+        { id: "t2", name: "Mike S.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-blazer-beauty-style_1139-773.jpg" },
-        { id: "t3", name: "Alex R.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-tablet_23-2149927583.jpg" },
+        { id: "t3", name: "Alex R.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-with-tablet_23-2149927583.jpg" },
-        { id: "t4", name: "Sam B.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-holding-tablet-close-up_23-2148943517.jpg" }
+        { id: "t4", name: "Sam B.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-holding-tablet-close-up_23-2148943517.jpg" }
       ]}
       kpiItems={[
         { value: "1000+", label: "Satisfied Customers" },
@@ -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>
 
@@ -143,4 +163,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}