From 0e2224404d999ef379b444d6c21425db13729c77 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 24 Mar 2026 22:31:02 +0000
Subject: [PATCH] Update src/app/about/page.tsx

---
 src/app/about/page.tsx | 406 +++++++++++++----------------------------
 1 file changed, 127 insertions(+), 279 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 9a456bb..7ff16ff 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -2,296 +2,144 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { Hammer, Flask } from 'lucide-react';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
-import TeamCardFive from '@/components/sections/team/TeamCardFive';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { Users } from "lucide-react";
+import TeamCardTen from '@/components/sections/team/TeamCardTen';
 
-export default function LandingPage() {
+export default function AboutPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="bounce-effect"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="soft"
-        contentWidth="mediumLarge"
-        sizing="largeSmall"
-        background="circleGradient"
-        cardStyle="outline"
-        primaryButtonStyle="double-inset"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="extrabold"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="largeSmall"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "home",
-          href: "/",
-        },
-        {
-          name: "About",
-          id: "about",
-          href: "/about",
-        },
-        {
-          name: "Services",
-          id: "services",
-          href: "/services",
-        },
-        {
-          name: "Portfolio",
-          id: "portfolio",
-          href: "/portfolio",
-        },
-        {
-          name: "Insights",
-          id: "insights",
-          href: "/insights",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-          href: "/contact",
-        },
-      ]}
-      brandName="MTL Labs"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Home",                id: "/"
+              },
+              {
+                name: "About",                id: "/about"
+              },
+              {
+                name: "Services",                id: "/services"
+              },
+              {
+                name: "Portfolio",                id: "/portfolio"
+              },
+              {
+                name: "Insights",                id: "/insights"
+              },
+              {
+                name: "Contact",                id: "/contact"
+              }
+            ]}
+            brandName="MTL Labs"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="default"
-      useInvertedBackground={false}
-      imagePosition="right"
-      title="Engineered Aesthetics, Designed for Impact"
-      description="MTL Labs is a Montreal-based design and experimentation studio, blending rigorous processes with refined aesthetics to create distinctive brands, products, and digital experiences. We believe that true innovation stems from a deep understanding of both form and function, delivering solutions that are not just visually striking, but also deeply functional and intuitive."
-      bulletPoints={[
-        {
-          title: "Precision Engineering & Craftsmanship",
-          description: "Applying meticulous attention to detail in every stage of design and development.",
-          icon: Hammer,
-        },
-        {
-          title: "Human-Centered Design Philosophy",
-          description: "Creating experiences that resonate deeply with users, focusing on empathy and usability.",
-          icon: Users,
-        },
-        {
-          title: "Iterative Experimentation & Prototyping",
-          description: "Constantly exploring new possibilities and refining ideas through rapid cycles of testing.",
-          icon: Flask,
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/an-authentic-photo-of-a-modern-industria-1774391289116-71ee3545.png?_wi=5"
-      imageAlt="A modern, industrial design workspace in Montreal"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="about-mission" data-section="about-mission">
+          <SplitAbout
+            textboxLayout="default"
+            useInvertedBackground={true}
+            title="The MTL Labs Philosophy"
+            description="We didn't just want to build a brand; we wanted to build a lab. A place for continuous exploration and refinement in design, fashion, and digital creation. Our philosophy centers on pushing the boundaries of what's possible, transforming concepts into tangible, impactful experiences."
+            bulletPoints={[
+              {
+                title: "Experimentation",                description: "Our core belief is in iterative design and continuous improvement.",                icon: Flask
+              },
+              {
+                title: "Craftsmanship",                description: "Meticulous attention to detail in every aspect of our work.",                icon: Hammer
+              }
+            ]}
+            mediaAnimation="opacity"
+          />
+        </div>
 
-  <div id="metric" data-section="metric">
-      <MetricSplitMediaAbout
-      useInvertedBackground={true}
-      title="Our Impact & Vision"
-      description="Since our inception, MTL Labs has driven innovation across various sectors, delivering exceptional results and fostering long-term partnerships. Our commitment to excellence is reflected in every project, pushing the boundaries of what's possible."
-      metrics={[
-        {
-          value: "150+",
-          title: "Successful Projects",
-        },
-        {
-          value: "10+",
-          title: "Years of Innovation",
-        },
-        {
-          value: "95%",
-          title: "Client Satisfaction",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/a-full-bleed-high-quality-horizontal-pho-1774391288821-74ac7ff4.png?_wi=2"
-      imageAlt="Modern industrial design lab workspace"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardTen
+            useInvertedBackground={false}
+            title="Meet the Minds Behind the Lab"
+            tag="Our Innovators"
+            membersAnimation="slide-up"
+            members={[
+              {
+                id: "member-1",                name: "Alexandre Dubois",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-diverse-team--1774391289896-91bd3cc0.png",                imageAlt: "Alexandre Dubois"
+              },
+              {
+                id: "member-2",                name: "Sophia Rodriguez",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-another-diverse-1774391288834-a8fb0265.png",                imageAlt: "Sophia Rodriguez"
+              },
+              {
+                id: "member-3",                name: "Omar Khan",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-third-diverse-1774391288586-87babd60.png",                imageAlt: "Omar Khan"
+              },
+              {
+                id: "member-4",                name: "Isabelle Chen",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-fourth-divers-1774391287834-7d7e1a7b.png",                imageAlt: "Isabelle Chen"
+              }
+            ]}
+            memberVariant="card"
+          />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardFive
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      team={[
-        {
-          id: "1",
-          name: "Alex Chen",
-          role: "Lead Product Designer",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-diverse-team--1774391289896-91bd3cc0.png?_wi=2",
-          imageAlt: "Professional headshot of Alex Chen",
-        },
-        {
-          id: "2",
-          name: "Sophie Dubois",
-          role: "Creative Director",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-another-diverse-1774391288834-a8fb0265.png?_wi=2",
-          imageAlt: "Professional headshot of Sophie Dubois",
-        },
-        {
-          id: "3",
-          name: "Marc Tremblay",
-          role: "Head of Engineering",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-third-diverse-1774391288586-87babd60.png?_wi=2",
-          imageAlt: "Professional headshot of Marc Tremblay",
-        },
-        {
-          id: "4",
-          name: "Lena Khan",
-          role: "Brand Strategist",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-fourth-divers-1774391287834-7d7e1a7b.png?_wi=2",
-          imageAlt: "Professional headshot of Lena Khan",
-        },
-      ]}
-      title="Meet the Minds Behind MTL Labs"
-      description="Our diverse team of designers, engineers, and strategists are united by a passion for pushing creative boundaries and solving complex challenges. We are a collective of innovators dedicated to turning visionary ideas into tangible realities."
-    />
-  </div>
-
-  <div id="testimonial" data-section="testimonial">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Emily Watson",
-          handle: "@emilyw",
-          testimonial: "MTL Labs transformed our brand identity with a process that was both thorough and inspiring. Their attention to detail is unparalleled.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-diverse-team--1774391289896-91bd3cc0.png?_wi=3",
-          imageAlt: "Emily Watson",
-        },
-        {
-          id: "2",
-          name: "David Lee",
-          handle: "@davidl",
-          testimonial: "The product design team delivered beyond expectations, creating a user experience that has garnered rave reviews and boosted engagement.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-another-diverse-1774391288834-a8fb0265.png?_wi=3",
-          imageAlt: "David Lee",
-        },
-        {
-          id: "3",
-          name: "Sarah Kim",
-          handle: "@sarahk",
-          testimonial: "Their approach to web development is truly innovative. We now have a platform that is not only beautiful but incredibly functional and scalable.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-third-diverse-1774391288586-87babd60.png?_wi=3",
-          imageAlt: "Sarah Kim",
-        },
-        {
-          id: "4",
-          name: "Michael Brown",
-          handle: "@michaelb",
-          testimonial: "Working with MTL Labs was a game-changer. They seamlessly integrated advanced engineering with stunning aesthetics to create something truly unique.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-fourth-divers-1774391287834-7d7e1a7b.png?_wi=3",
-          imageAlt: "Michael Brown",
-        },
-        {
-          id: "5",
-          name: "Jessica Green",
-          handle: "@jessicag",
-          testimonial: "Exceptional creativity and strategic insight. MTL Labs is our go-to for all design and innovation needs, consistently delivering top-tier results.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-diverse-team--1774391289896-91bd3cc0.png?_wi=4",
-          imageAlt: "Jessica Green",
-        },
-        {
-          id: "6",
-          name: "Robert White",
-          handle: "@robertw",
-          testimonial: "The results speak for themselves. Their experimental drops are always pushing boundaries, offering fresh perspectives and cutting-edge solutions.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-another-diverse-1774391288834-a8fb0265.png?_wi=4",
-          imageAlt: "Robert White",
-        },
-      ]}
-      title="What Our Clients Say"
-      description="We're proud to have partnered with leading brands and startups, helping them achieve their vision with our unique blend of aesthetics and innovation. Their success stories are our greatest motivators."
-      speed={50}
-      topMarqueeDirection="left"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "/about",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Portfolio",
-              href: "/portfolio",
-            },
-            {
-              label: "Insights",
-              href: "/insights",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Blog",
-              href: "/blog",
-            },
-            {
-              label: "FAQ",
-              href: "/faq",
-            },
-            {
-              label: "Support",
-              href: "/support",
-            },
-            {
-              label: "Careers",
-              href: "/careers",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "/privacy",
-            },
-            {
-              label: "Terms of Service",
-              href: "/terms",
-            },
-            {
-              label: "Cookie Policy",
-              href: "/cookies",
-            },
-          ],
-        },
-      ]}
-      logoText="MTL Labs"
-      copyrightText="© 2024 MTL Labs. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "About MTL Labs",                items: [
+                  {
+                    label: "MTL Labs: Experimentation and design from Montreal.",                    href: "#"
+                  },
+                  {
+                    label: "Instagram",                    href: "https://instagram.com/mtllabs"
+                  }
+                ]
+              },
+              {
+                title: "Quick Links",                items: [
+                  {
+                    label: "Home",                    href: "/"
+                  },
+                  {
+                    label: "About",                    href: "/about"
+                  },
+                  {
+                    label: "Portfolio",                    href: "/portfolio"
+                  }
+                ]
+              },
+              {
+                title: "Legal & Contact",                items: [
+                  {
+                    label: "Privacy Policy",                    href: "#"
+                  },
+                  {
+                    label: "Terms of Service",                    href: "#"
+                  },
+                  {
+                    label: "hello@mtllabs.com",                    href: "mailto:hello@mtllabs.com"
+                  }
+                ]
+              }
+            ]}
+            logoText="MTL Labs"
+            copyrightText="© 2024 MTL Labs | All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1