Plenty of fixes, added missing pages.

src/app/expo/page.tsx

@@ -0,0 +1,10 @@
+import { vipnagorgialla } from "../layout";
+
+export default function Expo() {
+    return (
+        <div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12 pt-18">
+            <h1 className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] mt-8 mb-4`}>Messiala</h1>
+            <p className="text-2xl text-[#2A2C3F]">Koostööpartneritega arutamisel. Rohkem infot teel!</p>
+        </div>
+    );
+}

src/app/page.tsx

@@ -18,7 +18,7 @@ export default function Home() {
         <div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition">
           <Link href="/timetable" prefetch={true}>
             <div className="cursor-pointer flex flex-row justify-between">
-              <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
+              <h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] group-hover:text-black`}>
                 Ajakava
               </h2>
               <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
@@ -33,12 +33,14 @@ export default function Home() {
         </div>
 
         <div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition">
+          <Link href="/tourney" prefetch={true}>
             <div className="cursor-pointer flex flex-row justify-between">
-            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
+              <h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] group-hover:text-black`}>
                 Turniirid
               </h2>
               <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
             </div>
+          </Link>
           <div>
             <MdEmojiEvents size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
             <p className="text-xl group-hover:text-black">
@@ -48,12 +50,14 @@ export default function Home() {
         </div>
 
         <div className="p-12 flex flex-col justify-between border-b-3 border-[#007CAB] group hover:bg-[#007CAB] transition-all">
+          <Link href="/expo" prefetch={true}>
             <div className="cursor-pointer flex flex-row justify-between">
-            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
+              <h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] group-hover:text-black`}>
                 Messiala
               </h2>
               <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
             </div>
+          </Link>
           <div>
             <MdWeekend size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
             <p className="text-xl group-hover:text-black">
@@ -66,10 +70,10 @@ export default function Home() {
       <div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] hover:bg-[#007CAB] group transition`}>
         <Link href="/tickets" prefetch={true}>
           <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">
+            <h3 className="text-4xl md:text-5xl text-[#2A2C3F] group-hover:text-black pb-8">
               Broneeri oma koht juba täna!
             </h3>
-            <MdEast size={'4em'} className="text-[#007CAB] ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
+            <MdEast size={'4em'} className="text-[#007CAB] hidden md:block ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
           </div>
         </Link>
         <h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5]">

src/app/tickets/page.tsx

@@ -22,7 +22,7 @@ export default function Tickets() {
                 <div className="bg-[#1F5673] -skew-x-2 md:-skew-x-5 text-white px-8 md:px-12 py-16 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]">
                     <h2 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`}>10€</h2>
                     <h3 className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}>Võistleja</h3>
-                    <ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]">
+                    <ul className="pl-4 mb-8 list-[square] marker:text-[#007CAB]">
                         <li className="text-xl">Võimalus osaleda turniiridel</li>
                         <li className="text-xl">Isiklik laud, voolu- ja internetiühendus</li>
                         <li className="text-xl">Ligipääs demoalale</li>

src/app/timetable/page.tsx

@@ -3,7 +3,7 @@ import { vipnagorgialla } from "../layout";
 export default function Timetable() {
     return (
         <div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12 pt-18">
-            <h1 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] mt-8 mb-4`}>Ajakava</h1>
+            <h1 className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] mt-8 mb-4`}>Ajakava</h1>
             <p className="text-2xl text-[#2A2C3F]">Lisame ajakava lähiajal.</p>
         </div>
     );

src/app/tourney/page.tsx

@@ -0,0 +1,10 @@
+import { vipnagorgialla } from "../layout";
+
+export default function Tourney() {
+    return (
+        <div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12 pt-18">
+            <h1 className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] mt-8 mb-4`}>Turniirid</h1>
+            <p className="text-2xl text-[#2A2C3F]">Kui tahate oma oskusi proovile panna siis vaadake siia tagasi! Rohkem infot lähiajal.</p>
+        </div>
+    );
+}

