Update index.html

index.html

@@ -7,128 +7,252 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
+    <style>
+        :root {
+            --primary-color: #3B82F6;
+            --primary-dark: #2563EB;
+            --secondary-color: #1F2937;
+            --accent-color: #60A5FA;
+            --background-light: #F3F4F6;
+            --text-primary: #1F2937;
+            --text-secondary: #4B5563;
+            --transition-speed: 0.3s;
+        }
+
+        body {
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            line-height: 1.5;
+            color: var(--text-primary);
+            background: linear-gradient(135deg, var(--background-light), #E0E7FF);
+            min-height: 100vh;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes pulseGlow {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+
+        .nav-link {
+            position: relative;
+            color: var(--text-secondary);
+            transition: color var(--transition-speed);
+        }
+
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background-color: var(--primary-color);
+            transition: width var(--transition-speed);
+        }
+
+        .nav-link:hover::after {
+            width: 100%;
+        }
+
+        .gradient-text {
+            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: fadeIn 1s ease-out;
+        }
+
+        .feature-card {
+            transition: all var(--transition-speed);
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+        }
+
+        .feature-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+                        0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+
+        .profile-image {
+            animation: pulseGlow 2s infinite;
+        }
+
+        .btn-primary {
+            background: var(--primary-color);
+            color: white;
+            transition: all var(--transition-speed);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-dark);
+        }
+
+        .btn-primary::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: -100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s;
+        }
+
+        .btn-primary:hover::after {
+            left: 100%;
+        }
+
+        .loading {
+            position: relative;
+            opacity: 0.7;
+        }
+
+        .loading::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 24px;
+            height: 24px;
+            margin: -12px 0 0 -12px;
+            border: 2px solid var(--primary-color);
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+    </style>
 </head>
-<body class="bg-gradient-to-br from-gray-100 to-blue-50 min-h-screen">
-    <nav class="bg-white shadow-lg">
-        <div class="container mx-auto px-6 py-3">
+<body>
+    <nav class="fixed w-full z-50 glass-effect">
+        <div class="container mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
-                <div class="text-xl font-bold text-gray-800">IA Toolbox Hub</div>
+                <div class="text-xl font-bold gradient-text">IA Toolbox Hub</div>
                 <div class="hidden md:flex space-x-8">
-                    <a href="#features" class="text-gray-600 hover:text-blue-500 transition">Recursos</a>
-                    <a href="#about" class="text-gray-600 hover:text-blue-500 transition">Sobre</a>
-                    <a href="#contact" class="text-gray-600 hover:text-blue-500 transition">Contato</a>
+                    <a href="#features" class="nav-link">Recursos</a>
+                    <a href="#about" class="nav-link">Sobre</a>
+                    <a href="#contact" class="nav-link">Contato</a>
+                    <button class="btn-primary px-4 py-2 rounded-lg">Iniciar</button>
                 </div>
             </div>
         </div>
     </nav>
 
-    <div class="container mx-auto px-4 py-12">
-        <header class="text-center mb-16">
-            <h1 class="text-5xl font-bold text-gray-800 mb-4">IA Toolbox Hub</h1>
-            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Uma plataforma inteligente que revoluciona o processamento de linguagem natural através de tecnologias de ponta</p>
-        </header>
+    <main class="pt-20">
+        <div class="container mx-auto px-4 py-12">
+            <header class="text-center mb-16">
+                <h1 class="text-5xl font-bold gradient-text mb-4">IA Toolbox Hub</h1>
+                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Revolucionando o processamento de linguagem natural</p>
+            </header>
 
