feat(website): use animated logo on all pages and matching favicon (#19)

* feat(website): use animated logo on all pages and matching favicon

Extract the animated synapse logo from Nav into a shared Logo.astro
component, swap the homepage's static dot mark for it, and align
favicon.svg with the same geometry, animation, and signal palette.

* fix(website): address PR review feedback on Logo component and favicon

- Generate unique gradient id per Logo instance to avoid duplicate DOM ids
- Add #61EBFA/#6FE4BF fallbacks to CSS variable colors
- Align favicon stroke-width (1.6) and add stroke-linecap="round" to Logo

Author: IamCoder18

website/public/favicon.svg

@@ -0,0 +1,22 @@
+---
+interface Props {
+  size?: number;
+}
+
+const { size = 28 } = Astro.props;
+const gradientId = `synapse-g-${crypto.randomUUID()}`;
+---
+<svg viewBox="0 0 32 32" width={size} height={size} aria-hidden="true">
+  <defs>
+    <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="var(--signal-a, #61EBFA)" />
+      <stop offset="1" stop-color="var(--signal-b, #6FE4BF)" />
+    </linearGradient>
+  </defs>
+  <circle cx="8" cy="16" r="3.5" fill="var(--signal-a, #61EBFA)" />
+  <circle cx="24" cy="16" r="3.5" fill="var(--signal-b, #6FE4BF)" />
+  <path d="M8 16 Q 16 6 24 16" stroke={`url(#${gradientId})`} stroke-width="1.6" fill="none" stroke-linecap="round">
+    <animate attributeName="d" dur="2.4s" repeatCount="indefinite"
+      values="M8 16 Q 16 6 24 16; M8 16 Q 16 26 24 16; M8 16 Q 16 6 24 16" />
+  </path>
+</svg>

website/src/components/layout/Logo.astro

@@ -1,25 +1,13 @@
 ---
 import ThemeToggle from './ThemeToggle.astro';
+import Logo from './Logo.astro';
 import Search from '~/components/react/Search.tsx';
 const path = Astro.url.pathname;
 const isActive = (p: string) => path === p || (p !== '/' && path.startsWith(p));
 ---
 <nav class="syn-nav" aria-label="Primary">
   <a href="/" class="syn-nav__brand" aria-label="Synapse home">
-    <svg viewBox="0 0 32 32" width="28" height="28" aria-hidden="true">
-      <defs>
-        <linearGradient id="synapse-g" x1="0" x2="1" y1="0" y2="1">
-          <stop offset="0" stop-color="var(--signal-a)" />
-          <stop offset="1" stop-color="var(--signal-b)" />
-        </linearGradient>
-      </defs>
-      <circle cx="8" cy="16" r="3.5" fill="var(--signal-a)" />
-      <circle cx="24" cy="16" r="3.5" fill="var(--signal-b)" />
-      <path d="M8 16 Q 16 6 24 16" stroke="url(#synapse-g)" stroke-width="1.6" fill="none">
-        <animate attributeName="d" dur="2.4s" repeatCount="indefinite"
-          values="M8 16 Q 16 6 24 16; M8 16 Q 16 26 24 16; M8 16 Q 16 6 24 16" />
-      </path>
-    </svg>
+    <Logo />
     <span>Synapse</span>
   </a>
   <ul class="syn-nav__links" role="list">

website/src/components/layout/Nav.astro

@@ -1,5 +1,6 @@
 ---
 import BaseLayout from '~/components/layout/BaseLayout.astro';
+import Logo from '~/components/layout/Logo.astro';
 
 import { highlightJava } from '@/lib/highlight';
 import { QUICKSTART_CODE, PUBSUB_CODE, HARDWARE_CODE } from '@/lib/code-samples';
@@ -159,10 +160,7 @@ const footerCols = [
     >
       <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
         <a href="/" class="flex items-center gap-2.5">
-          <span class="relative flex size-8 items-center justify-center rounded-lg bg-primary/15">
-            <span class="absolute size-2.5 rounded-full bg-primary shadow-[0_0_12px_var(--glow-soft)]"></span>
-            <span class="absolute size-5 rounded-full border border-primary/40"></span>
-          </span>
+          <Logo size={28} />
           <span class="font-display text-lg font-semibold tracking-tight">Synapse</span>
           <span
             class="ml-1 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 font-mono text-[10px] font-medium text-primary shadow-[0_0_14px_-2px_var(--glow-soft)]"