From f2221815c8c9edefa675e31b4e861bb4a9d194f4 Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Sun, 20 Apr 2025 09:42:40 +0000
Subject: [PATCH] Merge branch 'homepage-refactoring-pt4' into 'dev'

Homepage refactoring pt4

See merge request rheinsw/website!31
---
 app/about/layout.tsx                          |  37 ++++
 app/about/page.tsx                            |  12 ++
 components/About/AboutContent.tsx             |  47 ++++++
 components/About/Section/AboutHero.tsx        |  19 +++
 components/About/Section/AboutIntro.tsx       |  68 ++++++++
 components/About/Section/AboutProcess.tsx     | 158 ++++++++++++++++++
 components/About/Section/AboutTimeline.tsx    |  94 +++++++++++
 components/About/Section/TeamSection.tsx      |  97 +++++++++++
 components/Contact/Contact.tsx                | 111 +++---------
 .../Contact/Section/ContactFormSection.tsx    | 101 +++++++++++
 components/Contact/Section/ContactHero.tsx    |  19 +++
 components/Helper/SmallHero.tsx               |  72 +++++---
 components/Home/Home.tsx                      |   7 +-
 components/Home/Sections/ContactCTA.tsx       |  27 +--
 components/Navbar/DesktopNav.tsx              |  23 +--
 components/Services/Section/OverviewTabs.tsx  |  45 +++--
 components/Services/Section/ServiceHero.tsx   |  29 +---
 .../Services/Section/overview/BugFixing.tsx   |  25 +--
 .../Services/Section/overview/Consulting.tsx  |   2 +-
 .../Services/Section/overview/Development.tsx |   2 +-
 .../Section/overview/ManagedServices.tsx      |   2 +-
 components/Services/Services.tsx              |   6 +-
 constant/Constant.ts                          |   5 +
 public/images/team/default-avatar.jpg         | Bin 0 -> 14051 bytes
 24 files changed, 797 insertions(+), 211 deletions(-)
 create mode 100644 app/about/layout.tsx
 create mode 100644 app/about/page.tsx
 create mode 100644 components/About/AboutContent.tsx
 create mode 100644 components/About/Section/AboutHero.tsx
 create mode 100644 components/About/Section/AboutIntro.tsx
 create mode 100644 components/About/Section/AboutProcess.tsx
 create mode 100644 components/About/Section/AboutTimeline.tsx
 create mode 100644 components/About/Section/TeamSection.tsx
 create mode 100644 components/Contact/Section/ContactFormSection.tsx
 create mode 100644 components/Contact/Section/ContactHero.tsx
 create mode 100644 public/images/team/default-avatar.jpg
