Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,166 +2,154 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { Coffee, Users, Wifi } from "lucide-react";
+import TextAbout from '@/components/sections/about/TextAbout';
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import { MapPin, Wifi, Coffee, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="text-shift"
         defaultTextAnimation="background-highlight"
-        borderRadius="soft"
-        contentWidth="small"
-        sizing="largeSmall"
-        background="aurora"
-        cardStyle="glass-depth"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="layered"
-        headingFontWeight="bold"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="noise"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-            <NavbarStyleCentered
+            <NavbarLayoutFloatingOverlay
             navItems={[
               { name: "Home", id: "hero" },
-              { name: "About", id: "about" },
               { name: "Shops", id: "shops" },
               { name: "Contact", id: "contact" },
             ]}
-            brandName="Samoa Coffee Work"
+            brandName="DeepWork Coffee"
           />
         </div>
 
         <div id="hero" data-section="hero">
-            <HeroSplitDualMedia
-            background={{ variant: "plain" }}
-            title="Deep Work in Paradise"
-            description="Discover the most quiet, reliable, and inspiring coffee shops across Tualauta and Iliili Asuemu for your productive sessions."
-            tag="Coffee & Focus"
+            <HeroBillboardGallery
+            title="Find Your Perfect Flow"
+            description="Discover the best coffee shops for deep work across American Samoa. Quiet, reliable, and inspiring."
+            background={{ variant: "sparkles-gradient" }}
+            tag="Concentration First"
+            tagIcon={MapPin}
             mediaItems={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/top-view-coffee-cookies_23-2148571119.jpg", imageAlt: "cozy coffee shop interior warm lighting" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/black-wedding-background-restaurant-tableware_1203-3980.jpg", imageAlt: "bright cafe workspace window view" }
+              { imageSrc: "http://img.b2bpic.net/free-photo/top-view-coffee-cookies_23-2148571119.jpg", imageAlt: "cozy workspace" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/professional-artisan-job-workshop_23-2148801581.jpg", imageAlt: "modern cafe interior" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-notepad-cafe-table_23-2147962616.jpg", imageAlt: "productive desk setup" }
             ]}
-            mediaAnimation="slide-up"
-            rating={5}
-            ratingText="Trusted by 500+ remote workers"
+            mediaAnimation="blur-reveal"
           />
         </div>
 
         <div id="about" data-section="about">
-            <AboutMetric
+            <TextAbout
+            title="We curate spaces where productivity meets the perfect cup of coffee."
+            tag="Our Philosophy"
             useInvertedBackground={false}
-            title="Quality Workspace Metrics"
-            metrics={[
-              { icon: Wifi, label: "Reliable Wi-Fi", value: "100%" },
-              { icon: Coffee, label: "Local Beans", value: "20+" },
-              { icon: Users, label: "Quiet Zones", value: "15" }
-            ]}
-            metricsAnimation="blur-reveal"
           />
         </div>
 
         <div id="shops" data-section="shops">
-            <ProductCardTwo
-            animationType="slide-up"
-            textboxLayout="split-description"
-            gridVariant="uniform-all-items-equal"
+            <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", brand: "Tualauta", name: "Island Brew Studio", price: "$$$", rating: 5, reviewCount: "120 reviews", imageSrc: "http://img.b2bpic.net/free-photo/table-ready-lunch_1162-65.jpg" },
-              { id: "s2", brand: "Leasina", name: "Quiet Haven Cafe", price: "$$", rating: 4, reviewCount: "85 reviews", imageSrc: "http://img.b2bpic.net/free-photo/professional-artisan-job-workshop_23-2148801581.jpg" },
-              { id: "s3", brand: "Iliili", name: "Zen Bean Workspace", price: "$$", rating: 5, reviewCount: "95 reviews", imageSrc: "http://img.b2bpic.net/free-photo/photo-concentrated-readhead-bearded-businessman-reading-contract-sitting-cafeteria_171337-9893.jpg" }
+              { 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" }
             ]}
-            title="Top Recommended Spots"
-            description="Curated selection of coffee shops in Iliili Asuemu and surroundings optimized for deep work."
           />
         </div>
 
         <div id="features" data-section="features">
