Adjustments to fit within Figma design

This commit is contained in:
2026-05-06 18:14:23 +03:00
parent 7082fe196f
commit 376e9e7f28
20 changed files with 262 additions and 216 deletions

View File

@@ -13,12 +13,12 @@ export default async function Timetable({
return (
<div className="bg-[#0E0F19] min-h-screen flex flex-col items-center justify-center">
<h1
className={`${vipnagorgialla.className} font-bold italic text-4xl md:text-5xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.75rem,5vw,3rem)] text-[#EEE5E5] uppercase mb-4 text-center`}
>
{t("schedule.title")}
</h1>
<p
className={`${vipnagorgialla.className} font-bold italic text-5xl md:text-7xl text-[#EEE5E5] uppercase`}
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,8vw,4.5rem)] text-[#EEE5E5] uppercase text-center`}
>
{t("schedule.comingSoon")}
</p>

View File

@@ -1,10 +1,15 @@
// app/kodukord/page.tsx (App Router)
import ReactMarkdown, { Components } from "react-markdown";
import { vipnagorgialla } from "@/components/Vipnagorgialla";
import SectionDivider from "@/components/SectionDivider";
import RuleNav from "@/components/RuleNav";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { loadRulesBun } from "@/lib/loadRules";
const sectionKeys = [
{ id: "reminder", labelKey: "rules.reminder" },
{ id: "code", labelKey: "rules.code" },
];
export default async function Page({
params,
}: {
@@ -15,50 +20,77 @@ export default async function Page({
const t = await getTranslations({ locale });
const content = await loadRulesBun("kodukord", locale as "et" | "en");
return (
<div>
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
{/* Page title (separate from markdown headings) */}
<h1
className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 uppercase`}
>
{t("rules.houseRules")}
</h1>
const sections = sectionKeys.map((section) => ({
id: section.id,
label: t(section.labelKey),
}));
<div className="prose prose-lg dark:prose-invert max-w-none">
<ReactMarkdown
components={
{
h1: (props) => (
<h1 className="text-3xl md:text-4xl font-bold my-4">
{props.children}
</h1>
),
h2: (props) => (
<h2 className="text-2xl md:text-3xl font-semibold my-3">
{props.children}
</h2>
),
ol: (props) => (
<ol className="list-decimal ml-6 md:text-xl">
{props.children}
</ol>
),
ul: (props) => (
<ul className="list-disc ml-6 md:text-xl">
{props.children}
</ul>
),
p: (props) => <p className="md:text-xl">{props.children}</p>,
} as Components
}
>
{content}
</ReactMarkdown>
// Track heading count for ID assignment
let headingCount = 0;
return (
<div className="bg-[#0E0F19] min-h-screen pt-16 md:pt-20">
<div className="max-w-480 mx-auto px-6 md:px-12 py-8 md:py-16">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 lg:gap-16">
{/* Main content */}
<div>
{/* Page title */}
<h1
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+3vw,4rem)] leading-tight text-[#00A3E0] uppercase mb-8`}
>
{t("rules.houseRules")}
</h1>
<ReactMarkdown
components={
{
h1: (props) => {
const id =
sections[headingCount]?.id || `section-${headingCount}`;
headingCount++;
return (
<h1
id={id}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4 mt-12 first:mt-0 scroll-mt-24 md:scroll-mt-28`}
>
{props.children}
</h1>
);
},
h2: (props) => (
<h2
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2 mt-6`}
>
{props.children}
</h2>
),
ol: (props) => (
<ol className="list-decimal list-inside text-white mb-4">
{props.children}
</ol>
),
ul: (props) => (
<ul className="list-disc list-inside text-white mb-4">
{props.children}
</ul>
),
p: (props) => (
<p className="text-white mb-4">{props.children}</p>
),
li: (props) => (
<li className="text-white mb-2">{props.children}</li>
),
} as Components
}
>
{content}
</ReactMarkdown>
</div>
{/* Sidebar navigation */}
<RuleNav sections={sections} />
</div>
</div>
<SectionDivider />
</div>
);
}

View File

@@ -13,12 +13,12 @@ export default async function Expo({
return (
<div className="bg-[#0E0F19] min-h-screen flex flex-col items-center justify-center">
<h1
className={`${vipnagorgialla.className} font-bold italic text-4xl md:text-5xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.75rem,5vw,3rem)] text-[#EEE5E5] uppercase mb-4 text-center`}
>
{t("expo.title")}
</h1>
<p
className={`${vipnagorgialla.className} font-bold italic text-5xl md:text-7xl text-[#EEE5E5] uppercase`}
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,8vw,4.5rem)] text-[#EEE5E5] uppercase text-center`}
>
{t("expo.comingSoon")}
</p>

View File

@@ -29,7 +29,7 @@ export default async function Home({
>
<div className="flex flex-col gap-4">
<span
className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]"
className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]"
style={{
fontVariationSettings:
'"FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24',
@@ -44,7 +44,7 @@ export default async function Home({
>
{t("navigation.tickets")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>
@@ -55,7 +55,7 @@ export default async function Home({
className="px-8 md:px-12 py-8 flex flex-col justify-center gap-4 group border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition"
>
<div className="flex flex-col gap-4">
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
rewarded_ads
</span>
</div>
@@ -65,7 +65,7 @@ export default async function Home({
>
{t("navigation.tournaments")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>

View File

@@ -28,7 +28,7 @@ function TicketCard({
}: TicketCardProps) {
return (
<div
className={`relative bg-[#0E0F19] border-[#1F5673] p-8 flex flex-col min-h-87.5 h-full ${className}`}
className={`relative bg-[#0E0F19] border-[#1F5673] px-12 py-16 flex flex-col min-h-87.5 h-full ${className}`}
>
{backgroundImage && (
<Image
@@ -46,7 +46,7 @@ function TicketCard({
{title}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl text-[#EEE5E5] uppercase mb-4`}
>
{subtitle}
</h3>
@@ -66,7 +66,7 @@ function TicketCard({
</span>
))}
</p>
<ul className="flex flex-col gap-1 mb-6 grow">
<ul className="flex flex-col gap-2 mb-6 grow">
{features.map((feature, index) => (
<li
key={index}

View File

@@ -41,12 +41,12 @@ export default async function Home({
>
{t("navigation.schedule")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>
<div className="flex flex-col gap-4">
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
event_note
</span>
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
@@ -61,7 +61,7 @@ export default async function Home({
src="https://player.twitch.tv/?channel=tipilan_ee&parent=localhost&parent=tipilan.ee"
height="100%"
width="100%"
className="w-full h-full min-h-[400px]"
className="w-full h-full min-h-100"
allow="autoplay; encrypted-media"
></iframe>
</div>
@@ -78,13 +78,13 @@ export default async function Home({
>
{t("navigation.tournaments")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>
<div className="flex flex-col gap-4">
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
trophy
</span>
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
@@ -102,12 +102,12 @@ export default async function Home({
>
{t("navigation.expo")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>
<div className="flex flex-col gap-4">
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
weekend
</span>
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
@@ -125,7 +125,7 @@ export default async function Home({
<h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] dark:group-hover:text-[#2A2C3F] text-[#2A2C3F] group-hover:text-black">
{t("home.sections.reserveSpot")}
</h3>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] hidden md:block group-hover:translate-x-2 group-hover:text-[#EEE5E5] dark:group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] hidden md:block group-hover:translate-x-2 group-hover:text-[#EEE5E5] dark:group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>

View File

@@ -62,21 +62,21 @@ export default async function CS2Tournament({
{/* SISSEJUHATUS */}
<section id="intro" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.intro.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-6">
<p className="text-white mb-6">
{t("cs2page.intro.description")}
</p>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#EEE5E5] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("cs2page.intro.previousWinners")}
</h3>
<p className="text-[#EEE5E5]/80 font-bold">2025</p>
<ol className="text-[#EEE5E5]/80 list-decimal list-inside mb-4">
<p className="text-white font-bold">2025</p>
<ol className="text-white list-decimal list-inside mb-4">
<li>RAID (Eesti)</li>
<li>hypewrld (Läti)</li>
<li>CSDIILIT (Soome/Eesti)</li>
@@ -86,29 +86,27 @@ export default async function CS2Tournament({
{/* ÜLDINE INFO */}
<section id="info" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.info.title")}
</h2>
<p className="text-[#EEE5E5]/80">
{t("cs2page.info.description")}
</p>
<p className="text-white">{t("cs2page.info.description")}</p>
</section>
{/* AUHINNAFOND */}
<section id="prizes" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.prizes.title")}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#00A3E0] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("cs2page.prizes.mainTitle")}
</h3>
<ul className="text-[#EEE5E5]/80 mb-2">
<ul className="text-white mb-2">
<li>
1. koht - 3000, 600 inimese kohta, 50% ehk 1/2
auhinnafondist.
@@ -122,16 +120,16 @@ export default async function CS2Tournament({
auhinnafondist.
</li>
</ul>
<p className="text-[#EEE5E5]/60 text-sm mb-6">
<p className="text-white/80 text-sm mb-6">
{t("cs2page.prizes.mainNote")}
</p>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#00A3E0] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("cs2page.prizes.secondTitle")}
</h3>
<ul className="text-[#EEE5E5]/80 mb-2">
<ul className="text-white mb-2">
<li>
1. koht - 500, 100 inimese kohta, 66.6...(6)% ehk 2/3
auhinnafondist.
@@ -141,7 +139,7 @@ export default async function CS2Tournament({
auhinnafondist.
</li>
</ul>
<p className="text-[#EEE5E5]/60 text-sm">
<p className="text-white/80 text-sm">
{t("cs2page.prizes.secondNote")}
</p>
</section>
@@ -149,45 +147,41 @@ export default async function CS2Tournament({
{/* TURNIIRI FORMAAT */}
<section id="format" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.format.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-4">
<p className="text-white mb-4">
{t("cs2page.format.description")}
</p>
<p className="text-[#EEE5E5]/80">{t("cs2page.format.day1")}</p>
<p className="text-[#EEE5E5]/80">{t("cs2page.format.day23")}</p>
<p className="text-white">{t("cs2page.format.day1")}</p>
<p className="text-white">{t("cs2page.format.day23")}</p>
</section>
{/* VRS INFO */}
<section id="vrs" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.vrs.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-4">
{t("cs2page.vrs.description1")}
</p>
<p className="text-[#EEE5E5]/80">
{t("cs2page.vrs.description2")}
</p>
<p className="text-white mb-4">{t("cs2page.vrs.description1")}</p>
<p className="text-white">{t("cs2page.vrs.description2")}</p>
</section>
{/* FAQ - commented out until content is ready
<section id="faq" className="mb-12">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.faq.title")}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-lg text-[#EEE5E5] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-lg text-white uppercase mb-2`}
>
{t("cs2page.faq.q1")}
</h3>
<p className="text-[#EEE5E5]/80 mb-4">
<p className="text-white mb-4">
{t("cs2page.faq.a1")}
</p>
</section>
@@ -196,32 +190,28 @@ export default async function CS2Tournament({
{/* REEGLID */}
<section id="rules" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.rules.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-6">
<p className="text-white mb-6">
{t("cs2page.rules.description")}
</p>
<RulesContent sections={t.raw("cs2page.rules.sections")} />
<div className="mt-8">
<p className="text-[#EEE5E5]/80 mb-2">
{t("cs2page.rules.contact")}
</p>
<p className="text-white mb-2">{t("cs2page.rules.contact")}</p>
<p className="text-[#00A3E0] font-bold">
{t("cs2page.rules.contactName")}
</p>
<p className="text-[#EEE5E5]/70">
{t("cs2page.rules.contactRole")}
</p>
<p className="text-[#EEE5E5]/70">
<p className="text-white">{t("cs2page.rules.contactRole")}</p>
<p className="text-white">
Discord:{" "}
<a
href="https://discord.com/users/292372329747710013"
target="_blank"
className="text-[#00A3E0] hover:text-[#EEE5E5] transition"
className="text-[#00A3E0] hover:text-white transition"
>
hrkruger
</a>

View File

@@ -54,21 +54,21 @@ export default async function LoLTournament({
{/* SISSEJUHATUS */}
<section id="intro" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.intro.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-6">
<p className="text-white mb-6">
{t("lolpage.intro.description")}
</p>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#EEE5E5] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("lolpage.intro.previousWinners")}
</h3>
<p className="text-[#EEE5E5]/80 font-bold">2025</p>
<ol className="text-[#EEE5E5]/80 list-decimal list-inside mb-4">
<p className="text-white font-bold">2025</p>
<ol className="text-white list-decimal list-inside mb-4">
<li>Ükssilm (Eesti)</li>
<li>Eesti Rästikud (Eesti)</li>
<li>LOMiks (Läti)</li>
@@ -78,34 +78,32 @@ export default async function LoLTournament({
{/* ÜLDINE INFO */}
<section id="info" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.info.title")}
</h2>
<p className="text-[#EEE5E5]/80">
{t("lolpage.info.description")}
</p>
<p className="text-white">{t("lolpage.info.description")}</p>
</section>
{/* AUHINNAFOND */}
<section id="prizes" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.prizes.title")}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#00A3E0] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("lolpage.prizes.mainTitle")}
</h3>
<ul className="text-[#EEE5E5]/80 mb-2">
<ul className="text-white mb-2">
<li>{t("lolpage.prizes.place1")}</li>
<li>{t("lolpage.prizes.place2")}</li>
<li>{t("lolpage.prizes.place3")}</li>
</ul>
<p className="text-[#EEE5E5]/60 text-sm">
<p className="text-white/80 text-sm">
{t("lolpage.prizes.note")}
</p>
</section>
@@ -113,30 +111,30 @@ export default async function LoLTournament({
{/* TURNIIRI FORMAAT */}
<section id="format" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.format.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-4">
<p className="text-white mb-4">
{t("lolpage.format.description")}
</p>
<p className="text-[#EEE5E5]/80">{t("lolpage.format.day1")}</p>
<p className="text-[#EEE5E5]/80">{t("lolpage.format.day2")}</p>
<p className="text-white">{t("lolpage.format.day1")}</p>
<p className="text-white">{t("lolpage.format.day2")}</p>
</section>
{/* FAQ - commented out until content is ready
<section id="faq" className="mb-12">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.faq.title")}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-lg text-[#EEE5E5] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-lg text-white uppercase mb-2`}
>
{t("lolpage.faq.q1")}
</h3>
<p className="text-[#EEE5E5]/80 mb-4">
<p className="text-white mb-4">
{t("lolpage.faq.a1")}
</p>
</section>
@@ -145,32 +143,28 @@ export default async function LoLTournament({
{/* REEGLID */}
<section id="rules" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.rules.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-6">
<p className="text-white mb-6">
{t("lolpage.rules.description")}
</p>
<RulesContent sections={t.raw("lolpage.rules.sections")} />
<div className="mt-8">
<p className="text-[#EEE5E5]/80 mb-2">
{t("lolpage.rules.contact")}
</p>
<p className="text-white mb-2">{t("lolpage.rules.contact")}</p>
<p className="text-[#00A3E0] font-bold">
{t("lolpage.rules.contactName")}
</p>
<p className="text-[#EEE5E5]/70">
{t("lolpage.rules.contactRole")}
</p>
<p className="text-[#EEE5E5]/70">
<p className="text-white">{t("lolpage.rules.contactRole")}</p>
<p className="text-white">
Discord:{" "}
<a
href="https://discord.com/users/125585160761638912"
target="_blank"
className="text-[#00A3E0] hover:text-[#EEE5E5] transition"
className="text-[#00A3E0] hover:text-white transition"
>
Kukkel
</a>

View File

@@ -56,7 +56,7 @@ body {
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--background: #0a121f;
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
@@ -90,7 +90,7 @@ body {
}
.dark {
--background: oklch(0.145 0 0);
--background: #0a121f;
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);