Rough first patch

2026-05-08 10:00:46 +00:00 · 2026-04-30 15:41:24 +03:00
parent 42c4fe8cc4
commit 9bdadb2501
14 changed files with 278 additions and 91 deletions
--- a/public/images/landing/compete_hero.png
+++ b/public/images/landing/compete_hero.png
--- a/public/images/landing/compete_teaser.jpg
+++ b/public/images/landing/compete_teaser.jpg
--- a/public/images/landing/explore_hero.png
+++ b/public/images/landing/explore_hero.png
--- a/public/images/landing/explore_teaser.png
+++ b/public/images/landing/explore_teaser.png
--- a/public/images/landing/main_teaser.jpg
+++ b/public/images/landing/main_teaser.jpg
--- a/public/images/landing/play_hero.png
+++ b/public/images/landing/play_hero.png
--- a/public/images/landing/play_teaser.png
+++ b/public/images/landing/play_teaser.png
--- a/public/images/landing/student_award.png
+++ b/public/images/landing/student_award.png
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,8 +1,9 @@
 import { vipnagorgialla } from "@/components/Vipnagorgialla";
 import Sponsors from "@/components/Sponsors";
+import HeroSection from "@/components/HeroSection";
+import TeaserCarousel from "@/components/TeaserCarousel";
 import { Link } from "@/i18n/routing";
 import { getTranslations, setRequestLocale } from "next-intl/server";
