src/app/about/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Sparkles } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Elevate"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Portfolio", id: "work" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Get Started", href: "#contact" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          tag="Our Story"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          title="We help marketing teams scale their impact"
+          description="At Elevate, we believe that great marketing is the intersection of strategy, creativity, and data. Since our founding, we've worked with over 180 companies to transform their brands and drive meaningful growth. Our team combines deep industry expertise with a passion for results."
+          metrics={[
+            { value: "10+", title: "Years in the Industry" },
+            { value: "180+", title: "Successful Projects" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg"
+          imageAlt="Elevate team collaborating on strategy"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Elevate"
+          columns={[
+            {
+              items: [
+                { label: "Services", href: "#services" },
+                { label: "Portfolio", href: "#work" },
+                { label: "Team", href: "#team" }
+              ]
+            },
+            {
+              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Case Studies", href: "#work" },
+                { label: "Blog", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Contact", href: "#contact" },
+                { label: "hello@elevate.com", href: "#" },
+                { label: "+1 (555) 123-4567", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,7 +32,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Services", id: "services" },
             { name: "Portfolio", id: "work" },
-            { name: "About", id: "team" },
+            { name: "About", id: "/about" },
             { name: "Contact", id: "contact" }
           ]}
           button={{ text: "Get Started", href: "#contact" }}
@@ -283,7 +283,7 @@ export default function LandingPage() {
             },
             {
               items: [
-                { label: "About Us", href: "#" },
+                { label: "About Us", href: "/about" },
                 { label: "Case Studies", href: "#work" },
                 { label: "Blog", href: "#" }
               ]