marciobever/festa-magica-ia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: atualiza texto e adiciona cards de instrucao na pagina de sucesso

Browse source
This commit is contained in:
AI Studio Assistant 2026-05-09 16:14:34 +00:00
parent e5f23389c4
commit d31795de59
1 changed files with 37 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/pages/SuccessPage.tsx
View file

@ -1,21 +1,52 @@
import { CheckCircle } from "lucide-react"; import { CheckCircle, Mail, LayoutDashboard, Sparkles } from "lucide-react";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
export default function SuccessPage() { export default function SuccessPage() {
return ( return (
<div className="min-h-screen bg-pink-50 text-indigo-900 selection:bg-pink-300 font-sans flex flex-col"> <div className="min-h-screen bg-pink-50 text-indigo-900 selection:bg-pink-300 font-sans flex flex-col">
<main className="flex-1 py-12 px-4 md:px-6"> <main className="flex-1 py-12 px-4 md:px-6 flex items-center justify-center">
<div className="max-w-4xl mx-auto space-y-12"> <div className="max-w-5xl mx-auto w-full">
{/* Success Banner */} {/* Success Banner */}
<section className="text-center bg-white rounded-3xl p-8 md:p-12 shadow-xl border border-pink-100"> <section className="text-center bg-white rounded-3xl p-8 md:p-12 shadow-xl border border-pink-100">
<CheckCircle className="w-20 h-20 text-emerald-500 mx-auto mb-6" /> <CheckCircle className="w-20 h-20 text-emerald-500 mx-auto mb-6" />
<h1 className="text-3xl md:text-5xl font-display font-bold text-indigo-950 mb-4"> <h1 className="text-3xl md:text-5xl font-display font-bold text-indigo-950 mb-4">
Pagamento Confirmado! Pagamento Confirmado!
</h1> </h1>
<p className="text-lg text-indigo-600 md:text-xl max-w-2xl mx-auto"> <p className="text-lg text-indigo-600 md:text-xl max-w-2xl mx-auto mb-12">
Seu acesso à plataforma Festa Mágica IA foi enviado para o seu e-mail. Tudo certo com o seu pedido! Preparamos tudo para você começar a criar a festa dos sonhos em instantes.
Você já pode começar a criar o seu kit exclusivo!
</p> </p>
<div className="grid md:grid-cols-3 gap-6 text-left max-w-4xl mx-auto">
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-pink-500 mb-4">
<Mail className="w-6 h-6" />
</div>
<h3 className="font-bold text-indigo-950 text-lg mb-2">1. Fique de olho no e-mail</h3>
<p className="text-indigo-700/80 text-sm leading-relaxed">
Em até 5 minutos, você receberá um e-mail de confirmação com a nota do seu pedido e todos os detalhes.
</p>
</div>
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-violet-500 mb-4">
<LayoutDashboard className="w-6 h-6" />
</div>
<h3 className="font-bold text-indigo-950 text-lg mb-2">2. Acesse o Painel</h3>
<p className="text-indigo-700/80 text-sm leading-relaxed">
No mesmo e-mail, enviaremos um <strong>link de acesso exclusivo</strong> direto para o nosso Painel de Criação Mágica. Não se preocupe em criar conta!
</p>
</div>
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-amber-500 mb-4">
<Sparkles className="w-6 h-6" />
</div>
<h3 className="font-bold text-indigo-950 text-lg mb-2">3. Crie a Magia</h3>
<p className="text-indigo-700/80 text-sm leading-relaxed">
Dentro do painel, siga as instruções rápidas, faça o upload da foto e deixe a inteligência artificial transformar tudo em um kit inesquecível!
</p>
</div>
</div>
</section> </section>
</div> </div>
</main> </main>