landpagefestamagica2/src/components/Results.tsx
Marcio Bevervanso 045e84e74c Cria landing page Kit Festa 30 imagens (R$19,99)
- 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>
2026-06-17 12:56:38 -03:00

67 lines
3.7 KiB
TypeScript

import { motion } from 'framer-motion';
import { Star, Heart } from 'lucide-react';
import InlineCTA from './InlineCTA';
export default function Results() {
const textTestimonials = [
{ name: "Juliana Mendes", role: "Mãe do Pedro (4 anos)", initials: "JM", content: "Gente, eu não acreditei quando vi! O Pedro pirou quando viu ele vestido de astronauta no convite. Todo mundo da escola elogiou, foi muito incrível e super barato." },
{ name: "Camila V.", role: "Mãe da Alice (6 anos)", initials: "CV", content: "Eu tava desesperada porque deixei tudo pra última hora. Criei o kit, imprimi na gráfica da esquina e a festa ficou parecendo de decoradora cara. Salvaram a vida!" },
{ name: "Fernanda Costa", role: "Decoradora", initials: "FC", content: "Trabalho com festas e agora ofereço essa opção VIP para minhas clientes. A IA gera imagens perfeitas e de altíssima resolução. É o futuro da papelaria." },
{ name: "Amanda K.", role: "Mãe do Leo (2 anos)", initials: "AK", content: "A festinha foi na creche, fiz tudo na minha impressora de casa mesmo. Recortei e colei os rótulos de guaraná e as marmitinhas. Ficou um luxo, muito maravilhoso." },
];
return (
<section className="py-24 relative overflow-hidden bg-white" id="results">
<div className="container mx-auto px-6 max-w-6xl relative z-10">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-5xl font-display font-bold mb-6 tracking-tight text-indigo-950">
Mamães <span className="text-pink-500">encantadas.</span>
</h2>
<p className="text-lg text-indigo-900/70 font-medium max-w-2xl mx-auto">
Veja quem transformou a festa dos filhos em um verdadeiro universo mágico Pixar!
</p>
</div>
{/* Text Testimonials */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
{textTestimonials.map((t, i) => (
<motion.div
key={i}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: i * 0.1 }}
className="relative rounded-3xl p-8 border-2 border-pink-100 bg-pink-50/50 hover:bg-pink-100/50 transition-colors group shadow-sm hover:shadow-md"
>
<div className="absolute -top-4 -right-4 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-md rotate-12">
<Heart className="w-6 h-6 text-pink-500 fill-pink-500" />
</div>
<div className="flex items-center gap-1 mb-6">
{[...Array(5)].map((_, idx) => (
<Star key={idx} className="w-5 h-5 text-amber-400 fill-amber-400" />
))}
</div>
<p className="text-indigo-900 font-medium leading-relaxed mb-8 italic">
"{t.content}"
</p>
<div className="flex items-center gap-4 mt-auto">
<div className="w-14 h-14 rounded-full border-2 border-white shadow-sm bg-gradient-to-br from-pink-400 to-violet-500 flex items-center justify-center text-white font-display font-bold text-lg shrink-0">
{t.initials}
</div>
<div>
<h4 className="text-indigo-950 font-bold text-base">{t.name}</h4>
<span className="text-sm text-pink-600 font-medium">{t.role}</span>
</div>
</div>
</motion.div>
))}
</div>
<InlineCTA
text="Eu Também Quero Viver Essa Mágica!"
subtext="Clica aqui e seja a próxima mãe encantada"
/>
</div>
</section>
);
}