Upload components/Features.js with huggingface_hub

components/Features.js

@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion'
 import { HiSparkles, HiLightningBolt, HiBookOpen, HiUsers } from 'react-icons/hi'
 
 export default function Features() {
@@ -6,79 +7,23 @@ export default function Features() {
       icon: HiSparkles,
       title: 'IA Acessível para Todos',
       description: 'Prompts simples e eficazes que qualquer profissional pode usar, independente do nível técnico.',
-      color: 'text-blue-500'
+      color: 'text-blue-500',
+      bgColor: 'bg-blue-50'
     },
     {
       icon: HiLightningBolt,
       title: 'Resultados Imediatos',
       description: 'Economize horas de trabalho com prompts testados e aprovados por profissionais da área.',
-      color: 'text-green-500'
+      color: 'text-green-500',
+      bgColor: 'bg-green-50'
     },
     {
       icon: HiBookOpen,
       title: 'Conhecimento Especializado',
       description: 'Baseado na experiência prática do Prof. Gabriel Ramos com foco nas necessidades brasileiras.',
-      color: 'text-purple-500'
+      color: 'text-purple-500',
+      bgColor: 'bg-purple-50'
     },
     {
       icon: HiUsers,
-      title: 'Comunidade Ativa',
-      description: 'Faça parte de uma rede de profissionais que usam IA para revolucionar suas carreiras.',
-      color: 'text-orange-500'
-    }
-  ]
-
-  return (
-    <section className="py-20 bg-gray-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
-            Por que escolher o AI.Wiki.BR?
-          </h2>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-            Desenvolvido especialmente para profissionais brasileiros que querem alavancar suas carreiras com IA
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {features.map((feature, index) => (
-            <div key={index} className="text-center group">
-              <div className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 group-hover:scale-105 transform transition-transform duration-300">
-                <div className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gray-50 mb-6 ${feature.color}`}>
-                  <feature.icon className="h-8 w-8" />
-                </div>
-                
-                <h3 className="text-xl font-semibold text-gray-900 mb-4">
-                  {feature.title}
-                </h3>
-                
-                <p className="text-gray-600 leading-relaxed">
-                  {feature.description}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* CTA Section */}
-        <div className="mt-20 text-center">
-          <div className="bg-white rounded-2xl shadow-xl p-8 lg:p-12 max-w-4xl mx-auto">
-            <h3 className="text-2xl lg:text-3xl font-bold text-gray-900 mb-4">
-              Pronto para revolucionar sua prática profissional?
-            </h3>
-            <p className="text-lg text-gray-600 mb-8">
-              Junte-se a milhares de profissionais que já estão usando IA para transformar suas carreiras
-            </p>
-            <a
-              href="/prompts"
-              className="btn-primary inline-flex items-center space-x-2 text-lg"
-            >
-              <span>Começar Agora</span>
-              <HiSparkles className="h-5 w-5" />
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
+      title: 'Com