Refactor website to use shadcn components

frontend/components/Navbar/DesktopNav.tsx

@@ -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;

frontend/components/Navbar/MobileNav.tsx

@@ -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;

frontend/components/Navbar/Nav.tsx

@@ -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;

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;