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>
+  );
+}

src/components/app-sidebar.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
-import { ChevronRight, Package } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
+import { LogoWrapper } from '@/components/LogoWrapper';
 import { NavUser } from '@/components/nav-user';
 import {
   filterMenuItems,
@@ -49,12 +50,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>
         <div className="flex items-center gap-2 py-2">
-          <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-            <Package className="size-4" />
-          </div>
+          <LogoWrapper size="sm" variant="sidebar" />
           <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
-            <span className="truncate font-semibold">Vision Road</span>
-            <span className="truncate text-xs">Analytics Platform</span>
+            <span className="truncate font-semibold">RoadMonitor</span>
+            <span className="truncate text-xs">Road Intelligence</span>
           </div>
         </div>
       </SidebarHeader>
@@ -148,3 +147,4 @@ function SidebarNavItem({
     </SidebarMenuItem>
   );
 }
+

src/components/auth/AuthBackground.tsx

@@ -1,3 +1,4 @@
+import { LogoWrapper } from '@/components/LogoWrapper';
 import { cn } from '@/lib/utils';
 
 const BOKEH_ORBS = [
@@ -80,6 +81,30 @@ export function AuthBackground({ className }: AuthBackgroundProps) {
           )}
         />
       ))}
+
+      <div className="absolute inset-x-10 top-1/2 -translate-y-1/2 text-center text-primary-foreground">
+        <div className="mb-9 inline-flex items-center gap-5 text-left">
+          <LogoWrapper
+            alt=""
+            className="size-28 rounded-2xl border-[5px] p-4"
+            priority
+            variant="glass"
+          />
+          <span className="min-w-0">
+            <span className="block text-5xl font-semibold leading-none tracking-normal">
+              Road
+            </span>
+            <span className="block text-5xl font-semibold leading-none tracking-normal">
+              Monitor
+            </span>
+          </span>
+        </div>
+        <p className="mx-auto max-w-md text-base leading-7 text-primary-foreground/82">
+          Map, monitor, and repair road issues with data-driven surface
+          intelligence.
+        </p>
+      </div>
     </div>
   );
 }
+