diff --git a/app/about/layout.tsx b/app/about/layout.tsx
new file mode 100644
index 0000000..ffa5db9
--- /dev/null
+++ b/app/about/layout.tsx
@@ -0,0 +1,37 @@
+import type {Metadata} from "next";
+import "../globals.css";
+
+import Nav from "@/components/Navbar/Nav";
+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: "Über Uns | Rhein Software",
+    description: "Rhein Software Development",
+};
+
+export default async function RootLayout({
+                                             children,
+                                         }: Readonly<{
+    children: React.ReactNode;
+}>) {
+    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: bgColor}}>
+        <ThemeProvider>
+            <Nav/>
+            {children}
+            <Footer/>
+        </ThemeProvider>
+        </body>
+        </html>
+    );
+}
diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..5fcae6d
--- /dev/null
+++ b/app/about/page.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import AboutContent from "@/components/About/AboutContent";
+
+const AboutPage = () => {
+    return (
+        <div>
+            <AboutContent/>
+        </div>
+    );
+};
+
+export default AboutPage;
\ No newline at end of file
diff --git a/components/About/AboutContent.tsx b/components/About/AboutContent.tsx
new file mode 100644
index 0000000..b148189
--- /dev/null
+++ b/components/About/AboutContent.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import Section from "@/components/Section";
+import AboutHero from "@/components/About/Section/AboutHero";
+import AboutTimeline from "@/components/About/Section/AboutTimeline";
+import TeamSection from "@/components/About/Section/TeamSection";
+import AboutIntro from "@/components/About/Section/AboutIntro";
+import AboutProcess from "@/components/About/Section/AboutProcess";
+
+const AboutContent = () => {
+    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>
+                <AboutHero/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <AboutIntro/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <AboutProcess/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <AboutTimeline/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <TeamSection/>
+            </Section>
+
+        </motion.div>
+    );
+};
+
+export default AboutContent;
diff --git a/components/About/Section/AboutHero.tsx b/components/About/Section/AboutHero.tsx
new file mode 100644
index 0000000..31567bc
--- /dev/null
+++ b/components/About/Section/AboutHero.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import React from "react";
+import SmallHero from "@/components/Helper/SmallHero";
+
+const AboutHero = () => {
+    return (
+        <div className="relative overflow-hidden">
+            <SmallHero
+                title="Über uns"
+                subtitle="Digitaler Partner für individuelle Softwarelösungen."
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
+        </div>
+    );
+};
+
+export default AboutHero;
diff --git a/components/About/Section/AboutIntro.tsx b/components/About/Section/AboutIntro.tsx
new file mode 100644
index 0000000..379bc23
--- /dev/null
+++ b/components/About/Section/AboutIntro.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import {motion} from 'framer-motion';
+import {useThemeColors} from '@/utils/useThemeColors';
+
+const About = () => {
+    const colors = useThemeColors();
+
+    return (
+        <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">
+                    {/* Text */}
+                    <div className="p-0 max-w-4xl">
+                        <motion.p
+                            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}}
+                            transition={{duration: 0.5, delay: 0.2}}
+                        >
+                            Wir sind Rhein-Software – Ihr Partner für digitale Produkte und individuelle
+                            Softwarelösungen.
+                            Wir entwickeln skalierbare, wartbare Anwendungen mit klarem Fokus: Technik, die begeistert –
+                            von der Architektur bis zum Go-Live.
+                        </motion.p>
+
+                        <motion.p
+                            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}}
+                        >
+                            Ob Start-up oder etabliertes Unternehmen: Wir begleiten Sie mit einem flexiblen Netzwerk,
+                            klarer Kommunikation und hohem Qualitätsanspruch – agil, lösungsorientiert und nah am
+                            Projekt.
+                        </motion.p>
+                    </div>
+
+                    {/* CTA Button */}
+                    <motion.div
+                        className="mt-10 flex justify-end"
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        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>*/}
+                    </motion.div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default About;
diff --git a/components/About/Section/AboutProcess.tsx b/components/About/Section/AboutProcess.tsx
new file mode 100644
index 0000000..887ec43
--- /dev/null
+++ b/components/About/Section/AboutProcess.tsx
@@ -0,0 +1,158 @@
+'use client';
+
+import React, {useState} from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const processSteps = [
+    {
+        title: "Beratung",
+        description: (
+            <>
+                In der <strong>Beratungsphase</strong> analysieren wir gemeinsam Ihre Anforderungen und
+                Geschäftsziele. Dabei identifizieren wir Herausforderungen und definieren die Zielsetzung
+                für Ihr Projekt.
+            </>
+        ),
+    },
+    {
+        title: "Planung",
+        description: (
+            <>
+                Wir erarbeiten ein <strong>technisches Konzept</strong> mit klarer Struktur, Meilensteinen und
+                Ressourcenplanung. Eine solide Architektur bildet die Grundlage für ein skalierbares und wartbares
+                System.
+            </>
+        ),
+    },
+    {
+        title: "Entwicklung",
+        description: (
+            <>
+                In iterativen Zyklen setzen wir das Projekt um. Regelmäßige <strong>Feedbackschleifen</strong>&nbsp;
+                sorgen dafür, dass das Ergebnis Ihren Erwartungen entspricht und flexibel angepasst werden kann.
+            </>
+        ),
+    },
+    {
+        title: "Test",
+        description: (
+            <>
+                Durch umfangreiche <strong>Tests und Optimierungen</strong> stellen wir sicher, dass Ihre
+                Anwendung robust, performant und benutzerfreundlich ist – noch vor dem Go-Live.
+            </>
+        ),
+    },
+    {
+        title: "Go-Live",
+        description: (
+            <>
+                Wir begleiten Sie beim <strong>produktiven Einsatz</strong> Ihrer Anwendung und unterstützen Sie
+                auch nach dem Go-Live mit Support und Weiterentwicklungsmöglichkeiten.
+            </>
+        ),
+    },
+];
+
+const AboutProcess: React.FC = () => {
+    const colors = useThemeColors();
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+
+    return (
+        <section className="w-full px-6 sm:px-12 py-20 max-w-6xl mx-auto">
+            <h2
+                className="text-2xl sm:text-3xl font-bold text-left"
+                style={{color: colors.primaryText}}
+            >
+                Unser Prozess
+            </h2>
+            <motion.div
+                className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
+                initial={{opacity: 0, x: -20}}
+                whileInView={{opacity: 1, x: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.4, delay: 0.1}}
+            />
+
+            {/* Mobile View: Tab buttons */}
+            <div className="block md:hidden mb-6">
+                <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+                    {processSteps.map((step, idx) => (
+                        <button
+                            key={idx}
+                            onClick={() => setActiveIndex(idx)}
+                            className={`w-full px-4 py-2 text-sm border rounded-full transition-colors ${
+                                activeIndex === idx
+                                    ? 'bg-blue-600 text-white border-blue-600'
+                                    : 'border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                            }`}
+                        >
+                            {step.title}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* Desktop View: 2-column layout */}
+            <div className="hidden md:grid grid-cols-3 gap-8">
+                {/* Left: Step List */}
+                <div className="flex flex-col space-y-4">
+                    {processSteps.map((step, idx) => (
+                        <button
+                            key={idx}
+                            onClick={() => setActiveIndex(idx)}
+                            className={`text-left px-4 py-3 border rounded-lg transition-colors ${
+                                activeIndex === idx
+                                    ? 'border-blue-600 bg-blue-50 dark:bg-gray-800'
+                                    : 'border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800'
+                            }`}
+                            style={{color: colors.primaryText}}
+                        >
+                            <span className="font-semibold">{idx + 1}. {step.title}</span>
+                        </button>
+                    ))}
+                </div>
+
+                {/* Right: Step Content */}
+                <div className="md:col-span-2 p-6 border border-gray-300 dark:border-gray-700 rounded-lg"
+                     style={{backgroundColor: colors.primaryBg}}>
+                    <motion.div
+                        key={activeIndex}
+                        initial={{opacity: 0, y: 10}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.4}}
+                    >
+                        <h3 className="text-xl font-bold mb-4" style={{color: colors.primaryText}}>
+                            {processSteps[activeIndex].title}
+                        </h3>
+                        <div className="text-base space-y-1" style={{color: colors.secondaryText}}>
+                            {processSteps[activeIndex].description}
+                        </div>
+                    </motion.div>
+                </div>
+            </div>
+
+            {/* Mobile View: Content Below Tabs */}
+            <div className="block md:hidden">
+                <div className="p-6 border border-gray-300 dark:border-gray-700 rounded-lg"
+                     style={{backgroundColor: colors.primaryBg}}>
+                    <motion.div
+                        key={activeIndex + '-mobile'}
+                        initial={{opacity: 0, y: 10}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.4}}
+                    >
+                        <h3 className="text-xl font-bold mb-4" style={{color: colors.primaryText}}>
+                            {activeIndex + 1}. {processSteps[activeIndex].title}
+                        </h3>
+                        <div className="text-base space-y-1" style={{color: colors.secondaryText}}>
+                            {processSteps[activeIndex].description}
+                        </div>
+                    </motion.div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AboutProcess;
diff --git a/components/About/Section/AboutTimeline.tsx b/components/About/Section/AboutTimeline.tsx
new file mode 100644
index 0000000..48bf23d
--- /dev/null
+++ b/components/About/Section/AboutTimeline.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const timeline = [
+    {
+        date: "Oktober 2024",
+        title: "Projektgründung",
+        description: "Entwicklung der Idee und erste Umsetzungsschritte – inspiriert durch Technik und Nachhaltigkeit.",
+        current: false,
+    },
+    {
+        date: "Mai 2025",
+        title: "Go-Live",
+        description: "Offizieller Start mit Kundenprojekten und einem umfassenden Full-Service-Angebot.",
+        current: true,
+    },
+];
+
+const AboutTimeline3 = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div className="relative w-full px-6 sm:px-12 py-8 max-w-5xl mx-auto">
+            <h2
+                className="text-2xl sm:text-3xl font-bold mt-10"
+                style={{color: colors.primaryText}}
+            >
+                Von der Idee bis heute
+            </h2>
+            <motion.div
+                className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
+                initial={{opacity: 0, x: -20}}
+                whileInView={{opacity: 1, x: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.4, delay: 0.1}}
+            />
+
+            <div className="relative border-l-2 border-gray-300 dark:border-gray-700 ml-6">
+                {timeline.map((item, idx) => (
+                    <motion.div
+                        key={idx}
+                        initial={{opacity: 0, y: 20}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5, delay: idx * 0.2}}
+                        className="relative mb-10 pl-12"
+                    >
+                        {/* Timeline dot */}
+                        <div className="absolute left-[-22px] top-0 z-10">
+                            <div
+                                className={`w-10 h-10 rounded-full border-2 flex items-center justify-center bg-white dark:bg-gray-900 ${
+                                    item.current
+                                        ? "border-blue-600"
+                                        : "border-gray-400 dark:border-gray-600"
+                                }`}
+                            >
+                                {item.current && (
+                                    <motion.span
+                                        className="absolute w-10 h-10 rounded-full bg-blue-600 opacity-40"
+                                        animate={{scale: [1, 1.6, 1], opacity: [0.4, 0, 0.4]}}
+                                        transition={{repeat: Infinity, duration: 1.6}}
+                                    />
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Timeline card */}
+                        <motion.div
+                            whileHover={{scale: 1.02, translateX: 4}}
+                            transition={{type: "spring", stiffness: 260, damping: 20}}
+                            className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 cursor-default"
+                        >
+                            <div className="text-sm text-blue-600 font-semibold mb-1">{item.date}</div>
+                            <div
+                                className="text-lg font-bold mb-2"
+                                style={{color: colors.primaryText}}
+                            >
+                                {item.title}
+                            </div>
+                            <div className="text-sm" style={{color: colors.secondaryText}}>
+                                {item.description}
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default AboutTimeline3;
diff --git a/components/About/Section/TeamSection.tsx b/components/About/Section/TeamSection.tsx
new file mode 100644
index 0000000..1f7c693
--- /dev/null
+++ b/components/About/Section/TeamSection.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import React from "react";
+import Image from "next/image";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const team = [
+    {
+        name: "Thatsaphorn",
+        role: "Gründer & Entwickler",
+        picture: "",
+    },
+    {
+        name: "Anonym",
+        role: "Vertrieb",
+        picture: "",
+    },
+];
+
+const fallbackImage = "/images/team/default-avatar.jpg";
+
+const TeamSection = () => {
+    const colors = useThemeColors();
+
+    return (
+        <section className="w-full px-6 sm:px-12 py-16 max-w-6xl mx-auto">
+            <motion.h2
+                className="text-2xl sm:text-3xl font-bold text-left"
+                style={{color: colors.primaryText}}
+                initial={{opacity: 0, y: 20}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.5}}
+            >
+                Das Team
+            </motion.h2>
+            <motion.div
+                className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
+                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">
+                <div
+                    className={`grid gap-8 
+                      grid-cols-1 
+                      sm:grid-cols-${Math.min(team.length, 2)} 
+                      md:grid-cols-${Math.min(team.length, 3)} 
+                      lg:grid-cols-${Math.min(team.length, 4)}`}
+                >
+                    {team.map((member, idx) => (
+                        <motion.div
+                            key={member.name}
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.4, delay: idx * 0.1}}
+                            whileHover={{scale: 1.015}}
+                            className="flex flex-col items-center text-center
+    rounded-xl border border-gray-200 dark:border-gray-700
+    shadow-md hover:shadow-lg transition-all p-6"
+                            style={{backgroundColor: colors.secondaryBg}}
+                        >
+                            <motion.div
+                                whileHover={{scale: 1.05}}
+                                transition={{type: "spring", stiffness: 300, damping: 20}}
+                                className="w-28 h-28 relative mb-4"
+                            >
+                                <Image
+                                    src={member.picture || fallbackImage}
+                                    alt={member.name}
+                                    fill
+                                    sizes="112px"
+                                    className="rounded-full object-cover shadow"
+                                />
+                            </motion.div>
+
+                            <div className="h-px w-8 bg-gray-300 dark:bg-gray-600 my-4"/>
+
+                            <div className="text-lg font-semibold" style={{color: colors.primaryText}}>
+                                {member.name}
+                            </div>
+                            <div className="text-sm mt-1" style={{color: colors.secondaryText}}>
+                                {member.role}
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default TeamSection;
diff --git a/components/Contact/Contact.tsx b/components/Contact/Contact.tsx
index 01e9d67..f57ae64 100644
--- a/components/Contact/Contact.tsx
+++ b/components/Contact/Contact.tsx
@@ -1,99 +1,30 @@
-"use client";
+'use client';
 
-import React, {useEffect, useContext} from "react";
-import AOS from "aos";
-import "aos/dist/aos.css";
-import SmallHero from "@/components/Helper/SmallHero";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import ContactHero from "@/components/Contact/Section/ContactHero";
+import ContactFormSection from "@/components/Contact/Section/ContactFormSection";
+import Section from "@/components/Section";
 
 const Contact = () => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
-
-    useEffect(() => {
-        AOS.init({
-            duration: 1000,
-            easing: "ease",
-            once: true,
-            anchorPlacement: "top-bottom",
-        });
-    }, []);
+    const colors = useThemeColors();
 
     return (
-        <div className="overflow-hidden transition-colors duration-500"
-             style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}>
+        <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>
+                <ContactHero/>
+            </Section>
 
-            {/* Hero Section */}
-            <div className="mt-[10vh]">
-                <SmallHero
-                    title="Kontakt"
-                    subtitle="Hast du Fragen? Wir sind für dich da!"
-                    backgroundImage="/images/contact.png"
-                />
-            </div>
-
-
-            {/* Contact Form */}
-            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12">
-                <h2 className="text-2xl md:text-3xl font-bold text-center"
-                    data-aos="fade-up"
-                    data-aos-delay="400"
-                >
-                    Schreib uns eine Nachricht
-                </h2>
-                <p data-aos="fade-up" data-aos-delay="600"
-                   className="text-center mt-3 text-[var(--secondary-text)]">
-                    Wir melden uns schnellstmöglich bei dir!
-                </p>
-
-                <form className="mt-8 max-w-2xl mx-auto space-y-6">
-                    {/* Name & Email */}
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        {["Dein Name", "Deine E-Mail"].map((label, index) => (
-                            <div key={index} data-aos="fade-up" data-aos-delay={index * 100}>
-                                <label className="block font-semibold">{label}</label>
-                                <input
-                                    type={index === 0 ? "text" : "email"}
-                                    placeholder={index === 0 ? "Max Mustermann" : "max@example.com"}
-                                    className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-                                    style={{
-                                        backgroundColor: colors.inputFieldBg,
-                                        border: `1px solid ${colors.inputBorder}`,
-                                        color: colors.primaryText
-                                    }}
-                                />
-                            </div>
-                        ))}
-                    </div>
-
-                    {/* Message */}
-                    <div data-aos="fade-up" data-aos-delay="300">
-                        <label className="block font-semibold">Deine Nachricht</label>
-                        <textarea
-                            rows={4}
-                            placeholder="Schreibe deine Nachricht..."
-                            className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-                            style={{
-                                backgroundColor: colors.inputFieldBg,
-                                border: `1px solid ${colors.inputBorder}`,
-                                color: colors.primaryText
-                            }}
-                        />
-                    </div>
-
-                    {/* Submit Button */}
-                    <div className="text-center" data-aos="fade-up" data-aos-delay="400">
-                        <button
-                            type="submit"
-                            className="px-6 py-3 bg-blue-600 text-white text-lg font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
-                        >
-                            📩 Nachricht senden
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <ContactFormSection/>
+            </Section>
+        </motion.div>
     );
 };
 
diff --git a/components/Contact/Section/ContactFormSection.tsx b/components/Contact/Section/ContactFormSection.tsx
new file mode 100644
index 0000000..f37edf5
--- /dev/null
+++ b/components/Contact/Section/ContactFormSection.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const ContactFormSection = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
+            <motion.h2
+                className="text-2xl sm:text-3xl font-bold mb-2"
+                style={{color: colors.primaryText}}
+                initial={{opacity: 0, y: 20}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.5}}
+            >
+                Schreib uns eine Nachricht
+            </motion.h2>
+
+            <motion.p
+                className="text-sm mb-8 max-w-xl"
+                style={{color: colors.secondaryText}}
+                initial={{opacity: 0, y: 10}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.5, delay: 0.2}}
+            >
+                Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
+            </motion.p>
+
+            <form className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {["Dein Name", "Deine E-Mail"].map((label, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{opacity: 0, y: 10}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.5, delay: index * 0.1}}
+                        >
+                            <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
+                                {label}
+                            </label>
+                            <input
+                                type={index === 0 ? "text" : "email"}
+                                placeholder={index === 0 ? "Max Mustermann" : "max@example.com"}
+                                className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                                style={{
+                                    backgroundColor: colors.inputFieldBg,
+                                    border: `1px solid ${colors.inputBorder}`,
+                                    color: colors.primaryText,
+                                }}
+                            />
+                        </motion.div>
+                    ))}
+                </div>
+
+                <motion.div
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
+                        Deine Nachricht
+                    </label>
+                    <textarea
+                        rows={4}
+                        placeholder="Worum geht es?"
+                        className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                        style={{
+                            backgroundColor: colors.inputFieldBg,
+                            border: `1px solid ${colors.inputBorder}`,
+                            color: colors.primaryText,
+                        }}
+                    />
+                </motion.div>
+
+                <motion.div
+                    className="pt-4 flex justify-end"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.4}}
+                >
+                    <button
+                        type="submit"
+                        className="px-6 py-3 bg-blue-600 text-white text-sm sm:text-base font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
+                    >
+                        📩 Nachricht senden
+                    </button>
+                </motion.div>
+            </form>
+        </div>
+    );
+};
+
+export default ContactFormSection;
diff --git a/components/Contact/Section/ContactHero.tsx b/components/Contact/Section/ContactHero.tsx
new file mode 100644
index 0000000..055cf15
--- /dev/null
+++ b/components/Contact/Section/ContactHero.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import React from "react";
+import SmallHero from "@/components/Helper/SmallHero";
+
+const ContactHero = () => {
+    return (
+        <div className="relative overflow-hidden">
+            <SmallHero
+                title="Kontakt"
+                subtitle="Du hast Fragen oder möchtest ein Projekt besprechen? Schreib uns!"
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
+        </div>
+    );
+};
+
+export default ContactHero;
diff --git a/components/Helper/SmallHero.tsx b/components/Helper/SmallHero.tsx
index 9b2e9ce..77afebe 100644
--- a/components/Helper/SmallHero.tsx
+++ b/components/Helper/SmallHero.tsx
@@ -1,38 +1,56 @@
-import React from "react";
+'use client';
+
+import React, {useContext} from "react";
+import {ThemeContext} from "@/components/provider/ThemeProvider";
+import {themeColors} from "@/components/Helper/ThemeColors";
+import {motion} from "framer-motion";
 
 type SmallHeroProps = {
     title: string;
     subtitle?: string;
-    backgroundImage?: string; // Optional background image
+    backgroundImage?: string;
+    blurBackground?: boolean;
 };
 
