feat(branding): add RoadMonitor logo and update auth/sidebar branding

src/components/LogoWrapper.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+
+import { cn } from '@/lib/utils';
+
+const sizeClasses = {
+  sm: 'size-8 rounded-md border-2 p-0.5',
+  md: 'size-12 rounded-md border-2 p-1.5',
+  lg: 'size-28 rounded-lg border-[5px] p-3',
+} as const;
+
+const variantClasses = {
+  default: 'border-white bg-primary shadow-md',
+  solid: 'border-white bg-primary',
+  glass: 'border-primary-foreground bg-primary/85 shadow-md',
+  sidebar: 'border-0 bg-primary',
+} as const;
+
+type LogoWrapperProps = {
+  alt?: string;
+  className?: string;
+  imageClassName?: string;
+  priority?: boolean;
+  size?: keyof typeof sizeClasses;
+  variant?: keyof typeof variantClasses;
+};
+
+export function LogoWrapper({
+  alt = 'RoadMonitor logo',
+  className,
+  imageClassName,
+  priority = false,
+  size = 'md',
+  variant = 'default',
+}: LogoWrapperProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center',
+        sizeClasses[size],
+        variantClasses[variant],
+        className,
+      )}
+    >
+      <Image
+        src="/logo.png"
+        alt={alt}
+        width={112}
+        height={112}
+        className={cn(
+          'size-full object-contain brightness-0 invert',
+          imageClassName,
+        )}
+        priority={priority}
+      />
+    </span>
+  );
+}