64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
|
import { motion } from 'framer-motion';
|
||
|
|
import { XCircle } from 'lucide-react';
|
||
|
|
|
||
|
|
export default function Problem() {
|
||
|
|
const problems = [
|
||
|
|
"Orçamentos de decoração que chegam a R$ 2.000,00.",
|
||
|
|
"Aquela correria louca atrás de lojas e fornecedores.",
|
||
|
|
"A frustração de ver todo ano 'os mesmos temas'.",
|
||
|
|
"Não ter tempo ou habilidade para desenhar lembrancinhas do zero."
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="py-24 border-y border-pink-100 bg-white">
|
||
|
|
<div className="container mx-auto px-6 max-w-6xl">
|
||
|
|
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
|
||
|
|
|
||
|
|
{/* Left Text / Problems List */}
|
||
|
|
<div className="flex-1">
|
||
|
|
<h2 className="text-3xl md:text-5xl font-display font-bold mb-8 text-indigo-950">
|
||
|
|
Sua vida de mãe já é corrida. <br className="hidden md:block"/><span className="text-pink-500">A festa não precisa ser um caos.</span>
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
{problems.map((problem, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
initial={{ opacity: 0, x: -20 }}
|
||
|
|
whileInView={{ opacity: 1, x: 0 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ delay: i * 0.1 }}
|
||
|
|
className="p-5 rounded-2xl bg-pink-50 border border-pink-100 flex items-start gap-4 hover:shadow-lg transition-shadow"
|
||
|
|
>
|
||
|
|
<div className="mt-1 bg-pink-200 rounded-full p-1 shrink-0">
|
||
|
|
<XCircle className="w-5 h-5 text-pink-600" />
|
||
|
|
</div>
|
||
|
|
<p className="text-lg text-indigo-900 font-medium">{problem}</p>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right Image/Illustration */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
||
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ duration: 0.5 }}
|
||
|
|
className="flex-1 w-full"
|
||
|
|
>
|
||
|
|
<div className="relative rounded-[2.5rem] overflow-hidden shadow-2xl border-4 border-white bg-slate-100">
|
||
|
|
<img src="https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/topo-de-bolo.webp" alt="Solução mágica" className="w-full h-auto object-contain opacity-95 hover:scale-105 transition-transform duration-500" />
|
||
|
|
<div className="absolute inset-0 bg-indigo-950/10 mix-blend-multiply pointer-events-none" />
|
||
|
|
</div>
|
||
|
|
{/* Small floating badge */}
|
||
|
|
<div className="absolute top-[60%] sm:right-[10%] bg-white rounded-xl p-4 shadow-xl z-20 animate-bounce-slow">
|
||
|
|
<p className="text-indigo-900 font-bold text-sm">Fim da correria 😍</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|