64 lines
3.4 KiB
TypeScript
64 lines
3.4 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: "Perfeito para destacar a mesa" },
|
||
|
|
{ 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/faixa-de-parede.webp", title: "Faixa de Parede", desc: "Decoração com a cara do tema" },
|
||
|
|
{ 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/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">
|
||
|
|
Itens reais gerados na nossa plataforma — sem mockup, sem edição manual. É exatamente isso que você recebe pronto para imprimir.
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<InlineCTA
|
||
|
|
text="Quero o Meu Kit Personalizado!"
|
||
|
|
subtext="Clica aqui e escolha os itens que combinam com o tema do seu filho"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|