feat: apply WorkRoot logo sitewide and as favicon

- Add WorkRoot Icon as public/favicon.svg, regenerate logo.png (512x512) and apple-touch-icon.png (180x180) from the brand vector; add favicon-32x32.png raster - Register 32x32 PNG favicon link in BaseLayout <head> alongside the SVG and apple-touch-icon - Replace placeholder "W" logo boxes with the WorkRoot mark in the header, mobile menu, and footer (preserving "WorkRoot" text spans required by the dark-mode contrast tests and the home link wrapper) JSON-LD/SEO logo (/logo.png) and PWA manifest icons now resolve to the real brand assets. Build passes; BUG-5 dark-mode and navigation tests green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-17 15:08:31 +05:30
parent 19a0720fe8
commit 01cafba6c1
7 changed files with 11 additions and 15 deletions
@@ -44,9 +44,7 @@ const currentYear = new Date().getFullYear();
      <!-- Company Info -->
      <div class="lg:col-span-1">
        <a href="/" class="inline-flex items-center gap-2 mb-4 group" aria-label="WorkRoot IT Solutions LLP - Home">
-          <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center transition-transform group-hover:scale-105" aria-hidden="true">
+          <img src="/favicon.svg" alt="WorkRoot" width="40" height="40" class="w-10 h-10 transition-transform group-hover:scale-105" />
            <span class="text-white font-bold text-lg">W</span>
          </div>
          <span class="text-xl font-bold text-white">WorkRoot</span>
        </a>
        <p class="text-secondary-400 text-sm leading-relaxed mb-6">
@@ -33,9 +33,13 @@ const currentPath = Astro.url.pathname;
    <nav class="flex items-center justify-between h-16 lg:h-20" aria-label="Main navigation">
      <!-- Logo -->
      <a href="/" class="flex items-center gap-2 group" aria-label="WorkRoot IT Solutions LLP - Home">
-        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center transition-transform group-hover:scale-105">
+        <img
-          <span class="text-white font-bold text-xl">W</span>
+          src="/favicon.svg"
-        </div>
+          alt="WorkRoot"
          width="40"
          height="40"
          class="w-10 h-10 transition-transform group-hover:scale-105"
        />
        <div class="hidden sm:block">
          <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>
@@ -141,9 +145,7 @@ const currentPath = Astro.url.pathname;
      <!-- Mobile Menu Header -->
      <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 LLP - Home">
-          <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center" aria-hidden="true">
+          <img src="/favicon.svg" alt="WorkRoot" width="32" height="32" class="w-8 h-8" />
            <span class="text-white font-bold text-lg">W</span>
          </div>
          <span class="font-bold text-lg text-secondary dark:text-white">WorkRoot</span>
        </a>
        <button
@@ -49,6 +49,7 @@ const fullTitle = title === 'Home' ? siteName : `${title} | ${siteName}`;
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <!-- PWA Manifest -->