Latest Updated Pages

src/components/Header.astro

@@ -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"

src/components/LazyImage.astro

@@ -30,7 +30,7 @@ const {
   class: className = '',
   loading = 'lazy',
   fetchpriority = 'auto',
-  placeholder = '#1e293b', // secondary-800
+  placeholder = 'var(--color-surface-alt, #e2e8f0)', // adapts to theme
 } = Astro.props;
 
 const aspectRatio = (height / width) * 100;

src/components/SEO.astro

@@ -156,7 +156,7 @@ const aboutPageSchema = type === 'AboutPage' ? {
   }
 } : null;
 
-// Generate ContactPage schema
+// Generate ContactPage schema with LocalBusiness details
 const contactPageSchema = type === 'ContactPage' ? {
   "@context": "https://schema.org",
   "@type": "ContactPage",
@@ -165,9 +165,51 @@ const contactPageSchema = type === 'ContactPage' ? {
   "url": currentUrl,
   "inLanguage": "en-US",
   "mainEntity": {
-    "@type": "Organization",
+    "@type": "LocalBusiness",
     "name": "WorkRoot IT Solutions",
-    "url": baseUrl
+    "alternateName": "WorkRoot IT Solutions LLP",
+    "url": baseUrl,
+    "telephone": "+91-9561417403",
+    "email": "admin@workroot.in",
+    "address": {
+      "@type": "PostalAddress",
+      "streetAddress": "At Post Rajapur Shantinagar, Taluka Khatav",
+      "addressLocality": "Satara",
+      "addressRegion": "MH",
+      "postalCode": "415503",
+      "addressCountry": "IN"
+    },
+    "geo": {
+      "@type": "GeoCoordinates",
+      "latitude": "17.7733632",
+      "longitude": "74.3309312"
+    },
+    "openingHoursSpecification": [
+      {
+        "@type": "OpeningHoursSpecification",
+        "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
+        "opens": "09:00",
+        "closes": "18:00"
+      }
+    ],
+    "priceRange": "$$",
+    "currenciesAccepted": "INR",
+    "paymentAccepted": "Cash, Credit Card, Bank Transfer",
+    "areaServed": "Worldwide",
+    "image": `${baseUrl}/og-image.jpg`,
+    "logo": {
+      "@type": "ImageObject",
+      "url": `${baseUrl}/logo.png`,
+      "width": 512,
+      "height": 512
+    },
+    "hasMap": "https://maps.google.com/?q=Rajapur+Shantinagar+Khatav+Satara+Maharashtra+415503",
+    "sameAs": [
+      "https://twitter.com/workroot",
+      "https://linkedin.com/company/workroot",
+      "https://github.com/workroot",
+      "https://facebook.com/workroot"
+    ]
   }
 } : null;
 ---

src/components/ThemeToggle.astro

@@ -0,0 +1,165 @@
+---
+// ThemeToggle Component
+// Features: Sun/moon icons, smooth transitions, localStorage persistence,
+//           system preference detection (prefers-color-scheme), ARIA accessible
+---
+
+<!-- Unique ID via data attribute; JS uses querySelectorAll to support multiple instances -->
+<button
+  data-theme-toggle
+  type="button"
+  role="switch"
+  aria-checked="false"
+  aria-label="Switch to dark mode"
+  title="Toggle dark/light mode"
+  class="theme-toggle relative w-10 h-10 flex items-center justify-center rounded-lg text-secondary-600 hover:text-primary hover:bg-secondary-50 dark:text-secondary-400 dark:hover:text-primary-400 dark:hover:bg-secondary-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 dark:focus:ring-offset-secondary-900"
+>
+  <!-- Sun icon (shown in dark mode to switch to light) -->
+  <svg
+    class="sun-icon w-5 h-5 absolute transition-all duration-300"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+  </svg>
+
+  <!-- Moon icon (shown in light mode to switch to dark) -->
+  <svg
+    class="moon-icon w-5 h-5 absolute transition-all duration-300"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+</button>
+
+<!-- Live region: announces theme changes to screen readers without disrupting reading flow -->
+<span
+  data-theme-live
+  role="status"
+  aria-live="polite"
+  aria-atomic="true"
+  class="sr-only"
+></span>
+
+<style>
+  /* Initial icon states - controlled by JS after load */
+  .theme-toggle .sun-icon {
+    opacity: 0;
+    transform: scale(0.5) rotate(-90deg);
+  }
+
+  .theme-toggle .moon-icon {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  /* Dark mode: show sun, hide moon */
+  :global(html.dark) .theme-toggle .sun-icon {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  :global(html.dark) .theme-toggle .moon-icon {
+    opacity: 0;
+    transform: scale(0.5) rotate(90deg);
+  }
+
+  /* Respect reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .theme-toggle .sun-icon,
+    .theme-toggle .moon-icon {
+      transition: none !important;
+    }
+  }
+</style>
+
+<script>
+  function initThemeToggles() {
+    // Use data attribute selector to support multiple instances (desktop + mobile)
+    const btns = document.querySelectorAll<HTMLButtonElement>('[data-theme-toggle]');
+    if (!btns.length) return;
+
+    function syncAllButtons(isDark: boolean) {
+      const label = isDark ? 'Switch to light mode' : 'Switch to dark mode';
+      btns.forEach((btn) => {
+        btn.setAttribute('aria-label', label);
+        btn.setAttribute('title', label);
+        btn.setAttribute('aria-checked', isDark ? 'true' : 'false');
+      });
+    }
+
+    function announceThemeChange(isDark: boolean) {
+      // Announce to screen readers via live region (polite = does not interrupt)
+      document.querySelectorAll('[data-theme-live]').forEach((el) => {
+        el.textContent = isDark ? 'Dark mode enabled' : 'Light mode enabled';
+      });
+    }
+
+    function applyTheme(isDark: boolean, announce = false) {
+      document.documentElement.classList.toggle('dark', isDark);
+      syncAllButtons(isDark);
+      if (announce) announceThemeChange(isDark);
+
+      // Update all theme-color meta tags for browser chrome
+      const color = isDark ? '#0f172a' : '#0891b2';
+      document.querySelectorAll('meta[name="theme-color"]').forEach((m) => {
+        m.setAttribute('content', color);
+      });
+    }
+
+    btns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const newIsDark = !document.documentElement.classList.contains('dark');
+        applyTheme(newIsDark, true);
+        try {
+          localStorage.setItem('theme', newIsDark ? 'dark' : 'light');
+        } catch {
+          // localStorage not available (e.g. private browsing)
+        }
+      });
+    });
+
+    // Sync ARIA state on init
+    const isDark = document.documentElement.classList.contains('dark');
+    syncAllButtons(isDark);
+  }
+
+  // Run immediately if DOM is ready, otherwise wait
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initThemeToggles);
+  } else {
+    initThemeToggles();
+  }
+
+  // Listen for system preference changes (when no explicit user choice)
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    const stored = localStorage.getItem('theme');
+    if (!stored) {
+      const isDark = e.matches;
+      document.documentElement.classList.toggle('dark', isDark);
+      const color = isDark ? '#0f172a' : '#0891b2';
+      document.querySelectorAll('meta[name="theme-color"]').forEach((m) => {
+        m.setAttribute('content', color);
+      });
+      const label = isDark ? 'Switch to light mode' : 'Switch to dark mode';
+      document.querySelectorAll('[data-theme-toggle]').forEach((btn) => {
+        btn.setAttribute('aria-label', label);
+        btn.setAttribute('aria-checked', isDark ? 'true' : 'false');
+      });
+    }
+  });
+</script>

src/components/ui/Badge.astro

@@ -26,10 +26,10 @@ const {
 } = Astro.props;
 
 const variantClasses: Record<string, string> = {
-  'primary':      'bg-primary-50 text-primary-700',
+  'primary':      'bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
   'primary-dark': 'bg-primary-400/20 text-primary-300',
-  'accent':       'bg-accent-50 text-accent-700',
-  'secondary':    'bg-secondary-100 text-secondary-700',
+  'accent':       'bg-accent-50 text-accent-700 dark:bg-accent-900/40 dark:text-accent-300',
+  'secondary':    'bg-secondary-100 text-secondary-700 dark:bg-secondary-800 dark:text-secondary-300',
 };
 
 const classes = [

src/components/ui/Card.astro

@@ -30,21 +30,22 @@ const {
 const variantClasses: Record<string, string> = {
   'feature': [
     'group relative bg-gradient-to-br from-secondary-50 to-white',
-    'rounded-2xl border border-secondary-100',
-    'hover:border-primary/30 hover:shadow-2xl',
+    'dark:from-secondary-800 dark:to-secondary-900',
+    'rounded-2xl border border-secondary-100 dark:border-secondary-700',
+    'hover:border-primary/30 dark:hover:border-primary-500/40 hover:shadow-2xl',
     'transition-all duration-500 hover:-translate-y-2',
   ].join(' '),
 
   'service': [
-    'group relative bg-white rounded-3xl shadow-lg',
-    'border-2 border-secondary-100',
-    'hover:border-primary-400 hover:shadow-2xl',
+    'group relative bg-white dark:bg-secondary-800 rounded-3xl shadow-lg',
+    'border-2 border-secondary-100 dark:border-secondary-700',
+    'hover:border-primary-400 dark:hover:border-primary-500 hover:shadow-2xl',
     'transition-all duration-500 overflow-hidden',
   ].join(' '),
 
   'surface': [
-    'bg-secondary-50 rounded-xl',
-    'border border-secondary-200',
+    'bg-secondary-50 dark:bg-secondary-800 rounded-xl',
+    'border border-secondary-200 dark:border-secondary-700',
     'hover:shadow-lg transition-shadow duration-300',
   ].join(' '),
 

src/components/ui/SectionHeader.astro

@@ -37,8 +37,8 @@ const {
 const isLight = theme === 'light';
 
 const badgeClasses: Record<string, string> = {
-  'primary-light': 'bg-primary-50 text-primary-700',
-  'accent-light':  'bg-accent-50 text-accent-700',
+  'primary-light': 'bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
+  'accent-light':  'bg-accent-50 text-accent-700 dark:bg-accent-900/40 dark:text-accent-300',
   'primary-dark':  'bg-primary-400/20 text-primary-300',
   'accent-dark':   'bg-accent-400/20 text-accent-300',
 };
@@ -47,11 +47,11 @@ const badgeKey = `${badgeColor}-${theme}`;
 const badgeClass = badgeClasses[badgeKey] ?? badgeClasses['primary-light'];
 
 const titleClass = isLight
-  ? 'text-4xl sm:text-5xl font-bold text-secondary-900 mb-6'
+  ? 'text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-50 mb-6'
   : 'text-4xl sm:text-5xl font-bold text-white mb-6';
 
 const descClass = isLight
-  ? 'text-xl text-secondary-600'
+  ? 'text-xl text-secondary-600 dark:text-secondary-400'
   : 'text-xl text-secondary-300';
 
 const containerClass = [