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/branding/logo.tsx

@@ -0,0 +1,27 @@
+import Image from "next/image";
+import { cn } from "~/lib/utils";
+
+interface LogoProps {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function Logo({ className, size = "md" }: LogoProps) {
+  const sizeClasses = {
+    sm: { width: 120, height: 32 },
+    md: { width: 160, height: 42 },
+    lg: { width: 240, height: 64 },
+  };
+  const { width, height } = sizeClasses[size];
+
+  return (
+    <Image
+      src="/beenvoice-logo.svg"
+      alt="beenvoice logo"
+      width={width} 
+      height={height} 
+      className={className}
+      priority
+    />
+  );
+}