Update src/app/page.tsx

Merge version_17 into main

src/app/layout.tsx

@@ -19,9 +19,11 @@ export const metadata: Metadata = {
   },
 };
 
+
+
+
 const montserrat = Montserrat({
-  variable: "--font-montserrat",
-  subsets: ["latin"],
+  variable: "--font-montserrat",  subsets: ["latin"],
 });
 
 export default function RootLayout({

src/app/page.tsx

@@ -3,14 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import { BarChart3, Users, Target, Zap } from 'lucide-react';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import { Recycle } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -21,9 +20,9 @@ export default function LandingPage() {
         contentWidth="mediumLarge"
         sizing="mediumLargeSizeLargeTitles"
         background="grid"
-        cardStyle="gradient-radial"
+        cardStyle="glass-elevated"
         primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="glass"
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
@@ -31,7 +30,7 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         { name: "Surface", id: "hero" },
-        { name: "About", id: "about" },
+        { name: "The Strategy", id: "about" },
         { name: "Midwater", id: "features" },
         { name: "Abyss", id: "metrics" },
         { name: "Connect", id: "contact" },
@@ -59,33 +58,60 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric 
-        title="Our Impact Underwater"
-        metricsAnimation="slide-up"
+  <div id="about-1" data-section="about-1">
+      <TestimonialAboutCard
+        tag="Our Mission"
+        title="About Debris Free Oceans"
+        description='We are a Miami-based organization dedicated to "turning off the waste tap." Our mission is to lead the transition toward a zero-waste economy by addressing both the infrastructure and the culture of disposable living.'
+        subdescription=""
+        icon={Recycle}
+        videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.mp4?_wi=1"
+        mediaAnimation="blur-reveal"
+        className="py-24 bg-background-accent"
+        useInvertedBackground={false}
+      />
+  </div>
+
+  <div id="about-2" data-section="about-2">
+      <TestimonialAboutCard
+        tag="Our Mission"
+        title="About Debris Free Oceans"
+        description='We are a Miami-based organization dedicated to "turning off the waste tap." Our mission is to lead the transition toward a zero-waste economy by addressing both the infrastructure and the culture of disposable living.'
+        subdescription=""
+        icon={Recycle}
+        videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.mp4?_wi=2"
+        mediaAnimation="blur-reveal"
+        className="py-24 bg-background-accent"
+        useInvertedBackground={false}
+      />
+  </div>
+
+  <div id="about-3" data-section="about-3">
+      <TestimonialAboutCard
+        tag="Our Mission"
+        title="About Debris Free Oceans"
+        description='We are a Miami-based organization dedicated to "turning off the waste tap." Our mission is to lead the transition toward a zero-waste economy by addressing both the infrastructure and the culture of disposable living.'
+        subdescription=""
+        icon={Recycle}
+        videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.mp4?_wi=3"
+        mediaAnimation="blur-reveal"
+        className="py-24 bg-background-accent"
         useInvertedBackground={false}
-        metrics={[
-          { icon: BarChart3, label: "Depth Scanned", value: "45,000 km" },
-          { icon: Users, label: "Active Explorers", value: "1,200+" },
-          { icon: Target, label: "Zones Discovered", value: "85" },
-          { icon: Zap, label: "Data Processed", value: "12 TB" }
-        ]}
       />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardThree
-      animationType="slide-up"
+      <FeatureCardTwelve
+      animationType="blur-reveal"
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+      title="Our Core Strategy: The 5Rs"
+      description='We move beyond just "cleaning up" by integrating a circular approach to waste'
       features={[
-        { title: "Bioluminescent Wonders", description: "Glimmering organisms that light up the darkness.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/vibrant-coral-reef-in-midwater-soft-ligh-1775511262201-ae7e40af.png" },
-        { title: "Fluid Dynamics", description: "Experience currents that shape the ocean floor.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/school-of-fish-swimming-through-midwater-1775511261257-73e530b0.png" },
-        { title: "Atmospheric Pressure", description: "Feel the intensity of depth in every interaction.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/bubbles-drifting-past-futuristic-ocean-u-1775511260463-ae02a6e5.png" },
+        { id: "1", label: "Reduce", title: "", items: ["Inspiring a shift away from single-use consumption to stop waste before it starts.", ""] },
+        { id: "2", label: "Reuse ", title: "", items: ["Extending the life of products through innovative, cost-saving approaches.", "", ""] },
+        { id: "3", label: "Recycle", title: "", items: ["", "Supporting responsible processing of materials when reuse is no longer an option.", ""] },
       ]}
-      title="The Midwater Journey"
-      description="As you descend, witness the change in light, pressure, and the diverse marine life thriving in these deep, cool waters."
+      useInvertedBackground={false}
     />
   </div>
 
@@ -103,24 +129,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        { id: "1", name: "Elena V.", handle: "@elena_ocean", testimonial: "The transition to the deep ocean felt so incredibly real.", rating: 5 },
-        { id: "2", name: "Marcus R.", handle: "@marcus_deep", testimonial: "The lighting effects are absolutely stunning. Truly immersive.", rating: 5 },
-        { id: "3", name: "Sarah K.", handle: "@sarah_waves", testimonial: "A calming and futuristic experience unlike any other I've seen.", rating: 5 },
-        { id: "4", name: "David W.", handle: "@david_explore", testimonial: "Loved the subtle animations as you scroll down the page.", rating: 5 },
-        { id: "5", name: "Chloe L.", handle: "@chloe_blue", testimonial: "The perfect balance of minimalist UI and deep ocean atmosphere.", rating: 5 },
-      ]}
-      showRating={true}
-      title="Explorers' Impressions"
-      description="Discover what fellow travelers experienced during their descent."
-    />
-  </div>
-
   <div id="contact" data-section="contact">
       <ContactCenter
       useInvertedBackground={false}