Marcio Bevervanso
045e84e74c
- Nova landing focada em conversao para o plano Kit Festa (30 imagens HD) - Pagina enxuta: Hero > BeforeAfter > Video > Gallery > HowItWorks > Depoimentos > Offer > FAQ - Offer sem email direto no checkout (plan=popular, R$19,99) - VideoDemonstration repaginado com stats sociais e estilo browser - HowItWorks e FAQ esclarecem que criacao e feita na plataforma - Ancoragem de valor: decoradora R$400+ vs R$19,99 (R$0,67/img, -33%) - Beneficios: 30 imagens HD, download em lote, valido 60 dias, suporte prioritario Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
69 lines
3.3 KiB
TypeScript
69 lines
3.3 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import InlineCTA from './InlineCTA';
|
|
|
|
export default function HowItWorks() {
|
|
const steps = [
|
|
{
|
|
number: "01",
|
|
title: "Compre e Acesse a Plataforma",
|
|
description: "Após o pagamento, você recebe um link no e-mail para acessar nossa plataforma de criação. Tudo online, sem instalar nada, acesso imediato.",
|
|
image: "https://festamagicaia.com.br/images/before-after.png"
|
|
},
|
|
{
|
|
number: "02",
|
|
title: "Crie suas 30 Artes com IA",
|
|
description: "Dentro da plataforma, envie a foto do seu filho, escolha o item e clique em gerar. Nossa IA cria o personagem 3D exclusivo em 2 a 5 minutos — você repete para cada arte que quiser.",
|
|
image: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/convite-digital.webp"
|
|
},
|
|
{
|
|
number: "03",
|
|
title: "Baixe em Lote e Imprima",
|
|
description: "Baixe todas as artes de uma vez em HD direto da plataforma. 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"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-24 bg-indigo-950 border-y border-white/10" id="como-funciona">
|
|
<div className="container mx-auto px-6 max-w-7xl">
|
|
<div className="text-center mb-20">
|
|
<h2 className="text-3xl md:text-5xl font-display font-bold mb-6 tracking-tight text-white">
|
|
Como a <span className="text-pink-500">Mágica</span> Acontece
|
|
</h2>
|
|
<p className="text-lg text-indigo-200 max-w-2xl mx-auto font-medium">
|
|
Em apenas 3 passos simples, você terá 30 artes exclusivas prontas para a festa dos sonhos!
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8 relative z-10">
|
|
{steps.map((step, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: i * 0.2 }}
|
|
className="flex flex-col items-center text-center group"
|
|
>
|
|
<div className="w-full h-64 md:h-72 rounded-3xl overflow-hidden mb-6 border-4 border-indigo-900 shadow-2xl relative group-hover:scale-105 transition-transform duration-500">
|
|
<img src={step.image} alt={step.title} className="w-full h-full object-cover" />
|
|
<div className="absolute top-4 left-4 w-12 h-12 rounded-full bg-pink-500 flex items-center justify-center text-white font-display font-bold text-xl shadow-lg">
|
|
{step.number}
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-3 text-white">{step.title}</h3>
|
|
<p className="text-indigo-200 font-medium text-base leading-relaxed">{step.description}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<InlineCTA
|
|
text="Quero Criar Meu Kit Agora"
|
|
subtext="Acesso imediato após o pagamento — leva menos de 1 minuto"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|