From d63a44377496c4c0a10cd3a35843e134ded33d01 Mon Sep 17 00:00:00 2001
From: eshanized <m.eshanized@gmail.com>
Date: Thu, 19 Dec 2024 13:27:50 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style(ui*):=20change=20the=20primar?=
 =?UTF-8?q?y=20color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Header.tsx | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index aeb280d..ea0641d 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -18,14 +18,14 @@ export function Header() {
               alt="Snigdha OS"
               className="h-12 w-12 group-hover:scale-125 transition-transform duration-300"
             />
-            <span className="font-extrabold text-3xl tracking-wide text-indigo-400 group-hover:text-white transition-colors duration-300">
+            <span className="font-extrabold text-3xl tracking-wide text-[#6495ED] group-hover:text-white transition-colors duration-300">
               SNIGDHA OS
             </span>
           </Link>
 
           {/* Mobile menu button */}
           <button
-            className="md:hidden p-2 rounded-lg hover:bg-gray-800 transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            className="md:hidden p-2 rounded-lg hover:bg-gray-800 transition-all focus:outline-none focus:ring-2 focus:ring-[#6495ED]"
             onClick={() => setIsMenuOpen(!isMenuOpen)}
           >
             {isMenuOpen ? (
@@ -60,6 +60,24 @@ export function Header() {
           )}
         </div>
       </div>
+
+      {/* Global Keyframe Animations (inline style tag) */}
+      <style>{`
+        @keyframes fade-in-down {
+          0% { opacity: 0; transform: translateY(-10px); }
+          100% { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes fade-out-up {
+          0% { opacity: 1; transform: translateY(0); }
+          100% { opacity: 0; transform: translateY(-10px); }
+        }
+
+        @keyframes fade-in-up {
+          0% { opacity: 0; transform: translateY(10px); }
+          100% { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
     </header>
   );
 }
@@ -81,15 +99,15 @@ function NavLinks({
           <li
             key={path}
             className={`${
-              animate ? 'animate-fade-in-up delay-' + idx * 100 : ''
+              animate ? `animate-fade-in-up delay-${idx * 100}` : ''
             }`}
           >
             <Link
               to={path}
               className={`${
                 isActive(path)
-                  ? 'text-indigo-500 underline underline-offset-4 decoration-2'
-                  : 'text-gray-300 hover:text-indigo-400'
+                  ? 'text-[#6495ED] underline underline-offset-4 decoration-2'
+                  : 'text-gray-300 hover:text-[#6495ED]'
               } font-medium transition-all duration-300 hover:scale-110`}
               onClick={closeMenu}
             >