Galeria expandida, depoimentos WhatsApp e CTA atualizado
- Galeria de 9 para 18 itens com imagens reais do S3 - Depoimentos estilo WhatsApp com 6 clientes reais - CTA do botao: 'Quero Minhas 30 Imagens por R$19,99' Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
6477b9ae12
commit
20a624f255
4 changed files with 153 additions and 6 deletions
|
|
@ -2,16 +2,27 @@ import { motion } from 'framer-motion';
|
||||||
import InlineCTA from './InlineCTA';
|
import InlineCTA from './InlineCTA';
|
||||||
|
|
||||||
export default function Gallery() {
|
export default function Gallery() {
|
||||||
|
const BASE = "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29";
|
||||||
|
|
||||||
const images = [
|
const images = [
|
||||||
{ src: "/images/galeria-real/topo-de-bolo.webp", title: "Topo de Bolo 3D", desc: "Perfeito para destacar a mesa" },
|
{ src: "/images/galeria-real/topo-de-bolo.webp", title: "Topo de Bolo 3D", desc: "Destaque na mesa do bolo" },
|
||||||
{ src: "/images/galeria-real/painel-de-fundo.webp", title: "Painel de Fundo", desc: "Transforma o cenário da festa" },
|
{ src: "/images/galeria-real/painel-de-fundo.webp", title: "Painel de Fundo", desc: "Transforma o cenário da festa" },
|
||||||
|
{ src: `${BASE}/008417cf-b15a-4c4e-ac95-c75b69ec3525/convite-premium.webp`, title: "Convite Premium", desc: "Para impressão ou envio digital" },
|
||||||
{ src: "/images/galeria-real/caixa-de-pipoca.webp", title: "Caixa de Pipoca", desc: "A alegria garantida no lanche" },
|
{ src: "/images/galeria-real/caixa-de-pipoca.webp", title: "Caixa de Pipoca", desc: "A alegria garantida no lanche" },
|
||||||
|
{ src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/bandeirolas-com-nome.webp`, title: "Bandeirolas com Nome", desc: "Varal decorativo personalizado" },
|
||||||
{ src: "/images/galeria-real/convite-digital.webp", title: "Convite Digital", desc: "Para enviar no WhatsApp" },
|
{ src: "/images/galeria-real/convite-digital.webp", title: "Convite Digital", desc: "Para enviar no WhatsApp" },
|
||||||
{ src: "/images/galeria-real/faixa-de-parede.webp", title: "Faixa de Parede", desc: "Decoração com a cara do tema" },
|
{ src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/caixa-milk.webp`, title: "Caixa Milk", desc: "Lembrancinha charmosa" },
|
||||||
{ src: "/images/galeria-real/tag-de-agradecimento.webp", title: "Tag de Agradecimento", desc: "Pronto para as lembrancinhas" },
|
|
||||||
{ src: "/images/galeria-real/saia-de-cupcake.webp", title: "Saia de Cupcake", desc: "Mais estilo para os docinhos" },
|
{ src: "/images/galeria-real/saia-de-cupcake.webp", title: "Saia de Cupcake", desc: "Mais estilo para os docinhos" },
|
||||||
|
{ src: `${BASE}/15547b19-daf7-46a0-922b-e6515a320534/centro-de-mesa.webp`, title: "Centro de Mesa", desc: "Arranjo decorativo exclusivo" },
|
||||||
|
{ src: "/images/galeria-real/tag-de-agradecimento.webp", title: "Tag de Agradecimento", desc: "Pronto para as lembrancinhas" },
|
||||||
|
{ src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/topper-de-cupcake-personagem.webp`, title: "Topper de Cupcake", desc: "O personagem em cada docinho" },
|
||||||
|
{ src: "/images/galeria-real/faixa-de-parede.webp", title: "Faixa de Parede", desc: "Decoração com a cara do tema" },
|
||||||
|
{ src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/sacolinha-surpresa.webp`, title: "Sacolinha Surpresa", desc: "Lembrancinha que toda criança ama" },
|
||||||
{ src: "/images/galeria-real/chapeu-de-festa.webp", title: "Chapéu de Festa", desc: "Divertido, personalizado e único" },
|
{ src: "/images/galeria-real/chapeu-de-festa.webp", title: "Chapéu de Festa", desc: "Divertido, personalizado e único" },
|
||||||
|
{ src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/porta-bis-duplo.webp`, title: "Porta Bis Duplo", desc: "Lembrancinha deliciosa e bonita" },
|
||||||
{ src: "/images/galeria-real/adesivos-redondos.webp", title: "Adesivos Redondos", desc: "Ideais para potinhos e lembrancinhas" },
|
{ src: "/images/galeria-real/adesivos-redondos.webp", title: "Adesivos Redondos", desc: "Ideais para potinhos e lembrancinhas" },
|
||||||
|
{ src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/caixa-cone.webp`, title: "Caixa Cone", desc: "Diferente e super divertida" },
|
||||||
|
{ src: `${BASE}/15547b19-daf7-46a0-922b-e6515a320534/display-de-mesa.webp`, title: "Display de Mesa", desc: "Identificação elegante para a mesa" },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -130,7 +130,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" /></>
|
||||||
) : (
|
) : (
|
||||||
<>Gerar Tema Agora <ArrowRight className="w-5 h-5" /></>
|
<>Quero Minhas 30 Imagens por R$19,99 <ArrowRight className="w-5 h-5" /></>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
136
src/components/WhatsAppTestimonials.tsx
Normal file
136
src/components/WhatsAppTestimonials.tsx
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import InlineCTA from './InlineCTA';
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
name: "Juliana Martins",
|
||||||
|
time: "09:47",
|
||||||
|
avatar: "JM",
|
||||||
|
color: "bg-emerald-500",
|
||||||
|
stars: 5,
|
||||||
|
message: "Ficou simplesmente lindo! Eu não esperava que as fotos fossem ficar tão perfeitas. Meu filho adorou se ver como um verdadeiro herói da festa. Recomendo demais! 🥰",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Camila Souza",
|
||||||
|
time: "14:22",
|
||||||
|
avatar: "CS",
|
||||||
|
color: "bg-violet-500",
|
||||||
|
stars: 5,
|
||||||
|
message: "Amei o resultado! Foi super fácil de fazer e as imagens ficaram incríveis. Todo mundo da família comentou e pediu para eu fazer também 😍✨",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Fernanda Oliveira",
|
||||||
|
time: "11:08",
|
||||||
|
avatar: "FO",
|
||||||
|
color: "bg-pink-500",
|
||||||
|
stars: 5,
|
||||||
|
message: "Que trabalho maravilhoso! As artes ficaram muito bonitas e deram um toque especial na comemoração. Minha filha ficou encantada quando viu 🎉",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Patrícia Almeida",
|
||||||
|
time: "16:55",
|
||||||
|
avatar: "PA",
|
||||||
|
color: "bg-amber-500",
|
||||||
|
stars: 5,
|
||||||
|
message: "Valeu cada centavo! Recebi tudo rapidinho e a qualidade das imagens me surpreendeu. Ficou melhor do que eu imaginava 👏👏",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Renata Costa",
|
||||||
|
time: "10:33",
|
||||||
|
avatar: "RC",
|
||||||
|
color: "bg-cyan-500",
|
||||||
|
stars: 5,
|
||||||
|
message: "Foi um sucesso aqui em casa! As fotos ficaram super realistas e deixaram a festa ainda mais especial. Meu filho amou o resultado 🎂🎈",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Larissa Ferreira",
|
||||||
|
time: "19:14",
|
||||||
|
avatar: "LF",
|
||||||
|
color: "bg-rose-500",
|
||||||
|
stars: 5,
|
||||||
|
message: "Estou apaixonada! Ficou tudo perfeito, muito caprichado e divertido. Com certeza vou fazer novamente para as próximas festas 💕",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function WhatsAppBubble({ t, index }: { t: typeof testimonials[0]; index: number }) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.08 }}
|
||||||
|
className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-shadow"
|
||||||
|
>
|
||||||
|
{/* WhatsApp header */}
|
||||||
|
<div className="bg-[#075e54] px-4 py-2.5 flex items-center gap-3">
|
||||||
|
<div className={`w-8 h-8 rounded-full ${t.color} flex items-center justify-center text-white text-xs font-bold shrink-0`}>
|
||||||
|
{t.avatar}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-white font-semibold text-sm truncate">{t.name}</p>
|
||||||
|
<p className="text-emerald-300 text-[10px]">online</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-0.5">
|
||||||
|
{[...Array(t.stars)].map((_, i) => (
|
||||||
|
<span key={i} className="text-amber-400 text-xs">★</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chat area */}
|
||||||
|
<div
|
||||||
|
className="p-3 min-h-[80px]"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('https://web.whatsapp.com/img/bg-chat-tile-light_04fcacde539c58cca6745483d4858c52.png')",
|
||||||
|
backgroundSize: 'contain',
|
||||||
|
backgroundRepeat: 'repeat',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Message bubble */}
|
||||||
|
<div className="bg-[#dcf8c6] rounded-lg rounded-tr-sm p-3 shadow-sm max-w-[90%] ml-auto relative">
|
||||||
|
<p className="text-[#111] text-sm leading-relaxed font-medium">{t.message}</p>
|
||||||
|
<div className="flex items-center justify-end gap-1 mt-1.5">
|
||||||
|
<span className="text-[10px] text-gray-400">{t.time}</span>
|
||||||
|
{/* Double blue checkmarks */}
|
||||||
|
<svg viewBox="0 0 16 15" width="16" height="15" className="text-[#4fc3f7]">
|
||||||
|
<path fill="currentColor" d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.879a.32.32 0 0 1-.484.033l-.358-.325a.319.319 0 0 0-.484.032l-.378.483a.418.418 0 0 0 .036.541l1.32 1.266c.143.14.361.125.484-.033l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.879a.32.32 0 0 1-.484.033L1.891 7.769a.366.366 0 0 0-.515.006l-.423.433a.364.364 0 0 0 .006.514l3.258 3.185c.143.14.361.125.484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WhatsAppTestimonials() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-white border-y border-pink-100 relative overflow-hidden" id="depoimentos">
|
||||||
|
<div className="absolute top-0 right-0 w-96 h-96 bg-emerald-100/40 blur-[120px] rounded-full pointer-events-none" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-6xl relative z-10">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-emerald-200 bg-emerald-50 mb-6 text-emerald-700">
|
||||||
|
<span className="text-sm font-bold uppercase tracking-wider">💬 O que as mães estão dizendo</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-bold mb-4 text-indigo-950">
|
||||||
|
Famílias <span className="text-pink-500">encantadas.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-indigo-500 font-medium text-lg">
|
||||||
|
Mais de 10.000 festas criadas. Veja o que elas estão falando.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||||
|
{testimonials.map((t, i) => (
|
||||||
|
<WhatsAppBubble key={i} t={t} index={i} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<InlineCTA
|
||||||
|
text="Eu Também Quero Fazer a Festa do Meu Filho!"
|
||||||
|
subtext="Clica aqui e seja a próxima mãe encantada"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -6,7 +6,7 @@ import BeforeAfter from '../components/BeforeAfter';
|
||||||
import VideoDemonstration from '../components/VideoDemonstration';
|
import VideoDemonstration from '../components/VideoDemonstration';
|
||||||
import Gallery from '../components/Gallery';
|
import Gallery from '../components/Gallery';
|
||||||
import HowItWorks from '../components/HowItWorks';
|
import HowItWorks from '../components/HowItWorks';
|
||||||
import Results from '../components/Results';
|
import WhatsAppTestimonials from '../components/WhatsAppTestimonials';
|
||||||
import Offer from '../components/Offer';
|
import Offer from '../components/Offer';
|
||||||
import FAQ from '../components/FAQ';
|
import FAQ from '../components/FAQ';
|
||||||
import Footer from '../components/Footer';
|
import Footer from '../components/Footer';
|
||||||
|
|
@ -42,7 +42,7 @@ export default function LandingPage() {
|
||||||
<VideoDemonstration />
|
<VideoDemonstration />
|
||||||
<Gallery />
|
<Gallery />
|
||||||
<HowItWorks />
|
<HowItWorks />
|
||||||
<Results />
|
<WhatsAppTestimonials />
|
||||||
<Offer />
|
<Offer />
|
||||||
<FAQ />
|
<FAQ />
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue