src/app/page.tsx

@@ -9,7 +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 { Sparkles } from '@/components/background/Sparkles';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import { Sparkles, BarChart3, Users, Target, Zap } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -31,6 +32,8 @@ export default function LandingPage() {
       navItems={[
         {
           name: "Surface",          id: "hero"},
+        {
+          name: "About",          id: "about"},
         {
           name: "Midwater",          id: "features"},
         {
@@ -50,7 +53,7 @@ export default function LandingPage() {
       description="Experience the mesmerizing transition from the sunlit surface to the mysterious ocean deep. A calm, futuristic exploration awaits."
       buttons={[
         {
-          text: "Begin Descent",          href: "#features"},
+          text: "Begin Descent",          href: "#about"},
       ]}
       carouselItems={[
         {
@@ -70,6 +73,19 @@ export default function LandingPage() {
     <Sparkles particleDensity={80} speed={2} />
   </div>
 
+  <div id="about" data-section="about">
+      <AboutMetric 
+        title="Our Impact Underwater"
+        metricsAnimation="slide-up"
+        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"
@@ -155,4 +171,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}