Upload components/Hero.js with huggingface_hub

components/Hero.js

@@ -1,99 +1,174 @@
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
-import { HiSparkles, HiArrowRight, HiBookOpen, HiLightningBolt } from 'react-icons/hi'
+import { motion } from 'framer-motion'
+import { HiSparkles, HiArrowRight, HiBookOpen, HiLightningBolt, HiPlay } from 'react-icons/hi'
 
 export default function Hero() {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const stats = [
+    { number: '50+', label: 'Prompts Especializados', delay: 0.1 },
+    { number: '3', label: 'Áreas de Atuação', delay: 0.2 },
+    { number: '100%', label: 'Gratuito', delay: 0.3 }
+  ]
+
+  const floatingCards = [
+    {
+      icon: HiBookOpen,
+      title: 'Prompts Jurídicos',
+      description: 'Peticionamento, petições e contratos',
+      delay: 0.4,
+      position: { top: '-2rem', left: '-2rem' }
+    },
+    {
+      icon: HiLightningBolt,
+      title: 'Concursos Públicos',
+      description: 'Estudo e revisão direcionada',
+      delay: 0.6,
+      position: { top: '4rem', right: '-2rem' }
+    },
+    {
+      icon: HiSparkles,
+      title: 'Administrativo',
+      description: 'Gestão e organização',
+      delay: 0.8,
+      position: { bottom: '2rem', left: '1rem' }
+    }
+  ]
+
+  if (!mounted) {
+    return (
+      <section className="relative bg-gradient-to-br from-primary-600 via-primary-700 to-primary-800 text-white overflow-hidden min-h-screen flex items-center">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+          <div className="text-center">
+            <div className="animate-pulse">
+              <div className="h-12 bg-white/20 rounded-lg mb-6 w-96 mx-auto"></div>
+              <div className="h-8 bg-white/20 rounded-lg mb-4 w-3/4 mx-auto"></div>
+              <div className="h-6 bg-white/20 rounded-lg mb-8 w-1/2 mx-auto"></div>
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
   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="absolute inset-0 bg-pattern opacity-10" aria-hidden="true"></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" />
+          {/* Content */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="text-center lg:text-left"
+          >
+            <motion.div 
+              className="flex items-center justify-center lg:justify-start space-x-2 mb-6"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.2, duration: 0.6 }}
+            >
+              <HiSparkles className="h-6 w-6 text-accent-400" aria-hidden="true" />
               <span className="text-accent-400 font-semibold">IA para Profissionais</span>
-            </div>
+            </motion.div>
             
-            <h1 className="text-4xl lg:text-6xl font-bold mb-6 leading-tight">
+            <motion.h1 
+              className="text-4xl lg:text-6xl font-bold mb-6 leading-tight"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3, duration: 0.8 }}
+            >
               Transforme sua Prática 
               <span className="text-accent-400"> Jurídica e Administrativa</span> com IA
-            </h1>
+            </motion.h1>
             
-            <p className="text-xl lg:text-2xl text-primary-100 mb-8 leading-relaxed">
+            <motion.p 
+              className="text-xl lg:text-2xl text-primary-100 mb-8 leading-relaxed"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.4, duration: 0.8 }}
+            >
               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>
+            </motion.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" />
+            <motion.div 
+              className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center lg:justify-start"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5, duration: 0.8 }}
+            >
+              <Link href="/prompts" className="btn-primary flex items-center justify-center space-x-2 group">
+                <HiBookOpen className="h-5 w-5 group-hover:scale-110 transition-transform duration-200" aria-hidden="true" />
                 <span>Biblioteca de Prompts</span>
-                <HiArrowRight className="h-5 w-5" />
+                <HiArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true" />
               </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" />
+              <button 
+                className="btn-secondary flex items-center justify-center space-x-2 text-white border-white hover:bg-white hover:text-primary-700 group"
+                onClick={() => {
+                  const element = document.querySelector('#sobre')
+                  if (element) element.scrollIntoView({ behavior: 'smooth' })
+
+              >
+                <HiPlay className="h-5 w-5 group-hover:scale-110 transition-transform duration-200" aria-hidden="true" />
                 <span>Como Funciona</span>
-              </Link>
-            </div>
+              </button>
+            </motion.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>
+            <motion.div 
+              className="grid grid-cols-3 gap-6 mt-12 pt-8 border-t border-primary-500"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.6, duration: 0.8 }}
+            >
+              {stats.map((stat, index) => (
+                <motion.div 
+                  key={index}
+                  className="text-center"
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ delay: stat.delay, duration: 0.6 }}
+                >
+                  <div className="text-2xl font-bold text-accent-400">{stat.number}</div>
+                  <div className="text-sm text-primary-200">{stat.label}</div>
+                </motion.div>
+              ))}
+            </motion.div>
+          </motion.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">
+          {/* Floating Cards */}
+          <div className="hidden lg:block relative">
+            {floatingCards.map((card, index) => (
+              <motion.div
+                key={index}
+                className="absolute glass-effect rounded-xl p-6 border border-white/20 animate-float"
+                style={card.position}
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: card.delay, duration: 0.8 }}
+                whileHover={{ scale: 1.05 }}
+              >
                 <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" />
+                    <card.icon className="h-5 w-5 text-white" aria-hidden="true" />
                   </div>
                   <div>
-                    <div className="font-semibold">Prompts Jurídicos</div>
-                    <div className="text-sm text-primary-200">Peticionamento, petições e contratos</div>
+                    <div className="font-semibold">{card.title}</div>
+                    <div className="text-sm text-primary-200">{card.description}</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>
+              </motion.div>
+            ))}
           </div>
         </div>
       </div>