From 92322bff165fc14c9dc5ea8ceda8553ac0567607 Mon Sep 17 00:00:00 2001
From: Aravind <aravind@tenext.in>
Date: Wed, 5 Aug 2026 18:43:07 +0530
Subject: [PATCH] login page logo fix

---
 next.config.ts                   |  9 +++++++++
 src/features/auth/LoginSplit.tsx | 15 ++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 68a6c64..dd56ca4 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,15 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
+
diff --git a/src/features/auth/LoginSplit.tsx b/src/features/auth/LoginSplit.tsx
index 58ad03a..f9a8d4f 100644
--- a/src/features/auth/LoginSplit.tsx
+++ b/src/features/auth/LoginSplit.tsx
@@ -2,6 +2,7 @@
 
 import {useState} from 'react';
 import {useRouter} from 'next/navigation';
+import Image from 'next/image';
 import {BrandLogo, BrandMark} from '@/components/brand/BrandLogo';
 
 const HERO_IMAGE_URL =
@@ -63,6 +64,7 @@ function CheckIcon() {
 
 export function LoginSplit() {
   const router = useRouter();
+  const [heroSrc, setHeroSrc] = useState(HERO_IMAGE_URL);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [rememberMe, setRememberMe] = useState(false);
@@ -110,12 +112,15 @@ export function LoginSplit() {
         <div className="hidden md:flex md:w-[40%] lg:w-[55%] h-full p-3 relative">
           <div className="w-full h-full rounded-[20px] overflow-hidden relative border border-white/10 bg-[#090A0E]">
             {/* Main Retail Store Hero Image */}
-            <img
-              src={HERO_IMAGE_URL}
+            <Image
+              src={heroSrc}
               alt="Loyaly Merchant Operating System"
-              className="w-full h-full object-cover object-center"
-              onError={(e) => {
-                (e.target as HTMLImageElement).src = HERO_FALLBACK_URL;
+              fill
+              priority
+              sizes="(max-width: 768px) 0vw, (max-width: 1024px) 40vw, 55vw"
+              className="object-cover object-center"
+              onError={() => {
+                setHeroSrc(HERO_FALLBACK_URL);
               }}
             />