Add src/app/about/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-bubble"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="largeSmallSizeLargeTitles"
+        background="fluid"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",                id: "/"},
+              {
+                name: "About Us",                id: "/about"},
+              {
+                name: "Features",                id: "/features"},
+              {
+                name: "Products",                id: "/products"},
+              {
+                name: "Pricing",                id: "#pricing"},
+              {
+                name: "Testimonials",                id: "#testimonials"},
+              {
+                name: "FAQ",                id: "#faq"},
+              {
+                name: "Contact",                id: "#contact"},
+            ]}
+            brandName="SMESolutions"
+            button={{
+              text: "Get a Quote",              href: "#contact"}}
+          />
+        </div>
+
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            useInvertedBackground={true}
+            title="Your Partner in Digital Transformation"
+            description="At SMESolutions, we provide comprehensive services that empower small and medium enterprises to thrive in the digital age. From optimizing operations to enhancing customer engagement, we're dedicated to your success, delivering real results and sustainable growth."
+            metrics={[
+              {
+                value: "150+",                title: "Projects Completed"},
+              {
+                value: "98%",                title: "Client Satisfaction"},
+              {
+                value: "10+",                title: "Years Experience"},
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/people-table-office-meeting_23-2148817063.jpg"
+            imageAlt="Business professionals collaborating in a modern office"
+            mediaAnimation="slide-up"
+            metricsAnimation="slide-up"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/high-rise-buildings-modern-city_1359-899.jpg"
+            imageAlt="Panoramic cityscape at night"
+            logoText="SMESolutions"
+            columns={[
+              {
+                title: "Solutions",                items: [
+                  {
+                    label: "CRM & Sales",                    href: "/features"},
+                  {
+                    label: "Analytics",                    href: "/features"},
+                  {
+                    label: "Cloud & Security",                    href: "/features"},
+                  {
+                    label: "Products",                    href: "/products"},
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  {
+                    label: "About Us",                    href: "/about"},
+                  {
+                    label: "Pricing",                    href: "#pricing"},
+                  {
+                    label: "Contact",                    href: "#contact"},
+                  {
+                    label: "Testimonials",                    href: "#testimonials"},
+                ],
+              },
+              {
+                title: "Resources",                items: [
+                  {
+                    label: "FAQ",                    href: "#faq"},
+                  {
+                    label: "Support",                    href: "#contact"},
+                  {
+                    label: "Terms of Service",                    href: "#"},
+                  {
+                    label: "Privacy Policy",                    href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 SMESolutions. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}