lapikud
/
tipilan
mirror of https://github.com/Lapikud/tipilan
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update ticket page to fit figma design

Browse Source
pull/2/head
v4ltages 5 months ago
parent 506a4c3ad5
commit 26b196b7f6
No known key found for this signature in database
GPG Key ID: DC7BC38E0DC642B
4 changed files with 129 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 43
      src/app/ajakava/page.tsx
  2. 136
      src/app/piletid/page.tsx
  3. 10
      src/components/Header.tsx
  4. 4
      src/data/timetable.ts

43
src/app/ajakava/page.tsx
Unescape View File

@ -13,7 +13,7 @@ export default function Timetable() {
return ( return (
<div className="flex flex-col min-h-[90vh] p-6 sm:p-12 pt-18"> <div className="flex flex-col min-h-[90vh] p-6 sm:p-12 pt-18">
<h1 <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 Ajakava
</h1> </h1>
@ -24,10 +24,10 @@ export default function Timetable() {
<button <button
key={tab} key={tab}
onClick={() => setActiveTab(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 activeTab === tab
? "bg-[#00A3E0] text-white" ? "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`} } transition-colors`}
> >
{tab} {tab}
@ -38,21 +38,32 @@ export default function Timetable() {
{/* Schedule entries */} {/* Schedule entries */}
<div className="space-y-6"> <div className="space-y-6">
{schedule.map((item, idx) => ( {schedule.map((item, idx) => (
<div key={idx} className="border-l-4 border-blue-500 pl-4"> <div
<div className="text-blue-500 text-2xl font-bold">{item.time}</div> key={idx}
<div className="text-xl font-semibold text-[#2A2C3F] dark:text-[#EEE5E5]"> className="border-l-3 border-[#007CAB] pl-4 flex flex-row gap-12"
{item.title} >
<div
className={` ${vipnagorgialla.className} text-[#00A3E0] text-4xl font-bold italic`}
>
{item.time}
</div> </div>
{item.description && ( <div>
<div className="text-md text-[#4B4E6D] dark:text-gray-400"> <div
{item.description} className={`${vipnagorgialla.className} text-3xl italic font-bold text-[#2A2C3F] dark:text-[#EEE5E5]`}
</div> >
)} {item.title}
{item.location && (
<div className="text-sm italic text-[#7C7F99] dark:text-gray-500">
{item.location}
</div> </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>
))} ))}
</div> </div>

136
src/app/piletid/page.tsx
Unescape View File

@ -1,52 +1,96 @@
import { vipnagorgialla } from "@/components/Vipnagorgialla"; import { vipnagorgialla } from "@/components/Vipnagorgialla";
import Link from 'next/link'; import Link from "next/link";
export default function Tickets() { export default function Tickets() {
return ( return (
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16"> <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> <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"> 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`}
<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> PILETID JA REGIS&shy;TREERIMINE
<h3 className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}>Arvutiga osaleja</h3> </h1>
<ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]"> <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">
<li className="text-xl italic">Isiklik laud, voolu- ja internetiühendus</li> <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]">
<li className="text-xl">Ligipääs demoalale</li> <h2
<li className="text-xl">Turniiride pealt vaatamine</li> className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`}
<li className="text-xl">Võimalus osaleda miniturniiridel</li> >
</ul> 8€
<Link href="https://fienta.com/et/tipilan"> </h2>
<button className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}>OSTA PILET</button> <h3
</Link> className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}
</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]"> Arvutiga osaleja
<h2 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`}>12-15€</h2> </h3>
<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 italic">
<li className="text-xl">Võimalus osaleda CS2 või LoL turniiril</li> Isiklik laud, voolu- ja internetiühendus
<li className="text-xl">Isiklik laud, voolu- ja internetiühendus</li> </li>
<li className="text-xl">Ligipääs demoalale</li> <li className="text-xl">Ligipääs demoalale</li>
<li className="text-xl">Turniiride pealt vaatamine</li> <li className="text-xl">Turniiride pealt vaatamine</li>
<li className="text-xl">Võimalus osaleda miniturniiridel</li> <li className="text-xl">Võimalus osaleda miniturniiridel</li>
</ul> </ul>
<Link href="https://fienta.com/et/tipilan"> <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> <button
</Link> className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
</div> >
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]"> <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> <h2
<h3 className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}>Külastaja</h3> className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`}
<ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]"> >
<li className="text-xl">Ligipääs demoalale</li> 6€
<li className="text-xl">Turniiride pealt vaatamine</li> </h2>
<li className="text-xl">Võimalus osaleda miniturniiridel</li> <h3
</ul> className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}
<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> Külastaja
</Link> </h3>
</div> <ul className="pl-4 mb-8 list-[square] marker:text-[#1F5673]">
</div> <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>
); </div>
</div>
);
} }

10
src/components/Header.tsx
Unescape View File

@ -44,9 +44,13 @@ const Header = ({
</button> </button>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon"> <Button
<MdSunny className="scale-150 text-[#2A2C3F] dark:hidden" /> variant="ghost"
<MdModeNight className="scale-150 dark:text-[#EEE5E5] not-dark:hidden" /> 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> <span className="sr-only">Toggle theme</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>

4
src/data/timetable.ts
Unescape View File

@ -10,20 +10,24 @@ export const scheduleData: Record<string, ScheduleItem[]> = {
{ {
title: "League of Legends põhiturniir", title: "League of Legends põhiturniir",
location: "Aula", location: "Aula",
time: "-",
}, },
{ {
title: "Miniturniirid", title: "Miniturniirid",
location: "Tudengimaja", location: "Tudengimaja",
time: "-",
}, },
], ],
"25. oktoober": [ "25. oktoober": [
{ {
title: "Counter-Strike 2 põhiturniir", title: "Counter-Strike 2 põhiturniir",
location: "Aula", location: "Aula",
time: "-",
}, },
{ {
title: "Miniturniirid", title: "Miniturniirid",
location: "Tudengimaja", location: "Tudengimaja",
time: "-",
}, },
], ],
}; };

Write Preview
Loading…
Cancel
Save