Replace placeholder brand marks with logo

Author: LEANDERANTONY

frontend/public/brand/job-copilot-logo.png

@@ -148,15 +148,20 @@ code {
 }
 
 .brand-mark {
-  display: grid;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
   border-radius: 1rem;
-  background: linear-gradient(180deg, #4a78ff, #3064ff);
-  box-shadow: 0 18px 35px rgba(48, 100, 255, 0.26);
-  font-family: var(--font-space-grotesk), sans-serif;
-  font-weight: 700;
+  overflow: hidden;
+}
+
+.brand-logo-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 1rem;
 }
 
 .brand-title {
@@ -963,11 +968,14 @@ code {
   width: 3rem;
   height: 3rem;
   border-radius: 1rem;
-  background: linear-gradient(180deg, #4a78ff, #3064ff);
-  color: white;
-  font-family: var(--font-space-grotesk), sans-serif;
-  font-weight: 700;
-  box-shadow: 0 12px 26px rgba(48, 100, 255, 0.18);
+  overflow: hidden;
+}
+
+.workspace-brand-logo-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 1rem;
 }
 
 .workspace-brand-title {

frontend/src/app/globals.css

@@ -1,5 +1,7 @@
 import Link from "next/link";
 
+import { BrandLogo } from "@/components/BrandLogo";
+
 const EFFECTIVE_DATE = "April 24, 2026";
 
 export default function PrivacyPage() {
@@ -10,7 +12,9 @@ export default function PrivacyPage() {
 
       <header className="topbar">
         <div className="brand">
-          <div className="brand-mark">AJ</div>
+          <div className="brand-mark">
+            <BrandLogo className="brand-logo-image" size={44} />
+          </div>
           <div>
             <p className="brand-title">Job Application Copilot</p>
           </div>

frontend/src/app/privacy/page.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+type BrandLogoProps = {
+  className?: string;
+  size?: number;
+};
+
+export function BrandLogo({
+  className = "",
+  size = 48,
+}: BrandLogoProps) {
+  return (
+    <Image
+      src="/brand/job-copilot-logo.png"
+      alt="Job Application Copilot logo"
+      width={size}
+      height={size}
+      className={className}
+      priority
+    />
+  );
+}

frontend/src/components/BrandLogo.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 
+import { BrandLogo } from "@/components/BrandLogo";
 import {
   exchangeGoogleCode,
   restoreAuthSession,
@@ -179,7 +180,9 @@ export function LandingPage() {
 
       <header className="topbar">
           <div className="brand">
-            <div className="brand-mark">AJ</div>
+            <div className="brand-mark">
+              <BrandLogo className="brand-logo-image" size={44} />
+            </div>
             <div>
               <p className="brand-title">Job Application Copilot</p>
             </div>

frontend/src/components/landing-page.tsx

@@ -11,6 +11,8 @@
 
 import type { ReactNode } from "react";
 
+import { BrandLogo } from "@/components/BrandLogo";
+
 export type SidebarProps = {
   collapsed: boolean;
   onCollapse: (collapsed: boolean) => void;
@@ -54,9 +56,11 @@ export function Sidebar({ collapsed, onCollapse, children }: SidebarProps) {
         <div className="workspace-sidebar-shell">
           <div className="workspace-sidebar-head">
             <div className="workspace-brand-lockup">
-              <span className="workspace-brand-mark">AJ</span>
+              <span className="workspace-brand-mark">
+                <BrandLogo className="workspace-brand-logo-image" size={48} />
+              </span>
               <div>
-                <p className="workspace-brand-title">Job Application Agent</p>
+                <p className="workspace-brand-title">Job Application Copilot</p>
               </div>
             </div>