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/navigation/breadcrumbs.tsx

@@ -0,0 +1,32 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronRight } from "lucide-react";
+
+export function Breadcrumbs() {
+  const pathname = usePathname();
+  const segments = pathname.split("/").filter(Boolean);
+  const crumbs = [
+    { name: "Dashboard", href: "/dashboard" },
+    ...segments.slice(1).map((seg, i) => ({
+      name: seg.charAt(0).toUpperCase() + seg.slice(1),
+      href: "/dashboard/" + segments.slice(1, i + 2).join("/"),
+    })),
+  ];
+  return (
+    <nav className="flex items-center text-sm text-muted-foreground" aria-label="Breadcrumb">
+      {crumbs.map((crumb, i) => (
+        <span key={crumb.href} className="flex items-center">
+          {i > 0 && <ChevronRight className="mx-2 h-4 w-4 text-gray-300" />}
+          {i < crumbs.length - 1 ? (
+            <Link href={crumb.href} className="hover:underline text-gray-500">
+              {crumb.name}
+            </Link>
+          ) : (
+            <span className="font-medium text-gray-700">{crumb.name}</span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}