Added missing parts and react-icons package

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>