From 1e1990f3e0e68edb7180c28ea2b202487519311a Mon Sep 17 00:00:00 2001
From: Marcio Bevervanso <bevervansomarcio@gmail.com>
Date: Wed, 17 Jun 2026 19:29:00 -0300
Subject: [PATCH] Hero: remove badge de preco, adiciona contador de kits

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/Hero.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 5165b4e..a1e8c71 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -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>