update sponsor sections and ticker

2026-09-22 15:22:59 +00:00 · 2026-09-05 23:41:38 +03:00
parent a2a42da5b6
commit a643f19a56
10 changed files with 254 additions and 193 deletions
--- a/src/components/Sponsors.tsx
+++ b/src/components/Sponsors.tsx
@@ -4,6 +4,7 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import NextLink from "next/link";
+import { useEffect, useRef, useState } from "react";

 interface Sponsor {
  href: string;
@@ -14,7 +15,7 @@ interface Sponsor {
  className?: string;
 }

-const sponsors: Sponsor[] = [
+const highlightedSponsors: Sponsor[] = [
  {
    href: "https://taltech.ee",
    src: "/sponsors/taltech-color.png",
@@ -24,39 +25,17 @@ const sponsors: Sponsor[] = [
  },
  {
    href: "https://www.redbull.com/ee-et/",
-    src: "/sponsors/redbull.png",
-    alt: "Redbull",
-    width: 80,
-    height: 80,
+    src: "/sponsors/redbull-wordmark.png",
+    alt: "Red Bull",
+    width: 3509,
+    height: 2480,
  },
  {
-    href: "https://www.simracing.ee/",
-    src: "/sponsors/EVAL.png",
-    alt: "EVAL",
-    width: 200,
-    height: 200,
-  },
-  {
-    href: "https://www.instagram.com/baltic_fighting_game_league/",
-    src: "/sponsors/BFGL.png",
-    alt: "BFGL",
-    width: 192,
-    height: 192,
-  },
-  {
-    href: "https://www.tomorrow.ee/",
-    src: "/sponsors/nt.png",
-    alt: "Network Tomorrow",
-    width: 300,
-    height: 200,
-  },
-  {
-    href: "https://k-space.ee/",
-    src: "/sponsors/k-space_ee-white.png",
-    alt: "K-Space",
-    width: 244,
-    height: 244,
-    className: "not-dark:invert",
+    href: "https://www.stillframe.ee/",
+    src: "/sponsors/Still_Frame_logo_2020_Gold_2.png",
+    alt: "Still Frame",
+    width: 1335,
+    height: 1617,
  },
  {
    href: "https://globalproductions.ee/",
@@ -65,6 +44,74 @@ const sponsors: Sponsor[] = [
    width: 244,
    height: 244,
  },
+  {
+    href: "https://www.tomorrow.ee/",
+    src: "/sponsors/nt.png",
+    alt: "Network Tomorrow",
+    width: 300,
+    height: 200,
+  },
+  {
+    href: "https://arvutitark.ee/",
+    src: "/sponsors/arvutitark.svg",
+    alt: "Arvutitark",
+    width: 344,
+    height: 344,
+  },
+  {
+    href: "https://www.alecoq.ee/",
+    src: "/sponsors/alecoq.svg",
+    alt: "A. Le Coq",
+    width: 842,
+    height: 595,
+  },
+  {
+    href: "https://www.tallinn.ee/et/haridusamet",
+    src: "/sponsors/Tallinna_Haridusamet_logo_RGB.svg",
+    alt: "Tallinna Haridusamet",
+    width: 244,
+    height: 244,
+  },
+  {
+    href: "https://balsnack.ee/",
+    src: "/sponsors/balsnack.svg",
+    alt: "Balsnack",
+    width: 123,
+    height: 48,
+  },
+  {
+    href: "https://www.teamspeak.com/",
+    src: "/sponsors/TS_InLine_BlueLight.svg",
+    alt: "TeamSpeak",
+    width: 344,
+    height: 344,
+  },
+];
+
+const sponsors: Sponsor[] = [
+  // Gaming and technology
+  {
+    href: "https://k-space.ee/",
+    src: "/sponsors/k-space_ee-white.png",
+    alt: "K-Space",
+    width: 244,
+    height: 244,
+    className: "not-dark:invert",
+  },
+  {
+    href: "https://www.instagram.com/baltic_fighting_game_league/",
+    src: "/sponsors/BFGL.png",
+    alt: "BFGL",
+    width: 192,
+    height: 192,
+  },
+  {
+    href: "https://www.simracing.ee/",
+    src: "/sponsors/EVAL.png",
+    alt: "EVAL",
+    width: 200,
+    height: 200,
+  },
  {
    href: "https://www.linkedin.com/company/gamedev-guild/",
    src: "/sponsors/estonian_gamedev_guild.png",
@@ -73,6 +120,20 @@ const sponsors: Sponsor[] = [
    height: 244,
    className: "not-dark:invert",
  },
+  {
+    href: "https://www.egda.ee/",
+    src: "/sponsors/EGDA.png",
+    alt: "Estonian Game Developers Association",
+    width: 344,
+    height: 344,
+  },
+  {
+    href: "https://www.rara.ee/en/events/interactive-video-game-museum-lvlup/",
+    src: "/sponsors/lvlup_logo_export.svg",
+    alt: "LVLup! video games museum",
+    width: 148,
+    height: 90,
+  },
  {
    href: "https://alzgamer.ee/",
    src: "/sponsors/alzgamer.png",
@@ -88,12 +149,21 @@ const sponsors: Sponsor[] = [
    height: 164,
  },
  {
-    href: "https://www.tallinn.ee/et/haridusamet",
-    src: "/sponsors/Tallinna_Haridusamet_logo_RGB.svg",
-    alt: "Tallinna Haridusamet",
+    href: "https://2fast.ee/",
+    src: "/sponsors/2fast.png",
+    alt: "2FAST",
    width: 244,
    height: 244,
  },
+
+  // Activities and culture
+  {
+    href: "https://www.elamusgolf.eu/",
+    src: "/sponsors/elamusgolf.png",
+    alt: "Elamusgolf",
+    width: 164,
+    height: 164,
+  },
  {
    href: "https://parkminigolf.ee/",
    src: "/sponsors/park_minigolf.png",
@@ -108,54 +178,44 @@ const sponsors: Sponsor[] = [
    width: 144,
    height: 144,
  },
-  {
-    href: "https://www.elamusgolf.eu/",
-    src: "/sponsors/elamusgolf.png",
-    alt: "Elamusgolf",
-    width: 164,
-    height: 164,  
-  },
-  {
-    href: "https://www.egda.ee/",
-    src: "/sponsors/EGDA.png",
-    alt: "Estonian Game Developers Association",
-    width: 344,
-    height: 344,  
-  },
-  {
-    href: "https://www.teamspeak.com/",
-    src: "/sponsors/TS_InLine_BlueLight.svg",
-    alt: "TeamSpeak",
-    width: 344,
-    height: 344,  
-  },
-  {
-    href: "https://arvutitark.ee/",
-    src: "/sponsors/arvutitark.svg",
-    alt: "Arvutitark",
-    width: 344,
-    height: 344,
-  },
  {
    href: "https://www.kino.ee/",
    src: "/sponsors/Artis_logo_white_text.png",
    alt: "Artis Kino",
    width: 344,
-    height: 344,  
+    height: 344,
  },
  {
    href: "https://www.tallinn.ee/et/mank",
    src: "/sponsors/MANK.png",
    alt: "Mustamäe Avatud Noortekeskus",
    width: 200,
-    height: 244,  
+    height: 244,
+  },
+
+  // Accommodation
+  {
+    href: "https://www.academichostel.com/en/",
+    src: "/sponsors/academic-hostel.png",
+    alt: "Academic Hostel",
+    width: 524,
+    height: 338,
+  },
+
+  // Food and drink
+  {
+    href: "https://retroburger.ee/",
+    src: "/sponsors/retro-burger.png",
+    alt: "Retro Burger",
+    width: 1024,
+    height: 1024,
  },
  {
-    href: "https://2fast.ee/",
-    src: "/sponsors/2fast.png",
-    alt: "2FAST",
-    width: 244,
-    height: 244,  
+    href: "https://pokebowl.ee/",
+    src: "/sponsors/poke-bowl.png",
+    alt: "Poké Bowl",
+    width: 685,
+    height: 432,
  },
  {
    href: "",
@@ -173,24 +233,92 @@ interface SponsorsProps {

 const tickerSponsors = [...sponsors, ...sponsors, ...sponsors, ...sponsors];

+interface FeaturedSponsorProps {
+  sponsor: Sponsor;
+}
+
+function FeaturedSponsor({ sponsor }: FeaturedSponsorProps) {
+  return (
+    <NextLink
+      href={sponsor.href}
+      target="_blank"
+      className="relative flex h-[80px] w-[120px] shrink-0 items-center justify-center sm:h-[110px] sm:w-[150px] md:h-[130px] md:w-[180px] lg:aspect-square lg:h-auto lg:w-full lg:max-w-48"
+    >
+      <Image
+        src={sponsor.src}
+        alt={sponsor.alt}
+        fill
+        sizes="(min-width: 1280px) 192px, (min-width: 1024px) 160px, (min-width: 768px) 180px, (min-width: 640px) 150px, 120px"
+        className={`object-contain ${sponsor.className || ""}`}
+      />
+    </NextLink>
+  );
+}
+
 export default function Sponsors({
  showTitle = true,
  className = "",
 }: SponsorsProps) {
  const t = useTranslations();
+  const [isTickerPaused, setIsTickerPaused] = useState(false);
+  const pauseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearPauseTimer = () => {
+    if (pauseTimerRef.current) {
+      clearTimeout(pauseTimerRef.current);
+      pauseTimerRef.current = null;
+    }
+  };
+
+  const handleTickerMouseEnter = () => {
+    clearPauseTimer();
+    pauseTimerRef.current = setTimeout(() => {
+      setIsTickerPaused(true);
+      pauseTimerRef.current = null;
+    }, 100);
+  };
+
+  const handleTickerMouseLeave = () => {
+    clearPauseTimer();
+    setIsTickerPaused(false);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (pauseTimerRef.current) {
+        clearTimeout(pauseTimerRef.current);
+      }
+    };
+  }, []);

  return (
-    <div
-      className={`flex flex-col w-full xl:h-[414px] mx-auto ${vipnagorgialla.className} font-bold italic border-[#1F5673] ${className}`}
+    <section
+      className={`mx-auto flex w-full flex-col items-center gap-10 border-t-4 border-[#00A3E0]/50 px-4 pb-10 pt-11 sm:gap-12 sm:px-8 sm:pb-12 sm:pt-14 lg:gap-16 lg:px-12 lg:pb-16 lg:pt-[68px] ${vipnagorgialla.className} font-bold italic ${className}`}
    >
      {showTitle && (
-        <h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] uppercase text-center px-12 pt-8 pb-4">
+        <h2 className="text-center text-2xl leading-none text-white uppercase sm:text-3xl lg:text-[40px]">
          {t("home.sections.poweredBy")}
-        </h3>
+        </h2>
      )}

-      <div className="relative xl:flex-1 overflow-hidden py-8 sm:py-10 xl:py-4 2xl:py-6">
-        <div className="ticker-track flex items-center w-max gap-8 sm:gap-10 md:gap-12 xl:gap-16 2xl:gap-20 px-8 sm:px-10 xl:px-14 2xl:px-20">
+      <div className="grid w-full max-w-[1216px] grid-cols-2 place-items-center gap-x-6 gap-y-8 sm:gap-x-10 sm:gap-y-10 lg:grid-cols-5 lg:gap-12 xl:gap-16">
+        {highlightedSponsors.map((sponsor) => (
+          <FeaturedSponsor key={sponsor.alt} sponsor={sponsor} />
+        ))}
+      </div>
+
+      {showTitle && (
+        <h2 className="text-center text-2xl leading-none text-white uppercase sm:text-3xl lg:text-[40px]">
+          {t("home.sections.ourSponsors")}
+        </h2>
+      )}
+
+      <div
+        className="ticker-container relative mx-auto w-full max-w-[1824px] overflow-hidden py-8 sm:py-10 xl:flex-1 xl:py-4 2xl:py-6"
+        onMouseEnter={handleTickerMouseEnter}
+        onMouseLeave={handleTickerMouseLeave}
+      >
+        <div className={`ticker-track flex items-center w-max gap-8 sm:gap-10 md:gap-12 xl:gap-16 2xl:gap-20 px-8 sm:px-10 xl:px-14 2xl:px-20 ${isTickerPaused ? "ticker-track-paused" : ""}`}>
          {tickerSponsors.map((sponsor, index) => (
            <NextLink
              key={`${sponsor.alt}-${index}`}
@@ -213,11 +341,32 @@ export default function Sponsors({
      </div>

      <style jsx>{`
+        .ticker-container {
+          -webkit-mask-image: linear-gradient(
+            to right,
+            transparent 0%,
+            black 5%,
+            black 95%,
+            transparent 100%
+          );
+          mask-image: linear-gradient(
+            to right,
+            transparent 0%,
+            black 5%,
+            black 95%,
+            transparent 100%
+          );
+        }
+
        .ticker-track {
-          animation: sponsors-ticker 36s linear infinite;
+          animation: sponsors-ticker 31s linear infinite;
          will-change: transform;
        }

+        .ticker-track-paused {
+          animation-play-state: paused;
+        }
+
        @keyframes sponsors-ticker {
          from {
            transform: translateX(0%);
@@ -227,6 +376,6 @@ export default function Sponsors({
          }
        }
      `}</style>
-    </div>
+    </section>
  );
 }