hero image fills full text column height on desktop

- Grid: items-start → md:items-stretch (both columns same height)
- Image: aspect-[4/5] → md:aspect-auto md:h-full (fills column)
- Mobile keeps aspect-[3/4] for stacked layout
- Bottom of image now lines up with buttons/trust line
This commit is contained in:
2026-03-03 21:17:19 +08:00
parent ac19afce4e
commit c9301edbe8
2 changed files with 191 additions and 66 deletions

View File

@@ -50,7 +50,7 @@ export default function HomePage() {
{/* ━━ HERO (dark) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
<section className="bg-gray-950 overflow-hidden">
<div className="max-w-5xl mx-auto px-6 pt-20 pb-16 md:pt-28 md:pb-20">
<div className="grid md:grid-cols-12 gap-10 md:gap-14 items-start">
<div className="grid md:grid-cols-12 gap-10 md:gap-14 items-start md:items-stretch">
{/* ── Text column ── */}
<div className="md:col-span-7 pt-2 md:pt-6 stagger-children">
@@ -99,7 +99,7 @@ export default function HomePage() {
{/* ── Image column ── */}
<div className="md:col-span-5" style={{ opacity: 0, animation: "fadeUp 0.5s ease-out 0.25s forwards" }}>
<div className="aspect-[3/4] md:aspect-[4/5] w-full relative overflow-hidden">
<div className="aspect-[3/4] md:aspect-auto md:h-full w-full relative overflow-hidden">
<Image
src="/images/landing/00-hero.jpg"
alt="Payment received notification on phone at a charity gala dinner"