From 26b196b7f67c5da656b2cdfb34074a814c66ede7 Mon Sep 17 00:00:00 2001
From: v4ltages <contact@voltages.me>
Date: Sat, 19 Jul 2025 02:13:02 +0300
Subject: [PATCH] Update ticket page to fit figma design

---
 src/app/ajakava/page.tsx  |  43 +++++++-----
 src/app/piletid/page.tsx  | 138 +++++++++++++++++++++++++-------------
 src/components/Header.tsx |  10 ++-
 src/data/timetable.ts     |   4 ++
 4 files changed, 129 insertions(+), 66 deletions(-)

diff --git a/src/app/ajakava/page.tsx b/src/app/ajakava/page.tsx
index 5dead9b..3d76b19 100644
--- a/src/app/ajakava/page.tsx
+++ b/src/app/ajakava/page.tsx
@@ -13,7 +13,7 @@ export default function Timetable() {
   return (
     <div className="flex flex-col min-h-[90vh] p-6 sm:p-12 pt-18">
       <h1
-        className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 mb-6`}
+        className={`text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-14 mb-8`}
       >
         Ajakava
       </h1>
@@ -24,10 +24,10 @@ export default function Timetable() {
           <button
             key={tab}
             onClick={() => setActiveTab(tab)}
-            className={`px-4 py-2 text-sm sm:text-base font-semibold rounded ${
+            className={`${vipnagorgialla.className} uppercase italic px-4 py-2 text-sm sm:text-base font-semibold ${
               activeTab === tab
                 ? "bg-[#00A3E0] text-white"
-                : "bg-[#d5d5e0] dark:bg-[#2A2C3F] text-[#2A2C3F] dark:text-[#EEE5E5] hover:bg-blue-200 dark:hover:bg-blue-700"
+                : "bg-[#007CAB] dark:bg-[#007CAB] text-[#EEE5E5] hover:bg-[#00A3E0] dark:hover:bg-[#007CAB]"
             } transition-colors`}
           >
             {tab}
@@ -38,21 +38,32 @@ export default function Timetable() {
       {/* Schedule entries */}
       <div className="space-y-6">
         {schedule.map((item, idx) => (
-          <div key={idx} className="border-l-4 border-blue-500 pl-4">
-            <div className="text-blue-500 text-2xl font-bold">{item.time}</div>
-            <div className="text-xl font-semibold text-[#2A2C3F] dark:text-[#EEE5E5]">
-              {item.title}
+          <div
+            key={idx}
+            className="border-l-3 border-[#007CAB] pl-4 flex flex-row gap-12"
+          >
+            <div
+              className={` ${vipnagorgialla.className} text-[#00A3E0] text-4xl font-bold italic`}
+            >
+              {item.time}
             </div>
-            {item.description && (
-              <div className="text-md text-[#4B4E6D] dark:text-gray-400">
-                {item.description}
-              </div>
-            )}
-            {item.location && (
-              <div className="text-sm italic text-[#7C7F99] dark:text-gray-500">
-                {item.location}
+            <div>
+              <div
+                className={`${vipnagorgialla.className} text-3xl italic font-bold text-[#2A2C3F] dark:text-[#EEE5E5]`}
+              >
+                {item.title}
               </div>
-            )}
+              {item.description && (
+                <div className="text-xl text-[#938BA1] dark:text-[#938BA1]">
+                  {item.description}
+                </div>
+              )}
+              {item.location && (
+                <div className="text-xl text-[#938BA1] dark:text-[#938BA1]">
+                  {item.location}
+                </div>
+              )}
+            </div>
           </div>
         ))}
       </div>
diff --git a/src/app/piletid/page.tsx b/src/app/piletid/page.tsx
index 1e938b2..4707f69 100644
--- a/src/app/piletid/page.tsx
+++ b/src/app/piletid/page.tsx
@@ -1,52 +1,96 @@
 import { vipnagorgialla } from "@/components/Vipnagorgialla";
-import Link from 'next/link';
+import Link from "next/link";
 
 export default function Tickets() {
-    return (
-        <div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
-            <h1 className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4`}>PILETID JA REGIS&shy;TREERIMINE</h1>
-            <div className="flex justify-center lg:items-center flex-col lg:flex-row gap-8 md:gap-12 flex-grow mb-16 md:mt-8 lg:mt-0">
-                <div className="bg-[#007CAB] -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`}>8€</h2>
-                    <h3 className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}>Arvutiga osaleja</h3>
-                    <ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]">
-                        <li className="text-xl italic">Isiklik laud, voolu- ja internetiühendus</li>
-                        <li className="text-xl">Ligipääs demoalale</li>
-                        <li className="text-xl">Turniiride pealt vaatamine</li>
-                        <li className="text-xl">Võimalus osaleda miniturniiridel</li>
-                    </ul>
-                    <Link href="https://fienta.com/et/tipilan">
-                        <button className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}>OSTA PILET</button>
-                    </Link>
-                </div>
-                <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`}>12-15€</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-[#007CAB]">
-                        <li className="text-xl">Võimalus osaleda CS2 või LoL turniiril</li>
-                        <li className="text-xl">Isiklik laud, voolu- ja internetiühendus</li>
-                        <li className="text-xl">Ligipääs demoalale</li>
-                        <li className="text-xl">Turniiride pealt vaatamine</li>
-                        <li className="text-xl">Võimalus osaleda miniturniiridel</li>
-                    </ul>
-                    <Link href="https://fienta.com/et/tipilan">
-                        <button className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}>OSTA PILET</button>
-                    </Link>
-                </div>
+  return (
+    <div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
+      <h1
+        className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4`}
+      >
+        PILETID JA REGIS&shy;TREERIMINE
+      </h1>
+      <div className="flex justify-center lg:items-center flex-col lg:flex-row gap-8 md:gap-12 flex-grow mb-16 md:mt-8 lg:mt-0">
+        <div className="bg-[#007CAB] -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`}
+          >
+            8€
+          </h2>
+          <h3
+            className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}
+          >
+            Arvutiga osaleja
+          </h3>
+          <ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]">
+            <li className="text-xl italic">
+              Isiklik laud, voolu- ja internetiühendus
+            </li>
+            <li className="text-xl">Ligipääs demoalale</li>
+            <li className="text-xl">Turniiride pealt vaatamine</li>
+            <li className="text-xl">Võimalus osaleda miniturniiridel</li>
+          </ul>
+          <Link href="https://fienta.com/et/tipilan" target="_blank">
+            <button
+              className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
+            >
+              OSTA PILET
+            </button>
+          </Link>
+        </div>
+        <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`}
+          >
+            12-15€
+          </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-[#007CAB]">
+            <li className="text-xl">Võimalus osaleda CS2 või LoL turniiril</li>
+            <li className="text-xl">
+              Isiklik laud, voolu- ja internetiühendus
+            </li>
+            <li className="text-xl">Ligipääs demoalale</li>
+            <li className="text-xl">Turniiride pealt vaatamine</li>
+            <li className="text-xl">Võimalus osaleda miniturniiridel</li>
+          </ul>
+          <Link href="https://fienta.com/et/tipilan" target="_blank">
+            <button
+              className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
+            >
+              OSTA PILET
+            </button>
+          </Link>
+        </div>
 
-                <div className="bg-[#007CAB] -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`}>6€</h2>
-                    <h3 className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}>Külastaja</h3>
-                    <ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]">
-                        <li className="text-xl">Ligipääs demoalale</li>
-                        <li className="text-xl">Turniiride pealt vaatamine</li>
-                        <li className="text-xl">Võimalus osaleda miniturniiridel</li>
-                    </ul>
-                    <Link href="https://fienta.com/et/tipilan">
-                        <button className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}>OSTA PILET</button>
-                    </Link>
-                </div>
-            </div>
+        <div className="bg-[#007CAB] -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`}
+          >
+            6€
+          </h2>
+          <h3
+            className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}
+          >
+            Külastaja
+          </h3>
+          <ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]">
+            <li className="text-xl">Ligipääs demoalale</li>
+            <li className="text-xl">Turniiride pealt vaatamine</li>
+            <li className="text-xl">Võimalus osaleda miniturniiridel</li>
+          </ul>
+          <Link href="https://fienta.com/et/tipilan" target="_blank">
+            <button
+              className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
+            >
+              OSTA PILET
+            </button>
+          </Link>
         </div>
