From d31795de59b9e57bb122b3f44a982380c51a8082 Mon Sep 17 00:00:00 2001
From: AI Studio Assistant <macrolojauk@gmail.com>
Date: Sat, 9 May 2026 16:14:34 +0000
Subject: [PATCH] feat: atualiza texto e adiciona cards de instrucao na pagina
 de sucesso

---
 src/pages/SuccessPage.tsx | 43 +++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/pages/SuccessPage.tsx b/src/pages/SuccessPage.tsx
index e782ca0..5bbf9ef 100644
--- a/src/pages/SuccessPage.tsx
+++ b/src/pages/SuccessPage.tsx
@@ -1,21 +1,52 @@
-import { CheckCircle } from "lucide-react";
+import { CheckCircle, Mail, LayoutDashboard, Sparkles } from "lucide-react";
 import Footer from "../components/Footer";
 
 export default function SuccessPage() {
   return (
     <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">
-        <div className="max-w-4xl mx-auto space-y-12">
+      <main className="flex-1 py-12 px-4 md:px-6 flex items-center justify-center">
+        <div className="max-w-5xl mx-auto w-full">
           {/* Success Banner */}
           <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" />
             <h1 className="text-3xl md:text-5xl font-display font-bold text-indigo-950 mb-4">
               Pagamento Confirmado!
             </h1>
-            <p className="text-lg text-indigo-600 md:text-xl max-w-2xl mx-auto">
-              Seu acesso à plataforma Festa Mágica IA foi enviado para o seu e-mail. 
-              Você já pode começar a criar o seu kit exclusivo!
+            <p className="text-lg text-indigo-600 md:text-xl max-w-2xl mx-auto mb-12">
+              Tudo certo com o seu pedido! Preparamos tudo para você começar a criar a festa dos sonhos em instantes.
             </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>
         </div>
       </main>