add draw animation to logo and make logo a bit smaller in header

packages/web/src/components/Logo.tsx

@@ -3,12 +3,9 @@ import LogoDark from '../../public/logo-dark.svg?react';
 import { useTheme } from '@/theme';
 import { cn } from '@/lib/utils';
 
-export function Logo({ className }: { className?: string }) {
+export function Logo({ className, animate = true }: { className?: string; animate?: boolean }) {
   const [theme] = useTheme();
+  const Logo = theme === 'dark' ? LogoLight : LogoDark;
 
-  return theme === 'dark' ? (
-    <LogoLight className={cn('h-fit', className)} />
-  ) : (
-    <LogoDark className={cn('h-fit', className)} />
-  );
+  return <Logo className={cn('h-fit', animate && 'logo-animate', className)} />;
 }

packages/web/src/components/layout.tsx

@@ -20,7 +20,7 @@ export function Layout() {
           <div className="container flex items-center justify-between mx-auto">
             <div>
               <Link to="/">
-                <Logo className="w-16 py-2" />
+                <Logo className="w-12 py-2" />
               </Link>
             </div>
             <div className="flex items-center gap-2">

packages/web/src/index.css

@@ -68,3 +68,34 @@
 ::placeholder {
   @apply text-xs text-muted-foreground/80;
 }
+
+@keyframes draw-stroke {
+  from {
+    stroke-dashoffset: 1500;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes fill-in {
+  0%,
+  60% {
+    fill-opacity: 0;
+  }
+  100% {
+    fill-opacity: 1;
+  }
+}
+
+.logo-animate path {
+  stroke-dasharray: 1500;
+  stroke-dashoffset: 1500;
+  stroke-width: 2;
+  fill-opacity: 0;
+  stroke: hsl(var(--foreground));
+  fill: hsl(var(--foreground));
+  animation:
+    draw-stroke 2.5s ease forwards,
+    fill-in 4s ease forwards;
+}