-    );
-}
\ No newline at end of file
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3522749..3c54ad5 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -44,9 +44,13 @@ const Header = ({
       </button>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon">
-            <MdSunny className="scale-150 text-[#2A2C3F] dark:hidden" />
-            <MdModeNight className="scale-150 dark:text-[#EEE5E5] not-dark:hidden" />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-10 cursor-pointer"
+          >
+            <MdSunny className="scale-135 text-[#2A2C3F] dark:hidden" />
+            <MdModeNight className="scale-135 dark:text-[#EEE5E5] not-dark:hidden" />
             <span className="sr-only">Toggle theme</span>
           </Button>
         </DropdownMenuTrigger>
diff --git a/src/data/timetable.ts b/src/data/timetable.ts
index cf748b6..d91615e 100644
--- a/src/data/timetable.ts
+++ b/src/data/timetable.ts
@@ -10,20 +10,24 @@ export const scheduleData: Record<string, ScheduleItem[]> = {
     {
       title: "League of Legends põhiturniir",
       location: "Aula",
+      time: "-",
     },
     {
       title: "Miniturniirid",
       location: "Tudengimaja",
+      time: "-",
     },
   ],
   "25. oktoober": [
     {
       title: "Counter-Strike 2 põhiturniir",
       location: "Aula",
+      time: "-",
     },
     {
       title: "Miniturniirid",
       location: "Tudengimaja",
+      time: "-",
     },
   ],
 };