feat: improve invoice view responsiveness and settings UX

- Replace custom invoice items table with responsive DataTable component
- Fix server/client component error by creating InvoiceItemsTable client
  component
- Merge danger zone with actions sidebar and use destructive button
  variant
- Standardize button text sizing across all action buttons
- Remove false claims from homepage (testimonials, ratings, fake user
  counts)
- Focus homepage messaging on freelancers with honest feature
  descriptions
- Fix dark mode support throughout app by replacing hard-coded colors
  with semantic classes
- Remove aggressive red styling from settings, add subtle red accents
  only
- Align import/export buttons and improve delete confirmation UX
- Update dark mode background to have subtle green tint instead of pure
  black
- Fix HTML nesting error in AlertDialog by using div instead of nested p
  tags

This update makes the invoice view properly responsive, removes
misleading marketing claims, and ensures consistent dark mode support
across the entire application.

src/components/layout/navbar.tsx

@@ -0,0 +1,73 @@
+"use client";
+import Link from "next/link";
+import { useSession, signOut } from "next-auth/react";
+import { useState } from "react";
+import { Button } from "~/components/ui/button";
+import { Skeleton } from "~/components/ui/skeleton";
+import { Logo } from "~/components/branding/logo";
+import { SidebarTrigger } from "~/components/navigation/sidebar-trigger";
+
+export function Navbar() {
+  const { data: session, status } = useSession();
+  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
+
+  return (
+    <header className="fixed top-2 right-2 left-2 z-30 md:top-3 md:right-3 md:left-3">
+      <div className="bg-background/60 border-border/40 relative rounded-2xl border shadow-lg backdrop-blur-xl backdrop-saturate-150">
+        <div className="flex h-14 items-center justify-between px-4 md:h-16 md:px-8">
+          <div className="flex items-center gap-4 md:gap-6">
+            <SidebarTrigger
+              isOpen={isMobileNavOpen}
+              onToggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
+            />
+            <Link href="/dashboard" className="flex items-center gap-2">
+              <Logo size="md" />
+            </Link>
+          </div>
+          <div className="flex items-center gap-2 md:gap-4">
+            {status === "loading" ? (
+              <>
+                <Skeleton className="bg-muted/20 hidden h-5 w-20 sm:inline" />
+                <Skeleton className="bg-muted/20 h-8 w-16" />
+              </>
+            ) : session?.user ? (
+              <>
+                <span className="text-muted-foreground hidden text-xs font-medium sm:inline md:text-sm">
+                  {session.user.name ?? session.user.email}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => signOut({ callbackUrl: "/" })}
+                  className="border-border/40 hover:bg-accent/50 text-xs md:text-sm"
+                >
+                  Sign Out
+                </Button>
+              </>
+            ) : (
+              <>
+                <Link href="/auth/signin">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="hover:bg-accent/50 text-xs md:text-sm"
+                  >
+                    Sign In
+                  </Button>
+                </Link>
+                <Link href="/auth/register">
+                  <Button
+                    size="sm"
+                    className="bg-gradient-to-r from-emerald-600 to-teal-600 text-xs font-medium text-white shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg md:text-sm"
+                  >
+                    Register
+                  </Button>
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}