Tighten homepage hero spacing under top navigation

[feynon]

Motivation

• Reduce the vertical gap below the sticky top navbar so the hero content sits higher above the fold while keeping a clean, premium layout.
• Prefer fixing the source of excess spacing (redundant wrapper padding) instead of using negative margins or structural changes.

Description

• Removed the redundant computed top padding on the homepage hero <main> wrapper and left only the safe-area inset padding (pt-[env(safe-area-inset-top,0px)]).
• Moved the explicit top offset into the inner page container and changed vertical alignment from items-center to items-start so the hero content aligns toward the top of the viewport.
• Applied an 8px-scale offset on the inner container with pt-10 (40px) mobile, sm:pt-12 (48px) tablet, and lg:pt-14 (56px) desktop to meet the requested spacing ranges.
• Preserved existing typography, grid layout, and visual assets; left safe-area handling intact for notch devices.

Testing

• Ran npm run -s lint, which failed due to the repository expecting a flat ESLint config file that is not present in this environment.
• Ran npm run -s build, which failed in this environment because Next.js could not fetch Google Fonts (TLS/fetch error), unrelated to the spacing changes.
• No other automated tests were available or executed; the change is limited to components/home-content.tsx and is minimal and local in scope.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tiles-next	Ready	Preview, Comment, Open in v0	Apr 20, 2026 8:02am