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

src/app/(full-page)/forgot-password/page.tsx

@@ -31,7 +31,7 @@ function ForgotPasswordContent() {
         <div className="flex h-screen flex-1 items-center justify-center border-l border-border p-6 md:w-[60%]">
           <section className="w-full max-w-sm space-y-7">
             <header className="space-y-2 text-center md:text-left">
-              <p className="text-muted-foreground">VisionRoad</p>
+              <p className="text-muted-foreground">RoadMonitor</p>
               <h1>{displayInfo.title}</h1>
               <p className="text-muted-foreground">{displayInfo.description}</p>
             </header>
@@ -60,7 +60,11 @@ function ForgotPasswordContent() {
                   className="w-full"
                   disabled={isLoading || !canSubmit}
                 >
-                  {isLoading ? <Loader2 className="size-4 animate-spin" /> : <Send />}
+                  {isLoading ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <Send />
+                  )}
                   {displayInfo.buttonLabel}
                 </Button>
 

src/app/(full-page)/login/page.tsx

@@ -23,7 +23,7 @@ export default function LoginPage() {
           <section className="w-full max-w-sm space-y-7">
             <header className="space-y-2 text-center md:text-left">
               <p className="text-sm font-medium text-muted-foreground">
-                VisionRoad
+                RoadMonitor
               </p>
               <h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
               <p className="text-sm text-muted-foreground">

src/app/(full-page)/reset-password/page.tsx

@@ -27,7 +27,7 @@ function ResetPasswordContent() {
         <div className="flex h-screen flex-1 items-center justify-center border-l border-border p-6 md:w-[60%]">
           <section className="w-full max-w-sm space-y-7">
             <header className="space-y-2 text-center md:text-left">
-              <p className="text-muted-foreground">VisionRoad</p>
+              <p className="text-muted-foreground">RoadMonitor</p>
               <h1>{displayInfo.title}</h1>
               <p className="text-muted-foreground">{displayInfo.description}</p>
             </header>
@@ -69,7 +69,9 @@ function ResetPasswordContent() {
                   className="w-full"
                   disabled={isLoading || !canSubmit}
                 >
-                  {isLoading ? <Loader2 className="size-4 animate-spin" /> : null}
+                  {isLoading ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : null}
                   {displayInfo.buttonLabel}
                 </Button>
               </form>

src/app/(modules)/upload/components/UploadCardGrid.tsx

@@ -38,7 +38,7 @@ export function UploadCardGrid({
   onViewVideo,
   onViewDetails,
 }: UploadCardGridProps) {
-  const skeletonItems = Array.from({ length: Math.min(limit, 20) });
+  const skeletonItems = Array.from({ length: 6 });
 
   if (!isLoading && uploads.length === 0) {
     return (

src/app/layout.tsx

@@ -19,8 +19,8 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: {
-    default: 'VisionRoad',
-    template: '%s | VisionRoad',
+    default: 'RoadMonitor',
+    template: '%s | RoadMonitor',
   },
   description: 'Road infrastructure monitoring and pothole detection platform',
 };

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