lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-03-23 21:34:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Arto Reinik
2025-10-07 18:32:38 +03:00
parent 95b035a864
commit 1d93c51c05
1 changed files with 61 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/app/[locale]/turniirid/page.tsx
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>
);