Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -5,11 +5,12 @@ import ReactLenis from "lenis/react";
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import { MessageCircle, Sparkles, Zap } from "lucide-react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import { MessageCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -20,66 +21,60 @@ export default function LandingPage() {
         contentWidth="medium"
         sizing="medium"
         background="blurBottom"
-        cardStyle="inset"
-        primaryButtonStyle="double-inset"
-        secondaryButtonStyle="glass"
-        headingFontWeight="semibold"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleCentered
+      <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Shop",
-          id: "shop",
-        },
-        {
-          name: "Quiz",
-          id: "quiz",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "value" },
+        { name: "Science", id: "faq" },
+        { name: "Results", id: "metric" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Super Patch Power"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      title="Find Your Perfect Patch"
-      description="Unlock your body's full potential with the right combination. Take our free quiz and reach out for personalized support to avoid retail markup."
-      imageSrc="http://img.b2bpic.net/free-photo/3d-render-particle-design-with-motion-blur-effect_1048-12685.jpg?_wi=1"
-      imageAlt="Futuristic wellness interface"
-      tag="Elevate Your Health"
-      tagIcon={Sparkles}
-      buttons={[
-        {
-          text: "Take the Quiz",
-          href: "#",
-        },
-        {
-          text: "Shop Now",
-          href: "#",
-        },
-      ]}
+      <HeroLogoBillboard
+      logoText="Super Patch Power"
+      description="Harnessing the future of non-transdermal technology to unlock your body's hidden potential. Experience wellness reimagined."
+      background={{ variant: "sparkles-gradient" }}
+      buttons={[{ text: "Take the Quiz" }, { text: "Shop Now" }]}
+      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="value" data-section="value">
-      <TestimonialAboutCard
+      <TextSplitAbout
+      title="Wellness Evolution"
+      description={["Most individuals require specific combinations of patches to achieve optimal results. Don't pay retail corporate prices; access member pricing and save over $30 on every order."]}
       useInvertedBackground={false}
-      tag="Expert Guidance"
-      title="Why Work With Me?"
-      description="Most individuals require specific combinations of patches to achieve optimal results. Don't pay retail corporate prices; use my link to access member pricing and save over $30 on every order."
-      subdescription="One time order: $69 USD | Monthly Subscription: $65 USD"
-      icon={Zap}
-      imageSrc="http://img.b2bpic.net/free-photo/eyeshadow-finger-close-up-swatch_127675-2603.jpg"
-      mediaAnimation="blur-reveal"
+    />
+  </div>
+
+  <div id="testimonial" data-section="testimonial">
+      <TestimonialCardFive
+      title="What Our Community Says"
+      description="Our community shares their transformative experiences."
+      textboxLayout="split"
+      useInvertedBackground={true}
+      testimonials={[
+        {
+          id: "t1",          name: "Alex R.",          date: "2024-05-12",          title: "Amazing Results",          quote: "The patches work amazingly! I feel a distinct shift in my energy levels every single day.",          tag: "Product Enthusiast",          avatarSrc: "https://img.b2bpic.net/free-photo/portrait-young-man-with-dark-hair_23-2148154157.jpg"
+        },
+        {
+          id: "t2",          name: "Sarah K.",          date: "2024-06-01",          title: "The Liberty Patch",          quote: "The balance test with the Liberty patch was awesome. I couldn't believe the difference in stability immediately.",          tag: "Verified Member",          avatarSrc: "https://img.b2bpic.net/free-photo/young-woman-with-long-hair_23-2148154157.jpg"
+        },
+        {
+          id: "t3",          name: "Dr. Marcus V.",          date: "2024-06-15",          title: "Future of Health",          quote: "This is the future of medicine. A non-invasive, drug-free approach that finally makes sense for modern biology.",          tag: "Health Professional",          avatarSrc: "https://img.b2bpic.net/free-photo/man-smiling-camera_23-2148154157.jpg"
+        }
+      ]}
     />
   </div>
 
@@ -88,146 +83,56 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       title="Common Questions"
-      description="Quick answers to help you understand how to maximize your wellness experience."
+      description="Everything you need to know about our technology."
       faqs={[
-        {
-          id: "f1",
-          title: "How do patches work?",
-          content: "Our non-invasive technology uses vibrotactile stimulation to signal the body.",
-        },
-        {
-          id: "f2",
-          title: "Is it safe?",
-          content: "Yes, our products are non-transdermal and free from drugs or chemicals.",
-        },
-        {
-          id: "f3",
-          title: "Can I use multiple patches?",
-          content: "Absolutely, many users see better results when stacking specific patch combinations.",
-        },
-        {
-          id: "f4",
-          title: "How long do they last?",
-          content: "Each patch provides wellness support for up to 24 hours.",
-        },
-        {
-          id: "f5",
-          title: "Shipping times?",
-          content: "Orders are typically processed and shipped within 48 hours.",
-        },
+        { id: "f1", title: "How do patches work?", content: "Our non-invasive technology uses vibrotactile stimulation." },
+        { id: "f2", title: "Is it safe?", content: "Yes, drug-free and non-transdermal." }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/3d-render-particle-design-with-motion-blur-effect_1048-12685.jpg?_wi=2"
-      mediaAnimation="slide-up"
       faqsAnimation="slide-up"
     />
   </div>
 
   <div id="metric" data-section="metric">
       <MetricCardTwo
-      animationType="slide-up"
+      animationType="depth-3d"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
+      gridVariant="bento-grid"
       useInvertedBackground={false}
-      title="Why Our Community Chooses Us"
-      description="Join thousands of members experiencing the power of non-transdermal technology."
+      title="Performance Metrics"
+      description="Key statistics of our growing user community."
       metrics={[
-        {
-          id: "m1",
-          value: "30%",
-          description: "Average member savings",
-        },
-        {
-          id: "m2",
-          value: "10k+",
-          description: "Happy customers",
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          description: "Support access",
-        },
+        { id: "m1", value: "30%", description: "Average Savings" },
+        { id: "m2", value: "10k+", description: "Active Users" },
+        { id: "m3", value: "24/7", description: "Support" }
       ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactFaq
-      animationType="slide-up"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "1. SHOP ALL PATCHES",
-          content: "Get access to all patches with my member link.",
-        },
-        {
-          id: "2",
-          title: "2. PATCH QUIZ!",
-          content: "Find out exactly what your body needs with our assessment.",
-        },
-        {
-          id: "3",
-          title: "3. VIDEO: WHAT IS THIS PATCH?",
-          content: "Watch this overview to understand the technology behind the wellness patches.",
-        },
-        {
-          id: "4",
-          title: "4. DM ME on FACEBOOK",
-          content: "Send me a message for personal advice and order help.",
-        },
-        {
-          id: "5",
-          title: "5. CONNECT ON INSTAGRAM",
-          content: "Follow for daily tips, success stories, and wellness updates.",
-        },
-      ]}
-      ctaTitle="Ready to get started?"
-      ctaDescription="Have questions? Reach out directly via the links above or send me a message."
-      ctaButton={{
-        text: "Connect Now",
-      }}
+      animationType="blur-reveal"
+      useInvertedBackground={true}
+      ctaTitle="Ready for the future?"
+      ctaDescription="Join us today and secure your member pricing."
+      ctaButton={{ text: "Connect Now" }}
       ctaIcon={MessageCircle}
+      faqs={[
+        { id: "c1", title: "Shop Patches", content: "Access member link." },
+        { id: "c2", title: "Take Quiz", content: "Find your perfect match." }
+      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
       columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Shop Patches",
-              href: "#",
-            },
-            {
-              label: "Take Quiz",
-              href: "#",
-            },
-            {
-              label: "View Video",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Social",
-          items: [
-            {
-              label: "Facebook",
-              href: "#",
-            },
-            {
-              label: "Instagram",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Terms", href: "#" }] },
+        { title: "Support", items: [{ label: "Contact", href: "#" }] }
       ]}
-      copyrightText="© 2024 Super Patch Power. All rights reserved."
+      copyrightText="© 2025 Super Patch Power"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}