src/app/about/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="compact"
+        sizing="large"
+        background="noiseDiagonalGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Diensten", id: "/#services" },
+                    { name: "Over ons", id: "/about" },
+                    { name: "Contact", id: "/#contact" },
+                ]}
+                brandName="Trimsalon Jeannette"
+                button={{ text: "Maak een afspraak", href: "/#contact" }}
+            />
+        </div>
+
+        <div id="about-content" data-section="about">
+            <TextSplitAbout
+                title="Wie wij zijn"
+                description={[
+                    "Bij Trimsalon Jeannette combineren we jarenlange ervaring met een oprechte liefde voor honden. Onze salon in Almelo is ingericht om honden een rustige en prettige ervaring te bieden.",                    "Met oog voor detail en het welzijn van de hond zorgen we voor een vachtverzorging die niet alleen mooi is, maar ook gezond.",                    "Onze missie is om elke hond die bij ons binnenkomt, blij en ontspannen weer naar buiten te laten gaan."
+                ]}
+                useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBase
+                columns={[
+                    { title: "Contact", items: [{ label: "Bornsestraat 192, Almelo", href: "#" }, { label: "0546 823 270", href: "tel:0546823270" }] },
+                    { title: "Openingstijden", items: [{ label: "Wo - Vr: 09:00 - 17:00", href: "#" }] },
+                ]}
+                logoText="Trimsalon Jeannette"
+            />
+        </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -31,7 +31,7 @@ export default function LandingPage() {
       navItems={[
         { name: "Home", id: "hero" },
         { name: "Diensten", id: "services" },
-        { name: "Over ons", id: "about" },
+        { name: "Over ons", id: "/about" },
         { name: "Contact", id: "contact" },
       ]}
       brandName="Trimsalon Jeannette"