mirror of
https://github.com/Lapikud/tipilan.git
synced 2026-03-23 13:24:21 +00:00
Modify tournament page to fit figma styling
This commit is contained in:
@@ -1,7 +1,6 @@
|
|||||||
import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import SectionDivider from "@/components/SectionDivider";
|
|
||||||
|
|
||||||
export default function Tourney() {
|
export default function Tourney() {
|
||||||
const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5`;
|
const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5`;
|
||||||
@@ -21,160 +20,172 @@ export default function Tourney() {
|
|||||||
{/* infot lähiajal.*/}
|
{/* infot lähiajal.*/}
|
||||||
{/*</p>*/}
|
{/*</p>*/}
|
||||||
|
|
||||||
<div className="flex flex-col gap-8 md:gap-16">
|
<div className="flex flex-col">
|
||||||
{/* CS2 turniir */}
|
{/* CS2 turniir */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
|
<div className="hover:bg-[#007CAB] py-8 md:py-16 transition group">
|
||||||
<div className="-skew-x-2 md:-skew-x-5">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
|
||||||
<h2 className={`${headingStyle}`}>CS2 turniir</h2>
|
<div className="-skew-x-2 md:-skew-x-5">
|
||||||
<p className={"text-2xl mb-4 text-neutral-500"}>
|
<h2 className={`${headingStyle}`}>CS2 turniir</h2>
|
||||||
Toimumisaeg veel selgumisel
|
<p
|
||||||
</p>
|
className={
|
||||||
<p className="text-balance">
|
"text-2xl mb-4 text-neutral-500 group-hover:text-black"
|
||||||
TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire
|
}
|
||||||
juba sel sügisel. Haara kaasa sõbrad ja saa osa adrenaliinirohkest
|
>
|
||||||
kogemusest!
|
Toimumisaeg veel selgumisel
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<p className="text-balance">
|
||||||
<p className="text-balance">
|
TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire
|
||||||
Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna vahel
|
juba sel sügisel. Haara kaasa sõbrad ja saa osa
|
||||||
ära. Iga tiimiliige saab vastavalt saavutatud kohale auhinnaks kas
|
adrenaliinirohkest kogemusest!
|
||||||
600€, 300€ või 150€.
|
</p>
|
||||||
</p>
|
<br />
|
||||||
<br />
|
<p className="text-balance">
|
||||||
|
Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna
|
||||||
|
vahel ära. Iga tiimiliige saab vastavalt saavutatud kohale
|
||||||
|
auhinnaks kas 600€, 300€ või 150€.
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
|
||||||
<div className={"flex flex-row flex-wrap gap-8"}>
|
<div className={"flex flex-row flex-wrap gap-8"}>
|
||||||
<Link href="/reeglid/cs2" target="_blank">
|
<Link href="/reeglid/cs2" target="_blank">
|
||||||
<button
|
<button
|
||||||
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
||||||
>
|
>
|
||||||
LOE REEGLEID
|
LOE REEGLEID
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<a href="https://fienta.com/et/tipilan" target="_blank">
|
<a href="https://fienta.com/et/tipilan" target="_blank">
|
||||||
<button
|
<button
|
||||||
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
||||||
>
|
>
|
||||||
OSTA PILET
|
OSTA PILET
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="hidden md:block">
|
||||||
<div className="hidden md:block">
|
<div>
|
||||||
<div>
|
{/* Outside div needs to remain so that overflow won't occur*/}
|
||||||
{/* Outside div needs to remain so that overflow won't occur*/}
|
<Image
|
||||||
<Image
|
src="/images/cs2_tournament_logo.png"
|
||||||
src="/images/cs2_tournament_logo.png"
|
alt="CS2 tournament"
|
||||||
alt="CS2 tournament"
|
width={600}
|
||||||
width={600}
|
height={400}
|
||||||
height={400}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SectionDivider />
|
|
||||||
|
|
||||||
{/* LoL turniir */}
|
{/* LoL turniir */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
|
<div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-[#1F5673] transition group">
|
||||||
<div className="hidden md:block">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
|
||||||
<div>
|
<div className="hidden md:block">
|
||||||
{/* Outside div needs to remain so that overflow won't occur*/}
|
<div>
|
||||||
<Image
|
{/* Outside div needs to remain so that overflow won't occur*/}
|
||||||
src="/images/lol_tournament_logo.png"
|
<Image
|
||||||
alt="LoL tournament"
|
src="/images/lol_tournament_logo.png"
|
||||||
width={600}
|
alt="LoL tournament"
|
||||||
height={400}
|
width={600}
|
||||||
/>
|
height={400}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
|
||||||
<div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
|
<h2 className={`${headingStyle}`}>LoL turniir</h2>
|
||||||
<h2 className={`${headingStyle}`}>LoL turniir</h2>
|
<p
|
||||||
<p className={"text-2xl mb-4 text-neutral-500"}>
|
className={
|
||||||
Toimumisaeg veel selgumisel
|
"text-2xl mb-4 text-neutral-500 group-hover:text-black"
|
||||||
</p>
|
}
|
||||||
<p className="text-balance">
|
>
|
||||||
TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire
|
Toimumisaeg veel selgumisel
|
||||||
juba sel sügisel. Haara kaasa sõbrad ja saa osa adrenaliinirohkest
|
</p>
|
||||||
kogemusest!
|
<p className="text-balance">
|
||||||
</p>
|
TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire
|
||||||
<br />
|
juba sel sügisel. Haara kaasa sõbrad ja saa osa
|
||||||
<p className="text-balance">
|
adrenaliinirohkest kogemusest!
|
||||||
Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna vahel
|
</p>
|
||||||
ära. Iga tiimiliige saab vastavalt saavutatud kohale auhinnaks kas
|
<br />
|
||||||
400€, 200€ või 100€.
|
<p className="text-balance">
|
||||||
</p>
|
Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna
|
||||||
<br />
|
vahel ära. Iga tiimiliige saab vastavalt saavutatud kohale
|
||||||
<div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
|
auhinnaks kas 400€, 200€ või 100€.
|
||||||
<Link href="/kodukord" target="_blank">
|
</p>
|
||||||
<button
|
<br />
|
||||||
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
<div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
|
||||||
>
|
<Link href="/kodukord" target="_blank">
|
||||||
LOE REEGLEID
|
<button
|
||||||
</button>
|
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
||||||
</Link>
|
>
|
||||||
<a href="https://fienta.com/et/tipilan" target="_blank">
|
LOE REEGLEID
|
||||||
<button
|
</button>
|
||||||
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
</Link>
|
||||||
>
|
<a href="https://fienta.com/et/tipilan" target="_blank">
|
||||||
OSTA PILET
|
<button
|
||||||
</button>
|
className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
||||||
</a>
|
>
|
||||||
|
OSTA PILET
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SectionDivider />
|
|
||||||
|
|
||||||
{/* Mini-turniirid */}
|
{/* Mini-turniirid */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
|
<div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-[#1F5673] transition group">
|
||||||
<div className="-skew-x-2 md:-skew-x-5">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
|
||||||
<h2 className={`${headingStyle}`}>Mini­turniirid</h2>
|
<div className="-skew-x-2 md:-skew-x-5">
|
||||||
<p className={"text-2xl mb-4 text-neutral-500"}>
|
<h2 className={`${headingStyle}`}>Mini­turniirid</h2>
|
||||||
Toimumisaeg veel selgumisel
|
<p
|
||||||
</p>
|
className={
|
||||||
<p className="text-balance">
|
"text-2xl mb-4 text-neutral-500 group-hover:text-black"
|
||||||
TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu
|
}
|
||||||
tekitavaid miniturniire. Miniturniirid toimuvad järgnevates
|
>
|
||||||
mängudes: SimRacing, Tekken, FIFA, Minecraft Bedwars, Buckshot
|
Toimumisaeg veel selgumisel
|
||||||
Roulette, LostGamer ja palju muud.
|
</p>
|
||||||
</p>
|
<p className="text-balance">
|
||||||
<br />
|
TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu
|
||||||
<p className="text-balance">
|
tekitavaid miniturniire. Miniturniirid toimuvad järgnevates
|
||||||
Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab
|
mängudes: SimRacing, Tekken, FIFA, Minecraft Bedwars, Buckshot
|
||||||
rahalise auhinna miniturniiri võitja.
|
Roulette, LostGamer ja palju muud.
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<div className="flex flex-row flex-wrap gap-4 md:gap-8">
|
<p className="text-balance">
|
||||||
<Link href="/kodukord" target="_blank">
|
Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab
|
||||||
<button
|
rahalise auhinna miniturniiri võitja.
|
||||||
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
</p>
|
||||||
>
|
<br />
|
||||||
LOE REEGLEID
|
<div className="flex flex-row flex-wrap gap-4 md:gap-8">
|
||||||
</button>
|
<Link href="/kodukord" target="_blank">
|
||||||
</Link>
|
<button
|
||||||
<a href="https://fienta.com/et/tipilan" target="_blank">
|
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
||||||
<button
|
>
|
||||||
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
LOE REEGLEID
|
||||||
>
|
</button>
|
||||||
OSTA PILET
|
</Link>
|
||||||
</button>
|
<a href="https://fienta.com/et/tipilan" target="_blank">
|
||||||
</a>
|
<button
|
||||||
|
className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
|
||||||
|
>
|
||||||
|
OSTA PILET
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="hidden md:block">
|
||||||
<div className="hidden md:block">
|
<div>
|
||||||
<div>
|
{/* Outside div needs to remain so that overflow won't occur*/}
|
||||||
{/* Outside div needs to remain so that overflow won't occur*/}
|
<Image
|
||||||
<Image
|
src="/images/minitournament_logo.png"
|
||||||
src="/images/minitournament_logo.png"
|
alt="mini tournaments"
|
||||||
alt="mini tournaments"
|
width={600}
|
||||||
width={600}
|
height={400}
|
||||||
height={400}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SectionDivider />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user