From 484d528e683274f2f65f9c46773a76eb1c0853b1 Mon Sep 17 00:00:00 2001
From: Mayur Shinde <mayurshinde6776@gmail.com>
Date: Tue, 16 Jun 2026 20:51:23 +0530
Subject: [PATCH] change layout/design of login page

---
 src/pages/Login.jsx | 224 ++++++++++++++++++++++++--------------------
 1 file changed, 120 insertions(+), 104 deletions(-)

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index cf7c7ec..5ffcd34 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
-import { User, Briefcase, Lock, ArrowRight, AlertCircle, Eye, EyeOff } from 'lucide-react';
+import { User, Briefcase, Lock, ArrowRight, AlertCircle, Eye, EyeOff, Zap } from 'lucide-react';
 import { SpotlightCard } from '../components/SpotlightCard';
 import Logo from '../assets/images/LynkedUp_Pro_F_logo_Y.png';
 
@@ -178,7 +178,7 @@ const Login = () => {
     };
 
     return (
-        <div className="min-h-screen bg-zinc-50 dark:bg-[#050505] flex items-center justify-center p-4 relative overflow-hidden selection:bg-blue-500/20 dark:selection:bg-white/20 transition-colors duration-300">
+        <div className="min-h-screen bg-zinc-50 dark:bg-[#050505] flex items-center justify-center p-4 py-8 sm:py-12 relative overflow-x-hidden selection:bg-blue-500/20 dark:selection:bg-white/20 transition-colors duration-300">
             {/* Subtle Ambient Background */}
             <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-[0.03] dark:opacity-5 pointer-events-none mix-blend-overlay"></div>
             <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none">
@@ -215,107 +215,29 @@ const Login = () => {
                 }
             `}</style>
 
-            <div className="w-full max-w-lg z-10 relative">
-                <SpotlightCard className="bg-white/60 dark:bg-black/30 backdrop-blur-3xl border-0 ring-1 ring-black/5 dark:ring-white/5 shadow-2xl dark:shadow-2xl">
-                    <div className="p-6 md:p-10"> {/* ADJUSTED PADDING FOR MOBILE */}
-                        <div className="text-center mb-8 md:mb-10 pt-2">
-                            <img src={Logo} alt="LynkedUp Pro" className="w-20 md:w-24 h-20 md:h-24 mx-auto mb-4 md:mb-6 object-contain drop-shadow-2xl" />
-                            <h1 className="text-2xl md:text-3xl font-black text-zinc-900 dark:text-white mb-2 tracking-tighter">
-                                Welcome Back
-                            </h1>
-                            <p className="text-zinc-500 font-medium text-base md:text-lg">Sign in to your LynkedUp Pro account</p>
-                        </div>
+            <div className="w-full max-w-md lg:max-w-4xl z-10 relative">
+                <SpotlightCard className="bg-white/60 dark:bg-black/30 backdrop-blur-3xl border-0 ring-1 ring-black/5 dark:ring-white/5 shadow-2xl dark:shadow-2xl overflow-hidden">
+                    {/* Header — full width across both panels */}
+                    <div className="text-center px-5 sm:px-6 md:px-10 pt-4 sm:pt-5 md:pt-6 pb-1">
+                        <img src={Logo} alt="LynkedUp Pro" className="w-24 sm:w-28 md:w-32 h-24 sm:h-28 md:h-32 mx-auto mb-0.5 sm:mb-1 object-contain drop-shadow-2xl" />
+                        <h1 className="text-xl sm:text-2xl md:text-3xl font-black text-zinc-900 dark:text-white mb-1 tracking-tighter">
+                            Welcome Back
+                        </h1>
+                        <p className="text-zinc-500 font-medium text-sm sm:text-base">Sign in to your LynkedUp Pro account</p>
+                    </div>
 
-                        {/* Role Tabs — 3-col grid on mobile, 6-col on desktop */}
-                        <div className="grid grid-cols-3 md:grid-cols-6 gap-1.5 p-1.5 bg-zinc-100 dark:bg-black/40 rounded-xl mb-8 md:mb-10 border border-zinc-200 dark:border-white/5">
-                            {[
-                                { key: 'customer', label: 'Customer' },
-                                { key: 'employee', label: 'Employee' },
-                                { key: 'owner', label: 'Owner' },
-                                { key: 'contractor', label: 'Contract.' },
-                                { key: 'vendor', label: 'Vendor' },
-                                { key: 'subcontractor', label: 'Sub-Con' },
-                            ].map(({ key, label }) => (
-                                <button
-                                    key={key}
-                                    onClick={() => setLoginType(key)}
-                                    className={`flex items-center justify-center py-2.5 px-1 text-[10px] font-bold uppercase rounded-lg transition-all duration-300 whitespace-nowrap ${loginType === key
-                                        ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-sm border border-black/5 dark:border-white/5'
-                                        : 'text-zinc-400 dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400'}`}
-                                >
-                                    {label}
-                                </button>
-                            ))}
-                        </div>
-
-                        <form onSubmit={handleLogin} className="space-y-6 md:space-y-8">
-                            <div className="space-y-2">
-                                <label htmlFor="identifier" className="text-xs font-bold text-zinc-500 ml-1 uppercase tracking-widest">
-                                    {loginType === 'employee' ? 'Employee ID' : 'Username'}
-                                </label>
-                                <div className="relative group">
-                                    <div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-zinc-900 dark:group-focus-within:text-white transition-colors z-10">
-                                        {loginType === 'customer' ? <User size={20} /> : <Briefcase size={20} />}
-                                    </div>
-                                    <input
-                                        id="identifier"
-                                        name="identifier"
-                                        type="text"
-                                        value={identifier}
-                                        onChange={(e) => setIdentifier(e.target.value)}
-                                        className="w-full bg-zinc-100 dark:bg-zinc-900/50 border border-zinc-200 dark:border-white/5 text-zinc-900 dark:text-white rounded-xl py-4 pl-12 pr-4 focus:outline-none focus:ring-1 focus:ring-black/10 dark:focus:ring-white/20 focus:bg-white dark:focus:bg-zinc-900 transition-all placeholder:text-zinc-400 dark:placeholder:text-zinc-700 font-medium relative z-0"
-                                        placeholder={loginType === 'employee' ? "e.g., LUP-1040" : "e.g., username"}
-                                    />
-                                </div>
+                    {/* Two-panel body: demo access + manual sign-in.
+                        Mobile → stacked, demo access shown FIRST (above the form).
+                        Desktop (lg) → side-by-side, sign-in left / demo access right. */}
+                    <div className="flex flex-col lg:flex-row">
+                        {/* Quick Demo Access — order-first on mobile so links are instantly visible */}
+                        <div className="order-1 lg:order-2 lg:w-1/2 p-5 sm:p-6 md:p-8 mt-4 lg:mt-0 border-t lg:border-t-0 lg:border-l border-zinc-200 dark:border-white/5 bg-zinc-50/60 dark:bg-white/[0.02]">
+                            <div className="flex items-center gap-2 mb-1">
+                                <Zap size={15} className="text-amber-500 shrink-0" />
+                                <p className="text-[11px] text-zinc-700 dark:text-zinc-200 uppercase tracking-widest font-bold">Quick Demo Access</p>
                             </div>
-
-                            <div className="space-y-2">
-                                <div className="flex justify-between items-center ml-1">
-                                    <label htmlFor="password" className="text-xs font-bold text-zinc-500 uppercase tracking-widest">Password</label>
-                                    <button type="button" className="text-xs font-semibold text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300 transition-colors">
-                                        Forgot Password?
-                                    </button>
-                                </div>
-                                <div className="relative group">
-                                    <div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-zinc-900 dark:group-focus-within:text-white transition-colors z-10">
-                                        <Lock size={20} />
-                                    </div>
-                                    <input
-                                        id="password"
-                                        name="password"
-                                        type={showPassword ? "text" : "password"}
-                                        value={password}
-                                        onChange={(e) => setPassword(e.target.value)}
-                                        className="w-full bg-zinc-100 dark:bg-zinc-900/50 border border-zinc-200 dark:border-white/5 text-zinc-900 dark:text-white rounded-xl py-4 pl-12 pr-12 focus:outline-none focus:ring-1 focus:ring-black/10 dark:focus:ring-white/20 focus:bg-white dark:focus:bg-zinc-900 transition-all placeholder:text-zinc-400 dark:placeholder:text-zinc-700 font-medium relative z-0"
-                                        placeholder="Enter your password"
-                                    />
-                                    <button
-                                        type="button"
-                                        onClick={() => setShowPassword(!showPassword)}
-                                        className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors z-10"
-                                    >
-                                        {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-                                    </button>
-                                </div>
-                            </div>
-
-                            {error && (
-                                <div className="flex items-center space-x-2 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 p-4 rounded-xl text-sm font-bold uppercase tracking-wide">
-                                    <AlertCircle size={18} />
-                                    <span>{error}</span>
-                                </div>
-                            )}
-
-                            <RainbowButton type="submit" className="mt-4 text-white py-4 md:py-5 text-base md:text-lg">
-                                <span>Sign In</span>
-                                <ArrowRight size={20} />
-                            </RainbowButton>
-                        </form>
-
-                        {/* Demo Quick Links — per-role person picker */}
-                        <div className="mt-8 md:mt-10 pt-6 md:pt-8 border-t border-zinc-200 dark:border-white/5">
-                            <p className="text-[10px] text-center text-zinc-500 uppercase tracking-widest font-bold mb-4">Quick Demo Access</p>
-                            <div className="flex flex-wrap gap-2 justify-center mb-3">
+                            <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mb-4">Pick a role to sign in instantly — no password needed.</p>
+                            <div className="grid grid-cols-2 gap-2">
                                 {Object.keys(DEMO_ACCOUNTS).map((roleKey) => {
                                     const styles = DEMO_ROLE_STYLES[roleKey] || DEMO_ROLE_STYLES.customer;
                                     const isExpanded = expandedDemoRole === roleKey;
@@ -324,11 +246,11 @@ const Login = () => {
                                         <button
                                             key={roleKey}
                                             onClick={() => toggleDemoRole(roleKey)}
-                                            className={`text-[10px] font-bold uppercase tracking-wider border px-3 py-2 rounded-lg transition-all duration-200 ${isExpanded ? styles.active : styles.chip}`}
+                                            className={`flex items-center justify-center gap-1 text-[11px] font-bold uppercase tracking-wider border px-3 py-2.5 rounded-lg transition-all duration-200 ${isExpanded ? styles.active : styles.chip}`}
                                         >
                                             {DEMO_ROLE_LABELS[roleKey]}
                                             {!isSingle && (
-                                                <span className={`ml-1 transition-transform duration-200 inline-block ${isExpanded ? 'rotate-180' : ''}`}>▾</span>
+                                                <span className={`transition-transform duration-200 inline-block ${isExpanded ? 'rotate-180' : ''}`}>▾</span>
                                             )}
                                         </button>
                                     );
@@ -336,7 +258,7 @@ const Login = () => {
                             </div>
                             {/* Person picker — expands below chips when a multi-person role is selected */}
                             {expandedDemoRole && DEMO_ACCOUNTS[expandedDemoRole] && (
-                                <div className="mt-2 p-2.5 bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-200 dark:border-white/5 rounded-xl flex flex-col gap-1">
+                                <div className="mt-2 p-2.5 bg-white dark:bg-zinc-900/60 border border-zinc-200 dark:border-white/5 rounded-xl flex flex-col gap-1">
                                     {DEMO_ACCOUNTS[expandedDemoRole].map((account) => (
                                         <button
                                             key={account.id}
@@ -350,6 +272,100 @@ const Login = () => {
                                 </div>
                             )}
                         </div>
+
+                        {/* Manual sign-in */}
+                        <div className="order-2 lg:order-1 lg:w-1/2 p-5 sm:p-6 md:p-8 border-t lg:border-t-0 border-zinc-200 dark:border-white/5">
+                            <div className="flex items-center gap-2 mb-1">
+                                <Lock size={15} className="text-zinc-400 dark:text-zinc-500 shrink-0" />
+                                <p className="text-[11px] text-zinc-700 dark:text-zinc-200 uppercase tracking-widest font-bold">Sign in with your account</p>
+                            </div>
+                            <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mb-4">Enter your username and password below.</p>
+                            {/* Role Tabs — 3-col grid (temporarily disabled) */}
+                            {/* <div className="grid grid-cols-3 gap-1.5 p-1.5 bg-zinc-100 dark:bg-black/40 rounded-xl mb-5 sm:mb-6 border border-zinc-200 dark:border-white/5">
+                                {[
+                                    { key: 'customer', label: 'Customer' },
+                                    { key: 'employee', label: 'Employee' },
+                                    { key: 'owner', label: 'Owner' },
+                                    { key: 'contractor', label: 'Contract.' },
+                                    { key: 'vendor', label: 'Vendor' },
+                                    { key: 'subcontractor', label: 'Sub-Con' },
+                                ].map(({ key, label }) => (
+                                    <button
+                                        key={key}
+                                        onClick={() => setLoginType(key)}
+                                        className={`flex items-center justify-center py-2.5 px-1 text-[10px] font-bold uppercase rounded-lg transition-all duration-300 whitespace-nowrap ${loginType === key
+                                            ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-sm border border-black/5 dark:border-white/5'
+                                            : 'text-zinc-400 dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400'}`}
+                                    >
+                                        {label}
+                                    </button>
+                                ))}
+                            </div> */}
+
+                            <form onSubmit={handleLogin} className="space-y-4 sm:space-y-5">
+                                <div className="space-y-2">
+                                    <label htmlFor="identifier" className="text-xs font-bold text-zinc-500 ml-1 uppercase tracking-widest">
+                                        {loginType === 'employee' ? 'Employee ID' : 'Username'}
+                                    </label>
+                                    <div className="relative group">
+                                        <div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-zinc-900 dark:group-focus-within:text-white transition-colors z-10">
+                                            {loginType === 'customer' ? <User size={20} /> : <Briefcase size={20} />}
+                                        </div>
+                                        <input
+                                            id="identifier"
+                                            name="identifier"
+                                            type="text"
+                                            value={identifier}
+                                            onChange={(e) => setIdentifier(e.target.value)}
+                                            className="w-full bg-zinc-100 dark:bg-zinc-900/50 border border-zinc-200 dark:border-white/5 text-zinc-900 dark:text-white rounded-xl py-2.5 sm:py-3 pl-12 pr-4 focus:outline-none focus:ring-1 focus:ring-black/10 dark:focus:ring-white/20 focus:bg-white dark:focus:bg-zinc-900 transition-all placeholder:text-zinc-400 dark:placeholder:text-zinc-700 font-medium relative z-0"
+                                            placeholder={loginType === 'employee' ? "e.g., LUP-1040" : "e.g., username"}
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <div className="flex justify-between items-center ml-1">
+                                        <label htmlFor="password" className="text-xs font-bold text-zinc-500 uppercase tracking-widest">Password</label>
+                                        <button type="button" className="text-xs font-semibold text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300 transition-colors">
+                                            Forgot Password?
+                                        </button>
+                                    </div>
+                                    <div className="relative group">
+                                        <div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-zinc-900 dark:group-focus-within:text-white transition-colors z-10">
+                                            <Lock size={20} />
+                                        </div>
+                                        <input
+                                            id="password"
+                                            name="password"
+                                            type={showPassword ? "text" : "password"}
+                                            value={password}
+                                            onChange={(e) => setPassword(e.target.value)}
+                                            className="w-full bg-zinc-100 dark:bg-zinc-900/50 border border-zinc-200 dark:border-white/5 text-zinc-900 dark:text-white rounded-xl py-2.5 sm:py-3 pl-12 pr-12 focus:outline-none focus:ring-1 focus:ring-black/10 dark:focus:ring-white/20 focus:bg-white dark:focus:bg-zinc-900 transition-all placeholder:text-zinc-400 dark:placeholder:text-zinc-700 font-medium relative z-0"
+                                            placeholder="Enter your password"
+                                        />
+                                        <button
+                                            type="button"
+                                            onClick={() => setShowPassword(!showPassword)}
+                                            className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors z-10"
+                                        >
+                                            {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                {error && (
+                                    <div className="flex items-center space-x-2 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 p-4 rounded-xl text-sm font-bold uppercase tracking-wide">
+                                        <AlertCircle size={18} />
+                                        <span>{error}</span>
+                                    </div>
+                                )}
+
+                                <RainbowButton type="submit" className="mt-2 text-white py-3.5 sm:py-4 text-base md:text-lg">
+                                    <span>Sign In</span>
+                                    <ArrowRight size={20} />
+                                </RainbowButton>
+                            </form>
+                        </div>
                     </div>
                 </SpotlightCard>
             </div>