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

Modify tournament page to fit figma styling

Browse Source
pull/47/head
v4ltages 4 months ago
parent deb07df397
commit edb88be0f0
No known key found for this signature in database
GPG Key ID: DC7BC38E0DC642B
1 changed files with 148 additions and 137 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. 285
      src/app/turniirid/page.tsx

285
src/app/turniirid/page.tsx
Unescape View File

@ -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&shy;turniirid</h2> <div className="-skew-x-2 md:-skew-x-5">
<p className={"text-2xl mb-4 text-neutral-500"}> <h2 className={`${headingStyle}`}>Mini&shy;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>
); );

Write Preview
Loading…
Cancel
Save