From 9399dc332ef0f26d76cb379806300fda3e14c981 Mon Sep 17 00:00:00 2001
From: v4ltages <contact@voltages.me>
Date: Wed, 23 Apr 2025 03:50:10 +0300
Subject: [PATCH] Added missing parts and react-icons package

---
 package.json         |  1 +
 public/discord.svg   |  1 -
 public/facebook.svg  |  1 -
 public/instagram.svg |  1 -
 src/app/page.tsx     | 91 ++++++++++++++++++++++++++------------------
 5 files changed, 56 insertions(+), 39 deletions(-)
 delete mode 100644 public/discord.svg
 delete mode 100644 public/facebook.svg
 delete mode 100644 public/instagram.svg

diff --git a/package.json b/package.json
index 9cb7157..1e77a9a 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "next": "15.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.2.0",
     "tw-animate-css": "^1.2.5"
   },
diff --git a/public/discord.svg b/public/discord.svg
deleted file mode 100644
index 9d7796b..0000000
--- a/public/discord.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
\ No newline at end of file
diff --git a/public/facebook.svg b/public/facebook.svg
deleted file mode 100644
index f66767e..0000000
--- a/public/facebook.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>
\ No newline at end of file
diff --git a/public/instagram.svg b/public/instagram.svg
deleted file mode 100644
index c0e86b0..0000000
--- a/public/instagram.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg>
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index efce63a..721f43b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,55 +1,74 @@
 import { vipnagorgialla } from "./layout";
+import { SiDiscord, SiInstagram, SiFacebook } from "react-icons/si";
+import { MdEast, MdEmojiEvents, MdEventNote, MdWeekend } from "react-icons/md";
 
 export default function Home() {
   return (
-    <div className="flex flex-col">
+    <div>
       {/* Title */}
-      <div className="border-b-3 border-[#007CAB] flex">
+      <div className="border-b-3 border-[#007CAB] flex items-center justify-between">
         <img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-64"/>
+        <div className="pr-12 hidden 2xl:block">
+          <h3 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F]`}>Auhinnafond</h3>
+          <h2 className={`text-8xl ${vipnagorgialla.className} font-bold italic text-[#007CAB]`}>10 000€</h2>
+        </div>
       </div>
       {/* Grid of buttons */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 border-[#007CAB]">
-        <div className="p-12 border-b-3 lg:border-r-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors">
-          <button className="cursor-pointer">
-            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic mb-16 text-[#2A2C3F] flex items-center`}>
-              Ajakava →
+      <div className="grid grid-cols-1 xl:grid-cols-3 border-[#007CAB] min-h-[33vh]">
+        <div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition-all">
+          <div className="cursor-pointer flex flex-row justify-between">
+            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
+              Ajakava
             </h2>
-          </button>
-          <p className="text-xl">
-            TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.
-          </p>
+            <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
+          </div>
+          <div>
+            <MdEventNote size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
+            <p className="text-xl group-hover:text-black">
+              TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.
+            </p>
+          </div>
         </div>
 
-        <div className="p-12 border-b-3 lg:border-r-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors">
-          <button className="cursor-pointer">
-            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] mb-16 flex items-center`}>
-              Turniirid →
+        <div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition-all">
+          <div className="cursor-pointer flex flex-row justify-between">
+            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
+              Turniirid
             </h2>
-          </button>
-          <p className="text-xl">
-            TipiLANil toimuvad suurejoonelised CS2 ja Lol turniirid, mille auhinnafondid on 5000 €
-          </p>
+            <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
+          </div>
+          <div>
+            <MdEmojiEvents size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
+            <p className="text-xl group-hover:text-black">
+              TipiLANil toimuvad suurejoonelised Counter-Strike 2 ja League of Legends turniirid, mille auhinnafondid on 5000 €
+            </p>
+          </div>
         </div>
 
-        <div className="p-12 border-b-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors">
-          <button className="cursor-pointer">
-            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic mb-16 text-[#2A2C3F] flex items-center`}>
-              Messiala →
+        <div className="p-12 flex flex-col justify-between border-b-3 border-[#007CAB] group hover:bg-[#007CAB] transition-all">
+          <div className="cursor-pointer flex flex-row justify-between">
+            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
+              Messiala
             </h2>
-          </button>
-          <p className="text-xl">
-            TipiLANi messialal paiknevad ettevõtted, lisategevused ja toimuvad loengud.
-          </p>
+            <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
+          </div>
+          <div>
+            <MdWeekend size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
+            <p className="text-xl group-hover:text-black">
+              TipiLANi messialal paiknevad ettevõtted, lisategevused ja toimuvad loengud.
+            </p>
+          </div>
         </div>
       </div>
       {/* Date */}
-      <div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] hover:bg-[#007CAB] group transition-colors`}>
-        <button className="cursor-pointer text-left">
-          <h3 className="text-5xl text-[#2A2C3F] pb-8">
-            Broneeri oma koht juba täna. →
+      <div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] hover:bg-[#007CAB] group transition-all`}>
+        <div className="cursor-pointer text-left flex flex-row justify-between xl:justify-start">
+          <h3 className="text-5xl text-[#2A2C3F] group-hover:text-black pb-8">
+            Broneeri oma koht juba täna.
           </h3>
-        </button>
-        <h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5] transition-colors">
+          <MdEast size={'4em'} className="text-[#007CAB] ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
+        </div>
+        <h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5]">
           24.-26. okt.
         </h2>
       </div>
@@ -59,13 +78,13 @@ export default function Home() {
         {/* Social media */}
         <div className="flex flex-row">
           <a href="#" target="_blank" rel="noopener noreferrer">
-            <img src="/discord.svg" alt="Twitch" className="h-8 mx-4"/>
+            <SiDiscord title="Discord" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
           </a>
           <a href="#" target="_blank" rel="noopener noreferrer">
-            <img src="/instagram.svg" alt="Instagram" className="h-8 mx-4"/>
+            <SiInstagram title="Instagram" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
           </a>
           <a href="#" target="_blank" rel="noopener noreferrer">
-            <img src="/facebook.svg" alt="Facebook" className="h-8 mx-4"/>
+            <SiFacebook title="Facebook" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
           </a>
         </div>
       </div>