From edb88be0f093bd66abfbee67069c3be1b6a8dacc Mon Sep 17 00:00:00 2001
From: v4ltages <contact@voltages.me>
Date: Tue, 19 Aug 2025 06:21:24 +0300
Subject: [PATCH] Modify tournament page to fit figma styling

---
 src/app/turniirid/page.tsx | 285 +++++++++++++++++++------------------
 1 file changed, 148 insertions(+), 137 deletions(-)

diff --git a/src/app/turniirid/page.tsx b/src/app/turniirid/page.tsx
index 084dce2..75efbdf 100644
--- a/src/app/turniirid/page.tsx
+++ b/src/app/turniirid/page.tsx
@@ -1,7 +1,6 @@
 import { vipnagorgialla } from "@/components/Vipnagorgialla";
 import Link from "next/link";
 import Image from "next/image";
-import SectionDivider from "@/components/SectionDivider";
 
 export default function Tourney() {
   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`;
@@ -21,160 +20,172 @@ export default function Tourney() {
       {/*  infot lähiajal.*/}
       {/*</p>*/}
 
-      <div className="flex flex-col gap-8 md:gap-16">
+      <div className="flex flex-col">
         {/* CS2 turniir */}
-        <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}`}>CS2 turniir</h2>
-            <p className={"text-2xl mb-4 text-neutral-500"}>
-              Toimumisaeg veel selgumisel
-            </p>
-            <p className="text-balance">
-              TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire
-              juba sel sügisel. Haara kaasa sõbrad ja saa osa adrenaliinirohkest
-              kogemusest!
-            </p>
-            <br />
-            <p className="text-balance">
-              Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna vahel
-              ära. Iga tiimiliige saab vastavalt saavutatud kohale auhinnaks kas
-              600€, 300€ või 150€.
-            </p>
-            <br />
+        <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}`}>CS2 turniir</h2>
+              <p
+                className={
+                  "text-2xl mb-4 text-neutral-500 group-hover:text-black"
+                }
+              >
+                Toimumisaeg veel selgumisel
+              </p>
+              <p className="text-balance">
+                TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire
+                juba sel sügisel. Haara kaasa sõbrad ja saa osa
+                adrenaliinirohkest kogemusest!
+              </p>
+              <br />
+              <p className="text-balance">
+                Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna
+                vahel ära. Iga tiimiliige saab vastavalt saavutatud kohale
+                auhinnaks kas 600€, 300€ või 150€.
+              </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]`}
-                >
-                  LOE REEGLEID
-                </button>
-              </Link>
-              <a href="https://fienta.com/et/tipilan" target="_blank">
-                <button
-                  className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                >
-                  OSTA PILET
-                </button>
-              </a>
+              <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]`}
+                  >
+                    LOE REEGLEID
+                  </button>
+                </Link>
+                <a href="https://fienta.com/et/tipilan" target="_blank">
+                  <button
+                    className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
+                  >
+                    OSTA PILET
+                  </button>
+                </a>
+              </div>
             </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 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>
 
-        <SectionDivider />
-
         {/* LoL turniir */}
-        <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 className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[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>
-          <div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
-            <h2 className={`${headingStyle}`}>LoL turniir</h2>
-            <p className={"text-2xl mb-4 text-neutral-500"}>
-              Toimumisaeg veel selgumisel
-            </p>
-            <p className="text-balance">
-              TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire
-              juba sel sügisel. Haara kaasa sõbrad ja saa osa adrenaliinirohkest
-              kogemusest!
-            </p>
-            <br />
-            <p className="text-balance">
-              Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna vahel
-              ära. Iga tiimiliige saab vastavalt saavutatud kohale auhinnaks kas
-              400€, 200€ või 100€.
-            </p>
-            <br />
-            <div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
-              <Link href="/kodukord" target="_blank">
-                <button
-                  className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                >
-                  LOE REEGLEID
-                </button>
-              </Link>
-              <a href="https://fienta.com/et/tipilan" target="_blank">
-                <button
-                  className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                >
-                  OSTA PILET
-                </button>
-              </a>
+            <div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
+              <h2 className={`${headingStyle}`}>LoL turniir</h2>
+              <p
+                className={
+                  "text-2xl mb-4 text-neutral-500 group-hover:text-black"
+                }
+              >
+                Toimumisaeg veel selgumisel
+              </p>
+              <p className="text-balance">
+                TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire
+                juba sel sügisel. Haara kaasa sõbrad ja saa osa
+                adrenaliinirohkest kogemusest!
+              </p>
+              <br />
+              <p className="text-balance">
+                Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna
+                vahel ära. Iga tiimiliige saab vastavalt saavutatud kohale
+                auhinnaks kas 400€, 200€ või 100€.
+              </p>
+              <br />
+              <div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
+                <Link href="/kodukord" target="_blank">
+                  <button
+                    className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
+                  >
+                    LOE REEGLEID
+                  </button>
+                </Link>
+                <a href="https://fienta.com/et/tipilan" target="_blank">
+                  <button
+                    className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
+                  >
+                    OSTA PILET
+                  </button>
+                </a>
+              </div>
             </div>
           </div>
         </div>
 
-        <SectionDivider />
-
         {/* Mini-turniirid */}
-        <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}`}>Mini&shy;turniirid</h2>
-            <p className={"text-2xl mb-4 text-neutral-500"}>
-              Toimumisaeg veel selgumisel
-            </p>
-            <p className="text-balance">
-              TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu
-              tekitavaid miniturniire. Miniturniirid toimuvad järgnevates
-              mängudes: SimRacing, Tekken, FIFA, Minecraft Bedwars, Buckshot
-              Roulette, LostGamer ja palju muud.
-            </p>
-            <br />
-            <p className="text-balance">
-              Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab
-              rahalise auhinna miniturniiri võitja.
-            </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]`}
-                >
-                  LOE REEGLEID
-                </button>
-              </Link>
-              <a href="https://fienta.com/et/tipilan" target="_blank">
-                <button
-                  className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
-                >
-                  OSTA PILET
-                </button>
-              </a>
+        <div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[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="-skew-x-2 md:-skew-x-5">
+              <h2 className={`${headingStyle}`}>Mini&shy;turniirid</h2>
+              <p
+                className={
+                  "text-2xl mb-4 text-neutral-500 group-hover:text-black"
+                }
+              >
+                Toimumisaeg veel selgumisel
+              </p>
+              <p className="text-balance">
+                TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu
+                tekitavaid miniturniire. Miniturniirid toimuvad järgnevates
+                mängudes: SimRacing, Tekken, FIFA, Minecraft Bedwars, Buckshot
+                Roulette, LostGamer ja palju muud.
+              </p>
+              <br />
+              <p className="text-balance">
+                Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab
+                rahalise auhinna miniturniiri võitja.
+              </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]`}
+                  >
+                    LOE REEGLEID
+                  </button>
+                </Link>
+                <a href="https://fienta.com/et/tipilan" target="_blank">
+                  <button
+                    className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
+                  >
+                    OSTA PILET
+                  </button>
+                </a>
+              </div>
             </div>
-          </div>
-          <div className="hidden md:block">
-            <div>
-              {/* Outside div needs to remain so that overflow won't occur*/}
-              <Image
-                src="/images/minitournament_logo.png"
-                alt="mini tournaments"
-                width={600}
-                height={400}
-              />
+            <div className="hidden md:block">
+              <div>
+                {/* Outside div needs to remain so that overflow won't occur*/}
+                <Image
+                  src="/images/minitournament_logo.png"
+                  alt="mini tournaments"
+                  width={600}
+                  height={400}
+                />
+              </div>
             </div>
           </div>
         </div>
-
-        <SectionDivider />
       </div>
     </div>
   );