Marcio Bevervanso
d8788dab2b
Galeria reduzida so com personagem infantil, catalogo corrigido pra 33 modelos, hero com beneficio-primeiro, badge de acesso reposicionado. Ignora landpage-30.zip (backup solto de public/, nao deveria ser versionado). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
69 lines
3.7 KiB
TypeScript
69 lines
3.7 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import InlineCTA from './InlineCTA';
|
|
|
|
export default function Gallery() {
|
|
const images = [
|
|
{ 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/caixa-de-pipoca.webp", title: "Caixa de Pipoca", desc: "A alegria garantida no lanche" },
|
|
{ src: "/images/galeria-real/convite-digital.webp", title: "Convite Digital", desc: "Para enviar no WhatsApp" },
|
|
{ src: "/images/galeria-real/saia-de-cupcake.webp", title: "Saia de Cupcake", desc: "Mais estilo para os docinhos" },
|
|
{ src: "/images/galeria-real/tag-de-agradecimento.webp", title: "Tag de Agradecimento", desc: "Pronto para as lembrancinhas" },
|
|
{ src: "/images/galeria-real/chapeu-de-festa.webp", title: "Chapéu de Festa", desc: "Divertido, personalizado e único" },
|
|
{ src: "/images/galeria-real/adesivos-redondos.webp", title: "Adesivos Redondos", desc: "Ideais para potinhos e lembrancinhas" },
|
|
];
|
|
|
|
return (
|
|
<section className="py-24 bg-pink-50 relative overflow-hidden pb-32">
|
|
<div className="absolute -left-20 top-0 w-72 h-72 bg-violet-300 blur-[100px] rounded-full opacity-30" />
|
|
|
|
<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 text-indigo-950">
|
|
Veja a magia <span className="text-gradient">acontecer.</span>
|
|
</h2>
|
|
<p className="text-lg text-indigo-900/70 max-w-2xl mx-auto font-medium">
|
|
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>
|
|
</div>
|
|
|
|
<div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
|
|
{images.map((img, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 }}
|
|
className="break-inside-avoid relative rounded-[2rem] overflow-hidden bg-white border border-indigo-100 group shadow-lg hover:shadow-xl transition-all duration-300"
|
|
>
|
|
<div className="relative w-full overflow-hidden flex items-center justify-center p-6 bg-indigo-50/50">
|
|
<img
|
|
src={img.src}
|
|
alt={img.title}
|
|
className="w-full h-auto object-contain rounded-2xl drop-shadow-xl transition-transform duration-700 group-hover:scale-105 max-h-[400px]"
|
|
/>
|
|
</div>
|
|
<div className="p-6 bg-white border-t border-indigo-50">
|
|
<h3 className="font-display font-bold text-xl text-indigo-950 mb-1">{img.title}</h3>
|
|
<p className="text-sm font-medium text-indigo-900/60">{img.desc}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<p className="text-center text-indigo-900/60 font-semibold mt-10 max-w-xl mx-auto">
|
|
E mais 25 outros modelos no catálogo — 33 no total, pra montar o kit do jeito que você quiser.
|
|
</p>
|
|
|
|
<InlineCTA
|
|
text="Quero o Meu Kit Personalizado!"
|
|
subtext="Clica aqui e escolha os itens que combinam com o tema do seu filho"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|