login page logo fix

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

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