Update index.html

index.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>IA Toolbox Hub - Dheiver Santos</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+    <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>
-        /* Custom Properties */
         :root {
             --primary-color: #3B82F6;
             --primary-dark: #2563EB;
@@ -19,13 +19,6 @@
             --transition-speed: 0.3s;
         }
 
-        /* Global Styles */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
         body {
             font-family: 'Inter', system-ui, -apple-system, sans-serif;
             line-height: 1.5;
@@ -34,7 +27,6 @@
             min-height: 100vh;
         }
 
-        /* Animations */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
@@ -46,67 +38,20 @@
             100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
         }
 
-        @keyframes slide {
-            from { transform: translateX(-100%); }
-            to { transform: translateX(100%); }
-        }
-
-        /* Layout Components */
-        .container {
-            width: 100%;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 1rem;
-        }
-
-        /* Navigation */
-        .nav-fixed {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 1000;
-            background: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .nav-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem;
-        }
-
-        .nav-logo {
-            font-size: 1.5rem;
-            font-weight: bold;
-            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 2rem;
-            align-items: center;
-        }
-
         .nav-link {
-            color: var(--text-secondary);
-            text-decoration: none;
             position: relative;
-            padding: 0.5rem 0;
+            color: var(--text-secondary);
+            transition: color var(--transition-speed);
         }
 
         .nav-link::after {
             content: '';
             position: absolute;
-            bottom: 0;
-            left: 0;
             width: 0;
             height: 2px;
-            background: var(--primary-color);
+            bottom: -2px;
+            left: 0;
+            background-color: var(--primary-color);
             transition: width var(--transition-speed);
         }
 
@@ -114,113 +59,33 @@
             width: 100%;
         }
 
-        /* Header */
-        .header {
-            padding-top: 6rem;
-            text-align: center;
-            margin-bottom: 4rem;
-        }
-
-        .header-title {
-            font-size: 3rem;
-            font-weight: bold;
+        .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;
         }
 
-        .header-subtitle {
-            font-size: 1.25rem;
-            color: var(--text-secondary);
-            max-width: 600px;
-            margin: 1rem auto;
-        }
-
-        /* Profile Section */
-        .profile-card {
-            background: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(10px);
-            border-radius: 1rem;
-            padding: 2rem;
-            margin-bottom: 4rem;
-        }
-
-        .profile-image-container {
-            position: relative;
-            width: fit-content;
-            margin: 0 auto;
-        }
-
-        .profile-image {
-            width: 128px;
-            height: 128px;
-            border-radius: 50%;
-            object-fit: cover;
-            border: 4px solid var(--primary-color);
-            animation: pulseGlow 2s infinite;
-            transition: transform var(--transition-speed);
-        }
-
-        .profile-image:hover {
-            transform: scale(1.05);
-        }
-
-        .verified-badge {
-            position: absolute;
-            bottom: -5px;
-            right: -5px;
-            background: var(--primary-color);
-            color: white;
-            padding: 0.5rem;
-            border-radius: 50%;
-            font-size: 0.875rem;
-        }
-
-        /* Feature Cards */
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-            margin-bottom: 4rem;
-        }
-
         .feature-card {
+            transition: all var(--transition-speed);
             background: rgba(255, 255, 255, 0.9);
             backdrop-filter: blur(10px);
-            border-radius: 1rem;
-            padding: 2rem;
-            transition: all var(--transition-speed);
         }
 
         .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);
+                        0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
 
