Feat/add logo in signup

src/app/auth/components/ImageSection.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import Image from 'next/image';
 
 const ImageSection: React.FC = () => (
-  <div className="w-full max-w-lg  aspect-video mb-6 overflow-hidden rounded-2xl ">
-    <Image
-      src="/pre-auth.svg"
-      alt="Authentication illustration"
-      width={800}
-      height={450}
-      className="object-cover w-full h-full "
+  <div className="relative w-full max-w-2xl lg:max-w-3xl aspect-video mb-6 overflow-hidden rounded-2xl">
+   <Image
+      src="/sign.png"
+      alt="Authentication"
+      fill
+      priority
+      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw"
+      className="object-contain"
     />
   </div>
 );

src/app/auth/page.tsx

@@ -6,27 +6,38 @@ import { CheckCircle, Shield } from 'lucide-react';
 import ImageSection from "./components/ImageSection";
 import TextSection from "./components/TextSection";
 import AuthButtons from './components/AuthButtons';
+import Image from 'next/image';
 
 const Auth = () => {
   return (
-    <main className="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-white p-8 font-inter">
-      <MainCard>
-        <div className="p-8 lg:p-12 flex flex-col items-center justify-center bg-gray-50 border-r border-gray-300 relative">
-          <div className="flex space-x-2 items-center pb-4">
-            <Badge icon={CheckCircle} text="Secure" bgColor="bg-green-100" textColor="text-green-600" />
-            <Badge icon={Shield} text="Verified" bgColor="bg-blue-100" textColor="text-blue-600" />
-          </div>
-          <ImageSection />
-          <TextSection />
+    <main className="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-blue-100 to-white font-inter">
+      <MainCard className="flex flex-col md:flex-row w-full max-w-4xl bg-white rounded-lg shadow-lg overflow-hidden">
+      <div className="p-4 sm:p-6 lg:p-8 flex-1 flex flex-col items-center justify-center bg-gray-50 border-b md:border-b-0 md:border-r border-gray-200">
+        <div className="flex items-center space-x-2 mb-4 sm:mb-6">
+        <Badge icon={CheckCircle} text="Secure" bgColor="bg-green-100" textColor="text-green-600" />
+        <Badge icon={Shield} text="Verified" bgColor="bg-blue-100" textColor="text-blue-600" />
         </div>
-        <div className="p-8 lg:p-12 flex flex-col justify-center space-y-8">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">Get Started</h1>
-            <p className="text-gray-600">Register for SafeDep Cloud to get API access.</p>
-          </div>
-          <AuthButtons />
-          <TermsAndPrivacy />
+        <ImageSection />
+        <TextSection />
+      </div>
+      <div className="p-4 sm:p-6 lg:p-8 flex-1 flex flex-col justify-center space-y-4 sm:space-y-6">
+        <div>
+        <div className="flex items-center gap-2 mb-3 sm:mb-4">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-light text-gray-900 text-left leading-tight">
+          Get Started
+          <br />
+          <span className="inline-flex items-center">
+            With <Image src="/safedepsign.svg" alt="SafeDep Logo" width={20} height={20} className="w-16 sm:w-20 h-6 sm:h-8 object-contain ml-2" />
+          </span>
+          </h1>
         </div>
+        <p className="text-base sm:text-lg text-gray-600 leading-relaxed">
+          Register for SafeDep Cloud to get API access.
+        </p>
+        </div>
+        <AuthButtons />
+        <TermsAndPrivacy />
+      </div>
       </MainCard>
     </main>
   );

src/components/MainCard.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 
 interface MainCardProps {
   children: React.ReactNode;
+  className?: string;
 }
 
-const MainCard: React.FC<MainCardProps> = ({ children }) => {
+const MainCard: React.FC<MainCardProps> = ({ children, className }) => {
   return (
-    <div className="w-full max-w-5xl mx-auto bg-white rounded-2xl shadow-lg border border-gray-200 grid grid-cols-1 md:grid-cols-2 overflow-hidden">
+    <div className={className}>
       {children}
     </div>
   );
 };
 
-export default MainCard;
+export default MainCard;