src/app/page.tsx

@@ -9,8 +9,8 @@ import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboa
 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 { BarChart3, Users, Target, Zap, Waves } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -59,6 +59,17 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="about" data-section="about">
+      <TestimonialAboutCard 
+        tag="Our Mission"
+        title="About Debris Free Oceans"
+        description="We are dedicated to turning off the waste tap to protect our blue planet. Through education, community action, and sustainable solutions, we work to heal our waters."
+        subdescription="Join us as we explore the 5Rs—Refuse, Reduce, Reuse, Repurpose, Recycle—to maintain the health of our currents and marine ecosystems."
+        icon={Waves}
+        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/panoramic-ocean-surface-with-sun-glisten-1775511261059-f4eb7d73.png"
+      />
+  </div>
+
   <div id="features" data-section="features">
       <FeatureCardThree
       animationType="slide-up"
@@ -75,20 +86,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric 
-        title="Our Impact Underwater"
-        metricsAnimation="slide-up"
-        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="metrics" data-section="metrics">
       <MetricCardFourteen
       useInvertedBackground={false}
@@ -141,4 +138,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}