|
|
|
|
@ -1,55 +1,74 @@ |
|
|
|
|
import { vipnagorgialla } from "./layout"; |
|
|
|
|
import { SiDiscord, SiInstagram, SiFacebook } from "react-icons/si"; |
|
|
|
|
import { MdEast, MdEmojiEvents, MdEventNote, MdWeekend } from "react-icons/md"; |
|
|
|
|
|
|
|
|
|
export default function Home() { |
|
|
|
|
return ( |
|
|
|
|
<div className="flex flex-col"> |
|
|
|
|
<div> |
|
|
|
|
{/* Title */} |
|
|
|
|
<div className="border-b-3 border-[#007CAB] flex"> |
|
|
|
|
<div className="border-b-3 border-[#007CAB] flex items-center justify-between"> |
|
|
|
|
<img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-64"/> |
|
|
|
|
<div className="pr-12 hidden 2xl:block"> |
|
|
|
|
<h3 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F]`}>Auhinnafond</h3> |
|
|
|
|
<h2 className={`text-8xl ${vipnagorgialla.className} font-bold italic text-[#007CAB]`}>10 000€</h2> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* Grid of buttons */} |
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 border-[#007CAB]"> |
|
|
|
|
<div className="p-12 border-b-3 lg:border-r-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors"> |
|
|
|
|
<button className="cursor-pointer"> |
|
|
|
|
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic mb-16 text-[#2A2C3F] flex items-center`}> |
|
|
|
|
Ajakava → |
|
|
|
|
<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-all"> |
|
|
|
|
<div className="cursor-pointer flex flex-row justify-between"> |
|
|
|
|
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}> |
|
|
|
|
Ajakava |
|
|
|
|
</h2> |
|
|
|
|
</button> |
|
|
|
|
<p className="text-xl"> |
|
|
|
|
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<MdEventNote size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/> |
|
|
|
|
<p className="text-xl group-hover:text-black"> |
|
|
|
|
TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust. |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="p-12 border-b-3 lg:border-r-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors"> |
|
|
|
|
<button className="cursor-pointer"> |
|
|
|
|
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] mb-16 flex items-center`}> |
|
|
|
|
Turniirid → |
|
|
|
|
<div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition-all"> |
|
|
|
|
<div className="cursor-pointer flex flex-row justify-between"> |
|
|
|
|
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}> |
|
|
|
|
Turniirid |
|
|
|
|
</h2> |
|
|
|
|
</button> |
|
|
|
|
<p className="text-xl"> |
|
|
|
|
TipiLANil toimuvad suurejoonelised CS2 ja Lol turniirid, mille auhinnafondid on 5000 € |
|
|
|
|
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<MdEmojiEvents size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/> |
|
|
|
|
<p className="text-xl group-hover:text-black"> |
|
|
|
|
TipiLANil toimuvad suurejoonelised Counter-Strike 2 ja League of Legends turniirid, mille auhinnafondid on 5000 € |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="p-12 border-b-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors"> |
|
|
|
|
<button className="cursor-pointer"> |
|
|
|
|
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic mb-16 text-[#2A2C3F] flex items-center`}> |
|
|
|
|
Messiala → |
|
|
|
|
<div className="p-12 flex flex-col justify-between border-b-3 border-[#007CAB] group hover:bg-[#007CAB] transition-all"> |
|
|
|
|
<div className="cursor-pointer flex flex-row justify-between"> |
|
|
|
|
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}> |
|
|
|
|
Messiala |
|
|
|
|
</h2> |
|
|
|
|
</button> |
|
|
|
|
<p className="text-xl"> |
|
|
|
|
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<MdWeekend size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/> |
|
|
|
|
<p className="text-xl 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-colors`}> |
|
|
|
|
<button className="cursor-pointer text-left"> |
|
|
|
|
<h3 className="text-5xl text-[#2A2C3F] pb-8"> |
|
|
|
|
Broneeri oma koht juba täna. → |
|
|
|
|
<div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] hover:bg-[#007CAB] group transition-all`}> |
|
|
|
|
<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"> |
|
|
|
|
Broneeri oma koht juba täna. |
|
|
|
|
</h3> |
|
|
|
|
</button> |
|
|
|
|
<h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5] transition-colors"> |
|
|
|
|
<MdEast size={'4em'} className="text-[#007CAB] ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/> |
|
|
|
|
</div> |
|
|
|
|
<h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5]"> |
|
|
|
|
24.-26. okt. |
|
|
|
|
</h2> |
|
|
|
|
</div> |
|
|
|
|
@ -59,13 +78,13 @@ export default function Home() { |
|
|
|
|
{/* Social media */} |
|
|
|
|
<div className="flex flex-row"> |
|
|
|
|
<a href="#" target="_blank" rel="noopener noreferrer"> |
|
|
|
|
<img src="/discord.svg" alt="Twitch" className="h-8 mx-4"/> |
|
|
|
|
<SiDiscord title="Discord" size={'2em'} className="mx-4 text-[#2A2C3F]"/> |
|
|
|
|
</a> |
|
|
|
|
<a href="#" target="_blank" rel="noopener noreferrer"> |
|
|
|
|
<img src="/instagram.svg" alt="Instagram" className="h-8 mx-4"/> |
|
|
|
|
<SiInstagram title="Instagram" size={'2em'} className="mx-4 text-[#2A2C3F]"/> |
|
|
|
|
</a> |
|
|
|
|
<a href="#" target="_blank" rel="noopener noreferrer"> |
|
|
|
|
<img src="/facebook.svg" alt="Facebook" className="h-8 mx-4"/> |
|
|
|
|
<SiFacebook title="Facebook" size={'2em'} className="mx-4 text-[#2A2C3F]"/> |
|
|
|
|
</a> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
v4ltages
8 months ago
