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.
2025-10-26 18:14:53 -03:00
1 parent b5093cb49a
commit 01e97eb078
@@ -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>
+  );
+}