feat(thank-you-page): convert to client component with confetti and UI enhancements

- Changed from server to client component to enable interactive features like confetti animation
- Removed server-side translations and hardcoded Portuguese text for simplicity
- Added confetti effect on page load and improved success icon with animations
- Updated buttons and share functionality for better user experience
- This enhances the donation thank you page with celebratory elements and client-side interactivity

app/[locale]/apoiar/obrigado/page.tsx

@@ -1,28 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import { useParams } from "next/navigation";
+import confetti from "canvas-confetti";
 import Header from "@/components/Header";
 import { Button } from "@/components/ui/button";
 import { BlurFade } from "@/components/ui/blur-fade";
 import { Heart, Share2, Home } from "lucide-react";
-import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 
-export async function generateMetadata({
-  params: { locale },
-}: {
-  params: { locale: string };
-}) {
-  const t = await getTranslations({ locale, namespace: "donation.thankYou" });
-  return {
-    title: t("title"),
-    description: t("subtitle"),
-  };
-}
+export default function ThankYouPage() {
+  const params = useParams();
+  const locale = params.locale as string;
 
-export default async function ThankYouPage({
-  params: { locale },
-}: {
-  params: { locale: string };
-}) {
-  const t = await getTranslations({ locale, namespace: "donation.thankYou" });
+  // Confetti ao carregar página
+  useEffect(() => {
+    confetti({
+      particleCount: 100,
+      spread: 70,
+      origin: { y: 0.6 },
+    });
+  }, []);
 
   return (
     <div className="min-h-screen">
@@ -31,25 +29,33 @@ export default async function ThankYouPage({
       <div className="container mx-auto px-4 py-20">
         <BlurFade delay={0.1}>
           <div className="max-w-2xl mx-auto text-center">
-            {/* Ícone de coração animado */}
+            {/* Ícone de sucesso animado */}
             <div className="flex justify-center mb-8">
-              <div className="p-6 rounded-full bg-primary/10 border border-primary/20">
-                <Heart className="w-16 h-16 text-primary animate-pulse" />
+              <div className="relative">
+                <div className="absolute inset-0 bg-green-500/20 rounded-full animate-ping" />
+                <div className="relative p-6 rounded-full bg-green-500/10 border-4 border-green-500">
+                  <Heart
+                    className="w-20 h-20 text-green-500"
+                    fill="currentColor"
+                  />
+                </div>
               </div>
             </div>
 
             {/* Título e subtítulo */}
             <h1 className="text-4xl md:text-5xl font-bold mb-4">
-              {t("title")}
+              Muito Obrigado! 🎉
             </h1>
             <p className="text-xl text-muted-foreground mb-8">
-              {t("subtitle")}
+              Sua doação foi confirmada com sucesso!
             </p>
 
             {/* Mensagem de agradecimento */}
             <div className="p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg mb-8">
               <p className="text-lg leading-relaxed text-muted-foreground">
-                {t("message")}
+                Sua generosidade nos ajuda a continuar desenvolvendo e mantendo
+                o Tibia Trade Pagodera. Cada contribuição faz toda a diferença
+                para nossa comunidade!
               </p>
             </div>
 
@@ -58,30 +64,43 @@ export default async function ThankYouPage({
               <Link href={`/${locale}`}>
                 <Button size="lg" className="w-full sm:w-auto">
                   <Home className="mr-2 h-5 w-5" />
-                  {t("back")}
+                  Voltar ao Início
+                </Button>
+              </Link>
+
+              <Link href={`/${locale}/apoiar`}>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                >
+                  <Heart className="mr-2 h-5 w-5" />
+                  Fazer Outra Doação
                 </Button>
               </Link>
 
               <Button
                 size="lg"
-                variant="outline"
+                variant="secondary"
                 className="w-full sm:w-auto"
                 onClick={() => {
-                  if (navigator.share) {
+                  if (typeof navigator !== "undefined" && navigator.share) {
                     navigator.share({
                       title: "Tibia Trade Pagodera",
-                      text: "Conheça o marketplace mais seguro para negociar itens no servidor Pagodera!",
+                      text: "Acabei de fazer uma doação para o Tibia Trade Pagodera! Ajude também!",
                       url: window.location.origin,
                     });
-                  } else {
-                    // Fallback para copiar link
+                  } else if (
+                    typeof navigator !== "undefined" &&
+                    navigator.clipboard
+                  ) {
                     navigator.clipboard.writeText(window.location.origin);
                     alert("Link copiado para a área de transferência!");
                   }
                 }}
               >
                 <Share2 className="mr-2 h-5 w-5" />
-                {t("share")}
+                Compartilhar
               </Button>
             </div>