74 lines
3.7 KiB
TypeScript
74 lines
3.7 KiB
TypeScript
|
import { motion } from 'framer-motion';
|
||
|
|
import { Sparkles, Printer, Clock, Wand2 } from 'lucide-react';
|
||
|
|
import { cn } from '../lib/utils';
|
||
|
|
|
||
|
|
export default function Benefits() {
|
||
|
|
const cards = [
|
||
|
|
{
|
||
|
|
title: "100% Personalizado",
|
||
|
|
description: "A Inteligência Artificial transforma a foto da criança em um personagem 3D ao estilo dos filmes mais amados do cinema, garantindo um tema exclusivo e mágico.",
|
||
|
|
icon: <Wand2 className="w-8 h-8 text-pink-500" />,
|
||
|
|
className: "md:col-span-2 bg-gradient-to-br from-pink-50 to-white hover:border-pink-300"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Arquivos em PDF",
|
||
|
|
description: "Esqueça dor de cabeça com formatação. Você recebe os itens em PDF, prontos para a impressora.",
|
||
|
|
icon: <Printer className="w-8 h-8 text-violet-500" />,
|
||
|
|
className: "md:col-span-1 bg-gradient-to-br from-indigo-50 to-white hover:border-violet-300"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Pronto na Hora",
|
||
|
|
description: "Sem espera interminável por encomenda. Seu kit completo é gerado quase instantaneamente.",
|
||
|
|
icon: <Clock className="w-8 h-8 text-amber-500" />,
|
||
|
|
className: "md:col-span-1 bg-gradient-to-br from-orange-50 to-white hover:border-amber-300"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "21 Itens Exclusivos",
|
||
|
|
description: "Convites interativos, caixa de pipoca, totens, saia de cupcake, tag de agradecimento, painéis, topo de bolo e muito mais.",
|
||
|
|
icon: <Sparkles className="w-8 h-8 text-pink-500" />,
|
||
|
|
className: "md:col-span-2 bg-gradient-to-r from-violet-50 to-pink-50 hover:border-pink-300"
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="py-24 relative overflow-hidden bg-white" id="benefits">
|
||
|
|
<div className="absolute top-1/2 left-0 w-[500px] h-[500px] bg-pink-100/50 blur-[120px] rounded-full pointer-events-none -translate-y-1/2 opacity-60" />
|
||
|
|
|
||
|
|
<div className="container mx-auto px-6 max-w-6xl relative z-10">
|
||
|
|
<div className="mb-16 md:mb-20 text-center">
|
||
|
|
<h2 className="text-3xl md:text-5xl font-display font-bold mb-6 tracking-tight text-indigo-950">
|
||
|
|
A forma mais inovadora de <br className="hidden md:block"/><span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-violet-500">decorar a festa infantil.</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-lg text-indigo-800/70 max-w-2xl mx-auto font-medium">
|
||
|
|
Tudo que você precisa para uma festa inesquecível, com a qualidade de um estúdio de animação.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-fr">
|
||
|
|
{cards.map((card, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
viewport={{ once: true, margin: "-100px" }}
|
||
|
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||
|
|
className={cn(
|
||
|
|
"rounded-[2.5rem] border-2 border-indigo-50/50 p-10 flex flex-col transition-all duration-300 group shadow-xl shadow-indigo-100/50 hover:shadow-2xl relative bg-white",
|
||
|
|
card.className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="w-16 h-16 rounded-2xl bg-white shadow-sm border border-indigo-50 flex items-center justify-center mb-10 group-hover:scale-110 transition-transform relative z-20 shrink-0">
|
||
|
|
{card.icon}
|
||
|
|
</div>
|
||
|
|
<div className="relative z-20 mt-auto">
|
||
|
|
<h3 className="text-2xl font-display font-bold mb-4 text-indigo-950">{card.title}</h3>
|
||
|
|
<p className="text-indigo-900/70 font-medium text-lg leading-relaxed">{card.description}</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|