-        <div x-data="{ activeTab: 'profile' }" class="bg-white rounded-lg shadow-xl p-8 mb-16">
-            <div class="flex space-x-4 mb-8">
-                <button @click="activeTab = 'profile'" :class="{ 'bg-blue-500 text-white': activeTab === 'profile' }" class="px-4 py-2 rounded-lg transition">Perfil</button>
-                <button @click="activeTab = 'stats'" :class="{ 'bg-blue-500 text-white': activeTab === 'stats' }" class="px-4 py-2 rounded-lg transition">Estatísticas</button>
-            </div>
+            <div x-data="{ activeTab: 'profile' }" class="glass-effect rounded-xl p-8 mb-16">
+                <div class="flex space-x-4 mb-8">
+                    <button @click="activeTab = 'profile'" 
+                            :class="{ 'bg-blue-500 text-white': activeTab === 'profile' }"
+                            class="px-4 py-2 rounded-lg transition">
+                        Perfil
+                    </button>
+                    <button @click="activeTab = 'stats'"
+                            :class="{ 'bg-blue-500 text-white': activeTab === 'stats' }"
+                            class="px-4 py-2 rounded-lg transition">
+                        Estatísticas
+                    </button>
+                </div>
 
-            <div x-show="activeTab === 'profile'" class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/3 mb-6 md:mb-0 relative">
-                    <img src="/api/placeholder/96/96" alt="Dheiver Santos" class="rounded-full mx-auto w-24 h-24 object-cover ring-4 ring-blue-500"/>
-                    <div class="absolute -bottom-2 -right-2 bg-blue-500 text-white p-2 rounded-full">
-                        <i class="fas fa-check"></i>
+                <div x-show="activeTab === 'profile'" class="flex flex-col md:flex-row items-center">
+                    <div class="md:w-1/3 mb-6 md:mb-0 relative">
+                        <img src="/api/placeholder/96/96" alt="Dheiver Santos" 
+                             class="profile-image rounded-full mx-auto w-24 h-24 object-cover"/>
                     </div>
-                </div>
-                <div class="md:w-2/3 md:pl-8">
-                    <h2 class="text-3xl font-bold mb-4">Dheiver Santos, PhD</h2>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <div class="flex items-center space-x-2">
-                            <i class="fas fa-graduation-cap text-blue-500"></i>
-                            <span>Doutor em IA/AM</span>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <i class="fas fa-star text-blue-500"></i>
-                            <span>Especialista em IA de Voz/IA Generativa</span>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <i class="fas fa-book text-blue-500"></i>
-                            <span>30 eBooks Publicados</span>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <i class="fas fa-trophy text-blue-500"></i>
-                            <span>Titular de Patente INPI</span>
+                    <div class="md:w-2/3 md:pl-8">
+                        <h2 class="text-3xl font-bold mb-4">Dheiver Santos, PhD</h2>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="flex items-center space-x-2">
+                                <i class="fas fa-graduation-cap text-blue-500"></i>
+                                <span>Doutor em IA/AM</span>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <i class="fas fa-star text-blue-500"></i>
+                                <span>Especialista em IA</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div x-show="activeTab === 'stats'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div class="bg-blue-50 p-6 rounded-lg text-center">
-                    <div class="text-4xl font-bold text-blue-500 mb-2">200+</div>
-                    <div class="text-gray-600">Artigos Publicados</div>
-                </div>
-                <div class="bg-blue-50 p-6 rounded-lg text-center">
-                    <div class="text-4xl font-bold text-blue-500 mb-2">50k+</div>
-                    <div class="text-gray-600">Leitores</div>
-                </div>
-                <div class="bg-blue-50 p-6 rounded-lg text-center">
-                    <div class="text-4xl font-bold text-blue-500 mb-2">300+</div>
-                    <div class="text-gray-600">Citações</div>
+                <div x-show="activeTab === 'stats'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="glass-effect p-6 rounded-lg text-center">
+                        <div class="text-4xl font-bold gradient-text mb-2">200+</div>
+                        <div class="text-gray-600">Artigos</div>
+                    </div>
+                    <div class="glass-effect p-6 rounded-lg text-center">
+                        <div class="text-4xl font-bold gradient-text mb-2">50k+</div>
+                        <div class="text-gray-600">Leitores</div>
+                    </div>
+                    <div class="glass-effect p-6 rounded-lg text-center">
+                        <div class="text-4xl font-bold gradient-text mb-2">300+</div>
+                        <div class="text-gray-600">Citações</div>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
-            <div x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" 
-                 class="bg-white rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105">
-                <div class="text-blue-500 text-3xl mb-4">
-                    <i class="fas fa-microphone"></i>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+                <div class="feature-card rounded-xl p-6">
+                    <div class="text-blue-500 text-3xl mb-4">
+                        <i class="fas fa-microphone"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Transcrição de Áudio</h3>
+                    <p class="text-gray-600 mb-4">Converta áudio em texto com alta precisão.</p>
+                    <button class="btn-primary w-full py-2 rounded-lg">Experimentar</button>
                 </div>
