121 lines
4.2 KiB
TypeScript
121 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import confetti from "canvas-confetti";
|
|
import { Heart, Home, Share2 } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import { useEffect } from "react";
|
|
import Header from "@/components/Header";
|
|
import { BlurFade } from "@/components/ui/blur-fade";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export default function ThankYouPage() {
|
|
const params = useParams();
|
|
const locale = params.locale as string;
|
|
|
|
// Confetti ao carregar página
|
|
useEffect(() => {
|
|
confetti({
|
|
particleCount: 100,
|
|
spread: 70,
|
|
origin: { y: 0.6 },
|
|
});
|
|
}, []);
|
|
|
|
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 sucesso animado */}
|
|
<div className="flex justify-center mb-8">
|
|
<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">
|
|
Muito Obrigado! 🎉
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground mb-8">
|
|
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">
|
|
Sua generosidade nos ajuda a continuar desenvolvendo e mantendo
|
|
o Tibia Trade. Cada contribuição faz toda a diferença para nossa
|
|
comunidade!
|
|
</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" />
|
|
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="secondary"
|
|
className="w-full sm:w-auto"
|
|
onClick={() => {
|
|
if (typeof navigator !== "undefined" && navigator.share) {
|
|
navigator.share({
|
|
title: "Tibia Trade",
|
|
text: "Acabei de fazer uma doação para o Tibia Trade! Ajude também!",
|
|
url: window.location.origin,
|
|
});
|
|
} 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" />
|
|
Compartilhar
|
|
</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, mais forte
|
|
nossa comunidade fica.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</BlurFade>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|