Fix dead space: remove max-w-6xl, edge-to-edge heroes, full-width layout

Layout:
- Removed max-w-6xl from <main> — content now fills available width
- Removed padding from <main> — each page manages its own padding
- Heroes go edge-to-edge (no inner margins)
- Content below heroes has p-4 md:p-6 lg:p-8 padding wrapper
- WhatsApp banner has its own margin so it doesn't break hero bleed
- overflow-hidden on main prevents horizontal scroll from heroes

All 6 pages:
- Hero section sits flush against edges (no gaps)
- Content below hero wrapped in padding container
- Two-column grids now use the FULL available width
- On a 1920px screen: sidebar 192px + content fills remaining ~1728px
- Right columns are now substantial (5/12 of full width = ~720px)

pledge-now-pay-later/src/app/dashboard/automations/page.tsx

@@ -152,7 +152,7 @@ export default function AutomationsPage() {
   const overallRate = totalSentAll > 0 ? Math.round((totalConverted / totalSentAll) * 100) : 0
 
   return (
-    <div className="space-y-6">
+    <div>
 
       {/* ━━ HERO — Full-width, same pattern as landing page ━━━━━━━ */}
       <div className="grid md:grid-cols-5 gap-0">
@@ -182,6 +182,9 @@ export default function AutomationsPage() {
         </div>
       </div>
 
+      {/* ── Content with padding ── */}
+      <div className="p-4 md:p-6 lg:p-8 space-y-6">
+
       {/* ━━ TWO-COLUMN LAYOUT — Phone left, education right ━━━━━━ */}
       <div className="grid lg:grid-cols-12 gap-6">
 
@@ -505,6 +508,8 @@ export default function AutomationsPage() {
           </div>
         </div>
       </div>
+
+      </div>
     </div>
   )
 }

pledge-now-pay-later/src/app/dashboard/collect/page.tsx

@@ -186,7 +186,7 @@ export default function CollectPage() {
   // ── No events yet ──
   if (events.length === 0) {
     return (
-      <div className="space-y-8">
+      <div className="p-4 md:p-6 lg:p-8 space-y-8">
         <div>
           <h1 className="text-3xl font-black text-[#111827] tracking-tight">Collect</h1>
           <p className="text-sm text-gray-500 mt-0.5">Create an appeal and share pledge links</p>
@@ -219,10 +219,10 @@ export default function CollectPage() {
   }
 
   return (
-    <div className="space-y-6">
+    <div>
 
       {/* ━━ HERO — Brand photography + context ━━━━━━━━━━━━━━━━━━━ */}
-      <div className="grid md:grid-cols-5 gap-0 mb-6">
+      <div className="grid md:grid-cols-5 gap-0">
         <div className="md:col-span-2 relative min-h-[140px] md:min-h-[180px] overflow-hidden">
           <Image
             src="/images/brand/event-05-qr-scanning.jpg"
@@ -244,6 +244,9 @@ export default function CollectPage() {
         </div>
       </div>
 
+      {/* ── Content with padding ── */}
+      <div className="p-4 md:p-6 lg:p-8 space-y-6">
+
       {/* ── Appeals as visible cards (not hidden in a dropdown) ── */}
       {events.length > 1 && (
         <div className="space-y-2">
@@ -511,6 +514,8 @@ export default function CollectPage() {
         creating={creatingAppeal} onCreate={createAppeal}
         onCancel={() => setShowNewAppeal(false)}
       />}
+
+      </div>
     </div>
   )
 }

pledge-now-pay-later/src/app/dashboard/exports/page.tsx

@@ -77,7 +77,7 @@ export default function ReportsPage() {
   const giftAidReclaimable = Math.round(giftAidTotal * 0.25)
 
   return (
-    <div className="space-y-8">
+    <div>
 
       {/* ━━ HERO — Financial summary as a landing page section ━━━ */}
       <div className="grid md:grid-cols-5 gap-0">
@@ -106,6 +106,9 @@ export default function ReportsPage() {
         </div>
       </div>
 
+      {/* ── Content with padding ── */}
+      <div className="p-4 md:p-6 lg:p-8 space-y-8">
+
       {/* ── Financial breakdown ── */}
       <div className="bg-[#111827] p-6">
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-gray-700">
@@ -384,6 +387,8 @@ export default function ReportsPage() {
           )}
         </div>
       </div>
+
+      </div>
     </div>
   )
 }

pledge-now-pay-later/src/app/dashboard/layout.tsx

@@ -156,7 +156,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         </nav>
 
         {/* Main content — white background, generous padding */}
-        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 md:pb-8 max-w-6xl">
+        <main className="flex-1 pb-20 md:pb-8 overflow-hidden">
           <WhatsAppBanner />
           {children}
         </main>
@@ -182,7 +182,7 @@ function WhatsAppBanner() {
   if (status === "CONNECTED" || status === "skip" || status === null || dismissed) return null
 
   return (
-    <div className="mb-6 border-l-2 border-[#F59E0B] bg-[#F59E0B]/5 p-4 flex items-start gap-3">
+    <div className="mx-4 md:mx-6 lg:mx-8 mt-4 md:mt-6 lg:mt-8 border-l-2 border-[#F59E0B] bg-[#F59E0B]/5 p-4 flex items-start gap-3">
       <AlertTriangle className="h-5 w-5 text-[#F59E0B] shrink-0 mt-0.5" />
       <div className="flex-1 min-w-0">
         <p className="text-sm font-bold text-[#111827]">WhatsApp not connected — reminders won&apos;t send</p>

pledge-now-pay-later/src/app/dashboard/page.tsx

@@ -134,7 +134,7 @@ export default function DashboardPage() {
     : "Friends at a charity dinner — where pledges begin"
 
   return (
-    <div className="space-y-6">
+    <div>
 
       {/* ━━ HERO — Brand photography + the one thing that matters ━━━ */}
       <div className="grid md:grid-cols-5 gap-0">
@@ -202,6 +202,9 @@ export default function DashboardPage() {
         </div>
       </div>
 
+      {/* ── Content with padding ── */}
+      <div className="p-4 md:p-6 lg:p-8 space-y-6">
+
       {/* ── Empty state: Share your link ── */}
       {isEmpty && pledgeLink && (
         <div className="space-y-6">
@@ -487,6 +490,8 @@ export default function DashboardPage() {
           </div>
         </>
       )}
+
+      </div>
     </div>
   )
 }

pledge-now-pay-later/src/app/dashboard/pledges/page.tsx

@@ -258,10 +258,10 @@ export default function MoneyPage() {
   if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="h-6 w-6 text-[#1E40AF] animate-spin" /></div>
 
   return (
-    <div className="space-y-6">
+    <div>
 
       {/* ━━ HERO — Dark stats panel like landing page ━━━━━━━━━━━━ */}
-      <div className="grid md:grid-cols-5 gap-0 mb-6">
+      <div className="grid md:grid-cols-5 gap-0">
         <div className="md:col-span-2 relative min-h-[140px] md:min-h-[180px] overflow-hidden">
           <Image
             src="/images/brand/ops-06-counting-money.jpg"
@@ -284,6 +284,9 @@ export default function MoneyPage() {
         </div>
       </div>
 
+      {/* ── Content with padding ── */}
+      <div className="p-4 md:p-6 lg:p-8 space-y-6">
+
       {/* ── Stats bar (clickable filters) ── */}
       <div className="grid grid-cols-2 lg:grid-cols-5 gap-px bg-gray-200">
         {[
@@ -789,6 +792,8 @@ export default function MoneyPage() {
           </div>
         </div>
       </div>
+
+      </div>
     </div>
   )
 }

pledge-now-pay-later/src/app/dashboard/settings/page.tsx

@@ -186,10 +186,10 @@ export default function SettingsPage() {
     : `${totalCount - doneCount} thing${totalCount - doneCount > 1 ? "s" : ""} left before you go live.`
 
   return (
-    <div className="space-y-6">
+    <div>
 
       {/* ── Header — human progress, not a form page ── */}
-      <div className={`p-6 mb-6 ${doneCount === totalCount ? "bg-[#16A34A]" : "bg-[#111827]"}`}>
+      <div className={`p-6 ${doneCount === totalCount ? "bg-[#16A34A]" : "bg-[#111827]"}`}>
         <div className="border-l-2 border-[#F59E0B] pl-3 mb-3">
           <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">Settings</p>
         </div>
@@ -208,6 +208,9 @@ export default function SettingsPage() {
         </div>
       </div>
 
+      {/* ── Content with padding ── */}
+      <div className="p-4 md:p-6 lg:p-8 space-y-6">
+
       {error && <div className="border-l-2 border-[#DC2626] bg-[#DC2626]/5 p-3 text-sm text-[#DC2626]">{error}</div>}
 
       {/* ━━ TWO-COLUMN: Checklist left, Education right ━━━━━━ */}
@@ -584,6 +587,8 @@ export default function SettingsPage() {
       </div>
 
       </div>
+
+      </div>
     </div>
   )
 }