From 81de01fab8379a0bd9d915c97afdd6b394fda0cb Mon Sep 17 00:00:00 2001
From: Rene Arumetsa <rene.arumetsa@gmail.com>
Date: Thu, 30 Apr 2026 16:18:53 +0300
Subject: [PATCH] Add hero pictures in teasre carosel

---
 src/components/TeaserCarousel.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/TeaserCarousel.tsx b/src/components/TeaserCarousel.tsx
index 0fd59c6..b1fb46b 100644
--- a/src/components/TeaserCarousel.tsx
+++ b/src/components/TeaserCarousel.tsx
@@ -10,13 +10,14 @@ type Slide = {
   key: "compete" | "play" | "explore";
   image: string;
   imageAlt: string;
+  hero: 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"  },
+  { key: "compete", image: "/images/landing/compete_teaser.jpg", imageAlt: "Võistle", hero: "/images/landing/compete_hero.png", href: "/turniirid" },
+  { key: "play",    image: "/images/landing/play_teaser.png",    imageAlt: "Mängi",   hero: "/images/landing/play_hero.png",    href: "/piletid"   },
+  { key: "explore", image: "/images/landing/explore_teaser.png", imageAlt: "Avasta",  hero: "/images/landing/explore_hero.png", href: "/messiala"  },
 ];
 
 export default function TeaserCarousel() {
@@ -73,8 +74,15 @@ export default function TeaserCarousel() {
                       </p>
                     )}
                   </div>
-                  {/* Right side: image shows through */}
-                  <div className="hidden md:block" />
+                  {/* Right side: hero image */}
+                  <div className="hidden md:flex items-end justify-center relative">
+                    <Image
+                      src={slide.hero}
+                      alt={slide.imageAlt}
+                      fill
+                      className="object-contain object-bottom"
+                    />
+                  </div>
                 </div>
               </div>
             );