Animated logo

src/app/globals.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
@@ -133,7 +133,11 @@ body {
 }
 
 .material-symbols-outlined {
-  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
+    font-variation-settings:
+        "FILL" 1,
+        "wght" 700,
+        "GRAD" 0,
+        "opsz" 24;
 }
 
 .tipilan-logo-letter {

src/components/AnimatedTipilanLogo.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import Image from "next/image";
-import type { AnimationEvent, CSSProperties } from "react";
+import type { CSSProperties } from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 const LOGO_WIDTH = 2092;
 const LOGO_HEIGHT = 300;
@@ -18,24 +18,53 @@ const logoLetters = [
 ] as const;
 
 export default function AnimatedTipilanLogo() {
-  const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+  const [isReducedMotion, setIsReducedMotion] = useState(false);
+  const [loadedCount, setLoadedCount] = useState(0);
+  const [shouldAnimate, setShouldAnimate] = useState(false);
+  const loadedLetterIndicesRef = useRef<Set<number>>(new Set());
 
   useEffect(() => {
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-      setIsAnimationComplete(true);
+      setIsReducedMotion(true);
     }
   }, []);
 
-  if (isAnimationComplete) {
+  useEffect(() => {
+    if (loadedCount >= logoLetters.length) {
+      const rafId = window.requestAnimationFrame(() => {
+        setShouldAnimate(true);
+      });
+
+      return () => window.cancelAnimationFrame(rafId);
+    }
+
+    return undefined;
+  }, [loadedCount]);
+
+  const handleLetterLoad = (index: number) => {
+    if (loadedLetterIndicesRef.current.has(index)) {
+      return;
+    }
+
+    loadedLetterIndicesRef.current.add(index);
+    setLoadedCount(loadedLetterIndicesRef.current.size);
+  };
+
+  if (isReducedMotion) {
     return (
+      <div
+        className="relative z-0 w-[max(260px,min(100%,750px))]"
+        style={{ aspectRatio: `${LOGO_WIDTH} / ${LOGO_HEIGHT}` }}
+      >
         <Image
           src="/tipilan-dark.svg"
-        width={LOGO_WIDTH}
-        height={LOGO_HEIGHT}
           alt="TipiLAN Logo"
           priority
-        className="relative z-0 w-[max(260px,min(100%,750px))] h-auto"
+          fill
+          sizes="(max-width: 750px) 100vw, 750px"
+          className="object-contain"
         />
+      </div>
     );
   }
 
@@ -47,8 +76,6 @@ export default function AnimatedTipilanLogo() {
       style={{ aspectRatio: `${LOGO_WIDTH} / ${LOGO_HEIGHT}` }}
     >
       {logoLetters.map((letter, index) => {
-        const isLastLetter = index === logoLetters.length - 1;
-
         return (
           <Image
             key={`${letter.letter}-${letter.x}`}
@@ -58,22 +85,21 @@ export default function AnimatedTipilanLogo() {
             alt=""
             aria-hidden
             priority
-            className="tipilan-logo-letter absolute top-0 h-full object-fill"
+            className={`absolute top-0 h-full object-fill ${shouldAnimate ? "tipilan-logo-letter" : ""}`}
-            onAnimationEnd={
+            onLoad={() => handleLetterLoad(index)}
-              isLastLetter
+            onError={() => handleLetterLoad(index)}
-                ? (event: AnimationEvent<HTMLImageElement>) => {
-                    if (event.animationName === "tipilan-logo-letter-in") {
-                      setIsAnimationComplete(true);
-                    }
-                  }
-                : undefined
-            }
             style={
               {
                 left: `${(letter.x / LOGO_WIDTH) * 100}%`,
                 width: `${(letter.width / LOGO_WIDTH) * 100}%`,
                 zIndex: logoLetters.length - index,
                 "--tipilan-logo-letter-delay": `${index * 90}ms`,
+                ...(shouldAnimate
+                  ? {}
+                  : {
+                      opacity: 0,
+                      transform: "translate3d(0, 100%, 0)",
+                    }),
               } as CSSProperties
             }
           />

src/components/HeroSection.tsx

@@ -8,7 +8,7 @@ export default function HeroSection() {
   const t = useTranslations("home");
 
   return (
-    <section className="relative h-[569px] overflow-hidden border-b-3 border-[#1F5673]">
+    <section className="relative h-190 md:h-auto md:min-h-142.25 lg:h-142.25 overflow-hidden border-b-3 border-[#1F5673]">
       {/* Background image */}
       <Image
         src="/images/landing/main_teaser.jpg"
@@ -21,11 +21,11 @@ export default function HeroSection() {
       <div className="absolute inset-0 bg-[#0E0F19]/75" />
 
       {/* Content */}
-      <div className="relative h-full grid grid-cols-1 md:grid-cols-[3fr_2fr] items-center gap-8 px-8 md:px-12">
+      <div className="relative h-full grid grid-cols-1 lg:grid-cols-[3fr_2fr] items-center gap-8 px-6 sm:px-8 md:px-12 pt-12 pb-8 md:py-10">
         {/* Left: logo + info + CTA */}
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5 items-center text-center md:items-start md:text-left">
           <AnimatedTipilanLogo />
-          <div className={`${vipnagorgialla.className} relative z-10 font-bold italic`}>
+          <div className={`${vipnagorgialla.className} font-bold italic`}>
             <p className="text-[clamp(1.1rem,0.9rem+1vw,1.75rem)] text-[#00A3E0] uppercase tracking-wide">
               {t("hero.date")}
             </p>
@@ -35,23 +35,25 @@ export default function HeroSection() {
           </div>
           <Link
             href="/piletid"
-            className={`relative z-10 self-start px-6 py-3 bg-[#007CAB] hover:bg-[#00A3E0] text-[#EEE5E5] ${vipnagorgialla.className} font-bold italic text-[clamp(1rem,0.8rem+0.8vw,1.5rem)] uppercase transition`}
+            className={`self-center md:self-start px-6 py-3 bg-[#007CAB] hover:bg-[#00A3E0] text-[#EEE5E5] ${vipnagorgialla.className} font-bold italic text-[clamp(1rem,0.8rem+0.8vw,1.5rem)] uppercase transition`}
           >
             {t("hero.buyTicket")}
           </Link>
         </div>
 
         {/* Right: prize pool + award */}
-        <div className="flex flex-col items-start md:items-end gap-3">
+        <div className="flex flex-col items-center md:items-end gap-3 text-center md:text-right pb-6 md:pb-0">
-          <div className={`${vipnagorgialla.className} font-bold italic text-right`}>
+          <div
-            <p className="text-[64px] leading-none tracking-normal uppercase text-[#EEE5E5]">
+            className={`${vipnagorgialla.className} font-bold italic text-center md:text-right`}
+          >
+            <p className="text-[clamp(2rem,1.5rem+2.5vw,4rem)] leading-none tracking-normal uppercase text-[#EEE5E5]">
               {t("hero.prizePool")}
             </p>
             <h2 className="text-[clamp(3rem,2rem+4vw,6rem)] leading-none text-[#00A3E0]">
               10 000€
             </h2>
           </div>
-          <div className="flex flex-row items-center md:items-center gap-0 mt-2">
+          <div className="flex flex-col sm:flex-row items-center justify-center md:justify-end gap-3 sm:gap-0 mt-2">
             <Image
               src="/images/landing/student_award.webp"
               width={180}
@@ -59,8 +61,12 @@ export default function HeroSection() {
               alt="TalTech student award"
               className="object-contain"
             />
-            <p className={`text-[32px] leading-none tracking-normal uppercase text-right align-middle text-[#EEE5E5] ${vipnagorgialla.className} font-bold italic`}>
+            <p
-              {t("hero.awardPrefix")} <span className="text-[#00A3E0]">{t("hero.awardHighlight")}</span> {t("hero.awardSuffix")}
+              className={`text-[clamp(1.25rem,1rem+1.5vw,2rem)] leading-none tracking-normal uppercase text-center md:text-right align-middle text-[#EEE5E5] ${vipnagorgialla.className} font-bold italic px-2 sm:px-0`}
+            >
+              {t("hero.awardPrefix")}{" "}
+              <span className="text-[#00A3E0]">{t("hero.awardHighlight")}</span>{" "}
+              {t("hero.awardSuffix")}
             </p>
           </div>
         </div>