Corrige comunicacao do produto e adiciona preco-ancora
Ajusta Hero, Offer, Gallery, HowItWorks, VideoDemonstration e FAQ para deixar claro que o cliente cria as artes na plataforma usando creditos (nao recebe um kit pronto da equipe). Remove referencias a Pixar/Disney e comparacoes de preco nao comprovadas (decoradora R$400, -33%). Adiciona ancora real "De R$29,99 por R$19,99" no Hero, Offer e CTA. Reformula o funil de WhatsApp (/funil) para ser mais direto, reduzindo de 5 para 3 etapas e alinhando a oferta ao restante do site. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
4698dd894a
commit
dec714515b
13 changed files with 112 additions and 101 deletions
|
|
@ -24,7 +24,7 @@ export default function Benefits() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "100% Personalizado",
|
title: "100% Personalizado",
|
||||||
description: "A IA transforma a foto do seu filho em um personagem 3D estilo Pixar aplicado em cada arte. Tema único, exclusivo, impossível de copiar.",
|
description: "A IA transforma a foto do seu filho em um personagem 3D cinematográfico aplicado em cada arte. Tema único, exclusivo, impossível de copiar.",
|
||||||
icon: <Wand2 className="w-8 h-8 text-pink-500" />,
|
icon: <Wand2 className="w-8 h-8 text-pink-500" />,
|
||||||
className: "md:col-span-1 bg-gradient-to-br from-pink-50 to-white hover:border-pink-300"
|
className: "md:col-span-1 bg-gradient-to-br from-pink-50 to-white hover:border-pink-300"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -9,14 +9,18 @@ export default function CTA() {
|
||||||
|
|
||||||
<div className="container mx-auto px-6 max-w-4xl relative z-10 text-center">
|
<div className="container mx-auto px-6 max-w-4xl relative z-10 text-center">
|
||||||
<h2 className="text-4xl md:text-6xl font-display font-bold text-white mb-6">
|
<h2 className="text-4xl md:text-6xl font-display font-bold text-white mb-6">
|
||||||
30 artes. R$19,99. <br className="hidden md:block" />A festa mais linda que ele já teve.
|
Crie o kit da festa do seu jeito
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p className="text-xl text-indigo-200 font-medium mb-10 max-w-2xl mx-auto">
|
<p className="text-xl text-indigo-200 font-medium mb-10 max-w-2xl mx-auto">
|
||||||
Chega de correr atrás de lojas e pagar caro em decoradora. Com nossa IA, você tem 30 artes personalizadas em minutos.
|
Envie uma foto, escolha as peças e use seus 30 créditos para gerar artes personalizadas em poucos minutos.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="flex flex-col items-center justify-center gap-4">
|
<div className="flex flex-col items-center justify-center gap-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-indigo-400 line-through font-semibold text-base">De R$29,99</span>
|
||||||
|
<span className="text-pink-400 font-display font-black text-2xl">por R$19,99</span>
|
||||||
|
</div>
|
||||||
<a
|
<a
|
||||||
href="#oferta"
|
href="#oferta"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
@ -26,11 +30,11 @@ export default function CTA() {
|
||||||
}}
|
}}
|
||||||
className="h-16 px-12 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-xl flex items-center justify-center gap-3 hover:scale-105 transition-all shadow-[0_0_40px_rgba(236,72,153,0.5)]"
|
className="h-16 px-12 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-xl flex items-center justify-center gap-3 hover:scale-105 transition-all shadow-[0_0_40px_rgba(236,72,153,0.5)]"
|
||||||
>
|
>
|
||||||
Quero Meu Kit de 30 Imagens <ArrowRight className="w-5 h-5" />
|
Criar minhas 30 artes por R$19,99 <ArrowRight className="w-5 h-5" />
|
||||||
</a>
|
</a>
|
||||||
<span className="text-indigo-300 font-medium text-sm flex items-center gap-2">
|
<span className="text-indigo-300 font-medium text-sm flex items-center gap-2">
|
||||||
<Sparkles className="w-4 h-4 text-amber-400" />
|
<Sparkles className="w-4 h-4 text-amber-400" />
|
||||||
Acesso imediato · Pagamento 100% seguro pelo Stripe
|
Pagamento único • sem mensalidade • acesso por 60 dias
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ export default function FAQ() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: "Como funciona a geração da arte em IA?",
|
q: "Como funciona a geração da arte em IA?",
|
||||||
a: "Após a compra, você recebe acesso imediato ao painel. Faça o upload de 1 foto do seu filho (de preferência de corpo inteiro e frente), escolha o item e o estilo. A IA transforma o rosto dele em um personagem 3D estilo Pixar/Disney e aplica na arte escolhida. A primeira imagem é por nossa conta — não consome nenhum crédito!"
|
a: "Após a compra, você recebe acesso imediato ao painel. Faça o upload de 1 foto do seu filho (de preferência de corpo inteiro e frente), escolha o item e o estilo. A IA transforma o rosto dele em um personagem 3D personalizado e aplica na arte escolhida. A primeira imagem é por nossa conta — não consome nenhum crédito!"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: "Por quanto tempo ficam disponíveis os créditos?",
|
q: "Por quanto tempo ficam disponíveis os créditos?",
|
||||||
|
|
@ -28,8 +28,20 @@ export default function FAQ() {
|
||||||
a: "No painel, você tem um botão de download em lote que baixa todas as artes geradas de uma só vez em um arquivo ZIP. Cada arquivo já vem em PDF formatado e em alta resolução, pronto para impressão."
|
a: "No painel, você tem um botão de download em lote que baixa todas as artes geradas de uma só vez em um arquivo ZIP. Cada arquivo já vem em PDF formatado e em alta resolução, pronto para impressão."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: "Preciso de algum programa para imprimir?",
|
q: "As artes vêm impressas?",
|
||||||
a: "Não! Os arquivos já chegam em PDF na medida exata para impressão. Basta abrir no celular ou computador e mandar imprimir — em casa ou na gráfica mais próxima."
|
a: "Não. O produto é digital. Você baixa os arquivos em alta resolução para imprimir em casa, em uma papelaria ou em uma gráfica."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Preciso saber usar programas de design?",
|
||||||
|
a: "Não. Todo o processo acontece dentro da plataforma, de forma guiada — você não precisa saber nada de design."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Funciona pelo celular?",
|
||||||
|
a: "Sim. Você pode criar e baixar as artes pelo celular ou computador."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Posso criar artes diferentes com o mesmo personagem?",
|
||||||
|
a: "Sim. Depois de criar o personagem, você escolhe diferentes modelos e peças do catálogo para montar o kit."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: "Quanto tempo demora para ficar pronto?",
|
q: "Quanto tempo demora para ficar pronto?",
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,10 @@ export default function Gallery() {
|
||||||
Veja a magia <span className="text-gradient">acontecer.</span>
|
Veja a magia <span className="text-gradient">acontecer.</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-indigo-900/70 max-w-2xl mx-auto font-medium">
|
<p className="text-lg text-indigo-900/70 max-w-2xl mx-auto font-medium">
|
||||||
Itens reais gerados na nossa plataforma — sem mockup, sem edição manual. É exatamente isso que você recebe pronto para imprimir.
|
Estes são alguns dos itens que você pode criar dentro da plataforma e baixar em alta resolução.
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-indigo-900/60 max-w-2xl mx-auto font-medium mt-2">
|
||||||
|
Você escolhe quais peças deseja gerar e monta o kit de acordo com a sua festa.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ export default function Hero() {
|
||||||
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-pink-200 bg-white/60 backdrop-blur-md mb-8 text-pink-600 shadow-sm"
|
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-pink-200 bg-white/60 backdrop-blur-md mb-8 text-pink-600 shadow-sm"
|
||||||
>
|
>
|
||||||
<Sparkles className="w-4 h-4 text-amber-500 animate-pulse" />
|
<Sparkles className="w-4 h-4 text-amber-500 animate-pulse" />
|
||||||
<span className="text-sm font-bold uppercase tracking-wider">Kit Festa Completo · 30 Imagens HD</span>
|
<span className="text-sm font-bold uppercase tracking-wider">Crie seu Kit de Festa · Personagem 3D Personalizado</span>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<motion.h1
|
<motion.h1
|
||||||
|
|
@ -36,8 +36,7 @@ export default function Hero() {
|
||||||
transition={{ duration: 0.5, delay: 0.1 }}
|
transition={{ duration: 0.5, delay: 0.1 }}
|
||||||
className="text-4xl md:text-5xl lg:text-6xl xl:text-[4.5rem] tracking-tight leading-[1.1] font-display font-bold text-indigo-950 mb-6"
|
className="text-4xl md:text-5xl lg:text-6xl xl:text-[4.5rem] tracking-tight leading-[1.1] font-display font-bold text-indigo-950 mb-6"
|
||||||
>
|
>
|
||||||
30 Artes Exclusivas para a<br className="hidden md:block" />
|
Crie até <span className="text-gradient">30 artes personalizadas</span> para a festa do seu filho
|
||||||
<span className="text-gradient"> Festa Perfeita!</span>
|
|
||||||
</motion.h1>
|
</motion.h1>
|
||||||
|
|
||||||
<motion.p
|
<motion.p
|
||||||
|
|
@ -46,7 +45,7 @@ export default function Hero() {
|
||||||
transition={{ duration: 0.5, delay: 0.2 }}
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
className="text-lg md:text-xl text-indigo-800/80 mb-8 max-w-xl font-medium leading-relaxed"
|
className="text-lg md:text-xl text-indigo-800/80 mb-8 max-w-xl font-medium leading-relaxed"
|
||||||
>
|
>
|
||||||
Envie a foto do seu filho e nossa IA transforma em <strong>30 artes personalizadas estilo Pixar</strong> — convites, topos de bolo, banners e muito mais. Tudo em HD, pronto para imprimir.
|
Envie uma foto, crie um personagem 3D exclusivo e escolha dentro da plataforma quais peças deseja gerar: convites, toppers, painéis, caixas, bandeirolas e muito mais.
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|
||||||
{/* Mini benefícios */}
|
{/* Mini benefícios */}
|
||||||
|
|
@ -57,9 +56,9 @@ export default function Hero() {
|
||||||
className="flex flex-wrap gap-3 mb-8 justify-center lg:justify-start"
|
className="flex flex-wrap gap-3 mb-8 justify-center lg:justify-start"
|
||||||
>
|
>
|
||||||
{[
|
{[
|
||||||
{ icon: <ImageIcon className="w-4 h-4" />, text: "30 imagens HD" },
|
{ icon: <ImageIcon className="w-4 h-4" />, text: "30 créditos para criar" },
|
||||||
{ icon: <Download className="w-4 h-4" />, text: "Download em lote" },
|
{ icon: <Download className="w-4 h-4" />, text: "Mais de 21 modelos" },
|
||||||
{ icon: <Clock className="w-4 h-4" />, text: "Válido por 60 dias" },
|
{ icon: <Clock className="w-4 h-4" />, text: "Acesso por 60 dias" },
|
||||||
].map((item, i) => (
|
].map((item, i) => (
|
||||||
<div key={i} className="flex items-center gap-1.5 px-4 py-2 rounded-full bg-white border border-pink-200 text-indigo-800 text-sm font-semibold shadow-sm">
|
<div key={i} className="flex items-center gap-1.5 px-4 py-2 rounded-full bg-white border border-pink-200 text-indigo-800 text-sm font-semibold shadow-sm">
|
||||||
<span className="text-pink-500">{item.icon}</span>
|
<span className="text-pink-500">{item.icon}</span>
|
||||||
|
|
@ -68,23 +67,14 @@ export default function Hero() {
|
||||||
))}
|
))}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Contador de kits */}
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.5, delay: 0.3 }}
|
transition={{ duration: 0.5, delay: 0.35 }}
|
||||||
className="flex flex-wrap gap-3 mb-6 justify-center lg:justify-start"
|
className="flex items-center gap-2 mb-4"
|
||||||
>
|
>
|
||||||
{[
|
<span className="text-indigo-400 line-through font-semibold text-base">De R$29,99</span>
|
||||||
{ value: "+10.000", label: "kits criados" },
|
<span className="text-pink-600 font-display font-black text-2xl">por R$19,99</span>
|
||||||
{ value: "+180.000", label: "artes geradas" },
|
|
||||||
{ value: "4.9★", label: "avaliação" },
|
|
||||||
].map((stat, i) => (
|
|
||||||
<div key={i} className="flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-pink-200 shadow-sm">
|
|
||||||
<span className="font-display font-black text-pink-600 text-base">{stat.value}</span>
|
|
||||||
<span className="text-xs text-indigo-500 font-semibold">{stat.label}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|
@ -102,9 +92,21 @@ export default function Hero() {
|
||||||
}}
|
}}
|
||||||
className="w-full sm:w-auto h-16 px-10 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-xl flex items-center justify-center gap-3 hover:scale-105 hover:shadow-2xl transition-all shadow-xl shadow-pink-500/30"
|
className="w-full sm:w-auto h-16 px-10 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-xl flex items-center justify-center gap-3 hover:scale-105 hover:shadow-2xl transition-all shadow-xl shadow-pink-500/30"
|
||||||
>
|
>
|
||||||
Quero Meu Kit de 30 Imagens <ArrowRight className="w-6 h-6" />
|
<span className="hidden sm:inline">Criar minhas 30 artes por R$ 19,99</span>
|
||||||
|
<span className="sm:hidden">Criar minhas 30 artes</span>
|
||||||
|
<ArrowRight className="w-6 h-6" />
|
||||||
</a>
|
</a>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.45 }}
|
||||||
|
className="flex flex-col items-center lg:items-start gap-1 mt-4"
|
||||||
|
>
|
||||||
|
<span className="text-indigo-500 text-sm font-semibold">Pagamento único • sem mensalidade • acesso imediato</span>
|
||||||
|
<span className="text-indigo-400 text-sm font-medium">30 créditos válidos por 60 dias · menos de R$0,67 por arte</span>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|
@ -117,7 +119,7 @@ export default function Hero() {
|
||||||
<img
|
<img
|
||||||
src="/images/antes-depois/miguel-avatar.webp"
|
src="/images/antes-depois/miguel-avatar.webp"
|
||||||
className="w-full h-auto object-cover aspect-square md:aspect-[4/3] lg:aspect-square"
|
className="w-full h-auto object-cover aspect-square md:aspect-[4/3] lg:aspect-square"
|
||||||
alt="Personagem 3D estilo Pixar gerado pela IA a partir da foto de uma criança"
|
alt="Personagem 3D cinematográfico gerado pela IA a partir da foto de uma criança"
|
||||||
fetchPriority="high"
|
fetchPriority="high"
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-[1.5rem]" />
|
<div className="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-[1.5rem]" />
|
||||||
|
|
@ -131,7 +133,7 @@ export default function Hero() {
|
||||||
{/* Badge 30 imagens */}
|
{/* Badge 30 imagens */}
|
||||||
<div className="absolute bottom-6 left-6 bg-indigo-950/90 backdrop-blur-sm text-white rounded-2xl px-4 py-3 shadow-xl">
|
<div className="absolute bottom-6 left-6 bg-indigo-950/90 backdrop-blur-sm text-white rounded-2xl px-4 py-3 shadow-xl">
|
||||||
<div className="text-2xl font-display font-black text-pink-400 leading-none">30</div>
|
<div className="text-2xl font-display font-black text-pink-400 leading-none">30</div>
|
||||||
<div className="text-xs font-semibold text-indigo-200 mt-0.5">artes inclusas</div>
|
<div className="text-xs font-semibold text-indigo-200 mt-0.5">créditos para criar</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ export default function HowItWorks() {
|
||||||
{
|
{
|
||||||
number: "03",
|
number: "03",
|
||||||
title: "Baixe em Lote e Imprima",
|
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!",
|
description: "Baixe todas as artes de uma vez em HD direto da plataforma. Leva pra gráfica ou imprime em casa.",
|
||||||
image: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp"
|
image: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
@ -31,7 +31,7 @@ export default function HowItWorks() {
|
||||||
Como a <span className="text-pink-500">Mágica</span> Acontece
|
Como a <span className="text-pink-500">Mágica</span> Acontece
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-indigo-200 max-w-2xl mx-auto font-medium">
|
<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!
|
Em apenas 3 passos simples, você cria e baixa suas artes personalizadas. Cada crédito gera uma arte.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ export default function Navbar() {
|
||||||
}}
|
}}
|
||||||
className="h-11 px-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-semibold text-sm flex items-center gap-2 hover:shadow-[0_0_20px_rgba(236,72,153,0.4)] hover:scale-105 transition-all"
|
className="h-11 px-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-semibold text-sm flex items-center gap-2 hover:shadow-[0_0_20px_rgba(236,72,153,0.4)] hover:scale-105 transition-all"
|
||||||
>
|
>
|
||||||
Quero 30 Imagens <ArrowRight className="w-4 h-4" />
|
Criar minhas artes <ArrowRight className="w-4 h-4" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,18 @@
|
||||||
import { useState, type FormEvent } from 'react';
|
import { useState, type FormEvent } from 'react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { Check, ShieldCheck, Gift, ArrowRight, ImageIcon, Download, Clock, Headphones, Tag, Zap, Loader2 } from 'lucide-react';
|
import { Check, ShieldCheck, Gift, ArrowRight, ImageIcon, Download, Clock, Headphones, Zap, Loader2 } from 'lucide-react';
|
||||||
import { cn } from '../lib/utils';
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
export default function Offer() {
|
export default function Offer() {
|
||||||
const benefits = [
|
const benefits = [
|
||||||
{ icon: <ImageIcon className="w-5 h-5 text-pink-500" />, text: "30 créditos para gerar artes do catálogo com 21+ modelos" },
|
{ icon: <ImageIcon className="w-5 h-5 text-pink-500" />, text: "30 créditos para criar artes do catálogo com 21+ modelos" },
|
||||||
|
{ icon: <Check className="w-5 h-5 text-pink-500" />, text: "Cada crédito gera uma arte — você escolhe quais peças criar" },
|
||||||
{ icon: <Check className="w-5 h-5 text-pink-500" />, text: "Personagem 3D exclusivo do seu filho gerado por IA" },
|
{ icon: <Check className="w-5 h-5 text-pink-500" />, text: "Personagem 3D exclusivo do seu filho gerado por IA" },
|
||||||
{ icon: <Check className="w-5 h-5 text-pink-500" />, text: "Arquivos em PDF prontos para imprimir em HD" },
|
{ icon: <Check className="w-5 h-5 text-pink-500" />, text: "Arquivos em PDF em alta resolução" },
|
||||||
{ icon: <Download className="w-5 h-5 text-pink-500" />, text: "Download em lote de todas as artes" },
|
{ icon: <Download className="w-5 h-5 text-pink-500" />, text: "Download individual ou em lote" },
|
||||||
{ icon: <Clock className="w-5 h-5 text-pink-500" />, text: "Créditos válidos por 60 dias" },
|
{ icon: <Clock className="w-5 h-5 text-pink-500" />, text: "Créditos válidos por 60 dias" },
|
||||||
{ icon: <Headphones className="w-5 h-5 text-pink-500" />, text: "Suporte prioritário via WhatsApp" },
|
{ icon: <Headphones className="w-5 h-5 text-pink-500" />, text: "Suporte prioritário via WhatsApp" },
|
||||||
{ icon: <Zap className="w-5 h-5 text-pink-500" />, text: "Acesso imediato após o pagamento" },
|
{ icon: <Zap className="w-5 h-5 text-pink-500" />, text: "Funciona pelo celular e computador, sem precisar saber design" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const [email, setEmail] = useState('');
|
const [email, setEmail] = useState('');
|
||||||
|
|
@ -40,29 +41,31 @@ export default function Offer() {
|
||||||
<div className="container mx-auto px-6 max-w-5xl relative z-10">
|
<div className="container mx-auto px-6 max-w-5xl relative z-10">
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<h2 className="text-4xl md:text-5xl font-display font-bold mb-4 text-white">
|
<h2 className="text-4xl md:text-5xl font-display font-bold mb-4 text-white">
|
||||||
Kit Festa Completo:<br className="hidden md:block" /><span className="text-pink-400">30 Artes por R$19,99.</span>
|
Crie até <span className="text-pink-400">30 artes por apenas R$19,99.</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-indigo-200 text-lg max-w-2xl mx-auto">
|
<p className="text-indigo-200 text-lg max-w-2xl mx-auto">
|
||||||
Menos de <strong className="text-white">R$0,67 por imagem</strong> — kit de decoradora pelo preço de um guaraná na lanchonete.
|
Pagamento único, sem mensalidade.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Comparação de valor */}
|
{/* Argumentos objetivos */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 16 }}
|
initial={{ opacity: 0, y: 16 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12"
|
className="flex flex-wrap items-center justify-center gap-3 mb-12"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 px-6 py-3 rounded-2xl bg-white/10 border border-white/20 text-white">
|
{[
|
||||||
<Tag className="w-5 h-5 text-red-400 shrink-0" />
|
"Pagamento único",
|
||||||
<span className="text-sm font-semibold">Decoradora profissional cobraria <span className="line-through text-white/50">R$400+</span></span>
|
"Sem mensalidade",
|
||||||
</div>
|
"Crie somente as peças que precisa",
|
||||||
<div className="hidden sm:block text-white/40 text-2xl font-bold">→</div>
|
"Sem precisar saber design",
|
||||||
<div className="flex items-center gap-3 px-6 py-3 rounded-2xl bg-pink-500/20 border border-pink-400/40 text-white">
|
].map((text, i) => (
|
||||||
<Check className="w-5 h-5 text-pink-400 shrink-0" />
|
<div key={i} className="flex items-center gap-2 px-5 py-2.5 rounded-2xl bg-white/10 border border-white/20 text-white">
|
||||||
<span className="text-sm font-bold text-pink-300">Você paga só <span className="text-white">R$19,99</span> · −33% por imagem</span>
|
<Check className="w-4 h-4 text-pink-400 shrink-0" />
|
||||||
</div>
|
<span className="text-sm font-semibold">{text}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="bg-white rounded-[2.5rem] p-8 md:p-12 shadow-[0_30px_60px_-15px_rgba(236,72,153,0.3)] relative overflow-hidden flex flex-col md:flex-row items-center gap-12 max-w-4xl mx-auto border border-pink-100">
|
<div className="bg-white rounded-[2.5rem] p-8 md:p-12 shadow-[0_30px_60px_-15px_rgba(236,72,153,0.3)] relative overflow-hidden flex flex-col md:flex-row items-center gap-12 max-w-4xl mx-auto border border-pink-100">
|
||||||
|
|
@ -92,20 +95,21 @@ export default function Offer() {
|
||||||
{/* Bloco de preço e CTA */}
|
{/* Bloco de preço e CTA */}
|
||||||
<div className="w-full md:w-[340px] rounded-3xl p-6 md:p-8 text-center flex flex-col justify-center relative bg-gradient-to-b from-indigo-50 to-white border border-indigo-100 shadow-inner">
|
<div className="w-full md:w-[340px] rounded-3xl p-6 md:p-8 text-center flex flex-col justify-center relative bg-gradient-to-b from-indigo-50 to-white border border-indigo-100 shadow-inner">
|
||||||
|
|
||||||
{/* Badge -33% */}
|
{/* Badge */}
|
||||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-gradient-to-r from-pink-500 to-violet-500 text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-lg whitespace-nowrap">
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-gradient-to-r from-pink-500 to-violet-500 text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-lg whitespace-nowrap">
|
||||||
−33% por imagem vs. a média do mercado
|
De R$29,99 por R$19,99
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-2 text-pink-600 font-bold text-sm tracking-[0.2em] uppercase mt-3">Kit Festa · 30 Imagens</div>
|
<div className="mb-2 text-pink-600 font-bold text-sm tracking-[0.2em] uppercase mt-3">30 Artes Personalizadas</div>
|
||||||
|
|
||||||
|
<p className="text-base text-indigo-300 font-semibold line-through">R$29,99</p>
|
||||||
<div className="flex items-start justify-center mb-1">
|
<div className="flex items-start justify-center mb-1">
|
||||||
<span className="text-2xl font-bold text-indigo-950 mt-2 mr-1">R$</span>
|
<span className="text-2xl font-bold text-indigo-950 mt-2 mr-1">R$</span>
|
||||||
<span className="text-8xl font-display font-black tracking-tight text-indigo-950">19</span>
|
<span className="text-8xl font-display font-black tracking-tight text-indigo-950">19</span>
|
||||||
<span className="text-2xl font-bold mb-1 text-indigo-950 mt-2">,99</span>
|
<span className="text-2xl font-bold mb-1 text-indigo-950 mt-2">,99</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-indigo-500 font-semibold mb-1">R$0,67 por imagem · Pagamento único</p>
|
<p className="text-sm text-indigo-500 font-semibold mb-1">Menos de R$0,67 por arte · Pagamento único</p>
|
||||||
<p className="text-xs text-indigo-400 font-medium mb-6">Créditos válidos por 60 dias</p>
|
<p className="text-xs text-indigo-400 font-medium mb-6">30 créditos válidos por 60 dias</p>
|
||||||
|
|
||||||
<form onSubmit={handleCheckout} className="flex flex-col gap-3 w-full mb-4">
|
<form onSubmit={handleCheckout} className="flex flex-col gap-3 w-full mb-4">
|
||||||
<div className="flex flex-col gap-1 text-left">
|
<div className="flex flex-col gap-1 text-left">
|
||||||
|
|
@ -113,7 +117,7 @@ export default function Offer() {
|
||||||
type="email"
|
type="email"
|
||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => { setEmail(e.target.value); if (error) setError(''); }}
|
onChange={(e) => { setEmail(e.target.value); if (error) setError(''); }}
|
||||||
placeholder="Seu melhor e-mail"
|
placeholder="Digite o e-mail em que deseja receber o acesso"
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full h-14 px-5 rounded-full border-2 bg-white outline-none transition-all placeholder:text-gray-400 font-medium",
|
"w-full h-14 px-5 rounded-full border-2 bg-white outline-none transition-all placeholder:text-gray-400 font-medium",
|
||||||
|
|
@ -121,6 +125,7 @@ export default function Offer() {
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
{error && <span className="text-red-500 text-xs px-2 font-medium">{error}</span>}
|
{error && <span className="text-red-500 text-xs px-2 font-medium">{error}</span>}
|
||||||
|
<span className="text-indigo-400 text-xs px-2">O acesso à plataforma será enviado para este endereço.</span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -130,7 +135,7 @@ export default function Offer() {
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<>Gerando Pedido... <Loader2 className="w-5 h-5 animate-spin" /></>
|
<>Gerando Pedido... <Loader2 className="w-5 h-5 animate-spin" /></>
|
||||||
) : (
|
) : (
|
||||||
<>Quero Minhas 30 Imagens por R$19,99 <ArrowRight className="w-5 h-5" /></>
|
<>Criar minhas 30 artes por R$19,99 <ArrowRight className="w-5 h-5" /></>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -139,6 +144,7 @@ export default function Offer() {
|
||||||
<ShieldCheck className="w-5 h-5 text-emerald-500" />
|
<ShieldCheck className="w-5 h-5 text-emerald-500" />
|
||||||
<span>Compra 100% segura pelo Stripe.</span>
|
<span>Compra 100% segura pelo Stripe.</span>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-indigo-300 text-[11px] font-medium mt-3">Produto digital. Não inclui impressão física.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ export default function Results() {
|
||||||
Mamães <span className="text-pink-500">encantadas.</span>
|
Mamães <span className="text-pink-500">encantadas.</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-indigo-900/70 font-medium max-w-2xl mx-auto">
|
<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!
|
Veja quem já transformou a festa dos filhos em um verdadeiro universo mágico!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@ export default function StickyMobileCTA() {
|
||||||
}}
|
}}
|
||||||
className="w-full h-14 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-lg flex items-center justify-center gap-2 shadow-[0_10px_40px_-10px_rgba(236,72,153,0.8)] border border-white/20 active:scale-95 transition-transform"
|
className="w-full h-14 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-lg flex items-center justify-center gap-2 shadow-[0_10px_40px_-10px_rgba(236,72,153,0.8)] border border-white/20 active:scale-95 transition-transform"
|
||||||
>
|
>
|
||||||
Kit Festa · 30 Imagens por R$19,99 <ImageIcon className="w-5 h-5" />
|
Criar 30 artes por R$19,99 <ImageIcon className="w-5 h-5" />
|
||||||
</a>
|
</a>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@ import { Sparkles, Star, Users, ImageIcon, Clock } from 'lucide-react';
|
||||||
import InlineCTA from './InlineCTA';
|
import InlineCTA from './InlineCTA';
|
||||||
|
|
||||||
const stats = [
|
const stats = [
|
||||||
{ icon: <Users className="w-5 h-5 text-pink-400" />, value: "+10.000", label: "famílias atendidas" },
|
{ icon: <Users className="w-5 h-5 text-pink-400" />, value: "Brasil", label: "famílias em todo o país" },
|
||||||
{ icon: <ImageIcon className="w-5 h-5 text-violet-400" />, value: "+180.000", label: "artes geradas" },
|
{ icon: <ImageIcon className="w-5 h-5 text-violet-400" />, value: "21+", label: "modelos disponíveis" },
|
||||||
{ icon: <Star className="w-5 h-5 text-amber-400" />, value: "4.9★", label: "avaliação média" },
|
{ icon: <Star className="w-5 h-5 text-amber-400" />, value: "WhatsApp", label: "suporte direto" },
|
||||||
{ icon: <Clock className="w-5 h-5 text-emerald-400" />, value: "2~5 min", label: "por arte gerada" },
|
{ icon: <Clock className="w-5 h-5 text-emerald-400" />, value: "2~5 min", label: "por arte gerada" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -37,8 +37,8 @@ export default function VideoDemonstration() {
|
||||||
transition={{ delay: 0.05 }}
|
transition={{ delay: 0.05 }}
|
||||||
className="text-3xl md:text-5xl font-display font-bold mb-5 tracking-tight text-white"
|
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" />
|
Da foto à primeira arte<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>
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-violet-400"> em poucos minutos.</span>
|
||||||
</motion.h2>
|
</motion.h2>
|
||||||
|
|
||||||
<motion.p
|
<motion.p
|
||||||
|
|
@ -48,7 +48,7 @@ export default function VideoDemonstration() {
|
||||||
transition={{ delay: 0.1 }}
|
transition={{ delay: 0.1 }}
|
||||||
className="text-lg text-indigo-200/80 max-w-xl mx-auto font-medium"
|
className="text-lg text-indigo-200/80 max-w-xl mx-auto font-medium"
|
||||||
>
|
>
|
||||||
Veja como é simples usar a plataforma — do upload da foto até o PDF pronto para imprimir.
|
Veja como é simples criar seu kit — você escolhe cada peça e cria tudo diretamente na plataforma.
|
||||||
</motion.p>
|
</motion.p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -116,7 +116,7 @@ export default function WhatsAppTestimonials() {
|
||||||
Famílias <span className="text-pink-500">encantadas.</span>
|
Famílias <span className="text-pink-500">encantadas.</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-indigo-500 font-medium text-lg">
|
<p className="text-indigo-500 font-medium text-lg">
|
||||||
Mais de 10.000 festas criadas. Veja o que elas estão falando.
|
Artes criadas por famílias de todo o Brasil. Veja o que elas estão falando.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -33,57 +33,41 @@ const funnelData: FunnelNode[] = [
|
||||||
{
|
{
|
||||||
id: "start",
|
id: "start",
|
||||||
messages: [
|
messages: [
|
||||||
{ text: "Oi! 👋 Tudo bem? Sou do atendimento da Festa Mágica IA.", delay: 1000, type: "text" },
|
{ text: "Oi! 👋 Aqui é a Festa Mágica IA. Você cria o personagem 3D do seu filho e monta o kit de festa (convite, topper, painel e mais) direto pelo celular.", delay: 900, type: "text" }
|
||||||
{ text: "Posso te mostrar rapidinho como criar a festa do seu filho gastando muito menos?", delay: 1500, type: "text" }
|
|
||||||
],
|
],
|
||||||
options: [
|
options: [
|
||||||
{ text: "Pode!", nextId: "step2" },
|
{ text: "Quero ver como funciona", nextId: "proof" },
|
||||||
{ text: "Como assim?", nextId: "step2" },
|
{ text: "Já conheço, quero comprar", nextId: "offer" }
|
||||||
{ text: "Já conheço, quero comprar agora", nextId: "step4" }
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "step2",
|
id: "proof",
|
||||||
messages: [
|
messages: [
|
||||||
{ text: "Mandar fazer personalizados é caro e demora, né?", delay: 1800, type: "text" },
|
{ text: "Assiste esse vídeo rapidinho mostrando a plataforma funcionando 👇", delay: 900, type: "text" },
|
||||||
{ text: "Nossa Inteligência Artificial permite que você mesmo faça tudo na hora, do celular.", delay: 2000, type: "text" },
|
{ text: "https://s3.seureview.com.br/festamagica/0510(2).mp4", delay: 1200, type: "video" },
|
||||||
{ text: "Assiste esse vídeo aqui embaixo que mostra a ferramenta funcionando e como é fácil criar as imagens e os kits👇", delay: 1500, type: "text" },
|
{ text: "Aqui um exemplo real: a foto original do Miguel e o personagem 3D que a IA criou com o rostinho dele.", delay: 1200, type: "text" },
|
||||||
{ text: "https://s3.seureview.com.br/festamagica/0510(2).mp4", delay: 2000, type: "video" }
|
{ text: "/images/antes-depois/miguel-real.webp", delay: 1000, type: "image" },
|
||||||
|
{ text: "/images/antes-depois/miguel-avatar.webp", delay: 1200, type: "image" }
|
||||||
],
|
],
|
||||||
options: [
|
options: [
|
||||||
{ text: "Que legal!", nextId: "step3" }
|
{ text: "Quanto custa?", nextId: "offer" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "step3",
|
id: "offer",
|
||||||
messages: [
|
messages: [
|
||||||
{ text: "Legal né? A IA cria um personagem 3D super realista tipo Disney/Pixar com o rostinho dele(a)!", delay: 1800, type: "text" },
|
{ text: "O Kit Festa sai de R$29,99 por R$19,99 (pagamento único).", delay: 900, type: "text" },
|
||||||
{ text: "Olha essa transformação real que a gente fez aqui — essa é a foto original do Miguel, filho da nossa fundadora:", delay: 1500, type: "text" },
|
{ text: "Você recebe 30 créditos pra criar as artes que quiser — cada crédito gera uma arte, e a primeira é por nossa conta. 🎁", delay: 1200, type: "text" },
|
||||||
{ text: "/images/antes-depois/miguel-real.webp", delay: 1500, type: "image" },
|
{ text: "Quer garantir o seu?", delay: 800, type: "text" }
|
||||||
{ text: "E esse foi o personagem 3D que a nossa IA criou com o rostinho dele, pronto pra virar topo de bolo, convite, adesivo... tudo no tema! 🤩", delay: 1800, type: "text" },
|
|
||||||
{ text: "/images/antes-depois/miguel-avatar.webp", delay: 1800, type: "image" },
|
|
||||||
{ text: "Mágico, né? E ela já gera todos os arquivos em PDF prontinhos pra imprimir.", delay: 1800, type: "text" }
|
|
||||||
],
|
],
|
||||||
options: [
|
options: [
|
||||||
{ text: "Amei! Quanto custa?", nextId: "step4" }
|
{ text: "Quero criar meu kit!", nextId: "checkout_step" }
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "step4",
|
|
||||||
messages: [
|
|
||||||
{ text: "Bem menos que você imagina! 🥰", delay: 1200, type: "text" },
|
|
||||||
{ text: "Liberamos o Kit Festa completo por apenas R$ 19,99 (pagamento único).", delay: 1500, type: "text" },
|
|
||||||
{ text: "Você já entra com 30 créditos pra gerar os itens que quiser — e a primeira imagem é por nossa conta, não consome nenhum crédito seu! 🎁", delay: 1800, type: "text" },
|
|
||||||
{ text: "Quer garantir o seu agora?", delay: 1200, type: "text" }
|
|
||||||
],
|
|
||||||
options: [
|
|
||||||
{ text: "Eu quero!", nextId: "checkout_step" }
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "checkout_step",
|
id: "checkout_step",
|
||||||
messages: [
|
messages: [
|
||||||
{ text: "Ótimo! Pra gente gerar o seu acesso seguro, qual é o seu melhor e-mail?", delay: 1000, type: "text" }
|
{ text: "Perfeito! Qual é o e-mail pra gente liberar seu acesso à plataforma?", delay: 800, type: "text" }
|
||||||
],
|
],
|
||||||
requireEmail: true
|
requireEmail: true
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue