Spaces:

DHEIVER
/

IA-Toolbox-Hub

Sleeping

App Files Files Community

DHEIVER commited on Nov 22, 2024

Commit

0cee204

verified ·

1 Parent(s): ce208c8

Update index.html

Browse files

Files changed (1) hide show

index.html +91 -37

index.html CHANGED Viewed

@@ -8,12 +8,14 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
     <style>
         :root {
-            --primary: #1DA1F2;
-            --primary-dark: #1A8CD8;
-            --background: #15202B;
-            --text: #FFFFFF;
-            --text-secondary: #8899A6;
-            --border: #38444D;
         }
         body {
@@ -25,7 +27,7 @@
         }
         .nav-fixed {
-            background: rgba(21, 32, 43, 0.9);
             backdrop-filter: blur(12px);
             border-bottom: 1px solid var(--border);
         }
@@ -33,61 +35,83 @@
         .btn-twitter {
             background: var(--primary);
             color: white;
-            transition: background 0.2s;
             font-weight: 600;
         }
         .btn-twitter:hover {
             background: var(--primary-dark);
         }
         .card {
-            background: rgba(255, 255, 255, 0.05);
             border: 1px solid var(--border);
-            transition: background 0.2s;
         }
         .card:hover {
-            background: rgba(255, 255, 255, 0.08);
         }
         .profile-image {
             border: 4px solid var(--primary);
         }
         .verified {
             color: var(--primary);
         }
     </style>
 </head>
 <body class="min-h-screen">
     <nav class="nav-fixed w-full z-50 py-3">
         <div class="container mx-auto px-4 flex items-center justify-between">
-            <span class="text-2xl font-bold text-blue-400">IA Toolbox</span>
             <button class="btn-twitter px-6 py-2 rounded-full">Conectar</button>
         </div>
     </nav>
     <main class="container mx-auto px-4 pt-20 max-w-3xl">
-        <div class="card rounded-xl p-6 mb-8">
             <div class="flex items-start space-x-4">
                 <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 w-20 h-20 rounded-full"/>
-                <div>
                     <div class="flex items-center space-x-2">
-                        <h2 class="text-xl font-bold">Dheiver Santos, PhD</h2>
                         <i class="fas fa-check-circle verified"></i>
                     </div>
-                    <p class="text-text-secondary">@IAToolbox</p>
-                    <div class="mt-2 space-y-1 text-sm text-text-secondary">
-                        <div class="flex items-center space-x-2">
-                            <i class="fas fa-graduation-cap"></i>
                             <span>Doutor em IA/AM</span>
                         </div>
-                        <div class="flex items-center space-x-2">
-                            <i class="fas fa-star"></i>
-                            <span>200+ Artigos • 50k+ Leitores • 300+ Citações</span>
                         </div>
                     </div>
                 </div>
@@ -95,43 +119,73 @@
         </div>
         <div class="grid grid-cols-1 gap-4">
-            <div x-data="{ open: false }" class="card rounded-xl p-6 cursor-pointer" @click="open = !open">
                 <div class="flex items-center space-x-4">
-                    <i class="fas fa-microphone text-blue-400 text-2xl"></i>
                     <div class="flex-1">
-                        <h3 class="font-bold">Transcrição de Áudio</h3>
-                        <p x-show="open" class="mt-2 text-text-secondary">Converta áudio em texto com alta precisão usando IA avançada.</p>
                     </div>
                     <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
             </div>
-            <div x-data="{ open: false }" class="card rounded-xl p-6 cursor-pointer" @click="open = !open">
                 <div class="flex items-center space-x-4">
-                    <i class="fas fa-language text-blue-400 text-2xl"></i>
                     <div class="flex-1">
-                        <h3 class="font-bold">Tradução Neural</h3>
-                        <p x-show="open" class="mt-2 text-text-secondary">Traduções precisas entre múltiplos idiomas em tempo real.</p>
                     </div>
                     <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
             </div>
-            <div x-data="{ open: false }" class="card rounded-xl p-6 cursor-pointer" @click="open = !open">
                 <div class="flex items-center space-x-4">
-                    <i class="fas fa-robot text-blue-400 text-2xl"></i>
                     <div class="flex-1">
-                        <h3 class="font-bold">Chat IA</h3>
-                        <p x-show="open" class="mt-2 text-text-secondary">Interaja com um assistente virtual avançado.</p>
                     </div>
                     <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
             </div>
         </div>
-        <footer class="mt-8 py-4 text-center text-sm text-text-secondary">
             <p>© 2024 IA Toolbox Hub • Citação: Santos, D. (2024)</p>
         </footer>
     </main>
 </body>
-</html>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
     <style>
         :root {
+            --primary: #1d9bf0;
+            --primary-dark: #1a8cd8;
+            --background: #ffffff;
+            --card-bg: #f7f9f9;
+            --text: #0f1419;
+            --text-secondary: #536471;
+            --border: #eff3f4;
+            --hover: #e8f5fd;
         }
         body {
         }
         .nav-fixed {
+            background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(12px);
             border-bottom: 1px solid var(--border);
         }
         .btn-twitter {
             background: var(--primary);
             color: white;
+            transition: all 0.2s;
             font-weight: 600;
         }
         .btn-twitter:hover {
             background: var(--primary-dark);
+            transform: scale(1.05);
         }
         .card {
+            background: var(--card-bg);
             border: 1px solid var(--border);
+            transition: all 0.2s;
         }
         .card:hover {
+            background: var(--hover);
+            transform: translateY(-2px);
         }
         .profile-image {
             border: 4px solid var(--primary);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
         .verified {
             color: var(--primary);
         }
+        .stat-number {
+            color: var(--text);
+            font-weight: 700;
+        }
+        .stat-label {
+            color: var(--text-secondary);
+        }
     </style>
 </head>
 <body class="min-h-screen">
     <nav class="nav-fixed w-full z-50 py-3">
         <div class="container mx-auto px-4 flex items-center justify-between">
+            <span class="text-2xl font-bold text-primary">IA Toolbox</span>
             <button class="btn-twitter px-6 py-2 rounded-full">Conectar</button>
         </div>
     </nav>
     <main class="container mx-auto px-4 pt-20 max-w-3xl">
+        <div class="card rounded-xl p-6 mb-8 shadow-sm">
             <div class="flex items-start space-x-4">
                 <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 w-24 h-24 rounded-full"/>
+                <div class="flex-1">
                     <div class="flex items-center space-x-2">
+                        <h2 class="text-xl font-bold text-text">Dheiver Santos, PhD</h2>
                         <i class="fas fa-check-circle verified"></i>
                     </div>
+                    <p class="text-text-secondary font-medium">@IAToolbox</p>
+                    <div class="mt-3 space-y-2">
+                        <div class="flex items-center space-x-2 text-text-secondary">
+                            <i class="fas fa-graduation-cap text-primary"></i>
                             <span>Doutor em IA/AM</span>
                         </div>
+                        <div class="flex flex-wrap gap-4 mt-2">
+                            <span>
+                                <span class="stat-number">200+</span>
+                                <span class="stat-label"> Artigos</span>
+                            </span>
+                            <span>
+                                <span class="stat-number">50k+</span>
+                                <span class="stat-label"> Leitores</span>
+                            </span>
+                            <span>
+                                <span class="stat-number">300+</span>
+                                <span class="stat-label"> Citações</span>
+                            </span>
                         </div>
                     </div>
                 </div>
         </div>
         <div class="grid grid-cols-1 gap-4">
+            <div x-data="{ open: false }"
+                 class="card rounded-xl p-6 shadow-sm hover:shadow-md cursor-pointer"
+                 @click="open = !open">
                 <div class="flex items-center space-x-4">
+                    <div class="bg-blue-50 p-3 rounded-full">
+                        <i class="fas fa-microphone text-primary text-xl"></i>
+                    </div>
                     <div class="flex-1">
+                        <h3 class="font-bold text-text">Transcrição de Áudio</h3>
+                        <p x-show="open"
+                           x-transition:enter="transition ease-out duration-200"
+                           x-transition:enter-start="opacity-0 transform -translate-y-4"
+                           x-transition:enter-end="opacity-100 transform translate-y-0"
+                           class="mt-2 text-text-secondary">
+                            Converta áudio em texto com alta precisão usando IA avançada
+                        </p>
                     </div>
                     <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
             </div>
+            <div x-data="{ open: false }"
+                 class="card rounded-xl p-6 shadow-sm hover:shadow-md cursor-pointer"
+                 @click="open = !open">
                 <div class="flex items-center space-x-4">
+                    <div class="bg-blue-50 p-3 rounded-full">
+                        <i class="fas fa-language text-primary text-xl"></i>
+                    </div>
                     <div class="flex-1">
+                        <h3 class="font-bold text-text">Tradução Neural</h3>
+                        <p x-show="open"
+                           x-transition:enter="transition ease-out duration-200"
+                           x-transition:enter-start="opacity-0 transform -translate-y-4"
+                           x-transition:enter-end="opacity-100 transform translate-y-0"
+                           class="mt-2 text-text-secondary">
+                            Traduções precisas entre múltiplos idiomas em tempo real
+                        </p>
                     </div>
                     <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
             </div>
+            <div x-data="{ open: false }"
+                 class="card rounded-xl p-6 shadow-sm hover:shadow-md cursor-pointer"
+                 @click="open = !open">
                 <div class="flex items-center space-x-4">
+                    <div class="bg-blue-50 p-3 rounded-full">
+                        <i class="fas fa-robot text-primary text-xl"></i>
+                    </div>
                     <div class="flex-1">
+                        <h3 class="font-bold text-text">Chat IA</h3>
+                        <p x-show="open"
+                           x-transition:enter="transition ease-out duration-200"
+                           x-transition:enter-start="opacity-0 transform -translate-y-4"
+                           x-transition:enter-end="opacity-100 transform translate-y-0"
+                           class="mt-2 text-text-secondary">
+                            Interaja com um assistente virtual avançado
+                        </p>
                     </div>
                     <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
             </div>
         </div>
+        <footer class="mt-8 py-4 text-center text-sm text-text-secondary border-t border-border">
             <p>© 2024 IA Toolbox Hub • Citação: Santos, D. (2024)</p>
         </footer>
     </main>
 </body>
+</html>