Refactor website to use shadcn components

2025-06-28 12:01:43 +00:00
parent 1648e376bf
commit 8c05ad29cb
78 changed files with 3858 additions and 2722 deletions
--- a/frontend/components/Navbar/Navbar.tsx
+++ 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;