Aplica una convinacion de colores basada en la paleta de colores para el restop de la web, asegurando elegancia y accesibilidad

index.html

@@ -15,7 +15,7 @@
     <!-- Hero Section -->
     <section class="relative h-screen flex items-center justify-center overflow-hidden">
         <div class="absolute inset-0 z-0">
-            <div id="particles-js" class="w-full h-full"></div>
+<div id="particles-js" class="w-full h-full"></div>
             <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-black/30 hovered-element"></div>
         </div>
 <div class="relative z-10 text-center px-6 max-w-4xl mx-auto">

style.css

@@ -1,13 +1,34 @@
+
 /* Base Styles */
 body {
   font-family: 'Inter', sans-serif;
   scroll-behavior: smooth;
+  background-color: #f8fafc;
+  color: #0f172a;
 }
 
 code, pre {
   font-family: 'Fira Code', monospace;
 }
 
+/* Color Palette */
+:root {
+  --primary: #0ea5e9;        /* Sky 500 */
+  --primary-dark: #0284c7;   /* Sky 600 */
+  --secondary: #85F1C2;      /* Custom Green */
+  --accent: #f59e0b;         /* Amber 500 */
+  --accent-dark: #d97706;    /* Amber 600 */
+  --background: #f8fafc;     /* Slate 50 */
+  --surface: #ffffff;        /* White */
+  --text-primary: #0f172a;   /* Slate 900 */
+  --text-secondary: #64748b; /* Slate 500 */
+  --text-light: #94a3b8;     /* Slate 400 */
+  --border: #e2e8f0;         /* Slate 200 */
+  --success: #10b981;        /* Emerald 500 */
+  --warning: #f59e0b;        /* Amber 500 */
+  --error: #ef4444;          /* Red 500 */
+}
+
 /* Hero Section */
 .hero-image {
   filter: brightness(0.9);
@@ -30,6 +51,7 @@ section {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 }
+
 /* Footer Icons */
 footer a svg {
   transition: all 0.3s ease;
@@ -38,9 +60,142 @@ footer a svg {
 footer a:hover svg {
   transform: scale(1.2);
 }
+
 /* Particles.js container */
 #particles-js {
   width: 100%;
   height: 100%;
   background-color: #09191E;
 }
+
+/* Updated Section Styles */
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+/* Text Styles */
+.text-3xl {
+  color: var(--text-primary);
+}
+
+.text-lg {
+  color: var(--text-secondary);
+}
+
+/* Background Styles */
+.bg-gray-100 {
+  background-color: var(--background);
+}
+
+.bg-white {
+  background-color: var(--surface);
+}
+
+.bg-gray-900 {
+  background-color: #0f172a;
+}
+
+/* Button Styles */
+.px-6.py-3 {
+  transition: all 0.3s ease;
+}
+
+.px-6.py-3.bg-amber-500 {
+  background-color: var(--accent);
+  color: white;
+}
+
+.px-6.py-3.bg-amber-500:hover {
+  background-color: var(--accent-dark);
+}
+
+.px-6.py-3.border-2.border-white {
+  border-color: var(--surface);
+  color: var(--surface);
+}
+
+.px-6.py-3.border-2.border-white:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Link Styles */
+.underline {
+  color: var(--primary);
+}
+
+.underline:hover {
+  color: var(--primary-dark);
+}
+
+/* Card Styles */
+.bg-white.p-6 {
+  background-color: var(--surface);
+  border: 1px solid var(--border);
+  transition: all 0.3s ease;
+}
+
+.bg-white.p-6:hover {
+  border-color: var(--primary);
+}
+
+/* Text Colors */
+.text-amber-500 {
+  color: var(--accent);
+}
+
+.text-gray-600 {
+  color: var(--text-secondary);
+}
+
+.text-gray-400 {
+  color: var(--text-light);
+}
+
+.text-gray-500 {
+  color: var(--text-light);
+}
+
+/* Blockquote */
+blockquote {
+  border-left-color: var(--accent);
+  color: var(--text-primary);
+}
+
+/* Footer */
+footer.py-16 {
+  background-color: #0f172a;
+}
+
+footer a {
+  color: var(--text-light);
+}
+
+footer a:hover {
+  color: var(--secondary);
+}
+
+/* Hover Effects */
+.hover\:text-amber-400:hover {
+  color: var(--secondary);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .text-4xl {
+    font-size: 2.25rem;
+  }
+  
+  .text-3xl {
+    font-size: 1.875rem;
+  }
+  
+  .text-xl {
+    font-size: 1.125rem;
+  }
+}