feat(i18n): enhance locale support and add under-construction messages

- Updated Header.tsx to use current locale in navigation links for proper routing
- Increased MiniSparkline chart dimensions in market-stats.tsx for better visibility
- Added under-construction translations for market, about, and prices pages in en.json and pt.json
- Minor formatting adjustments with added blank lines across multiple components

These changes improve internationalization and user experience by ensuring locale-aware navigation and providing informative placeholders for upcoming features.

app/[locale]/layout.tsx

@@ -46,3 +46,7 @@ export default async function LocaleLayout({
   );
 }
 
+
+
+
+

app/[locale]/market/page.tsx

@@ -0,0 +1,39 @@
+import Header from "@/components/Header";
+import { UnderConstruction } from "@/components/under-construction";
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "underConstruction" });
+  return {
+    title: t("market.title"),
+    description: t("market.description"),
+  };
+}
+
+export default async function MarketPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({
+    locale,
+    namespace: "underConstruction.market",
+  });
+
+  return (
+    <div className="min-h-screen">
+      <Header />
+      <UnderConstruction
+        title={t("title")}
+        description={t("description")}
+        locale={locale}
+      />
+    </div>
+  );
+}

app/[locale]/precos/page.tsx

@@ -0,0 +1,39 @@
+import Header from "@/components/Header";
+import { UnderConstruction } from "@/components/under-construction";
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "underConstruction" });
+  return {
+    title: t("prices.title"),
+    description: t("prices.description"),
+  };
+}
+
+export default async function PricesPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({
+    locale,
+    namespace: "underConstruction.prices",
+  });
+
+  return (
+    <div className="min-h-screen">
+      <Header />
+      <UnderConstruction
+        title={t("title")}
+        description={t("description")}
+        locale={locale}
+      />
+    </div>
+  );
+}

app/[locale]/sobre/page.tsx

@@ -0,0 +1,39 @@
+import Header from "@/components/Header";
+import { UnderConstruction } from "@/components/under-construction";
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "underConstruction" });
+  return {
+    title: t("about.title"),
+    description: t("about.description"),
+  };
+}
+
+export default async function AboutPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({
+    locale,
+    namespace: "underConstruction.about",
+  });
+
+  return (
+    <div className="min-h-screen">
+      <Header />
+      <UnderConstruction
+        title={t("title")}
+        description={t("description")}
+        locale={locale}
+      />
+    </div>
+  );
+}

components/Header.tsx

@@ -12,16 +12,17 @@ import { ThemeToggle } from "./theme-toggle";
 import { LanguageSwitcher } from "./language-switcher";
 import { MobileMenu } from "./mobile-menu";
 import { cn } from "@/lib/utils";
-import { useTranslations } from "next-intl";
+import { useTranslations, useLocale } from "next-intl";
 import Link from "next/link";
 
 export default function Header() {
   const t = useTranslations("header.nav");
+  const locale = useLocale();
 
   const links = [
-    { href: "/market", label: t("market") },
+    { href: `/${locale}/market`, label: t("market") },
-    { href: "/sobre", label: t("about") },
+    { href: `/${locale}/sobre`, label: t("about") },
-    { href: "/precos", label: t("prices") },
+    { href: `/${locale}/precos`, label: t("prices") },
   ];
 
   return (

components/language-switcher.tsx

@@ -56,3 +56,7 @@ export function LanguageSwitcher() {
   );
 }
 
+
+
+
+

components/marketplace-filters.tsx

@@ -290,3 +290,7 @@ export function MarketplaceFilters({
   );
 }
 
+
+
+
+

components/mobile-menu.tsx

@@ -62,3 +62,7 @@ export function MobileMenu({ links }: MobileMenuProps) {
   );
 }
 
+
+
+
+

components/sections/market-stats.tsx

@@ -35,13 +35,13 @@ function MiniSparkline({ data, color }: { data: number[]; color: string }) {
   }));
 
   return (
-    <div className="h-8 w-full min-h-[32px] min-w-[120px]">
+    <div className="h-12 w-full min-h-[48px] min-w-[150px]">
       <ResponsiveContainer width="100%" height="100%">
         <AreaChart
           data={chartData}
           margin={{ top: 2, right: 2, left: 2, bottom: 2 }}
-          width={120}
+          width={150}
-          height={32}
+          height={48}
         >
           <defs>
             <linearGradient

components/theme-toggle.tsx

@@ -42,3 +42,7 @@ export function ThemeToggle() {
   );
 }
 