-const SmallHero = ({title, subtitle, backgroundImage}: SmallHeroProps) => {
+const SmallHero = ({title, subtitle, backgroundImage, blurBackground}: SmallHeroProps) => {
+    const {theme} = useContext(ThemeContext);
+    const colors = themeColors[theme];
+
+    const primaryTextColor = backgroundImage ? "#ffffff" : colors.primaryText;
+    const secondaryTextColor = backgroundImage ? "rgba(255, 255, 255, 0.8)" : "#6B7280"; // Tailwind gray-500
+
     return (
-        <div
-            className="w-full py-20 text-center flex flex-col items-center justify-center bg-cover bg-center"
-            style={{
-                backgroundColor: backgroundImage ? "transparent" : "var(--primary-bg)", // Fallback if no image
-                color: "var(--primary-text)",
-                backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundBlendMode: "overlay",
-                transition: "background-color 0.4s ease-in-out, color 0.4s ease-in-out",
-            }}
-        >
-            <h1 className="text-3xl sm:text-4xl font-bold"
-                data-aos="fade-up"
-            >
-                {title}
-            </h1>
-            {subtitle &&
-                <p className="mt-2 text-lg text-[var(--secondary-text)]"
-                   data-aos="fade-up"
-                   data-aos-delay="200"
+        <div className="relative w-full py-36 overflow-hidden">
+            {backgroundImage && blurBackground && (
+                <div
+                    className="absolute inset-0 bg-cover bg-center blur-sm scale-[1.05] z-0 will-change-transform"
+                    style={{backgroundImage: `url(${backgroundImage})`}}
+                />
+            )}
+
+            {/* Text content */}
+            <div className="relative z-10 px-6 sm:px-12 max-w-5xl mx-auto">
+                <motion.h1
+                    className="text-3xl sm:text-4xl font-bold text-left"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6}}
+                    style={{color: primaryTextColor}}
                 >
-                    {subtitle}
-                </p>
-            }
+                    {title}
+                </motion.h1>
+                {subtitle && (
+                    <motion.p
+                        className="mt-3 text-lg text-left"
+                        initial={{opacity: 0, y: 10}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.6, delay: 0.2}}
+                        style={{color: secondaryTextColor}}
+                    >
+                        {subtitle}
+                    </motion.p>
+                )}
+            </div>
         </div>
     );
 };