src/components/Footer.tsx

@@ -1,7 +1,7 @@
 import { SiDiscord, SiInstagram, SiFacebook } from "react-icons/si";
 
 const Footer = () => (
-    <div className="flex items-center justify-between h-60 px-12">
+    <div className="flex items-center justify-center sm:justify-between flex-col sm:flex-row h-60 px-12">
         <img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-16"/>
         {/* Social media */}
         <div className="flex flex-row">

src/components/Header.tsx

@@ -1,15 +1,19 @@
 // Icons
-import { Menu } from "lucide-react";
+import { MdClose, MdMenu } from "react-icons/md";
 
 // Fonts
 import { vipnagorgialla } from "@/app/layout";
 
-const Header = ({ toggleSidebar }: { toggleSidebar: () => void }) => (
+const Header = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) => (
     <header className="h-16 flex items-center bg-[#EEE5E5] border-b-3 border-[#007CAB] justify-between px-12 text-[#2A2C3F]">
         <button onClick={toggleSidebar}>
-            <Menu className="h-12 w-12 text-[#2A2C3F]" />
+            {isOpen ? (
+                <MdClose className="h-12 w-12 text-[#2A2C3F]" />
+            ) : (
+                <MdMenu className="h-12 w-12 text-[#2A2C3F]" />
+            )}
         </button>
-        <p className={`text-3xl ${vipnagorgialla.className} font-bold italic`}>ENG</p>
+        <p className={`text-3xl ${vipnagorgialla.className} font-bold italic hidden`}>ENG</p>
     </header>
 );
 

src/components/Sidebar.tsx

@@ -26,13 +26,14 @@ const Sidebar = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: ()
                 onClick={toggleSidebar} // Close sidebar when clicking outside
             ></div>
             <div
-                className={`text-5xl ${vipnagorgialla.className} font-bold italic fixed flex items-center flex-col gap-8 pt-16 top-0 left-0 h-[99vh] mt-16 -skew-x-5 border-r-3 border-[#007CAB] w-128 bg-[#EEE5E5] text-[#2A2C3F] transition-transform transform z-20`}
+                className={`text-5xl ${vipnagorgialla.className} font-bold italic uppercase fixed flex items-center flex-col gap-8 pt-16 top-0 left-0 h-[99vh] mt-16 -skew-x-5 border-r-3 border-[#007CAB] w-screen sm:w-128 bg-[#EEE5E5] text-[#2A2C3F] transition-transform transform z-20`}
                 style={{ transform: isOpen ? 'translateX(-10%) skewX(calc(5deg * -1)' : 'translateX(-150%) skewX(calc(5deg * -1)' }}
             >
                 <Link href="/" prefetch={true} onClick={toggleSidebar}>Avaleht</Link>
+                <Link href="/expo" prefetch={true} onClick={toggleSidebar}>Messiala</Link>
+                <Link href="/tickets" prefetch={true} onClick={toggleSidebar}>Piletid</Link>
                 <Link href="/timetable" prefetch={true} onClick={toggleSidebar}>Ajakava</Link>
-                <Link href="/" prefetch={true} onClick={toggleSidebar}>Turniirid</Link>
+                <Link href="/tourney" prefetch={true} onClick={toggleSidebar}>Turniirid</Link>
-                <Link href="/" prefetch={true} onClick={toggleSidebar}>Messiala</Link>
             </div>
         </>
     );

src/components/SidebarParent.tsx

@@ -10,7 +10,7 @@ const SidebarParent = () => {
     
     return (
         <div className="fixed w-screen top-0 z-9999">
-            <Header toggleSidebar={toggleSidebar} />
+            <Header isOpen={isOpen} toggleSidebar={toggleSidebar} />
             <Sidebar isOpen={isOpen} toggleSidebar={toggleSidebar}/>
         </div>
     );