main

messages/en.json

@@ -72,7 +72,7 @@
     "hero-subtitle": "Make smarter bets with our advanced AI prediction engine. Analyze matches, discover value bets, and build winning coupons.",
     "get-started": "Get Started",
     "learn-more": "Learn More",
-    "features-title": "Why Choose Suggest Bet?",
+    "features-title": "Why Choose Iddaai?",
     "feature-ai": "AI Predictions",
     "feature-ai-desc": "Powered by V20 ensemble model with 95%+ data quality scoring.",
     "feature-value": "Value Bets",

messages/tr.json

@@ -5,8 +5,8 @@
   "intelligent-transportation-systems": "Akıllı Ulaşım Sistemleri",
   "artificial-intelligence": "Yapay Zeka",
   "error": {
-    "not-found": "Aradığınız sayfa bulunamadı.",
     "404": "404",
+    "not-found": "Aradığınız sayfa bulunamadı.",
     "back-to-home": "Ana sayfaya dön",
     "generic": "Beklenmeyen bir hata oluştu.",
     "network": "Ağ hatası. Lütfen bağlantınızı kontrol edin.",
@@ -45,7 +45,6 @@
   "low": "Düşük",
   "medium": "Orta",
   "high": "Yüksek",
-
   "nav": {
     "home": "Anasayfa",
     "dashboard": "Kontrol Paneli",
@@ -66,13 +65,12 @@
     "coupons": "Kuponlar",
     "tools": "Araçlar"
   },
-
   "landing": {
     "hero-title": "Yapay Zeka Destekli Bahis Tahminleri",
     "hero-subtitle": "Gelişmiş yapay zeka tahmin motorumuz ile daha akıllı bahisler yapın. Maçları analiz edin, değerli bahisleri keşfedin ve kazanan kuponlar oluşturun.",
     "get-started": "Başla",
     "learn-more": "Daha Fazla",
-    "features-title": "Neden Suggest Bet?",
+    "features-title": "Neden Iddaai?",
     "feature-ai": "Yapay Zeka Tahminleri",
     "feature-ai-desc": "%95+ veri kalitesi puanlama ile V20 ensemble modeli tarafından desteklenmektedir.",
     "feature-value": "Değerli Bahisler",
@@ -86,7 +84,6 @@
     "stats-users": "Aktif Kullanıcı",
     "stats-matches": "Analiz Edilen Maç"
   },
-
   "dashboard": {
     "title": "Kontrol Paneli",
     "welcome": "Tekrar hoş geldiniz",
@@ -99,7 +96,6 @@
     "no-matches": "Bugün maç bulunmuyor.",
     "no-predictions": "Tahmin bulunmuyor."
   },
-
   "matches": {
     "title": "Maçlar",
     "filter-sport": "Spor",
@@ -123,7 +119,6 @@
     "away-team": "Deplasman",
     "vs": "vs"
   },
-
   "predictions": {
     "title": "Tahminler",
     "upcoming": "Yaklaşan",
@@ -251,7 +246,6 @@
       "recommended-stake-inline": "Önerilen miktar"
     }
   },
-
   "coupons": {
     "title": "Kupon Oluşturucu",
     "builder-title": "Kupon Oluşturucu",
@@ -388,15 +382,14 @@
     "win-rate": "Kazanma Oranı",
     "total-profit": "Toplam Kâr"
   },
-
   "leagues": {
     "title": "Ligler & Takımlar",
     "countries": "Ülkeler",
     "leagues": "Ligler",
     "countries-leagues": "Ülkeler & Ligler",
-    "search-at-least-2": "Takım aramak için en az 2 karakter yazın."
+    "search-at-least-2": "Takım aramak için en az 2 karakter yazın.",
+    "all": "Tümü"
   },
-
   "h2h": {
     "title": "Karşılıklı Karşılaşma",
     "team-1": "Takım 1",
@@ -406,7 +399,6 @@
     "draws": "Beraberlikler",
     "no-matches-found": "Bu takımlar arasında karşılıklı maç bulunamadı."
   },
-
   "analysis": {
     "title": "Çoklu Maç Analizi",
     "select-matches": "Maç Seç",
@@ -418,7 +410,6 @@
     "matches-analyzed": "maç analiz edildi",
     "no-history": "Henüz analiz geçmişi yok."
   },
-
   "spor-toto": {
     "title": "Spor Toto",
     "sync-bulletins": "Bültenleri Senkronize Et",
@@ -446,7 +437,6 @@
     "rollover-stats": "Devir İstatistikleri",
     "prediction-generated": "Tahmin başarıyla oluşturuldu!"
   },
-
   "admin": {
     "title": "Yönetim Paneli",
     "subtitle": "Kullanıcıları yönetin, tahminleri takip edin ve sistemi izleyin.",
@@ -476,7 +466,6 @@
     "user-status": "Durum",
     "no-users": "Kullanıcı bulunamadı."
   },
-
   "common": {
     "loading": "Yükleniyor...",
     "save": "Kaydet",
@@ -505,5 +494,76 @@
     "items-per-page": "Sayfa başına öğe",
     "showing": "Gösterilen",
     "results": "sonuç"
+  },
+  "seo": {
+    "global": {
+      "title": "iddaai.com | Yapay Zeka İddaa Tahminleri",
+      "description": "iddaai.com yapay zeka destekli iddaa tahminleri, detaylı maç analizleri ve veriye dayalı kupon oluşturma hizmeti sunar.",
+      "keywords": "iddaa, iddaa tahminleri, yapay zeka iddaa, maç analizi, banko kuponlar, futbol istatistikleri"
+    },
+    "home": {
+      "title": "Ana Sayfa",
+      "description": "Yapay zeka destekli iddaa tahminleri. Maçları analiz edin, değerli bahisleri keşfedin ve kazandıran kuponlar oluşturun."
+    },
+    "h2h": {
+      "title": "Takım Karşılaştırma (H2H)",
+      "description": "Futbol takımlarını birebir karşılaştırın. Derinlemesine istatistikler, geçmiş maçlar ve tahminler."
+    },
+    "analysis": {
+      "title": "Çoklu Maç Analizi",
+      "description": "Aynı anda birden fazla maçı analiz edin. Detaylı istatistikler ve yapay zeka ile stratejiler geliştirin."
+    },
+    "leagues": {
+      "title": "Ligler ve Takımlar",
+      "description": "Dünya çapındaki futbol ve basketbol liglerini, ülkeleri ve takım istatistiklerini inceleyin."
+    },
+    "admin": {
+      "title": "Yönetici Paneli",
+      "description": "Kullanıcıları ve sistem ayarlarını yönetmek için yönetici paneli."
+    },
+    "matches": {
+      "title": "Maçlar ve Fikstür",
+      "description": "Yaklaşan maçları, canlı skorları ve yapay zeka tahminleriyle geçmiş fikstürleri görüntüleyin."
+    },
+    "about": {
+      "title": "Hakkımızda",
+      "description": "iddaai.com, yapay zeka teknolojimiz ve bahis öngörülerini nasıl sağladığımız hakkında daha fazla bilgi edinin."
+    },
+    "dashboard": {
+      "title": "Kullanıcı Paneli",
+      "description": "Bahis istatistikleri, tahminler ve hesaba genel bakış için kişiselleştirilmiş paneliniz."
+    },
+    "profile": {
+      "title": "Profilim",
+      "description": "Kullanıcı profilinizi, aboneliğinizi ve hesap ayarlarınızı yönetin."
+    },
+    "spor-toto": {
+      "title": "Spor Toto Tahminleri",
+      "description": "Yapay zeka destekli Spor Toto tahminleri. Muhafazakar, dengeli veya agresif stratejilerle kuponlar oluşturun."
+    },
+    "coupon-builder": {
+      "title": "Yapay Zeka Kupon Oluşturucu",
+      "description": "Gelişmiş yapay zeka ve istatistiksel modelleri kullanarak otomatik olarak optimize edilmiş bahis kuponları oluşturun."
+    },
+    "teams": {
+      "title": "Takım İstatistikleri",
+      "description": "Futbol takımları için detaylı istatistikler, form durumları ve tahmine dayalı modeller."
+    },
+    "coupon-history": {
+      "title": "Kupon Geçmişi",
+      "description": "Geçmişte oluşturduğunuz bahis kuponlarınızı ve performansınızı inceleyin."
+    },
+    "predictions": {
+      "title": "İddaa Tahminleri",
+      "description": "Günlük yapay zeka iddaa tahminleri, değerli oranlar ve yüksek güvenilirlikli maç tüyoları."
+    },
+    "signup": {
+      "title": "Kayıt Ol",
+      "description": "Yapay zeka tahminlerine erişmek için iddaai.com hesabınızı oluşturun."
+    },
+    "signin": {
+      "title": "Giriş Yap",
+      "description": "Yapay zeka tahminlerine ve araçlarına erişmek için iddaai.com hesabınıza giriş yapın."
+    }
   }
 }