+
+
+
+

components/ui/skeleton.tsx

@@ -14,3 +14,7 @@ function Skeleton({
 
 export { Skeleton };
 
+
+
+
+

components/under-construction.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Construction, Home, ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { BlurFade } from "@/components/ui/blur-fade";
+import { DotPattern } from "@/components/ui/dot-pattern";
+import { cn } from "@/lib/utils";
+
+interface UnderConstructionProps {
+  title: string;
+  description: string;
+  locale?: string;
+}
+
+export function UnderConstruction({
+  title,
+  description,
+  locale = "pt",
+}: UnderConstructionProps) {
+  return (
+    <div className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      {/* Background Pattern */}
+      <DotPattern
+        className={cn(
+          "absolute inset-0 h-full w-full text-muted-foreground/20"
+        )}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 container max-w-2xl mx-auto px-4">
+        <BlurFade delay={0.1}>
+          <div className="p-12 rounded-3xl border border-border/50 bg-card/80 backdrop-blur-xl shadow-2xl">
+            {/* Icon */}
+            <div className="flex justify-center mb-8">
+              <div className="p-6 rounded-full bg-muted/50 border border-border/30">
+                <Construction className="w-16 h-16 text-primary animate-pulse" />
+              </div>
+            </div>
+
+            {/* Text */}
+            <h1 className="text-4xl md:text-5xl font-bold text-center mb-4">
+              {title}
+            </h1>
+            <p className="text-xl text-center text-muted-foreground mb-8">
+              {description}
+            </p>
+
+            {/* Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link href={`/${locale}`}>
+                <Button size="lg" className="w-full sm:w-auto">
+                  <Home className="mr-2 h-5 w-5" />
+                  Voltar para Início
+                </Button>
+              </Link>
+              <Button
+                size="lg"
+                variant="outline"
+                className="w-full sm:w-auto"
+                onClick={() => window.history.back()}
+              >
+                <ArrowLeft className="mr-2 h-5 w-5" />
+                Voltar
+              </Button>
+            </div>
+          </div>
+        </BlurFade>
+      </div>
+    </div>
+  );
+}

i18n/request.ts

@@ -12,3 +12,7 @@ export default getRequestConfig(async ({ requestLocale }) => {
   };
 });
 
+
+
+
+

i18n/routing.ts

@@ -5,3 +5,7 @@ export const routing = defineRouting({
   defaultLocale: "pt",
 });
 
+
+
+
+

messages/en.json

@@ -173,5 +173,19 @@
       "viewDetails": "View Details",
       "buyNow": "Buy Now"
     }
+  },
+  "underConstruction": {
+    "market": {
+      "title": "Market Page Under Construction",
+      "description": "We're preparing an amazing experience for you to explore all available items. Coming soon!"
+    },
+    "about": {
+      "title": "About Page Under Construction",
+      "description": "Soon you'll learn all about Tibia Trade Pagodera's story and mission. Stay tuned!"
+    },
+    "prices": {
+      "title": "Prices Page Under Construction",
+      "description": "We're finalizing our pricing structure and plans. Check back soon!"
+    }
   }
 }

messages/pt.json

@@ -173,5 +173,19 @@
       "viewDetails": "Ver Detalhes",
       "buyNow": "Comprar Agora"
     }
+  },
+  "underConstruction": {
+    "market": {
+      "title": "Página do Mercado em Construção",
+      "description": "Estamos preparando uma experiência incrível para você explorar todos os itens disponíveis. Em breve!"
+    },
+    "about": {
+      "title": "Página Sobre em Construção",
+      "description": "Em breve você conhecerá toda a história e missão do Tibia Trade Pagodera. Aguarde!"
+    },
+    "prices": {
+      "title": "Página de Preços em Construção",
+      "description": "Estamos finalizando nossa estrutura de preços e planos. Volte em breve para conferir!"
+    }
   }
 }