-        .feature-icon {
-            font-size: 2rem;
-            color: var(--primary-color);
-            margin-bottom: 1rem;
-        }
-
-        /* Buttons */
-        .btn {
-            display: inline-block;
-            padding: 0.75rem 1.5rem;
-            border-radius: 0.5rem;
-            font-weight: 600;
-            text-decoration: none;
-            transition: all var(--transition-speed);
-            cursor: pointer;
-            border: none;
-            outline: none;
+        .profile-image {
+            animation: pulseGlow 2s infinite;
         }
 
         .btn-primary {
             background: var(--primary-color);
             color: white;
+            transition: all var(--transition-speed);
             position: relative;
             overflow: hidden;
         }
@@ -232,96 +97,39 @@
         .btn-primary::after {
             content: '';
             position: absolute;
-            top: 0;
-            left: -100%;
             width: 100%;
             height: 100%;
-            background: linear-gradient(
-                90deg,
-                transparent,
-                rgba(255, 255, 255, 0.2),
-                transparent
-            );
-            animation: slide 1s infinite;
-        }
-
-        /* Stats Section */
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 2rem;
-        }
-
-        .stat-card {
-            background: rgba(255, 255, 255, 0.7);
-            padding: 1.5rem;
-            border-radius: 1rem;
-            text-align: center;
-        }
-
-        .stat-number {
-            font-size: 2.5rem;
-            font-weight: bold;
-            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        /* Footer */
-        .footer {
-            background: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(10px);
-            border-radius: 1rem;
-            padding: 2rem;
-            text-align: center;
-            margin-top: 4rem;
-        }
-
-        .citation {
-            background: rgba(255, 255, 255, 0.5);
-            padding: 1rem;
-            border-radius: 0.5rem;
-            display: inline-block;
-            margin-top: 1rem;
+            top: 0;
+            left: -100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s;
         }
 
-        .copy-button {
-            background: none;
-            border: none;
-            color: var(--primary-color);
-            cursor: pointer;
-            padding: 0.5rem;
-            transition: color var(--transition-speed);
+        .btn-primary:hover::after {
+            left: 100%;
         }
 
-        .copy-button:hover {
-            color: var(--primary-dark);
+        .loading {
+            position: relative;
+            opacity: 0.7;
         }
 
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .nav-links {
-                display: none;
-            }
-
-            .header-title {
-                font-size: 2rem;
-            }
-
-            .profile-card {
-                padding: 1rem;
-            }
-
-            .features-grid {
-                grid-template-columns: 1fr;
-            }
+        .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;
         }
 
-        /* Utility Classes */
-        .gradient-text {
-            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
 
         .glass-effect {
@@ -332,244 +140,119 @@
     </style>
 </head>
 <body>
-    <nav class="nav-fixed">
-        <div class="container nav-container">
-            <div class="nav-logo">IA Toolbox Hub</div>
-            <div class="nav-links">
-                <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 btn-primary">Iniciar</button>
+    <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 gradient-text">IA Toolbox Hub</div>
+                <div class="hidden md:flex space-x-8">
+                    <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>
 
-    <main>
-        <div class="container">
-            <header class="header">
-                <h1 class="header-title">IA Toolbox Hub</h1>
-                <p class="header-subtitle">Revolucionando o processamento de linguagem natural</p>
+    <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="profile-card">
+            <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="{ 'btn-primary': activeTab === 'profile' }"
-                            class="btn">
+                            :class="{ 'bg-blue-500 text-white': activeTab === 'profile' }"
+                            class="px-4 py-2 rounded-lg transition">
                         Perfil
                     </button>
                     <button @click="activeTab = 'stats'"
-                            :class="{ 'btn-primary': activeTab === 'stats' }"
-                            class="btn">
+                            :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'" 
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0 transform scale-95"
-                     x-transition:enter-end="opacity-100 transform scale-100">
-                    <div class="profile-image-container">
-                        <img src="https://media.licdn.com/dms/image/v2/D4D03AQE-v0C-qPJakQ/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1731926431165?e=1737590400&v=beta&t=rTBD9bV8vOPCkmR5AXGZgQdH-7mbogEXZzCyO4Hiwr0" 
-                             alt="Dheiver Santos" 
-                             class="profile-image"/>
-                        <div class="verified-badge">
-                            <i class="fas fa-check"></i>
-                        </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="profile-image rounded-full mx-auto w-24 h-24 object-cover"/>
                     </div>
-                    <div class="text-center mt-6">
-                        <h2 class="text-2xl font-bold mb-4">Dheiver Santos, PhD</h2>
+                    <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 justify-center space-x-2">
+                            <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 justify-center space-x-2">
+                            <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 justify-center space-x-2">
-                                <i class="fas fa-book text-blue-500"></i>
-                                <span>30 eBooks Publicados</span>
-                            </div>
-                            <div class="flex items-center justify-center space-x-2">
-                                <i class="fas fa-trophy text-blue-500"></i>
-                                <span>Titular de Patente INPI</span>
+                                <span>Especialista em IA</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <div x-show="activeTab === 'stats'"
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0 transform scale-95"
-                     x-transition:enter-end="opacity-100 transform scale-100"
-                     class="stats-grid">
-                    <div class="stat-card">
-                        <div class="stat-number">200+</div>
-                        <div>Artigos Publicados</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="stat-card">
-                        <div class="stat-number">50k+</div>
-                        <div>Leitores</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="stat-card">
-                        <div class="stat-number">300+</div>
-                        <div>Citações</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 class="features-grid">
-                <div class="feature-card">
-                    <div class="feature-icon">
-<div class="feature-card">
-                    <div class="feature-icon">
+            <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 usando modelos state-of-the-art.</p>
-                    <button class="btn btn-primary w-full">Experimentar</button>
+                    <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>
 
-                <div class="feature-card">
-                    <div class="feature-icon">
+                <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">Traduza textos entre português e inglês com qualidade profissional.</p>
-                    <button class="btn btn-primary w-full">Experimentar</button>
+                    <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>
 
-                <div class="feature-card">
-                    <div class="feature-icon">
+                <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 mantendo as informações essenciais do texto.</p>
-                    <button class="btn btn-primary w-full">Experimentar</button>
-                </div>
-
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-heart"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-4">Análise de Sentimento</h3>
-                    <p class="text-gray-600 mb-4">Identifique o tom emocional em textos com precisão.</p>
-                    <button class="btn btn-primary w-full">Experimentar</button>
-                </div>
-
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-comments"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-4">Perguntas e Respostas</h3>
-                    <p class="text-gray-600 mb-4">Obtenha respostas precisas baseadas em contexto fornecido.</p>
-                    <button class="btn btn-primary w-full">Experimentar</button>
-                </div>
-
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-robot"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-4">Chat Interativo</h3>
-                    <p class="text-gray-600 mb-4">Interaja com um assistente virtual inteligente e versátil.</p>
-                    <button class="btn btn-primary w-full">Experimentar</button>
+                    <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>
             </div>
 
-            <div class="glass-effect p-8 rounded-xl mb-12">
-                <h2 class="text-2xl font-bold mb-6 text-center">Métricas de Impacto</h2>
-                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-                    <div class="text-center">
-                        <div class="text-3xl font-bold gradient-text">200+</div>
-                        <div class="text-gray-600">Produtos de IA</div>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-3xl font-bold gradient-text">30</div>
-                        <div class="text-gray-600">eBooks</div>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-3xl font-bold gradient-text">50k+</div>
-                        <div class="text-gray-600">Leitores</div>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-3xl font-bold gradient-text">300+</div>
-                        <div class="text-gray-600">Citações</div>
-                    </div>
-                </div>
-            </div>
-
-            <footer class="footer">
+            <footer class="glass-effect rounded-xl p-8 text-center">
                 <h3 class="text-2xl font-bold mb-4">Como Citar</h3>
-                <div class="citation">
+                <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="copy-button ml-2" 
+                    <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>
-
-                <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div>
-                        <h4 class="font-bold mb-4">Contato</h4>
-                        <div class="space-y-2">
-                            <a href="#" class="flex items-center justify-center space-x-2 text-gray-600 hover:text-blue-500 transition">
-                                <i class="fab fa-linkedin"></i>
-                                <span>LinkedIn</span>
-                            </a>
-                            <a href="#" class="flex items-center justify-center space-x-2 text-gray-600 hover:text-blue-500 transition">
-                                <i class="fab fa-github"></i>
-                                <span>GitHub</span>
-                            </a>
-                        </div>
-                    </div>
-                    <div>
-                        <h4 class="font-bold mb-4">Recursos</h4>
-                        <div class="space-y-2">
-                            <a href="#" class="block text-gray-600 hover:text-blue-500 transition">Documentação</a>
-                            <a href="#" class="block text-gray-600 hover:text-blue-500 transition">API</a>
-                        </div>
-                    </div>
-                    <div>
-                        <h4 class="font-bold mb-4">Legal</h4>
-                        <div class="space-y-2">
-                            <a href="#" class="block text-gray-600 hover:text-blue-500 transition">Termos de Uso</a>
-                            <a href="#" class="block text-gray-600 hover:text-blue-500 transition">Privacidade</a>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="mt-8 pt-8 border-t border-gray-200">
-                    <p class="text-gray-600">© 2024 IA Toolbox Hub. Todos os direitos reservados.</p>
-                </div>
             </footer>
         </div>
     </main>
-
-    <!-- Scripts -->
-    <script>
-        // Smooth scroll for navigation links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                document.querySelector(this.getAttribute('href')).scrollIntoView({
-                    behavior: 'smooth'
-                });
-            });
-        });
-
-        // Add loading state to buttons
-        document.querySelectorAll('.btn-primary').forEach(button => {
-            button.addEventListener('click', function() {
-                this.classList.add('loading');
-                setTimeout(() => {
-                    this.classList.remove('loading');
-                }, 2000);
-            });
-        });
-    </script>
 </body>
-</html>                          
+</html>