use this colors

index.html

@@ -13,14 +13,14 @@
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         :root {
-            --primary: #000000;
-            --secondary: #666666;
-            --accent: #000000;
-            --background: #FFFFFF;
-            --text-primary: #000000;
-            --text-secondary: #666666;
-            --border: #E5E7EB;
-            --hover: #F5F5F5;
+            --primary: #2563eb;
+            --secondary: #64748b;
+            --accent: #3b82f6;
+            --background: #f8fafc;
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --border: #e2e8f0;
+            --hover: #f1f5f9;
         }
 body {
             font-family: 'Inter', sans-serif;
@@ -28,7 +28,6 @@ body {
             background-color: var(--background);
             line-height: 1.6;
         }
-        
         .btn-primary {
             background-color: var(--primary);
             color: white;
@@ -39,11 +38,10 @@ body {
         }
         
         .btn-primary:hover {
-            background-color: #000000;
+            background-color: #1d4ed8;
             transform: translateY(-1px);
         }
-        
-        .btn-secondary {
+.btn-secondary {
             background-color: white;
             color: var(--primary);
             padding: 12px 24px;
@@ -58,7 +56,7 @@ body {
             transform: translateY(-1px);
         }
         .gradient-text {
-            background: linear-gradient(135deg, #000000 0%, #333333 100%);
+            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
@@ -141,22 +139,22 @@ body {
             </div>
             <div class="grid md:grid-cols-3 gap-8">
                 <div class="card p-8">
-                <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
-                    <i data-feather="zap" class="w-6 h-6 text-black"></i>
+                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                    <i data-feather="zap" class="w-6 h-6 text-blue-600"></i>
                 </div>
 <h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
                     <p class="text-gray-600">Optimized components that load instantly and perform beautifully across all devices.</p>
                 </div>
                 <div class="card p-8">
-                <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
-                    <i data-feather="code" class="w-6 h-6 text-black"></i>
+                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                    <i data-feather="code" class="w-6 h-6 text-blue-600"></i>
                 </div>
 <h3 class="text-xl font-semibold mb-3">Developer First</h3>
                     <p class="text-gray-600">Clean, semantic code that's easy to customize and extend to your needs.</p>
                 </div>
                 <div class="card p-8">
-                <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
-                    <i data-feather="layers" class="w-6 h-6 text-black"></i>
+                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                    <i data-feather="layers" class="w-6 h-6 text-blue-600"></i>
                 </div>
 <h3 class="text-xl font-semibold mb-3">Comprehensive</h3>
                     <p class="text-gray-600">Hundreds of components covering every use case from forms to complex data displays.</p>