From 8c05ad29cbe341cfa8c28547295785733f7c6eba Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Sat, 28 Jun 2025 12:01:43 +0000
Subject: [PATCH] Refactor website to use shadcn components

---
 frontend/app/(root)/Home.tsx                  |   45 +
 frontend/app/(root)/layout.tsx                |   37 -
 frontend/app/(root)/page.tsx                  |   10 +-
 .../(root)/sections}/About.tsx                |   54 +-
 frontend/app/(root)/sections/Faq.tsx          |  109 ++
 frontend/app/(root)/sections/Hero.tsx         |   76 +
 frontend/app/(root)/sections/HomeServices.tsx |  115 ++
 .../app/(root)/sections/ProcessSection.tsx    |   88 ++
 .../app/(root)/sections/ReferralSection.tsx   |   60 +
 frontend/app/(root)/sections/TechStack.tsx    |   87 ++
 frontend/app/(root)/sections/WhyUs.tsx        |   69 +
 .../about}/Section/TeamSection.tsx            |   52 +-
 frontend/app/about/layout.tsx                 |   37 -
 frontend/app/about/page.tsx                   |   12 -
 frontend/app/contact/layout.tsx               |   37 -
 frontend/app/contact/page.tsx                 |    7 +
 frontend/app/globals.css                      |   68 +
 frontend/app/layout.tsx                       |   58 +
 frontend/app/legal/imprint/ImprintComp.tsx    |  117 ++
 frontend/app/legal/imprint/page.tsx           |   11 +-
 frontend/app/legal/layout.tsx                 |   38 -
 frontend/app/legal/page.tsx                   |   64 +-
 .../legal/privacy}/PrivacyComp.tsx            |   39 +-
 frontend/app/legal/privacy/page.tsx           |    9 +-
 frontend/app/legal/revocation/page.tsx        |   12 -
 .../app/legal/terms-of-use/TermsOfUseComp.tsx |   98 ++
 frontend/app/legal/terms-of-use/page.tsx      |    9 +-
 frontend/app/services/layout.tsx              |   37 -
 frontend/app/services/page.tsx                |   12 -
 frontend/components.json                      |   21 +
 frontend/components/About/AboutContent.tsx    |   47 -
 .../components/About/Section/AboutHero.tsx    |   19 -
 .../components/About/Section/AboutIntro.tsx   |   68 -
 .../components/About/Section/AboutProcess.tsx |  158 --
 .../About/Section/AboutTimeline.tsx           |   94 --
 frontend/components/CTA/DualCTA.tsx           |   66 +
 frontend/components/Contact/Contact.tsx       |   53 +-
 .../Contact/Section/ContactFormSection.tsx    |  191 +--
 .../Contact/Section/ContactHero.tsx           |   19 -
 .../components/Cookie/CookieConsentBanner.tsx |  128 ++
 frontend/components/Footer/Footer.tsx         |  142 +-
 frontend/components/Helper/SmallHero.tsx      |   53 +-
 frontend/components/Helper/ThemeColors.ts     |   34 -
 frontend/components/Home/Home.tsx             |   45 -
 .../components/Home/Sections/ContactCTA.tsx   |   62 -
 frontend/components/Home/Sections/Hero.tsx    |  100 --
 .../components/Home/Sections/HomeServices.tsx |  105 --
 .../components/Home/Sections/TechStack.tsx    |  139 --
 .../components/Legal/Imprint/ImprintComp.tsx  |  131 --
 frontend/components/Legal/RevocationComp.tsx  |   98 --
 frontend/components/Legal/TermsOfUseComp.tsx  |   99 --
 frontend/components/Navbar/DesktopNav.tsx     |  110 --
 frontend/components/Navbar/MobileNav.tsx      |   62 -
 frontend/components/Navbar/Nav.tsx            |   24 -
 frontend/components/Navbar/Navbar.tsx         |  102 ++
 frontend/components/PulsatingButton.tsx       |  136 ++
 .../Services/Section/OverviewTabs.tsx         |   81 -
 .../Services/Section/ServiceHero.tsx          |   19 -
 .../Services/Section/overview/BugFixing.tsx   |   59 -
 .../Services/Section/overview/Consulting.tsx  |   60 -
 .../Services/Section/overview/Development.tsx |  210 ---
 .../Section/overview/ManagedServices.tsx      |   62 -
 frontend/components/Services/Services.tsx     |   38 -
 .../components/provider/ThemeProvider.tsx     |   50 -
 frontend/components/theme-provider.tsx        |   11 +
 frontend/components/theme-toggle.tsx          |   26 +
 frontend/components/ui/accordion.tsx          |   57 +
 frontend/components/ui/button.tsx             |   57 +
 frontend/components/ui/card.tsx               |   76 +
 frontend/components/ui/dropdown-menu.tsx      |  201 +++
 frontend/components/ui/navigation-menu.tsx    |  128 ++
 frontend/components/ui/sheet.tsx              |  140 ++
 frontend/constant/TechStack.ts                |   49 +
 frontend/lib/utils.ts                         |    6 +
 frontend/package-lock.json                    | 1370 +++++++++++++++--
 frontend/package.json                         |   20 +-
 frontend/tailwind.config.ts                   |   77 +-
 frontend/utils/useThemeColors.ts              |   10 -
 78 files changed, 3858 insertions(+), 2722 deletions(-)
 create mode 100644 frontend/app/(root)/Home.tsx
 delete mode 100644 frontend/app/(root)/layout.tsx
 rename frontend/{components/Home/Sections => app/(root)/sections}/About.tsx (59%)
 create mode 100644 frontend/app/(root)/sections/Faq.tsx
 create mode 100644 frontend/app/(root)/sections/Hero.tsx
 create mode 100644 frontend/app/(root)/sections/HomeServices.tsx
 create mode 100644 frontend/app/(root)/sections/ProcessSection.tsx
 create mode 100644 frontend/app/(root)/sections/ReferralSection.tsx
 create mode 100644 frontend/app/(root)/sections/TechStack.tsx
 create mode 100644 frontend/app/(root)/sections/WhyUs.tsx
 rename frontend/{components/About => app/about}/Section/TeamSection.tsx (62%)
 delete mode 100644 frontend/app/about/layout.tsx
 delete mode 100644 frontend/app/about/page.tsx
 delete mode 100644 frontend/app/contact/layout.tsx
 create mode 100644 frontend/app/layout.tsx
 create mode 100644 frontend/app/legal/imprint/ImprintComp.tsx
 delete mode 100644 frontend/app/legal/layout.tsx
 rename frontend/{components/Legal/Privacy => app/legal/privacy}/PrivacyComp.tsx (77%)
 delete mode 100644 frontend/app/legal/revocation/page.tsx
 create mode 100644 frontend/app/legal/terms-of-use/TermsOfUseComp.tsx
 delete mode 100644 frontend/app/services/layout.tsx
 delete mode 100644 frontend/app/services/page.tsx
 create mode 100644 frontend/components.json
 delete mode 100644 frontend/components/About/AboutContent.tsx
 delete mode 100644 frontend/components/About/Section/AboutHero.tsx
 delete mode 100644 frontend/components/About/Section/AboutIntro.tsx
 delete mode 100644 frontend/components/About/Section/AboutProcess.tsx
 delete mode 100644 frontend/components/About/Section/AboutTimeline.tsx
 create mode 100644 frontend/components/CTA/DualCTA.tsx
 delete mode 100644 frontend/components/Contact/Section/ContactHero.tsx
 create mode 100644 frontend/components/Cookie/CookieConsentBanner.tsx
 delete mode 100644 frontend/components/Helper/ThemeColors.ts
 delete mode 100644 frontend/components/Home/Home.tsx
 delete mode 100644 frontend/components/Home/Sections/ContactCTA.tsx
 delete mode 100644 frontend/components/Home/Sections/Hero.tsx
 delete mode 100644 frontend/components/Home/Sections/HomeServices.tsx
 delete mode 100644 frontend/components/Home/Sections/TechStack.tsx
 delete mode 100644 frontend/components/Legal/Imprint/ImprintComp.tsx
 delete mode 100644 frontend/components/Legal/RevocationComp.tsx
 delete mode 100644 frontend/components/Legal/TermsOfUseComp.tsx
 delete mode 100644 frontend/components/Navbar/DesktopNav.tsx
 delete mode 100644 frontend/components/Navbar/MobileNav.tsx
 delete mode 100644 frontend/components/Navbar/Nav.tsx
 create mode 100644 frontend/components/Navbar/Navbar.tsx
 create mode 100644 frontend/components/PulsatingButton.tsx
 delete mode 100644 frontend/components/Services/Section/OverviewTabs.tsx
 delete mode 100644 frontend/components/Services/Section/ServiceHero.tsx
 delete mode 100644 frontend/components/Services/Section/overview/BugFixing.tsx
 delete mode 100644 frontend/components/Services/Section/overview/Consulting.tsx
 delete mode 100644 frontend/components/Services/Section/overview/Development.tsx
 delete mode 100644 frontend/components/Services/Section/overview/ManagedServices.tsx
 delete mode 100644 frontend/components/Services/Services.tsx
 delete mode 100644 frontend/components/provider/ThemeProvider.tsx
 create mode 100644 frontend/components/theme-provider.tsx
 create mode 100644 frontend/components/theme-toggle.tsx
 create mode 100644 frontend/components/ui/accordion.tsx
 create mode 100644 frontend/components/ui/button.tsx
 create mode 100644 frontend/components/ui/card.tsx
 create mode 100644 frontend/components/ui/dropdown-menu.tsx
 create mode 100644 frontend/components/ui/navigation-menu.tsx
 create mode 100644 frontend/components/ui/sheet.tsx
 create mode 100644 frontend/constant/TechStack.ts
 create mode 100644 frontend/lib/utils.ts
 delete mode 100644 frontend/utils/useThemeColors.ts

diff --git a/frontend/app/(root)/Home.tsx b/frontend/app/(root)/Home.tsx
new file mode 100644
index 0000000..3bb024a
--- /dev/null
+++ b/frontend/app/(root)/Home.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React, {useEffect} from "react";
+import HomeServices from "@/app/(root)/sections/HomeServices";
+import {motion} from "framer-motion";
+import Hero from "@/app/(root)/sections/Hero";
+import About from "@/app/(root)/sections/About";
+import ProcessSection from "@/app/(root)/sections/ProcessSection";
+import WhyUs from "@/app/(root)/sections/WhyUs";
+import Faq from "@/app/(root)/sections/Faq";
+import ReferralSection from "@/app/(root)/sections/ReferralSection";
+
+const Home = () => {
+    useEffect(() => {
+        const scrollToId = localStorage.getItem('scrollToId')
+        if (scrollToId) {
+            localStorage.removeItem('scrollToId')
+            const el = document.getElementById(scrollToId)
+            if (el) {
+                setTimeout(() => {
+                    el.scrollIntoView({behavior: 'smooth', block: 'start'})
+                }, 200)
+            }
+        }
+    }, [])
+
+    return (
+        <motion.div
+            initial={{opacity: 0}}
+            animate={{opacity: 1}}
+            transition={{duration: 0.7, ease: "easeOut"}}
+            className="overflow-hidden"
+        >
+            <Hero/>
+            <HomeServices/>
+            <About/>
+            <ProcessSection/>
+            <WhyUs/>
+            <ReferralSection/>
+            <Faq/>
+        </motion.div>
+    );
+};
+
+export default Home;
diff --git a/frontend/app/(root)/layout.tsx b/frontend/app/(root)/layout.tsx
deleted file mode 100644
index 518d45e..0000000
--- a/frontend/app/(root)/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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: "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/frontend/app/(root)/page.tsx b/frontend/app/(root)/page.tsx
index f6440ee..eaa28e2 100644
--- a/frontend/app/(root)/page.tsx
+++ b/frontend/app/(root)/page.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import Home from "@/components/Home/Home";
+import Home from "@/app/(root)/Home";
 
 const HomePage = () => {
-  return (
-    <div>
-      <Home />
-    </div>
-  );
+    return (
+        <Home/>
+    );
 };
 
 export default HomePage;
\ No newline at end of file
diff --git a/frontend/components/Home/Sections/About.tsx b/frontend/app/(root)/sections/About.tsx
similarity index 59%
rename from frontend/components/Home/Sections/About.tsx
rename to frontend/app/(root)/sections/About.tsx
index 32587b0..c7b53ad 100644
--- a/frontend/components/Home/Sections/About.tsx
+++ b/frontend/app/(root)/sections/About.tsx
@@ -1,23 +1,21 @@
 'use client';
 
-// 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 transition-colors duration-700 ease-in-out"
-            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
-        >
+            id="about"
+            className="relative w-full py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
             <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 transition-colors duration-700 ease-in-out"
+                        className="text-3xl md:text-4xl font-bold mb-1 text-left"
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.4}}
                     >
                         Über uns
                     </motion.h2>
@@ -33,33 +31,43 @@ const About = () => {
                     {/* 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}}
+                            className="text-base md:text-lg leading-relaxed text-muted-foreground"
                             initial={{opacity: 0, y: 20}}
                             whileInView={{opacity: 1, y: 0}}
                             viewport={{once: true}}
                             transition={{duration: 0.5, delay: 0.2}}
                         >
-                            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.
+                            Wir sind Rhein-Software – ein Team, das sich auf individuelle Softwarelösungen spezialisiert
+                            hat. Unsere Anwendungen sind technisch solide, skalierbar und durchdacht – gebaut für
+                            langfristigen Erfolg.
                         </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}}
+                            className="mt-6 text-base md:text-lg leading-relaxed text-muted-foreground"
                             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. Gemeinsam
+                            realisieren wir digitale Produkte, die wirklich passen.
+                        </motion.p>
+
+                        <motion.p
+                            className="mt-6 text-base md:text-lg leading-relaxed text-muted-foreground"
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.5, delay: 0.4}}
+                        >
+                            Egal ob App-Entwicklung, interne Tools, Web-Plattformen oder komplexe Schnittstellen – wir
+                            entwickeln Softwarelösungen, die intuitiv, effizient und exakt auf deine Anforderungen
+                            zugeschnitten sind.
                         </motion.p>
                     </div>
 
-                    {/* CTA Button */}
+                    {/* CTA Placeholder */}
                     <motion.div
                         className="mt-10 flex justify-end"
                         initial={{opacity: 0, y: 10}}
@@ -67,13 +75,7 @@ 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>*/}
+                        {/* CTA button can go here */}
                     </motion.div>
                 </div>
             </div>
diff --git a/frontend/app/(root)/sections/Faq.tsx b/frontend/app/(root)/sections/Faq.tsx
new file mode 100644
index 0000000..529d01b
--- /dev/null
+++ b/frontend/app/(root)/sections/Faq.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger,} from "@/components/ui/accordion"
+import {motion} from "framer-motion"
+
+const faqItems = [
+    {
+        id: "dauer",
+        question: "Wie lange dauert es, bis meine Website oder App online ist?",
+        answers: [
+            "Das hängt vom Umfang des Projekts ab – einfache Websites oder MVPs sind meist innerhalb von 4–6 Wochen realisierbar.",
+            "Komplexere Anwendungen oder individuelle Features benötigen entsprechend mehr Zeit. Wir geben dir zu Beginn eine realistische Einschätzung.",
+        ],
+    },
+    {
+        id: "inhalte",
+        question: "Muss ich Texte und Bilder selbst liefern?",
+        answers: [
+            "Wenn du Inhalte hast, bauen wir diese gerne ein. Falls nicht, unterstützen wir dich mit Textvorschlägen, Icons oder lizenzfreien Bildern.",
+            "Bei Apps helfen wir dir auch bei der Strukturierung und Formulierung von App-Inhalten, z. B. Onboarding-Texte oder UI-Texte.",
+        ],
+    },
+    {
+        id: "technik",
+        question: "Ich habe keine Ahnung von Technik – funktioniert das trotzdem?",
+        answers: [
+            "Auf jeden Fall. Wir begleiten dich Schritt für Schritt und erklären alles verständlich – ganz ohne Fachkenntnisse..",
+            "Du bekommst eine Lösung, die für dich funktioniert – egal ob Website, App oder Backend.",
+        ],
+    },
+    {
+        id: "änderungen",
+        question: "Was ist, wenn ich im Nachhinein etwas ändern möchte?",
+        answers: [
+            "Kein Problem. Du kannst jederzeit neue Inhalte, Features oder Anpassungen beauftragen.",
+            "Auf Wunsch übernehmen wir auch die laufende Wartung oder stellen dir ein CMS bzw. Admin-Interface bereit.",
+        ],
+    },
+    {
+        id: "seo",
+        question: "Wird meine Website oder App auch für Suchmaschinen optimiert?",
+        answers: [
+            "Ja. Jede Website wird suchmaschinenfreundlich aufgebaut – inkl. technischer SEO-Basics wie saubere Struktur, schnelle Ladezeit und mobile Optimierung.",
+            "Bei Apps unterstützen wir dich z.B. auch mit App Store Optimierung (ASO), damit du besser gefunden wirst.",
+        ],
+    },
+]
+
+export default function Faq() {
+    return (
+        <section id="faq" className="py-24 px-4 bg-background text-foreground">
+            <div className="max-w-3xl mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-2 text-center"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Fragen? Antworten.
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 mb-6 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}}
+                />
+
+                <motion.p
+                    className="text-sm md:text-base mb-10 text-muted-foreground text-center"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    Hier beantworten wir häufige Fragen rund um Web- und App-Projekte – klar gegliedert nach Themen.
+                    Wenn du darüber hinaus etwas wissen möchtest, melde dich gerne persönlich bei uns.
+                </motion.p>
+
+                <motion.div
+                    className="text-sm md:text-base mb-10 text-muted-foreground text-center"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.4}}
+                >
+                    <Accordion
+                        type="single"
+                        collapsible
+                        className="w-full"
+                    >
+                        {faqItems.map((item, index) => (
+                            <AccordionItem key={index} value={`faq-${index}`}>
+                                <AccordionTrigger>{item.question}</AccordionTrigger>
+                                <AccordionContent className="flex flex-col gap-4 text-left">
+                                    {item.answers.map((text, idx) => (
+                                        <p key={idx}>{text}</p>
+                                    ))}
+                                </AccordionContent>
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
+                </motion.div>
+            </div>
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/frontend/app/(root)/sections/Hero.tsx b/frontend/app/(root)/sections/Hero.tsx
new file mode 100644
index 0000000..631673e
--- /dev/null
+++ b/frontend/app/(root)/sections/Hero.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import {motion} from 'framer-motion';
+import Image from 'next/image';
+import {Typewriter} from 'react-simple-typewriter';
+import PulsatingButton from "@/components/PulsatingButton";
+
+const Hero = () => {
+    return (
+        <section id="start" className="relative w-full h-screen overflow-hidden">
+            {/* Background */}
+            <div className="absolute inset-0 z-0">
+                <Image
+                    src="/images/home_hero.jpg"
+                    alt="Rhein river aerial view"
+                    fill
+                    className="object-cover scale-105 blur-sm"
+                    priority
+                />
+                <div className="absolute inset-0 bg-black/60"/>
+            </div>
+
+            {/* Content */}
+            <div
+                className="relative z-10 flex flex-col justify-center items-start h-full w-[90%] sm:w-[80%] max-w-6xl mx-auto text-white">
+                <motion.h1
+                    className="text-3xl sm:text-5xl font-bold mb-6 leading-tight"
+                    initial={{opacity: 0, y: 40}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6}}
+                >
+                    Digitale Lösungen, <br/> die wirklich passen.
+                </motion.h1>
+
+                <motion.p
+                    className="text-lg sm:text-xl text-gray-300 mb-6 max-w-2xl"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6, delay: 0.2}}
+                >
+                    Wir entwickeln individuelle Softwarelösungen für Unternehmen und Startups.
+                </motion.p>
+
+                <motion.div
+                    className="text-xl font-semibold text-white"
+                    initial={{opacity: 0}}
+                    animate={{opacity: 1}}
+                    transition={{delay: 0.6}}
+                >
+                    <Typewriter
+                        words={['Webdesign', 'App-Entwicklung', 'Interne Tools']}
+                        loop={true}
+                        cursor
+                        cursorStyle="_"
+                        typeSpeed={60}
+                        deleteSpeed={40}
+                        delaySpeed={2000}
+                    />
+                </motion.div>
+
+                <div className="mt-10 relative flex items-center justify-center">
+                    <PulsatingButton
+                        label="Jetzt Kontakt aufnehmen"
+                        href="/contact"
+                        color="#2563eb" // Tailwind blue-600
+                        width={256}
+                        pulse
+                    />
+                </div>
+
+            </div>
+        </section>
+    );
+};
+
+export default Hero;
diff --git a/frontend/app/(root)/sections/HomeServices.tsx b/frontend/app/(root)/sections/HomeServices.tsx
new file mode 100644
index 0000000..063c2e3
--- /dev/null
+++ b/frontend/app/(root)/sections/HomeServices.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import {motion} from 'framer-motion';
+import {ChevronRight} from 'lucide-react';
+import Link from 'next/link';
+
+const services = [
+    {
+        title: 'Webdesign',
+        description: 'Moderne Websites, die Vertrauen schaffen und verkaufen.',
+        bullets: [
+            'Maßgeschneidertes Design',
+            'Klare Struktur & überzeugende Inhalte',
+            'Nutzerführung mit System & Strategie',
+            'Für alle Geräte optimiert',
+        ],
+    },
+    {
+        title: 'App-Entwicklung',
+        description: 'Skalierbare Apps für Web und Mobile – von der Idee bis zum Launch.',
+        bullets: [
+            'Plattformübergreifend mit modernen Technologien',
+            'Backend & API-Entwicklung inklusive',
+            'Individuelle Funktionen & Logik',
+            'Stabil, performant & wartbar',
+        ],
+    },
+    {
+        title: 'Interne Tools',
+        description: 'Digitale Werkzeuge, die Prozesse vereinfachen und Zeit sparen.',
+        bullets: [
+            'Prozessdigitalisierung & Automatisierung',
+            'Zugeschnitten auf eure Workflows',
+            'Skalierbar & zukunftssicher',
+            'Intuitiv & effizient bedienbar',
+        ],
+    },
+];
+
+const HomeServices = () => {
+    return (
+        <section id="services"
+                 className="w-full py-24 bg-background text-foreground">
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-1 text-left"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Leistungen
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 mb-10 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="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    {services.map((service, index) => (
+                        <motion.div
+                            key={service.title}
+                            className="flex flex-col justify-between h-full p-6 rounded-3xl border bg-muted text-foreground"
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.4, delay: index * 0.1}}
+                            whileHover={{
+                                scale: 1.03,
+                                boxShadow: '0px 12px 30px rgba(0, 0, 0, 0.08)',
+                            }}
+                        >
+                            <div>
+                                <h3 className="text-xl font-semibold mb-2">{service.title}</h3>
+                                <p className="text-muted-foreground mb-4">{service.description}</p>
+                                <ul className="space-y-3">
+                                    {service.bullets.map((point, i) => (
+                                        <li key={i} className="flex items-start gap-2">
+                                            <ChevronRight className="w-4 h-4 text-primary mt-1"/>
+                                            <span className="text-sm text-foreground">{point}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+
+                <motion.div
+                    className="mt-12 text-center"
+                    initial={{opacity: 0}}
+                    whileInView={{opacity: 1}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.3}}
+                >
+                    <p className="text-muted-foreground mb-4 text-base md:text-lg">
+                        Du möchtest mehr über unsere Leistungen erfahren oder hast ein konkretes Projekt im Kopf?
+                    </p>
+                    <Link
+                        href="/contact"
+                        className="text-sm font-semibold text-primary hover:underline"
+                    >
+                        Jetzt Kontakt aufnehmen →
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
+    );
+};
+
+export default HomeServices;
\ No newline at end of file
diff --git a/frontend/app/(root)/sections/ProcessSection.tsx b/frontend/app/(root)/sections/ProcessSection.tsx
new file mode 100644
index 0000000..912631c
--- /dev/null
+++ b/frontend/app/(root)/sections/ProcessSection.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import React from 'react';
+import {VerticalTimeline, VerticalTimelineElement} from 'react-vertical-timeline-component';
+import {FaRocket, FaLightbulb, FaCode, FaPaperPlane} from 'react-icons/fa';
+import 'react-vertical-timeline-component/style.min.css';
+import {motion} from 'framer-motion';
+
+const steps = [
+    {
+        title: 'Kick-Off & Strategie',
+        description:
+            'In einem gemeinsamen Auftakt klären wir deine Ziele, Zielgruppen und Herausforderungen. Daraus entsteht ein strukturierter Plan als Basis für alles Weitere.',
+        icon: <FaRocket/>,
+    },
+    {
+        title: 'Konzept & Inhalte',
+        description:
+            'Wir erarbeiten eine klare Struktur und passende Inhalte – abgestimmt auf deine Botschaft und deine Nutzer. So entsteht ein roter Faden für Design und Umsetzung.',
+        icon: <FaLightbulb/>,
+    },
+    {
+        title: 'Design & Entwicklung',
+        description:
+            'Wir gestalten ein modernes Design und setzen es technisch um. Durch regelmäßige Feedback-Schleifen bist du jederzeit im Prozess eingebunden.',
+        icon: <FaCode/>,
+    },
+    {
+        title: 'Go-Live',
+        description:
+            'Nach erfolgreichen Tests geht dein Projekt live. Auch danach begleiten wir dich weiter – für einen reibungslosen Betrieb und mögliche Weiterentwicklungen.',
+        icon: <FaPaperPlane/>,
+    },
+];
+
+const ProcessSection = () => {
+    return (
+        <section id="process" className="w-full py-24 bg-background text-foreground">
+            <div className="max-w-6xl px-6 md:px-10 mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-1"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Unser Prozess
+                </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}}
+                />
+
+                <VerticalTimeline
+                    lineColor="#eab308"
+                    animate={true}
+
+                >
+                    {steps.map((step, idx) => (
+                        <VerticalTimelineElement
+                            key={idx}
+                            contentStyle={{
+                                background: 'hsl(var(--muted))',
+                                color: 'hsl(var(--foreground))',
+                                border: '1px solid hsl(var(--border))',
+                            }}
+                            contentArrowStyle={{borderRight: '7px solid hsl(var(--muted))'}}
+                            iconStyle={{
+                                background: '#eab308',
+                                color: '#fff',
+                            }}
+                            icon={step.icon}
+                        >
+                            <h3 className="text-xl font-semibold">{step.title}</h3>
+                            <p className="text-muted-foreground mt-2">{step.description}</p>
+                        </VerticalTimelineElement>
+                    ))}
+                </VerticalTimeline>
+            </div>
+        </section>
+    );
+};
+
+export default ProcessSection;
diff --git a/frontend/app/(root)/sections/ReferralSection.tsx b/frontend/app/(root)/sections/ReferralSection.tsx
new file mode 100644
index 0000000..8543acf
--- /dev/null
+++ b/frontend/app/(root)/sections/ReferralSection.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import {motion} from 'framer-motion'
+import Link from 'next/link'
+
+export default function ReferralSection() {
+    return (
+        <section id="referral" className="py-24 px-4 bg-background/80 text-foreground">
+            <div className="max-w-3xl mx-auto text-center">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-2"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Weiterempfehlen lohnt sich
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 mb-6 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}}
+                />
+
+                <motion.div
+                    className="text-sm md:text-base mb-8 text-muted-foreground space-y-4"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    <p>
+                        Du empfiehlst uns weiter und dein Kontakt wird Kunde?
+                        Als Dank erhältst du <strong>10 % Rabatt</strong> auf dein nächstes Projekt bei uns.
+                    </p>
+                    <p>
+                        Einfach, fair und lohnend – ideal für alle, die mit unserer Arbeit zufrieden sind.
+                    </p>
+                </motion.div>
+
+                <motion.div
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <Link
+                        href="/contact"
+                        className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-semibold transition"
+                    >
+                        Jetzt empfehlen
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
+    )
+}
diff --git a/frontend/app/(root)/sections/TechStack.tsx b/frontend/app/(root)/sections/TechStack.tsx
new file mode 100644
index 0000000..f4782e7
--- /dev/null
+++ b/frontend/app/(root)/sections/TechStack.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import Image from 'next/image';
+import {motion} from 'framer-motion';
+import {techStack} from "@/constant/TechStack";
+
+const TechStack = () => {
+    return (
+        <section className="w-full py-20 bg-background text-foreground transition-colors duration-700 ease-in-out">
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-1 text-left"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Technologien
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 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}}
+                />
+
+                <motion.p
+                    className="text-sm md:text-base mb-10 text-muted-foreground"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.3, delay: 0.2}}
+                >
+                    Mit diesen Technologien realisieren wir moderne, leistungsstarke Softwarelösungen.
+                </motion.p>
+
+                <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}/>
+                    ))}
+                </div>
+                <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}/>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+const TechCard = ({
+                      group,
+                      delay,
+                  }: {
+    group: { category: string; items: { id: string; label: string }[] };
+    delay: number;
+}) => (
+    <motion.div
+        className="p-4 rounded-lg border bg-muted shadow-md text-foreground"
+        initial={{opacity: 0, y: 20}}
+        whileInView={{opacity: 1, y: 0}}
+        whileHover={{scale: 1.03, boxShadow: '0 10px 20px rgba(0,0,0,0.1)'}}
+        viewport={{once: true}}
+        transition={{duration: 0.4, delay}}
+    >
+        <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-muted-foreground">{label}</span>
+                </div>
+            ))}
+        </div>
+    </motion.div>
+);
+
+export default TechStack;
diff --git a/frontend/app/(root)/sections/WhyUs.tsx b/frontend/app/(root)/sections/WhyUs.tsx
new file mode 100644
index 0000000..bc9e5ab
--- /dev/null
+++ b/frontend/app/(root)/sections/WhyUs.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import {CheckCircle} from 'lucide-react';
+import {motion} from 'framer-motion';
+import Link from 'next/link';
+import Image from 'next/image';
+
+const points = [
+    'Fertigstellung in 4–8 Wochen',
+    'Fester Ansprechpartner von Anfang bis Ende',
+    'Struktur & Klarheit',
+    'Starkes Alleinstellungsmerkmal',
+    'Zuverlässiges Team mit Weitblick',
+];
+
+export default function WhyUs() {
+    return (
+        <section id="whyus" className="py-24 px-4 bg-background text-foreground">
+            <div className="max-w-xl mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-1 text-center"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Warum wir?
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 mb-10 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}}
+                />
+
+                <motion.div
+                    className="rounded-2xl p-8 md:p-10 bg-gradient-to-br from-[#1e3a8a] to-[#2563eb] text-white shadow-xl relative overflow-hidden"
+                    initial={{opacity: 0, y: 40}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5}}
+                >
+                    {/* Logo */}
+                    <div className="mb-6">
+                        <Image src="/logo.svg" alt="Rhein Software Logo" width={120} height={32}/>
+                    </div>
+
+                    <ul className="space-y-4 mb-8">
+                        {points.map((point, index) => (
+                            <li key={index} className="flex items-start gap-2">
+                                <CheckCircle className="text-white w-5 h-5 flex-shrink-0 mt-0.5"/>
+                                <span>{point}</span>
+                            </li>
+                        ))}
+                    </ul>
+
+                    <Link
+                        href="/contact"
+                        className="inline-block bg-white text-blue-700 font-semibold px-6 py-3 rounded-full text-center shadow-md hover:bg-slate-100 transition"
+                    >
+                        Kostenlose Beratung anfragen
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
+    );
+}
diff --git a/frontend/components/About/Section/TeamSection.tsx b/frontend/app/about/Section/TeamSection.tsx
similarity index 62%
rename from frontend/components/About/Section/TeamSection.tsx
rename to frontend/app/about/Section/TeamSection.tsx
index 1f7c693..80fbe72 100644
--- a/frontend/components/About/Section/TeamSection.tsx
+++ b/frontend/app/about/Section/TeamSection.tsx
@@ -1,33 +1,30 @@
 'use client';
 
-import React from "react";
-import Image from "next/image";
-import {motion} from "framer-motion";
-import {useThemeColors} from "@/utils/useThemeColors";
+import React from 'react';
+import Image from 'next/image';
+import {motion} from 'framer-motion';
 
 const team = [
     {
-        name: "Thatsaphorn",
-        role: "Gründer & Entwickler",
-        picture: "",
+        name: 'Thatsaphorn',
+        role: 'Gründer & Entwickler',
+        picture: '',
     },
     {
-        name: "Anonym",
-        role: "Vertrieb",
-        picture: "",
+        name: 'Anonym',
+        role: 'Vertrieb',
+        picture: '',
     },
 ];
 
-const fallbackImage = "/images/team/default-avatar.jpg";
+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">
+        <section
+            className="w-full px-6 sm:px-12 py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
             <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}}
@@ -35,6 +32,7 @@ const TeamSection = () => {
             >
                 Das Team
             </motion.h2>
+
             <motion.div
                 className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
                 initial={{opacity: 0, x: -20}}
@@ -45,11 +43,10 @@ const TeamSection = () => {
 
             <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)}`}
+                    className={`grid gap-8 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-${Math.min(
+                        team.length,
+                        4
+                    )}`}
                 >
                     {team.map((member, idx) => (
                         <motion.div
@@ -59,14 +56,11 @@ const TeamSection = () => {
                             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}}
+                            className="flex flex-col items-center text-center rounded-xl border border-border shadow-md hover:shadow-lg transition-all p-6 bg-muted"
                         >
                             <motion.div
                                 whileHover={{scale: 1.05}}
-                                transition={{type: "spring", stiffness: 300, damping: 20}}
+                                transition={{type: 'spring', stiffness: 300, damping: 20}}
                                 className="w-28 h-28 relative mb-4"
                             >
                                 <Image
@@ -78,12 +72,10 @@ const TeamSection = () => {
                                 />
                             </motion.div>
 
-                            <div className="h-px w-8 bg-gray-300 dark:bg-gray-600 my-4"/>
+                            <div className="h-px w-8 bg-border 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}}>
+                            <div className="text-lg font-semibold">{member.name}</div>
+                            <div className="text-sm mt-1 text-muted-foreground">
                                 {member.role}
                             </div>
                         </motion.div>
diff --git a/frontend/app/about/layout.tsx b/frontend/app/about/layout.tsx
deleted file mode 100644
index ffa5db9..0000000
--- a/frontend/app/about/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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/frontend/app/about/page.tsx b/frontend/app/about/page.tsx
deleted file mode 100644
index 5fcae6d..0000000
--- a/frontend/app/about/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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/frontend/app/contact/layout.tsx b/frontend/app/contact/layout.tsx
deleted file mode 100644
index c324c2d..0000000
--- a/frontend/app/contact/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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: "Kontakt | 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/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx
index ed96214..c7b9388 100644
--- a/frontend/app/contact/page.tsx
+++ b/frontend/app/contact/page.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
 import Contact from "@/components/Contact/Contact";
+import type {Metadata} from "next";
+
+export async function generateMetadata(): Promise<Metadata> {
+    return {
+        title: "Kontakt | Rhein Software",
+    };
+}
 
 const ContactPage = () => {
     return (
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 6ffe0ca..2dcd280 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -25,3 +25,71 @@
 .animate-float {
     animation: float 3.5s ease-in-out infinite;
 }
+
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
new file mode 100644
index 0000000..908b9f5
--- /dev/null
+++ b/frontend/app/layout.tsx
@@ -0,0 +1,58 @@
+import type {Metadata} from "next";
+import "./globals.css";
+
+import Footer from "@/components/Footer/Footer";
+import {ThemeProvider} from "@/components/theme-provider";
+import React from "react";
+import CookieConsentBanner from "@/components/Cookie/CookieConsentBanner";
+import Navbar from "@/components/Navbar/Navbar";
+
+export const metadata: Metadata = {
+    title: "Rhein Software – Maßgeschneiderte Softwarelösung",
+    description: "Rhein Software bietet individuelle Softwarelösungen für moderne Unternehmen.",
+    keywords: ["Webentwicklung", "Software", "Next.js", "Full Stack", "Rhein Software"],
+    authors: [{name: "Rhein Software"}],
+    creator: "Rhein Software",
+    robots: "index, follow",
+    openGraph: {
+        title: "Rhein Software – Maßgeschneiderte Softwarelösung",
+        description: "Individuelle Softwarelösungen für Unternehmen mit Fokus auf Qualität und Performance.",
+        url: "https://www.rhein-software.dev",
+        siteName: "Rhein Software",
+        locale: "de_DE",
+        type: "website",
+        images: [
+            {
+                url: "https://www.rhein-software.dev/og-image.jpg",
+                width: 1200,
+                height: 630,
+                alt: "Rhein Software – Individuelle Softwarelösung",
+            },
+        ],
+    },
+};
+
+export default function RootLayout({
+                                       children,
+                                   }: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="de" suppressHydrationWarning>
+        <body className="antialiased">
+        <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            // disableTransitionOnChange
+        >
+            <Navbar/>
+            <main>
+                {children}
+            </main>
+            <Footer/>
+        </ThemeProvider>
+        <CookieConsentBanner/>
+        </body>
+        </html>
+    );
+}
diff --git a/frontend/app/legal/imprint/ImprintComp.tsx b/frontend/app/legal/imprint/ImprintComp.tsx
new file mode 100644
index 0000000..ed472bb
--- /dev/null
+++ b/frontend/app/legal/imprint/ImprintComp.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import {motion} from "framer-motion";
+
+const fadeInUp = {
+    hidden: {opacity: 0, y: 30},
+    visible: (i: number) => ({
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.6,
+            delay: i * 0.2,
+            ease: "easeOut",
+        },
+    }),
+};
+
+const ImprintComp = () => {
+    const sections = [
+        {
+            title: "Impressum",
+            content: (
+                <>
+                    Thatsaphorn Atchariyaphap<br/>
+                    Rhein-Software (Einzelunternehmer)<br/>
+                    Mühlenstrasse 13<br/>
+                    79664 Wehr
+                </>
+            ),
+        },
+        {
+            title: "Kontakt",
+            content: (
+                <>
+                    Telefon: +49 (0) 151 24003632<br/>
+                    E-Mail:{" "}
+                    <a
+                        href="mailto:contact@rhein-software.dev"
+                        className="underline text-primary"
+                    >
+                        contact@rhein-software.dev
+                    </a>
+                </>
+            ),
+        },
+        {
+            title: "EU-Streitschlichtung",
+            content: (
+                <>
+                    Die Europäische Kommission stellt eine Plattform zur
+                    Online-Streitbeilegung (OS) bereit:{" "}
+                    <a
+                        href="https://ec.europa.eu/consumers/odr/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline text-primary"
+                    >
+                        https://ec.europa.eu/consumers/odr/
+                    </a>
+                    .<br/>
+                    Unsere E-Mail-Adresse finden Sie oben im Impressum.
+                </>
+            ),
+        },
+        {
+            title: "Verbraucherstreitbeilegung / Universalschlichtungsstelle",
+            content: (
+                <>
+                    Wir sind nicht bereit oder verpflichtet, an
+                    Streitbeilegungsverfahren vor einer
+                    Verbraucherschlichtungsstelle teilzunehmen.
+                </>
+            ),
+        },
+    ];
+
+    return (
+        <div className="overflow-hidden bg-background text-foreground">
+            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12 space-y-10 text-base leading-relaxed">
+                {sections.map((section, i) => (
+                    <motion.div
+                        key={section.title}
+                        custom={i}
+                        initial="hidden"
+                        whileInView="visible"
+                        viewport={{once: true, amount: 0.2}}
+                        variants={fadeInUp}
+                    >
+                        <h2 className="text-2xl font-bold mb-4">{section.title}</h2>
+                        <div className="space-y-4">{section.content}</div>
+                    </motion.div>
+                ))}
+
+                <motion.p
+                    className="text-sm text-muted-foreground"
+                    custom={4}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{once: true, amount: 0.2}}
+                    variants={fadeInUp}
+                >
+                    Quelle:{" "}
+                    <a
+                        href="https://www.e-recht24.de"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline"
+                    >
+                        www.e-recht24.de
+                    </a>
+                </motion.p>
+            </div>
+        </div>
+    );
+};
+
+export default ImprintComp;
\ No newline at end of file
diff --git a/frontend/app/legal/imprint/page.tsx b/frontend/app/legal/imprint/page.tsx
index 47a23f8..c483102 100644
--- a/frontend/app/legal/imprint/page.tsx
+++ b/frontend/app/legal/imprint/page.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
-import ImprintComp from "@/components/Legal/Imprint/ImprintComp";
+import ImprintComp from "@/app/legal/imprint/ImprintComp";
+import type {Metadata} from "next";
+
+export async function generateMetadata(): Promise<Metadata> {
+    return {
+        title: "Impressum | Rhein Software",
+    };
+}
 
 const ImprintPage = () => {
     return (
         <div>
-            <ImprintComp />
+            <ImprintComp/>
         </div>
     );
 };
diff --git a/frontend/app/legal/layout.tsx b/frontend/app/legal/layout.tsx
deleted file mode 100644
index e40ea22..0000000
--- a/frontend/app/legal/layout.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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: "Rechtliches | 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/frontend/app/legal/page.tsx b/frontend/app/legal/page.tsx
index c6e4b8c..2b0a504 100644
--- a/frontend/app/legal/page.tsx
+++ b/frontend/app/legal/page.tsx
@@ -1,10 +1,60 @@
-import React from 'react';
+'use client'
 
-const LegalPage = () => {
+import Link from 'next/link'
+import {motion} from 'framer-motion'
+import SmallHero from '@/components/Helper/SmallHero'
+import {Card, CardContent} from '@/components/ui/card'
+
+const legalLinks = [
+    {
+        label: 'Impressum',
+        href: '/legal/imprint',
+    },
+    {
+        label: 'Datenschutz',
+        href: '/legal/privacy',
+    },
+    {
+        label: 'Widerrufsrecht',
+        href: '/legal/revocation',
+    },
+    {
+        label: 'Nutzungsbedingungen',
+        href: '/legal/terms-of-use',
+    },
+]
+
+export default function LegalOverviewPage() {
     return (
-        <div>
-        </div>
-    );
-};
+        <>
+            <SmallHero
+                title="Rechtliches"
+                subtitle="Alle rechtlich relevanten Informationen auf einen Blick."
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
 
-export default LegalPage;
\ No newline at end of file
+            <section className="px-6 sm:px-12 py-16 max-w-6xl mx-auto">
+                <motion.div
+                    className="grid grid-cols-1 sm:grid-cols-2 gap-6"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    {legalLinks.map(({label, href}) => (
+                        <Card key={href} className="hover:shadow-md transition-shadow">
+                            <CardContent className="p-6">
+                                <Link
+                                    href={href}
+                                    className="text-primary font-medium text-lg hover:underline"
+                                >
+                                    {label}
+                                </Link>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </motion.div>
+            </section>
+        </>
+    )
+}
diff --git a/frontend/components/Legal/Privacy/PrivacyComp.tsx b/frontend/app/legal/privacy/PrivacyComp.tsx
similarity index 77%
rename from frontend/components/Legal/Privacy/PrivacyComp.tsx
rename to frontend/app/legal/privacy/PrivacyComp.tsx
index 3b48f2b..2b669ac 100644
--- a/frontend/components/Legal/Privacy/PrivacyComp.tsx
+++ b/frontend/app/legal/privacy/PrivacyComp.tsx
@@ -1,8 +1,5 @@
 "use client";
 
-import React, {useContext} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
 import {motion} from "framer-motion";
 
 const fadeInUp = {
@@ -19,9 +16,6 @@ const fadeInUp = {
 };
 
 const PrivacyComp = () => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
-
     const sections = [
         {
             title: "1. Datenschutz auf einen Blick",
@@ -56,16 +50,12 @@ const PrivacyComp = () => {
                         Mühlenstrasse 13
                         <br/>
                         79664 Wehr
-                        <br/><br/>
+                        <br/>
+                        <br/>
                         Telefon: +49 (0) 151 24003632
                         <br/>
-                        E-Mail:{" "}
-                        <a
-                            href="mailto:contact@rhein-software.dev"
-                            className="underline text-blue-500"
-                        >
-                            contact@rhein-software.dev
-                        </a>
+                        E-Mail: <a href="mailto:contact@rhein-software.dev"
+                                   className="underline text-primary">contact@rhein-software.dev</a>
                     </p>
                 </>
             ),
@@ -102,27 +92,16 @@ const PrivacyComp = () => {
         {
             title: "Quelle",
             content: (
-                <p className="text-sm text-gray-500">
-                    Quelle:{" "}
-                    <a
-                        href="https://www.e-recht24.de"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="underline"
-                    >
-                        www.e-recht24.de
-                    </a>
+                <p className="text-sm text-muted-foreground">
+                    Quelle: <a href="https://www.e-recht24.de" target="_blank" rel="noopener noreferrer"
+                               className="underline">www.e-recht24.de</a>
                 </p>
             ),
         },
     ];
 
     return (
-        <div
-            className="overflow-hidden transition-colors duration-500"
-            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
-        >
-            {/* Privacy Content */}
+        <div className="overflow-hidden bg-background text-foreground">
             <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12 space-y-10 text-base leading-relaxed">
                 {sections.map((section, i) => (
                     <motion.div
@@ -142,4 +121,4 @@ const PrivacyComp = () => {
     );
 };
 
-export default PrivacyComp;
+export default PrivacyComp;
\ No newline at end of file
diff --git a/frontend/app/legal/privacy/page.tsx b/frontend/app/legal/privacy/page.tsx
index 28d36a7..4102ae8 100644
--- a/frontend/app/legal/privacy/page.tsx
+++ b/frontend/app/legal/privacy/page.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import PrivacyComp from "@/components/Legal/Privacy/PrivacyComp";
+import PrivacyComp from "@/app/legal/privacy/PrivacyComp";
+import type {Metadata} from "next";
+
+export async function generateMetadata(): Promise<Metadata> {
+    return {
+        title: "Datenschutz | Rhein Software",
+    };
+}
 
 const PrivacyPage = () => {
     return (
diff --git a/frontend/app/legal/revocation/page.tsx b/frontend/app/legal/revocation/page.tsx
deleted file mode 100644
index 4560fc2..0000000
--- a/frontend/app/legal/revocation/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import RevocationComp from "@/components/Legal/RevocationComp";
-
-const RevocationPage = () => {
-    return (
-        <div>
-            <RevocationComp />
-        </div>
-    );
-};
-
-export default RevocationPage;
\ No newline at end of file
diff --git a/frontend/app/legal/terms-of-use/TermsOfUseComp.tsx b/frontend/app/legal/terms-of-use/TermsOfUseComp.tsx
new file mode 100644
index 0000000..48f120a
--- /dev/null
+++ b/frontend/app/legal/terms-of-use/TermsOfUseComp.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import SmallHero from '@/components/Helper/SmallHero';
+import React from 'react';
+import {motion} from 'framer-motion';
+
+const TermsOfUseComp = () => {
+    return (
+        <div className="overflow-hidden bg-background text-foreground">
+            {/* Hero Section */}
+            <div className="mt-[10vh]">
+                <SmallHero
+                    title="AGB"
+                    subtitle=""
+                    backgroundImage="/images/contact.png"
+                />
+            </div>
+
+            {/* Contact Form */}
+            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12">
+                <motion.h2
+                    className="text-2xl md:text-3xl font-bold text-center"
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.6}}
+                >
+                    Schreib uns eine Nachricht
+                </motion.h2>
+
+                <motion.p
+                    className="text-center mt-3 text-muted-foreground"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Wir melden uns schnellstmöglich bei dir!
+                </motion.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) => (
+                            <motion.div
+                                key={index}
+                                initial={{opacity: 0, y: 10}}
+                                whileInView={{opacity: 1, y: 0}}
+                                viewport={{once: true}}
+                                transition={{duration: 0.5, delay: index * 0.2}}
+                            >
+                                <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 border border-border bg-card text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                                />
+                            </motion.div>
+                        ))}
+                    </div>
+
+                    {/* Message */}
+                    <motion.div
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5, delay: 0.5}}
+                    >
+                        <label className="block font-semibold">Deine Nachricht</label>
+                        <textarea
+                            rows={4}
+                            placeholder="Schreibe deine Nachricht..."
+                            className="w-full p-3 rounded-lg border border-border bg-card text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                        />
+                    </motion.div>
+
+                    {/* Submit Button */}
+                    <motion.div
+                        className="text-center"
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5, delay: 0.7}}
+                    >
+                        <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>
+                    </motion.div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default TermsOfUseComp;
diff --git a/frontend/app/legal/terms-of-use/page.tsx b/frontend/app/legal/terms-of-use/page.tsx
index 140972a..cb59443 100644
--- a/frontend/app/legal/terms-of-use/page.tsx
+++ b/frontend/app/legal/terms-of-use/page.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import TermsOfUseComp from "@/components/Legal/TermsOfUseComp";
+import TermsOfUseComp from "@/app/legal/terms-of-use/TermsOfUseComp";
+import type {Metadata} from "next";
+
+export async function generateMetadata(): Promise<Metadata> {
+    return {
+        title: "Nutzungsbedingungen | Rhein Software",
+    };
+}
 
 const TermsOfUsePage = () => {
     return (
diff --git a/frontend/app/services/layout.tsx b/frontend/app/services/layout.tsx
deleted file mode 100644
index 3bb87a8..0000000
--- a/frontend/app/services/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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: "Leistungen | 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/frontend/app/services/page.tsx b/frontend/app/services/page.tsx
deleted file mode 100644
index ca91f4d..0000000
--- a/frontend/app/services/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import Services from "@/components/Services/Services";
-
-const ContactPage = () => {
-    return (
-        <div>
-            <Services/>
-        </div>
-    );
-};
-
-export default ContactPage;
\ No newline at end of file
diff --git a/frontend/components.json b/frontend/components.json
new file mode 100644
index 0000000..dea737b
--- /dev/null
+++ b/frontend/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/frontend/components/About/AboutContent.tsx b/frontend/components/About/AboutContent.tsx
deleted file mode 100644
index b148189..0000000
--- a/frontend/components/About/AboutContent.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'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/frontend/components/About/Section/AboutHero.tsx b/frontend/components/About/Section/AboutHero.tsx
deleted file mode 100644
index 31567bc..0000000
--- a/frontend/components/About/Section/AboutHero.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'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/frontend/components/About/Section/AboutIntro.tsx b/frontend/components/About/Section/AboutIntro.tsx
deleted file mode 100644
index 379bc23..0000000
--- a/frontend/components/About/Section/AboutIntro.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'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/frontend/components/About/Section/AboutProcess.tsx b/frontend/components/About/Section/AboutProcess.tsx
deleted file mode 100644
index 887ec43..0000000
--- a/frontend/components/About/Section/AboutProcess.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-'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/frontend/components/About/Section/AboutTimeline.tsx b/frontend/components/About/Section/AboutTimeline.tsx
deleted file mode 100644
index 48bf23d..0000000
--- a/frontend/components/About/Section/AboutTimeline.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'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/frontend/components/CTA/DualCTA.tsx b/frontend/components/CTA/DualCTA.tsx
new file mode 100644
index 0000000..c1c1cbf
--- /dev/null
+++ b/frontend/components/CTA/DualCTA.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import Link from 'next/link';
+import {motion} from 'framer-motion';
+import {ArrowRight} from 'lucide-react';
+
+export default function DualCTA() {
+    return (
+        <section
+            className="relative py-24 px-6 md:px-16 lg:px-36 bg-gradient-to-br from-background via-muted to-background">
+            <motion.div
+                initial={{opacity: 0, y: 30}}
+                whileInView={{opacity: 1, y: 0}}
+                transition={{duration: 0.8, ease: 'easeOut'}}
+                viewport={{once: true, amount: 0.3}}
+                className="grid md:grid-cols-2 gap-8 max-w-7xl mx-auto"
+            >
+                <CTABox
+                    title="Fündig geworden?"
+                    text="Zögern Sie nicht, uns zu kontaktieren – wir helfen Ihnen gerne weiter."
+                    href="/contact"
+                    linkText="Zum Kontakt"
+                />
+                <CTABox
+                    title="Mehr über uns erfahren?"
+                    text="Wir stehen für nahe und zuverlässige Betreuung. Erfahren Sie mehr über unsere Werte."
+                    href="/about"
+                    linkText="Über uns"
+                />
+            </motion.div>
+        </section>
+    );
+}
+
+function CTABox({
+                    title,
+                    text,
+                    href,
+                    linkText,
+                }: Readonly<{
+    title: string;
+    text: string;
+    href: string;
+    linkText: string;
+}>) {
+    return (
+        <motion.div
+            whileHover={{scale: 1.015}}
+            className="flex flex-col justify-between h-full border border-border/50 backdrop-blur-sm bg-background/70 text-foreground px-8 py-10 rounded-2xl shadow-lg transition-all duration-300"
+        >
+            <div className="space-y-4 mb-6">
+                <h3 className="text-2xl md:text-3xl font-bold tracking-tight">{title}</h3>
+                <p className="text-base md:text-lg leading-relaxed text-muted-foreground">{text}</p>
+            </div>
+            <div className="w-full flex justify-end">
+                <Link
+                    href={href}
+                    className="group inline-flex items-center font-semibold text-base md:text-lg hover:text-primary/80 transition-colors text-blue-600"
+                >
+                    <span className="group-hover:underline">{linkText}</span>
+                    <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"/>
+                </Link>
+            </div>
+        </motion.div>
+    );
+}
diff --git a/frontend/components/Contact/Contact.tsx b/frontend/components/Contact/Contact.tsx
index f57ae64..b6c1a9b 100644
--- a/frontend/components/Contact/Contact.tsx
+++ b/frontend/components/Contact/Contact.tsx
@@ -1,31 +1,32 @@
 'use client';
 
-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 colors = useThemeColors();
+import {motion} from 'framer-motion'
+import ContactFormSection from '@/components/Contact/Section/ContactFormSection'
+import SmallHero from '@/components/Helper/SmallHero'
 
+export default function Contact() {
     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>
-                <ContactHero/>
-            </Section>
+        <>
+            <SmallHero
+                title="Kontakt"
+                subtitle="Du hast Fragen oder möchtest ein Projekt besprechen? Schreib uns!"
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
 
-            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
-                <ContactFormSection/>
-            </Section>
-        </motion.div>
-    );
-};
-
-export default Contact;
+            <section className="bg-background text-foreground">
+                <div className="px-4 sm:px-6 lg:px-8">
+                    <div className="max-w-6xl mx-auto">
+                        <motion.div
+                            initial={{opacity: 0, y: 20}}
+                            animate={{opacity: 1, y: 0}}
+                            transition={{duration: 0.6}}
+                        >
+                            <ContactFormSection/>
+                        </motion.div>
+                    </div>
+                </div>
+            </section>
+        </>
+    )
+}
diff --git a/frontend/components/Contact/Section/ContactFormSection.tsx b/frontend/components/Contact/Section/ContactFormSection.tsx
index 927d173..c2902fe 100644
--- a/frontend/components/Contact/Section/ContactFormSection.tsx
+++ b/frontend/components/Contact/Section/ContactFormSection.tsx
@@ -1,69 +1,56 @@
-'use client';
+'use client'
 
-import React, {useState} from "react";
-import {motion} from "framer-motion";
-import {useThemeColors} from "@/utils/useThemeColors";
-import HCaptcha from "@hcaptcha/react-hcaptcha";
+import React, {useState} from 'react'
+import {motion} from 'framer-motion'
+// import HCaptcha from '@hcaptcha/react-hcaptcha'
 
 const ContactFormSection = () => {
-    const colors = useThemeColors();
-
     const [form, setForm] = useState({
-        name: "",
-        email: "",
-        company: "",
-        phone: "",
-        website: "",
-        message: "",
-    });
+        name: '',
+        email: '',
+        company: '',
+        phone: '',
+        website: '',
+        message: '',
+    })
 
-    const [captchaToken, setCaptchaToken] = useState("");
-    const [submitted, setSubmitted] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
+    const [captchaToken, setCaptchaToken] = useState('')
+    const [submitted, setSubmitted] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState('')
 
-    // const hCaptchaSiteKey: string = process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY ?? "null";
-    //
-    // console.log(hCaptchaSiteKey);
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        setForm({...form, [e.target.name]: e.target.value});
-    };
+    const handleChange = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+        setForm({...form, [e.target.name]: e.target.value})
+    }
 
     const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setLoading(true);
-        setError("");
+        e.preventDefault()
+        setLoading(true)
+        setError('')
 
-        // if (!captchaToken) {
-        //     setError("Bitte löse das CAPTCHA, um fortzufahren.");
-        //     setLoading(false);
-        //     return;
-        // }
-
-        const res = await fetch("/api/contact", {
-            method: "POST",
-            headers: {"Content-Type": "application/json"},
+        const res = await fetch('/api/contact', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
             body: JSON.stringify({...form, captcha: captchaToken}),
-        });
+        })
 
         if (res.ok) {
-            setSubmitted(true);
-            setForm({name: "", email: "", company: "", phone: "", website: "", message: ""});
+            setSubmitted(true)
+            setForm({name: '', email: '', company: '', phone: '', website: '', message: ''})
         } else {
-            const resJson = await res.json();
-            setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut.");
+            const resJson = await res.json()
+            setError(resJson?.error || 'Ein Fehler ist aufgetreten. Bitte versuche es später erneut.')
         }
 
-
-        setLoading(false);
-    };
+        setLoading(false)
+    }
 
     return (
-        <div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
+        <div className="w-full px-6 sm:px-12 py-20 text-left">
             <motion.h2
-                className="text-2xl sm:text-3xl font-bold mb-2"
-                style={{color: colors.primaryText}}
+                className="text-2xl sm:text-3xl font-bold mb-2 text-foreground"
                 initial={{opacity: 0, y: 20}}
                 whileInView={{opacity: 1, y: 0}}
                 viewport={{once: true}}
@@ -73,8 +60,7 @@ const ContactFormSection = () => {
             </motion.h2>
 
             <motion.p
-                className="text-sm mb-8 max-w-xl"
-                style={{color: colors.secondaryText}}
+                className="text-sm mb-8 max-w-xl text-muted-foreground"
                 initial={{opacity: 0, y: 10}}
                 whileInView={{opacity: 1, y: 0}}
                 viewport={{once: true}}
@@ -84,46 +70,47 @@ const ContactFormSection = () => {
             </motion.p>
 
             {submitted ? (
-                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich
-                    gesendet!</div>
+                <div className="text-green-600 font-semibold text-lg">
+                    ✅ Deine Nachricht wurde erfolgreich gesendet!
+                </div>
             ) : (
                 <form className="space-y-6" onSubmit={handleSubmit}>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                         {[
                             {
-                                label: "Dein Name *",
-                                name: "name",
-                                type: "text",
+                                label: 'Dein Name *',
+                                name: 'name',
+                                type: 'text',
                                 required: true,
-                                placeholder: "Max Mustermann"
+                                placeholder: 'Max Mustermann'
                             },
                             {
-                                label: "Deine E-Mail *",
-                                name: "email",
-                                type: "email",
+                                label: 'Deine E-Mail *',
+                                name: 'email',
+                                type: 'email',
                                 required: true,
-                                placeholder: "max@example.com"
+                                placeholder: 'max@example.com'
                             },
                             {
-                                label: "Firmenname (optional)",
-                                name: "company",
-                                type: "text",
+                                label: 'Firmenname (optional)',
+                                name: 'company',
+                                type: 'text',
                                 required: false,
-                                placeholder: "Mustermann GmbH"
+                                placeholder: 'Mustermann GmbH'
                             },
                             {
-                                label: "Telefonnummer (optional)",
-                                name: "phone",
-                                type: "tel",
+                                label: 'Telefonnummer (optional)',
+                                name: 'phone',
+                                type: 'tel',
                                 required: false,
-                                placeholder: "+49 123 456789"
+                                placeholder: '+49 123 456789'
                             },
                             {
-                                label: "Webseite (optional)",
-                                name: "website",
-                                type: "url",
+                                label: 'Webseite (optional)',
+                                name: 'website',
+                                type: 'url',
                                 required: false,
-                                placeholder: "https://..."
+                                placeholder: 'https://...'
                             },
                         ].map((field, index) => (
                             <motion.div
@@ -133,7 +120,7 @@ const ContactFormSection = () => {
                                 viewport={{once: true}}
                                 transition={{duration: 0.5, delay: index * 0.1}}
                             >
-                                <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
+                                <label className="block font-semibold mb-1 text-foreground">
                                     {field.label}
                                 </label>
                                 <input
@@ -143,12 +130,7 @@ const ContactFormSection = () => {
                                     onChange={handleChange}
                                     required={field.required}
                                     placeholder={field.placeholder}
-                                    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,
-                                    }}
+                                    className="w-full p-3 rounded-md border bg-background text-foreground border-muted focus:outline-none focus:ring-2 focus:ring-primary transition"
                                 />
                             </motion.div>
                         ))}
@@ -160,9 +142,7 @@ const ContactFormSection = () => {
                         viewport={{once: true}}
                         transition={{duration: 0.5, delay: 0.6}}
                     >
-                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                            Deine Nachricht *
-                        </label>
+                        <label className="block font-semibold mb-1 text-foreground">Deine Nachricht *</label>
                         <textarea
                             name="message"
                             rows={4}
@@ -170,30 +150,27 @@ const ContactFormSection = () => {
                             value={form.message}
                             onChange={handleChange}
                             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,
-                            }}
+                            className="w-full p-3 rounded-md border bg-background text-foreground border-muted focus:outline-none focus:ring-2 focus:ring-primary transition"
                         />
                     </motion.div>
 
-                    {/*<motion.div*/}
-                    {/*    className="pt-2"*/}
-                    {/*    initial={{opacity: 0, y: 10}}*/}
-                    {/*    whileInView={{opacity: 1, y: 0}}*/}
-                    {/*    viewport={{once: true}}*/}
-                    {/*    transition={{duration: 0.5, delay: 0.7}}*/}
-                    {/*>*/}
-                    {/*    <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken}/>*/}
-                    {/*</motion.div>*/}
+                    {/*
+          <motion.div
+            className="pt-2"
+            initial={{ opacity: 0, y: 10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.7 }}
+          >
+            <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken} />
+          </motion.div>
+          */}
 
-                    {/*{error && (*/}
-                    {/*    <div className="text-red-600 font-medium pt-2">*/}
-                    {/*        ❌ {error}*/}
-                    {/*    </div>*/}
-                    {/*)}*/}
+                    {error && (
+                        <div className="text-red-600 font-medium pt-2">
+                            ❌ {error}
+                        </div>
+                    )}
 
                     <motion.div
                         className="pt-4 flex justify-end"
@@ -205,15 +182,15 @@ const ContactFormSection = () => {
                         <button
                             type="submit"
                             disabled={loading}
-                            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 disabled:opacity-50"
+                            className="px-6 py-3 bg-primary text-white text-sm sm:text-base font-semibold rounded-md shadow hover:bg-primary/90 transition-all disabled:opacity-50"
                         >
-                            {loading ? "Sende..." : "📩 Nachricht senden"}
+                            {loading ? 'Sende...' : '📩 Nachricht senden'}
                         </button>
                     </motion.div>
                 </form>
             )}
         </div>
-    );
-};
+    )
+}
 
-export default ContactFormSection;
+export default ContactFormSection
diff --git a/frontend/components/Contact/Section/ContactHero.tsx b/frontend/components/Contact/Section/ContactHero.tsx
deleted file mode 100644
index 055cf15..0000000
--- a/frontend/components/Contact/Section/ContactHero.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'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/frontend/components/Cookie/CookieConsentBanner.tsx b/frontend/components/Cookie/CookieConsentBanner.tsx
new file mode 100644
index 0000000..4c694b8
--- /dev/null
+++ b/frontend/components/Cookie/CookieConsentBanner.tsx
@@ -0,0 +1,128 @@
+// CookieConsentBanner.tsx
+'use client';
+
+import {useEffect, useState} from 'react';
+
+export default function CookieConsentBanner() {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [stats, setStats] = useState(false);
+    const [personalization, setPersonalization] = useState(false);
+
+    useEffect(() => {
+        const consent = localStorage.getItem('cookie_consent');
+        if (!consent) setVisible(true);
+
+        const show = () => {
+            setVisible(true);
+        };
+        window.addEventListener('show-cookie-banner', show);
+        return () => window.removeEventListener('show-cookie-banner', show);
+    }, []);
+
+    const handleAccept = () => {
+        setLoading(true);
+        setTimeout(() => {
+            localStorage.setItem('cookie_consent', 'true');
+            localStorage.setItem('cookie_stats', stats.toString());
+            localStorage.setItem('cookie_personalization', personalization.toString());
+            setVisible(false);
+            setLoading(false);
+        }, 1000);
+    };
+
+    const handleAcceptAll = () => {
+        setLoading(true);
+        setStats(true);
+        setPersonalization(true);
+        setTimeout(() => {
+            localStorage.setItem('cookie_consent', 'true');
+            localStorage.setItem('cookie_stats', 'true');
+            localStorage.setItem('cookie_personalization', 'true');
+            setVisible(false);
+            setLoading(false);
+        }, 1000);
+    };
+
+    const handleDecline = () => {
+        localStorage.setItem('cookie_consent', 'false');
+        localStorage.setItem('cookie_stats', 'false');
+        localStorage.setItem('cookie_personalization', 'false');
+        setVisible(false);
+    };
+
+    return visible ? (
+        <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center px-4">
+            <div className="bg-white max-w-2xl w-full rounded-xl shadow-lg overflow-hidden text-sm text-gray-800">
+                <div className="px-6 py-4 border-b border-gray-200">
+                    <h2 className="text-lg font-semibold">Wir nutzen Cookies und andere Technologien.</h2>
+                </div>
+                <div className="px-6 py-4 space-y-4 max-h-[60vh] overflow-y-auto">
+                    <p>
+                        Diese Website nutzt Cookies und vergleichbare Funktionen zur Verarbeitung von
+                        Endgeräteinformationen und personenbezogenen Daten. Die Verarbeitung dient der Einbindung von
+                        Inhalten, externen Diensten und Elementen Dritter, der statistischen Analyse/Messung, der
+                        personalisierten Werbung sowie der Einbindung sozialer Medien.
+                    </p>
+                    <p>
+                        Je nach Funktion werden dabei Daten an Dritte weitergegeben und in Länder außerhalb der EU
+                        übertragen, in denen kein angemessenes Datenschutzniveau besteht – z. B. die USA. Ihre
+                        Einwilligung ist freiwillig und kann jederzeit über das Symbol unten links widerrufen werden.
+                    </p>
+                    <div className="space-y-2">
+                        <label className="block">
+                            <input type="checkbox" defaultChecked disabled className="mr-2"/>
+                            Notwendige Cookies (immer aktiv)
+                        </label>
+                        <label className="block">
+                            <input
+                                type="checkbox"
+                                checked={stats}
+                                onChange={(e) => setStats(e.target.checked)}
+                                className="mr-2"
+                            />
+                            Statistiken (z. B. Besuchertracking)
+                        </label>
+                        <label className="block">
+                            <input
+                                type="checkbox"
+                                checked={personalization}
+                                onChange={(e) => setPersonalization(e.target.checked)}
+                                className="mr-2"
+                            />
+                            Personalisierung (z. B. eingebettete Medien, Google Maps)
+                        </label>
+                    </div>
+                </div>
+                <div className="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row sm:justify-end gap-2">
+                    <div className="flex flex-wrap gap-2">
+                        <button
+                            onClick={handleDecline}
+                            className="px-4 py-2 border rounded text-gray-600 hover:bg-gray-100"
+                        >
+                            Ablehnen
+                        </button>
+                        <button
+                            onClick={handleAccept}
+                            className="px-4 py-2 border rounded text-gray-700 hover:bg-gray-100 disabled:opacity-60"
+                            disabled={loading}
+                        >
+                            {loading ? 'Speichere ...' : 'Akzeptieren'}
+                        </button>
+                        <button
+                            onClick={handleAcceptAll}
+                            className="px-4 py-2 bg-red-700 text-white rounded hover:bg-red-800 disabled:opacity-60"
+                            disabled={loading}
+                        >
+                            {loading ? 'Speichere ...' : 'Alles akzeptieren'}
+                        </button>
+                    </div>
+                </div>
+                <div className="px-6 py-3 border-t border-gray-100 text-xs text-gray-500 flex justify-start gap-4">
+                    <a href="/legal/imprint" className="hover:underline">Impressum</a>
+                    <a href="/legal/privacy" className="hover:underline">Datenschutzerklärung</a>
+                </div>
+            </div>
+        </div>
+    ) : null;
+}
\ No newline at end of file
diff --git a/frontend/components/Footer/Footer.tsx b/frontend/components/Footer/Footer.tsx
index dc83040..27ff14a 100644
--- a/frontend/components/Footer/Footer.tsx
+++ b/frontend/components/Footer/Footer.tsx
@@ -3,95 +3,109 @@
 import React from 'react';
 import Link from 'next/link';
 import {motion} from 'framer-motion';
+import {Mail, Gavel, ShieldCheck, Cookie} from 'lucide-react';
 
 const Footer = () => {
+    const openCookieSettings = () => {
+        window.dispatchEvent(new Event('show-cookie-banner'));
+    };
+
     return (
         <motion.footer
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
             viewport={{once: true}}
             transition={{duration: 0.6, ease: 'easeOut'}}
-            className="py-10 transition-theme text-white"
-            style={{
-                backgroundColor: '#16171f', // modern dark blue-purple tone
-            }}
+            className="py-12 text-white"
+            style={{backgroundColor: '#16171f'}}
         >
-            <div className="w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
-                <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8">
-                    {/* Logo and description */}
-                    <div>
-                        <h1 className="text-xl md:text-2xl font-bold text-white">
-                            <span className="text-3xl md:text-4xl text-pink-700">R</span>hein Software
+            <motion.div
+                initial={{opacity: 0, y: 10}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.6, delay: 0.2}}
+                className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
+            >
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+                    {/* Logo */}
+                    <motion.div
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5, delay: 0.3}}
+                    >
+                        <h1 className="text-2xl font-bold">
+                            <span className="text-pink-700 text-4xl">R</span>hein Software
                         </h1>
-                    </div>
+                        <p className="mt-4 text-sm text-gray-400">
+                            Individuelle Web- und Appentwicklung mit Qualität und Weitblick.
+                        </p>
+                    </motion.div>
 
                     {/* Informationen */}
-                    <div>
-                        <h3 className="text-lg font-semibold text-white">Informationen</h3>
-                        <ul className="mt-4 space-y-4 text-sm font-semibold text-gray-400">
-                            <li>
-                                <Link href="/contact">
-                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
-                                        Kontakt
-                                    </p>
+                    <motion.div
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5, delay: 0.4}}
+                    >
+                        <h3 className="text-lg font-semibold mb-4">Informationen</h3>
+                        <ul className="space-y-3 text-sm text-gray-300">
+                            <li className="flex items-center gap-2">
+                                <Mail className="w-4 h-4"/>
+                                <Link href="/contact" className="hover:underline">
+                                    Kontakt
                                 </Link>
                             </li>
-                            {/*<li>*/}
-                            {/*    <Link href="/contact">*/}
-                            {/*        <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">*/}
-                            {/*            Zahlung und Versand*/}
-                            {/*        </p>*/}
-                            {/*    </Link>*/}
-                            {/*</li>*/}
                         </ul>
-                    </div>
+                    </motion.div>
 
                     {/* Rechtliches */}
-                    <div>
-                        <h3 className="text-lg font-semibold text-white">Rechtliches</h3>
-                        <ul className="mt-4 space-y-4 text-sm font-semibold text-gray-400">
-                            {/*<li>*/}
-                            {/*    <Link href="/legal/terms-of-use">*/}
-                            {/*        <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">*/}
-                            {/*            AGB*/}
-                            {/*        </p>*/}
-                            {/*    </Link>*/}
-                            {/*</li>*/}
-                            {/*<li>*/}
-                            {/*    <Link href="/legal/revocation">*/}
-                            {/*        <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">*/}
-                            {/*            Widerruf*/}
-                            {/*        </p>*/}
-                            {/*    </Link>*/}
-                            {/*</li>*/}
-                            <li>
-                                <Link href="/legal/privacy">
-                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
-                                        Datenschutz
-                                    </p>
+                    <motion.div
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5, delay: 0.5}}
+                    >
+                        <h3 className="text-lg font-semibold mb-4">Rechtliches</h3>
+                        <ul className="space-y-3 text-sm text-gray-300">
+                            <li className="flex items-center gap-2">
+                                <ShieldCheck className="w-4 h-4"/>
+                                <Link href="/legal/privacy" className="hover:underline">
+                                    Datenschutz
                                 </Link>
                             </li>
-                            <li>
-                                <Link href="/legal/imprint">
-                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
-                                        Impressum
-                                    </p>
+                            <li className="flex items-center gap-2">
+                                <Gavel className="w-4 h-4"/>
+                                <Link href="/legal/imprint" className="hover:underline">
+                                    Impressum
                                 </Link>
                             </li>
+                            <li className="flex items-center gap-2">
+                                <Cookie className="w-4 h-4"/>
+                                <button
+                                    onClick={openCookieSettings}
+                                    className="hover:underline text-left"
+                                >
+                                    Cookie-Einstellungen
+                                </button>
+                            </li>
                         </ul>
-                    </div>
+                    </motion.div>
                 </div>
 
-                {/* Bottom Section */}
-                <div
-                    className="mt-8 border-t border-gray-600 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-400">
-                    <p className="text-center md:text-left">
-                        © 2025 Rhein Software Development. All rights reserved.
-                    </p>
-                </div>
-            </div>
+                <motion.div
+                    className="mt-12 border-t border-gray-700 pt-6 text-center text-sm text-gray-500"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.6}}
+                >
+                    © 2025 Rhein Software Development. Alle Rechte vorbehalten.
+                </motion.div>
+            </motion.div>
         </motion.footer>
     );
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/frontend/components/Helper/SmallHero.tsx b/frontend/components/Helper/SmallHero.tsx
index 77afebe..9c0b6fb 100644
--- a/frontend/components/Helper/SmallHero.tsx
+++ b/frontend/components/Helper/SmallHero.tsx
@@ -1,58 +1,59 @@
-'use client';
+'use client'
 
-import React, {useContext} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
-import {motion} from "framer-motion";
+import {motion} from 'framer-motion'
+import clsx from 'clsx'
 
 type SmallHeroProps = {
-    title: string;
-    subtitle?: string;
-    backgroundImage?: string;
-    blurBackground?: boolean;
-};
+    title: string
+    subtitle?: string
+    backgroundImage?: string
+    blurBackground?: boolean
+    className?: string
+}
 
-const SmallHero = ({title, subtitle, backgroundImage, blurBackground}: SmallHeroProps) => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
+const SmallHero = ({
+                       title,
+                       subtitle,
+                       backgroundImage,
+                       blurBackground,
+                       className = 'py-36'
+                   }: SmallHeroProps) => {
+    const hasImage = !!backgroundImage
 
-    const primaryTextColor = backgroundImage ? "#ffffff" : colors.primaryText;
-    const secondaryTextColor = backgroundImage ? "rgba(255, 255, 255, 0.8)" : "#6B7280"; // Tailwind gray-500
+    const baseTextColor = hasImage ? 'text-white' : 'text-foreground'
+    const subtitleTextColor = hasImage ? 'text-white/80' : 'text-muted-foreground'
 
     return (
-        <div className="relative w-full py-36 overflow-hidden">
-            {backgroundImage && blurBackground && (
+        <div className={clsx('relative w-full overflow-hidden', className)}>
+            {hasImage && 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">
+            <div className="relative z-10 px-6 sm:px-12 max-w-6xl mx-auto">
                 <motion.h1
-                    className="text-3xl sm:text-4xl font-bold text-left"
+                    className={clsx('text-3xl sm:text-4xl font-bold text-left', baseTextColor)}
                     initial={{opacity: 0, y: 20}}
                     animate={{opacity: 1, y: 0}}
                     transition={{duration: 0.6}}
-                    style={{color: primaryTextColor}}
                 >
                     {title}
                 </motion.h1>
                 {subtitle && (
                     <motion.p
-                        className="mt-3 text-lg text-left"
+                        className={clsx('mt-3 text-lg text-left', subtitleTextColor)}
                         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>
-    );
-};
+    )
+}
 
-export default SmallHero;
+export default SmallHero
\ No newline at end of file
diff --git a/frontend/components/Helper/ThemeColors.ts b/frontend/components/Helper/ThemeColors.ts
deleted file mode 100644
index e4385ef..0000000
--- a/frontend/components/Helper/ThemeColors.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export const themeColors: Record<
-    "light" | "dark",
-    {
-        primaryBg: string;
-        secondaryBg: string;
-        navBg: string;
-        footerBg: string;
-        primaryText: string;
-        secondaryText: string;
-        inputFieldBg: string;
-        inputBorder: string;
-    }
-> = {
-    light: {
-        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/frontend/components/Home/Home.tsx b/frontend/components/Home/Home.tsx
deleted file mode 100644
index dd1b2d1..0000000
--- a/frontend/components/Home/Home.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import React from "react";
-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 (
-        <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>
-    );
-};
-
-export default Home;
diff --git a/frontend/components/Home/Sections/ContactCTA.tsx b/frontend/components/Home/Sections/ContactCTA.tsx
deleted file mode 100644
index 9bfed4d..0000000
--- a/frontend/components/Home/Sections/ContactCTA.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import {motion} from 'framer-motion';
-import {FiArrowRight} from 'react-icons/fi';
-import {useThemeColors} from '@/utils/useThemeColors';
-
-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 (
-        <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">
-                <motion.h2 className="text-3xl md:text-4xl font-bold">
-                    {title}
-                </motion.h2>
-
-                <motion.p
-                    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}}
-                >
-                    {description}
-                </motion.p>
-
-                <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"
-                        >
-                            {buttonLabel} <FiArrowRight size={18}/>
-                        </button>
-                    </Link>
-                </motion.div>
-            </div>
-        </section>
-    );
-};
-
-export default ContactCTA;
diff --git a/frontend/components/Home/Sections/Hero.tsx b/frontend/components/Home/Sections/Hero.tsx
deleted file mode 100644
index 2ecf7d7..0000000
--- a/frontend/components/Home/Sections/Hero.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import {Typewriter} from 'react-simple-typewriter';
-import {motion} from 'framer-motion';
-
-const Hero = () => {
-    return (
-        <div
-            className="relative w-full pt-[4vh] md:pt-[12vh] h-screen flex flex-col overflow-hidden"
-            style={{
-                backgroundColor: 'var(--primary-bg)',
-                color: 'white',
-            }}
-        >
-            {/* Background Image */}
-            <div className="absolute inset-0 z-0">
-                <Image
-                    src="/images/home_hero.jpg"
-                    alt="Rhein river aerial view"
-                    layout="fill"
-                    objectFit="cover"
-                    className="blur-md scale-105"
-                    priority
-                />
-                <div className="absolute inset-0 bg-black/40"/>
-            </div>
-
-            {/* Main content */}
-            <div className="relative z-10 flex justify-center flex-col w-[90%] sm:w-[80%] h-full mx-auto">
-                <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12">
-                    {/* Text Content */}
-                    <div>
-                        <motion.h1
-                            className="text-3xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold text-white"
-                            initial={{opacity: 0, y: 30}}
-                            animate={{opacity: 1, y: 0}}
-                            transition={{duration: 0.6, ease: 'easeOut'}}
-                        >
-                            Rhein-Software Development
-                        </motion.h1>
-
-                        <motion.p
-                            className="text-lg md:text-xl text-gray-400"
-                            initial={{opacity: 0, y: 30}}
-                            animate={{opacity: 1, y: 0}}
-                            transition={{duration: 0.6, delay: 0.2, ease: 'easeOut'}}
-                        >
-                            Digitale Lösungen für dein Unternehmen.
-                        </motion.p>
-
-                        <motion.p
-                            className="mt-4 text-lg md:text-xl font-semibold text-white"
-                            initial={{opacity: 0}}
-                            animate={{opacity: 1}}
-                            transition={{delay: 0.9, duration: 0.6}}
-                        >
-                            <Typewriter
-                                words={['Beratung', 'Entwicklung', 'Wartung', 'Fehlerbehebung']}
-                                loop={true}
-                                cursor
-                                cursorStyle="_"
-                                typeSpeed={60}
-                                deleteSpeed={40}
-                                delaySpeed={1500}
-                            />
-                        </motion.p>
-                    </div>
-
-                    {/* Floating Image */}
-                    <motion.div
-                        className="hidden lg:block"
-                        initial={{opacity: 0, y: 30}}
-                        animate={{opacity: 1, y: 0}}
-                        transition={{duration: 0.8, ease: 'easeOut', delay: 0.3}}
-                    >
-                        <motion.div
-                            animate={{y: [0, -10, 0]}}
-                            transition={{
-                                duration: 4,
-                                repeat: Infinity,
-                                ease: 'easeInOut',
-                            }}
-                            className="animate-float"
-                        >
-                            <Image
-                                src="/images/hero.png"
-                                alt="hero graphic"
-                                width={700}
-                                height={700}
-                            />
-                        </motion.div>
-                    </motion.div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Hero;
diff --git a/frontend/components/Home/Sections/HomeServices.tsx b/frontend/components/Home/Sections/HomeServices.tsx
deleted file mode 100644
index 85872d8..0000000
--- a/frontend/components/Home/Sections/HomeServices.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client';
-
-import {FiServer, FiTool, FiMonitor, FiZap, FiArrowRight} from 'react-icons/fi';
-import {motion} from 'framer-motion';
-import {useThemeColors} from '@/utils/useThemeColors';
-
-const services = [
-    {
-        title: 'Beratung',
-        icon: <FiMonitor size={24}/>,
-        description:
-            'Strategische und technische Beratung rund um digitale Produkte und Prozesse. Wir analysieren bestehende Systeme, identifizieren Potenziale und helfen dir, die passende Architektur für dein Projekt zu finden.',
-    },
-    {
-        title: 'Entwicklung',
-        icon: <FiZap size={24}/>,
-        description:
-            'Individuelle Softwareentwicklung – skalierbar, wartbar, zukunftssicher. Ob Web-App, API oder internes Tool: Wir setzen moderne Technologien ein, um genau die Lösung zu bauen, die du brauchst.',
-    },
-    {
-        title: 'Managed Services',
-        icon: <FiServer size={24}/>,
-        description:
-            'Wir betreuen Infrastruktur, Server und Systeme – verlässlich und performant. Unser Team kümmert sich um Hosting, Monitoring, Backups und sorgt für einen reibungslosen Betrieb deiner Plattform.',
-    },
-    {
-        title: 'Fehlerbehebung',
-        icon: <FiTool size={24}/>,
-        description:
-            'Schnelle Hilfe bei Bugs, Performance-Problemen oder Sicherheitslücken. Wir analysieren Probleme, beheben sie gezielt und sorgen dafür, dass dein System wieder stabil läuft – langfristig und zuverlässig.',
-    },
-];
-
-const HomeServices = () => {
-    const colors = useThemeColors();
-
-    return (
-        <section
-            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" style={{color: colors.primaryText}}>
-                <motion.h2
-                    className="text-3xl md:text-4xl font-bold mb-1 text-left transition-colors duration-700 ease-in-out"
-                >
-                    Leistungen
-                </motion.h2>
-
-                <motion.div
-                    className="w-12 h-[2px] mt-2 mb-10 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="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 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)',
-                            }}
-                            initial={{opacity: 0, y: 30}}
-                            whileInView={{opacity: 1, y: 0}}
-                            viewport={{once: true}}
-                            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">{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>
-
-                <motion.div
-                    className="mt-10 flex justify-end"
-                    initial={{opacity: 0}}
-                    whileInView={{opacity: 1}}
-                    viewport={{once: true}}
-                    transition={{duration: 0.4, delay: 0.3}}
-                >
-                    <a
-                        href="/services"
-                        className="text-sm font-semibold text-blue-600 hover:underline flex items-center gap-1"
-                    >
-                        Weitere Leistungen <FiArrowRight size={16}/>
-                    </a>
-                </motion.div>
-            </div>
-        </section>
-    );
-};
-
-export default HomeServices;
\ No newline at end of file
diff --git a/frontend/components/Home/Sections/TechStack.tsx b/frontend/components/Home/Sections/TechStack.tsx
deleted file mode 100644
index 7e29ede..0000000
--- a/frontend/components/Home/Sections/TechStack.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import {motion} from 'framer-motion';
-import {useThemeColors} from "@/utils/useThemeColors";
-
-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 TechStack = () => {
-    const colors = useThemeColors();
-
-    return (
-        <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-3xl md:text-4xl font-bold mb-1 text-left transition-colors duration-700 ease-in-out"
-                >
-                    Technologien
-                </motion.h2>
-
-                <motion.div
-                    className="w-12 h-[2px] mt-2 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}}
-                />
-
-                <motion.p
-                    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>
-
-                <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} colors={colors}/>
-                    ))}
-                </div>
-                <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} colors={colors}/>
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
-};
-
-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 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: '0 10px 20px rgba(0,0,0,0.1)'}}
-        viewport={{once: true}}
-        transition={{duration: 0.4, delay}}
-    >
-        <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>
-);
-
-export default TechStack;
\ No newline at end of file
diff --git a/frontend/components/Legal/Imprint/ImprintComp.tsx b/frontend/components/Legal/Imprint/ImprintComp.tsx
deleted file mode 100644
index b973cc3..0000000
--- a/frontend/components/Legal/Imprint/ImprintComp.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-"use client";
-
-import React, {useContext} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
-import {motion} from "framer-motion";
-
-const fadeInUp = {
-    hidden: {opacity: 0, y: 30},
-    visible: (i: number) => ({
-        opacity: 1,
-        y: 0,
-        transition: {
-            duration: 0.6,
-            delay: i * 0.2,
-            ease: "easeOut",
-        },
-    }),
-};
-
-const ImprintComp = () => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
-
-    return (
-        <div
-            className="overflow-hidden transition-colors duration-500"
-            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
-        >
-            {/* Imprint Content */}
-            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12 space-y-10 text-base leading-relaxed">
-                {[
-                    {
-                        title: "Impressum",
-                        content: (
-                            <>
-                                Thatsaphorn Atchariyaphap<br/>
-                                Rhein-Software (Einzelunternehmer)<br/>
-                                Mühlenstrasse 13<br/>
-                                79664 Wehr
-                            </>
-                        ),
-                    },
-                    {
-                        title: "Kontakt",
-                        content: (
-                            <>
-                                Telefon: +49 (0) 151 24003632<br/>
-                                E-Mail:{" "}
-                                <a
-                                    href="mailto:contact@rhein-software.dev"
-                                    className="underline text-blue-500"
-                                >
-                                    contact@rhein-software.dev
-                                </a>
-                            </>
-                        ),
-                    },
-                    {
-                        title: "EU-Streitschlichtung",
-                        content: (
-                            <>
-                                Die Europäische Kommission stellt eine Plattform zur
-                                Online-Streitbeilegung (OS) bereit:{" "}
-                                <a
-                                    href="https://ec.europa.eu/consumers/odr/"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="underline text-blue-500"
-                                >
-                                    https://ec.europa.eu/consumers/odr/
-                                </a>
-                                .<br/>
-                                Unsere E-Mail-Adresse finden Sie oben im Impressum.
-                            </>
-                        ),
-                    },
-                    {
-                        title:
-                            "Verbraucherstreitbeilegung / Universalschlichtungsstelle",
-                        content: (
-                            <>
-                                Wir sind nicht bereit oder verpflichtet, an
-                                Streitbeilegungsverfahren vor einer
-                                Verbraucherschlichtungsstelle teilzunehmen.
-                            </>
-                        ),
-                    },
-                ].map((section, i) => (
-                    <motion.div
-                        key={section.title}
-                        custom={i}
-                        initial="hidden"
-                        animate="visible"
-                        variants={fadeInUp}
-                    >
-                        <h2 className="text-2xl font-bold">{section.title}</h2>
-                        <motion.div
-                            className="w-6 h-[2px] mt-2 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>{section.content}</p>
-                    </motion.div>
-                ))}
-
-                <motion.p
-                    className="text-sm text-gray-500"
-                    custom={4}
-                    initial="hidden"
-                    animate="visible"
-                    variants={fadeInUp}
-                >
-                    Quelle:{" "}
-                    <a
-                        href="https://www.e-recht24.de"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="underline"
-                    >
-                        www.e-recht24.de
-                    </a>
-                </motion.p>
-            </div>
-        </div>
-    );
-};
-
-export default ImprintComp;
diff --git a/frontend/components/Legal/RevocationComp.tsx b/frontend/components/Legal/RevocationComp.tsx
deleted file mode 100644
index 756b799..0000000
--- a/frontend/components/Legal/RevocationComp.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import SmallHero from "@/components/Helper/SmallHero";
-import React, {useContext, useEffect} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
-import AOS from "aos";
-
-const RevocationComp = () => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
-
-    useEffect(() => {
-        AOS.init({
-            duration: 1000,
-            easing: "ease",
-            once: true,
-            anchorPlacement: "top-bottom",
-        });
-    }, []);
-
-    return (
-        <div className="overflow-hidden transition-colors duration-500"
-             style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}>
-
-            {/* Hero Section */}
-            <div className="mt-[10vh]">
-                <SmallHero
-                    title="Widerruf"
-                    subtitle=""
-                    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>
-    );};
-
-export default RevocationComp;
\ No newline at end of file
diff --git a/frontend/components/Legal/TermsOfUseComp.tsx b/frontend/components/Legal/TermsOfUseComp.tsx
deleted file mode 100644
index ad8117b..0000000
--- a/frontend/components/Legal/TermsOfUseComp.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import SmallHero from "@/components/Helper/SmallHero";
-import React, {useContext, useEffect} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
-import AOS from "aos";
-
-const TermsOfUseComp = () => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
-
-    useEffect(() => {
-        AOS.init({
-            duration: 1000,
-            easing: "ease",
-            once: true,
-            anchorPlacement: "top-bottom",
-        });
-    }, []);
-
-    return (
-        <div className="overflow-hidden transition-colors duration-500"
-             style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}>
-
-            {/* Hero Section */}
-            <div className="mt-[10vh]">
-                <SmallHero
-                    title="AGB"
-                    subtitle=""
-                    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>
-    );
-};
-
-export default TermsOfUseComp;
\ No newline at end of file
diff --git a/frontend/components/Navbar/DesktopNav.tsx b/frontend/components/Navbar/DesktopNav.tsx
deleted file mode 100644
index 34bb517..0000000
--- a/frontend/components/Navbar/DesktopNav.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import {usePathname} from "next/navigation";
-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 {useThemeColors} from "@/utils/useThemeColors";
-import {navLinks} from "@/constant/Constant";
-
-type Props = {
-    openNav: () => void;
-};
-
-const Nav = ({openNav}: Props) => {
-    const [navBg, setNavBg] = useState(false);
-    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 = useThemeColors();
-    const pathname = usePathname();
-
-    const navColorClass = theme === "dark" || !navBg ? "text-white" : "text-black";
-
-    useEffect(() => {
-        const handler = () => {
-            if (window.scrollY >= 90) {
-                setNavBg(true);
-                setNavHeight("h-[8vh]");
-                setContentSize("text-sm md:text-base");
-                setButtonSize("md:px-5 md:py-1.5 px-3 py-1 text-xs");
-            } else {
-                setNavBg(false);
-                setNavHeight("h-[10vh]");
-                setContentSize("text-base md:text-lg");
-                setButtonSize("md:px-6 md:py-2 px-4 py-1 text-sm");
-            }
-        };
-
-        window.addEventListener("scroll", handler);
-        return () => window.removeEventListener("scroll", handler);
-    }, []);
-
-    return (
-        <div
-            className={`fixed w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000] ${
-                navBg ? "shadow-md" : ""
-            }`}
-            style={{backgroundColor: navBg ? colors.navBg : "transparent"}}
-        >
-            <div className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto">
-                <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) => (
-                        <Link href={link.url} key={link.id}>
-                            <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"/>
-                                )}
-                            </p>
-                        </Link>
-                    ))}
-                </div>
-
-                <div className="flex items-center space-x-3">
-                    <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}`}
-                        style={{backgroundColor: colors.secondaryBg}}
-                    >
-                        {theme === "dark" ? "🌙" : "☀️"}
-                    </button>
-                    <HiBars3BottomRight
-                        onClick={openNav}
-                        className={`w-6 h-6 cursor-pointer lg:hidden ${navColorClass}`}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-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/frontend/components/Navbar/MobileNav.tsx b/frontend/components/Navbar/MobileNav.tsx
deleted file mode 100644
index 8b8db37..0000000
--- a/frontend/components/Navbar/MobileNav.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'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 {useThemeColors} from "@/utils/useThemeColors";
-
-type Props = {
-    showNav: boolean;
-    closeNav: () => void;
-};
-
-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 = useThemeColors();
-
-    const textClass = theme === "dark" ? "text-white" : "text-black";
-
-    return (
-        <div className="lg:hidden">
-            <div
-                className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${
-                    showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none"
-                }`}
-                onClick={closeNav}
-            />
-
-            <div
-                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 ${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 ${textClass}`}
-                    />
-
-                    {navLinks.map((link) => (
-                        <Link href={link.url} key={link.id}>
-                            <p className="nav__link uppercase text-[14px] sm:text-[16px] border-b pb-1 border-gray-400 transition-all duration-300 ease-in-out hover:scale-105">
-                                {link.label}
-                            </p>
-                        </Link>
-                    ))}
-
-                    <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 ${textClass}`}
-                        style={{backgroundColor: colors.secondaryBg}}
-                    >
-                        {theme === "dark" ? "🌙" : "☀️"}
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default MobileNav;
diff --git a/frontend/components/Navbar/Nav.tsx b/frontend/components/Navbar/Nav.tsx
deleted file mode 100644
index a353eaf..0000000
--- a/frontend/components/Navbar/Nav.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-
-import React, {useState} from "react";
-import DesktopNav from "./DesktopNav";
-import MobileNav from "./MobileNav";
-
-const Nav = () => {
-    const [showNav, setShowNav] = useState(false);
-    const handleNavShow = () => {
-        setShowNav(true);
-    };
-    const handleNavHide = () => {
-        setShowNav(false);
-    };
-
-    return (
-        <div>
-            <DesktopNav openNav={handleNavShow}/>
-            <MobileNav showNav={showNav} closeNav={handleNavHide}/>
-        </div>
-    );
-};
-
-export default Nav;
diff --git a/frontend/components/Navbar/Navbar.tsx b/frontend/components/Navbar/Navbar.tsx
new file mode 100644
index 0000000..fc3a2d3
--- /dev/null
+++ b/frontend/components/Navbar/Navbar.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import {usePathname, useRouter} from 'next/navigation';
+import {Button} from '@/components/ui/button';
+import {Sheet, SheetContent, SheetTrigger} from '@/components/ui/sheet';
+import {Menu} from 'lucide-react';
+import {ThemeToggle} from '@/components/theme-toggle';
+
+const navLinks = [
+    {id: 'services', label: 'Leistungen'},
+    {id: 'about', label: 'Über uns'},
+    {id: 'process', label: 'Ablauf'},
+    {id: 'whyus', label: 'Warum wir'},
+    {id: 'referral', label: 'Empfehlung'},
+    {id: 'faq', label: 'FAQ'},
+];
+
+const Navbar = () => {
+    const pathname = usePathname();
+    const router = useRouter();
+
+    const handleNavClick = (id: string) => {
+        if (typeof window === 'undefined') return
+
+        if (pathname === '/') {
+            const el = document.getElementById(id)
+            if (el) {
+                el.scrollIntoView({behavior: 'smooth', block: 'start'})
+            }
+        } else {
+            localStorage.setItem('scrollToId', id)
+            router.push('/')
+        }
+    }
+
+    return (
+        <div className="w-full px-4 sm:px-6 lg:px-8 flex justify-center mt-4 z-50 fixed">
+            <header
+                className="bg-background/50 backdrop-blur-md border shadow-lg rounded-xl w-full max-w-screen-xl py-3 px-4 sm:px-6 lg:px-8">
+                <div className="flex items-center justify-between">
+                    <button
+                        onClick={() => handleNavClick('start')}
+                        className="text-xl font-bold cursor-pointer"
+                    >
+                        <span className="text-pink-600">R</span>hein Software
+                    </button>
+
+                    {/* Desktop nav */}
+                    <nav className="hidden lg:flex items-center gap-6">
+                        {navLinks.map((link) => (
+                            <button
+                                key={link.id}
+                                onClick={() => handleNavClick(link.id)}
+                                className="cursor-pointer text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
+                            >
+                                {link.label}
+                            </button>
+                        ))}
+
+                        <Button asChild>
+                            <Link href="/contact">Kontakt</Link>
+                        </Button>
+
+                        <ThemeToggle/>
+                    </nav>
+
+                    {/* Mobile nav */}
+                    <div className="lg:hidden flex items-center gap-3">
+                        <ThemeToggle/>
+                        <Sheet>
+                            <SheetTrigger asChild>
+                                <Button variant="outline" size="icon">
+                                    <Menu className="h-5 w-5"/>
+                                </Button>
+                            </SheetTrigger>
+                            <SheetContent side="top" className="pt-10">
+                                <div className="flex flex-col space-y-4 text-center">
+                                    {navLinks.map((link) => (
+                                        <button
+                                            key={link.id}
+                                            onClick={() => handleNavClick(link.id)}
+                                            className="cursor-pointer text-base font-semibold text-muted-foreground hover:text-primary transition-colors"
+                                        >
+                                            {link.label}
+                                        </button>
+                                    ))}
+                                    <Button asChild className="mt-4 w-full">
+                                        <Link href="/contact">Kontakt</Link>
+                                    </Button>
+                                </div>
+                            </SheetContent>
+                        </Sheet>
+                    </div>
+                </div>
+            </header>
+        </div>
+    );
+};
+
+export default Navbar;
diff --git a/frontend/components/PulsatingButton.tsx b/frontend/components/PulsatingButton.tsx
new file mode 100644
index 0000000..fe190e1
--- /dev/null
+++ b/frontend/components/PulsatingButton.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import styled, {keyframes} from 'styled-components';
+
+type PulsatingButtonProps = {
+    label: string;
+    href: string;
+    color?: string;
+    textColor?: string;
+    width?: number;
+    height?: number;
+    pulse?: boolean;
+};
+
+const MAX_LAYERS = 2;
+
+const pulse = keyframes`
+    0%, 10% {
+        opacity: 0;
+        transform: scale(1.1);
+    }
+    80% {
+        opacity: 0.7;
+        transform: scale(1.15, 1.4);
+    }
+    81%, 100% {
+        opacity: 0;
+        transform: scale(1);
+    }
+`;
+
+const scale = keyframes`
+    0% {
+        transform: scale(1);
+    }
+    35%, 80% {
+        transform: scale(1.1, 1.35);
+    }
+    100% {
+        transform: scale(1);
+    }
+`;
+
+const Wrapper = styled.div`
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const Layer = styled.div<{
+    color: string;
+    $width: number;
+    $height: number;
+    $layer: number;
+}>`
+    position: absolute;
+    background: transparent;
+    border: 1px solid ${({color, $layer}) =>
+            $layer === 0 ? `${color}AA` : `${color}66`}; // L0: ~67%, L1: ~40%
+    border-radius: 9999px;
+    animation: ${({$layer}) => ($layer ? pulse : scale)} 1.5s infinite;
+    width: ${({$width, $layer}) => $width + $layer * 8}px;
+    height: ${({$height, $layer}) => $height + $layer * 8}px;
+    z-index: ${({$layer}) => MAX_LAYERS - $layer};
+`;
+
+// Use $-prefix to avoid prop leaking
+const StyledButton = styled.a.withConfig({
+    shouldForwardProp: (prop) =>
+        !['$bgColor', '$textColor', '$width', '$height'].includes(prop),
+})<{
+    $bgColor: string;
+    $textColor: string;
+    $width: number;
+    $height: number;
+}>`
+    position: relative;
+    z-index: ${MAX_LAYERS + 1};
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${({$bgColor}) => $bgColor};
+    color: ${({$textColor}) => $textColor};
+    border-radius: 9999px;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+    width: ${({$width}) => $width}px;
+    height: ${({$height}) => $height}px;
+
+    &:hover {
+        opacity: 0.9;
+    }
+`;
+
+const PulsatingButton: React.FC<PulsatingButtonProps> = ({
+                                                             label,
+                                                             href,
+                                                             color = '#3B82F6', // Tailwind blue-500
+                                                             textColor = '#ffffff',
+                                                             width = 160,
+                                                             height = 48,
+                                                             pulse = true,
+                                                         }) => {
+    return (
+        <Wrapper>
+            {pulse &&
+                Array.from({length: MAX_LAYERS}).map((_, index) => (
+                    <Layer
+                        key={index}
+                        color={color}
+                        $width={width}
+                        $height={height}
+                        $layer={index}
+                    />
+                ))}
+
+            <Link href={href} passHref legacyBehavior>
+                <StyledButton
+                    $bgColor={color}
+                    $textColor={textColor}
+                    $width={width}
+                    $height={height}
+                >
+                    {label}
+                </StyledButton>
+            </Link>
+        </Wrapper>
+    );
+};
+
+export default PulsatingButton;
diff --git a/frontend/components/Services/Section/OverviewTabs.tsx b/frontend/components/Services/Section/OverviewTabs.tsx
deleted file mode 100644
index 81aafad..0000000
--- a/frontend/components/Services/Section/OverviewTabs.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client';
-
-import React, {useState} from 'react';
-import {motion, AnimatePresence} from 'framer-motion';
-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";
-import BugFixing from "@/components/Services/Section/overview/BugFixing";
-import {useThemeColors} from "@/utils/useThemeColors";
-
-const tabs = [
-    {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/>,
-};
-
-const OverviewTabs = () => {
-    const [activeTab, setActiveTab] = useState("entwicklung");
-    const colors = useThemeColors();
-
-    return (
-        <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-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 flex-wrap gap-4 mb-10">
-                {tabs.map((tab) => (
-                    <button
-                        key={tab.key}
-                        onClick={() => setActiveTab(tab.key)}
-                        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',
-                            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;
diff --git a/frontend/components/Services/Section/ServiceHero.tsx b/frontend/components/Services/Section/ServiceHero.tsx
deleted file mode 100644
index 17860c5..0000000
--- a/frontend/components/Services/Section/ServiceHero.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import React from "react";
-import SmallHero from "@/components/Helper/SmallHero";
-
-const ServiceHero = () => {
-    return (
-        <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>
-    );
-};
-
-export default ServiceHero;
diff --git a/frontend/components/Services/Section/overview/BugFixing.tsx b/frontend/components/Services/Section/overview/BugFixing.tsx
deleted file mode 100644
index 52cfc9b..0000000
--- a/frontend/components/Services/Section/overview/BugFixing.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import React from "react";
-import {motion} from "framer-motion";
-import {useThemeColors} from "@/utils/useThemeColors";
-
-const BugFixing = () => {
-    const colors = useThemeColors();
-
-    return (
-        <div
-            className="w-[95%] 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}}
-                    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>
-    );
-};
-
-export default BugFixing;
diff --git a/frontend/components/Services/Section/overview/Consulting.tsx b/frontend/components/Services/Section/overview/Consulting.tsx
deleted file mode 100644
index 99c9693..0000000
--- a/frontend/components/Services/Section/overview/Consulting.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'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%] 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/frontend/components/Services/Section/overview/Development.tsx b/frontend/components/Services/Section/overview/Development.tsx
deleted file mode 100644
index c45d65b..0000000
--- a/frontend/components/Services/Section/overview/Development.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-'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%] 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/frontend/components/Services/Section/overview/ManagedServices.tsx b/frontend/components/Services/Section/overview/ManagedServices.tsx
deleted file mode 100644
index 41c7fc3..0000000
--- a/frontend/components/Services/Section/overview/ManagedServices.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'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%] 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/frontend/components/Services/Services.tsx b/frontend/components/Services/Services.tsx
deleted file mode 100644
index 1256b1c..0000000
--- a/frontend/components/Services/Services.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'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
-                    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>
-    );
-};
-
-export default Home;
diff --git a/frontend/components/provider/ThemeProvider.tsx b/frontend/components/provider/ThemeProvider.tsx
deleted file mode 100644
index 0082bfa..0000000
--- a/frontend/components/provider/ThemeProvider.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import {createContext, useEffect, useState} from "react";
-import Cookies from "js-cookie";
-
-type ThemeType = "light" | "dark";
-
-export const ThemeContext = createContext<{
-    theme: ThemeType;
-    toggleTheme: () => void;
-}>({
-    theme: "light",
-    toggleTheme: () => {
-    },
-});
-
-export const ThemeProvider = ({children}: { children: React.ReactNode }) => {
-    const [theme, setTheme] = useState<ThemeType | null>(null);
-
-    useEffect(() => {
-        const saved = Cookies.get("theme") as ThemeType | undefined;
-        if (saved === "dark" || saved === "light") {
-            setTheme(saved);
-        } else {
-            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-            const defaultTheme: ThemeType = prefersDark ? "dark" : "light";
-            setTheme(defaultTheme);
-            Cookies.set("theme", defaultTheme, {expires: 365});
-        }
-    }, []);
-
-    useEffect(() => {
-        if (!theme) return;
-        document.documentElement.setAttribute("data-theme", theme);
-    }, [theme]);
-
-    const toggleTheme = () => {
-        const next = theme === "dark" ? "light" : "dark";
-        setTheme(next);
-        Cookies.set("theme", next, {expires: 365});
-    };
-
-    if (!theme) return null;
-
-    return (
-        <ThemeContext.Provider value={{theme, toggleTheme}}>
-            {children}
-        </ThemeContext.Provider>
-    );
-};
diff --git a/frontend/components/theme-provider.tsx b/frontend/components/theme-provider.tsx
new file mode 100644
index 0000000..307725e
--- /dev/null
+++ b/frontend/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import {ThemeProvider as NextThemesProvider} from "next-themes"
+
+export function ThemeProvider({
+                                  children,
+                                  ...props
+                              }: Readonly<React.ComponentProps<typeof NextThemesProvider>>) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
\ No newline at end of file
diff --git a/frontend/components/theme-toggle.tsx b/frontend/components/theme-toggle.tsx
new file mode 100644
index 0000000..610227e
--- /dev/null
+++ b/frontend/components/theme-toggle.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/ui/button';
+
+export function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+
+    const toggleTheme = () => {
+        setTheme(theme === 'dark' ? 'light' : 'dark');
+    };
+
+    return (
+        <Button
+            variant="outline"
+            size="icon"
+            onClick={toggleTheme}
+            aria-label="Toggle theme"
+        >
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0 dark:-rotate-90" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:scale-100 dark:rotate-0" />
+        </Button>
+    );
+}
diff --git a/frontend/components/ui/accordion.tsx b/frontend/components/ui/accordion.tsx
new file mode 100644
index 0000000..2f55a32
--- /dev/null
+++ b/frontend/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/frontend/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/frontend/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/frontend/components/ui/dropdown-menu.tsx b/frontend/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..5a20503
--- /dev/null
+++ b/frontend/components/ui/dropdown-menu.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/frontend/components/ui/navigation-menu.tsx b/frontend/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..056354b
--- /dev/null
+++ b/frontend/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/frontend/components/ui/sheet.tsx b/frontend/components/ui/sheet.tsx
new file mode 100644
index 0000000..272cb72
--- /dev/null
+++ b/frontend/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/frontend/constant/TechStack.ts b/frontend/constant/TechStack.ts
new file mode 100644
index 0000000..ddb0264
--- /dev/null
+++ b/frontend/constant/TechStack.ts
@@ -0,0 +1,49 @@
+export 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'},
+            ],
+        },
+    ],
+};
\ No newline at end of file
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/frontend/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 59d03f2..077ae19 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,16 +8,30 @@
       "name": "web",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-navigation-menu": "^1.2.13",
+        "@radix-ui/react-slot": "^1.2.3",
         "aos": "^2.3.4",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^12.6.5",
         "js-cookie": "^3.0.5",
-        "next": "15.1.7",
+        "lucide-react": "^0.523.0",
+        "next": "15.2.4",
+        "next-themes": "^0.4.6",
         "nodemailer": "^6.10.1",
+        "prop-types": "^15.8.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-icons": "^5.4.0",
-        "react-simple-typewriter": "^5.0.1"
+        "react-scroll": "^1.9.3",
+        "react-simple-typewriter": "^5.0.1",
+        "react-vertical-timeline-component": "^3.5.3",
+        "styled-components": "^6.1.19",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -29,6 +43,8 @@
         "@types/nodemailer": "^6.4.17",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/react-scroll": "^1.8.10",
+        "@types/react-vertical-timeline-component": "^3.3.6",
         "autoprefixer": "^10.4.21",
         "eslint": "^9",
         "eslint-config-next": "15.1.7",
@@ -41,7 +57,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -96,6 +111,27 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
@@ -234,6 +270,44 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.1.tgz",
+      "integrity": "sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.1.tgz",
+      "integrity": "sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.1",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.3.tgz",
+      "integrity": "sha512-huMBfiU9UnQ2oBwIhgzyIiSpVgvlDstU8CX0AF+wS+KzmYMs0J2a3GwuFHV1Lz+jlrQGeC1fF+Nv0QoumyV0bA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
     "node_modules/@hcaptcha/loader": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@hcaptcha/loader/-/loader-2.0.0.tgz",
@@ -687,7 +761,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -705,7 +778,6 @@
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -720,7 +792,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -730,7 +801,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -740,14 +810,12 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -768,9 +836,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.7.tgz",
-      "integrity": "sha512-d9jnRrkuOH7Mhi+LHav2XW91HOgTAWHxjMPkXMGBc9B2b7614P7kjt8tAplRvJpbSt4nbO1lugcT/kAaWzjlLQ==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.4.tgz",
+      "integrity": "sha512-+SFtMgoiYP3WoSswuNmxJOCwi06TdWE733D+WPjpXIe4LXGULwEaofiiAy6kbS0+XjM5xF5n3lKuBwN2SnqD9g==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -784,9 +852,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.7.tgz",
-      "integrity": "sha512-hPFwzPJDpA8FGj7IKV3Yf1web3oz2YsR8du4amKw8d+jAOHfYHYFpMkoF6vgSY4W6vB29RtZEklK9ayinGiCmQ==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.4.tgz",
+      "integrity": "sha512-1AnMfs655ipJEDC/FHkSr0r3lXBgpqKo4K1kiwfUf3iE68rDFXZ1TtHdMvf7D0hMItgDZ7Vuq3JgNMbt/+3bYw==",
       "cpu": [
         "arm64"
       ],
@@ -800,9 +868,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.7.tgz",
-      "integrity": "sha512-2qoas+fO3OQKkU0PBUfwTiw/EYpN+kdAx62cePRyY1LqKtP09Vp5UcUntfZYajop5fDFTjSxCHfZVRxzi+9FYQ==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.4.tgz",
+      "integrity": "sha512-3qK2zb5EwCwxnO2HeO+TRqCubeI/NgCe+kL5dTJlPldV/uwCnUgC7VbEzgmxbfrkbjehL4H9BPztWOEtsoMwew==",
       "cpu": [
         "x64"
       ],
@@ -816,9 +884,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.7.tgz",
-      "integrity": "sha512-sKLLwDX709mPdzxMnRIXLIT9zaX2w0GUlkLYQnKGoXeWUhcvpCrK+yevcwCJPdTdxZEUA0mOXGLdPsGkudGdnA==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.4.tgz",
+      "integrity": "sha512-HFN6GKUcrTWvem8AZN7tT95zPb0GUGv9v0d0iyuTb303vbXkkbHDp/DxufB04jNVD+IN9yHy7y/6Mqq0h0YVaQ==",
       "cpu": [
         "arm64"
       ],
@@ -832,9 +900,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.7.tgz",
-      "integrity": "sha512-zblK1OQbQWdC8fxdX4fpsHDw+VSpBPGEUX4PhSE9hkaWPrWoeIJn+baX53vbsbDRaDKd7bBNcXRovY1hEhFd7w==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.4.tgz",
+      "integrity": "sha512-Oioa0SORWLwi35/kVB8aCk5Uq+5/ZIumMK1kJV+jSdazFm2NzPDztsefzdmzzpx5oGCJ6FkUC7vkaUseNTStNA==",
       "cpu": [
         "arm64"
       ],
@@ -848,9 +916,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.7.tgz",
-      "integrity": "sha512-GOzXutxuLvLHFDAPsMP2zDBMl1vfUHHpdNpFGhxu90jEzH6nNIgmtw/s1MDwpTOiM+MT5V8+I1hmVFeAUhkbgQ==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.4.tgz",
+      "integrity": "sha512-yb5WTRaHdkgOqFOZiu6rHV1fAEK0flVpaIN2HB6kxHVSy/dIajWbThS7qON3W9/SNOH2JWkVCyulgGYekMePuw==",
       "cpu": [
         "x64"
       ],