-            <FeatureCardSeven
-            animationType="slide-up"
-            textboxLayout="split"
+            <FeatureCardTwentySix
+            title="What We Evaluate"
+            description="Our criteria ensures that every recommended shop is perfect for deep work."
+            textboxLayout="inline-image"
             useInvertedBackground={false}
             features={[
-              { title: "Ultra-Fast Wi-Fi", description: "High-speed connection guaranteed for all your video calls.", imageSrc: "http://img.b2bpic.net/free-photo/cocktail-wooden-table-restaurant_23-2147936121.jpg", imageAlt: "modern coffee shop interior" },
-              { title: "Ergonomic Comfort", description: "Tables and chairs designed for long-term comfort.", imageSrc: "http://img.b2bpic.net/free-photo/hands-african-american-woman-yellow-dreess-with-cup-cappuccino_627829-12947.jpg", imageAlt: "bright cafe workspace window view" }
+              { title: "High Speed Wi-Fi", description: "Consistent, fiber-grade internet access.", buttonIcon: Wifi },
+              { title: "Locally Roasted", description: "Fresh beans from the best local roasters.", buttonIcon: Coffee },
+              { title: "Ergonomics", description: "Comfortable seating for hours of focus.", buttonIcon: Star },
+              { title: "Quiet Atmosphere", description: "Low noise, low traffic environments.", buttonIcon: MapPin }
             ]}
-            title="Why Work Here?"
-            description="We evaluate based on essential criteria for professionals looking for concentration and comfort."
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-            <TestimonialCardSix
-            animationType="slide-up"
-            textboxLayout="split"
-            useInvertedBackground={false}
-            testimonials={[
-              { id: "t1", name: "Sarah Miller", handle: "@sarahworks", testimonial: "The best spot in Tualauta to get deep work done during the day.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blond-female-model-showing-thumbs-up-sitting-with-laptop-study-material_1258-205399.jpg" },
-              { id: "t2", name: "David Chen", handle: "@davecodes", testimonial: "Excellent internet and the coffee is truly locally sourced and rich.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-freelancer-connecting-wireless-network-via-laptop-thoughtful-man-working-notebook-while-sitting-wooden-table-modern-coffee-shop-interior-student-reading-book-cafe_273609-1943.jpg" }
-            ]}
-            title="Community Voices"
-            description="Hear from locals and visitors alike on their favorite productive coffee spots."
+            <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" data-section="faq">
-            <FaqDouble
-            textboxLayout="split"
-            useInvertedBackground={false}
+            <FaqSplitText
+            sideTitle="Your Work-From-Cafe Questions"
             faqs={[
-              { id: "q1", title: "Are power outlets always available?", content: "Most of our selected shops prioritize workspaces with easy access to power outlets." },
-              { id: "q2", title: "How do you rate these shops?", content: "We visit each location personally to test Wi-Fi, noise levels, and comfort." }
+              { id: "q1", title: "How is Wi-Fi speed verified?", content: "We perform speed tests at peak and off-peak hours." },
+              { id: "q2", title: "Are these family friendly?", content: "We highlight the 'Deep Work' friendly shops, which are often quieter." }
             ]}
-            title="Common Questions"
-            description="Have questions about our selection or locations? Here are some quick answers."
             faqsAnimation="slide-up"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="blog" data-section="blog">
-            <BlogCardThree
+            <BlogCardOne
+            title="Productivity Tips"
+            description="Insights into maintaining focus while working from public spaces."
             animationType="slide-up"
             textboxLayout="split"
             useInvertedBackground={false}
-            title="Productivity Insights"
-            description="Tips for getting the most out of your cafe working sessions."
             blogs={[
-              { id: "b1", category: "Guide", title: "Mastering Deep Work in Cafes", excerpt: "How to stay focused amid distractions.", imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-notepad-cafe-table_23-2147962616.jpg", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/happy-businesswoman-talking-smartphone-while-holding-glass-chocolate-milkshake-restaurant_23-2147970873.jpg", date: "Jan 10, 2025" },
-              { id: "b2", category: "Tips", title: "Best Times for Quiet Coffee", excerpt: "The quietest hours in Tualauta shops.", imageSrc: "http://img.b2bpic.net/free-photo/interior-nice-bar_23-2147897025.jpg", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/working-woman-cafe-using-laptop-studying-remotely-freelancing-from-restaurant-drinking-coffee_1258-199157.jpg", date: "Jan 12, 2025" }
+              { 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" data-section="contact">
-            <ContactCenter
+            <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: "sparkles-gradient" }}
             useInvertedBackground={false}
-            background={{ variant: "plain" }}
-            tag="Newsletter"
-            title="Stay Updated"
-            description="Join our newsletter for weekly updates on the best quiet spots."
           />
         </div>
 
         <div id="footer" data-section="footer">
-            <FooterBaseCard
-            logoText="Samoa Coffee Work"
-            columns={[
-              { title: "Links", items: [{ label: "Home", href: "#hero" }, { label: "Shops", href: "#shops" }, { label: "Contact", href: "#contact" }] },
-              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
-            ]}
+            <FooterLogoReveal
+            logoText="DeepWork Coffee"
+            leftLink={{ text: "Privacy", href: "#" }}
+            rightLink={{ text: "Contact", href: "#contact" }}
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}