From 5c60594a4f828bbecdee1dd11277f63e7aaf4cc8 Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Wed, 16 Apr 2025 17:37:41 +0000
Subject: [PATCH] Merge branch 'homepage-refactoring' into 'dev'

Homepage Refactoring - Pt .3

See merge request rheinsw/website!28
---
 app/(root)/layout.tsx                         |   4 +-
 app/contact/layout.tsx                        |   6 +-
 app/globals.css                               |  21 --
 app/legal/layout.tsx                          |   7 +-
 app/services/layout.tsx                       |   6 +-
 app/services/page.tsx                         |   4 +-
 components/Helper/SectionDivider.tsx          |  12 +-
 components/Helper/Theme.ts                    |  18 --
 components/Helper/ThemeColors.ts              |  34 +--
 components/Home/Contact/ContactCTA.tsx        |  57 -----
 components/Home/Home.tsx                      |  53 +++--
 components/Home/Offer/FullStack.tsx           |  75 -------
 components/Home/Offer/ManagedServices.tsx     |  57 -----
 components/Home/Offer/Offer.tsx               |  28 ---
 components/Home/{About => Sections}/About.tsx |  48 ++--
 components/Home/Sections/ContactCTA.tsx       |  57 +++++
 components/Home/{Hero => Sections}/Hero.tsx   |   0
 .../Home/{ => Sections}/HomeServices.tsx      |  48 ++--
 components/Home/{ => Sections}/TechStack.tsx  |  67 +++---
 components/Navbar/DesktopNav.tsx              |  69 +++---
 components/Navbar/MobileNav.tsx               |  38 ++--
 components/Section.tsx                        |  34 +++
 components/Services/Section/OverviewTabs.tsx  |  88 ++++++++
 components/Services/Section/ServiceHero.tsx   |  30 +++
 .../Services/Section/overview/BugFixing.tsx   |  70 ++++++
 .../Services/Section/overview/Consulting.tsx  |  60 +++++
 .../Services/Section/overview/Development.tsx | 210 ++++++++++++++++++
 .../Section/overview/ManagedServices.tsx      |  62 ++++++
 components/Services/Services.tsx              |  34 +++
 components/provider/ThemeProvider.tsx         |  42 ++--
 constant/Constant.ts                          |   7 +-
 package-lock.json                             |  10 +
 package.json                                  |   1 +
 tailwind.config.ts                            |   1 +
 tsconfig.json                                 |   1 +
 utils/useThemeColors.ts                       |  10 +
 36 files changed, 896 insertions(+), 473 deletions(-)
 delete mode 100644 components/Helper/Theme.ts
 delete mode 100644 components/Home/Contact/ContactCTA.tsx
 delete mode 100644 components/Home/Offer/FullStack.tsx
 delete mode 100644 components/Home/Offer/ManagedServices.tsx
 delete mode 100644 components/Home/Offer/Offer.tsx
 rename components/Home/{About => Sections}/About.tsx (63%)
 create mode 100644 components/Home/Sections/ContactCTA.tsx
 rename components/Home/{Hero => Sections}/Hero.tsx (100%)
 rename components/Home/{ => Sections}/HomeServices.tsx (76%)
 rename components/Home/{ => Sections}/TechStack.tsx (66%)
 create mode 100644 components/Section.tsx
 create mode 100644 components/Services/Section/OverviewTabs.tsx
 create mode 100644 components/Services/Section/ServiceHero.tsx
 create mode 100644 components/Services/Section/overview/BugFixing.tsx
 create mode 100644 components/Services/Section/overview/Consulting.tsx
 create mode 100644 components/Services/Section/overview/Development.tsx
 create mode 100644 components/Services/Section/overview/ManagedServices.tsx
 create mode 100644 components/Services/Services.tsx
 create mode 100644 utils/useThemeColors.ts

diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 4a3ccb9..518d45e 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -6,6 +6,7 @@ import Footer from "@/components/Footer/Footer";
 import {ThemeProvider} from "@/components/provider/ThemeProvider";
 import React from "react";
 import {cookies} from "next/headers";
