fix headline rhythm + wider hero image + 10x faster deploys

HEADLINE:
- 3 balanced lines: 'Turn I'll donate' / 'into money' / 'in the bank.'
- Removed   that orphaned 'money' on its own line
- <br className='hidden lg:block'> controls breaks on desktop only

IMAGE:
- Hero container: max-w-5xl -> max-w-7xl (image 25% wider)
- Stat strip widened to match
- Much more of the gala scene visible, phone prominent

DEPLOY SPEED (deploy.sh):
- Persistent /opt/pnpl/ build dir (no temp dir creation/deletion)
- BuildKit with cache mounts (npm + .next/cache)
- No more docker builder prune / docker rmi (preserves cache!)
- Installed docker-buildx v0.31.1 on server
- Before: ~245s (4+ min)  After: ~29s (cached) / ~136s (first)
- Use: cd pledge-now-pay-later && bash deploy.sh
This commit is contained in:
2026-03-03 21:37:34 +08:00
parent c9301edbe8
commit f0b1cb2f3a
5 changed files with 173 additions and 27 deletions

View File

@@ -49,8 +49,8 @@ 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 md:items-stretch">
<div className="max-w-7xl 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-12 items-start md:items-stretch">
{/* ── Text column ── */}
<div className="md:col-span-7 pt-2 md:pt-6 stagger-children">
@@ -63,7 +63,7 @@ export default function HomePage() {
{/* Headline — Display scale */}
<h1 className="text-[2.75rem] leading-[0.95] sm:text-6xl md:text-[4.25rem] lg:text-7xl font-black text-white tracking-tighter">
Turn &ldquo;I&apos;ll donate&rdquo; into money in&nbsp;the&nbsp;bank.
Turn &ldquo;I&apos;ll donate&rdquo;<br className="hidden lg:block" /> into money<br className="hidden lg:block" /> in the bank.
</h1>
{/* Sub */}
@@ -117,7 +117,7 @@ export default function HomePage() {
{/* Stat strip — gap-px pattern (signature pattern 2) */}
<div className="border-t border-gray-800/50">
<div className="max-w-5xl mx-auto">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-800/50">
{HERO_STATS.map((s) => (
<div key={s.stat} className="bg-gray-950 py-6 px-6">