diff --git a/components/Home/Home.tsx b/components/Home/Home.tsx
index ce78464..dd1b2d1 100644
--- a/components/Home/Home.tsx
+++ b/components/Home/Home.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from "react";
-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";
@@ -24,9 +23,9 @@ const Home = () => {
                 <Hero/>
             </Section>
 
-            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
-                <About/>
-            </Section>
+            {/*<Section style={{backgroundColor: colors.secondaryBg}} shadow>*/}
+            {/*    <About/>*/}
+            {/*</Section>*/}
 
             <Section style={{backgroundColor: colors.primaryBg}} shadow>
                 <HomeServices/>
diff --git a/components/Home/Sections/ContactCTA.tsx b/components/Home/Sections/ContactCTA.tsx
index 19b5791..9bfed4d 100644
--- a/components/Home/Sections/ContactCTA.tsx
+++ b/components/Home/Sections/ContactCTA.tsx
@@ -5,7 +5,17 @@ import {motion} from 'framer-motion';
 import {FiArrowRight} from 'react-icons/fi';
 import {useThemeColors} from '@/utils/useThemeColors';
 
-const ContactCTA = () => {
+type ContactCTAProps = {
+    title?: string;
+    description?: string;
+    buttonLabel?: string;
+};
+
+const ContactCTA = ({
+                        title = "Interesse geweckt?",
+                        description = "Lass uns über dein Projekt sprechen. Wir freuen uns darauf, deine Ideen in die Realität umzusetzen.",
+                        buttonLabel = "Jetzt Kontakt aufnehmen",
+                    }: ContactCTAProps) => {
     const colors = useThemeColors();
 
     return (
@@ -14,26 +24,21 @@ const ContactCTA = () => {
             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 className="text-3xl md:text-4xl font-bold">
+                    {title}
                 </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"
+                    className="mt-4 text-sm md:text-base max-w-xl mx-auto"
                     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.
+                    {description}
                 </motion.p>
 
-                {/* CTA Button */}
                 <motion.div
                     className="mt-8 flex justify-center"
                     initial={{opacity: 0, y: 20}}
@@ -45,7 +50,7 @@ const ContactCTA = () => {
                         <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}/>
+                            {buttonLabel} <FiArrowRight size={18}/>
                         </button>
                     </Link>
                 </motion.div>
diff --git a/components/Navbar/DesktopNav.tsx b/components/Navbar/DesktopNav.tsx
index eeaf744..34bb517 100644
--- a/components/Navbar/DesktopNav.tsx
+++ b/components/Navbar/DesktopNav.tsx
@@ -51,9 +51,11 @@ const Nav = ({openNav}: Props) => {
             style={{backgroundColor: navBg ? colors.navBg : "transparent"}}
         >
             <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>
+                <Link href="/">
+                    <h1 className={`${contentSize} font-bold cursor-pointer ${navColorClass}`}>
+                        <span className="text-lg md:text-xl text-pink-700">R</span>hein Software
+                    </h1>
+                </Link>
 
                 <div className="hidden lg:flex items-center space-x-6">
                     {navLinks.map((link) => (
@@ -70,14 +72,13 @@ const Nav = ({openNav}: Props) => {
                 </div>
 
                 <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>
-                    )}
+                    <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 ${navColorClass}`}
diff --git a/components/Services/Section/OverviewTabs.tsx b/components/Services/Section/OverviewTabs.tsx
index c083a60..81aafad 100644
--- a/components/Services/Section/OverviewTabs.tsx
+++ b/components/Services/Section/OverviewTabs.tsx
@@ -1,9 +1,8 @@
-// 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 {FiZap, FiMonitor, FiServer, 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";
@@ -11,53 +10,47 @@ 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: 'entwicklung', label: 'Entwicklung', icon: <FiZap size={20}/>},
+    {key: 'beratung', label: 'Beratung', icon: <FiMonitor size={20}/>},
+    {key: 'services', label: 'Managed Services', icon: <FiServer size={20}/>},
     {key: 'support', label: 'Fehlerbehebung', icon: <FiTool size={20}/>},
 ];
 
 const tabContent: Record<string, React.ReactNode> = {
-    entwicklung: (
-        <Development/>
-    ),
-    beratung: (
-        <Consulting/>
-    ),
-    services: (
-        <ManagedServices/>
-    ),
-    support: (
-        <BugFixing/>
-    ),
+    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}}
-            >
+        <div className="max-w-5xl mx-auto px-6 py-16 transition-theme text-left">
+            <h2 className="text-3xl font-bold mb-2" style={{color: colors.primaryText}}>
                 Was wir tun
             </h2>
 
             <motion.div
-                className="w-12 h-[2px] mb-8 bg-amber-500 mx-auto"
+                className="w-12 h-[2px] mb-6 bg-amber-500"
                 initial={{opacity: 0, x: -20}}
                 whileInView={{opacity: 1, x: 0}}
                 viewport={{once: true}}
                 transition={{duration: 0.4, delay: 0.1}}
             />
+            <p className="text-sm mb-10" style={{color: colors.secondaryText}}>
+                In diesem Abschnitt geben wir dir einen Überblick über unsere zentralen Leistungen – von der technischen
+                Entwicklung über Beratung bis hin zu Betrieb und Support.
+            </p>
 
-            <div className="flex justify-center gap-4 mb-8 flex-wrap">
+            <div className="flex flex-wrap gap-4 mb-10">
                 {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"
+                        className="flex-1 min-w-[150px] flex items-center justify-start 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',
@@ -85,4 +78,4 @@ const OverviewTabs = () => {
     );
 };
 
-export default OverviewTabs;
\ No newline at end of file
+export default OverviewTabs;
diff --git a/components/Services/Section/ServiceHero.tsx b/components/Services/Section/ServiceHero.tsx
index 990b613..17860c5 100644
--- a/components/Services/Section/ServiceHero.tsx
+++ b/components/Services/Section/ServiceHero.tsx
@@ -1,29 +1,18 @@
-// components/Leistungen/Section/Hero.tsx
 'use client';
 
 import React from "react";
-import {motion} from "framer-motion";
+import SmallHero from "@/components/Helper/SmallHero";
 
 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>
+        <div className="relative overflow-hidden">
+            <SmallHero
+                title="Unsere Leistungen"
+                subtitle="Wir bieten maßgeschneiderte Lösungen – von der Beratung bis zum Betrieb."
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
+        </div>
     );
 };
 
diff --git a/components/Services/Section/overview/BugFixing.tsx b/components/Services/Section/overview/BugFixing.tsx
index 282e11d..52cfc9b 100644
--- a/components/Services/Section/overview/BugFixing.tsx
+++ b/components/Services/Section/overview/BugFixing.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from "react";
-import Image from "next/image";
 import {motion} from "framer-motion";
 import {useThemeColors} from "@/utils/useThemeColors";
 
@@ -10,7 +9,7 @@ const BugFixing = () => {
 
     return (
         <div
-            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
+            className="w-[95%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
             style={{color: colors.primaryText}}
         >
             <div>
@@ -22,6 +21,7 @@ const BugFixing = () => {
                 >
                     🐞 Fehlerbehebung & Optimierung
                 </motion.h2>
+
                 <motion.p
                     className="text-sm font-medium leading-7"
                     style={{color: colors.secondaryText}}
@@ -41,28 +41,17 @@ const BugFixing = () => {
                 >
                     🔎 Fokusbereiche
                 </motion.h3>
-                <ul className="list-disc list-inside text-sm mt-4 space-y-1" style={{color: colors.secondaryText}}>
+
+                <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>
     );
 };
diff --git a/components/Services/Section/overview/Consulting.tsx b/components/Services/Section/overview/Consulting.tsx
index b3f7a70..99c9693 100644
--- a/components/Services/Section/overview/Consulting.tsx
+++ b/components/Services/Section/overview/Consulting.tsx
@@ -9,7 +9,7 @@ const Consulting = () => {
 
     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"
+            className="w-[95%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
             style={{color: colors.primaryText}}
         >
             <div>
diff --git a/components/Services/Section/overview/Development.tsx b/components/Services/Section/overview/Development.tsx
index 7538a69..c45d65b 100644
--- a/components/Services/Section/overview/Development.tsx
+++ b/components/Services/Section/overview/Development.tsx
@@ -101,7 +101,7 @@ const Development = () => {
 
     return (
         <div
-            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
+            className="w-[95%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
             style={{color: colors.primaryText}}
         >
             <div>
diff --git a/components/Services/Section/overview/ManagedServices.tsx b/components/Services/Section/overview/ManagedServices.tsx
index 6908fd6..41c7fc3 100644
--- a/components/Services/Section/overview/ManagedServices.tsx
+++ b/components/Services/Section/overview/ManagedServices.tsx
@@ -9,7 +9,7 @@ const ManagedServices = () => {
 
     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"
+            className="w-[95%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
             style={{color: colors.primaryText}}
         >
             <div>
diff --git a/components/Services/Services.tsx b/components/Services/Services.tsx
index 58868a9..1256b1c 100644
--- a/components/Services/Services.tsx
+++ b/components/Services/Services.tsx
@@ -25,7 +25,11 @@ const Home = () => {
                 <OverviewTabs/>
             </Section>
             <Section style={{backgroundColor: colors.primaryBg}} shadow>
-                <ContactCTA/>
+                <ContactCTA
+                    title="Nichts Passendes gefunden?"
+                    description="Nimm einfach Kontakt mit uns auf – gemeinsam finden wir die passende Lösung für dein Vorhaben."
+                    buttonLabel="Kontakt aufnehmen"
+                />
             </Section>
         </motion.div>
     );
diff --git a/constant/Constant.ts b/constant/Constant.ts
index 3dc375f..b671a48 100644
--- a/constant/Constant.ts
+++ b/constant/Constant.ts
@@ -6,6 +6,11 @@ export const navLinks = [
     },
     {
         id: 2,
+        url: '/about',
+        label: 'Über Uns',
+    },
+    {
+        id: 3,
         url: '/services',
         label: 'Leistungen',
     }
diff --git a/public/images/team/default-avatar.jpg b/public/images/team/default-avatar.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ac2f77385497d36386ddcb0e1386b294d7e919bc
GIT binary patch
literal 14051
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

literal 0
HcmV?d00001