src/app/[locale]/(auth)/signin/page.tsx

@@ -27,6 +27,32 @@ import { signIn } from "next-auth/react";
 import { toaster } from "@/components/ui/feedback/toaster";
 import { useState } from "react";
 
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "signin";
+
+  return {
+    title: t("signin.title"),
+    description: t("signin.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
+  };
+}
+
 const schema = yup.object({
   email: yup.string().email().required(),
   password: yup.string().required(),

src/app/[locale]/(auth)/signup/page.tsx

@@ -27,6 +27,32 @@ import { useState } from "react";
 import { signIn } from "next-auth/react";
 import { toaster } from "@/components/ui/feedback/toaster";
 
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "signup";
+
+  return {
+    title: t("signup.title"),
+    description: t("signup.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
+  };
+}
+
 const schema = yup.object({
   name: yup.string().required(),
   email: yup.string().email().required(),

src/app/[locale]/(site)/about/page.tsx

@@ -1,5 +1,31 @@
 import React from 'react';
 
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "about";
+
+  return {
+    title: t("about.title"),
+    description: t("about.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
+  };
+}
+
 function AboutPage() {
   return <div>AboutPage</div>;
 }

src/app/[locale]/(site)/admin/page.tsx

@@ -5,12 +5,29 @@ import { isAdminRole } from "@/lib/auth/roles";
 import { getServerSession } from "next-auth";
 import { notFound } from "next/navigation";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "admin";
+
   return {
-    title: `${t("admin.title")} | Suggest Bet`,
-    description:
-      "Admin panel for managing users, monitoring predictions, and system overview.",
+    title: t("admin.title"),
+    description: t("admin.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/analysis/page.tsx

@@ -1,11 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import AnalysisContent from "@/components/analysis/analysis-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "analysis";
+
   return {
-    title: `${t("analysis.title")} | Suggest Bet`,
-    description: "AI-powered multi-match analysis for coupon generation.",
+    title: t("analysis.title"),
+    description: t("analysis.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/coupon-builder/page.tsx

@@ -1,12 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import CouponBuilderContent from "@/components/coupons/coupon-builder-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "coupon-builder";
+
   return {
-    title: `${t("coupons.builder-title")} | Suggest Bet`,
-    description:
-      "Build your coupon with AI-powered suggestions. Choose your strategy and let AI optimize your bets.",
+    title: t("coupon-builder.title"),
+    description: t("coupon-builder.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/coupon-history/page.tsx

@@ -1,12 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import CouponHistoryContent from "@/components/coupons/coupon-history-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "coupon-history";
+
   return {
-    title: `${t("coupons.history-title")} | Suggest Bet`,
-    description:
-      "View your coupon history, track wins and losses, and analyze your betting performance.",
+    title: t("coupon-history.title"),
+    description: t("coupon-history.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/dashboard/page.tsx

@@ -1,13 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import DashboardContent from "@/components/dashboard/dashboard-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "dashboard";
 
   return {
-    title: `${t("dashboard.title")} | Suggest Bet`,
-    description:
-      "Your personalized betting dashboard with predictions, value bets, and match insights.",
+    title: t("dashboard.title"),
+    description: t("dashboard.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/h2h/page.tsx

@@ -1,11 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import H2HContent from "@/components/h2h/h2h-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "h2h";
+
   return {
-    title: `${t("matches.head-to-head")} | Suggest Bet`,
-    description: "Compare two teams and view their head-to-head match history.",
+    title: t("h2h.title"),
+    description: t("h2h.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/home/page.tsx

@@ -1,13 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import HomeContent from "@/components/home/home-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "home";
 
   return {
-    title: `${t("home")} | Suggest Bet`,
-    description:
-      "AI-powered betting predictions. Analyze matches, discover value bets, and build winning coupons.",
+    title: t("home.title"),
+    description: t("home.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/leagues/[id]/page.tsx

@@ -0,0 +1,30 @@
+import { getTranslations } from "next-intl/server";
+import LeagueDetailContent from "@/components/leagues/league-detail-content";
+
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string; id: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale, id } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  const pathSegment = `leagues/${id}`;
+
+  return {
+    title: `${t("leagues.title")} - Detay`,
+    description: t("leagues.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
+  };
+}
+
+export default async function LeagueDetailPage(props: { params: Promise<{ id: string }> }) {
+  const { id } = await props.params;
+  return <LeagueDetailContent leagueId={id} />;
+}

src/app/[locale]/(site)/leagues/page.tsx

@@ -1,11 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import LeaguesContent from "@/components/leagues/leagues-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "leagues";
+
   return {
-    title: `${t("leagues.title")} | Suggest Bet`,
-    description: "Browse football and basketball leagues, countries, and teams.",
+    title: t("leagues.title"),
+    description: t("leagues.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/matches/[id]/page.tsx

@@ -1,11 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import MatchDetailContent from "@/components/matches/match-detail-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "matches/[id]";
 
   return {
-    title: `${t("matches.match-details")} | Suggest Bet`,
+    title: t("matches.title"),
+    description: t("matches.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/matches/page.tsx

@@ -1,13 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import MatchesContent from "@/components/matches/matches-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "matches";
 
   return {
-    title: `${t("matches.title")} | Suggest Bet`,
-    description:
-      "Browse and analyze upcoming football and basketball matches with AI predictions.",
+    title: t("matches.title"),
+    description: t("matches.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/predictions/page.tsx

@@ -1,12 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import PredictionsContent from "@/components/predictions/predictions-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "predictions";
+
   return {
-    title: `${t("predictions.title")} | Suggest Bet`,
-    description:
-      "AI-powered match predictions with confidence scores, value bets, and prediction history.",
+    title: t("predictions.title"),
+    description: t("predictions.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/profile/page.tsx

@@ -1,12 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import ProfileContent from "@/components/profile/profile-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "profile";
+
   return {
-    title: `${t("profile.title")} | Suggest Bet`,
-    description:
-      "Manage your profile, view account info, and track your betting statistics.",
+    title: t("profile.title"),
+    description: t("profile.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/spor-toto/page.tsx

@@ -1,12 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import SporTotoContent from "@/components/spor-toto/spor-toto-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "spor-toto";
+
   return {
-    title: `${t("spor-toto.title")} | Suggest Bet`,
-    description:
-      "Spor Toto predictions with AI-powered analysis. Generate optimized system coupons with contrarian parimutuel strategy.",
+    title: t("spor-toto.title"),
+    description: t("spor-toto.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/teams/[id]/page.tsx

@@ -1,10 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import TeamDetailContent from "@/components/teams/team-detail-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "teams/[id]";
+
   return {
-    title: `${t("nav.teams")} | Suggest Bet`,
+    title: t("teams.title"),
+    description: t("teams.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/(site)/teams/page.tsx

@@ -1,11 +1,29 @@
 import { getTranslations } from "next-intl/server";
 import TeamsContent from "@/components/teams/teams-content";
 
-export async function generateMetadata() {
-  const t = await getTranslations();
+import { Metadata } from "next";
+
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  
+  // Next.js parses route variables automatically, but for canonical we'll just use a clean relative base if available, 
+  // or let next.js construct it implicitly from metadataBase if not explicitly specified.
+  // We'll set alternates just for languages based on current path segment as a best effort
+  const pathSegment = "teams";
+
   return {
-    title: `${t("nav.teams")} | Suggest Bet`,
-    description: "Search and explore football teams, view match history and stats.",
+    title: t("teams.title"),
+    description: t("teams.description"),
+    alternates: {
+      canonical: `${siteUrl}/${locale}/${pathSegment}`,
+      languages: {
+        en: `${siteUrl}/en/${pathSegment}`,
+        tr: `${siteUrl}/tr/${pathSegment}`,
+      },
+    },
   };
 }
 

src/app/[locale]/layout.tsx

@@ -4,8 +4,38 @@ import { hasLocale, NextIntlClientProvider } from "next-intl";
 import { notFound } from "next/navigation";
 import { routing } from "@/i18n/routing";
 import { dir } from "i18next";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import "./global.css";
 
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "seo" });
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+
+  return {
+    metadataBase: new URL(siteUrl),
+    title: {
+      template: `%s | ${t("global.title").split(" | ")[0]}`,
+      default: t("global.title"),
+    },
+    description: t("global.description"),
+    keywords: t("global.keywords"),
+    openGraph: {
+      title: t("global.title"),
+      description: t("global.description"),
+      siteName: t("global.title").split(" | ")[0],
+      locale: locale,
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("global.title"),
+      description: t("global.description"),
+    },
+  };
+}
+
 const bricolage = Bricolage_Grotesque({
   variable: "--font-bricolage",
   subsets: ["latin"],
@@ -23,6 +53,27 @@ export default async function RootLayout({
     notFound();
   }
 
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": "iddaai.com",
+    "url": siteUrl,
+    "potentialAction": {
+      "@type": "SearchAction",
+      "target": `${siteUrl}/search?q={search_term_string}`,
+      "query-input": "required name=search_term_string"
+    }
+  };
+
+  const orgJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    "name": "iddaai.com",
+    "url": siteUrl,
+    "logo": `${siteUrl}/favicon/android-chrome-512x512.png`,
+  };
+
   return (
     <html
       lang={locale}
@@ -35,6 +86,14 @@ export default async function RootLayout({
         <link rel='icon' type='image/png' sizes='32x32' href='/favicon/favicon-32x32.png' />
         <link rel='icon' type='image/png' sizes='16x16' href='/favicon/favicon-16x16.png' /> */}
         <link rel="manifest" href="/favicon/site.webmanifest" />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}
+        />
       </head>
       <body className={bricolage.variable}>
         <NextIntlClientProvider>

src/app/robots.ts

@@ -0,0 +1,13 @@
+import { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://iddaai.com';
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/admin', '/*/dashboard', '/*/profile', '/*/coupon-history'],
+    },
+    sitemap: `${baseUrl}/sitemap.xml`,
+  };
+}

src/app/sitemap.ts

@@ -0,0 +1,35 @@
+import { MetadataRoute } from 'next';
+import { routing } from '@/i18n/routing';
+
+const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://iddaai.com';
+
+const staticPages = [
+  '',
+  '/home',
+  '/about',
+  '/analysis',
+  '/leagues',
+  '/matches',
+  '/teams',
+  '/predictions',
+  '/spor-toto',
+  '/coupon-builder',
+  '/h2h'
+];
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const sitemapEntries: MetadataRoute.Sitemap = [];
+
+  staticPages.forEach((page) => {
+    routing.locales.forEach((locale) => {
+      sitemapEntries.push({
+        url: `${baseUrl}/${locale}${page}`,
+        lastModified: new Date(),
+        changeFrequency: 'daily',
+        priority: page === '' || page === '/home' ? 1.0 : 0.8,
+      });
+    });
+  });
+
+  return sitemapEntries;
+}

src/components/auth/login-modal.tsx

@@ -163,7 +163,7 @@ export function LoginModal({ open, onOpenChange, initialMode = "login" }: LoginM
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <Heading size="lg" color="primary.500">
+            <Heading as="span" size="lg" color="primary.500">
               {mode === "login" ? t("auth.sign-in") : t("auth.sign-up")}
             </Heading>
           </DialogTitle>

src/components/layout/header/header.tsx

@@ -42,12 +42,15 @@ import { LoginModal } from "@/components/auth/login-modal";
 import { isAdminRole } from "@/lib/auth/roles";
 import { LuLogIn, LuUser, LuShield, LuZap } from "react-icons/lu";
 import GlobalSearch from "@/components/search/global-search";
+import Image from "next/image";
 
 export default function Header() {
   const t = useTranslations();
   const [isSticky, setIsSticky] = useState(false);
   const [loginModalOpen, setLoginModalOpen] = useState(false);
-  const [loginModalMode, setLoginModalMode] = useState<"login" | "register">("login");
+  const [loginModalMode, setLoginModalMode] = useState<"login" | "register">(
+    "login",
+  );
   const router = useRouter();
   const { data: session, status } = useSession();
 
@@ -227,36 +230,22 @@ export default function Header() {
             flexShrink={0}
             mr={6}
           >
-            <Flex
-              boxSize="32px"
-              bg="primary.500"
-              borderRadius="lg"
-              align="center"
-              justify="center"
-              shadow="sm"
-            >
-              <LuZap color="white" size={18} />
-            </Flex>
+            <img
+              src="/logo.png"
+              alt="iddaai logo"
+              width={36}
+              height={36}
+              style={{ objectFit: "contain" }}
+            />
             <Box>
               <Text
-                fontSize="md"
-                fontWeight="800"
+                fontSize="xl"
+                fontWeight="900"
                 lineHeight="1"
                 color={{ base: "gray.900", _dark: "white" }}
-                letterSpacing="-0.02em"
+                letterSpacing="-0.04em"
               >
-                Suggest
-              </Text>
-              <Text
-                fontSize="xs"
-                fontWeight="600"
-                lineHeight="1"
-                mt="1px"
-                color={{ base: "primary.600", _dark: "primary.300" }}
-                letterSpacing="0.08em"
-                textTransform="uppercase"
-              >
-                BET
+                iddaai
               </Text>
             </Box>
           </ChakraLink>
@@ -325,7 +314,11 @@ export default function Header() {
       </Box>
 
       {/* Login Modal */}
-      <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} initialMode={loginModalMode} />
+      <LoginModal
+        open={loginModalOpen}
+        onOpenChange={setLoginModalOpen}
+        initialMode={loginModalMode}
+      />
     </>
   );
 }

src/components/leagues/league-detail-content.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Box, Flex, Heading, Text, VStack, HStack, Badge, Spinner } from "@chakra-ui/react";
+import { Link as ChakraLink } from "@chakra-ui/react";
+import { useTranslations } from "next-intl";
+import { useColorModeValue } from "@/components/ui/color-mode";
+import { SlideUp } from "@/components/motion";
+import { useLeagueById } from "@/lib/api/leagues/use-hooks";
+import { useQuery } from "@tanstack/react-query";
+import { matchesService } from "@/lib/api/matches/service";
+import MatchList from "@/components/matches/match-list";
+import { LuTrophy, LuMapPin, LuArrowLeft } from "react-icons/lu";
+import { Link } from "@/i18n/navigation";
+
+export default function LeagueDetailContent({ leagueId }: { leagueId: string }) {
+  const t = useTranslations("leagues");
+
+  const leagueQuery = useLeagueById(leagueId);
+  const league = leagueQuery.data?.data;
+
+  const matchesQuery = useQuery({
+    queryKey: ["league-matches", leagueId, league?.sport],
+    queryFn: () => matchesService.queryMatches({
+      sport: league?.sport || "football",
+      leagueId: leagueId,
+      status: "Finished",
+      limit: 100,
+    }),
+    enabled: !!league,
+  });
+
+  const bgGradient = useColorModeValue(
+    "linear(to-r, primary.500, primary.700)",
+    "linear(to-r, primary.600, primary.900)"
+  );
+
+  const flatMatches = matchesQuery.data?.data?.[0]?.matches || [];
+
+  return (
+    <Box minH="calc(100vh - 80px)">
+      {/* Hero Section */}
+      <Box bgGradient={bgGradient} color="white" pt={16} pb={20} px={6} position="relative" overflow="hidden">
+        <Box position="absolute" top="-20%" right="-10%" opacity={0.1} transform="rotate(15deg)">
+          <LuTrophy size={400} />
+        </Box>
+        <Box maxW="7xl" mx="auto" position="relative" zIndex={1}>
+          <SlideUp>
+            <VStack align="flex-start" gap={4} maxW="3xl">
+              <ChakraLink as={Link} href="/leagues" color="whiteAlpha.900" _hover={{ color: "white" }} display="flex" alignItems="center" gap={2} mb={2} fontWeight="medium">
+                <LuArrowLeft /> Liglere Dön
+              </ChakraLink>
+              
+              {leagueQuery.isLoading ? (
+                <Spinner color="white" borderWidth="3px" size="xl" />
+              ) : league ? (
+                <>
+                  <HStack gap={3}>
+                    <Badge colorScheme={league.sport === "football" ? "green" : "orange"} variant="solid" bg="whiteAlpha.300" size="lg" px={4} py={1} rounded="full">
+                      {league.sport}
+                    </Badge>
+                    {league.season && (
+                      <Badge variant="outline" color="white" borderColor="whiteAlpha.400" size="lg" px={4} py={1} rounded="full">
+                        SEZON: {league.season}
+                      </Badge>
+                    )}
+                  </HStack>
+                  <Heading as="h1" fontSize={{ base: "3xl", md: "5xl" }} fontWeight="800" letterSpacing="tight">
+                    {league.name}
+                  </Heading>
+                  <HStack fontSize="lg" color="whiteAlpha.900">
+                    <LuMapPin />
+                    <Text>{league.country?.name || "Global"}</Text>
+                  </HStack>
+                </>
+              ) : (
+                <Heading>Lig Bulunamadı</Heading>
+              )}
+            </VStack>
+          </SlideUp>
+        </Box>
+      </Box>
+
+      {/* Main Content Area */}
+      <Box maxW="7xl" mx="auto" px={6} mt={-10} position="relative" zIndex={2} pb={20}>
+        <SlideUp transition={{ delay: 0.1, duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}>
+          <Box bg={useColorModeValue("white", "gray.900")} p={{ base: 4, md: 8 }} shadow="xl" borderRadius="2xl" borderWidth="1px" borderColor={useColorModeValue("gray.200", "gray.800")}>
+            <Heading size="md" mb={6}>Geçmiş Maçlar</Heading>
+            <MatchList flatMatches={flatMatches} isLoading={matchesQuery.isLoading || leagueQuery.isLoading} />
+          </Box>
+        </SlideUp>
+      </Box>
+    </Box>
+  );
+}

src/components/leagues/leagues-content.tsx

@@ -11,7 +11,9 @@ import {
   Badge,
   Spinner,
   Input,
-  Tabs,
+  Grid,
+  GridItem,
+  Icon,
 } from "@chakra-ui/react";
 import { useTranslations } from "next-intl";
 import { useColorModeValue } from "@/components/ui/color-mode";
@@ -22,8 +24,8 @@ import {
   useSearchTeams,
 } from "@/lib/api/leagues/use-hooks";
 import type { CountryDto, LeagueDto, TeamDto } from "@/lib/api/leagues/types";
-import { LuSearch, LuGlobe, LuTrophy, LuUsers } from "react-icons/lu";
-import { useState } from "react";
+import { LuSearch, LuGlobe, LuTrophy, LuUsers, LuArrowRight, LuMapPin } from "react-icons/lu";
+import { useMemo, useState } from "react";
 import { useDebounce } from "@/hooks/use-debounce";
 import { Link } from "@/i18n/navigation";
 import { InputGroup } from "@/components/ui/forms/input-group";
@@ -33,13 +35,24 @@ export default function LeaguesContent() {
   const t = useTranslations("leagues");
   const tMatches = useTranslations("matches");
 
-  const cardBg = useColorModeValue("white", "gray.800");
-  const borderColor = useColorModeValue("gray.100", "gray.700");
+  const bgGradient = useColorModeValue(
+    "linear(to-r, primary.500, primary.700)",
+    "linear(to-r, primary.600, primary.900)"
+  );
+  
+  const cardBg = useColorModeValue("white", "gray.900");
+  const borderColor = useColorModeValue("gray.200", "gray.800");
+  const hoverBg = useColorModeValue("gray.50", "whiteAlpha.50");
 
   const [activeTab, setActiveTab] = useState<"leagues" | "teams">("leagues");
   const [sportFilter, setSportFilter] = useState<string>("");
-  const [searchQuery, setSearchQuery] = useState("");
-  const debouncedQuery = useDebounce(searchQuery, 300);
+  const [selectedCountryId, setSelectedCountryId] = useState<string | null>(null);
+  
+  const [teamSearchQuery, setTeamSearchQuery] = useState("");
+  const debouncedTeamQuery = useDebounce(teamSearchQuery, 300);
+
+  const [countrySearchQuery, setCountrySearchQuery] = useState("");
+  const debouncedCountryQuery = useDebounce(countrySearchQuery, 300);
 
   const countries = useCountries();
   const leagues = useLeagues(
@@ -48,288 +61,379 @@ export default function LeaguesContent() {
       : undefined,
   );
   const searchTeams = useSearchTeams(
-    debouncedQuery.length >= 2 ? { q: debouncedQuery } : { q: "" },
+    debouncedTeamQuery.length >= 2 ? { q: debouncedTeamQuery } : { q: "" },
   );
 
+  const filteredCountries = useMemo(() => {
+    if (!countries.data?.data) return [];
+    if (!debouncedCountryQuery) return countries.data.data;
+    return countries.data.data.filter((c) => 
+      c.name.toLowerCase().includes(debouncedCountryQuery.toLowerCase())
+    );
+  }, [countries.data?.data, debouncedCountryQuery]);
+
+  const displayedLeagues = useMemo(() => {
+    let sourceLeagues: LeagueDto[] = leagues.data?.data || [];
+    
+    if (selectedCountryId) {
+      sourceLeagues = sourceLeagues.filter(l => l.countryId === selectedCountryId);
+    }
+    
+    // Apply sport filter if selected
+    if (sportFilter) {
+      return sourceLeagues.filter(l => l.sport === sportFilter);
+    }
+    return sourceLeagues;
+  }, [selectedCountryId, leagues.data?.data, sportFilter]);
+
   return (
-    <SlideUp>
-      <Box maxW="6xl" mx="auto">
-        <Heading as="h1" size="xl" fontWeight="bold" mb={6}>
-          {t("title")}
-        </Heading>
+    <Box minH="calc(100vh - 80px)">
+      {/* Hero Section */}
+      <Box bgGradient={bgGradient} color="white" pt={16} pb={20} px={6} position="relative" overflow="hidden">
+        <Box position="absolute" top="-20%" right="-10%" opacity={0.1} transform="rotate(15deg)">
+          <LuTrophy size={400} />
+        </Box>
+        <Box maxW="7xl" mx="auto" position="relative" zIndex={1}>
+          <SlideUp>
+            <VStack align="center" gap={4} textAlign="center" maxW="3xl" mx="auto">
+              <Badge colorScheme="whiteAlpha" variant="subtle" size="lg" px={4} py={1} rounded="full">
+                {t("title")}
+              </Badge>
+              <Heading as="h1" fontSize={{ base: "3xl", md: "5xl" }} fontWeight="800" letterSpacing="tight">
+                {activeTab === "leagues" ? t("countries-leagues") : tMatches("search-teams")}
+              </Heading>
+              <Text fontSize="lg" color="whiteAlpha.800" maxW="xl">
+                {activeTab === "leagues" 
+                  ? "Explore top football and basketball leagues around the world. Filter by country and analyze historical matches."
+                  : "Find your favorite teams across all leagues. Get deep insights and head-to-head statistics."}
+              </Text>
+            </VStack>
+          </SlideUp>
+        </Box>
+      </Box>
 
-        <Tabs.Root
-          value={activeTab}
-          onValueChange={(e) => setActiveTab(e.value as "leagues" | "teams")}
-        >
-          <Tabs.List>
-            <Tabs.Trigger value="leagues">
-              <LuGlobe />
-              {t("countries-leagues")}
-            </Tabs.Trigger>
-            <Tabs.Trigger value="teams">
-              <LuUsers />
-              {tMatches("search-teams")}
-            </Tabs.Trigger>
-          </Tabs.List>
+      {/* Main Content Area - Pulled up to overlap hero */}
+      <Box maxW="7xl" mx="auto" px={6} mt={-10} position="relative" zIndex={2} pb={20}>
+        <SlideUp transition={{ delay: 0.1, duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}>
+          <Card.Root bg={cardBg} shadow="xl" borderRadius="2xl" borderWidth="1px" borderColor={borderColor} overflow="hidden">
             
-          {/* Countries & Leagues Tab */}
-          <Tabs.Content value="leagues">
-            <Flex gap={6} direction={{ base: "column", lg: "row" }}>
-              {/* Countries Sidebar */}
-              <Box w={{ base: "full", lg: "280px" }} flexShrink={0}>
-                <Card.Root
-                  bg={cardBg}
-                  borderColor={borderColor}
-                  borderRadius="xl"
+            {/* Tab Navigation */}
+            <Flex borderBottomWidth="1px" borderColor={borderColor} bg={useColorModeValue("gray.50", "whiteAlpha.50")}>
+              <Flex flex={1}>
+                <Box 
+                  flex={1} py={4} textAlign="center" cursor="pointer"
+                  borderBottomWidth="2px"
+                  borderColor={activeTab === "leagues" ? "primary.500" : "transparent"}
+                  color={activeTab === "leagues" ? "primary.500" : "fg.muted"}
+                  fontWeight={activeTab === "leagues" ? "bold" : "medium"}
+                  onClick={() => setActiveTab("leagues")}
+                  transition="all 0.2s"
+                  _hover={{ bg: hoverBg }}
                 >
-                  <Card.Header>
-                    <Heading as="h4" size="sm">
-                      <HStack gap={2}>
-                        <LuGlobe />
-                        <Text>{t("countries")}</Text>
-                      </HStack>
-                    </Heading>
-                  </Card.Header>
-                  <Card.Body pt={0} maxH="600px" overflowY="auto">
-                    {countries.isLoading ? (
-                      <Flex justify="center" py={4}>
-                        <Spinner size="sm" />
-                      </Flex>
-                    ) : (
-                      <VStack gap={1} align="stretch">
-                        {countries.data?.data?.map((country: CountryDto) => (
-                          <Flex
-                            key={country.id}
-                            px={3}
-                            py={2}
-                            borderRadius="md"
-                            _hover={{
-                              bg: "gray.50",
-                              _dark: { bg: "gray.750" },
-                            }}
-                            cursor="pointer"
-                            justify="space-between"
-                            align="center"
+                  <HStack justify="center" gap={2}>
+                    <LuGlobe />
+                    <Text>{t("countries-leagues")}</Text>
+                  </HStack>
+                </Box>
+                <Box 
+                  flex={1} py={4} textAlign="center" cursor="pointer"
+                  borderBottomWidth="2px"
+                  borderColor={activeTab === "teams" ? "primary.500" : "transparent"}
+                  color={activeTab === "teams" ? "primary.500" : "fg.muted"}
+                  fontWeight={activeTab === "teams" ? "bold" : "medium"}
+                  onClick={() => setActiveTab("teams")}
+                  transition="all 0.2s"
+                  _hover={{ bg: hoverBg }}
+                >
+                  <HStack justify="center" gap={2}>
+                    <LuUsers />
+                    <Text>{tMatches("search-teams")}</Text>
+                  </HStack>
+                </Box>
+              </Flex>
+            </Flex>
+
+            {/* LEAGUES TAB */}
+            {activeTab === "leagues" && (
+              <Flex direction={{ base: "column", lg: "row" }} minH="600px">
+                
+                {/* Left Sidebar: Countries */}
+                <Box w={{ base: "full", lg: "320px" }} borderRightWidth={{ lg: "1px" }} borderColor={borderColor} bg={useColorModeValue("gray.50", "whiteAlpha.50")}>
+                  <VStack align="stretch" h="full" gap={0}>
+                    <Box p={4} borderBottomWidth="1px" borderColor={borderColor} bg={cardBg}>
+                      <InputGroup startElement={<LuSearch color="gray.400" />} w="full">
+                        <Input 
+                          placeholder={t("countries") + "..."} 
+                          variant="subtle" 
+                          borderRadius="full"
+                          value={countrySearchQuery}
+                          onChange={(e) => setCountrySearchQuery(e.target.value)}
+                        />
+                      </InputGroup>
+                    </Box>
+                    
+                    <Box flex={1} overflowY="auto" maxH={{ base: "300px", lg: "600px" }} p={2}>
+                      {countries.isLoading ? (
+                        <Flex justify="center" py={10}><Spinner color="primary.500" /></Flex>
+                      ) : (
+                        <VStack gap={1} align="stretch">
+                          <Box
+                            px={4} py={3} borderRadius="lg" cursor="pointer"
+                            bg={selectedCountryId === null ? "primary.500" : "transparent"}
+                            color={selectedCountryId === null ? "white" : "fg"}
+                            _hover={{ bg: selectedCountryId === null ? "primary.600" : hoverBg }}
+                            onClick={() => setSelectedCountryId(null)}
+                            transition="all 0.2s"
                           >
-                            <HStack gap={2}>
-                              {country.flag ? (
-                                <img
-                                  src={country.flag}
-                                  width="16"
-                                  height="16"
-                                  style={{ borderRadius: "2px" }}
-                                  alt={country.name}
-                                />
-                              ) : null}
-                              <Text fontSize="sm">{country.name}</Text>
+                            <HStack justify="space-between">
+                              <HStack gap={3}>
+                                <LuGlobe />
+                                <Text fontWeight={selectedCountryId === null ? "bold" : "medium"}>{t("all")}</Text>
+                              </HStack>
+                              <Badge size="sm" bg={selectedCountryId === null ? "whiteAlpha.300" : "gray.100"} color={selectedCountryId === null ? "white" : "fg"}>
+                                {leagues.data?.data?.length || 0}
+                              </Badge>
                             </HStack>
-                            <Badge size="xs" colorScheme="gray">
-                              {country.leagues?.length || 0}
-                            </Badge>
-                          </Flex>
-                        ))}
-                      </VStack>
-                    )}
-                  </Card.Body>
-                </Card.Root>
-              </Box>
+                          </Box>
                           
-              {/* Leagues List */}
-              <Box flex={1}>
-                <Card.Root
-                  bg={cardBg}
-                  borderColor={borderColor}
-                  borderRadius="xl"
-                >
-                  <Card.Header>
-                    <Flex justify="space-between" align="center">
-                      <Heading as="h4" size="sm">
-                        <HStack gap={2}>
-                          <LuTrophy />
-                          <Text>{t("leagues")}</Text>
-                        </HStack>
-                      </Heading>
-                      <HStack gap={2}>
-                        <Badge
-                          cursor="pointer"
-                          colorScheme={!sportFilter ? "primary" : "gray"}
-                          onClick={() => setSportFilter("")}
-                        >
-                          {tMatches("all")}
-                        </Badge>
-                        <Badge
-                          cursor="pointer"
-                          colorScheme={
-                            sportFilter === "football" ? "green" : "gray"
-                          }
-                          onClick={() =>
-                            setSportFilter(
-                              sportFilter === "football" ? "" : "football",
-                            )
-                          }
-                        >
-                          {tMatches("football")}
-                        </Badge>
-                        <Badge
-                          cursor="pointer"
-                          colorScheme={
-                            sportFilter === "basketball" ? "orange" : "gray"
-                          }
-                          onClick={() =>
-                            setSportFilter(
-                              sportFilter === "basketball" ? "" : "basketball",
-                            )
-                          }
-                        >
-                          {tMatches("basketball")}
-                        </Badge>
-                      </HStack>
+                          {filteredCountries.map((country: CountryDto) => {
+                            const isSelected = selectedCountryId === country.id;
+                            return (
+                              <Box
+                                key={country.id}
+                                px={4} py={3} borderRadius="lg" cursor="pointer"
+                                bg={isSelected ? "primary.500" : "transparent"}
+                                color={isSelected ? "white" : "fg"}
+                                _hover={{ bg: isSelected ? "primary.600" : hoverBg }}
+                                onClick={() => setSelectedCountryId(country.id)}
+                                transition="all 0.2s"
+                              >
+                                <HStack justify="space-between">
+                                  <HStack gap={3}>
+                                    {country.flag ? (
+                                      <img src={country.flag} width="20" height="20" style={{ borderRadius: "50%", objectFit: "cover" }} alt={country.name} />
+                                    ) : <LuMapPin />}
+                                    <Text fontWeight={isSelected ? "bold" : "medium"}>{country.name}</Text>
+                                  </HStack>
+                                  <Badge size="sm" bg={isSelected ? "whiteAlpha.300" : "gray.100"} color={isSelected ? "white" : "fg"}>
+                                    {leagues.data?.data?.filter(l => l.countryId === country.id).length || 0}
+                                  </Badge>
+                                </HStack>
+                              </Box>
+                            );
+                          })}
+                        </VStack>
+                      )}
+                    </Box>
+                  </VStack>
+                </Box>
+
+                {/* Right Area: Leagues Grid */}
+                <Box flex={1} p={{ base: 4, md: 8 }} bg={cardBg}>
+                  {/* Top Filters */}
+                  <Flex justify="space-between" align="center" mb={6} direction={{ base: "column", sm: "row" }} gap={4}>
+                    <Heading size="md" fontWeight="bold">
+                      {selectedCountryId 
+                        ? `${countries.data?.data?.find(c => c.id === selectedCountryId)?.name} ${t("leagues")}`
+                        : t("leagues")}
+                      <Text as="span" color="fg.muted" ml={2} fontWeight="normal" fontSize="sm">
+                        ({displayedLeagues.length})
+                      </Text>
+                    </Heading>
+                    
+                    <HStack gap={2} bg={useColorModeValue("gray.100", "gray.800")} p={1} borderRadius="full">
+                      <Box
+                        px={4} py={1.5} borderRadius="full" cursor="pointer" fontSize="sm" fontWeight="medium"
+                        bg={!sportFilter ? "white" : "transparent"}
+                        color={!sportFilter ? "black" : "fg.muted"}
+                        shadow={!sportFilter ? "sm" : "none"}
+                        onClick={() => setSportFilter("")}
+                        transition="all 0.2s"
+                        _dark={{ bg: !sportFilter ? "gray.600" : "transparent", color: !sportFilter ? "white" : "gray.400" }}
+                      >
+                        {t("all")}
+                      </Box>
+                      <Box
+                        px={4} py={1.5} borderRadius="full" cursor="pointer" fontSize="sm" fontWeight="medium"
+                        bg={sportFilter === "football" ? "green.500" : "transparent"}
+                        color={sportFilter === "football" ? "white" : "fg.muted"}
+                        shadow={sportFilter === "football" ? "sm" : "none"}
+                        onClick={() => setSportFilter(sportFilter === "football" ? "" : "football")}
+                        transition="all 0.2s"
+                      >
+                        {tMatches("football")}
+                      </Box>
+                      <Box
+                        px={4} py={1.5} borderRadius="full" cursor="pointer" fontSize="sm" fontWeight="medium"
+                        bg={sportFilter === "basketball" ? "orange.500" : "transparent"}
+                        color={sportFilter === "basketball" ? "white" : "fg.muted"}
+                        shadow={sportFilter === "basketball" ? "sm" : "none"}
+                        onClick={() => setSportFilter(sportFilter === "basketball" ? "" : "basketball")}
+                        transition="all 0.2s"
+                      >
+                        {tMatches("basketball")}
+                      </Box>
+                    </HStack>
+                  </Flex>
+
+                  {/* Leagues Grid */}
+                  {leagues.isLoading ? (
+                    <Flex justify="center" py={20}><Spinner size="xl" color="primary.500" borderWidth="3px" /></Flex>
+                  ) : displayedLeagues.length === 0 ? (
+                    <Flex direction="column" align="center" justify="center" py={20} textAlign="center">
+                      <Box bg="gray.100" _dark={{ bg: "gray.800" }} p={6} borderRadius="full" mb={4}>
+                        <LuTrophy size={40} color="gray" />
+                      </Box>
+                      <Heading size="md" mb={2}>Bulunamadı</Heading>
+                      <Text color="fg.muted">Seçili kriterlere uygun lig bulunamadı.</Text>
                     </Flex>
-                  </Card.Header>
-                  <Card.Body pt={0}>
-                    {leagues.isLoading ? (
-                      <Flex justify="center" py={6}>
-                        <Spinner size="sm" />
-                      </Flex>
-                    ) : (
-                      <VStack gap={2}>
-                        {leagues.data?.data?.map((league: LeagueDto) => (
+                  ) : (
+                    <Grid templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", xl: "repeat(3, 1fr)" }} gap={4}>
+                      {displayedLeagues.map((league: LeagueDto) => (
+                        <GridItem key={league.id}>
                           <ChakraLink
-                            key={league.id}
                             as={Link}
-                            href="/matches"
-                            p={3}
-                            borderRadius="md"
+                            href={`/leagues/${league.id}`}
+                            display="block"
+                            h="full"
+                            p={5}
+                            borderRadius="xl"
                             borderWidth="1px"
                             borderColor={borderColor}
+                            bg={cardBg}
                             _hover={{
                               borderColor: "primary.300",
-                              bg: "primary.50",
-                              _dark: { bg: "gray.750" },
+                              shadow: "md",
+                              transform: "translateY(-2px)",
                             }}
-                            display="flex"
-                            justifyContent="space-between"
-                            alignItems="center"
+                            transition="all 0.2s"
                             textDecoration="none"
                             color="inherit"
+                            data-group
                           >
-                            <VStack align="start" gap={0}>
-                              <Text fontWeight="semibold">{league.name}</Text>
-                              <Text fontSize="xs" color="fg.muted">
-                                {league.country?.name || ""}
-                              </Text>
-                            </VStack>
-                            <HStack gap={2}>
-                              {league.sport ? (
-                                <Badge
-                                  size="xs"
-                                  colorScheme={
-                                    league.sport === "football"
-                                      ? "green"
-                                      : "orange"
-                                  }
-                                >
-                                  {league.sport}
-                                </Badge>
-                              ) : null}
-                              {league.season ? (
-                                <Text fontSize="xs" color="fg.muted">
-                                  {league.season}
-                                </Text>
-                              ) : null}
-                            </HStack>
-                          </ChakraLink>
-                        ))}
-                      </VStack>
-                    )}
-                  </Card.Body>
-                </Card.Root>
-              </Box>
-            </Flex>
-          </Tabs.Content>
+                            <Flex justify="space-between" align="flex-start" mb={4}>
+                              <Box p={2} borderRadius="lg" bg={league.sport === "football" ? "green.50" : "orange.50"} _dark={{ bg: league.sport === "football" ? "green.900" : "orange.900" }}>
+                                <LuTrophy size={20} color={league.sport === "football" ? "var(--chakra-colors-green-500)" : "var(--chakra-colors-orange-500)"} />
+                              </Box>
+                              <Badge size="sm" variant="subtle" colorScheme={league.sport === "football" ? "green" : "orange"}>
+                                {league.sport}
+                              </Badge>
+                            </Flex>
                             
-          {/* Teams Search Tab */}
-          <Tabs.Content value="teams">
-            <Card.Root bg={cardBg} borderColor={borderColor} borderRadius="xl">
-              <Card.Body>
-                <InputGroup startElement={<LuSearch />} mb={4}>
-                  <Input
-                    placeholder={tMatches("search-teams")}
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                  />
-                </InputGroup>
-                {debouncedQuery.length < 2 ? (
-                  <Text color="fg.muted" textAlign="center" py={8}>
-                    {t("search-at-least-2")}
-                  </Text>
+                            <Heading size="sm" mb={1} lineClamp={1} _groupHover={{ color: "primary.500" }}>
+                              {league.name}
+                            </Heading>
+                            <HStack color="fg.muted" fontSize="sm" gap={1}>
+                              <LuMapPin size={14} />
+                              <Text lineClamp={1}>{league.country?.name || "Global"}</Text>
+                            </HStack>
+                            
+                            {league.season && (
+                              <Flex mt={4} pt={4} borderTopWidth="1px" borderColor={borderColor} justify="space-between" align="center">
+                                <Text fontSize="xs" color="fg.muted" fontWeight="medium">SEZON: {league.season}</Text>
+                                <Icon as={LuArrowRight} color="gray.400" _groupHover={{ color: "primary.500", transform: "translateX(4px)" }} transition="all 0.2s" />
+                              </Flex>
+                            )}
+                          </ChakraLink>
+                        </GridItem>
+                      ))}
+                    </Grid>
+                  )}
+                </Box>
+              </Flex>
+            )}
+
+            {/* TEAMS TAB */}
+            {activeTab === "teams" && (
+              <Box p={{ base: 4, md: 8 }}>
+                <Box maxW="2xl" mx="auto" mb={10}>
+                  <InputGroup startElement={<LuSearch color="gray.400" size={20} />} w="full">
+                    <Input
+                      placeholder={tMatches("search-teams") + "..."}
+                      value={teamSearchQuery}
+                      onChange={(e) => setTeamSearchQuery(e.target.value)}
+                      variant="outline"
+                      borderRadius="xl"
+                      fontSize="lg"
+                      py={6}
+                      boxShadow="sm"
+                      _focus={{ boxShadow: "0 0 0 2px var(--chakra-colors-primary-500)" }}
+                    />
+                  </InputGroup>
+                </Box>
+
+                {debouncedTeamQuery.length < 2 ? (
+                  <Flex direction="column" align="center" justify="center" py={20} textAlign="center">
+                    <Box bg="primary.50" _dark={{ bg: "primary.900" }} p={8} borderRadius="full" mb={6}>
+                      <LuUsers size={64} color="var(--chakra-colors-primary-500)" />
+                    </Box>
+                    <Heading size="lg" mb={3}>{t("search-at-least-2")}</Heading>
+                    <Text color="fg.muted" maxW="md">
+                      Find detailed statistics, upcoming matches, and head-to-head analysis by searching for any team worldwide.
+                    </Text>
+                  </Flex>
                 ) : searchTeams.isLoading ? (
-                  <Flex justify="center" py={6}>
-                    <Spinner size="md" />
+                  <Flex justify="center" py={20}><Spinner size="xl" color="primary.500" borderWidth="3px" /></Flex>
+                ) : searchTeams.data?.data?.length === 0 ? (
+                  <Flex direction="column" align="center" justify="center" py={20} textAlign="center">
+                    <Heading size="md" mb={2}>Takım Bulunamadı</Heading>
+                    <Text color="fg.muted">"{debouncedTeamQuery}" aramasıyla eşleşen bir takım bulunamadı.</Text>
                   </Flex>
                 ) : (
-                  <VStack gap={2}>
+                  <Grid templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", xl: "repeat(3, 1fr)" }} gap={4}>
                     {searchTeams.data?.data?.map((team: TeamDto) => (
-                      <ChakraLink
-                        key={team.id}
-                        as={Link}
-                        href={`/teams/${team.id}`}
-                        p={3}
-                        borderRadius="md"
-                        borderWidth="1px"
-                        borderColor={borderColor}
-                        _hover={{
-                          borderColor: "primary.300",
-                          bg: "primary.50",
-                          _dark: { bg: "gray.750" },
-                        }}
-                        display="flex"
-                        alignItems="center"
-                        gap={3}
-                        textDecoration="none"
-                        color="inherit"
-                      >
-                        {team.logo ? (
-                          <img
-                            src={team.logo}
-                            width="32"
-                            height="32"
-                            style={{ borderRadius: "50%" }}
-                            alt={team.name}
-                          />
-                        ) : (
-                          <Box
-                            boxSize="32px"
-                            borderRadius="full"
-                            bg="gray.200"
-                            _dark={{ bg: "gray.600" }}
-                          />
-                        )}
-                        <VStack align="start" gap={0}>
-                          <Text fontWeight="semibold">{team.name}</Text>
-                          <Text fontSize="xs" color="fg.muted">
-                            {team.country || ""}
-                          </Text>
-                        </VStack>
-                        <Badge
-                          ml="auto"
-                          size="xs"
-                          colorScheme={
-                            team.sport === "football" ? "green" : "orange"
-                          }
+                      <GridItem key={team.id}>
+                        <ChakraLink
+                          as={Link}
+                          href={`/teams/${team.id}`}
+                          display="flex"
+                          alignItems="center"
+                          p={4}
+                          borderRadius="xl"
+                          borderWidth="1px"
+                          borderColor={borderColor}
+                          bg={cardBg}
+                          _hover={{
+                            borderColor: "primary.300",
+                            shadow: "md",
+                            transform: "translateY(-2px)",
+                          }}
+                          transition="all 0.2s"
+                          textDecoration="none"
+                          color="inherit"
+                          data-group
                         >
-                          {team.sport}
-                        </Badge>
-                      </ChakraLink>
+                          {team.logo ? (
+                            <Box w={12} h={12} borderRadius="full" overflow="hidden" flexShrink={0} mr={4} bg="white" p={1} shadow="sm">
+                              <img src={team.logo} width="100%" height="100%" style={{ objectFit: "contain" }} alt={team.name} />
+                            </Box>
+                          ) : (
+                            <Flex w={12} h={12} borderRadius="full" bg="gray.100" _dark={{ bg: "gray.700" }} align="center" justify="center" flexShrink={0} mr={4}>
+                              <LuUsers size={20} color="gray" />
+                            </Flex>
+                          )}
+                          
+                          <VStack align="start" gap={0} flex={1}>
+                            <Heading size="sm" lineClamp={1} _groupHover={{ color: "primary.500" }}>{team.name}</Heading>
+                            <HStack color="fg.muted" fontSize="xs" gap={1}>
+                              <LuMapPin size={12} />
+                              <Text lineClamp={1}>{team.country || "Global"}</Text>
+                            </HStack>
+                          </VStack>
+                          
+                          <Badge ml={2} size="sm" colorScheme={team.sport === "football" ? "green" : "orange"} variant="subtle">
+                            {team.sport}
+                          </Badge>
+                        </ChakraLink>
+                      </GridItem>
                     ))}
-                  </VStack>
+                  </Grid>
                 )}
-              </Card.Body>
-            </Card.Root>
-          </Tabs.Content>
-        </Tabs.Root>
+              </Box>
+            )}
+          </Card.Root>
+        </SlideUp>
       </Box>
-    </SlideUp>
+    </Box>
   );
 }

src/components/matches/match-list.tsx

@@ -117,6 +117,10 @@ export default function MatchList({
       );
     }
 
+    const sortedFlatMatches = [...flatMatches].sort(
+      (a, b) => Number(a.mstUtc) - Number(b.mstUtc),
+    );
+
     return (
       <StaggerContainer>
         <Grid
@@ -127,7 +131,7 @@ export default function MatchList({
           }}
           gap={4}
         >
-          {flatMatches.map((match) => (
+          {sortedFlatMatches.map((match) => (
             <StaggerItem key={match.id}>
               <MatchCard match={match} />
             </StaggerItem>
@@ -148,9 +152,23 @@ export default function MatchList({
     );
   }
 
+  // Sort leagues by their earliest match, and sort matches within each league
+  const sortedLeagues = [...leagues]
+    .map((league) => ({
+      ...league,
+      matches: [...league.matches].sort(
+        (a, b) => Number(a.mstUtc) - Number(b.mstUtc),
+      ),
+    }))
+    .sort((a, b) => {
+      const earliestA = Math.min(...a.matches.map((m) => Number(m.mstUtc)));
+      const earliestB = Math.min(...b.matches.map((m) => Number(m.mstUtc)));
+      return earliestA - earliestB;
+    });
+
   return (
     <StaggerContainer>
-      {leagues.map((league) => (
+      {sortedLeagues.map((league) => (
         <StaggerItem key={league.id}>
           <Box mb={6}>
             {/* League Header */}

src/components/motion/index.tsx

@@ -8,7 +8,14 @@ import {
   useInView,
   type HTMLMotionProps,
 } from "framer-motion";
-import { forwardRef, type ReactNode, useEffect, useRef } from "react";
+import {
+  forwardRef,
+  Key,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 // ========================
 // Shared animation variants
@@ -381,34 +388,92 @@ interface SparkleProps {
   color?: string;
 }
 
-export function Sparkles({ count = 6, color = "rgba(56, 178, 172, 0.6)" }: SparkleProps) {
+interface SparkleConfig {
+  id: number;
+  size: number;
+  left: number;
+  bottom: number;
+  y: number;
+  duration: number;
+  delay: number;
+}
+
+export function Sparkles({
+  count = 6,
+  color = "rgba(56, 178, 172, 0.6)",
+}: SparkleProps) {
+  const [sparkles, setSparkles] = useState<SparkleConfig[]>([]);
+
+  useEffect(() => {
+    const newSparkles = Array.from({ length: count }).map((_, i) => ({
+      id: i,
+      size: 4 + Math.random() * 4,
+      left: 10 + Math.random() * 80,
+      bottom: Math.random() * 30,
+      y: -(60 + Math.random() * 80),
+      duration: 2.5 + Math.random() * 2,
+      delay: Math.random() * 3,
+    }));
+    setSparkles(newSparkles);
+  }, [count]);
+
+  if (sparkles.length === 0) {
+    return (
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          overflow: "hidden",
+          pointerEvents: "none",
+        }}
+      />
+    );
+  }
+
   return (
-    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
-      {Array.from({ length: count }).map((_, i) => (
-        <motion.div
-          key={i}
-          style={{
-            position: "absolute",
-            width: 4 + Math.random() * 4,
-            height: 4 + Math.random() * 4,
-            borderRadius: "50%",
-            background: color,
-            left: `${10 + Math.random() * 80}%`,
-            bottom: `${Math.random() * 30}%`,
-          }}
-          animate={{
-            y: [0, -(60 + Math.random() * 80)],
-            opacity: [0, 1, 1, 0],
-            scale: [0.5, 1, 0.8, 0],
-          }}
-          transition={{
-            duration: 2.5 + Math.random() * 2,
-            repeat: Infinity,
-            delay: Math.random() * 3,
-            ease: "easeOut",
-          }}
-        />
-      ))}
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        pointerEvents: "none",
+      }}
+    >
+      {sparkles.map(
+        (sparkle: {
+          id: Key | null | undefined;
+          size: any;
+          left: any;
+          bottom: any;
+          y: string | number | null;
+          duration: any;
+          delay: any;
+        }) => (
+          <motion.div
+            key={sparkle.id}
+            style={{
+              position: "absolute",
+              width: sparkle.size,
+              height: sparkle.size,
+              borderRadius: "50%",
+              background: color,
+              left: `${sparkle.left}%`,
+              bottom: `${sparkle.bottom}%`,
+            }}
+            animate={{
+              y: [0, sparkle.y],
+              opacity: [0, 1, 1, 0],
+              scale: [0.5, 1, 0.8, 0],
+            }}
+            transition={{
+              duration: sparkle.duration,
+              repeat: Infinity,
+              delay: sparkle.delay,
+              ease: "easeOut",
+            }}
+          />
+        ),
+      )}
     </div>
   );
 }

src/components/ui/locale-switcher.tsx

@@ -10,7 +10,7 @@ import {
   SelectValueText,
 } from '@/components/ui/collections/select';
 import { useParams } from 'next/navigation';
-import { createListCollection } from '@chakra-ui/react';
+import { createListCollection, ClientOnly } from '@chakra-ui/react';
 import { usePathname, useRouter } from '@/i18n/navigation';
 
 const LocaleSwitcher = () => {
@@ -40,27 +40,29 @@ const LocaleSwitcher = () => {
     });
   }
   return (
-    <SelectRoot
-      disabled={isPending}
-      value={[locale]}
-      onValueChange={onSelectChange}
-      w={{ base: 'full', lg: '24' }}
-      size='sm'
-      variant='outline'
-      borderRadius='md'
-      collection={collections}
-    >
-      <SelectTrigger>
-        <SelectValueText placeholder='Select a language' />
-      </SelectTrigger>
-      <SelectContent zIndex='9999'>
-        {collections.items.map((collection) => (
-          <SelectItem key={collection.value} item={collection}>
-            {collection.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </SelectRoot>
+    <ClientOnly fallback={<div style={{ height: '32px' }} />}>
+      <SelectRoot
+        disabled={isPending}
+        value={[locale]}
+        onValueChange={onSelectChange}
+        w={{ base: 'full', lg: '24' }}
+        size='sm'
+        variant='outline'
+        borderRadius='md'
+        collection={collections}
+      >
+        <SelectTrigger>
+          <SelectValueText placeholder='Select a language' />
+        </SelectTrigger>
+        <SelectContent zIndex='9999'>
+          {collections.items.map((collection) => (
+            <SelectItem key={collection.value} item={collection}>
+              {collection.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </SelectRoot>
+    </ClientOnly>
   );
 };
 

src/config/navigation.ts

@@ -16,15 +16,26 @@ export function getVisibleNavItems(
   items: NavItem[],
   isAuthenticated: boolean,
 ): NavItem[] {
-  return items.filter((item) => {
-    // Hidden items never show in nav
-    if (item.visible === false) return false;
-    // onlyPublic items hide when authenticated
-    if (item.onlyPublic && isAuthenticated) return false;
-    // Protected items hide when not authenticated
-    if (item.protected && !isAuthenticated) return false;
-    return true;
-  });
+  return items
+    .filter((item) => {
+      // Hidden items never show in nav
+      if (item.visible === false) return false;
+      // onlyPublic items hide when authenticated
+      if (item.onlyPublic && isAuthenticated) return false;
+      // Protected items hide when not authenticated
+      if (item.protected && !isAuthenticated) return false;
+      return true;
+    })
+    .map((item) => {
+      // Recursively filter children if they exist
+      if (item.children) {
+        return {
+          ...item,
+          children: getVisibleNavItems(item.children, isAuthenticated),
+        };
+      }
+      return item;
+    });
 }
 
 export const NAV_ITEMS: NavItem[] = [
@@ -35,8 +46,8 @@ export const NAV_ITEMS: NavItem[] = [
   { label: "h2h", href: "/h2h", public: true },
 
   // Protected — grouped for cleaner nav
-  { label: "dashboard", href: "/dashboard", protected: true },
-  { label: "predictions", href: "/predictions", protected: true },
+  { label: "dashboard", href: "/dashboard", protected: true, visible: false },
+  { label: "predictions", href: "/predictions", protected: true, visible: false },
 
   // Coupon dropdown group
   {
@@ -45,7 +56,7 @@ export const NAV_ITEMS: NavItem[] = [
     protected: true,
     children: [
       { label: "coupon-builder", href: "/coupon-builder", protected: true },
-      { label: "coupon-history", href: "/coupon-history", protected: true },
+      { label: "coupon-history", href: "/coupon-history", protected: true, visible: false },
     ],
   },
 
@@ -54,9 +65,10 @@ export const NAV_ITEMS: NavItem[] = [
     label: "tools",
     href: "/analysis",
     protected: true,
+    visible: false,
     children: [
-      { label: "analysis", href: "/analysis", protected: true },
-      { label: "spor-toto", href: "/spor-toto", protected: true },
+      { label: "analysis", href: "/analysis", protected: true, visible: false },
+      { label: "spor-toto", href: "/spor-toto", protected: true, visible: false },
     ],
   },