Merge version_3 into main

Merge version_3 into main

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>
   );