From 1ce8c04b642c7a886ca5c4c8fa1d43b9db4af939 Mon Sep 17 00:00:00 2001
From: Arto Reinik <artoreinik@gmail.com>
Date: Thu, 26 Mar 2026 12:38:35 +0200
Subject: [PATCH] frontend: fix hero section for mobile

---
 src/app/globals.css                   | 76 ++++++++++++++++++++++++++-
 src/components/teaser/HeroSection.tsx | 44 ++++++++++------
 translations/en.json                  |  6 ++-
 translations/et.json                  |  6 ++-
 4 files changed, 112 insertions(+), 20 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index db652f6..886c8fb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -92,6 +92,15 @@ body {
   text-transform: uppercase;
 }
 
+@utility text-btn {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-style: italic;
+  font-size: 16px;
+  line-height: 100%;
+  text-transform: uppercase;
+}
+
 @utility text-p-lg {
   font-family: var(--font-body);
   font-weight: 400;
@@ -106,7 +115,7 @@ body {
   line-height: 100%;
 }
 
-@utility text-countdown {
+@utility text-countdown-lg {
   font-family: var(--font-heading);
   font-weight: 700;
   font-style: italic;
@@ -115,7 +124,16 @@ body {
   text-transform: uppercase;
 }
 
-@utility text-countdown-label {
+@utility text-countdown {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-style: italic;
+  font-size: clamp(24px, 4vw, 32px);
+  line-height: 100%;
+  text-transform: uppercase;
+}
+
+@utility text-countdown-label-lg {
   font-family: var(--font-heading);
   font-weight: 700;
   font-style: italic;
@@ -124,6 +142,15 @@ body {
   text-transform: uppercase;
 }
 
+@utility text-countdown-label {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-style: italic;
+  font-size: 12px;
+  line-height: 100%;
+  text-transform: uppercase;
+}
+
 /* ===== 2026 Effect Utilities ===== */
 @utility shadow-teaser {
   filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
@@ -155,6 +182,27 @@ body {
   }
 }
 
+@utility btn-primary {
+  background-color: var(--color-primary);
+  color: var(--color-bg-dark);
+  padding: 12px;
+  min-width: 48px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: background-color 0.1s, color 0.1s;
+
+  &:hover {
+    background-color: var(--color-text-light);
+  }
+
+  &:active {
+    background-color: var(--color-primary);
+  }
+}
+
 @utility btn-secondary-lg {
   background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
   color: var(--color-text-light);
@@ -179,6 +227,30 @@ body {
   }
 }
 
+@utility btn-secondary {
+  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+  color: var(--color-text-light);
+  box-shadow: inset 0 0 0 4px var(--color-primary);
+  padding: 12px;
+  min-width: 48px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: var(--color-primary);
+    color: var(--color-bg-dark);
+  }
+
+  &:active {
+    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+    color: var(--color-text-light);
+  }
+}
+
 /* ===== Scrollbar hidden utility ===== */
 @utility scrollbar-hidden {
   -ms-overflow-style: none;
diff --git a/src/components/teaser/HeroSection.tsx b/src/components/teaser/HeroSection.tsx
index 6017f42..bffcd39 100644
--- a/src/components/teaser/HeroSection.tsx
+++ b/src/components/teaser/HeroSection.tsx
@@ -17,7 +17,7 @@ export default function HeroSection({ onScrollDown }: HeroSectionProps) {
   const pad = (n: number) => String(n).padStart(2, "0");
 
   return (
-    <section className="relative h-dvh w-full overflow-hidden">
+    <section className="relative min-h-dvh content-center max-h-min w-full overflow-hidden">
       {/* Background */}
       <Image
         src="/images/backgrounds/hero_teaser.webp"
@@ -37,7 +37,7 @@ export default function HeroSection({ onScrollDown }: HeroSectionProps) {
       </div>
 
       {/* Center content */}
-      <div className="relative z-1 flex flex-col items-center justify-center h-full gap-8 lg:gap-16 px-6">
+      <div className="relative z-1 flex flex-col items-center justify-center h-full gap-8 lg:gap-16 px-6 pt-24 pb-12 lg:pt-0 lg:pb-0">
         {/* Logo */}
         <Image
           src="/tipilan-logo.svg"
@@ -49,25 +49,37 @@ export default function HeroSection({ onScrollDown }: HeroSectionProps) {
         />
 
         {/* Countdown */}
-        <div className="grid grid-cols-[1fr_auto_1fr] sm:flex gap-x-1.5 gap-y-3 sm:gap-4 text-center items-start">
+        <div className="flex gap-1.5 sm:gap-4 text-center items-start justify-center flex-wrap">
           <div className="flex flex-col items-center gap-2 lg:gap-4 min-w-0 lg:w-[104px]">
-            <span className="text-countdown text-text-light">{countdown.days}</span>
-            <span className="text-countdown-label text-primary whitespace-nowrap">{t("teaser.countdown.days")}</span>
+            <span className="text-countdown lg:text-countdown-lg text-text-light">{countdown.days}</span>
+            <span className="text-countdown-label lg:text-countdown-label-lg text-primary whitespace-nowrap">
+              <span className="lg:hidden">{t("teaser.countdown.daysShort")}</span>
+              <span className="hidden lg:inline">{t("teaser.countdown.days")}</span>
+            </span>
           </div>
-          <span className="text-countdown text-primary sm:block">:</span>
+          <span className="text-countdown lg:text-countdown-lg text-primary">:</span>
           <div className="flex flex-col items-center gap-2 lg:gap-4 min-w-0 lg:w-[86px]">
-            <span className="text-countdown text-text-light">{pad(countdown.hours)}</span>
-            <span className="text-countdown-label text-primary whitespace-nowrap">{t("teaser.countdown.hours")}</span>
+            <span className="text-countdown lg:text-countdown-lg text-text-light">{pad(countdown.hours)}</span>
+            <span className="text-countdown-label lg:text-countdown-label-lg text-primary whitespace-nowrap">
+              <span className="lg:hidden">{t("teaser.countdown.hoursShort")}</span>
+              <span className="hidden lg:inline">{t("teaser.countdown.hours")}</span>
+            </span>
           </div>
-          <span className="text-countdown text-primary hidden sm:block">:</span>
+          <span className="text-countdown lg:text-countdown-lg text-primary">:</span>
           <div className="flex flex-col items-center gap-2 lg:gap-4 min-w-0 lg:w-[86px]">
-            <span className="text-countdown text-text-light">{pad(countdown.minutes)}</span>
-            <span className="text-countdown-label text-primary whitespace-nowrap">{t("teaser.countdown.minutes")}</span>
+            <span className="text-countdown lg:text-countdown-lg text-text-light">{pad(countdown.minutes)}</span>
+            <span className="text-countdown-label lg:text-countdown-label-lg text-primary whitespace-nowrap">
+              <span className="lg:hidden">{t("teaser.countdown.minutesShort")}</span>
+              <span className="hidden lg:inline">{t("teaser.countdown.minutes")}</span>
+            </span>
           </div>
-          <span className="text-countdown text-primary sm:block">:</span>
+          <span className="text-countdown lg:text-countdown-lg text-primary">:</span>
           <div className="flex flex-col items-center gap-2 lg:gap-4 min-w-0 lg:w-[103px]">
-            <span className="text-countdown text-text-light">{pad(countdown.seconds)}</span>
-            <span className="text-countdown-label text-primary whitespace-nowrap">{t("teaser.countdown.seconds")}</span>
+            <span className="text-countdown lg:text-countdown-lg text-text-light">{pad(countdown.seconds)}</span>
+            <span className="text-countdown-label lg:text-countdown-label-lg text-primary whitespace-nowrap">
+              <span className="lg:hidden">{t("teaser.countdown.secondsShort")}</span>
+              <span className="hidden lg:inline">{t("teaser.countdown.seconds")}</span>
+            </span>
           </div>
         </div>
 
@@ -88,13 +100,13 @@ export default function HeroSection({ onScrollDown }: HeroSectionProps) {
             href="https://fienta.com/tipilan-2026"
             target="_blank"
             rel="noopener noreferrer"
-            className="btn-primary-lg text-btn-lg hover:opacity-80 text-center"
+            className="btn-primary lg:btn-primary-lg text-btn lg:text-btn-lg hover:opacity-80 text-center"
           >
             {t("teaser.tickets.buyButton")}
           </a>
           <a
             href="mailto:tipilan@ituk.ee"
-            className="btn-secondary-lg text-btn-lg text-center"
+            className="btn-secondary-lg lg:btn-secondary-lg text-btn lg:text-btn-lg text-center"
           >
             {t("teaser.sponsors.contactButton")}
           </a>
diff --git a/translations/en.json b/translations/en.json
index 7735e16..862fe06 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -2,9 +2,13 @@
   "teaser": {
     "countdown": {
       "days": "days",
+      "daysShort": "day",
       "hours": "hours",
+      "hoursShort": "hour",
       "minutes": "minutes",
-      "seconds": "seconds"
+      "minutesShort": "min",
+      "seconds": "seconds",
+      "secondsShort": "sec"
     },
     "carousel": {
       "heading": "Come to Tipi",
diff --git a/translations/et.json b/translations/et.json
index bfc4cb3..563ed62 100644
--- a/translations/et.json
+++ b/translations/et.json
@@ -2,9 +2,13 @@
   "teaser": {
     "countdown": {
       "days": "päeva",
+      "daysShort": "päev",
       "hours": "tundi",
+      "hoursShort": "tund",
       "minutes": "minutit",
-      "seconds": "sekundit"
+      "minutesShort": "min",
+      "seconds": "sekundit",
+      "secondsShort": "sek"
     },
     "carousel": {
       "heading": "Tule Tipi",