Add new pages and ocmponents using shadcn ui components

lawfirm-demos/demo-2/components/Navbar.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import Link from "next/link";
+import {useState} from "react";
+import {
+    NavigationMenu,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import {Sheet, SheetContent, SheetTrigger} from "@/components/ui/sheet";
+import {Button} from "@/components/ui/button";
+import {Menu} from "lucide-react";
+
+export default function Navbar() {
+    const [open, setOpen] = useState(false);
+
+    const navItems = [
+        {href: "/", label: "Start"},
+        {href: "/about", label: "Über mich"},
+        {href: "/kontakt", label: "Kontakt"},
+    ];
+
+    return (
+        <header className="w-full border-b bg-white dark:bg-gray-950 px-4 py-3 shadow-sm">
+            <div className="max-w-6xl mx-auto flex justify-between items-center">
+        <span className="text-xl font-bold text-gray-900 dark:text-white">
+          RA Mustermann
+        </span>
+
+                {/* Desktop Navigation */}
+                <nav className="hidden md:flex">
+                    <NavigationMenu>
+                        <NavigationMenuList className="gap-4">
+                            {navItems.map((item) => (
+                                <NavigationMenuItem key={item.href}>
+                                    <NavigationMenuLink asChild>
+                                        <Link
+                                            href={item.href}
+                                            className="text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-primary"
+                                        >
+                                            {item.label}
+                                        </Link>
+                                    </NavigationMenuLink>
+                                </NavigationMenuItem>
+                            ))}
+                        </NavigationMenuList>
+                    </NavigationMenu>
+                </nav>
+
+                {/* Mobile Navigation */}
+                <div className="md:hidden">
+                    <Sheet open={open} onOpenChange={setOpen}>
+                        <SheetTrigger asChild>
+                            <Button variant="ghost" size="icon" aria-label="Menü öffnen">
+                                <Menu className="h-6 w-6 text-gray-800 dark:text-gray-200"/>
+                            </Button>
+                        </SheetTrigger>
+                        <SheetContent side="right" className="w-[260px] pt-10 px-6">
+                            <h2 className="text-lg font-semibold tracking-tight mb-6">
+                                Menü
+                            </h2>
+                            <nav className="flex flex-col gap-4">
+                                {navItems.map((item) => (
+                                    <Link
+                                        key={item.href}
+                                        href={item.href}
+                                        onClick={() => setOpen(false)}
+                                        className="block px-4 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                                    >
+                                        {item.label}
+                                    </Link>
+                                ))}
+                            </nav>
+                        </SheetContent>
+                    </Sheet>
+                </div>
+            </div>
+        </header>
+    );
+}