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 { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import NextLink from "next/link";
|
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 {
|
interface SponsorsProps {
|
||||||
showTitle?: boolean;
|
showTitle?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
@@ -13,190 +41,64 @@ export default function Sponsors({
|
|||||||
className = "",
|
className = "",
|
||||||
}: SponsorsProps) {
|
}: SponsorsProps) {
|
||||||
const t = useTranslations();
|
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 (
|
return (
|
||||||
<div
|
<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 && (
|
{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")}
|
{t("home.sections.poweredBy")}
|
||||||
</h3>
|
</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">
|
{/* Carousel container */}
|
||||||
<Image
|
<div className="relative flex-1 overflow-hidden">
|
||||||
src="/sponsors/taltech-color.png"
|
<div
|
||||||
alt="Taltech (Tallinna Tehnikaülikool)"
|
className="flex h-full transition-transform duration-500 ease-in-out"
|
||||||
width={192}
|
style={{ transform: `translateX(-${current * 100}%)` }}
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<Image
|
{slides.map((slideSponsors, slideIndex) => (
|
||||||
src="/sponsors/lvlup_logo_export.svg"
|
<div
|
||||||
alt="LVLup!"
|
key={slideIndex}
|
||||||
width={192}
|
className="flex-none w-full h-full flex items-center justify-center gap-8 md:gap-12 px-12"
|
||||||
height={192}
|
|
||||||
className="object-contain"
|
|
||||||
/>
|
|
||||||
</NextLink>
|
|
||||||
<NextLink
|
|
||||||
href="https://www.facebook.com/bfglOfficial"
|
|
||||||
target="_blank"
|
|
||||||
>
|
>
|
||||||
|
{slideSponsors.map((sponsor, i) => (
|
||||||
|
<NextLink key={i} href={sponsor.href} target="_blank">
|
||||||
<Image
|
<Image
|
||||||
src="/sponsors/BFGL.png"
|
src={sponsor.src}
|
||||||
alt="BFGL"
|
alt={sponsor.alt}
|
||||||
width={192}
|
width={sponsor.width}
|
||||||
height={192}
|
height={sponsor.height}
|
||||||
className="object-contain"
|
className={`object-contain max-h-[180px] ${sponsor.className || ""}`}
|
||||||
/>
|
|
||||||
</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"
|
|
||||||
/>
|
/>
|
||||||
</NextLink>
|
</NextLink>
|
||||||
|
))}
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user