Dark mode and sponsors list

This commit is contained in:
2025-05-01 04:45:29 +03:00
parent 4e65bc5412
commit 6bf3c12b28
17 changed files with 1137 additions and 56 deletions

View File

@@ -2,9 +2,9 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla";
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 className="flex flex-col min-h-[90vh] 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-4`}>Messiala</h1>
<p className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5]">Koostööpartneritega arutamisel. Rohkem infot teel!</p>
</div>
);
}

View File

@@ -1,10 +1,14 @@
// Head metadata
// import type { Metadata } from "next";
// Provides the theme context to the app
import { ThemeProvider } from "@/components/Theme-provider"
import "./globals.css";
// Fonts
import { Work_Sans } from "next/font/google";
import "./globals.css";
import SidebarParent from "@/components/SidebarParent";
import Footer from "@/components/Footer";
@@ -25,13 +29,20 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<body
className={`${workSans} antialiased bg-[#EEE5E5]`}
className={`${workSans} antialiased bg-[#EEE5E5] dark:bg-[#0E0F19]`}
>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<SidebarParent />
{children}
<Footer />
</ThemeProvider>
</body>
</html>
);

View File

@@ -6,80 +6,93 @@ export default function Home() {
return (
<div>
{/* Title */}
<div className="border-b-3 border-[#007CAB] flex items-center justify-between pt-18">
<img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-64"/>
<div className="border-b-3 border-[#007CAB] dark:border-[#00A3E0] flex items-center justify-between pt-18">
<img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-64 dark:hidden"/>
<img src="/tipilan-dark.svg" alt="TipiLAN Logo" className="h-36 mx-12 my-14 not-dark:hidden"/>
<div className="pr-12 hidden 2xl:block">
<h3 className={`text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F]`}>Auhinnafond</h3>
<h2 className={`text-8xl ${vipnagorgialla.className} font-bold italic text-[#007CAB]`}>10 000</h2>
<h3 className={`text-6xl ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F]`}>Auhinnafond</h3>
<h2 className={`text-8xl ${vipnagorgialla.className} font-bold italic text-[#007CAB] dark:text-[#00A3E0]`}>10 000</h2>
</div>
</div>
{/* Grid of buttons */}
<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">
<div className="grid grid-cols-1 xl:grid-cols-3 border-[#007CAB] dark:border-[#00A3E0] min-h-[33vh]">
<div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] dark:border-[#00A3E0] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition">
<Link href="/timetable" prefetch={true}>
<div className="cursor-pointer flex flex-row justify-between">
<h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] group-hover:text-black`}>
<h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] group-hover:text-black dark:group-hover:text-[#2A2C3F]`}>
Ajakava
</h2>
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
<MdEast size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 -translate-y-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition"/>
</div>
</Link>
<div>
<MdEventNote size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
<p className="text-xl group-hover:text-black">
<MdEventNote size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] mb-4"/>
<p className="text-xl dark:group-hover:text-[#2A2C3F] group-hover:text-black">
TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.
</p>
</div>
</div>
<div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition">
<div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] dark:border-[#00A3E0] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition">
<Link href="/tourney" prefetch={true}>
<div className="cursor-pointer flex flex-row justify-between">
<h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] group-hover:text-black`}>
<h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover: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"/>
<MdEast size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 -translate-y-2 dark:group-hover:text-[#EEE5E5] 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">
<MdEmojiEvents size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] mb-4"/>
<p className="text-xl dark:group-hover:text-[#2A2C3F] group-hover:text-black">
TipiLANil toimuvad suurejoonelised Counter-Strike 2 ja League of Legends turniirid, mille auhinnafond on 10 000.
</p>
</div>
</div>
<div className="p-12 flex flex-col justify-between border-b-3 border-[#007CAB] group hover:bg-[#007CAB] transition-all">
<div className="p-12 flex flex-col justify-between border-b-3 border-[#007CAB] dark:border-[#00A3E0] group hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition-all">
<Link href="/expo" prefetch={true}>
<div className="cursor-pointer flex flex-row justify-between">
<h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] group-hover:text-black`}>
<h2 className={`text-4xl md:text-5xl ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover: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"/>
<MdEast size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 -translate-y-2 dark:group-hover:text-[#EEE5E5] 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">
<MdWeekend size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] mb-4"/>
<p className="text-xl dark:group-hover:text-[#2A2C3F] 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`}>
<div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] dark:border-[#00A3E0] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] group transition`}>
<Link href="/tickets" prefetch={true}>
<div className="cursor-pointer text-left flex flex-row justify-between xl:justify-start">
<h3 className="text-4xl md:text-5xl text-[#2A2C3F] group-hover:text-black pb-8">
<h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] dark:group-hover:text-[#2A2C3F] text-[#2A2C3F] group-hover:text-black pb-8">
Broneeri oma koht juba täna!
</h3>
<MdEast size={'4em'} className="text-[#007CAB] hidden md:block ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
<MdEast size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] hidden md:block ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] dark:group-hover:text-[#EEE5E5] transition"/>
</div>
</Link>
<h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5]">
<h2 className="text-6xl text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
24.-26. okt.
</h2>
</div>
{/* Sponsors */}
<div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] dark:border-[#00A3E0]`}>
<div className="text-left flex flex-col justify-between xl:justify-start">
<h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] group-hover:text-black pb-8">
TipiLANi tõmbab käima...
</h3>
<div className="flex flex-row gap-12">
<img src="/sponsors/taltech-color.png" alt="Taltech (Tallinna Tehnikaülikool)" className="h-48 w-48 object-contain"/>
<img src="/sponsors/redbull.png" alt="Redbull" className="h-48 w-48 object-contain"/>
</div>
</div>
</div>
</div>
);
}

View File

@@ -3,8 +3,8 @@ import Link from 'next/link';
export default function Tickets() {
return (
<div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] m-6 mt-16 md:m-16">
<h1 className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] mt-8 md:mt-16 mb-4`}>PILETID JA REGAMINE</h1>
<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 REGAMINE</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>

View File

@@ -2,9 +2,9 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla";
export default function Timetable() {
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`}>Ajakava</h1>
<p className="text-2xl text-[#2A2C3F]">Lisame ajakava lähiajal.</p>
<div className="flex flex-col min-h-[90vh] 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-4`}>Ajakava</h1>
<p className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5]">Lisame ajakava lähiajal.</p>
</div>
);
}

View File

@@ -2,9 +2,9 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla";
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 className="flex flex-col min-h-[90vh] 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-4`}>Turniirid</h1>
<p className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5]">Kui tahate oma oskusi proovile panna siis vaadake siia tagasi! Rohkem infot lähiajal.</p>
</div>
);
}