Upload components/Hero.js with huggingface_hub

components/Hero.js

@@ -0,0 +1,102 @@
+import Link from 'next/link'
+import { HiSparkles, HiArrowRight, HiBookOpen, HiLightningBolt } from 'react-icons/hi'
+
+export default function Hero() {
+  return (
+    <section className="relative bg-gradient-to-br from-primary-600 via-primary-700 to-primary-800 text-white overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-pattern opacity-10"></div>
+      
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <div className="flex items-center space-x-2 mb-6">
+              <HiSparkles className="h-6 w-6 text-accent-400" />
+              <span className="text-accent-400 font-semibold">IA para Profissionais</span>
+            </div>
+            
+            <h1 className="text-4xl lg:text-6xl font-bold mb-6 leading-tight">
+              Transforme sua Prática 
+              <span className="text-accent-400"> Jurídica e Administrativa</span> com IA
+            </h1>
+            
+            <p className="text-xl lg:text-2xl text-primary-100 mb-8 leading-relaxed">
+              Aprenda a usar Inteligência Artificial no dia a dia de escritórios jurídicos, 
+              administrativos e nos seus estudos para concursos públicos.
+            </p>
+
+            <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+              <Link href="/prompts" className="btn-primary flex items-center justify-center space-x-2">
+                <HiBookOpen className="h-5 w-5" />
+                <span>Biblioteca de Prompts</span>
+                <HiArrowRight className="h-5 w-5" />
+              </Link>
+              
+              <Link href="#sobre" className="btn-secondary flex items-center justify-center space-x-2 text-white border-white hover:bg-white hover:text-primary-700">
+                <HiLightningBolt className="h-5 w-5" />
+                <span>Como Funciona</span>
+              </Link>
+            </div>
+
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-6 mt-12 pt-8 border-t border-primary-500">
+              <div className="text-center">
+                <div className="text-2xl font-bold text-accent-400">50+</div>
+                <div className="text-sm text-primary-200">Prompts Especializados</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-accent-400">3</div>
+                <div className="text-sm text-primary-200">Áreas de Atuação</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-accent-400">100%</div>
+                <div className="text-sm text-primary-200">Gratuito</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="hidden lg:block">
+            <div className="relative">
+              {/* Floating Cards */}
+              <div className="absolute -top-8 -left-8 bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-accent-500 p-2 rounded-lg">
+                    <HiBookOpen className="h-5 w-5 text-white" />
+                  </div>
+                  <div>
+                    <div className="font-semibold">Prompts Jurídicos</div>
+                    <div className="text-sm text-primary-200">Peticionamento, petições e contratos</div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="absolute top-16 -right-8 bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-accent-500 p-2 rounded-lg">
+                    <HiLightningBolt className="h-5 w-5 text-white" />
+                  </div>
+                  <div>
+                    <div className="font-semibold">Concursos Públicos</div>
+                    <div className="text-sm text-primary-200">Estudo e revisão direcionada</div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="absolute bottom-8 left-4 bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-accent-500 p-2 rounded-lg">
+                    <HiSparkles className="h-5 w-5 text-white" />
+                  </div>
+                  <div>
+                    <div className="font-semibold">Administrativo</div>
+                    <div className="text-sm text-primary-200">Gestão e organização</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}