-import Image from "next/image";

 export default async function Home({
  params,
@@ -15,46 +16,22 @@ export default async function Home({

  return (
    <div>
-      {/* Title */}
-      <div className="border-b-3 border-[#1F5673] grid grid-cols-1 md:grid-cols-[2fr_1fr] items-center justify-between mt-18 gap-12 py-8">
-        <Image
-          src="/tipilan-white.svg"
-          width={850}
-          height={120}
-          alt="TipiLAN Logo"
-          className="px-8 py-8 md:px-12 md:py-14 dark:hidden w-[max(300px,min(100%,850px))] h-auto"
-        />
-        <Image
-          src="/tipilan-dark.svg"
-          width={850}
-          height={120}
-          alt="TipiLAN Logo"
-          className="px-8 py-8 md:px-12 md:py-14 not-dark:hidden w-[max(300px,min(100%,850px))] h-auto2"
-        />
-        <div className="pr-12 hidden md:block text-right">
-          <h3
-            className={`text-[clamp(1.25rem,0.75rem+2.5vw,3.75rem)] ${vipnagorgialla.className} leading-[90%] font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F]`}
-          >
-            {t("tournaments.prizePool")}
-          </h3>
-          <h2
-            className={`text-[clamp(2rem,1.2rem+4vw,6rem)] ${vipnagorgialla.className} leading-[90%] font-bold italic text-[#007CAB] dark:text-[#00A3E0]`}
-          >
-            10 000€
-          </h2>
-        </div>
+      {/* Hero */}
+      <div className="mt-18">
+        <HeroSection />
      </div>
-      {/* Grid of buttons */}
-      <div className="grid grid-cols-1 xl:grid-cols-3 border-[#1F5673]">
+
+      {/* Nav cards: Piletid + Turniirid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 border-b-3 border-[#1F5673]">
        <Link
-          href="/ajakava"
-          className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 lg:border-r-3 group border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition"
+          href="/piletid"
+          className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 md:border-b-0 md:border-r-3 group border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition"
        >
-          <div className="cursor-pointer flex flex-row justify-between gap-4 items-center">
+          <div className="flex flex-row justify-between gap-4 items-center">
            <h2
              className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] group-hover:text-black dark:group-hover:text-[#2A2C3F]`}
            >
-              {t("navigation.schedule")}
+              {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">
              arrow_right_alt
@@ -62,20 +39,21 @@ export default async function Home({
          </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]">
-              event_note
+              confirmation_number
            </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">
              {t("home.sections.schedule.description")}
            </p>
          </div>
        </Link>
+
        <Link
          href="/turniirid"
-          className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 lg:border-r-3 group border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition"
+          className="px-8 md:px-12 py-8 flex flex-col gap-4 group border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition"
        >
-          <div className="cursor-pointer flex flex-row justify-between gap-4 items-center">
+          <div className="flex flex-row justify-between gap-4 items-center">
            <h2
-              className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic break-normal uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover:text-[#2A2C3F] group-hover:text-black`}
+              className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover:text-[#2A2C3F] group-hover:text-black`}
            >
              {t("navigation.tournaments")}
            </h2>
@@ -83,7 +61,6 @@ export default async function Home({
              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]">
              trophy
@@ -93,47 +70,11 @@ export default async function Home({
            </p>
          </div>
        </Link>
-        <Link
-          href="/messiala"
-          className="px-8 md:px-12 py-8 flex flex-col gap-4 border-b-3 border-[#1F5673] group hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition-all"
-        >
-          <div className="cursor-pointer flex flex-row justify-between gap-4 items-center">
-            <h2
-              className={`text-[clamp(2rem,1.8rem+1vw,3rem)] ${vipnagorgialla.className} font-bold italic uppercase dark:text-[#EEE5E5] text-[#2A2C3F] dark:group-hover:text-[#2A2C3F] group-hover:text-black`}
-            >
-              {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">
-              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]">
-              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">
-              {t("home.sections.expo.description")}
-            </p>
-          </div>
-        </Link>
      </div>
-      {/* Date */}
-      <Link
-        href="/piletid"
-        className={`p-8 md:p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] group transition`}
-      >
-        <div className="cursor-pointer text-left flex flex-row justify-between xl:justify-start gap-8">
-          <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">
-            arrow_right_alt
-          </span>
-        </div>
-        <h2 className="text-[clamp(2.5rem,2.25rem+1.25vw,3.75rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
-          {t("home.sections.dateAndLocation")}
-        </h2>
-      </Link>
+
+      {/* Teaser carousel */}
+      <TeaserCarousel />
+
      {/* Sponsors */}
      <Sponsors />
    </div>
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -0,0 +1,75 @@
+import Image from "next/image";
+import { Link } from "@/i18n/routing";
+import { vipnagorgialla } from "@/components/Vipnagorgialla";
+import { useTranslations } from "next-intl";
+
+export default function HeroSection() {
+  const t = useTranslations("home");
+
+  return (
+    <section className="relative overflow-hidden border-b-3 border-[#1F5673]">
+      {/* Background image */}
+      <Image
+        src="/images/landing/main_teaser.jpg"
+        alt=""
+        fill
+        className="object-cover object-center"
+        priority
+      />
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-[#0E0F19]/75" />
+
+      {/* Content */}
+      <div className="relative grid grid-cols-1 md:grid-cols-[3fr_2fr] items-center gap-8 px-8 py-10 md:px-12 md:py-14">
+        {/* Left: logo + info + CTA */}
+        <div className="flex flex-col gap-5">
+          <Image
+            src="/tipilan-white.svg"
+            width={750}
+            height={106}
+            alt="TipiLAN Logo"
+            className="w-[max(260px,min(100%,750px))] h-auto"
+          />
+          <div className={`${vipnagorgialla.className} font-bold italic`}>
+            <p className="text-[clamp(1.1rem,0.9rem+1vw,1.75rem)] text-[#00A3E0] uppercase tracking-wide">
+              {t("hero.date")}
+            </p>
+            <p className="text-[clamp(0.9rem,0.75rem+0.75vw,1.25rem)] text-[#EEE5E5]/80 uppercase tracking-wide">
+              {t("hero.location")}
+            </p>
+          </div>
+          <Link
+            href="/piletid"
+            className={`self-start px-6 py-3 bg-[#007CAB] hover:bg-[#00A3E0] text-[#EEE5E5] ${vipnagorgialla.className} font-bold italic text-[clamp(1rem,0.8rem+0.8vw,1.5rem)] uppercase transition`}
+          >
+            {t("hero.buyTicket")}
+          </Link>
+        </div>
+
+        {/* Right: prize pool + award */}
+        <div className="flex flex-col items-start md:items-end gap-3">
+          <div className={`${vipnagorgialla.className} font-bold italic text-right`}>
+            <p className="text-[clamp(1rem,0.8rem+1vw,1.5rem)] text-[#EEE5E5]/80 uppercase">
+              {t("hero.prizePool")}
+            </p>
+            <h2 className="text-[clamp(3rem,2rem+4vw,6rem)] leading-none text-[#00A3E0]">
+              10 000€
+            </h2>
+          </div>
+          <div className="flex flex-col items-start md:items-end gap-2 mt-2">
+            <Image
+              src="/images/landing/student_award.png"
+              width={180}
+              height={180}
+              alt="TalTech student award"
+              className="object-contain"
+            />
+            <p className={`text-[0.75rem] text-[#EEE5E5]/70 ${vipnagorgialla.className} font-bold italic uppercase text-right`}>
+              {t("hero.award")}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/TeaserCarousel.tsx
+++ b/src/components/TeaserCarousel.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Link } from "@/i18n/routing";
+import { vipnagorgialla } from "@/components/Vipnagorgialla";
+import { useTranslations } from "next-intl";
+
+type Slide = {
+  key: "compete" | "play" | "explore";
+  image: string;
+  imageAlt: string;
+  href: "/turniirid" | "/piletid" | "/messiala";
+};
+
+const slides: Slide[] = [
+  { key: "compete", image: "/images/landing/compete_teaser.jpg", imageAlt: "Võistle", href: "/turniirid" },
+  { key: "play", image: "/images/landing/play_teaser.png", imageAlt: "Mängi", href: "/piletid" },
+  { key: "explore", image: "/images/landing/explore_teaser.png", imageAlt: "Avasta", href: "/messiala" },
+];
+
+export default function TeaserCarousel() {
+  const t = useTranslations("home.teaser");
+  const [current, setCurrent] = useState(0);
+
+  const slide = slides[current];
+  const title = t(`${slide.key}.title`);
+  const description = t(`${slide.key}.description`);
+  const prize = t.raw(`${slide.key}.prize`) as string | null;
+
+  return (
+    <div className="border-b-3 border-[#1F5673]">
+      {/* Heading */}
+      <div className="px-8 md:px-12 py-6 border-b-3 border-[#1F5673]">
+        <h2
+          className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.75rem,1.4rem+2vw,3.5rem)] text-[#2A2C3F] dark:text-[#EEE5E5]`}
+        >
+          {t("heading")}
+        </h2>
+      </div>
+
+      {/* Card */}
+      <div className="relative min-h-[340px] overflow-hidden">
+        {/* Background image */}
+        <Image
+          src={slide.image}
+          alt={slide.imageAlt}
+          fill
+          className="object-cover object-center"
+        />
+        {/* Dark overlay */}
+        <div className="absolute inset-0 bg-[#0E0F19]/70" />
+
+        {/* Content grid */}
+        <div className="relative grid grid-cols-1 md:grid-cols-[1fr_1fr] min-h-[340px]">
+          {/* Left: text */}
+          <div className="flex flex-col justify-between gap-4 px-8 py-8 md:px-12 md:py-10">
+            <div className="flex flex-col gap-3">
+              <Link href={slide.href}>
+                <h3
+                  className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+2.5vw,5rem)] leading-none text-[#EEE5E5] hover:text-[#00A3E0] transition`}
+                >
+                  {title}
+                </h3>
+              </Link>
+              <p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.1rem)] text-[#EEE5E5]/80 max-w-prose">
+                {description}
+              </p>
+            </div>
+            {prize && (
+              <p
+                className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.5rem,1.2rem+1.5vw,2.75rem)] text-[#00A3E0]`}
+              >
+                {prize}
+              </p>
+            )}
+          </div>
+
+          {/* Right: spacer (image shows through the overlay) */}
+          <div className="hidden md:block" />
+        </div>
+      </div>
+
+      {/* Navigation dots */}
+      <div className="flex justify-center gap-3 py-5">
+        {slides.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => setCurrent(i)}
+            className={`w-3 h-3 rounded-full transition ${
+              i === current
+                ? "bg-[#007CAB]"
+                : "bg-[#1F5673] hover:bg-[#007CAB]/60"
+            }`}
+            aria-label={`Slide ${i + 1}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/translations/en.json
+++ b/translations/en.json
@@ -35,10 +35,38 @@
    }
  },
  "home": {
-    "title": "TipiLAN 2025",
+    "title": "TipiLAN 2026",
    "subtitle": "Estonia's largest student-organized LAN event!",
-    "welcome": "Welcome to TipiLAN 2025!",
+    "welcome": "Welcome to TipiLAN 2026!",
    "description": "Join us at Estonia's largest student-organized LAN event. Games, competitions and much more await you!",
+    "hero": {
+      "date": "11–13 OCTOBER 2026",
+      "location": "TALTECH, EHITAJATE TEE 5",
+      "buyTicket": "BUY TICKETS",
+      "prizePool": "PRIZE POOL",
+      "award": "TALTECH STUDENT OF THE YEAR 2025"
+    },
+    "teaser": {
+      "heading": "COME TO TIPILAN AND...",
+      "compete": {
+        "title": "COMPETE",
+        "description": "Prove yourself in TipiLAN's CS2 and LoL tournaments: thousands in prize money, players from across Europe, and HLTV-ranked competition that could put you on the map.",
+        "prize": "2500€",
+        "link": "/turniirid"
+      },
+      "play": {
+        "title": "PLAY",
+        "description": "Enjoy the TipiLAN atmosphere — bring your computer, relax, play with friends and experience one of Estonia's largest gaming events.",
+        "prize": null,
+        "link": "/piletid"
+      },
+      "explore": {
+        "title": "EXPLORE",
+        "description": "Explore the TipiLAN expo area where companies, mini-competitions and lots more exciting things await you.",
+        "prize": null,
+        "link": "/messiala"
+      }
+    },
    "sections": {
      "schedule": {
        "description": "TipiLAN is packed with exciting tournaments, mini-competitions and much more."
@@ -51,7 +79,7 @@
      },
      "reserveSpot": "Reserve your spot today!",
      "poweredBy": "TipiLAN is powered by...",
-      "dateAndLocation": "24th-26th Oct. @ TalTech main building"
+      "dateAndLocation": "11th–13th Oct. @ TalTech"
    }
  },
  "tickets": {
--- a/translations/et.json
+++ b/translations/et.json
@@ -35,10 +35,38 @@
    }
  },
  "home": {
-    "title": "TipiLAN 2025",
+    "title": "TipiLAN 2026",
    "subtitle": "Eesti suurim tudengite korraldatud LAN!",
-    "welcome": "Tere tulemast TipiLAN 2025 sündmusele!",
+    "welcome": "Tere tulemast TipiLAN 2026 sündmusele!",
    "description": "Liitu meiega Eesti suurimal tudengite korraldatud LAN-üritusel. Mängud, võistlused ja palju muud ootavad sind!",
+    "hero": {
+      "date": "11.–13. OKTOOBER 2026",
+      "location": "TALTECH, EHITAJATE TEE 5",
+      "buyTicket": "OSTA PILET",
+      "prizePool": "AUHINNAFOND",
+      "award": "TALTECHI AASTA TUDENGITEÜS 2025"
+    },
+    "teaser": {
+      "heading": "TULE TIPILANILE JA...",
+      "compete": {
+        "title": "VÕISTLE",
+        "description": "Tõesta end TipiLANi CS2 ja LoL featurniiridel: tuhanded eurod auhinnarahas, mängijad üle kogu Euroopa ja HLTV-reitinguga võistlus, mis viib sind maailmakaardile.",
+        "prize": "2500€",
+        "link": "/turniirid"
+      },
+      "play": {
+        "title": "MÄNGI",
+        "description": "Naudi TipiLANi atmosfääri – too kaasa arvuti, istutle mugavalt, mängi sõpradega ja koge ühte Eesti suurimat mänguüritust.",
+        "prize": null,
+        "link": "/piletid"
+      },
+      "explore": {
+        "title": "AVASTA",
+        "description": "Avasta TipiLANi messialat, kus ootavad sind erinevad ettevõtted, mini-võistlused ja palju muud põnevat.",
+        "prize": null,
+        "link": "/messiala"
+      }
+    },
    "sections": {
      "schedule": {
        "description": "TipiLAN on pungil põnevatest turniiridest, mini-võistlustest ja paljust muust."
@@ -51,7 +79,7 @@
      },
      "reserveSpot": "Broneeri oma koht juba täna!",
      "poweredBy": "TipiLANi tõmbab käima...",
-      "dateAndLocation": "24.-26. okt. TalTechi peahoones"
+      "dateAndLocation": "11.–13. okt. TalTechis"
    }
  },
  "tickets": {
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
  "compilerOptions": {
    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
@@ -11,7 +15,7 @@
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
@@ -19,9 +23,19 @@
      }
    ],
    "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
    }
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }