marciobever/festa-magica-ia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Hero: remove badge de preco, adiciona contador de kits

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcio Bevervanso 2026-06-17 19:29:00 -03:00
parent 5298b92908
commit 1e1990f3e0
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/Hero.tsx
View file

@ -52,15 +52,23 @@ export default function Hero() {
Pare de gastar horas procurando decoração. Envie uma foto e nossa IA cria, com o rostinho do seu filho no estilo de personagens de cinema, os itens que você escolher de um <strong>catálogo com 21 modelos exclusivos de Kit Digital</strong>! Prontinho para imprimir.
</motion.p>
{/* Contador de kits */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-white border-2 border-pink-200 shadow-sm mb-6 text-indigo-900"
className="flex flex-wrap gap-3 mb-6 justify-center lg:justify-start"
>
<span className="text-sm font-medium">Pacote inicial por apenas</span>
<span className="text-lg font-display font-black text-pink-600">R$ 9,99</span>
<span className="text-xs text-indigo-500 font-medium">· pagamento único</span>
{[
{ value: "+10.000", label: "kits criados" },
{ value: "+180.000", label: "artes geradas" },
{ value: "4.9★", label: "avaliação" },
].map((stat, i) => (
<div key={i} className="flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-pink-200 shadow-sm">
<span className="font-display font-black text-pink-600 text-base">{stat.value}</span>
<span className="text-xs text-indigo-500 font-semibold">{stat.label}</span>
</div>
))}
</motion.div>
<motion.div
@ -80,12 +88,6 @@ export default function Hero() {
>
Criar Minha Festa Agora <Wand2Icon className="w-6 h-6" />
</a>
<div className="flex flex-col items-center sm:items-start text-indigo-600/70 text-xs sm:text-sm mt-3 sm:mt-0 font-medium">
<div className="flex items-center gap-1 mb-1">
{[...Array(5)].map((_, i) => <Star key={i} className="w-4 h-4 text-amber-500 fill-amber-500" />)}
</div>
<span>Mais de 10.000 mães<br/>já fizeram a festa!</span>
</div>
</motion.div>
</div>