Tons of fixes to every page

src/components/TeaserCarousel.tsx

@@ -25,7 +25,8 @@ function highlightLAN(text: string) {
       const suffix = part.slice(7); // Everything after "TIPILAN"
       return (
         <span key={i}>
-          TIPI<span className="text-[#00A3E0]">LAN</span>{suffix.toUpperCase()}
+          TIPI<span className="text-[#00A3E0]">LAN</span>
+          {suffix.toUpperCase()}
         </span>
       );
     }
@@ -34,16 +35,40 @@ function highlightLAN(text: string) {
 }
 
 const slides: Slide[] = [
-  { key: "compete", image: "/images/landing/compete_teaser.jpg", imageAlt: "Võistle", hero: "/images/landing/compete_hero.png", href: "/turniirid" },
-  { key: "play",    image: "/images/landing/play_teaser.png",    imageAlt: "Mängi",   hero: "/images/landing/play_hero.png",    href: "/piletid",  flip: true,  fullBrightness: true },
-  { key: "explore", image: "/images/landing/explore_teaser.png", imageAlt: "Avasta",  hero: "/images/landing/explore_hero.png", href: "/messiala", fullBrightness: true },
+  {
+    key: "compete",
+    image: "/images/landing/compete_teaser.jpg",
+    imageAlt: "Võistle",
+    hero: "/images/landing/compete_hero.png",
+    href: "/turniirid",
+  },
+  {
+    key: "play",
+    image: "/images/landing/play_teaser.png",
+    imageAlt: "Mängi",
+    hero: "/images/landing/play_hero.png",
+    href: "/piletid",
+    flip: true,
+    fullBrightness: true,
+  },
+  {
+    key: "explore",
+    image: "/images/landing/explore_teaser.png",
+    imageAlt: "Avasta",
+    hero: "/images/landing/explore_hero.png",
+    href: "/messiala",
+    fullBrightness: true,
+  },
 ];
 
 export default function TeaserCarousel() {
   const t = useTranslations("home.teaser");
   const [current, setCurrent] = useState(0);
 
-  const next = useCallback(() => setCurrent((c) => (c + 1) % slides.length), []);
+  const next = useCallback(
+    () => setCurrent((c) => (c + 1) % slides.length),
+    [],
+  );
   const prev = () => setCurrent((c) => (c - 1 + slides.length) % slides.length);
 
   useEffect(() => {
@@ -60,7 +85,7 @@ export default function TeaserCarousel() {
           style={{ transform: `translateX(-${current * 100}%)` }}
         >
           {slides.map((slide) => {
-            const title       = t(`${slide.key}.title`);
+            const title = t(`${slide.key}.title`);
             const description = t(`${slide.key}.description`);
             return (
               <div key={slide.key} className="relative flex-none w-full h-full">
@@ -72,19 +97,29 @@ export default function TeaserCarousel() {
                   className="object-cover object-center"
                 />
                 {/* Overlay */}
-                <div className={`absolute inset-0 ${slide.fullBrightness ? "" : "bg-gradient-to-r from-[#0E0F19]/90 via-[#0E0F19]/60 to-[#0E0F19]/20"}`} />
+                <div
+                  className={`absolute inset-0 ${slide.fullBrightness ? "" : "bg-gradient-to-r from-[#0E0F19]/90 via-[#0E0F19]/60 to-[#0E0F19]/20"}`}
+                />
 
                 {/* Content */}
-                <div className={`relative grid grid-cols-1 md:grid-cols-2 h-full ${slide.flip ? "md:[direction:rtl]" : ""}`}>
-                  <div className={`flex flex-col justify-between px-8 py-8 md:px-12 md:py-10 ${slide.flip ? "md:[direction:ltr]" : ""}`}>
+                <div
+                  className={`relative grid grid-cols-1 md:grid-cols-2 h-full ${slide.flip ? "md:[direction:rtl]" : ""}`}
+                >
+                  <div
+                    className={`flex flex-col justify-between px-8 py-8 md:px-12 md:py-10 ${slide.flip ? "md:[direction:ltr]" : ""}`}
+                  >
                     {/* Heading at top */}
-                    <h2 className={`${vipnagorgialla.className} font-bold italic text-[64px] leading-none tracking-normal uppercase text-[#EEE5E5]`}>
+                    <h2
+                      className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,1.5rem+4.5vw,4rem)] md:text-[64px] leading-none tracking-normal uppercase text-[#EEE5E5]`}
+                    >
                       {highlightLAN(t("heading"))}
                     </h2>
                     {/* Title + description at bottom */}
                     <div className="flex flex-col gap-3 pb-16">
                       <Link href={slide.href}>
-                        <h3 className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+2.5vw,5rem)] leading-none text-[#EEE5E5] hover:text-[#00A3E0] transition`}>
+                        <h3
+                          className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+2.5vw,5rem)] leading-none text-[#EEE5E5] hover:text-[#00A3E0] transition`}
+                        >
                           {title}
                         </h3>
                       </Link>
@@ -94,7 +129,9 @@ export default function TeaserCarousel() {
                     </div>
                   </div>
                   {/* Hero image */}
-                  <div className={`hidden md:block relative ${slide.flip ? "md:[direction:ltr]" : ""}`}>
+                  <div
+                    className={`hidden md:block relative ${slide.flip ? "md:[direction:ltr]" : ""}`}
+                  >
                     <Image
                       src={slide.hero}
                       alt={slide.imageAlt}
@@ -111,32 +148,34 @@ export default function TeaserCarousel() {
         {/* Arrow buttons */}
         <button
           onClick={prev}
-          className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition"
+          className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition z-20"
           aria-label="Previous slide"
         >
           <span className="material-symbols-outlined">chevron_left</span>
         </button>
         <button
           onClick={next}
-          className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition"
+          className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition z-20"
           aria-label="Next slide"
         >
           <span className="material-symbols-outlined">chevron_right</span>
         </button>
-      </div>
 
-      {/* Navigation dots */}
-      <div className="flex justify-center gap-3 py-5">
-        {slides.map((_, i) => (
-          <button
-            key={i}
-            onClick={() => setCurrent(i)}
-            className={`w-3 h-3 rounded-full transition ${
-              i === current ? "bg-[#007CAB]" : "bg-[#1F5673] hover:bg-[#007CAB]/60"
-            }`}
-            aria-label={`Slide ${i + 1}`}
-          />
-        ))}
+        {/* Navigation dots */}
+        <div className="absolute bottom-5 left-1/2 -translate-x-1/2 flex justify-center gap-3 z-20 px-3 py-2 bg-[#0E0F19]/50 backdrop-blur-md">
+          {slides.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => setCurrent(i)}
+              className={`w-3 h-3 rounded-full transition ${
+                i === current
+                  ? "bg-[#00A3E0]"
+                  : "bg-[#1F5673] hover:bg-[#007CAB]/60"
+              }`}
+              aria-label={`Slide ${i + 1}`}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );