mirror of
https://github.com/Lapikud/tipilan.git
synced 2026-05-08 18:08:32 +00:00
Make sponsors into a carosel
This commit is contained in:
Rene Arumetsa
@@ -1,8 +1,36 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import NextLink from "next/link";
|
||||
|
||||
interface Sponsor {
|
||||
href: string;
|
||||
src: string;
|
||||
alt: string;
|
||||
width: number;
|
||||
height: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const sponsors: Sponsor[] = [
|
||||
{ href: "https://taltech.ee", src: "/sponsors/taltech-color.png", alt: "Taltech (Tallinna Tehnikaülikool)", width: 192, height: 192 },
|
||||
{ href: "https://www.redbull.com/ee-et/", src: "/sponsors/redbull.png", alt: "Redbull", width: 80, height: 80 },
|
||||
{ href: "https://www.facebook.com/bfglOfficial", 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: 200, height: 200, className: "not-dark:invert" },
|
||||
{ href: "https://globalproductions.ee/", src: "/sponsors/Global-productions.png", alt: "Global Productions", width: 200, height: 200 },
|
||||
];
|
||||
|
||||
// Split sponsors into slides (6 per slide)
|
||||
const SPONSORS_PER_SLIDE = 6;
|
||||
const slides: Sponsor[][] = [];
|
||||
for (let i = 0; i < sponsors.length; i += SPONSORS_PER_SLIDE) {
|
||||
slides.push(sponsors.slice(i, i + SPONSORS_PER_SLIDE));
|
||||
}
|
||||
|
||||
interface SponsorsProps {
|
||||
showTitle?: boolean;
|
||||
className?: string;
|
||||
@@ -13,190 +41,64 @@ export default function Sponsors({
|
||||
className = "",
|
||||
}: SponsorsProps) {
|
||||
const t = useTranslations();
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
const next = useCallback(() => setCurrent((c) => (c + 1) % slides.length), []);
|
||||
|
||||
useEffect(() => {
|
||||
const id = setInterval(next, 5000);
|
||||
return () => clearInterval(id);
|
||||
}, [next]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#1F5673] ${className}`}
|
||||
className={`flex flex-col max-w-[1920px] h-[414px] mx-auto ${vipnagorgialla.className} font-bold italic border-b-3 border-[#1F5673] ${className}`}
|
||||
>
|
||||
<div className="text-left flex flex-col justify-between xl:justify-start">
|
||||
{showTitle && (
|
||||
<h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] group-hover:text-black pb-8">
|
||||
<h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] px-12 pt-8 pb-4">
|
||||
{t("home.sections.poweredBy")}
|
||||
</h3>
|
||||
)}
|
||||
<div className="flex flex-col sm:flex-row flex-wrap gap-8 md:gap-18 items-center justify-center xl:justify-start">
|
||||
<NextLink href="https://taltech.ee" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/taltech-color.png"
|
||||
alt="Taltech (Tallinna Tehnikaülikool)"
|
||||
width={192}
|
||||
height={192}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://www.redbull.com/ee-et/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/redbull.png"
|
||||
alt="Redbull"
|
||||
width={80}
|
||||
height={80}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://www.alecoq.ee" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/alecoq.svg"
|
||||
alt="Alecoq"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://www.simracing.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/EVAL.png"
|
||||
alt="EVAL"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://balsnack.ee" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/balsnack.svg"
|
||||
alt="Balsnack"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink
|
||||
href="https://www.rara.ee/sundmused/interaktiivne-videomangude-muuseum-lvlup/"
|
||||
target="_blank"
|
||||
|
||||
{/* Carousel container */}
|
||||
<div className="relative flex-1 overflow-hidden">
|
||||
<div
|
||||
className="flex h-full transition-transform duration-500 ease-in-out"
|
||||
style={{ transform: `translateX(-${current * 100}%)` }}
|
||||
>
|
||||
<Image
|
||||
src="/sponsors/lvlup_logo_export.svg"
|
||||
alt="LVLup!"
|
||||
width={192}
|
||||
height={192}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink
|
||||
href="https://www.facebook.com/bfglOfficial"
|
||||
target="_blank"
|
||||
{slides.map((slideSponsors, slideIndex) => (
|
||||
<div
|
||||
key={slideIndex}
|
||||
className="flex-none w-full h-full flex items-center justify-center gap-8 md:gap-12 px-12"
|
||||
>
|
||||
{slideSponsors.map((sponsor, i) => (
|
||||
<NextLink key={i} href={sponsor.href} target="_blank">
|
||||
<Image
|
||||
src="/sponsors/BFGL.png"
|
||||
alt="BFGL"
|
||||
width={192}
|
||||
height={192}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://www.tallinn.ee/et/haridus" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/Tallinna_Haridusamet_logo_RGB.svg"
|
||||
alt="Tallinna Haridusamet"
|
||||
width={292}
|
||||
height={292}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://www.militaarseiklus.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/militaarseiklus.png"
|
||||
alt="Militaarseiklus"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink
|
||||
href="https://www.linkedin.com/company/gamedev-guild/"
|
||||
target="_blank"
|
||||
>
|
||||
<Image
|
||||
src="/sponsors/estonian_gamedev_guild.png"
|
||||
alt="Estonian Gamedev Guild"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain not-dark:invert"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://thotell.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/thotell.png"
|
||||
alt="Tahentorni Hotell (Tähentorni Hotel)"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://www.dominos.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/dominos.png"
|
||||
alt="Domino's Pizza"
|
||||
width={250}
|
||||
height={250}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://www.tomorrow.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/nt.png"
|
||||
alt="Network Tomorrow"
|
||||
width={300}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://driftikeskus.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/driftikeskus.png"
|
||||
alt="Driftikeskus"
|
||||
width={300}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://ingame.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/ingame.png"
|
||||
alt="Ingame"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://alzgamer.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/alzgamer.png"
|
||||
alt="AlzGamer"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://k-space.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/k-space_ee-white.png"
|
||||
alt="K-Space"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain not-dark:invert"
|
||||
/>
|
||||
</NextLink>
|
||||
<NextLink href="https://globalproductions.ee/" target="_blank">
|
||||
<Image
|
||||
src="/sponsors/Global-productions.png"
|
||||
alt="Global Productions"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
src={sponsor.src}
|
||||
alt={sponsor.alt}
|
||||
width={sponsor.width}
|
||||
height={sponsor.height}
|
||||
className={`object-contain max-h-[180px] ${sponsor.className || ""}`}
|
||||
/>
|
||||
</NextLink>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation dots */}
|
||||
<div className="flex justify-center gap-3 py-4">
|
||||
{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}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user