Merge pull request #169 from sergiocarracedo/feat/revamp

fix: mobile hero

Author: sergiocarracedo

src/components/home/HeroSection.astro

@@ -43,19 +43,21 @@ const titleHtml = renderTitleMarkdown(t.titleMarkdown)
   style="--reveal-delay: 20ms;"
 >
   <HeroShader />
-  <section class="relative mb-24 px-4 pt-26 sm:px-8 sm:pt-28 xl:px-12">
-    <div class="vt-content-shell grid grid-cols-12 items-end gap-8 lg:gap-12">
-      <div class="col-span-12 lg:col-span-7 pr-6 sm:pr-4">
+  <section class="relative mb-24 px-2 pt-20 sm:px-8 sm:pt-28 xl:px-12">
+    <div
+      class="vt-content-shell grid grid-cols-1 items-end gap-8 lg:grid-cols-12 lg:gap-12"
+    >
+      <div class="min-w-0 w-full overflow-hidden pr-0 sm:pr-4 lg:col-span-7">
         <div
           class="relative overflow-hidden rounded-xl px-4 py-8 sm:px-8 sm:py-12"
         >
           <div class="relative z-10">
             <h1
-              class="font-headline text-4xl tracking-tight text-white drop-shadow-[0_6px_24px_rgba(0,0,0,0.65)] sm:text-6xl lg:text-8xl lg:leading-[0.9]"
+              class="max-w-full text-balance wrap-break-word font-headline text-4xl leading-[1.02] tracking-tight text-white drop-shadow-[0_6px_24px_rgba(0,0,0,0.65)] sm:text-6xl sm:leading-[0.95] lg:text-8xl lg:leading-[0.9]"
               set:html={titleHtml}
             />
             <p
-              class="mt-6 max-w-2xl text-base leading-relaxed text-white sm:text-xl"
+              class="mt-6 max-w-2xl wrap-break-word text-base leading-relaxed text-white sm:text-xl"
             >
               {t.description}
             </p>

src/components/home/UpcomingEventsPanel.astro

@@ -21,17 +21,17 @@ const activeUpcomingEvents = upcomingEvents.filter(
 {
   activeUpcomingEvents.length > 0 && (
     <aside
-      class="col-span-12 h-full lg:col-span-5 lg:block lg:pt-8"
+      class="h-full min-w-0 max-w-full lg:block lg:col-span-5 lg:pt-8"
       data-upcoming-events-panel
       data-buffer-ms="7200000"
     >
-      <div class="flex h-[32rem] flex-col overflow-hidden rounded-xl bg-white/25 p-5 text-ink backdrop-blur-xl">
+      <div class="flex h-[32rem] min-w-0 w-full max-w-full flex-col overflow-hidden rounded-xl bg-white/25 p-5 text-ink backdrop-blur-xl">
         <div class="mb-4 flex items-center justify-between">
           <p class="text-xs font-semibold tracking-[0.14em] text-ink-contrast uppercase">
             {t.upcomingEvents} ({activeUpcomingEvents.length})
           </p>
         </div>
-        <div class="flex flex-1 flex-col gap-3 overflow-y-auto pr-1">
+        <div class="flex min-w-0 flex-1 flex-col gap-3 overflow-y-auto pr-1">
           {activeUpcomingEvents.map((event) => (
             <div data-event-card data-event-date={event.data.date}>
               <UpcomingEventCard event={event} />

src/components/home/upcoming-event-card/UpcomingEventCard.astro

@@ -13,7 +13,7 @@ const { event } = Astro.props
 const t = homeHeroT[LANG]
 
 const cardClass =
-  'block rounded-lg bg-white/40 p-3 text-ink-contrast transition-transform hover:-translate-y-0.5'
+  'block rounded-lg bg-white/40 p-3 text-ink-contrast transition-transform hover:-translate-y-0.5 max-w-full'
 ---
 
 {

src/components/home/upcoming-event-card/UpcomingEventCardContent.astro

@@ -27,7 +27,7 @@ const formatTime = (dateValue: number): string =>
     .replace(/\./g, '')
 ---
 
-<div class="flex items-start justify-between gap-3">
+<div class="flex items-start justify-between gap-3 max-w-full">
   <div>
     <div class="mb-3 flex items-start gap-3">
       <GroupLogo