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

reorder tournament sections, adjust colors and skew images according to figma design

Browse Source
pull/77/head
Arto Reinik 3 months ago
parent 95b035a864
commit 1d93c51c05
1 changed files with 61 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 122
      src/app/[locale]/turniirid/page.tsx

122
src/app/[locale]/turniirid/page.tsx
Unescape View File

@ -36,7 +36,7 @@ export default async function Tourney({
name: "Street Fighter 6",
prize: "200€",
image: "/messiala/street_fighter.jpg",
objectPosition: "object-right",
objectPosition: "object-center",
},
{
name: "Gran Turismo",
@ -88,6 +88,63 @@ export default async function Tourney({
</h1>
<div className="flex flex-col">
{/* Mini-turniirid */}
<div className="hover:bg-[#007CAB] py-8 md:py-16 border-b-[3px] border-[#1F5673] transition group">
<div className="mx-8 md:mx-16 lg:mx-32 xl:mx-48">
<div className="-skew-x-2 md:-skew-x-5 mb-8">
<h2 className={`${headingStyle}`}>
{t("tournaments.mini.title")}
</h2>
<p
className={
"text-2xl mb-4 text-neutral-500 group-hover:text-black"
}
>
{t("tournaments.mini.timing")}
</p>
<p className="text-balance">
{t("tournaments.mini.description1")}
</p>
<br />
<div className="flex flex-row flex-wrap gap-4 md:gap-8">
<Link href="/kodukord" target="_blank">
<button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
{t("tournaments.mini.readRules")}
</button>
</Link>
<a href="https://fienta.com/et/tipilan" target="_blank">
<button
className={`px-4 py-2 bg-[#00A3E0] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
{t("tournaments.mini.buyTicket")}
</button>
</a>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
{miniTournaments.map((tournament) => (
<div key={tournament.name} className="text-center">
<Image
src={tournament.image}
alt={tournament.name}
width={400}
height={300}
className={`border-10 border-[#00A3E0] bg-black object-cover w-full h-48 -skew-x-2 md:-skew-x-5 ${
tournament.objectPosition || "object-center"
}`}
/>
<div className="-skew-x-2 md:-skew-x-5">
<p className="mt-2 font-semibold">{tournament.name} - {tournament.prize}</p>
</div>
</div>
))}
</div>
</div>
</div>
{/* CS2 turniir */}
<div className="hover:bg-[#007CAB] py-8 md:py-16 transition group">
<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">
@ -124,7 +181,7 @@ export default async function Tourney({
</Link>
<a href="https://fienta.com/et/tipilan" target="_blank">
<button
className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
className={`px-4 py-2 bg-[#00A3E0] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
{t("tournaments.cs2.buyTicket")}
</button>
@ -146,7 +203,7 @@ export default async function Tourney({
</div>
{/* LoL turniir */}
<div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-[#1F5673] transition group">
<div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-b-[3px] border-[#1F5673] transition group">
<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="hidden md:block">
<div>
@ -188,7 +245,7 @@ export default async function Tourney({
</Link>
<a href="https://fienta.com/et/tipilan" target="_blank">
<button
className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
className={`px-4 py-2 bg-[#00A3E0] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
{t("tournaments.lol.buyTicket")}
</button>
@ -198,63 +255,6 @@ export default async function Tourney({
</div>
</div>
{/* Mini-turniirid */}
<div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-b-[3px] border-[#1F5673] transition group">
<div className="mx-8 md:mx-16 lg:mx-32 xl:mx-48">
<div className="-skew-x-2 md:-skew-x-5 mb-8">
<h2 className={`${headingStyle}`}>
{t("tournaments.mini.title")}
</h2>
<p
className={
"text-2xl mb-4 text-neutral-500 group-hover:text-black"
}
>
{t("tournaments.mini.timing")}
</p>
<p className="text-balance">
{t("tournaments.mini.description1")}
</p>
<br />
<div className="flex flex-row flex-wrap gap-4 md:gap-8">
<Link href="/kodukord" target="_blank">
<button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
{t("tournaments.mini.readRules")}
</button>
</Link>
<a href="https://fienta.com/et/tipilan" target="_blank">
<button
className={`px-4 py-2 bg-[#007CAB] group-hover:bg-black cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
{t("tournaments.mini.buyTicket")}
</button>
</a>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
{miniTournaments.map((tournament) => (
<div key={tournament.name} className="text-center">
<div className={`border-2 border-[#007CAB] p-1 rounded-md ${tournament.bgClass || ''}`}>
<Image
src={tournament.image}
alt={tournament.name}
width={400}
height={300}
className={`object-cover w-full h-48 ${
tournament.objectPosition || "object-center"
}`}
/>
</div>
<div className="-skew-x-2 md:-skew-x-5">
<p className="mt-2 font-semibold">{tournament.name} - {tournament.prize}</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);

Write Preview
Loading…
Cancel
Save