Otimiza landing para conversao: pagina enxuta + video repaginado

- Remove secoes Problem, Benefits e CTA final (de 11 para 8 secoes)
- Nova ordem: Hero > BeforeAfter > Video > Gallery > HowItWorks > Depoimentos > Offer > FAQ
- VideoDemonstration repaginado: fundo dark, barra estilo browser, glow ring animado e stats sociais
- HowItWorks esclarece que a criacao e feita na plataforma (nao automatica por email)
- FAQ ganha pergunta destacada sobre receber imagens no email

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/FAQ.tsx

@@ -7,6 +7,10 @@ export default function FAQ() {
   const [openIndex, setOpenIndex] = useState<number | null>(0);
 
   const faqs = [
+    {
+      q: "Vou receber as imagens prontas no e-mail?",
+      a: "Não automaticamente — você mesmo cria as artes na nossa plataforma online! Após o pagamento, você recebe um link no e-mail para acessar o painel de criação. Lá você envia a foto do seu filho, escolhe os itens e nossa IA gera cada arte em 2 a 5 minutos. Você baixa tudo diretamente da plataforma. É super simples e intuitivo!"
+    },
     {
       q: "Como funciona a geração da arte em IA?",
       a: "Após a compra, você receberá acesso a um painel onde enviará 1 foto do corpo inteiro da criança (de preferência de frente) e escolherá o tema. A primeira foto gerada é por nossa conta e não gasta seus créditos! A nossa Inteligência Artificial vai fundir o rostinho da criança com o tema selecionado perfeitamente em estilo Pixar/Disney 3D e gerar todos os arquivos de papelaria."

src/components/HowItWorks.tsx

@@ -5,20 +5,20 @@ export default function HowItWorks() {
   const steps = [
     {
       number: "01",
-      title: "Adquira seus Créditos",
+      title: "Compre e Acesse a Plataforma",
-      description: "Comece escolhendo um pacote. Você recebe créditos na hora para gerar suas imagens.",
+      description: "Após o pagamento, você recebe um link no e-mail para acessar nossa plataforma de criação. É lá que a mágica acontece — tudo online, sem instalar nada.",
       image: "https://festamagicaia.com.br/images/before-after.png"
     },
     {
       number: "02",
-      title: "A IA Cria a Mágica",
+      title: "Crie seu Personagem com IA",
-      description: "Envie a foto da criança e para cada crédito, gere um item incrível com o personagem 3D perfeito nível cinema.",
+      description: "Dentro da plataforma, envie a foto da criança, escolha o item e clique em gerar. Nossa IA cria o personagem 3D exclusivo em 2 a 5 minutos.",
       image: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/convite-digital.webp"
     },
     {
       number: "03",
-      title: "Só Imprimir e Decorar",
+      title: "Baixe, Imprima e Decore",
-      description: "Enviamos o arquivo final em PDF pronto para levar pra gráfica ou imprimir em casa. Super fácil!",
+      description: "Baixe o PDF direto da plataforma, pronto na medida certa. Leva pra gráfica ou imprime em casa. A festa mais linda que ele já teve!",
       image: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp"
     }
   ];

src/components/VideoDemonstration.tsx

@@ -1,53 +1,118 @@
 import { motion } from 'framer-motion';
+import { Sparkles, Star, Users, ImageIcon, Clock } from 'lucide-react';
 import InlineCTA from './InlineCTA';
 
+const stats = [
+  { icon: <Users className="w-5 h-5 text-pink-400" />, value: "+10.000", label: "famílias atendidas" },
+  { icon: <ImageIcon className="w-5 h-5 text-violet-400" />, value: "+180.000", label: "artes geradas" },
+  { icon: <Star className="w-5 h-5 text-amber-400" />, value: "4.9★", label: "avaliação média" },
+  { icon: <Clock className="w-5 h-5 text-emerald-400" />, value: "2~5 min", label: "por arte gerada" },
+];
+
 export default function VideoDemonstration() {
   return (
-    <section className="py-24 bg-white relative overflow-hidden" id="video">
+    <section className="py-24 bg-indigo-950 relative overflow-hidden" id="video">
-      {/* Decorative Elements */}
+      {/* Background glow */}
-      <div className="absolute top-0 right-0 w-96 h-96 bg-pink-300 blur-[100px] rounded-full mix-blend-multiply opacity-20 -z-10 pointer-events-none translate-x-1/2 -translate-y-1/2" />
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] bg-pink-600/10 blur-[120px] rounded-full pointer-events-none" />
-      <div className="absolute bottom-0 left-0 w-96 h-96 bg-violet-300 blur-[100px] rounded-full mix-blend-multiply opacity-20 -z-10 pointer-events-none -translate-x-1/2 translate-y-1/2" />
+      <div className="absolute top-0 right-0 w-96 h-96 bg-violet-600/10 blur-[100px] rounded-full pointer-events-none" />
 
-      <div className="container mx-auto px-6 max-w-4xl">
+      <div className="container mx-auto px-6 max-w-5xl relative z-10">
-        <div className="text-center mb-12">
+
-          <motion.h2 
+        {/* Header */}
-            initial={{ opacity: 0, y: 20 }}
+        <div className="text-center mb-14">
+          <motion.div
+            initial={{ opacity: 0, y: 16 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
-            className="text-3xl md:text-5xl font-display font-bold mb-6 tracking-tight text-indigo-950"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-pink-500/30 bg-pink-500/10 mb-6 text-pink-300"
           >
-            Veja como é Fácil Criar a <span className="text-gradient">Festa dos Sonhos</span>
+            <Sparkles className="w-4 h-4 text-amber-400 animate-pulse" />
+            <span className="text-sm font-bold uppercase tracking-wider">Veja ao vivo</span>
+          </motion.div>
+
+          <motion.h2
+            initial={{ opacity: 0, y: 16 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.05 }}
+            className="text-3xl md:text-5xl font-display font-bold mb-5 tracking-tight text-white"
+          >
+            Da foto ao kit de festa<br className="hidden md:block" />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-violet-400"> em menos de 5 minutos.</span>
           </motion.h2>
+
           <motion.p
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 16 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: 0.1 }}
-            className="text-lg text-indigo-800/80 max-w-2xl mx-auto font-medium"
+            className="text-lg text-indigo-200/80 max-w-xl mx-auto font-medium"
           >
-            Nossa Inteligência Artificial cuida de tudo. Dê o play e veja a Mágica acontecer na prática!
+            Veja como é simples usar a plataforma — do upload da foto até o PDF pronto para imprimir.
           </motion.p>
         </div>
 
+        {/* Video */}
         <motion.div
-          initial={{ opacity: 0, scale: 0.95 }}
+          initial={{ opacity: 0, scale: 0.97 }}
           whileInView={{ opacity: 1, scale: 1 }}
           viewport={{ once: true }}
           transition={{ duration: 0.6 }}
-          className="relative rounded-[2rem] overflow-hidden border-8 border-pink-100 shadow-[0_20px_50px_-20px_rgba(236,72,153,0.3)] bg-indigo-950"
+          className="relative group"
         >
-          <video 
+          {/* Glow ring */}
-            src="https://s3.seureview.com.br/festamagica/0510(2).mp4"
+          <div className="absolute -inset-1 bg-gradient-to-r from-pink-500 via-violet-500 to-pink-500 rounded-[2.2rem] blur-md opacity-40 group-hover:opacity-60 transition-opacity duration-500" />
-            className="w-full h-auto object-cover"
+
-            controls
+          <div className="relative rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl bg-indigo-950">
-            preload="metadata"
+            {/* Barra superior estilo browser */}
-            playsInline
+            <div className="flex items-center gap-2 px-5 py-3 bg-white/5 border-b border-white/10">
-          />
+              <div className="flex gap-1.5">
+                <div className="w-3 h-3 rounded-full bg-red-500/70" />
+                <div className="w-3 h-3 rounded-full bg-yellow-500/70" />
+                <div className="w-3 h-3 rounded-full bg-emerald-500/70" />
+              </div>
+              <div className="flex-1 mx-4 h-6 rounded-full bg-white/10 flex items-center px-4">
+                <span className="text-white/40 text-xs font-medium">festamagicaia.com.br/criar</span>
+              </div>
+              <div className="flex items-center gap-1.5 text-[10px] font-bold text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 rounded-full">
+                <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+                AO VIVO
+              </div>
+            </div>
+
+            <video
+              src="https://s3.seureview.com.br/festamagica/0510(2).mp4"
+              className="w-full h-auto object-cover"
+              controls
+              preload="metadata"
+              playsInline
+              poster="/images/antes-depois/miguel-avatar.webp"
+            />
+          </div>
+        </motion.div>
+
+        {/* Stats */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ delay: 0.2 }}
+          className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-10"
+        >
+          {stats.map((s, i) => (
+            <div key={i} className="flex flex-col items-center gap-2 bg-white/5 border border-white/10 rounded-2xl py-5 px-4 hover:bg-white/10 transition-colors">
+              <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center">
+                {s.icon}
+              </div>
+              <span className="text-2xl font-display font-black text-white">{s.value}</span>
+              <span className="text-xs font-semibold text-indigo-300 text-center">{s.label}</span>
+            </div>
+          ))}
         </motion.div>
 
         <InlineCTA
           text="Sim, Eu Quero Isso na Festa do Meu Filho!"
-          subtext="Clica aqui e comece a criar agora mesmo"
+          subtext="Acesso imediato após o pagamento"
         />
       </div>
     </section>

src/pages/LandingPage.tsx

@@ -4,15 +4,12 @@ import Navbar from '../components/Navbar';
 import Hero from '../components/Hero';
 import BeforeAfter from '../components/BeforeAfter';
 import VideoDemonstration from '../components/VideoDemonstration';
-import Problem from '../components/Problem';
-import HowItWorks from '../components/HowItWorks';
-import Benefits from '../components/Benefits';
 import Gallery from '../components/Gallery';
+import HowItWorks from '../components/HowItWorks';
+import Results from '../components/Results';
 import Offer from '../components/Offer';
 import FAQ from '../components/FAQ';
-import CTA from '../components/CTA';
 import Footer from '../components/Footer';
-import Results from '../components/Results';
 import StickyMobileCTA from '../components/StickyMobileCTA';
 import { useUTMForwarder } from '../hooks/useUTMForwarder';
 
@@ -24,11 +21,9 @@ export default function LandingPage() {
     restDelta: 0.001
   });
 
-  // Ativa o repasse automático de UTMs para links de checkout
   useUTMForwarder();
 
   useEffect(() => {
-    // Fire ViewContent parameter for Meta Pixel
     if (typeof window !== 'undefined' && 'fbq' in window) {
       (window as any).fbq('track', 'ViewContent');
     }
@@ -45,14 +40,11 @@ export default function LandingPage() {
         <Hero />
         <BeforeAfter />
         <VideoDemonstration />
-        <Problem />
-        <HowItWorks />
-        <Benefits />
         <Gallery />
+        <HowItWorks />
         <Results />
         <Offer />
         <FAQ />
-        <CTA />
       </main>
       <Footer />
       <StickyMobileCTA />