mirror of https://github.com/Lapikud/tipilan
pull/2/head
TFT
8 months ago
parent
8422b23164
commit
9486e873b5
9 changed files with 880 additions and 96 deletions
@ -1,98 +1,146 @@ |
|||||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||||
import { MdEast, MdEmojiEvents, MdEventNote, MdWeekend } from "react-icons/md"; |
import Link from "next/link"; |
||||||
import Link from 'next/link'; |
import Image from "next/image"; |
||||||
|
|
||||||
export default function Home() { |
export default function Home() { |
||||||
return ( |
return ( |
||||||
<div> |
<div> |
||||||
{/* Title */} |
{/* Title */} |
||||||
<div className="border-b-3 border-[#007CAB] dark:border-[#00A3E0] flex items-center justify-between pt-18"> |
<div className="border-b-3 border-[#007CAB] dark:border-[#00A3E0] flex items-center justify-between pt-18 gap-12"> |
||||||
<img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-64 dark:hidden"/> |
<Image |
||||||
<img src="/tipilan-dark.svg" alt="TipiLAN Logo" className="h-36 mx-12 my-14 not-dark:hidden"/> |
src="/tipilan-white.svg" |
||||||
<div className="pr-12 hidden 2xl:block"> |
width={850} |
||||||
<h3 className={`text-6xl ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F]`}>Auhinnafond</h3> |
height={120} |
||||||
<h2 className={`text-8xl ${vipnagorgialla.className} font-bold italic text-[#007CAB] dark:text-[#00A3E0]`}>10 000€</h2> |
alt="TipiLAN Logo" |
||||||
</div> |
className="px-8 py-8 md:px-12 md:py-14 dark:hidden w-[max(300px,min(100%-6rem,850px))] h-auto" |
||||||
</div> |
/> |
||||||
{/* Grid of buttons */} |
<Image |
||||||
<div className="grid grid-cols-1 xl:grid-cols-3 border-[#007CAB] dark:border-[#00A3E0] min-h-[33vh]"> |
src="/tipilan-dark.svg" |
||||||
<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"> |
width={850} |
||||||
<Link href="/timetable" prefetch={true}> |
height={120} |
||||||
<div className="cursor-pointer flex flex-row justify-between"> |
alt="TipiLAN Logo" |
||||||
<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]`}> |
className="px-8 py-8 md:px-12 md:py-14 not-dark:hidden w-[max(300px,min(100%-6rem,850px))] h-auto" |
||||||
Ajakava |
/> |
||||||
</h2> |
<div className="pr-12 hidden xl:block text-right"> |
||||||
<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"/> |
<h3 className={`text-[clamp(1.75rem,1.35rem+2vw,3.75rem)] ${vipnagorgialla.className} leading-[90%] font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F]`}> |
||||||
|
Auhinnafond |
||||||
|
</h3> |
||||||
|
<h2 |
||||||
|
className={`text-[clamp(3.5rem,3rem+2.5vw,6rem)] ${vipnagorgialla.className} leading-[90%] font-bold italic text-[#007CAB] dark:text-[#00A3E0]`} |
||||||
|
> |
||||||
|
10 000€ |
||||||
|
</h2> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</Link> |
{/* Grid of buttons */} |
||||||
<div> |
<div className="grid grid-cols-1 xl:grid-cols-3 border-[#007CAB] dark:border-[#00A3E0]"> |
||||||
<MdEventNote size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] mb-4"/> |
<Link |
||||||
<p className="text-xl dark:group-hover:text-[#2A2C3F] group-hover:text-black"> |
href="/ajakava" |
||||||
TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust. |
className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 lg:border-r-3 group border-[#007CAB] dark:border-[#00A3E0] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition" |
||||||
</p> |
> |
||||||
</div> |
<div className="cursor-pointer flex flex-row justify-between gap-4 items-center"> |
||||||
</div> |
<h2 |
||||||
|
className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] group-hover:text-black dark:group-hover:text-[#2A2C3F]`} |
||||||
|
> |
||||||
|
Ajakava |
||||||
|
</h2> |
||||||
|
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">arrow_right_alt</span> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">event_note</span> |
||||||
|
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black"> |
||||||
|
TipiLAN on pungil põnevatest turniiridest, |
||||||
|
mini-võistlustest, loengutest ja paljust muust. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</Link> |
||||||
|
<Link |
||||||
|
href="/turniirid" |
||||||
|
className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 lg:border-r-3 group border-[#007CAB] dark:border-[#00A3E0] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition" |
||||||
|
> |
||||||
|
<div className="cursor-pointer flex flex-row justify-between gap-4 items-center"> |
||||||
|
<h2 |
||||||
|
className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover:text-[#2A2C3F] group-hover:text-black`} |
||||||
|
> |
||||||
|
Turniirid |
||||||
|
</h2> |
||||||
|
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">arrow_right_alt</span> |
||||||
|
</div> |
||||||
|
|
||||||
<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"> |
<div className="flex flex-col gap-4"> |
||||||
<Link href="/tourney" prefetch={true}> |
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">trophy</span> |
||||||
<div className="cursor-pointer flex flex-row justify-between"> |
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover: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`}> |
TipiLANil toimuvad suurejoonelised CS2 ja LoL |
||||||
Turniirid |
turniirid, mille auhinnafond on 10 000€. |
||||||
</h2> |
</p> |
||||||
<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> |
||||||
|
<Link |
||||||
|
href="/messiala" |
||||||
|
className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 border-[#007CAB] dark:border-[#00A3E0] group hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition-all" |
||||||
|
> |
||||||
|
<div className="cursor-pointer flex flex-row justify-between gap-4 items-center"> |
||||||
|
<h2 |
||||||
|
className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover:text-[#2A2C3F] group-hover:text-black`} |
||||||
|
> |
||||||
|
Messiala |
||||||
|
</h2> |
||||||
|
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">arrow_right_alt</span> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">weekend</span> |
||||||
|
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black"> |
||||||
|
TipiLANi messialal paiknevad ettevõtted, |
||||||
|
lisategevused ja toimuvad loengud. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</Link> |
||||||
</div> |
</div> |
||||||
</Link> |
{/* Date */} |
||||||
<div> |
<Link |
||||||
<MdEmojiEvents size={'4em'} className="text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] mb-4"/> |
href="/piletid" |
||||||
<p className="text-xl dark:group-hover:text-[#2A2C3F] group-hover:text-black"> |
className={`p-8 md: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`} |
||||||
TipiLANil toimuvad suurejoonelised Counter-Strike 2 ja League of Legends turniirid, mille auhinnafond on 10 000€. |
> |
||||||
</p> |
<div className="cursor-pointer text-left flex flex-row justify-between xl:justify-start gap-8"> |
||||||
</div> |
<h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] dark:group-hover:text-[#2A2C3F] text-[#2A2C3F] group-hover:text-black pb-8"> |
||||||
</div> |
Bro­neeri oma koht juba täna! |
||||||
|
</h3> |
||||||
<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"> |
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] hidden md:block group-hover:translate-x-2 group-hover:text-[#EEE5E5] dark:group-hover:text-[#EEE5E5] transition">arrow_right_alt</span> |
||||||
<Link href="/expo" prefetch={true}> |
</div> |
||||||
<div className="cursor-pointer flex flex-row justify-between"> |
<h2 className="text-6xl text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]"> |
||||||
<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`}> |
24.-26. okt. |
||||||
Messiala |
</h2> |
||||||
</h2> |
</Link> |
||||||
<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"/> |
{/* 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-32 items-center"> |
||||||
|
<Link href="https://taltech.ee"> |
||||||
|
<Image |
||||||
|
src="/sponsors/taltech-color.png" |
||||||
|
alt="Taltech (Tallinna Tehnikaülikool)" |
||||||
|
width={192} |
||||||
|
height={192} |
||||||
|
className="object-contain" |
||||||
|
/> |
||||||
|
</Link> |
||||||
|
<Link href="https://www.redbull.com/ee-et/"> |
||||||
|
<Image |
||||||
|
src="/sponsors/redbull.png" |
||||||
|
alt="Redbull" |
||||||
|
width={80} |
||||||
|
height={80} |
||||||
|
className="object-contain" |
||||||
|
/> |
||||||
|
</Link> |
||||||
|
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</Link> |
|
||||||
<div> |
|
||||||
<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] 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 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] 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] 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> |
); |
||||||
</div> |
|
||||||
); |
|
||||||
} |
} |
||||||
Loading…
Reference in new issue