+import {themeColors} from "@/components/Helper/ThemeColors";
 
 export const metadata: Metadata = {
     title: "Rhein Software",
@@ -19,11 +20,12 @@ export default async function RootLayout({
 }>) {
     const cookieStore = await cookies();
     const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
+    const bgColor = themeColors[theme].primaryBg;
 
     return (
         <html lang="de" data-theme={theme}>
         <head/>
-        <body className="antialiased" style={{backgroundColor: "var(--primary-bg)"}}>
+        <body className="antialiased" style={{backgroundColor: bgColor}}>
         <ThemeProvider>
             <Nav/>
             {children}
diff --git a/app/contact/layout.tsx b/app/contact/layout.tsx
index 4a3ccb9..c324c2d 100644
--- a/app/contact/layout.tsx
+++ b/app/contact/layout.tsx
@@ -6,9 +6,10 @@ import Footer from "@/components/Footer/Footer";
 import {ThemeProvider} from "@/components/provider/ThemeProvider";
 import React from "react";
 import {cookies} from "next/headers";
+import {themeColors} from "@/components/Helper/ThemeColors";
 
 export const metadata: Metadata = {
-    title: "Rhein Software",
+    title: "Kontakt | Rhein Software",
     description: "Rhein Software Development",
 };
 
@@ -19,11 +20,12 @@ export default async function RootLayout({
 }>) {
     const cookieStore = await cookies();
     const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
+    const bgColor = themeColors[theme].primaryBg;
 
     return (
         <html lang="de" data-theme={theme}>
         <head/>
-        <body className="antialiased" style={{backgroundColor: "var(--primary-bg)"}}>
+        <body className="antialiased" style={{backgroundColor: bgColor}}>
         <ThemeProvider>
             <Nav/>
             {children}
diff --git a/app/globals.css b/app/globals.css
index 6771639..6ffe0ca 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -13,27 +13,6 @@
     transition: background-color 0.7s ease, color 0.7s ease;
 }
 
-/* Light mode */
-/* Light mode */
-[data-theme="light"] {
-    --primary-bg: #FAFAFA;       /* Soft off-white background */
-    --secondary-bg: #F5F5F7;      /* Gentle off-white for subtle separation */
-    --primary-text: #2E2E2E;      /* Dark grey text for clear readability */
-    --secondary-text: #595959;    /* Medium grey for less prominent text */
-    --nav-bg: #F8F8F8;            /* Light grey navigation background */
-    --footer-bg: #E0E0E0;         /* Slightly darker grey for footer contrast */
-}
-
-/* Dark mode */
-[data-theme="dark"] {
-    --primary-bg: #2C2C2C;       /* Modern dark grey background */
-    --secondary-bg: #333333;      /* A touch lighter grey for section differentiation */
-    --primary-text: #E0E0E0;      /* Light grey text for optimal readability */
-    --secondary-text: #B0B0B0;    /* Medium grey for secondary text elements */
-    --nav-bg: #272727;           /* Subtle variation for the navigation area */
-    --footer-bg: #242424;        /* Deep grey footer to add visual depth */
-}
-
 @keyframes float {
     0%, 100% {
         transform: translateY(0);
diff --git a/app/legal/layout.tsx b/app/legal/layout.tsx
index 4a3ccb9..e40ea22 100644
--- a/app/legal/layout.tsx
+++ b/app/legal/layout.tsx
@@ -6,9 +6,10 @@ import Footer from "@/components/Footer/Footer";
 import {ThemeProvider} from "@/components/provider/ThemeProvider";
 import React from "react";
 import {cookies} from "next/headers";
+import {themeColors} from "@/components/Helper/ThemeColors";
 
 export const metadata: Metadata = {
-    title: "Rhein Software",
+    title: "Rechtliches | Rhein Software",
     description: "Rhein Software Development",
 };
 
@@ -19,11 +20,12 @@ export default async function RootLayout({
 }>) {
     const cookieStore = await cookies();
     const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
+    const bgColor = themeColors[theme].primaryBg;
 
     return (
         <html lang="de" data-theme={theme}>
         <head/>
-        <body className="antialiased" style={{backgroundColor: "var(--primary-bg)"}}>
+        <body className="antialiased" style={{backgroundColor: bgColor}}>
         <ThemeProvider>
             <Nav/>
             {children}
@@ -33,3 +35,4 @@ export default async function RootLayout({
         </html>
     );
 }
+
diff --git a/app/services/layout.tsx b/app/services/layout.tsx
index 4a3ccb9..3bb87a8 100644
--- a/app/services/layout.tsx
+++ b/app/services/layout.tsx
@@ -6,9 +6,10 @@ import Footer from "@/components/Footer/Footer";
 import {ThemeProvider} from "@/components/provider/ThemeProvider";
 import React from "react";
 import {cookies} from "next/headers";
+import {themeColors} from "@/components/Helper/ThemeColors";
 
 export const metadata: Metadata = {
-    title: "Rhein Software",
+    title: "Leistungen | Rhein Software",
     description: "Rhein Software Development",
 };
 
@@ -19,11 +20,12 @@ export default async function RootLayout({
 }>) {
     const cookieStore = await cookies();
     const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
+    const bgColor = themeColors[theme].primaryBg;
 
     return (
         <html lang="de" data-theme={theme}>
         <head/>
-        <body className="antialiased" style={{backgroundColor: "var(--primary-bg)"}}>
+        <body className="antialiased" style={{backgroundColor: bgColor}}>
         <ThemeProvider>
             <Nav/>
             {children}
diff --git a/app/services/page.tsx b/app/services/page.tsx
index ed96214..ca91f4d 100644
--- a/app/services/page.tsx
+++ b/app/services/page.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Contact from "@/components/Contact/Contact";
+import Services from "@/components/Services/Services";
 
 const ContactPage = () => {
     return (
         <div>
-            <Contact/>
+            <Services/>
         </div>
     );
 };
diff --git a/components/Helper/SectionDivider.tsx b/components/Helper/SectionDivider.tsx
index 3896af9..acf86a2 100644
--- a/components/Helper/SectionDivider.tsx
+++ b/components/Helper/SectionDivider.tsx
@@ -1,4 +1,3 @@
-
 export const SectionDivider1 = () => {
 
     return (
@@ -22,3 +21,14 @@ export const SectionDivider2 = () => {
         />
     );
 };
+
+export const SectionDivider3 = () => {
+    return (
+        <div
+            className="w-full h-20 transition-all duration-500 ease-in-out"
+            style={{
+                background: `linear-gradient(to bottom, var(--primary-bg), var(--footer-bg))`
+            }}
+        />
+    );
+};
diff --git a/components/Helper/Theme.ts b/components/Helper/Theme.ts
deleted file mode 100644
index 42dd678..0000000
--- a/components/Helper/Theme.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-"use server";
-
-import {cookies} from "next/headers";
-
-// ✅ Get theme from cookies OR detect system preference
-export async function getInitialTheme(): Promise<"dark" | "light"> {
-    const themeCookie = (await cookies()).get("theme")?.value;
-
-    if (themeCookie === "dark" || themeCookie === "light") {
-        return themeCookie;
-    }
-
-    // Detect system preference
-    const prefersDarkMode =
-        typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-    return prefersDarkMode ? "dark" : "light";
-}
diff --git a/components/Helper/ThemeColors.ts b/components/Helper/ThemeColors.ts
index 8086cf9..e4385ef 100644
--- a/components/Helper/ThemeColors.ts
+++ b/components/Helper/ThemeColors.ts
@@ -3,26 +3,32 @@ export const themeColors: Record<
     {
         primaryBg: string;
         secondaryBg: string;
+        navBg: string;
+        footerBg: string;
         primaryText: string;
         secondaryText: string;
         inputFieldBg: string;
         inputBorder: string;
     }
 > = {
-    dark: {
-        primaryBg: "#121212",  // Dark gray/black background (closer to true dark mode)
-        secondaryBg: "#1e1e1e", // Slightly lighter gray for contrast
-        primaryText: "#e0e0e0", // Light gray for good readability
-        secondaryText: "#b0b0b0", // Muted gray for subtle contrast
-        inputFieldBg: "#252525", // Dark but slightly distinguishable from primaryBg
-        inputBorder: "#3a3a3a", // Slightly lighter gray for a soft contrast
-    },
     light: {
-        primaryBg: "#f7f6fb",
-        secondaryBg: "#ffffff",
-        primaryText: "#1a1a2e",
-        secondaryText: "#4a4a4a", // Muted text color
-        inputFieldBg: "#ffffff", // White input field (same as secondaryBg)
-        inputBorder: "#dcdcdc", // Light gray border for subtle visibility
+        primaryBg: "#F3F4F6",
+        secondaryBg: "#eff1f3",
+        navBg: "#F9FAFB",
+        footerBg: "#E5E7EB",
+        primaryText: "#1E293B",
+        secondaryText: "#475569",
+        inputFieldBg: "#ffffff",
+        inputBorder: "#cbd5e1",
+    },
+    dark: {
+        primaryBg: "#1A1A23",
+        secondaryBg: "#22222C",
+        navBg: "#2A2A35",
+        footerBg: "#1F1F29",
+        primaryText: "#F0F0F3",
+        secondaryText: "#C0C2CC",
+        inputFieldBg: "#2D2D38",
+        inputBorder: "#4B4B5A",
     },
 };
diff --git a/components/Home/Contact/ContactCTA.tsx b/components/Home/Contact/ContactCTA.tsx
deleted file mode 100644
index ab8403c..0000000
--- a/components/Home/Contact/ContactCTA.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { FiArrowRight } from 'react-icons/fi';
-
-const ContactCTA = () => {
-    return (
-        <section
-            className="relative w-full py-24 transition-theme overflow-hidden"
-            style={{
-                background: 'linear-gradient(135deg, var(--secondary-bg), var(--primary-bg))',
-            }}
-        >
-            <div className="w-full max-w-4xl px-6 md:px-10 mx-auto text-center">
-                {/* Headline */}
-                <motion.h2
-                    className="text-3xl md:text-4xl font-bold text-[var(--primary-text)]"
-                    initial={{ opacity: 0, y: 20 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ duration: 0.5 }}
-                >
-                    Interesse geweckt?
-                </motion.h2>
-
-                {/* Description */}
-                <motion.p
-                    className="mt-4 text-sm md:text-base text-[var(--secondary-text)] max-w-xl mx-auto"
-                    initial={{ opacity: 0, y: 20 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ duration: 0.5, delay: 0.2 }}
-                >
-                    Lass uns über dein Projekt sprechen. Wir freuen uns darauf, deine Ideen in die Realität umzusetzen.
-                </motion.p>
-
-                {/* CTA Button */}
-                <motion.div
-                    className="mt-8 flex justify-center"
-                    initial={{ opacity: 0, y: 20 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ duration: 0.5, delay: 0.3 }}
-                >
-                    <Link href="/contact">
-                        <button className="inline-flex items-center gap-2 px-6 py-3 text-sm md:text-base font-semibold rounded-full bg-blue-700 hover:bg-blue-900 text-white shadow-md transition-all duration-300">
-                            Jetzt Kontakt aufnehmen <FiArrowRight size={18} />
-                        </button>
-                    </Link>
-                </motion.div>
-            </div>
-        </section>
-    );
-};
-
-export default ContactCTA;
diff --git a/components/Home/Home.tsx b/components/Home/Home.tsx
index 5785fd0..ce78464 100644
--- a/components/Home/Home.tsx
+++ b/components/Home/Home.tsx
@@ -1,26 +1,45 @@
 'use client';
 
 import React from "react";
-import Hero from "./Hero/Hero";
-import About from "@/components/Home/About/About";
-import ContactCTA from "@/components/Home/Contact/ContactCTA";
-import {SectionDivider1, SectionDivider2} from "@/components/Helper/SectionDivider";
-import HomeServices from "@/components/Home/HomeServices";
-import TechStack from "@/components/Home/TechStack";
+import About from "@/components/Home/Sections/About";
+import ContactCTA from "@/components/Home/Sections/ContactCTA";
+import HomeServices from "@/components/Home/Sections/HomeServices";
+import TechStack from "@/components/Home/Sections/TechStack";
+import Section from "@/components/Section";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import Hero from "@/components/Home/Sections/Hero";
 
 const Home = () => {
+    const colors = useThemeColors();
+
     return (
-        <div className="overflow-hidden">
-            <Hero/>
-            <SectionDivider1/>
-            <About/>
-            <SectionDivider2/>
-            <HomeServices/>
-            <SectionDivider1/>
-            <TechStack/>
-            <SectionDivider2/>
-            <ContactCTA/>
-        </div>
+        <motion.div
+            initial={{opacity: 0, y: 20}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.7, ease: "easeOut"}}
+            className="overflow-hidden"
+        >
+            <Section style={{backgroundColor: colors.primaryBg}}>
+                <Hero/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <About/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <HomeServices/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <TechStack/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <ContactCTA/>
+            </Section>
+        </motion.div>
     );
 };
 
diff --git a/components/Home/Offer/FullStack.tsx b/components/Home/Offer/FullStack.tsx
deleted file mode 100644
index a77f53d..0000000
--- a/components/Home/Offer/FullStack.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import Image from "next/image";
-
-const FullStack = () => {
-    return (
-        <div
-            className="w-[95%] sm:w-[80%] mx-auto items-center grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 transition-theme">
-            <div className="p-0"
-            >
-                <h1 data-aos="fade-up"
-                    className="mt-4 text-xl sm:text-2xl md:text-3xl font-bold"
-                    style={{color: "var(--primary-text)"}} // Dynamic text color
-                >
-                    💻 Full-Stack Entwicklung
-                </h1>
-                <div data-aos="fade-up"
-                     data-aos-delay="200"
-                >
-                    <p
-                        className="mt-4 text-sm font-medium leading-[2rem]"
-                        style={{color: "var(--secondary-text)"}} // Secondary text color
-                    >
-                        Wir entwickeln skalierbare Backends, performante Frontends und native Apps – genau auf deine
-                        Anforderungen zugeschnitten. Dabei setzen wir auf neueste und modernste Technologien, um
-                        flexible
-                        und zukunftssichere Lösungen zu schaffen.
-                    </p>
-                    {/* Technology Logos Section */}
-                    <h2
-                        className="mt-8 text-lg font-semibold"
-                        style={{color: "var(--primary-text)"}}
-                    >
-                        🔧 Tech Stack
-                    </h2>
-                    <span
-                        className="mt-4 text-sm font-medium leading-[2rem]"
-                        style={{color: "var(--secondary-text)"}}
-                    >
-                    Programmiersprachen und Frameworks, die wir für unsere Lösungen einsetzen.
-                </span>
-                    <div className="mt-6 flex flex-wrap items-center gap-8">
-                        {/* Tech Stack Logos */}
-                        {[
-                            {src: "/images/flutter_logo.png", label: "Flutter", width: 30, height: 30},
-                            {src: "/images/dart_logo.png", label: "Dart", width: 40, height: 40},
-                            {src: "/images/java_logo.png", label: "Java", width: 40, height: 40},
-                            {src: "/images/nextjs_logo.png", label: "NextJS", width: 40, height: 40},
-                        ].map(({src, label, width, height}) => (
-                            <div key={label} className="flex flex-col items-center">
-                                <Image src={src} alt={label} width={width} height={height} className="object-contain"/>
-                                <span
-                                    className="text-xs mt-2"
-                                    style={{color: "var(--secondary-text)"}} // Match theme
-                                >
-                                {label}
-                            </span>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-            <div data-aos="fade-up" data-aos-anchor-placement="top-center" className="justify-self-center">
-                <Image
-                    src="/images/software_dev.jpg"
-                    alt="image"
-                    width={200}
-                    height={200}
-                    className="object-contain"
-                />
-            </div>
-        </div>
-    );
-};
-
-export default FullStack;
diff --git a/components/Home/Offer/ManagedServices.tsx b/components/Home/Offer/ManagedServices.tsx
deleted file mode 100644
index 9ece168..0000000
--- a/components/Home/Offer/ManagedServices.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from "react";
-import Image from "next/image";
-import {TiChevronRightOutline} from "react-icons/ti";
-
-const ManagedServices = () => {
-    return (
-        <div
-            className="w-[95%] sm:w-[80%] mx-auto items-center grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
-            data-aos="fade-up"
-            data-aos-delay="200"
-        >
-            {/* Image Section */}
-            <div
-                data-aos="fade-up"
-                data-aos-anchor-placement="top-center"
-                className="justify-self-center"
-            >
-                <Image
-                    src="/images/software_dev.jpg"
-                    alt="image"
-                    width={200}
-                    height={200}
-                    className="object-contain"
-                />
-            </div>
-            {/* Text Content */}
-            <div className="p-0">
-                <h1
-                    className="mt-4 text-xl sm:text-2xl md:text-3xl font-bold transition-theme"
-                    style={{color: "var(--primary-text)"}}>
-                    ☁️ Managed Services
-                </h1>
-                <p
-                    className="mt-4 text-sm font-medium leading-[2rem] transition-theme"
-                    style={{color: "var(--secondary-text)"}}>
-                    Wir übernehmen das Hosting und Management deiner Server, damit du dich auf dein
-                    Business konzentrieren kannst. Egal ob Cloud-Hosting, dedizierte Server oder hybride Lösungen – wir
-                    sorgen für eine sichere, performante und skalierbare Infrastruktur.
-                </p>
-                <ul className="mt-7 space-y-2">
-                    {[
-                        "Web- & Cloud-Hosting",
-                        "Mailserver-Management",
-                        "Webserver-Administration",
-                    ].map((item, index) => (
-                        <li key={index} className="flex items-center font-semibold transition-theme">
-                            <TiChevronRightOutline className="text-blue-500 mr-2"/>
-                            <span style={{color: "var(--primary-text)"}}>{item}</span>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-        </div>
-    );
-};
-
-export default ManagedServices;
diff --git a/components/Home/Offer/Offer.tsx b/components/Home/Offer/Offer.tsx
deleted file mode 100644
index ed18c45..0000000
--- a/components/Home/Offer/Offer.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import FullStack from "@/components/Home/Offer/FullStack";
-import ManagedServices from "@/components/Home/Offer/ManagedServices";
-
-const Offer = () => {
-    return (
-        <div
-            className="transition-theme"
-            style={{
-                backgroundColor: "var(--primary-bg)", // Using CSS variable
-                color: "var(--primary-text)", // Ensuring text color follows theme
-                transition: "background-color 0.5s ease, color 0.5s ease", // Smooth transition
-            }}>
-            <div className="pt-24 pb-16">
-                <h1 className="mt-6 text-2xl md:text-3xl capitalize font-bold text-center"
-                    data-aos="fade-up"
-                    style={{color: "var(--primary-text)"}}
-                >
-                    Was bieten wir?
-                </h1>
-                <FullStack/>
-                <ManagedServices/>
-            </div>
-        </div>
-    );
-};
-
-export default Offer;
diff --git a/components/Home/About/About.tsx b/components/Home/Sections/About.tsx
similarity index 63%
rename from components/Home/About/About.tsx
rename to components/Home/Sections/About.tsx
index a1c299e..32587b0 100644
--- a/components/Home/About/About.tsx
+++ b/components/Home/Sections/About.tsx
@@ -1,22 +1,23 @@
 'use client';
 
-import Link from 'next/link';
-import {FiArrowRight} from 'react-icons/fi';
+// import Link from 'next/link';
+// import {FiArrowRight} from 'react-icons/fi';
 import {motion} from 'framer-motion';
+import {useThemeColors} from '@/utils/useThemeColors';
 
 const About = () => {
+    const colors = useThemeColors();
+
     return (
-        <section className="relative w-full py-24 bg-[var(--secondary-bg)] transition-theme">
+        <section
+            className="relative w-full py-24 transition-colors duration-700 ease-in-out"
+            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
+        >
             <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
                 <div className="flex flex-col">
                     {/* Title */}
                     <motion.h2
-                        className="text-3xl md:text-4xl font-bold mb-1 text-left"
-                        style={{color: 'var(--primary-text)'}}
-                        initial={{opacity: 0, y: 20}}
-                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 0.5}}
+                        className="text-3xl md:text-4xl font-bold mb-1 text-left transition-colors duration-700 ease-in-out"
                     >
                         Über uns
                     </motion.h2>
@@ -30,9 +31,10 @@ const About = () => {
                     />
 
                     {/* Text */}
-                    <div className="p-0">
+                    <div className="p-0 max-w-4xl">
                         <motion.p
-                            className="text-base md:text-lg leading-relaxed text-[var(--secondary-text)] max-w-4xl"
+                            className="text-base md:text-lg leading-relaxed transition-colors duration-700 ease-in-out"
+                            style={{color: colors.secondaryText}}
                             initial={{opacity: 0, y: 20}}
                             whileInView={{opacity: 1, y: 0}}
                             viewport={{once: true}}
@@ -40,21 +42,20 @@ const About = () => {
                         >
                             Wir sind Rhein-Software – ein Team, das sich auf individuelle Softwarelösungen und digitale
                             Services spezialisiert hat. Unsere Anwendungen sind technisch solide, skalierbar und
-                            durchdacht – gebaut für
-                            langfristigen Erfolg.
+                            durchdacht – gebaut für langfristigen Erfolg.
                         </motion.p>
 
                         <motion.p
-                            className="mt-6 text-base md:text-lg leading-relaxed text-[var(--secondary-text)] max-w-4xl"
+                            className="mt-6 text-base md:text-lg leading-relaxed transition-colors duration-700 ease-in-out"
+                            style={{color: colors.secondaryText}}
                             initial={{opacity: 0, y: 20}}
                             whileInView={{opacity: 1, y: 0}}
                             viewport={{once: true}}
                             transition={{duration: 0.5, delay: 0.3}}
                         >
                             Von der ersten Idee bis zum Go-Live begleiten wir Unternehmen und Startups mit einem
-                            flexiblen Netzwerk, klarer Kommunikation und einem hohen Anspruch an Qualität. Unsere
-                            Lösungen sind
-                            intuitiv, effizient – und genau auf deine Anforderungen zugeschnitten.
+                            flexiblen Netzwerk, klarer Kommunikation und einem hohen Anspruch an Qualität.
+                            Unsere Lösungen sind intuitiv, effizient – und genau auf deine Anforderungen zugeschnitten.
                         </motion.p>
                     </div>
 
@@ -66,12 +67,13 @@ const About = () => {
                         viewport={{once: true}}
                         transition={{duration: 0.5, delay: 0.5}}
                     >
-                        <Link href="/about">
-                            <button
-                                className="flex items-center gap-2 bg-blue-700 hover:bg-blue-900 text-white font-semibold px-5 py-2 rounded-full shadow-lg transition-all">
-                                Mehr über uns <FiArrowRight size={18}/>
-                            </button>
-                        </Link>
+                        {/*<Link href="/about">*/}
+                        {/*    <button*/}
+                        {/*        className="flex items-center gap-2 bg-blue-700 hover:bg-blue-900 text-white font-semibold px-5 py-2 rounded-full shadow-lg transition-all"*/}
+                        {/*    >*/}
+                        {/*        Mehr über uns <FiArrowRight size={18}/>*/}
+                        {/*    </button>*/}
+                        {/*</Link>*/}
                     </motion.div>
                 </div>
             </div>
diff --git a/components/Home/Sections/ContactCTA.tsx b/components/Home/Sections/ContactCTA.tsx
new file mode 100644
index 0000000..19b5791
--- /dev/null
+++ b/components/Home/Sections/ContactCTA.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import {motion} from 'framer-motion';
+import {FiArrowRight} from 'react-icons/fi';
+import {useThemeColors} from '@/utils/useThemeColors';
+
+const ContactCTA = () => {
+    const colors = useThemeColors();
+
+    return (
+        <section
+            className="relative w-full py-24 overflow-hidden transition-colors duration-700 ease-in-out"
+            style={{backgroundColor: colors.primaryBg, color: colors.primaryText}}
+        >
+            <div className="w-full max-w-4xl px-6 md:px-10 mx-auto text-center">
+                {/* Headline */}
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold transition-colors duration-700 ease-in-out"
+                >
+                    Interesse geweckt?
+                </motion.h2>
+
+                {/* Description */}
+                <motion.p
+                    className="mt-4 text-sm md:text-base max-w-xl mx-auto transition-colors duration-700 ease-in-out"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Lass uns über dein Projekt sprechen. Wir freuen uns darauf, deine Ideen in die Realität umzusetzen.
+                </motion.p>
+
+                {/* CTA Button */}
+                <motion.div
+                    className="mt-8 flex justify-center"
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <Link href="/contact">
+                        <button
+                            className="inline-flex items-center gap-2 px-6 py-3 text-sm md:text-base font-semibold rounded-full bg-blue-700 hover:bg-blue-900 text-white shadow-md transition-all duration-300"
+                        >
+                            Jetzt Kontakt aufnehmen <FiArrowRight size={18}/>
+                        </button>
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
+    );
+};
+
+export default ContactCTA;
diff --git a/components/Home/Hero/Hero.tsx b/components/Home/Sections/Hero.tsx
similarity index 100%
rename from components/Home/Hero/Hero.tsx
rename to components/Home/Sections/Hero.tsx
diff --git a/components/Home/HomeServices.tsx b/components/Home/Sections/HomeServices.tsx
similarity index 76%
rename from components/Home/HomeServices.tsx
rename to components/Home/Sections/HomeServices.tsx
index 0aa0349..85872d8 100644
--- a/components/Home/HomeServices.tsx
+++ b/components/Home/Sections/HomeServices.tsx
@@ -1,13 +1,8 @@
 'use client';
 
-import {
-    FiServer,
-    FiTool,
-    FiMonitor,
-    FiZap,
-    FiArrowRight,
-} from 'react-icons/fi';
+import {FiServer, FiTool, FiMonitor, FiZap, FiArrowRight} from 'react-icons/fi';
 import {motion} from 'framer-motion';
+import {useThemeColors} from '@/utils/useThemeColors';
 
 const services = [
     {
@@ -37,19 +32,16 @@ const services = [
 ];
 
 const HomeServices = () => {
+    const colors = useThemeColors();
+
     return (
         <section
-            className="w-full py-24 bg-[var(--primary-bg)] transition-theme"
-            id="leistungen"
+            className="w-full py-24 transition-colors duration-700 ease-in-out"
+            style={{backgroundColor: colors.primaryBg}}
         >
-            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
-                {/* Heading */}
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto" style={{color: colors.primaryText}}>
                 <motion.h2
-                    className="text-3xl md:text-4xl font-bold mb-1 text-left text-[var(--primary-text)]"
-                    initial={{opacity: 0, y: 20}}
-                    whileInView={{opacity: 1, y: 0}}
-                    viewport={{once: true}}
-                    transition={{duration: 0.4}}
+                    className="text-3xl md:text-4xl font-bold mb-1 text-left transition-colors duration-700 ease-in-out"
                 >
                     Leistungen
                 </motion.h2>
@@ -62,12 +54,16 @@ const HomeServices = () => {
                     transition={{duration: 0.4, delay: 0.1}}
                 />
 
-                {/* Service Cards */}
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                     {services.map((service, index) => (
                         <motion.div
                             key={service.title}
-                            className="p-6 rounded-xl border border-[var(--secondary-bg)] bg-[var(--secondary-bg)] shadow-md"
+                            className="p-6 rounded-xl border shadow-md transition-colors duration-700 ease-in-out"
+                            style={{
+                                backgroundColor: colors.secondaryBg,
+                                borderColor: colors.secondaryBg,
+                                color: colors.primaryText,
+                            }}
                             whileHover={{
                                 scale: 1.03,
                                 boxShadow: '0px 10px 20px rgba(0,0,0,0.1)',
@@ -75,24 +71,18 @@ const HomeServices = () => {
                             initial={{opacity: 0, y: 30}}
                             whileInView={{opacity: 1, y: 0}}
                             viewport={{once: true}}
-                            transition={{
-                                duration: 0.4,
-                                delay: index * 0.1,
-                                ease: 'easeOut',
-                            }}
+                            transition={{duration: 0.4, delay: index * 0.1}}
                         >
                             <div className="mb-3 text-blue-600">{service.icon}</div>
-                            <h3 className="text-xl font-semibold mb-2 text-[var(--primary-text)]">
-                                {service.title}
-                            </h3>
-                            <p className="text-sm text-[var(--secondary-text)] leading-relaxed">
+                            <h3 className="text-xl font-semibold mb-2">{service.title}</h3>
+                            <p className="text-sm leading-relaxed transition-colors duration-700 ease-in-out"
+                               style={{color: colors.secondaryText}}>
                                 {service.description}
                             </p>
                         </motion.div>
                     ))}
                 </div>
 
-                {/* Weitere Leistungen */}
                 <motion.div
                     className="mt-10 flex justify-end"
                     initial={{opacity: 0}}
@@ -112,4 +102,4 @@ const HomeServices = () => {
     );
 };
 
-export default HomeServices;
+export default HomeServices;
\ No newline at end of file
diff --git a/components/Home/TechStack.tsx b/components/Home/Sections/TechStack.tsx
similarity index 66%
rename from components/Home/TechStack.tsx
rename to components/Home/Sections/TechStack.tsx
index 031c768..7e29ede 100644
--- a/components/Home/TechStack.tsx
+++ b/components/Home/Sections/TechStack.tsx
@@ -2,6 +2,7 @@
 
 import Image from 'next/image';
 import {motion} from 'framer-motion';
+import {useThemeColors} from "@/utils/useThemeColors";
 
 const techStack = {
     row1: [
@@ -54,15 +55,16 @@ const techStack = {
 };
 
 const TechStack = () => {
+    const colors = useThemeColors();
+
     return (
-        <section className="w-full py-20 bg-[var(--secondary-bg)] transition-theme">
-            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
+        <section
+            className="w-full py-20 transition-colors duration-700 ease-in-out"
+            style={{backgroundColor: colors.secondaryBg}}
+        >
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto" style={{color: colors.primaryText}}>
                 <motion.h2
-                    className="text-2xl md:text-3xl font-bold mb-1 text-left text-[var(--primary-text)]"
-                    initial={{opacity: 0, y: 20}}
-                    whileInView={{opacity: 1, y: 0}}
-                    viewport={{once: true}}
-                    transition={{duration: 0.5}}
+                    className="text-3xl md:text-4xl font-bold mb-1 text-left transition-colors duration-700 ease-in-out"
                 >
                     Technologien
                 </motion.h2>
@@ -76,30 +78,20 @@ const TechStack = () => {
                 />
 
                 <motion.p
-                    className="text-sm md:text-base mb-10 text-[var(--secondary-text)]"
-                    initial={{opacity: 0, y: 10}}
-                    whileInView={{opacity: 1, y: 0}}
-                    viewport={{once: true}}
-                    transition={{duration: 0.4, delay: 0.2}}
+                    className="text-sm md:text-base mb-10 transition-colors duration-700 ease-in-out"
+                    style={{color: colors.secondaryText}}
                 >
                     Mit diesen Technologien realisieren wir moderne, leistungsstarke Softwarelösungen.
                 </motion.p>
 
-                {/* Row 1 */}
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                     {techStack.row1.map((group, index) => (
-                        <TechCard key={group.category} group={group} delay={index * 0.2}/>
+                        <TechCard key={group.category} group={group} delay={index * 0.2} colors={colors}/>
                     ))}
                 </div>
-
-                {/* Row 2 */}
                 <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                     {techStack.row2.map((group, index) => (
-                        <TechCard
-                            key={group.category}
-                            group={group}
-                            delay={index * 0.2 + 0.4}
-                        />
+                        <TechCard key={group.category} group={group} delay={index * 0.2 + 0.4} colors={colors}/>
                     ))}
                 </div>
             </div>
@@ -110,35 +102,32 @@ const TechStack = () => {
 const TechCard = ({
                       group,
                       delay,
+                      colors,
                   }: {
     group: { category: string; items: { id: string; label: string }[] };
     delay: number;
+    colors: ReturnType<typeof useThemeColors>;
 }) => (
     <motion.div
-        className="p-4 rounded-lg border border-[var(--primary-bg)] bg-[var(--primary-bg)] shadow-md transition-theme"
+        className="p-4 rounded-lg border shadow-md transition-colors duration-700 ease-in-out"
+        style={{
+            backgroundColor: colors.primaryBg,
+            borderColor: colors.primaryBg,
+            color: colors.primaryText,
+        }}
         initial={{opacity: 0, y: 20}}
         whileInView={{opacity: 1, y: 0}}
-        whileHover={{
-            scale: 1.03,
-            boxShadow: '0px 10px 20px rgba(0,0,0,0.1)',
-        }}
+        whileHover={{scale: 1.03, boxShadow: '0 10px 20px rgba(0,0,0,0.1)'}}
         viewport={{once: true}}
-        transition={{duration: 0.4, delay, ease: 'easeOut'}}
+        transition={{duration: 0.4, delay}}
     >
-        <h3 className="text-base font-semibold mb-4 text-[var(--primary-text)]">
-            {group.category}
-        </h3>
+        <h3 className="text-base font-semibold mb-4">{group.category}</h3>
         <div className="grid grid-cols-3 gap-3">
             {group.items.map(({id, label}) => (
                 <div key={id} className="flex flex-col items-center text-center">
-                    <Image
-                        src={`/images/svg/${id}.svg`}
-                        alt={label}
-                        width={32}
-                        height={32}
-                        className="object-contain"
-                    />
-                    <span className="text-[10px] mt-1 text-[var(--secondary-text)]">
+                    <Image src={`/images/svg/${id}.svg`} alt={label} width={32} height={32} className="object-contain"/>
+                    <span className="text-[10px] mt-1 transition-colors duration-700 ease-in-out"
+                          style={{color: colors.secondaryText}}>
             {label}
           </span>
                 </div>
@@ -147,4 +136,4 @@ const TechCard = ({
     </motion.div>
 );
 
-export default TechStack;
+export default TechStack;
\ No newline at end of file
diff --git a/components/Navbar/DesktopNav.tsx b/components/Navbar/DesktopNav.tsx
index 4761101..eeaf744 100644
--- a/components/Navbar/DesktopNav.tsx
+++ b/components/Navbar/DesktopNav.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import {usePathname} from "next/navigation";
-import {navLinks} from "@/constant/Constant";
 import Link from "next/link";
 import React, {useContext, useEffect, useState} from "react";
 import {HiBars3BottomRight} from "react-icons/hi2";
 import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
+import {useThemeColors} from "@/utils/useThemeColors";
+import {navLinks} from "@/constant/Constant";
 
 type Props = {
     openNav: () => void;
@@ -17,8 +17,9 @@ const Nav = ({openNav}: Props) => {
     const [navHeight, setNavHeight] = useState("h-[10vh]");
     const [contentSize, setContentSize] = useState("text-base md:text-lg");
     const [buttonSize, setButtonSize] = useState("md:px-6 md:py-2 px-4 py-1 text-sm");
+
     const {theme, toggleTheme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
+    const colors = useThemeColors();
     const pathname = usePathname();
 
     const navColorClass = theme === "dark" || !navBg ? "text-white" : "text-black";
@@ -47,63 +48,46 @@ const Nav = ({openNav}: Props) => {
             className={`fixed w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000] ${
                 navBg ? "shadow-md" : ""
             }`}
-            style={{
-                backgroundColor: navBg ? "var(--nav-bg)" : "transparent",
-            }}
+            style={{backgroundColor: navBg ? colors.navBg : "transparent"}}
         >
-            <div
-                className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto transition-all duration-300 ease-in-out">
-                {/* LOGO */}
-                <h1 className={`${contentSize} font-bold transition-all duration-300 ease-in-out ${navColorClass}`}>
+            <div className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto">
+                <h1 className={`${contentSize} font-bold ${navColorClass}`}>
                     <span className="text-lg md:text-xl text-pink-700">R</span>hein Software
                 </h1>
 
-                {/* Desktop Nav Links */}
-                <div className="hidden lg:flex items-center space-x-6 transition-all duration-300 ease-in-out">
+                <div className="hidden lg:flex items-center space-x-6">
                     {navLinks.map((link) => (
                         <Link href={link.url} key={link.id}>
-                            <p
-                                className={`relative group ${contentSize} uppercase transition-all duration-300 ease-in-out ${
-                                    pathname === link.url
-                                        ? "text-white font-bold"
-                                        : "text-gray-300 font-medium"
-                                }`}
-                            >
+                            <p className={`relative group ${contentSize} uppercase ${getNavLinkClasses(pathname === link.url, navBg, theme, navColorClass)}`}>
                                 {link.label}
                                 {pathname !== link.url && (
                                     <span
-                                        className="absolute bottom-0 left-0 w-full h-[2px] bg-current transform transition-transform duration-300 origin-right scale-x-0 group-hover:scale-x-100"
-                                    />
+                                        className="absolute bottom-0 left-0 w-full h-[2px] bg-current transform transition-transform duration-300 origin-right scale-x-0 group-hover:scale-x-100"/>
                                 )}
                             </p>
                         </Link>
                     ))}
                 </div>
 
-                {/* Right Side Buttons */}
-                <div className="flex items-center space-x-3 transition-all duration-300 ease-in-out">
-                    {/* Contact Button */}
-                    <Link href="/contact">
-                        <button
-                            className={`${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 transition-all duration-300 ease-in-out rounded-full`}
-                        >
-                            Kontakt
-                        </button>
-                    </Link>
-
-                    {/* Theme Toggle Button */}
+                <div className="flex items-center space-x-3">
+                    {pathname !== "/contact" && (
+                        <Link href="/contact">
+                            <button
+                                className={`${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 rounded-full`}>
+                                Kontakt
+                            </button>
+                        </Link>
+                    )}
                     <button
                         onClick={toggleTheme}
-                        className={`w-7 h-7 flex items-center justify-center rounded-full transition-all duration-300 ease-in-out ${navColorClass}`}
+                        className={`w-7 h-7 flex items-center justify-center rounded-full ${navColorClass}`}
                         style={{backgroundColor: colors.secondaryBg}}
                     >
                         {theme === "dark" ? "🌙" : "☀️"}
                     </button>
-
-                    {/* Burger Menu (for mobile) */}
                     <HiBars3BottomRight
                         onClick={openNav}
-                        className={`w-6 h-6 cursor-pointer lg:hidden transition-all duration-300 ease-in-out ${navColorClass}`}
+                        className={`w-6 h-6 cursor-pointer lg:hidden ${navColorClass}`}
                     />
                 </div>
             </div>
@@ -111,4 +95,15 @@ const Nav = ({openNav}: Props) => {
     );
 };
 
+const getNavLinkClasses = (
+    isActive: boolean,
+    navBg: boolean,
+    theme: string,
+    navColorClass: string
+): string => {
+    if (isActive) return !navBg ? "text-white font-bold" : `${navColorClass} font-bold`;
+    if (!navBg) return "text-white font-medium";
+    return theme === "dark" ? "text-gray-300 font-medium" : "text-gray-700 font-medium";
+};
+
 export default Nav;
diff --git a/components/Navbar/MobileNav.tsx b/components/Navbar/MobileNav.tsx
index 2d9ed07..8b8db37 100644
--- a/components/Navbar/MobileNav.tsx
+++ b/components/Navbar/MobileNav.tsx
@@ -1,22 +1,26 @@
-import { navLinks } from "@/constant/Constant";
+'use client';
+
+import {navLinks} from "@/constant/Constant";
 import Link from "next/link";
-import React, { useContext } from "react";
-import { CgClose } from "react-icons/cg";
-import { ThemeContext } from "@/components/provider/ThemeProvider";
-import { themeColors } from "@/components/Helper/ThemeColors";
+import React, {useContext} from "react";
+import {CgClose} from "react-icons/cg";
+import {ThemeContext} from "@/components/provider/ThemeProvider";
+import {useThemeColors} from "@/utils/useThemeColors";
 
 type Props = {
     showNav: boolean;
     closeNav: () => void;
 };
 
-const MobileNav = ({ closeNav, showNav }: Props) => {
+const MobileNav = ({closeNav, showNav}: Props) => {
     const navOpen = showNav ? "translate-y-0 opacity-100" : "-translate-y-20 opacity-0 pointer-events-none";
-    const { theme, toggleTheme } = useContext(ThemeContext);
-    const colors = themeColors[theme];
+    const {theme, toggleTheme} = useContext(ThemeContext);
+    const colors = useThemeColors();
+
+    const textClass = theme === "dark" ? "text-white" : "text-black";
+
     return (
         <div className="lg:hidden">
-            {/* overlay background */}
             <div
                 className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${
                     showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none"
@@ -24,17 +28,14 @@ const MobileNav = ({ closeNav, showNav }: Props) => {
                 onClick={closeNav}
             />
 
-            {/* nav menu */}
             <div
-                className={`fixed top-0 left-0 w-full z-[10006] transform ${navOpen} transition-all duration-500 ease-in-out text-[var(--primary-text)] shadow-md rounded-b-2xl`}
-                style={{ backgroundColor: theme === "dark" ? "#2A2A2A" : "#ffffff", color: theme === "dark" ? "#f5f5f5" : "#1a1a1a" }}
+                className={`fixed top-0 left-0 w-full z-[10006] transform ${navOpen} transition-all duration-500 ease-in-out shadow-md rounded-b-2xl`}
+                style={{backgroundColor: colors.navBg}}
             >
-                <div className="flex flex-col items-center justify-center py-8 space-y-4 px-4 relative">
-                    {/* Close icon */}
+                <div className={`flex flex-col items-center justify-center py-8 space-y-4 px-4 relative ${textClass}`}>
                     <CgClose
                         onClick={closeNav}
-                        className="absolute top-4 right-6 sm:right-8 sm:w-7 sm:h-7 w-6 h-6 cursor-pointer p-1"
-                        style={{ color: colors.primaryText }}
+                        className={`absolute top-4 right-6 sm:right-8 sm:w-7 sm:h-7 w-6 h-6 cursor-pointer p-1 ${textClass}`}
                     />
 
                     {navLinks.map((link) => (
@@ -45,11 +46,10 @@ const MobileNav = ({ closeNav, showNav }: Props) => {
                         </Link>
                     ))}
 
-                    {/* Theme toggle button */}
                     <button
                         onClick={toggleTheme}
-                        className="mt-4 w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 transition-all duration-300"
-                        style={{ backgroundColor: colors.secondaryBg, color: colors.primaryText }}
+                        className={`mt-4 w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 transition-all duration-300 ${textClass}`}
+                        style={{backgroundColor: colors.secondaryBg}}
                     >
                         {theme === "dark" ? "🌙" : "☀️"}
                     </button>
diff --git a/components/Section.tsx b/components/Section.tsx
new file mode 100644
index 0000000..80bca0c
--- /dev/null
+++ b/components/Section.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React, {CSSProperties} from "react";
+import clsx from "clsx";
+
+interface SectionProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    shadow?: boolean;
+}
+
+const Section: React.FC<SectionProps> = ({
+                                             children,
+                                             className = "",
+                                             style,
+                                             shadow = false,
+                                         }) => {
+    return (
+        <section
+            className={clsx("relative transition-colors duration-500", className)}
+            style={style}
+        >
+            <div className="relative z-10">{children}</div>
+            {shadow && (
+                <div
+                    className="absolute bottom-0 left-0 w-full h-16 pointer-events-none"
+                />
+            )}
+        </section>
+    );
+};
+
+export default Section;
diff --git a/components/Services/Section/OverviewTabs.tsx b/components/Services/Section/OverviewTabs.tsx
new file mode 100644
index 0000000..c083a60
--- /dev/null
+++ b/components/Services/Section/OverviewTabs.tsx
@@ -0,0 +1,88 @@
+// components/Leistungen/Section/OverviewTabs.tsx
+'use client';
+
+import React, {useState} from 'react';
+import {motion, AnimatePresence} from 'framer-motion';
+import {FiMonitor, FiUsers, FiSettings, FiTool} from 'react-icons/fi';
+import Development from "@/components/Services/Section/overview/Development";
+import Consulting from "@/components/Services/Section/overview/Consulting";
+import ManagedServices from "@/components/Services/Section/overview/ManagedServices";
+import BugFixing from "@/components/Services/Section/overview/BugFixing";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const tabs = [
+    {key: 'entwicklung', label: 'Entwicklung', icon: <FiMonitor size={20}/>},
+    {key: 'beratung', label: 'Beratung', icon: <FiUsers size={20}/>},
+    {key: 'services', label: 'Managed Services', icon: <FiSettings size={20}/>},
+    {key: 'support', label: 'Fehlerbehebung', icon: <FiTool size={20}/>},
+];
+
+const tabContent: Record<string, React.ReactNode> = {
+    entwicklung: (
+        <Development/>
+    ),
+    beratung: (
+        <Consulting/>
+    ),
+    services: (
+        <ManagedServices/>
+    ),
+    support: (
+        <BugFixing/>
+    ),
+};
+const OverviewTabs = () => {
+    const [activeTab, setActiveTab] = useState("entwicklung");
+    const colors = useThemeColors();
+
+    return (
+        <div className="max-w-4xl mx-auto px-6 py-16 text-center transition-theme">
+            <h2
+                className="text-3xl font-bold mb-4"
+                style={{color: colors.primaryText}}
+            >
+                Was wir tun
+            </h2>
+
+            <motion.div
+                className="w-12 h-[2px] mb-8 bg-amber-500 mx-auto"
+                initial={{opacity: 0, x: -20}}
+                whileInView={{opacity: 1, x: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.4, delay: 0.1}}
+            />
+
+            <div className="flex justify-center gap-4 mb-8 flex-wrap">
+                {tabs.map((tab) => (
+                    <button
+                        key={tab.key}
+                        onClick={() => setActiveTab(tab.key)}
+                        className="flex items-center gap-2 px-4 py-2 rounded-full border text-sm font-medium transition-all"
+                        style={{
+                            color: activeTab === tab.key ? '#ffffff' : colors.primaryText,
+                            backgroundColor: activeTab === tab.key ? '#1D4ED8' : 'transparent',
+                            borderColor: activeTab === tab.key ? '#1D4ED8' : colors.inputBorder,
+                        }}
+                    >
+                        {tab.icon}
+                        {tab.label}
+                    </button>
+                ))}
+            </div>
+
+            <AnimatePresence mode="wait">
+                <motion.div
+                    key={activeTab}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    exit={{opacity: 0, y: -10}}
+                    transition={{duration: 0.4}}
+                >
+                    {tabContent[activeTab]}
+                </motion.div>
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default OverviewTabs;
\ No newline at end of file
diff --git a/components/Services/Section/ServiceHero.tsx b/components/Services/Section/ServiceHero.tsx
new file mode 100644
index 0000000..990b613
--- /dev/null
+++ b/components/Services/Section/ServiceHero.tsx
@@ -0,0 +1,30 @@
+// components/Leistungen/Section/Hero.tsx
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+
+const ServiceHero = () => {
+    return (
+        <section className="py-24 text-center max-w-4xl mx-auto">
+            <motion.h1
+                className="text-4xl md:text-5xl font-bold mb-6"
+                initial={{opacity: 0, y: 20}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 0.6}}
+            >
+                Unsere Leistungen
+            </motion.h1>
+            <motion.p
+                className="text-lg text-gray-500"
+                initial={{opacity: 0, y: 10}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 0.6, delay: 0.2}}
+            >
+                Wir bieten maßgeschneiderte Lösungen – von der Beratung bis zum Betrieb.
+            </motion.p>
+        </section>
+    );
+};
+
+export default ServiceHero;
diff --git a/components/Services/Section/overview/BugFixing.tsx b/components/Services/Section/overview/BugFixing.tsx
new file mode 100644
index 0000000..282e11d
--- /dev/null
+++ b/components/Services/Section/overview/BugFixing.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React from "react";
+import Image from "next/image";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const BugFixing = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
+            style={{color: colors.primaryText}}
+        >
+            <div>
+                <motion.h2
+                    className="text-xl sm:text-2xl md:text-3xl font-bold mb-4"
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5}}
+                >
+                    🐞 Fehlerbehebung & Optimierung
+                </motion.h2>
+                <motion.p
+                    className="text-sm font-medium leading-7"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Wir analysieren und beheben Fehler in bestehenden Systemen, optimieren die Performance und sorgen
+                    dafür, dass deine Software stabil und zuverlässig läuft.
+                </motion.p>
+
+                <motion.h3
+                    className="mt-8 text-lg font-semibold"
+                    initial={{opacity: 0}}
+                    whileInView={{opacity: 1}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    🔎 Fokusbereiche
+                </motion.h3>
+                <ul className="list-disc list-inside text-sm mt-4 space-y-1" style={{color: colors.secondaryText}}>
+                    <li>Debugging & Troubleshooting</li>
+                    <li>Performance-Analyse</li>
+                    <li>Refactoring von Legacy-Code</li>
+                    <li>Stabilitäts- und Sicherheitsupdates</li>
+                </ul>
+            </div>
+            <div className="justify-self-center">
+                <motion.div
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <Image
+                        src="/images/bug_fixing.jpg"
+                        alt="Bug fixing illustration"
+                        width={300}
+                        height={300}
+                        className="object-contain"
+                    />
+                </motion.div>
+            </div>
+        </div>
+    );
+};
+
+export default BugFixing;
diff --git a/components/Services/Section/overview/Consulting.tsx b/components/Services/Section/overview/Consulting.tsx
new file mode 100644
index 0000000..b3f7a70
--- /dev/null
+++ b/components/Services/Section/overview/Consulting.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const Consulting = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
+            style={{color: colors.primaryText}}
+        >
+            <div>
+                <motion.h2
+                    className="text-xl sm:text-2xl md:text-3xl font-bold mb-4"
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5}}
+                >
+                    🧠 Technische Beratung
+                </motion.h2>
+
+                <motion.p
+                    className="text-sm font-medium leading-7"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Wir unterstützen dich dabei, technische Entscheidungen fundiert zu treffen – von der Auswahl
+                    geeigneter Technologien bis hin zur Planung skalierbarer Architekturen. Gemeinsam finden wir den
+                    effizientesten Weg von der Idee bis zur Umsetzung – praxisnah, zielgerichtet und verständlich.
+                </motion.p>
+
+                <motion.h3
+                    className="mt-8 text-lg font-semibold"
+                    initial={{opacity: 0}}
+                    whileInView={{opacity: 1}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    🔍 Themenbereiche
+                </motion.h3>
+
+                <ul
+                    className="list-disc list-inside text-sm mt-4 space-y-1"
+                    style={{color: colors.secondaryText}}
+                >
+                    <li>Software-Architektur & Microservices</li>
+                    <li>Technologie- und Framework-Auswahl</li>
+                    <li>Prototyping & Machbarkeitsanalysen</li>
+                    <li>Projektplanung und agile Methodik</li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Consulting;
diff --git a/components/Services/Section/overview/Development.tsx b/components/Services/Section/overview/Development.tsx
new file mode 100644
index 0000000..7538a69
--- /dev/null
+++ b/components/Services/Section/overview/Development.tsx
@@ -0,0 +1,210 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import Image from "next/image";
+
+const techStack = {
+    row1: [
+        {
+            category: 'Programmiersprachen & Frameworks – Backend',
+            items: [
+                {id: 'java', label: 'Java'},
+                {id: 'dart', label: 'Dart'},
+                {id: 'kotlin', label: 'Kotlin'},
+                {id: 'spring', label: 'Spring'},
+            ],
+        },
+        {
+            category: 'Programmiersprachen & Frameworks – Frontend',
+            items: [
+                {id: 'html', label: 'HTML'},
+                {id: 'css', label: 'CSS'},
+                {id: 'bootstrap', label: 'Bootstrap'},
+                {id: 'nextjs', label: 'Next.js'},
+                {id: 'typescript', label: 'TypeScript'},
+                {id: 'flutter', label: 'Flutter'},
+            ],
+        },
+    ],
+    row2: [
+        {
+            category: 'Betriebssysteme',
+            items: [
+                {id: 'macos', label: 'macOS'},
+                {id: 'debian', label: 'Debian'},
+                {id: 'ubuntu', label: 'Ubuntu'},
+            ],
+        },
+        {
+            category: 'Version Control & Collaboration',
+            items: [
+                {id: 'gitlab', label: 'GitLab'},
+                {id: 'outline', label: 'Outline'},
+            ],
+        },
+        {
+            category: 'DevOps & Infrastruktur',
+            items: [
+                {id: 'gitlab-ci', label: 'GitLab CI'},
+                {id: 'docker', label: 'Docker'},
+                {id: 'proxmox', label: 'Proxmox'},
+            ],
+        },
+    ],
+};
+
+const TechCard = ({group}: {
+    group: { category: string; items: { id: string; label: string }[] };
+}) => {
+    const colors = useThemeColors();
+
+    return (
+        <motion.div
+            initial={{opacity: 0, y: 20}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.4}}
+            className="p-4 rounded-lg border shadow-md transition-colors duration-700 ease-in-out"
+            style={{
+                backgroundColor: colors.primaryBg,
+                borderColor: colors.primaryBg,
+                color: colors.primaryText,
+            }}
+        >
+            <h3 className="text-base font-semibold mb-4">{group.category}</h3>
+            <div className="grid grid-cols-3 gap-3">
+                {group.items.map(({id, label}) => (
+                    <div key={id} className="flex flex-col items-center text-center">
+                        <Image
+                            src={`/images/svg/${id}.svg`}
+                            alt={label}
+                            width={32}
+                            height={32}
+                            className="object-contain"
+                        />
+                        <span
+                            className="text-[10px] mt-1 transition-colors duration-700 ease-in-out"
+                            style={{color: colors.secondaryText}}
+                        >
+                            {label}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        </motion.div>
+    );
+};
+
+const Development = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
+            style={{color: colors.primaryText}}
+        >
+            <div>
+                <motion.h2
+                    className="text-xl sm:text-2xl md:text-3xl font-bold mb-4"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5}}
+                >
+                    💻 Full-Stack Entwicklung
+                </motion.h2>
+
+                <motion.p
+                    className="text-sm font-medium leading-7"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Wir entwickeln individuelle Softwarelösungen – von der nativen Mobile-App über moderne Webseiten bis
+                    hin zu internen Tools.
+                    Unser Fokus liegt auf skalierbaren Architekturen, performanten Frontends und wartbaren Backends.
+                    <br/><br/>
+                    Egal ob API-Entwicklung, Admin-Dashboard oder komplexe Plattform – wir setzen moderne Technologien
+                    gezielt ein, um robuste, zukunftssichere Anwendungen zu realisieren.
+                </motion.p>
+
+                <motion.div
+                    className="mt-6 text-sm font-medium space-y-3 pl-2"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">🚀</span>
+                        <p>Native Mobile-Apps mit Flutter</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">🌐</span>
+                        <p>Webseiten & Web-Portale mit Next.js</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">🧩</span>
+                        <p>Skalierbare Backends mit Spring Boot</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">📊</span>
+                        <p>Individuelle Dashboards & Admin-Panels</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">🔌</span>
+                        <p>API-Entwicklung (REST & GraphQL)</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">⚙️</span>
+                        <p>Automatisierte interne Tools</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">📦</span>
+                        <p>CI/CD & Container mit GitLab CI & Docker</p>
+                    </div>
+                </motion.div>
+
+                <motion.h3
+                    className="mt-10 text-lg font-semibold"
+                    initial={{opacity: 0}}
+                    animate={{opacity: 1}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    🔧 Unser Tech Stack im Überblick
+                </motion.h3>
+
+                <motion.p
+                    className="text-sm font-medium mb-4"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Mit diesem Stack entwickeln wir robuste, moderne Softwarelösungen – abgestimmt auf deine
+                    Anforderungen.
+                </motion.p>
+
+                <motion.div
+                    initial={{opacity: 0}}
+                    animate={{opacity: 1}}
+                    transition={{duration: 0.5, delay: 0.1}}
+                >
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                        {techStack.row1.map((group) => (
+                            <TechCard key={group.category} group={group}/>
+                        ))}
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+                        {techStack.row2.map((group) => (
+                            <TechCard key={group.category} group={group}/>
+                        ))}
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    );
+};
+
+export default Development;
diff --git a/components/Services/Section/overview/ManagedServices.tsx b/components/Services/Section/overview/ManagedServices.tsx
new file mode 100644
index 0000000..6908fd6
--- /dev/null
+++ b/components/Services/Section/overview/ManagedServices.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const ManagedServices = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
+            style={{color: colors.primaryText}}
+        >
+            <div>
+                <motion.h2
+                    className="text-xl sm:text-2xl md:text-3xl font-bold mb-4"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5}}
+                >
+                    🛠️ Managed Services
+                </motion.h2>
+
+                <motion.p
+                    className="text-sm font-medium leading-7"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Wir übernehmen den Betrieb und die Wartung deiner Anwendungen – zuverlässig, sicher und skalierbar.
+                    So kannst du dich voll auf dein Geschäft konzentrieren.
+                </motion.p>
+
+                <motion.h3
+                    className="mt-8 text-lg font-semibold"
+                    initial={{opacity: 0}}
+                    animate={{opacity: 1}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    🧰 Leistungen
+                </motion.h3>
+
+                <motion.ul
+                    className="list-disc list-inside text-sm mt-4 space-y-1"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <li>Monitoring & Logging</li>
+                    <li>Security Updates & Wartung</li>
+                    <li>Cloud Deployment & Hosting</li>
+                    <li>24/7 Systemüberwachung</li>
+                </motion.ul>
+            </div>
+        </div>
+    );
+};
+
+export default ManagedServices;
diff --git a/components/Services/Services.tsx b/components/Services/Services.tsx
new file mode 100644
index 0000000..58868a9
--- /dev/null
+++ b/components/Services/Services.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import ServiceHero from "@/components/Services/Section/ServiceHero";
+import OverviewTabs from "@/components/Services/Section/OverviewTabs";
+import ContactCTA from "@/components/Home/Sections/ContactCTA";
+import Section from "@/components/Section";
+
+const Home = () => {
+    const colors = useThemeColors();
+
+    return (
+        <motion.div
+            initial={{opacity: 0, y: 20}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.7, ease: "easeOut"}}
+            className="overflow-hidden"
+        >
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <ServiceHero/>
+            </Section>
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <OverviewTabs/>
+            </Section>
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <ContactCTA/>
+            </Section>
+        </motion.div>
+    );
+};
+
+export default Home;
diff --git a/components/provider/ThemeProvider.tsx b/components/provider/ThemeProvider.tsx
index cd8936a..0082bfa 100644
--- a/components/provider/ThemeProvider.tsx
+++ b/components/provider/ThemeProvider.tsx
@@ -1,9 +1,8 @@
-"use client";
+'use client';
 
-import { createContext, useEffect, useState } from "react";
+import {createContext, useEffect, useState} from "react";
 import Cookies from "js-cookie";
 
-// Define theme options
 type ThemeType = "light" | "dark";
 
 export const ThemeContext = createContext<{
@@ -11,43 +10,40 @@ export const ThemeContext = createContext<{
     toggleTheme: () => void;
 }>({
     theme: "light",
-    toggleTheme: () => {},
+    toggleTheme: () => {
+    },
 });
 
-export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
-    const [theme, setTheme] = useState<ThemeType>("light");
+export const ThemeProvider = ({children}: { children: React.ReactNode }) => {
+    const [theme, setTheme] = useState<ThemeType | null>(null);
 
     useEffect(() => {
-        // Get theme from cookies or system preference
-        const savedTheme = Cookies.get("theme") as ThemeType | undefined;
-        if (savedTheme === "dark" || savedTheme === "light") {
-            setTheme(savedTheme);
+        const saved = Cookies.get("theme") as ThemeType | undefined;
+        if (saved === "dark" || saved === "light") {
+            setTheme(saved);
         } else {
-            // Detect system preference
             const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-            setTheme(prefersDark ? "dark" : "light");
-            Cookies.set("theme", prefersDark ? "dark" : "light", { expires: 365 });
+            const defaultTheme: ThemeType = prefersDark ? "dark" : "light";
+            setTheme(defaultTheme);
+            Cookies.set("theme", defaultTheme, {expires: 365});
         }
     }, []);
 
-    // Apply the transition effect when theme changes
     useEffect(() => {
-        document.documentElement.classList.add("transition-theme");
+        if (!theme) return;
         document.documentElement.setAttribute("data-theme", theme);
-
-        return () => {
-            document.documentElement.classList.remove("transition-theme");
-        };
     }, [theme]);
 
     const toggleTheme = () => {
-        const newTheme: ThemeType = theme === "dark" ? "light" : "dark";
-        setTheme(newTheme);
-        Cookies.set("theme", newTheme, { expires: 365 });
+        const next = theme === "dark" ? "light" : "dark";
+        setTheme(next);
+        Cookies.set("theme", next, {expires: 365});
     };
 
+    if (!theme) return null;
+
     return (
-        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+        <ThemeContext.Provider value={{theme, toggleTheme}}>
             {children}
         </ThemeContext.Provider>
     );
diff --git a/constant/Constant.ts b/constant/Constant.ts
index 64dd8e4..3dc375f 100644
--- a/constant/Constant.ts
+++ b/constant/Constant.ts
@@ -2,15 +2,10 @@ export const navLinks = [
     {
         id: 1,
         url: '/',
-        label: 'Home',
+        label: 'Start',
     },
     {
         id: 2,
-        url: '#',
-        label: 'Über uns',
-    },
-    {
-        id: 3,
         url: '/services',
         label: 'Leistungen',
     }
diff --git a/package-lock.json b/package-lock.json
index c27636f..3376beb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "aos": "^2.3.4",
+        "clsx": "^2.1.1",
         "framer-motion": "^12.6.5",
         "js-cookie": "^3.0.5",
         "next": "15.1.7",
@@ -2355,6 +2356,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
diff --git a/package.json b/package.json
index d828a0c..d77b301 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "aos": "^2.3.4",
+    "clsx": "^2.1.1",
     "framer-motion": "^12.6.5",
     "js-cookie": "^3.0.5",
     "next": "15.1.7",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7efc97a..e1e704a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,6 +4,7 @@ export default {
     content: [
         "./pages/**/*.{js,ts,jsx,tsx,mdx}",
         "./components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./utils/**/*.{js,ts,jsx,tsx,mdx}",
         "./app/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     theme: {},
diff --git a/tsconfig.json b/tsconfig.json
index 1fd05db..b976f1a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,7 @@
     "baseUrl": ".",
     "paths": {
       "@/components/*": ["./components/*"],
+      "@/utils/*": ["./utils/*"],
       "@/*": ["./*"]
     }
   },
diff --git a/utils/useThemeColors.ts b/utils/useThemeColors.ts
new file mode 100644
index 0000000..acbfc19
--- /dev/null
+++ b/utils/useThemeColors.ts
@@ -0,0 +1,10 @@
+'use client';
+
+import {useContext} from "react";
+import {ThemeContext} from "@/components/provider/ThemeProvider";
+import {themeColors} from "@/components/Helper/ThemeColors";
+
+export const useThemeColors = () => {
+    const {theme} = useContext(ThemeContext);
+    return themeColors[theme];
+};