Fix photos. Will keep for now until they will provide skewed images.. not my problem

src/app/[locale]/turniirid/page.tsx

@@ -4,14 +4,77 @@ import Image from "next/image";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 
 export default async function Tourney({
-  params: { locale },
+  params,
 }: {
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
+  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`;
 
+  const miniTournaments: {
+    name: string;
+    prize: string;
+    image: string;
+    objectPosition?: string;
+  }[] = [
+    {
+      name: "Tekken 8",
+      prize: "350€",
+      image: "/messiala/tekken8.jpg",
+      objectPosition: "object-center",
+    },
+    {
+      name: "WRC",
+      prize: "350€",
+      image: "/messiala/wrc.jpg",
+      objectPosition: "object-center",
+    },
+    {
+      name: "Street Fighter 6",
+      prize: "200€",
+      image: "/messiala/street_fighter.jpg",
+      objectPosition: "object-right",
+    },
+    {
+      name: "Gran Turismo",
+      prize: "200€",
+      image: "/messiala/gran_turismo.jpg",
+      objectPosition: "object-center",
+    },
+    {
+      name: "FC 26",
+      prize: "100€",
+      image: "/messiala/fc26.jpg",
+      objectPosition: "object-center",
+    },
+    {
+      name: "Dwarf Escape",
+      prize: "50€",
+      image: "/messiala/dwarf_escape.png",
+      objectPosition: "object-center",
+    },
+    {
+      name: "Buckshot Roulette",
+      prize: "Merch",
+      image: "/messiala/buckshot_tournament.png",
+      objectPosition: "object-center",
+    },
+    {
+      name: "Granblue Fantasy: Versus Rising",
+      prize: "50€",
+      image: "/messiala/grandblue_fantasy.jpg",
+      objectPosition: "object-top",
+    },
+    {
+      name: "Super Smash Bros. Ultimate",
+      prize: "50€",
+      image: "/messiala/super_smash_bros.jpg",
+      objectPosition: "object-top",
+    },
+  ];
+
   return (
     <div className="flex flex-col min-h-[90vh] mt-16">
       <h1
@@ -26,17 +89,29 @@ export default async function Tourney({
         <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>
+              <h2 className={`${headingStyle}`}>
-              <p className="text-2xl mb-4 text-neutral-500 group-hover:text-black dark:group-hover:text-white">
+                {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>
+              <p className="text-balance">
+                {t("tournaments.cs2.description1")}
+              </p>
               <br />
-              <p className="text-balance">{t("tournaments.cs2.description2")}</p>
+              <p className="text-balance">
-              <p className="text-balance">{t("tournaments.cs2.description3")}</p>
+                {t("tournaments.cs2.description2")}
+              </p>
+              <p className="text-balance">
+                {t("tournaments.cs2.description3")}
+              </p>
               <br />
 
-              <div className="flex flex-row flex-wrap gap-8">
+              <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]`}
@@ -44,11 +119,7 @@ export default async function Tourney({
                     {t("tournaments.cs2.readRules")}
                   </button>
                 </Link>
-                <a
+                <a href="https://fienta.com/et/tipilan" target="_blank">
-                  href="https://fienta.com/et/tipilan"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
                   <button
                     className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
                   >
@@ -59,13 +130,12 @@ export default async function Tourney({
             </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 turniiri logo"
+                  alt="CS2 tournament"
                   width={600}
                   height={400}
-                  sizes="(max-width: 768px) 100vw, 600px"
-                  priority
                 />
               </div>
             </div>
@@ -77,23 +147,33 @@ export default async function Tourney({
           <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="League of Legends turniiri logo"
+                  alt="LoL tournament"
                   width={600}
                   height={400}
-                  sizes="(max-width: 768px) 100vw, 600px"
                 />
               </div>
             </div>
             <div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
-              <h2 className={headingStyle}>{t("tournaments.lol.title")}</h2>
+              <h2 className={`${headingStyle}`}>
-              <p className="text-2xl mb-4 text-neutral-500 group-hover:text-black dark:group-hover:text-white">
+                {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>
+              <p className="text-balance">
+                {t("tournaments.lol.description1")}
+              </p>
               <br />
-              <p className="text-balance">{t("tournaments.lol.description2")}</p>
+              <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">
@@ -103,11 +183,7 @@ export default async function Tourney({
                     {t("tournaments.lol.readRules")}
                   </button>
                 </Link>
-                <a
+                <a href="https://fienta.com/et/tipilan" target="_blank">
-                  href="https://fienta.com/et/tipilan"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
                   <button
                     className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
                   >
@@ -120,16 +196,26 @@ export default async function Tourney({
         </div>
 
         {/* Mini-turniirid */}
-        <div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-b-[3px] border-[#1F5673] transition group">
+        <div className="py-8 md:py-16 border-t-[3px] border-b-[3px] border-[#1F5673]">
-          <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="mx-8 md:mx-16 lg:mx-32 xl:mx-48">
-            <div className="-skew-x-2 md:-skew-x-5">
+            <div className="-skew-x-2 md:-skew-x-5 mb-8">
-              <h2 className={headingStyle}>{t("tournaments.mini.title")}</h2>
+              <h2 className={`${headingStyle}`}>
-              <p className="text-2xl mb-4 text-neutral-500 group-hover:text-black dark:group-hover:text-white">
+                {t("tournaments.mini.title")}
+              </h2>
+              <p
+                className={
+                  "text-2xl mb-4 text-neutral-500"
+                }
+              >
                 {t("tournaments.mini.timing")}
               </p>
-              <p className="text-balance">{t("tournaments.mini.description1")}</p>
+              <p className="text-balance">
+                {t("tournaments.mini.description1")}
+              </p>
               <br />
-              <p className="text-balance">{t("tournaments.mini.description2")}</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">
@@ -139,11 +225,7 @@ export default async function Tourney({
                     {t("tournaments.mini.readRules")}
                   </button>
                 </Link>
-                <a
+                <a href="https://fienta.com/et/tipilan" target="_blank">
-                  href="https://fienta.com/et/tipilan"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
                   <button
                     className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
                   >
@@ -152,51 +234,23 @@ export default async function Tourney({
                 </a>
               </div>
             </div>
-            <div className="hidden md:block">
-              <div>
-                <Image
-                  src="/images/minitournament_logo.png"
-                  alt="Mini-turniiride logo"
-                  width={600}
-                  height={400}
-                  sizes="(max-width: 768px) 100vw, 600px"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* 3x3 grid */}
-          <div className="mt-16 mx-8 md:mx-16 lg:mx-32 xl:mx-48">
-            <h3
-              className={`${vipnagorgialla.className} text-2xl md:text-3xl font-bold uppercase text-center mb-8 text-[#2A2C3F] dark:text-[#EEE5E5]`}
-            >
-              {t("tournaments.mini.participants")}
-            </h3>
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
-              {[
+              {miniTournaments.map((tournament) => (
-                { name: "Tekken 8", img: "/images/players/player1.png" },
+                <div key={tournament.name} className="text-center">
-                { name: "WRC", img: "/images/players/player2.png" },
+                  <div className="border-2 border-[#007CAB] p-1 rounded-md">
-                { name: "Street Fighter 6", img: "/images/players/player3.png" },
+                    <Image
-                { name: "Gran Turismo", img: "/images/players/player4.png" },
+                      src={tournament.image}
-                { name: "FC 26", img: "/images/players/player5.png" },
+                      alt={tournament.name}
-                { name: "Dwarf Escape", img: "/images/players/player6.png" },
+                      width={400}
-                { name: "Buckshot Tournament", img: "/images/players/player7.png" },
+                      height={300}
-                { name: "Grandblue fantasy", img: "/images/players/player8.png" },
+                      className={`object-cover w-full h-48 ${
-                { name: "Super Smash Bros Ultimate", img: "/images/players/player9.png" },
+                        tournament.objectPosition || "object-center"
-              ].map((p, i) => (
+                      }`}
-                <div
+                    />
-                  key={i} className="flex flex-col items-center text-center p-4 bg-white dark:bg-[#1F1F1F] rounded-2xl shadow-md hover:shadow-xl transition" > <Image
+                  </div>
-                    src={p.img}
+                  <div className="-skew-x-2 md:-skew-x-5">
-                    alt={p.name}
+                    <p className="mt-2 font-semibold">{tournament.name} - {tournament.prize}</p>
-                    width={200}
+                  </div>
-                    height={200}
-                    className="rounded-xl object-cover"
-                  />
-                  <p
-                    className={`${vipnagorgialla.className} mt-4 text-xl font-bold text-[#2A2C3F] dark:text-[#EEE5E5]`}
-                  >
-                    {p.name}
-                  </p>
                 </div>
               ))}
             </div>