Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -2,162 +2,158 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import TextAbout from '@/components/sections/about/TextAbout';
 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 ContactText from '@/components/sections/contact/ContactText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 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 HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import { MapPin, BookOpen } 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
+          <NavbarStyleFullscreen
             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"
-            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" }
+          <HeroSplitDoubleCarousel
+            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}
+            leftCarouselItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/top-view-coffee-cookies_23-2148571119.jpg?_wi=1" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-notepad-cafe-table_23-2147962616.jpg?_wi=1" }
+            ]}
+            rightCarouselItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/professional-artisan-job-workshop_23-2148801581.jpg?_wi=1" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/table-ready-lunch_1162-65.jpg?_wi=1" }
             ]}
-            mediaAnimation="slide-up"
-            rating={5}
-            ratingText="Trusted by 500+ remote workers"
           />
         </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"
+          <ProductCardFour
+            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", variant: "Open", imageSrc: "http://img.b2bpic.net/free-photo/table-ready-lunch_1162-65.jpg?_wi=2" },
+              { id: "s2", name: "Zen Bean Cafe", price: "$$$ - Silent Zone", variant: "Quiet", 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
+          <FeatureCardThree
+            title="What We Evaluate"
+            description="Our criteria ensures that every recommended shop is perfect for deep work."
+            gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
-            textboxLayout="split"
+            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.", imageSrc: "http://img.b2bpic.net/free-photo/interior-nice-bar_23-2147897025.jpg?_wi=1" },
+              { title: "Locally Roasted", description: "Fresh beans from the best local roasters.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-coffee-cookies_23-2148571119.jpg?_wi=2" },
+              { title: "Ergonomics", description: "Comfortable seating for hours of focus.", imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-notepad-cafe-table_23-2147962616.jpg?_wi=2" },
+              { title: "Quiet Atmosphere", description: "Low noise, low traffic environments.", imageSrc: "http://img.b2bpic.net/free-photo/professional-artisan-job-workshop_23-2148801581.jpg?_wi=2" }
             ]}
-            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"
+          <TestimonialCardTwo
+            title="What Workers Say"
+            description="Success stories from our community."
+            animationType="blur-reveal"
             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" }
+              { id: "t1", name: "Alex R.", role: "Remote Developer", testimonial: "I doubled my output in just one week by finding this spot. The quiet zone is a game changer!", icon: BookOpen }
             ]}
-            title="Community Voices"
-            description="Hear from locals and visitors alike on their favorite productive coffee spots."
           />
         </div>
 
         <div id="faq" data-section="faq">
-            <FaqDouble
+          <FaqSplitMedia
+            title="Work-From-Cafe FAQs"
+            faqs={[
+              { 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." }
+            ]}
+            description="Everything you need to know."
+            imageSrc="http://img.b2bpic.net/free-photo/interior-nice-bar_23-2147897025.jpg?_wi=2"
+            faqsAnimation="slide-up"
             textboxLayout="split"
             useInvertedBackground={false}
-            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." }
-            ]}
-            title="Common Questions"
-            description="Have questions about our selection or locations? Here are some quick answers."
-            faqsAnimation="slide-up"
           />
         </div>
 
         <div id="blog" data-section="blog">
-            <BlogCardThree
-            animationType="slide-up"
+          <BlogCardThree
+            title="Productivity Tips"
+            description="Insights into maintaining focus while working from public spaces."
+            animationType="blur-reveal"
             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?_wi=3", authorName: "Admin", authorAvatar: "", date: "Jan 2025" }
             ]}
           />
         </div>
 
         <div id="contact" data-section="contact">
-            <ContactCenter
+          <ContactText
+            text="Found a new quiet spot? 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"
+          <FooterBaseCard
+            logoText="DeepWork Coffee"
             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: "#" }] }
+              { title: "Links", items: [{ label: "Home", href: "#hero" }, { label: "Shops", href: "#shops" }] },
+              { title: "Support", items: [{ label: "Privacy", href: "#" }, { label: "Contact", href: "#contact" }] }
             ]}
           />
         </div>