From 76ff1e1ebd6581fa5bf10d1f6c6b8847da6859e4 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 12 Jun 2026 21:25:58 +0000
Subject: [PATCH] Update src/app/about/page.tsx

---
 src/app/about/page.tsx | 124 ++++++++++++++++++++++-------------------
 1 file changed, 68 insertions(+), 56 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index b0266ac..b67343b 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,8 +3,9 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import FooterBase from "@/components/sections/footer/FooterBase";
+import { Users, Lightbulb, TrendingUp } from 'lucide-react';
 
 export default function WebAgency2AboutPage() {
   return (
@@ -16,65 +17,76 @@ export default function WebAgency2AboutPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "/about" },
-            { name: "Team", id: "/team" },
-            { name: "Contact", id: "/contact" }
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <InlineImageSplitTextAbout
-          heading={[
-            { type: 'text', content: 'We are Webild, a digital agency crafting exceptional web experiences.' }
-          ]}
-          buttons={[
-            { text: 'View Our Work', href: '#work' },
-            { text: 'Contact Us', href: '/contact' }
-          ]}
-          useInvertedBackground={false}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp"
-          imageAlt="Our creative team working"
-        />
-        <FooterBase
-          logoText="Webild"
-          copyrightText="© 2026 | Webild"
-          columns={[
-            {
-              title: "Company",              items: [
-                { label: "About", href: "/about" },
-                { label: "Team", href: "/team" },
-                { label: "Work", href: "#work" },
-                { label: "Services", href: "#services" },
-                { label: "Contact", href: "/contact" }
-              ]
-            },
-            {
-              title: "Services",              items: [
-                { label: "Web Development", href: "#" },
-                { label: "SEO", href: "#" },
-                { label: "Branding", href: "#" },
-                { label: "UI/UX Design", href: "#" }
-              ]
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Twitter", href: "#" },
-                { label: "LinkedIn", href: "#" },
-                { label: "Instagram", href: "#" },
-                { label: "Dribbble", href: "#" }
-              ]
-            }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Work", id: "work" },
+              { name: "Services", id: "services" },
+              { name: "About", id: "/about" },
+              { name: "Team", id: "/team" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="about" data-section="about">
+          <MetricCardOne
+            title="We are Webild, a digital agency crafting exceptional web experiences."
+            description="Our passion lies in transforming innovative ideas into stunning, functional, and user-centric digital products. We combine creative design with robust development to deliver solutions that drive growth and engage audiences."
+            metrics={[
+              { id: "m1", value: "10+", title: "Years of Experience", description: "Crafting digital success since 2013.", icon: Lightbulb },
+              { id: "m2", value: "150+", title: "Projects Completed", description: "Delivering exceptional results for diverse clients.", icon: TrendingUp },
+              { id: "m3", value: "30+", title: "Expert Team", description: "A passionate group of designers and developers.", icon: Users }
+            ]}
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            buttons={[
+              { text: 'View Our Work', href: '#work' },
+              { text: 'Contact Us', href: '/contact' }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            copyrightText="© 2026 | Webild"
+            columns={[
+              {
+                title: "Company",              items: [
+                  { label: "About", href: "/about" },
+                  { label: "Team", href: "/team" },
+                  { label: "Work", href: "#work" },
+                  { label: "Services", href: "#services" },
+                  { label: "Contact", href: "/contact" }
+                ]
+              },
+              {
+                title: "Services",              items: [
+                  { label: "Web Development", href: "#" },
+                  { label: "SEO", href: "#" },
+                  { label: "Branding", href: "#" },
+                  { label: "UI/UX Design", href: "#" }
+                ]
+              },
+              {
+                title: "Connect",              items: [
+                  { label: "Twitter", href: "#" },
+                  { label: "LinkedIn", href: "#" },
+                  { label: "Instagram", href: "#" },
+                  { label: "Dribbble", href: "#" }
+                ]
+              }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );