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)
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user