Latest Updated Pages

2026-03-22 14:37:17 +05:30
parent d402256547
commit 0614ae6f85
80 changed files with 11667 additions and 687 deletions
@@ -2,6 +2,8 @@
 // Header Component for WorkRoot IT Solutions
 // Features: Sticky header, responsive nav, mobile hamburger menu, active link highlighting

+import ThemeToggle from './ThemeToggle.astro';
+
 interface Props {
  class?: string;
 }
@@ -22,7 +24,7 @@ const currentPath = Astro.url.pathname;

 <header
  class:list={[
-    'fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-secondary-100 transition-shadow duration-300',
+    'fixed top-0 left-0 right-0 z-50 bg-white/95 dark:bg-secondary-900/95 backdrop-blur-sm border-b border-secondary-100 dark:border-secondary-800 transition-shadow duration-300',
    className,
  ]}
  id="main-header"
@@ -35,7 +37,7 @@ const currentPath = Astro.url.pathname;
          <span class="text-white font-bold text-xl">W</span>
        </div>
        <div class="hidden sm:block">
-          <span class="font-bold text-xl text-secondary">WorkRoot</span>
+          <span class="font-bold text-xl text-secondary dark:text-white">WorkRoot</span>
          <span class="text-primary font-semibold text-sm block -mt-1">IT Solutions</span>
        </div>
      </a>
@@ -54,8 +56,8 @@ const currentPath = Astro.url.pathname;
                class:list={[
                  'relative px-4 py-2 text-sm font-medium transition-colors rounded-lg',
                  isActive
-                    ? 'text-primary bg-primary-50'
-                    : 'text-secondary-600 hover:text-primary hover:bg-secondary-50',
+                    ? 'text-primary bg-primary-50 dark:bg-primary-900/30 dark:text-primary-400'
+                    : 'text-secondary-600 hover:text-primary hover:bg-secondary-50 dark:text-secondary-400 dark:hover:text-primary-400 dark:hover:bg-secondary-800',
                ]}
                aria-current={isActive ? 'page' : undefined}
              >
@@ -71,6 +73,7 @@ const currentPath = Astro.url.pathname;

      <!-- Desktop CTA -->
      <div class="hidden lg:flex items-center gap-4">
+        <ThemeToggle />
        <a
          href="/contact"
          class="btn-primary text-sm"
@@ -85,7 +88,7 @@ const currentPath = Astro.url.pathname;
      <!-- Mobile Menu Button -->
      <button
        type="button"
-        class="lg:hidden relative w-10 h-10 flex items-center justify-center text-secondary-600 hover:text-primary transition-colors"
+        class="lg:hidden relative w-10 h-10 flex items-center justify-center text-secondary-600 dark:text-secondary-400 hover:text-primary dark:hover:text-primary-400 transition-colors"
        id="mobile-menu-toggle"
        aria-label="Toggle mobile menu"
        aria-expanded="false"
@@ -112,23 +115,23 @@ const currentPath = Astro.url.pathname;
  <!-- Mobile Menu Panel -->
  <div
    id="mobile-menu"
-    class="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-white shadow-2xl transform translate-x-full transition-transform duration-300 ease-out lg:hidden"
+    class="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-white dark:bg-secondary-900 shadow-2xl transform translate-x-full transition-transform duration-300 ease-out lg:hidden"
    role="dialog"
    aria-modal="true"
    aria-label="Mobile navigation menu"
  >
    <div class="flex flex-col h-full">
      <!-- Mobile Menu Header -->
-      <div class="flex items-center justify-between p-4 border-b border-secondary-100">
+      <div class="flex items-center justify-between p-4 border-b border-secondary-100 dark:border-secondary-800">
        <a href="/" class="flex items-center gap-2" aria-label="WorkRoot IT Solutions - Home">
          <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center" aria-hidden="true">
            <span class="text-white font-bold text-lg">W</span>
          </div>
-          <span class="font-bold text-lg text-secondary">WorkRoot</span>
+          <span class="font-bold text-lg text-secondary dark:text-white">WorkRoot</span>
        </a>
        <button
          type="button"
-          class="w-10 h-10 flex items-center justify-center text-secondary-500 hover:text-secondary-700 transition-colors"
+          class="w-10 h-10 flex items-center justify-center text-secondary-500 hover:text-secondary-700 dark:text-secondary-400 dark:hover:text-secondary-200 transition-colors"
          id="mobile-menu-close"
          aria-label="Close menu"
        >
@@ -153,8 +156,8 @@ const currentPath = Astro.url.pathname;
                  class:list={[
                    'mobile-nav-link flex items-center gap-3 px-4 py-3 rounded-lg text-base font-medium transition-all duration-200',
                    isActive
-                      ? 'text-primary bg-primary-50'
-                      : 'text-secondary-700 hover:text-primary hover:bg-secondary-50',
+                      ? 'text-primary bg-primary-50 dark:bg-primary-900/30 dark:text-primary-400'
+                      : 'text-secondary-700 hover:text-primary hover:bg-secondary-50 dark:text-secondary-300 dark:hover:text-primary-400 dark:hover:bg-secondary-800',
                  ]}
                  aria-current={isActive ? 'page' : undefined}
                >
@@ -170,7 +173,11 @@ const currentPath = Astro.url.pathname;
      </nav>

      <!-- Mobile Menu Footer -->
-      <div class="p-4 border-t border-secondary-100">
+      <div class="p-4 border-t border-secondary-100 dark:border-secondary-800">
+        <div class="flex items-center justify-between mb-3">
+          <span class="text-sm font-medium text-secondary-600 dark:text-secondary-400">Theme</span>
+          <ThemeToggle />
+        </div>
        <a
          href="/contact"
          class="btn-primary w-full justify-center"