Rough first patch

2026-08-08 17:49:13 +00:00 · 2026-04-30 15:41:24 +03:00
parent 42c4fe8cc4
commit 9bdadb2501
14 changed files with 278 additions and 91 deletions
--- 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>
+  );
+}