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>
This commit is contained in:
parent
7f611b5540
commit
80956d6c61
4 changed files with 103 additions and 42 deletions
|
|
@ -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."
|
||||
|
|
|
|||
|
|
@ -5,20 +5,20 @@ export default function HowItWorks() {
|
|||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
title: "Adquira seus Créditos",
|
||||
description: "Comece escolhendo um pacote. Você recebe créditos na hora para gerar suas imagens.",
|
||||
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. É 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",
|
||||
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.",
|
||||
title: "Crie seu Personagem com IA",
|
||||
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",
|
||||
description: "Enviamos o arquivo final em PDF pronto para levar pra gráfica ou imprimir em casa. Super fácil!",
|
||||
title: "Baixe, Imprima e Decore",
|
||||
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"
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{/* Decorative Elements */}
|
||||
<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 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" />
|
||||
<section className="py-24 bg-indigo-950 relative overflow-hidden" id="video">
|
||||
{/* Background glow */}
|
||||
<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 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="text-center mb-12">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
<div className="container mx-auto px-6 max-w-5xl relative z-10">
|
||||
|
||||
{/* Header */}
|
||||
<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 }}
|
||||
|
||||
<motion.p
|
||||
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>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
{/* Video */}
|
||||
<motion.div
|
||||
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
|
||||
src="https://s3.seureview.com.br/festamagica/0510(2).mp4"
|
||||
className="w-full h-auto object-cover"
|
||||
controls
|
||||
preload="metadata"
|
||||
playsInline
|
||||
/>
|
||||
{/* Glow ring */}
|
||||
<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" />
|
||||
|
||||
<div className="relative rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl bg-indigo-950">
|
||||
{/* Barra superior estilo browser */}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Reference in a new issue