Update src/app/about/page.tsx

src/app/about/page.tsx

@@ -3,10 +3,10 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import TextAbout from "@/components/sections/about/TextAbout";
+import AboutMetric from "@/components/sections/about/AboutMetric";
 import TeamCardOne from "@/components/sections/team/TeamCardOne";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles } from "lucide-react";
+import { Clock, Sparkles, Star } from "lucide-react";
 
 export default function AboutPage() {
   return (
@@ -18,7 +18,7 @@ export default function AboutPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
@@ -26,24 +26,24 @@ export default function AboutPage() {
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
-            { name: "Home", href: "/" },
-            { name: "Work", href: "/#work" },
-            { name: "Services", href: "/#services" },
-            { name: "About", href: "/about" },
-            { name: "Contact", href: "/contact" }
+            { name: "Home", id: "/" },
+            { name: "Work", id: "/#work" },
+            { name: "Services", id: "/#services" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
           ]}
           button={{ text: "Get Started", href: "/contact" }}
         />
 
-        <TextAbout
-          tag="Our Story"
+        <AboutMetric
           title="Crafting Digital Excellence Since 2018"
-          buttons={[
-            { text: "View Our Work", href: "/#work" },
-            { text: "Contact Us", href: "/contact" }
+          metrics={[
+            { icon: Clock, label: "Years of Experience", value: "5+" },
+            { icon: Sparkles, label: "Projects Completed", value: "100+" },
+            { icon: Star, label: "Client Satisfaction", value: "High" }
           ]}
+          metricsAnimation="blur-reveal"
           useInvertedBackground={false}
-          description="Webild is a passionate team of digital innovators dedicated to building exceptional online experiences. Since 2018, we've partnered with businesses of all sizes to design, develop, and launch websites that not only look stunning but also drive tangible results. We believe in the power of a strong online presence to transform brands and connect them with their audience effectively."
         />
 
         <TeamCardOne