Utilize preto, cinza, branco.. Paleta de cores, escura

components/navbar.js

@@ -14,9 +14,9 @@ class CustomNavbar extends HTMLElement {
                 }
                 
                 .scrolled {
-                    background-color: white;
-                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-                }
+                    background-color: black;
+                    box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
+}
                 
                 .nav-link {
                     position: relative;
@@ -47,22 +47,22 @@ class CustomNavbar extends HTMLElement {
                 <div class="container mx-auto flex justify-between items-center">
                     <div class="flex items-center">
                         <a href="/" class="flex items-center">
-                            <span class="text-2xl font-bold text-primary-600 bg-white p-2 rounded-lg">BizElegance</span>
-                        </a>
+                            <span class="text-2xl font-bold text-white bg-black p-2 rounded-lg">BizElegance</span>
+</a>
                     </div>
                     
                     <div class="hidden md:flex items-center space-x-8">
-                        <a href="#features" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Features</a>
-                        <a href="#solutions" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Solutions</a>
-                        <a href="#pricing" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Pricing</a>
-                        <a href="#resources" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Resources</a>
-                        <a href="#contact" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Contact</a>
-                    </div>
+                        <a href="#features" class="nav-link text-gray-300 hover:text-white font-medium">Features</a>
+                        <a href="#solutions" class="nav-link text-gray-300 hover:text-white font-medium">Solutions</a>
+                        <a href="#pricing" class="nav-link text-gray-300 hover:text-white font-medium">Pricing</a>
+                        <a href="#resources" class="nav-link text-gray-300 hover:text-white font-medium">Resources</a>
+                        <a href="#contact" class="nav-link text-gray-300 hover:text-white font-medium">Contact</a>
+</div>
                     
                     <div class="hidden md:flex items-center space-x-4">
-                        <a href="#" class="text-primary-600 hover:text-primary-800 font-medium">Log In</a>
-                        <a href="#" class="bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg px-5 py-2.5 transition-all">
-                            Get Started
+                        <a href="#" class="text-white hover:text-gray-300 font-medium">Log In</a>
+                        <a href="#" class="bg-white hover:bg-gray-200 text-black font-medium rounded-lg px-5 py-2.5 transition-all">
+Get Started
                         </a>
                     </div>
                     
@@ -72,15 +72,15 @@ class CustomNavbar extends HTMLElement {
                 </div>
                 
                 <div id="mobile-menu" class="hidden flex-col items-center space-y-4 py-6 px-6 mt-4 bg-white rounded-lg shadow-lg md:hidden">
-                    <a href="#features" class="w-full text-center py-2 text-gray-700 hover:text-primary-600 font-medium">Features</a>
-                    <a href="#solutions" class="w-full text-center py-2 text-gray-700 hover:text-primary-600 font-medium">Solutions</a>
-                    <a href="#pricing" class="w-full text-center py-2 text-gray-700 hover:text-primary-600 font-medium">Pricing</a>
-                    <a href="#resources" class="w-full text-center py-2 text-gray-700 hover:text-primary-600 font-medium">Resources</a>
-                    <a href="#contact" class="w-full text-center py-2 text-gray-700 hover:text-primary-600 font-medium">Contact</a>
-                    <div class="w-full border-t border-gray-200 pt-4 flex flex-col space-y-4">
-                        <a href="#" class="w-full text-center py-2 text-primary-600 font-medium">Log In</a>
-                        <a href="#" class="w-full text-center py-2 bg-primary-600 text-white font-medium rounded-lg px-5 py-2.5 transition-all">
-                            Get Started
+                    <a href="#features" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Features</a>
+                    <a href="#solutions" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Solutions</a>
+                    <a href="#pricing" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Pricing</a>
+                    <a href="#resources" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Resources</a>
+                    <a href="#contact" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Contact</a>
+                    <div class="w-full border-t border-gray-700 pt-4 flex flex-col space-y-4">
+                        <a href="#" class="w-full text-center py-2 text-white font-medium">Log In</a>
+                        <a href="#" class="w-full text-center py-2 bg-white text-black font-medium rounded-lg px-5 py-2.5 transition-all">
+Get Started
                         </a>
                     </div>
                 </div>

index.html

@@ -48,7 +48,7 @@
     
     <main>
         <!-- Hero Section -->
-        <section class="relative bg-gradient-to-r from-primary-900 to-primary-700 text-white">
+        <section class="relative bg-gradient-to-r from-gray-900 to-gray-800 text-white">
 <div class="container mx-auto px-6 py-24 md:py-32 lg:py-40">
                 <div class="max-w-3xl mx-auto text-center">
                     <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 executive-heading">
@@ -202,7 +202,7 @@
             </div>
         </section>
         <!-- CTA Section -->
-        <section class="py-20 bg-gradient-to-r from-primary-800 to-primary-600 text-white">
+        <section class="py-20 bg-gradient-to-r from-gray-800 to-gray-700 text-white">
 <div class="container mx-auto px-6">
                 <div class="max-w-4xl mx-auto text-center">
                     <h2 class="text-3xl md:text-4xl font-bold mb-6">

style.css

@@ -2,25 +2,25 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
 /* Color Variables */
 :root {
-    --primary-50: #1a1a2e;
-    --primary-100: #16213e;
-    --primary-200: #0f3460;
-    --primary-300: #0d3b66;
-    --primary-400: #0a4b78;
-    --primary-500: #07689f;
-    --primary-600: #0582c7;
-    --primary-700: #039be5;
-    --primary-800: #0277bd;
-    --primary-900: #01579b;
-    --accent-100: #1e3d59;
-    --accent-200: #1a5276;
-    --accent-300: #154360;
-    --accent-400: #117a8b;
-    --accent-500: #0e6251;
-    --accent-600: #0b5345;
-    --accent-700: #083d3b;
-    --accent-800: #052e2e;
-    --accent-900: #031f1f;
+    --primary-50: #f9fafb;
+    --primary-100: #f3f4f6;
+    --primary-200: #e5e7eb;
+    --primary-300: #d1d5db;
+    --primary-400: #9ca3af;
+    --primary-500: #6b7280;
+    --primary-600: #4b5563;
+    --primary-700: #374151;
+    --primary-800: #1f2937;
+    --primary-900: #111827;
+    --accent-100: #e5e7eb;
+    --accent-200: #d1d5db;
+    --accent-300: #9ca3af;
+    --accent-400: #6b7280;
+    --accent-500: #4b5563;
+    --accent-600: #374151;
+    --accent-700: #1f2937;
+    --accent-800: #111827;
+    --accent-900: #030712;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {