Marcio Bevervanso
f240abaeb1
Projeto separado do site principal: landing page React/Vite usada nas campanhas de tráfego pago, com funil de WhatsApp simulado e melhorias recentes de conversão (prova real antes/depois, preço em destaque, CTAs múltiplos estilo página de vendas). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
3.7 KiB
TypeScript
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 já 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>
|
|
);
|
|
}
|