From fe8fbf3024796a5da190dfdded98565c7c29c841 Mon Sep 17 00:00:00 2001
From: Rene Arumetsa <rene.arumetsa@gmail.com>
Date: Thu, 30 Apr 2026 16:28:19 +0300
Subject: [PATCH] Carosel slide every 5s

---
 src/components/TeaserCarousel.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/TeaserCarousel.tsx b/src/components/TeaserCarousel.tsx
index a42a601..bacd63e 100644
--- a/src/components/TeaserCarousel.tsx
+++ b/src/components/TeaserCarousel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import Image from "next/image";
 import { Link } from "@/i18n/routing";
 import { vipnagorgialla } from "@/components/Vipnagorgialla";
@@ -26,8 +26,13 @@ export default function TeaserCarousel() {
   const t = useTranslations("home.teaser");
   const [current, setCurrent] = useState(0);
 
+  const next = useCallback(() => setCurrent((c) => (c + 1) % slides.length), []);
   const prev = () => setCurrent((c) => (c - 1 + slides.length) % slides.length);
-  const next = () => setCurrent((c) => (c + 1) % slides.length);
+
+  useEffect(() => {
+    const id = setInterval(next, 5000);
+    return () => clearInterval(id);
+  }, [next]);
 
   return (
     <div className="border-b-3 border-[#1F5673]">
@@ -58,7 +63,7 @@ export default function TeaserCarousel() {
                 <div className={`relative grid grid-cols-1 md:grid-cols-2 h-full ${slide.flip ? "md:[direction:rtl]" : ""}`}>
                   <div className={`flex flex-col justify-between gap-4 px-8 py-8 md:px-12 md:py-10 ${slide.flip ? "md:[direction:ltr]" : ""}`}>
                     <div className="flex flex-col gap-3">
-                      <h2 className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.1rem,0.9rem+1vw,1.75rem)] text-[#EEE5E5]`}>
+                      <h2 className={`${vipnagorgialla.className} font-bold italic text-[64px] leading-none tracking-normal uppercase text-[#EEE5E5]`}>
                         {t("heading")}
                       </h2>
                       <Link href={slide.href}>