@@ -864,9 +932,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.7.tgz",
-      "integrity": "sha512-WrZ7jBhR7ATW1z5iEQ0ZJfE2twCNSXbpCSaAunF3BKcVeHFADSI/AW1y5Xt3DzTqPF1FzQlwQTewqetAABhZRQ==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.4.tgz",
+      "integrity": "sha512-Dcdv/ix6srhkM25fgXiyOieFUkz+fOYkHlydWCtB0xMST6X9XYI3yPDKBZt1xuhOytONsIFJFB08xXYsxUwJLw==",
       "cpu": [
         "x64"
       ],
@@ -880,9 +948,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.7.tgz",
-      "integrity": "sha512-LDnj1f3OVbou1BqvvXVqouJZKcwq++mV2F+oFHptToZtScIEnhNRJAhJzqAtTE2dB31qDYL45xJwrc+bLeKM2Q==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.4.tgz",
+      "integrity": "sha512-dW0i7eukvDxtIhCYkMrZNQfNicPDExt2jPb9AZPpL7cfyUo7QSNl1DjsHjmmKp6qNAqUESyT8YFl/Aw91cNJJg==",
       "cpu": [
         "arm64"
       ],
@@ -896,9 +964,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.7.tgz",
-      "integrity": "sha512-dC01f1quuf97viOfW05/K8XYv2iuBgAxJZl7mbCKEjMgdQl5JjAKJ0D2qMKZCgPWDeFbFT0Q0nYWwytEW0DWTQ==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.4.tgz",
+      "integrity": "sha512-SbnWkJmkS7Xl3kre8SdMF6F/XDh1DTFEhp0jRTj/uB8iPKoU2bb2NDfcu+iifv1+mxQEd1g2vvSxcZbXSKyWiQ==",
       "cpu": [
         "x64"
       ],
@@ -915,7 +983,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -929,7 +996,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -939,7 +1005,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -963,13 +1028,716 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.11.tgz",
+      "integrity": "sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collapsible": "1.1.11",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.11.tgz",
+      "integrity": "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
+      "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
+      "integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.13.tgz",
+      "integrity": "sha512-WG8wWfDiJlSF5hELjwfjSGOXcBR/ZMhBFCGYe8vERpC39CQYZeq1PQ2kaYHdye3V95d06H89KGMsVCIE4LWo3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
+      "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
+      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1320,7 +2088,7 @@
       "version": "19.0.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.12.tgz",
       "integrity": "sha512-V6Ar115dBDrjbtXSrS+/Oruobc+qVbbUxDFC1RSbRqLt5SYvxxyIDrSC85RWml54g+jfNeEMZhEj7wW07ONQhA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -1330,12 +2098,38 @@
       "version": "19.0.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
       "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-scroll": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.8.10.tgz",
+      "integrity": "sha512-RD4Z7grbdNGOKwKnUBKar6zNxqaW3n8m9QSrfvljW+gmkj1GArb8AFBomVr6xMOgHPD3v1uV3BrIf01py57daQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-vertical-timeline-component": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@types/react-vertical-timeline-component/-/react-vertical-timeline-component-3.3.6.tgz",
+      "integrity": "sha512-OUvyPXRjXvUD/SNLO0CW0GbIxVF32Ios5qHecMSfw6kxnK1cPULD9NV80EuqZ3WmS/s6BgbcwmN8k4ISb3akhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.28.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.28.0.tgz",
@@ -1475,9 +2269,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1829,7 +2623,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -1842,7 +2635,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -1858,14 +2650,12 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -1890,7 +2680,6 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/argparse": {
@@ -1900,6 +2689,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -2163,14 +2964,12 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2180,9 +2979,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2194,7 +2993,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -2311,12 +3109,20 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001707",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
@@ -2358,7 +3164,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -2383,7 +3188,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -2392,12 +3196,30 @@
         "node": ">= 6"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/classlist-polyfill": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
       "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
       "license": "Unlicense"
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2431,7 +3253,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2444,7 +3265,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/color-string": {
@@ -2462,7 +3282,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -2479,7 +3298,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -2490,11 +3308,30 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -2507,7 +3344,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -2642,18 +3478,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/doctrine": {
@@ -2688,7 +3528,6 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
@@ -2702,7 +3541,6 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/enhanced-resolve": {
@@ -3397,7 +4235,6 @@
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
       "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -3420,7 +4257,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -3487,7 +4323,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
       "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.6",
@@ -3545,7 +4380,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -3560,7 +4394,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3622,6 +4455,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -3671,7 +4513,6 @@
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -3692,7 +4533,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -3702,10 +4542,9 @@
       }
     },
     "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -3715,7 +4554,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -3869,7 +4707,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -3995,7 +4832,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -4048,7 +4884,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -4099,7 +4934,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4125,7 +4959,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4154,7 +4987,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -4180,7 +5012,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -4359,7 +5190,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/iterator.prototype": {
@@ -4384,7 +5214,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -4419,7 +5248,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -4772,7 +5600,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -4785,7 +5612,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -4827,7 +5653,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -4840,9 +5665,17 @@
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
       "license": "ISC"
     },
+    "node_modules/lucide-react": {
+      "version": "0.523.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.523.0.tgz",
+      "integrity": "sha512-rUjQoy7egZT9XYVXBK1je9ckBnNp7qzRZOhLQx5RcEp2dCGlXo+mv6vf7Am4LimEcFBJIIZzSGfgTqc9QCrPSw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4857,7 +5690,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -4867,7 +5699,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -4904,7 +5735,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -4936,7 +5766,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
@@ -4970,12 +5799,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.1.7",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.1.7.tgz",
-      "integrity": "sha512-GNeINPGS9c6OZKCvKypbL8GTsT5GhWPp4DM0fzkXJuXMilOO2EeFxuAY6JZbtk6XIl6Ws10ag3xRINDjSO5+wg==",
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.2.4.tgz",
+      "integrity": "sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.1.7",
+        "@next/env": "15.2.4",
         "@swc/counter": "0.1.3",
         "@swc/helpers": "0.5.15",
         "busboy": "1.6.0",
@@ -4990,14 +5819,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.1.7",
-        "@next/swc-darwin-x64": "15.1.7",
-        "@next/swc-linux-arm64-gnu": "15.1.7",
-        "@next/swc-linux-arm64-musl": "15.1.7",
-        "@next/swc-linux-x64-gnu": "15.1.7",
-        "@next/swc-linux-x64-musl": "15.1.7",
-        "@next/swc-win32-arm64-msvc": "15.1.7",
-        "@next/swc-win32-x64-msvc": "15.1.7",
+        "@next/swc-darwin-arm64": "15.2.4",
+        "@next/swc-darwin-x64": "15.2.4",
+        "@next/swc-linux-arm64-gnu": "15.2.4",
+        "@next/swc-linux-arm64-musl": "15.2.4",
+        "@next/swc-linux-x64-gnu": "15.2.4",
+        "@next/swc-linux-x64-musl": "15.2.4",
+        "@next/swc-win32-arm64-msvc": "15.2.4",
+        "@next/swc-win32-x64-msvc": "15.2.4",
         "sharp": "^0.33.5"
       },
       "peerDependencies": {
@@ -5023,6 +5852,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -5071,7 +5910,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5091,7 +5929,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5101,7 +5938,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -5292,7 +6128,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/parent-module": {
@@ -5322,7 +6157,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5332,14 +6166,12 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
@@ -5362,7 +6194,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -5375,7 +6206,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5385,7 +6215,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
       "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -5405,7 +6234,6 @@
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
       "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5434,7 +6262,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -5452,7 +6279,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
@@ -5472,7 +6298,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5508,7 +6333,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5534,7 +6358,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -5548,7 +6371,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -5565,7 +6387,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -5587,7 +6408,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5638,9 +6458,69 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
+      "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-scroll": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.3.tgz",
+      "integrity": "sha512-xv7FXqF3k63aSLNu4/NjFvRNI0ge7DmmmsbeGarP7LZVAlJMSjUuW3dTtLxp1Afijyv0lS2qwC0GiFHvx1KBHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-simple-typewriter": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-simple-typewriter/-/react-simple-typewriter-5.0.1.tgz",
@@ -5654,11 +6534,66 @@
         "react-dom": ">=18.0.0"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-vertical-timeline-component": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/react-vertical-timeline-component/-/react-vertical-timeline-component-3.6.0.tgz",
+      "integrity": "sha512-l9zulqjIGlRuaQeplGzV4r/tG2RYBpYt84Il8w4IxnJze2cDIGI04MKo3F7f1sHT0Sih1ohEFts8UV23AJS15Q==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react-intersection-observer": "^8.26.2"
+      }
+    },
+    "node_modules/react-vertical-timeline-component/node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-vertical-timeline-component/node_modules/react-intersection-observer": {
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz",
+      "integrity": "sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
@@ -5668,7 +6603,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -5732,7 +6666,6 @@
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.0",
@@ -5773,7 +6706,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
       "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -5784,7 +6716,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5927,6 +6858,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
     "node_modules/sharp": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
@@ -5971,7 +6908,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -5984,7 +6920,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6070,7 +7005,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -6117,7 +7051,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -6136,7 +7069,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -6151,7 +7083,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6161,14 +7092,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -6294,7 +7223,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -6311,7 +7239,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -6324,7 +7251,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6353,6 +7279,68 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.19",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz",
+      "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.49",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "license": "0BSD"
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -6376,11 +7364,16 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -6416,7 +7409,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6425,11 +7417,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -6463,11 +7464,19 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tailwindcss/node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
       "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -6484,7 +7493,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -6497,7 +7505,6 @@
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
@@ -6517,7 +7524,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
@@ -6527,7 +7533,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
@@ -6585,7 +7590,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -6611,7 +7615,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/tsconfig-paths": {
@@ -6832,18 +7835,59 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -6958,7 +8002,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -6977,7 +8020,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -6995,7 +8037,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7005,14 +8046,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -7027,7 +8066,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -7040,7 +8078,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -7053,7 +8090,6 @@
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
       "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
diff --git a/frontend/package.json b/frontend/package.json
index 073ab8e..7860d8f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,16 +9,30 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-slot": "^1.2.3",
     "aos": "^2.3.4",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.6.5",
     "js-cookie": "^3.0.5",
-    "next": "15.1.7",
+    "lucide-react": "^0.523.0",
+    "next": "15.2.4",
+    "next-themes": "^0.4.6",
     "nodemailer": "^6.10.1",
+    "prop-types": "^15.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
-    "react-simple-typewriter": "^5.0.1"
+    "react-scroll": "^1.9.3",
+    "react-simple-typewriter": "^5.0.1",
+    "react-vertical-timeline-component": "^3.5.3",
+    "styled-components": "^6.1.19",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
@@ -30,6 +44,8 @@
     "@types/nodemailer": "^6.4.17",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-scroll": "^1.8.10",
+    "@types/react-vertical-timeline-component": "^3.3.6",
     "autoprefixer": "^10.4.21",
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index e1e704a..1ffa303 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,12 +1,85 @@
 import type { Config } from "tailwindcss";
 
 export default {
+    darkMode: ["class"],
     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: {},
-    plugins: [],
+    theme: {
+    	extend: {
+    		borderRadius: {
+    			lg: 'var(--radius)',
+    			md: 'calc(var(--radius) - 2px)',
+    			sm: 'calc(var(--radius) - 4px)'
+    		},
+    		colors: {
+    			background: 'hsl(var(--background))',
+    			foreground: 'hsl(var(--foreground))',
+    			card: {
+    				DEFAULT: 'hsl(var(--card))',
+    				foreground: 'hsl(var(--card-foreground))'
+    			},
+    			popover: {
+    				DEFAULT: 'hsl(var(--popover))',
+    				foreground: 'hsl(var(--popover-foreground))'
+    			},
+    			primary: {
+    				DEFAULT: 'hsl(var(--primary))',
+    				foreground: 'hsl(var(--primary-foreground))'
+    			},
+    			secondary: {
+    				DEFAULT: 'hsl(var(--secondary))',
+    				foreground: 'hsl(var(--secondary-foreground))'
+    			},
+    			muted: {
+    				DEFAULT: 'hsl(var(--muted))',
+    				foreground: 'hsl(var(--muted-foreground))'
+    			},
+    			accent: {
+    				DEFAULT: 'hsl(var(--accent))',
+    				foreground: 'hsl(var(--accent-foreground))'
+    			},
+    			destructive: {
+    				DEFAULT: 'hsl(var(--destructive))',
+    				foreground: 'hsl(var(--destructive-foreground))'
+    			},
+    			border: 'hsl(var(--border))',
+    			input: 'hsl(var(--input))',
+    			ring: 'hsl(var(--ring))',
+    			chart: {
+    				'1': 'hsl(var(--chart-1))',
+    				'2': 'hsl(var(--chart-2))',
+    				'3': 'hsl(var(--chart-3))',
+    				'4': 'hsl(var(--chart-4))',
+    				'5': 'hsl(var(--chart-5))'
+    			}
+    		},
+    		keyframes: {
+    			'accordion-down': {
+    				from: {
+    					height: '0'
+    				},
+    				to: {
+    					height: 'var(--radix-accordion-content-height)'
+    				}
+    			},
+    			'accordion-up': {
+    				from: {
+    					height: 'var(--radix-accordion-content-height)'
+    				},
+    				to: {
+    					height: '0'
+    				}
+    			}
+    		},
+    		animation: {
+    			'accordion-down': 'accordion-down 0.2s ease-out',
+    			'accordion-up': 'accordion-up 0.2s ease-out'
+    		}
+    	}
+    },
+    plugins: [require("tailwindcss-animate")],
 } satisfies Config;
diff --git a/frontend/utils/useThemeColors.ts b/frontend/utils/useThemeColors.ts
deleted file mode 100644
index acbfc19..0000000
--- a/frontend/utils/useThemeColors.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-'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];
-};