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.

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: "/sobre", label: t("about") },
-    { href: "/precos", label: t("prices") },
+    { href: `/${locale}/market`, label: t("market") },
+    { href: `/${locale}/sobre`, label: t("about") },
+    { 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} 
+        <AreaChart
+          data={chartData}
           margin={{ top: 2, right: 2, left: 2, bottom: 2 }}
-          width={120}
-          height={32}
+          width={150}
+          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>
+  );
+}