From 30313fa9c8ba3f5b8e01f72bed2ea9527ef6a562 Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Mon, 22 Jun 2026 14:53:08 +0600
Subject: [PATCH] feat: add JAIBEN brand logo to header and navigation
 components

---
 src/app/login/page.tsx                  | 10 +++++++---
 src/app/page.tsx                        | 10 +++++++---
 src/components/InvestorNotification.tsx |  8 ++++++--
 src/components/Sidebar.tsx              | 10 +++++++---
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 10ac185..28ee485 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import { users } from '@/data/mockData';
 import { Zap, ArrowRight, Bike, Wallet, Shield, Users, Calculator } from 'lucide-react';
 
@@ -134,10 +135,13 @@ export default function LoginPage() {
         <div className="text-center mb-8">
           <button
             onClick={() => router.push('/')}
-            className="inline-block"
+            className="inline-flex items-center gap-3 text-left"
           >
-            <h1 className="text-3xl font-extrabold text-white">JAIBEN</h1>
-            <p className="text-xs text-slate-400">Mobility Ltd</p>
+            <Image src="/jaiben.png" alt="JAIBEN Logo" width={56} height={56} className="object-contain h-12 w-auto" priority />
+            <div>
+              <h1 className="text-3xl font-extrabold text-white leading-tight">JAIBEN</h1>
+              <p className="text-sm text-slate-400 leading-none">Mobility Ltd</p>
+            </div>
           </button>
         </div>
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7e774fc..b16df0d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import { users } from '@/data/mockData';
 import { Zap, ArrowRight, Bike, Wallet } from 'lucide-react';
 
@@ -51,9 +52,12 @@ export default function LandingPage() {
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
       <header className="p-4 lg:p-6">
         <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl lg:text-3xl font-extrabold text-white">JAIBEN</h1>
-            <p className="text-xs text-slate-400">Mobility Ltd</p>
+          <div className="flex items-center gap-3">
+            <Image src="/jaiben.png" alt="JAIBEN Logo" width={48} height={48} className="object-contain h-10 w-auto" priority />
+            <div>
+              <h1 className="text-2xl lg:text-3xl font-extrabold text-white leading-tight">JAIBEN</h1>
+              <p className="text-xs text-slate-400 leading-none">Mobility Ltd</p>
+            </div>
           </div>
           <button
             onClick={() => router.push('/login')}
diff --git a/src/components/InvestorNotification.tsx b/src/components/InvestorNotification.tsx
index 85cccb0..9a9e79c 100644
--- a/src/components/InvestorNotification.tsx
+++ b/src/components/InvestorNotification.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import Image from 'next/image';
 import { Bell, Package, DollarSign, Bike, AlertCircle, CheckCircle } from 'lucide-react';
 
 const mockNotifications = [
@@ -21,8 +22,11 @@ export default function InvestorNotification({ isMobile = false }: { isMobile?:
     return (
       <div className="lg:hidden fixed top-0 left-0 right-0 h-14 bg-white border-b border-slate-200 flex items-center justify-between px-4 z-40">
         <div className="flex items-center gap-2">
-          <h1 className="text-lg font-extrabold text-accent">JAIBEN</h1>
-          <span className="text-[10px] text-accent font-medium">Investor</span>
+          <Image src="/jaiben.png" alt="JAIBEN Logo" width={32} height={32} className="object-contain h-7 w-auto" priority />
+          <div className="flex flex-col">
+            <h1 className="text-lg font-extrabold text-accent leading-none">JAIBEN</h1>
+            <span className="text-[10px] text-accent font-medium leading-none">Investor</span>
+          </div>
         </div>
         <Link href="/investor/notifications" className="relative p-2 hover:bg-slate-100 rounded-lg transition-colors">
           <Bell className="w-5 h-5 text-slate-600" />
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 4b83a82..3a99c45 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import {
@@ -165,9 +166,12 @@ export default function Sidebar() {
       `}>
         <div className="p-4 border-b border-slate-100">
           <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-xl font-extrabold text-accent">JAIBEN</h1>
-              <p className="text-xs text-slate-500">Mobility Ltd</p>
+            <div className="flex items-center gap-2">
+              <Image src="/jaiben.png" alt="JAIBEN Logo" width={40} height={40} className="object-contain h-8 w-auto" priority />
+              <div>
+                <h1 className="text-xl font-extrabold text-accent leading-tight">JAIBEN</h1>
+                <p className="text-xs text-slate-500 leading-none">Mobility Ltd</p>
+              </div>
             </div>
             <div className="flex items-center gap-2">
               <div className="px-2 py-1 bg-accent-light rounded text-xs font-semibold text-accent">