src/app/page.tsx

@@ -29,7 +29,7 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-        <div id="nav">
+        <div id="nav" data-section="nav">
             <NavbarLayoutFloatingOverlay
             navItems={[
               { name: "Home", id: "hero" },
@@ -40,7 +40,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="hero">
+        <div id="hero" data-section="hero">
             <HeroBillboardGallery
             title="Find Your Perfect Flow"
             description="Discover the best coffee shops for deep work across American Samoa. Quiet, reliable, and inspiring."
@@ -56,7 +56,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="about">
+        <div id="about" data-section="about">
             <TextAbout
             title="We curate spaces where productivity meets the perfect cup of coffee."
             tag="Our Philosophy"
@@ -64,13 +64,14 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="shops">
+        <div id="shops" data-section="shops">
             <ProductCardOne
             title="Curated Workspaces"
             description="Only shops with proven Wi-Fi and quiet environments make our list."
             gridVariant="asymmetric-60-wide-40-narrow"
             animationType="blur-reveal"
             textboxLayout="split"
+            useInvertedBackground={false}
             products={[
               { id: "s1", name: "Island Brew Studio", price: "$$ - Reliable Wi-Fi", imageSrc: "http://img.b2bpic.net/free-photo/table-ready-lunch_1162-65.jpg" },
               { id: "s2", name: "Zen Bean Cafe", price: "$$$ - Silent Zone", imageSrc: "http://img.b2bpic.net/free-photo/photo-concentrated-readhead-bearded-businessman-reading-contract-sitting-cafeteria_171337-9893.jpg" }
@@ -78,7 +79,7 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="features">
+        <div id="features" data-section="features">
             <FeatureCardTwentySix
             title="What We Evaluate"
             description="Our criteria ensures that every recommended shop is perfect for deep work."
@@ -93,18 +94,19 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="testimonials">
+        <div id="testimonials" data-section="testimonials">
             <TestimonialCardFifteen
             testimonial="I doubled my output in just one week by finding this spot. The quiet zone is a game changer for remote freelancers!"
             author="Alex R., Remote Developer"
             rating={5}
             ratingAnimation="slide-up"
             avatarsAnimation="opacity"
+            avatars={[{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-male-worker_1162-65.jpg", alt: "User" }]}
             useInvertedBackground={true}
           />
         </div>
 
-        <div id="faq">
+        <div id="faq" data-section="faq">
             <FaqSplitText
             sideTitle="Your Work-From-Cafe Questions"
             faqs={[
@@ -112,32 +114,34 @@ export default function LandingPage() {
               { id: "q2", title: "Are these family friendly?", content: "We highlight the 'Deep Work' friendly shops, which are often quieter." }
             ]}
             faqsAnimation="slide-up"
+            useInvertedBackground={false}
           />
         </div>
 
-        <div id="blog">
+        <div id="blog" data-section="blog">
             <BlogCardOne
             title="Productivity Tips"
             description="Insights into maintaining focus while working from public spaces."
             animationType="slide-up"
             textboxLayout="split"
+            useInvertedBackground={false}
             blogs={[
               { id: "b1", category: "Guide", title: "Deep Work Techniques", excerpt: "How to block distractions anywhere.", imageSrc: "http://img.b2bpic.net/free-photo/interior-nice-bar_23-2147897025.jpg", authorName: "Admin", authorAvatar: "", date: "Jan 2025" }
             ]}
           />
         </div>
 
-        <div id="contact">
+        <div id="contact" data-section="contact">
             <ContactCTA
             tag="Get Involved"
             title="Found a new quiet spot?"
             description="Tell us about your favorite hidden gem for deep work."
             buttons={[{ text: "Submit a Location", href: "#contact" }]}
-            background={{ variant: "glowing-orb" }}
+            background={{ variant: "sparkles-gradient" }}
           />
         </div>
 
-        <div id="footer">
+        <div id="footer" data-section="footer">
             <FooterLogoReveal
             logoText="DeepWork Coffee"
             leftLink={{ text: "Privacy", href: "#" }}