Add src/app/services/page.tsx

src/app/services/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmallSizeMediumTitles"
+        background="noise"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Models", id: "hero" },
+              { name: "Performance", id: "features" },
+              { name: "Luxury", id: "about" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="BENTLEY"
+          />
+        </div>
+        
+        <div id="services-hero" data-section="services-hero" style={{ paddingTop: '120px' }}>
+            <MetricSplitMediaAbout
+              title="Our Services"
+              description="Beyond manufacturing, we provide a holistic suite of ownership services to maintain your vehicle's perfection."
+              metrics={[]}
+              useInvertedBackground={false}
+              imageSrc="http://img.b2bpic.net/free-photo/accuracy-leather-work_1098-13413.jpg"
+            />
+        </div>
+        
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="BENTLEY"
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Press", href: "#" }] },
+              { title: "Support", items: [{ label: "Contact", href: "#" }, { label: "Retailers", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}