From 01f62c8041be32b24c1d1f42f4ca8e5a4337177f Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sun, 14 Jun 2026 17:15:12 +0200
Subject: [PATCH] fix(home/hero): anchor content to top on mobile

The full-height hero centered its content vertically, leaving a ~188px
dead band between the header and the tagline on phones. Anchor the
content near the top (justify-start + small top padding) below lg, and
keep the centered treatment from lg up. Gap drops 188px -> 48px on
mobile; desktop stays vertically centered.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/views/HomeView.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 06a349a..0e79112 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -56,8 +56,10 @@ const featuredEvents = [
       class="fixed inset-0 -z-50 h-screen w-screen object-cover"
     />
 
-    <!-- Hero: full-viewport, transparent over the pinned backdrop -->
-    <section class="relative isolate flex min-h-screen flex-col items-center justify-center overflow-hidden">
+    <!-- Hero: full-viewport, transparent over the pinned backdrop. Content is
+         anchored near the top on mobile (avoids a tall dead band under the
+         header) and vertically centered from lg up. -->
+    <section class="relative isolate flex min-h-screen flex-col items-center justify-start overflow-hidden pt-12 sm:pt-16 lg:justify-center lg:pt-0">
       <div
         class="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-background/55 to-transparent"
       ></div>