feat: add donation support with footer card and navigation

Add donation functionality to encourage community support, including a footer card on the home page, a highlighted "Apoiar" link in the header, and comprehensive English messages for the donation section to promote transparency and user engagement.

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

@@ -0,0 +1,101 @@
+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 async function ThankYouPage({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "donation.thankYou" });
+
+  return (
+    <div className="min-h-screen">
+      <Header />
+
+      <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 */}
+            <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>
+            </div>
+
+            {/* Título e subtítulo */}
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">
+              {t("title")}
+            </h1>
+            <p className="text-xl text-muted-foreground mb-8">
+              {t("subtitle")}
+            </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")}
+              </p>
+            </div>
+
+            {/* Botões de ação */}
+            <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" />
+                  {t("back")}
+                </Button>
+              </Link>
+
+              <Button
+                size="lg"
+                variant="outline"
+                className="w-full sm:w-auto"
+                onClick={() => {
+                  if (navigator.share) {
+                    navigator.share({
+                      title: "Tibia Trade Pagodera",
+                      text: "Conheça o marketplace mais seguro para negociar itens no servidor Pagodera!",
+                      url: window.location.origin,
+                    });
+                  } else {
+                    // Fallback para copiar link
+                    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")}
+              </Button>
+            </div>
+
+            {/* Informação adicional */}
+            <div className="mt-12 p-6 rounded-xl bg-muted/30 border border-border/30">
+              <p className="text-sm text-muted-foreground">
+                💡 <strong>Dica:</strong> Compartilhe nossa plataforma com seus
+                amigos! Quanto mais pessoas usarem o Tibia Trade Pagodera, mais
+                forte nossa comunidade fica.
+              </p>
+            </div>
+          </div>
+        </BlurFade>
+      </div>
+    </div>
+  );
+}

app/[locale]/apoiar/page.tsx

@@ -0,0 +1,286 @@
+import Header from "@/components/Header";
+import { DonationCard } from "@/components/donation-card";
+import { BlurFade } from "@/components/ui/blur-fade";
+import { NumberTicker } from "@/components/ui/number-ticker";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Heart, Server, Code, Shield, AlertTriangle } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+import Link from "next/link";
+import { ShareButton } from "@/components/share-button";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "donation" });
+  return {
+    title: t("title"),
+    description: t("subtitle"),
+  };
+}
+
+export default async function SupportPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "donation" });
+
+  // Dados mockados para demonstração
+  const stats = {
+    totalSupporters: 1247,
+    totalRaised: 18542,
+    monthsOnline: 12,
+    uptime: 99.8,
+  };
+
+  const transparencyData = [
+    {
+      icon: Server,
+      title: t("transparency.hosting"),
+      percentage: 40,
+      description: t("transparency.hostingDesc"),
+      color: "text-blue-500",
+    },
+    {
+      icon: Code,
+      title: t("transparency.development"),
+      percentage: 35,
+      description: t("transparency.developmentDesc"),
+      color: "text-green-500",
+    },
+    {
+      icon: Shield,
+      title: t("transparency.support"),
+      percentage: 15,
+      description: t("transparency.supportDesc"),
+      color: "text-purple-500",
+    },
+    {
+      icon: AlertTriangle,
+      title: t("transparency.emergency"),
+      percentage: 10,
+      description: t("transparency.emergencyDesc"),
+      color: "text-orange-500",
+    },
+  ];
+
+  const faqItems = [
+    {
+      question: t("faq.q1"),
+      answer: t("faq.a1"),
+    },
+    {
+      question: t("faq.q2"),
+      answer: t("faq.a2"),
+    },
+    {
+      question: t("faq.q3"),
+      answer: t("faq.a3"),
+    },
+    {
+      question: t("faq.q4"),
+      answer: t("faq.a4"),
+    },
+    {
+      question: t("faq.q5"),
+      answer: t("faq.a5"),
+    },
+  ];
+
+  return (
+    <div className="min-h-screen">
+      <Header />
+
+      <div className="container mx-auto px-4 py-20">
+        {/* Hero Section */}
+        <BlurFade delay={0.1}>
+          <div className="text-center mb-16">
+            <div className="flex justify-center mb-6">
+              <div className="p-4 rounded-full bg-primary/10 border border-primary/20">
+                <Heart className="w-12 h-12 text-primary" />
+              </div>
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">
+              {t("title")}
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              {t("subtitle")}
+            </p>
+          </div>
+        </BlurFade>
+
+        {/* História & Missão */}
+        <BlurFade delay={0.2}>
+          <div className="mb-20">
+            <h2 className="text-3xl font-bold text-center mb-8">
+              {t("story.title")}
+            </h2>
+            <div className="max-w-4xl mx-auto">
+              <div className="p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg">
+                <p className="text-lg leading-relaxed text-muted-foreground whitespace-pre-line">
+                  {t("story.text")}
+                </p>
+              </div>
+            </div>
+          </div>
+        </BlurFade>
+
+        {/* Transparência */}
+        <BlurFade delay={0.3}>
+          <div className="mb-20">
+            <h2 className="text-3xl font-bold text-center mb-8">
+              {t("transparency.title")}
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+              {transparencyData.map((item, idx) => (
+                <div
+                  key={idx}
+                  className="p-6 rounded-xl border border-border/50 bg-card backdrop-blur-sm"
+                >
+                  <div className="flex items-start gap-4">
+                    <div className="p-3 rounded-lg bg-muted/50">
+                      <item.icon className={`w-6 h-6 ${item.color}`} />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between mb-2">
+                        <h3 className="font-semibold">{item.title}</h3>
+                        <Badge variant="secondary">{item.percentage}%</Badge>
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        {item.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </BlurFade>
+
+        {/* Prova Social */}
+        <BlurFade delay={0.4}>
+          <div className="mb-20">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+              <div>
+                <p className="text-3xl font-bold text-primary mb-2">
+                  <NumberTicker value={stats.totalSupporters} />
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {t("social.supporters")}
+                </p>
+              </div>
+              <div>
+                <p className="text-3xl font-bold text-primary mb-2">
+                  R$ <NumberTicker value={stats.totalRaised} />
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {t("social.raised")}
+                </p>
+              </div>
+              <div>
+                <p className="text-3xl font-bold text-primary mb-2">
+                  <NumberTicker value={stats.monthsOnline} />
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {t("social.months")}
+                </p>
+              </div>
+              <div>
+                <p className="text-3xl font-bold text-primary mb-2">
+                  <NumberTicker value={stats.uptime} />%
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {t("social.uptime")}
+                </p>
+              </div>
+            </div>
+          </div>
+        </BlurFade>
+
+        {/* Opções de Doação */}
+        <BlurFade delay={0.5}>
+          <div className="mb-20">
+            <h2 className="text-3xl font-bold text-center mb-8">
+              Escolha como apoiar
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+              <DonationCard
+                id="coffee"
+                amount={5}
+                title={t("tiers.coffee.title")}
+                description={t("tiers.coffee.description")}
+                icon="coffee"
+                badge={t("tiers.coffee.badge")}
+              />
+              <DonationCard
+                id="lunch"
+                amount={25}
+                title={t("tiers.lunch.title")}
+                description={t("tiers.lunch.description")}
+                icon="pizza"
+                badge={t("tiers.lunch.badge")}
+                highlighted
+              />
+              <DonationCard
+                id="custom"
+                title={t("tiers.custom.title")}
+                description={t("tiers.custom.description")}
+                icon="heart"
+              />
+            </div>
+          </div>
+        </BlurFade>
+
+        {/* FAQ */}
+        <BlurFade delay={0.6}>
+          <div className="mb-20">
+            <h2 className="text-3xl font-bold text-center mb-8">
+              {t("faq.title")}
+            </h2>
+            <Accordion type="single" collapsible className="max-w-3xl mx-auto">
+              {faqItems.map((item, idx) => (
+                <AccordionItem key={idx} value={`item-${idx}`}>
+                  <AccordionTrigger className="text-left">
+                    {item.question}
+                  </AccordionTrigger>
+                  <AccordionContent className="text-muted-foreground">
+                    {item.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+        </BlurFade>
+
+        {/* CTA Final */}
+        <BlurFade delay={0.7}>
+          <div className="text-center">
+            <div className="p-12 rounded-2xl border border-border/50 bg-card backdrop-blur-sm">
+              <h3 className="text-3xl font-bold mb-4">{t("cta.final")}</h3>
+              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+                {t("cta.subtitle")}
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Button size="lg" className="bg-primary hover:bg-primary/90">
+                  {t("cta.support")}
+                </Button>
+                <ShareButton />
+              </div>
+            </div>
+          </div>
+        </BlurFade>
+      </div>
+    </div>
+  );
+}

app/[locale]/page.tsx

@@ -6,6 +6,7 @@ import { HowItWorks } from "@/components/sections/how-it-works";
 import { FeaturedItems } from "@/components/sections/featured-items";
 import { MarketOffers } from "@/components/sections/market-offers";
 import { MarketStats } from "@/components/sections/market-stats";
+import { DonationFooterCard } from "@/components/donation-footer-card";
 
 export default function Home() {
   return (
@@ -20,6 +21,13 @@ export default function Home() {
         <MarketStats />
       </main>
       <EscrowExplanation />
+
+      {/* Card de Doação no Footer */}
+      <section className="py-16 bg-muted/20">
+        <div className="container mx-auto px-4">
+          <DonationFooterCard />
+        </div>
+      </section>
     </div>
   );
 }