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/app/dashboard/clients/[id]/edit/page.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { HydrateClient } from "~/trpc/server";
-import { ClientForm } from "~/components/client-form";
-import { PageHeader } from "~/components/page-header";
+import { ClientForm } from "~/components/forms/client-form";
+import { PageHeader } from "~/components/layout/page-header";
 
 interface EditClientPageProps {
   params: Promise<{ id: string }>;

src/app/dashboard/clients/[id]/page.tsx

@@ -3,7 +3,7 @@ import { api } from "~/trpc/server";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
 import { Badge } from "~/components/ui/badge";
-import { PageHeader } from "~/components/page-header";
+import { PageHeader } from "~/components/layout/page-header";
 import Link from "next/link";
 import {
   Edit,

src/app/dashboard/clients/_components/clients-data-table.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Button } from "~/components/ui/button";
-import { DataTable, DataTableColumnHeader } from "~/components/ui/data-table";
+import { DataTable, DataTableColumnHeader } from "~/components/data/data-table";
 import { UserPlus, Pencil, Trash2 } from "lucide-react";
 import { useState } from "react";
 import {

src/app/dashboard/clients/_components/clients-table.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { api } from "~/trpc/react";
-import { DataTableSkeleton } from "~/components/ui/data-table";
+import { DataTableSkeleton } from "~/components/data/data-table";
 import { ClientsDataTable } from "./clients-data-table";
 
 export function ClientsTable() {

src/app/dashboard/clients/new/page.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { HydrateClient } from "~/trpc/server";
-import { ClientForm } from "~/components/client-form";
-import { PageHeader } from "~/components/page-header";
+import { ClientForm } from "~/components/forms/client-form";
+import { PageHeader } from "~/components/layout/page-header";
 
 export default async function NewClientPage() {
   return (

src/app/dashboard/clients/page.tsx

@@ -3,8 +3,8 @@ import { HydrateClient } from "~/trpc/server";
 import { Button } from "~/components/ui/button";
 import { Plus } from "lucide-react";
 import { ClientsTable } from "./_components/clients-table";
-import { PageHeader } from "~/components/page-header";
-import { PageContent, PageSection } from "~/components/ui/page-layout";
+import { PageHeader } from "~/components/layout/page-header";
+import { PageContent, PageSection } from "~/components/layout/page-layout";
 
 export default async function ClientsPage() {
   return (