From 13d0a32521d5bd1c564c1c72437aa7eee3153152 Mon Sep 17 00:00:00 2001
From: Rene Arumetsa <rene.arumetsa@gmail.com>
Date: Fri, 1 May 2026 17:47:52 +0300
Subject: [PATCH] rename league_tournament.png to league_ticket.png

---
 ...eague_tournament.jpg => league_ticket.jpg} | Bin
 src/app/[locale]/piletid/page.tsx             |   2 +-
 src/app/[locale]/turniirid/page.tsx           | 301 ++++--------------
 translations/en.json                          |   1 +
 translations/et.json                          |   1 +
 5 files changed, 59 insertions(+), 246 deletions(-)
 rename public/images/landing/{league_tournament.jpg => league_ticket.jpg} (100%)

diff --git a/public/images/landing/league_tournament.jpg b/public/images/landing/league_ticket.jpg
similarity index 100%
rename from public/images/landing/league_tournament.jpg
rename to public/images/landing/league_ticket.jpg
diff --git a/src/app/[locale]/piletid/page.tsx b/src/app/[locale]/piletid/page.tsx
index b499c3c..2c3c596 100644
--- a/src/app/[locale]/piletid/page.tsx
+++ b/src/app/[locale]/piletid/page.tsx
@@ -117,7 +117,7 @@ export default async function Tickets({
             features={t.raw("tickets.lol.features")}
             buttonText={t("tickets.buyButton")}
             buttonHref="https://fienta.com/et/tipilan"
-            backgroundImage="/images/landing/league_tournament.jpg"
+            backgroundImage="/images/landing/league_ticket.jpg"
           />
 
           {/* CS2 TURNIIRI PILET */}
diff --git a/src/app/[locale]/turniirid/page.tsx b/src/app/[locale]/turniirid/page.tsx
index 0a34600..8501b34 100644
--- a/src/app/[locale]/turniirid/page.tsx
+++ b/src/app/[locale]/turniirid/page.tsx
@@ -3,6 +3,44 @@ import Link from "next/link";
 import Image from "next/image";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 
+interface TournamentCardProps {
+  title: string;
+  buttonText: string;
+  buttonHref: string;
+  backgroundImage: string;
+}
+
+function TournamentCard({
+  title,
+  buttonText,
+  buttonHref,
+  backgroundImage,
+}: TournamentCardProps) {
+  return (
+    <div className="relative bg-[#0E0F19] border-r border-[#1F5673] flex flex-col items-center justify-center h-[818px]">
+      <Image
+        src={backgroundImage}
+        alt=""
+        fill
+        className="object-cover object-center opacity-50"
+      />
+      <div className="relative z-10 flex flex-col items-center text-center">
+        <h2
+          className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,1.5rem+3vw,4rem)] leading-none text-[#EEE5E5] uppercase mb-4`}
+        >
+          {title}
+        </h2>
+        <Link
+          href={buttonHref}
+          className={`${vipnagorgialla.className} font-bold italic text-xl text-[#00A3E0] hover:text-[#EEE5E5] uppercase transition`}
+        >
+          {buttonText}
+        </Link>
+      </div>
+    </div>
+  );
+}
+
 export default async function Tourney({
   params,
 }: {
@@ -11,254 +49,27 @@ export default async function Tourney({
   const { locale } = await params;
   setRequestLocale(locale);
   const t = await getTranslations({ locale });
-  const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5 break-normal`;
-
-  const miniTournaments: {
-    name: string;
-    prize: string;
-    image: string;
-    objectPosition?: string;
-    bgClass?: string;
-  }[] = [
-    {
-      name: "Tekken 8",
-      prize: "200€",
-      image: "/images/miniturniirid/tekken8.jpg",
-      objectPosition: "object-center",
-    },
-    {
-      name: "WRC",
-      prize: "350€",
-      image: "/images/miniturniirid/wrc.jpg",
-      objectPosition: "object-center",
-    },
-    {
-      name: "Street Fighter 6",
-      prize: "150€",
-      image: "/images/miniturniirid/street_fighter.jpg",
-      objectPosition: "object-center",
-    },
-    {
-      name: "Gran Turismo",
-      prize: "200€",
-      image: "/images/miniturniirid/gran_turismo.jpg",
-      objectPosition: "object-center",
-    },
-    {
-      name: "FC 26",
-      prize: "100€",
-      image: "/images/miniturniirid/fc26.jpg",
-      objectPosition: "object-center",
-    },
-    {
-      name: "Dwarf Escape",
-      prize: "50€",
-      image: "/images/miniturniirid/dwarf_escape.png",
-      objectPosition: "object-center",
-      bgClass: "bg-black",
-    },
-    {
-      name: "Buckshot Roulette",
-      prize: "Merch",
-      image: "/images/miniturniirid/buckshot_tournament.png",
-      objectPosition: "object-center",
-      bgClass: "bg-black",
-    },
-    {
-      name: "2XKO",
-      prize: "100€",
-      image: "/images/miniturniirid/2xko.png",
-      objectPosition: "object-top",
-    },
-    {
-      name: "Super Smash Bros. Ultimate",
-      prize: "100€",
-      image: "/images/miniturniirid/super_smash_bros.jpg",
-      objectPosition: "object-top",
-    },
-  ];
 
   return (
-    <div className="flex flex-col min-h-[90vh] mt-16">
-      <h1
-        className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase
-                text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-8 m-6 md:m-16`}
-      >
-        {t("tournaments.title")}
-      </h1>
-
-      <div className="flex flex-col">
-
-        {/* Mini-turniirid */}
-        <div className="hover:bg-[#007CAB] py-8 md:py-16 border-b-[3px] border-[#1F5673] transition group">
-          <div className="mx-8 md:mx-16 lg:mx-32 xl:mx-48">
-            <div className="-skew-x-2 md:-skew-x-5 mb-8">
-              <h2 className={`${headingStyle}`}>
-                {t("tournaments.mini.title")}
-              </h2>
-              <p
-                className={
-                  "text-2xl mb-4 text-neutral-500 group-hover:text-black"
-                }
-              >
-                {t("tournaments.mini.timing")}
-              </p>
-              <p className="text-balance">
-                {t("tournaments.mini.description1")}
-              </p>
-              <p className="text-balance">
-                {t("tournaments.mini.description2")}
-              </p>
-              <br />
-              <div className="flex flex-row flex-wrap gap-4 md:gap-8">
-                <Link href="/kodukord" target="_blank">
-                  <button
-                    className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                  >
-                    {t("tournaments.mini.readRules")}
-                  </button>
-                </Link>
-                <a href="https://fienta.com/et/tipilan" target="_blank">
-                  <button
-                    className={`px-4 py-2 bg-[#00A3E0] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                  >
-                    {t("tournaments.mini.buyTicket")}
-                  </button>
-                </a>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
-              {miniTournaments.map((tournament) => (
-                <div key={tournament.name} className="text-center">
-                    <Image
-                      src={tournament.image}
-                      alt={tournament.name}
-                      width={400}
-                      height={300}
-                      className={`outline-10 outline-[#007CAB] bg-black object-cover w-full aspect-video -skew-x-2 md:-skew-x-5 ${
-                        tournament.objectPosition || "object-center"
-                      }`}
-                    />
-                  <div className="-skew-x-2 md:-skew-x-5">
-                    <p className="mt-2 font-semibold">{tournament.name} - {tournament.prize}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* CS2 turniir */}
-        <div className="hover:bg-[#007CAB] py-8 md:py-16 transition group">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
-            <div className="-skew-x-2 md:-skew-x-5">
-              <h2 className={`${headingStyle}`}>
-                {t("tournaments.cs2.title")}
-              </h2>
-              <p
-                className={
-                  "text-2xl mb-4 text-neutral-500 group-hover:text-black"
-                }
-              >
-                {t("tournaments.cs2.timing")}
-              </p>
-              <p className="text-balance">
-                {t("tournaments.cs2.description1")}
-              </p>
-              <br />
-              <p className="text-balance">
-                {t("tournaments.cs2.description2")}
-              </p>
-              <p className="text-balance">
-                {t("tournaments.cs2.description3")}
-              </p>
-              <br />
-
-              <div className={"flex flex-row flex-wrap gap-8"}>
-                <Link href="/reeglid/cs2" target="_blank">
-                  <button
-                    className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                  >
-                    {t("tournaments.cs2.readRules")}
-                  </button>
-                </Link>
-                <a href="https://fienta.com/et/tipilan" target="_blank">
-                  <button
-                    className={`px-4 py-2 bg-[#00A3E0] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                  >
-                    {t("tournaments.cs2.buyTicket")}
-                  </button>
-                </a>
-              </div>
-            </div>
-            <div className="hidden md:block">
-              <div>
-                {/* Outside div needs to remain so that overflow won't occur*/}
-                <Image
-                  src="/images/cs2_tournament_logo.png"
-                  alt="CS2 tournament"
-                  width={600}
-                  height={400}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* LoL turniir */}
-        <div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-b-[3px] border-[#1F5673] transition group">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
-            <div className="hidden md:block">
-              <div>
-                {/* Outside div needs to remain so that overflow won't occur*/}
-                <Image
-                  src="/images/lol_tournament_logo.png"
-                  alt="LoL tournament"
-                  width={600}
-                  height={400}
-                />
-              </div>
-            </div>
-            <div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
-              <h2 className={`${headingStyle}`}>
-                {t("tournaments.lol.title")}
-              </h2>
-              <p
-                className={
-                  "text-2xl mb-4 text-neutral-500 group-hover:text-black"
-                }
-              >
-                {t("tournaments.lol.timing")}
-              </p>
-              <p className="text-balance">
-                {t("tournaments.lol.description1")}
-              </p>
-              <br />
-              <p className="text-balance">
-                {t("tournaments.lol.description2")}
-              </p>
-              <br />
-              <div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
-                <Link href="/reeglid/lol" target="_blank">
-                  <button
-                    className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                  >
-                    {t("tournaments.lol.readRules")}
-                  </button>
-                </Link>
-                <a href="https://fienta.com/et/tipilan" target="_blank">
-                  <button
-                    className={`px-4 py-2 bg-[#00A3E0] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                  >
-                    {t("tournaments.lol.buyTicket")}
-                  </button>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
+    <div className="bg-[#0E0F19]">
+      {/* 1x2 Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 pt-16 md:pt-20">
+        {/* CS2 */}
+        <TournamentCard
+          title="COUNTER-STRIKE 2"
+          buttonText={t("tournaments.clickButton")}
+          buttonHref="/turniirid/cs2"
+          backgroundImage="/images/landing/compete_teaser.jpg"
+        />
 
+        {/* LoL */}
+        <TournamentCard
+          title="LEAGUE OF LEGENDS"
+          buttonText={t("tournaments.clickButton")}
+          buttonHref="/turniirid/lol"
+          backgroundImage="/images/landing/league_ticket.jpg"
+        />
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/translations/en.json b/translations/en.json
index 5794bca..dc1e655 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -124,6 +124,7 @@
   },
   "tournaments": {
     "title": "Tournaments",
+    "clickButton": "CLICK",
     "register": "Register",
     "participants": "Participants",
     "prizePool": "Prize pool",
diff --git a/translations/et.json b/translations/et.json
index 011fc23..9f3a813 100644
--- a/translations/et.json
+++ b/translations/et.json
@@ -124,6 +124,7 @@
   },
   "tournaments": {
     "title": "Turniirid",
+    "clickButton": "VAJUTA",
     "register": "Registreeru",
     "participants": "Osalejad",
     "prizePool": "Auhinnafond",