-                <h3 class="text-xl font-bold mb-4">Transcrição de Áudio</h3>
-                <p class="text-gray-600 mb-4">Converta áudio em texto com alta precisão usando modelos state-of-the-art.</p>
-                <button class="bg-blue-500 text-white px-4 py-2 rounded-lg w-full transition hover:bg-blue-600">
-                    Experimentar
-                </button>
-            </div>
-            
-            <div x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" 
-                 class="bg-white rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105">
-                <div class="text-blue-500 text-3xl mb-4">
-                    <i class="fas fa-language"></i>
+
+                <div class="feature-card rounded-xl p-6">
+                    <div class="text-blue-500 text-3xl mb-4">
+                        <i class="fas fa-language"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Tradução</h3>
+                    <p class="text-gray-600 mb-4">Traduções profissionais em tempo real.</p>
+                    <button class="btn-primary w-full py-2 rounded-lg">Experimentar</button>
                 </div>
-                <h3 class="text-xl font-bold mb-4">Tradução</h3>
-                <p class="text-gray-600 mb-4">Traduza textos entre português e inglês com qualidade profissional.</p>
-                <button class="bg-blue-500 text-white px-4 py-2 rounded-lg w-full transition hover:bg-blue-600">
-                    Experimentar
-                </button>
-            </div>
 
-            <div x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" 
-                 class="bg-white rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105">
-                <div class="text-blue-500 text-3xl mb-4">
-                    <i class="fas fa-file-alt"></i>
+                <div class="feature-card rounded-xl p-6">
+                    <div class="text-blue-500 text-3xl mb-4">
+                        <i class="fas fa-file-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Resumo</h3>
+                    <p class="text-gray-600 mb-4">Gere resumos concisos e precisos.</p>
+                    <button class="btn-primary w-full py-2 rounded-lg">Experimentar</button>
                 </div>
-                <h3 class="text-xl font-bold mb-4">Resumo</h3>
-                <p class="text-gray-600 mb-4">Gere resumos concisos mantendo as informações essenciais do texto.</p>
-                <button class="bg-blue-500 text-white px-4 py-2 rounded-lg w-full transition hover:bg-blue-600">
-                    Experimentar
-                </button>
             </div>
-        </div>
 
-        <footer class="bg-white rounded-lg shadow-lg p-8 text-center">
-            <h3 class="text-2xl font-bold mb-4">Como Citar</h3>
-            <div class="bg-gray-50 p-4 rounded-lg inline-block">
-                <code class="text-sm">
-                    Santos, D. (2024). IA Toolbox Hub [Software]. Hugging Face Spaces.
-                </code>
-                <button class="ml-2 text-blue-500 hover:text-blue-600" onclick="navigator.clipboard.writeText('Santos, D. (2024). IA Toolbox Hub [Software]. Hugging Face Spaces.')">
-                    <i class="far fa-copy"></i>
-                </button>
-            </div>
-        </footer>
-    </div>
+            <footer class="glass-effect rounded-xl p-8 text-center">
+                <h3 class="text-2xl font-bold mb-4">Como Citar</h3>
+                <div class="bg-white/50 p-4 rounded-lg inline-block">
+                    <code class="text-sm">
+                        Santos, D. (2024). IA Toolbox Hub [Software]. Hugging Face Spaces.
+                    </code>
+                    <button class="ml-2 text-blue-500 hover:text-blue-600"
+                            onclick="navigator.clipboard.writeText('Santos, D. (2024). IA Toolbox Hub [Software]. Hugging Face Spaces.')">
+                        <i class="far fa-copy"></i>
+                    </button>
+                </div>
+            </footer>
+        </div>
+    </main>
 </body>
 </html>