fix(login): resolve column overlap bug by refactoring with robust CSS grid layout
This commit is contained in:
parent
1472618680
commit
6190f5b699
1 changed files with 208 additions and 117 deletions
|
|
@ -31,94 +31,176 @@ export default function LoginPage() {
|
|||
alert('Please enter the OTP');
|
||||
return;
|
||||
}
|
||||
// Simulate login
|
||||
handleLoginSubmit(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="seller-login-page py-6 px-4" style={{ minHeight: 'calc(100vh - 120px)', backgroundColor: 'var(--trad-bg)', display: 'flex', alignItems: 'center' }}>
|
||||
<div className="container is-max-desktop">
|
||||
<div className="box p-0 overflow-hidden" style={{ borderRadius: '16px', border: '1px solid #e7ded9', boxShadow: '0 8px 30px rgba(103,27,38,0.08)' }}>
|
||||
<div className="columns is-gapless mb-0">
|
||||
{/* Left Column: Artisan Branding Panel */}
|
||||
<div className="column is-5 is-hidden-touch p-6 is-flex is-flex-direction-column is-justify-content-between" style={{ background: 'linear-gradient(135deg, var(--trad-maroon) 0%, var(--trad-burgundy) 100%)', color: '#ffffff' }}>
|
||||
<div>
|
||||
<span className="tag is-rounded is-small mb-4" style={{ backgroundColor: 'rgba(255,255,255,0.15)', color: '#ffffff', fontWeight: 700, letterSpacing: '0.08em' }}>
|
||||
SELLER HUB
|
||||
</span>
|
||||
<h2 className="title is-2 font-serif-trad mb-4" style={{ color: '#ffffff', lineHeight: 1.3 }}>
|
||||
Beginning our journey to connect authentic Indian artisans with the world.
|
||||
</h2>
|
||||
<p className="subtitle is-6 mb-6" style={{ color: '#fed7db', lineHeight: 1.6 }}>
|
||||
Direct access to manage orders, inventory, weekly settlements, and cultural storytelling from one verified portal.
|
||||
</p>
|
||||
|
||||
<div className="value-props mt-4">
|
||||
<div className="is-flex is-align-items-center mb-4">
|
||||
<div style={{ width: '28px', height: '28px', borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: '12px' }}>
|
||||
<i className="fa-solid fa-check" style={{ color: '#ffffff', fontSize: '0.8rem' }}></i>
|
||||
</div>
|
||||
<span className="is-size-6 has-text-weight-medium">Zero registration & zero listing fees</span>
|
||||
</div>
|
||||
|
||||
<div className="is-flex is-align-items-center mb-4">
|
||||
<div style={{ width: '28px', height: '28px', borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: '12px' }}>
|
||||
<i className="fa-solid fa-check" style={{ color: '#ffffff', fontSize: '0.8rem' }}></i>
|
||||
</div>
|
||||
<span className="is-size-6 has-text-weight-medium">100% direct bank payouts on schedule</span>
|
||||
</div>
|
||||
|
||||
<div className="is-flex is-align-items-center mb-4">
|
||||
<div style={{ width: '28px', height: '28px', borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: '12px' }}>
|
||||
<i className="fa-solid fa-check" style={{ color: '#ffffff', fontSize: '0.8rem' }}></i>
|
||||
</div>
|
||||
<span className="is-size-6 has-text-weight-medium">Pan-India delivery covering 15,000+ pin codes</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="seller-login-page py-6 px-4" style={{ minHeight: 'calc(100vh - 120px)', backgroundColor: 'var(--trad-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<div className="container" style={{ maxWidth: '1080px', width: '100%' }}>
|
||||
{/* Split Card Shell matching Stitch Screen 11 */}
|
||||
<div
|
||||
className="login-card-shell"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 7fr)',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
border: '1px solid #E5E0DC',
|
||||
boxShadow: '0 12px 40px -10px rgba(0, 0, 0, 0.08)',
|
||||
overflow: 'hidden',
|
||||
minHeight: '620px'
|
||||
}}
|
||||
>
|
||||
{/* Left Column: Inspiring Artisan Showcase & Value Prop */}
|
||||
<div
|
||||
className="artisan-showcase-panel is-hidden-mobile"
|
||||
style={{
|
||||
backgroundColor: '#FAF8F6',
|
||||
borderRight: '1px solid #E5E0DC',
|
||||
padding: '2.5rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
minWidth: 0
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
{/* Seller Hub Badge */}
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.4rem', backgroundColor: '#FBECEE', color: '#791B2C', borderRadius: '9999px', padding: '4px 12px', fontSize: '0.75rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
||||
<i className="fa-solid fa-star" style={{ fontSize: '0.7rem' }}></i>
|
||||
<span>Seller Hub</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-4" style={{ borderTop: '1px solid rgba(255,255,255,0.15)' }}>
|
||||
<p className="is-size-7" style={{ color: 'rgba(255,255,255,0.7)' }}>
|
||||
Protected by 256-bit SSL encryption & AEO certification standards.
|
||||
</p>
|
||||
{/* Title */}
|
||||
<h2 style={{ fontSize: '1.45rem', fontWeight: 800, color: '#1A1A1A', lineHeight: 1.35, letterSpacing: '-0.02em', marginBottom: '1.25rem' }}>
|
||||
Beginning our journey to connect authentic Indian artisans with the world.
|
||||
</h2>
|
||||
|
||||
{/* Authentic Artisan Photography Showcase */}
|
||||
<div style={{ borderRadius: '16px', overflow: 'hidden', border: '1px solid #E5E0DC', marginBottom: '1.5rem', boxShadow: '0 2px 8px rgba(0,0,0,0.04)', position: 'relative' }}>
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/aida/AEtjO1VVqC1Yq2L6fTDJ4jPuxxPQiR-Os8nuASct0PE-ib1UjQvWO_KRAPJkDjXOHTC2SryHVm9GK7t6I__E36AaIEf8e2gI4m5ujdJPa-XYOSKNY0dRzcwUwLQ4t6zKs98nvakERchACvV_DyH-w0J5s6sLkhmD9QYgmNyXc5rtNRHZUpCMmcgUJ19mJG8QAX3AmVi5eUmiqnZT3XYVTsvg8BJFzFB38Lhh3k-N4wie09_NRvfGEFYT6hWAwBdj"
|
||||
alt="Indian artisan potter"
|
||||
style={{ width: '100%', height: '180px', objectFit: 'cover', display: 'block' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Value Props Checklist */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
<div style={{ width: '22px', height: '22px', borderRadius: '50%', backgroundColor: '#EBF7EE', color: '#1B7D36', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.7rem', flexShrink: 0, fontWeight: 700 }}>
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<span style={{ fontSize: '0.88rem', fontWeight: 500, color: '#403B37' }}>Zero registration & zero listing fees</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
<div style={{ width: '22px', height: '22px', borderRadius: '50%', backgroundColor: '#EBF7EE', color: '#1B7D36', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.7rem', flexShrink: 0, fontWeight: 700 }}>
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<span style={{ fontSize: '0.88rem', fontWeight: 500, color: '#403B37' }}>100% direct bank payouts on schedule</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
<div style={{ width: '22px', height: '22px', borderRadius: '50%', backgroundColor: '#EBF7EE', color: '#1B7D36', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.7rem', flexShrink: 0, fontWeight: 700 }}>
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<span style={{ fontSize: '0.88rem', fontWeight: 500, color: '#403B37' }}>Pan-India delivery covering 15,000+ pin codes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Login Forms */}
|
||||
<div className="column is-7 p-6 has-background-white is-flex is-flex-direction-column is-justify-content-center">
|
||||
<div className="mb-5">
|
||||
<span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.75rem' }}>
|
||||
Seller ID Portal
|
||||
</span>
|
||||
<h1 className="title is-3 font-serif-trad mt-1 mb-2" style={{ color: 'var(--trad-maroon)' }}>
|
||||
{/* Bottom Note */}
|
||||
<div style={{ marginTop: '2rem', paddingTop: '1rem', borderTop: '1px solid #E5E0DC' }}>
|
||||
<p style={{ fontSize: '0.75rem', color: '#8A8A82', margin: 0 }}>
|
||||
Protected by 256-bit SSL encryption & AEO certification standards.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Interactive Login Portal */}
|
||||
<div
|
||||
className="seller-login-panel"
|
||||
style={{
|
||||
backgroundColor: '#ffffff',
|
||||
padding: '2.5rem 2.75rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
minWidth: 0
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
{/* Header Block */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
|
||||
<h1 style={{ fontSize: '1.65rem', fontWeight: 800, color: '#4A0E18', letterSpacing: '-0.02em', margin: 0 }}>
|
||||
Welcome back, Maker
|
||||
</h1>
|
||||
<p className="has-text-grey is-size-6">
|
||||
Access your dashboard, manage orders, and grow your authentic craft brand.
|
||||
</p>
|
||||
<span style={{ fontSize: '0.72rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', backgroundColor: '#F6F3F2', border: '1px solid #E5E0DC', color: '#5F5E5A', padding: '3px 8px', borderRadius: '6px' }}>
|
||||
Seller ID Portal
|
||||
</span>
|
||||
</div>
|
||||
<p style={{ fontSize: '0.88rem', color: '#5F5E5A', marginBottom: '1.75rem' }}>
|
||||
Access your dashboard, manage orders, and grow your authentic craft brand.
|
||||
</p>
|
||||
|
||||
{/* Login Method Tabs */}
|
||||
<div className="tabs is-boxed mb-5">
|
||||
<ul style={{ borderBottomColor: '#e7ded9' }}>
|
||||
<li className={activeTab === 'email' ? 'is-active' : ''}>
|
||||
<a onClick={() => setActiveTab('email')} className="has-text-weight-semibold">
|
||||
<i className="fa-solid fa-envelope mr-2"></i> Email & Password
|
||||
</a>
|
||||
</li>
|
||||
<li className={activeTab === 'otp' ? 'is-active' : ''}>
|
||||
<a onClick={() => setActiveTab('otp')} className="has-text-weight-semibold">
|
||||
<i className="fa-solid fa-mobile-screen mr-2"></i> Mobile OTP Login
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div style={{ display: 'flex', backgroundColor: '#F6F3F2', borderRadius: '10px', padding: '4px', border: '1px solid #E5E0DC', marginBottom: '1.5rem' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('email')}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '8px 12px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.84rem',
|
||||
fontWeight: activeTab === 'email' ? 700 : 500,
|
||||
backgroundColor: activeTab === 'email' ? '#ffffff' : 'transparent',
|
||||
color: activeTab === 'email' ? '#1A1A1A' : '#5F5E5A',
|
||||
boxShadow: activeTab === 'email' ? '0 1px 3px rgba(0,0,0,0.06)' : 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.5rem',
|
||||
transition: 'all 0.15s ease'
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-envelope" style={{ color: activeTab === 'email' ? '#791B2C' : '#8A8A82' }}></i>
|
||||
<span>Email & Password</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('otp')}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '8px 12px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.84rem',
|
||||
fontWeight: activeTab === 'otp' ? 700 : 500,
|
||||
backgroundColor: activeTab === 'otp' ? '#ffffff' : 'transparent',
|
||||
color: activeTab === 'otp' ? '#1A1A1A' : '#5F5E5A',
|
||||
boxShadow: activeTab === 'otp' ? '0 1px 3px rgba(0,0,0,0.06)' : 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.5rem',
|
||||
transition: 'all 0.15s ease'
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-mobile-screen" style={{ color: activeTab === 'otp' ? '#791B2C' : '#8A8A82' }}></i>
|
||||
<span>Mobile OTP Login</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab 1: Email & Password Form */}
|
||||
{/* Form Tab 1: Email & Password */}
|
||||
{activeTab === 'email' ? (
|
||||
<form onSubmit={handleLoginSubmit}>
|
||||
<div className="field mb-4">
|
||||
<label className="label is-size-7 is-uppercase has-text-grey" htmlFor="seller-email">
|
||||
<label className="label" htmlFor="seller-email" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', marginBottom: '0.35rem' }}>
|
||||
Registered Email Address
|
||||
</label>
|
||||
<div className="control has-icons-left">
|
||||
|
|
@ -130,7 +212,7 @@ export default function LoginPage() {
|
|||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
style={{ borderColor: '#e7ded9', borderRadius: '8px' }}
|
||||
style={{ borderColor: '#D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
||||
/>
|
||||
<span className="icon is-left has-text-grey">
|
||||
<i className="fa-solid fa-envelope"></i>
|
||||
|
|
@ -139,11 +221,11 @@ export default function LoginPage() {
|
|||
</div>
|
||||
|
||||
<div className="field mb-4">
|
||||
<div className="is-flex is-justify-content-between is-align-items-center mb-1">
|
||||
<label className="label is-size-7 is-uppercase has-text-grey mb-0" htmlFor="seller-pass">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
|
||||
<label className="label" htmlFor="seller-pass" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', margin: 0 }}>
|
||||
Password
|
||||
</label>
|
||||
<a href="#" className="is-size-7 has-text-weight-semibold" style={{ color: 'var(--trad-maroon)', textDecoration: 'none' }}>
|
||||
<a href="#forgot" style={{ fontSize: '0.8rem', fontWeight: 600, color: '#791B2C', textDecoration: 'none' }}>
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -156,7 +238,7 @@ export default function LoginPage() {
|
|||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
style={{ borderColor: '#e7ded9', borderRadius: '8px' }}
|
||||
style={{ borderColor: '#D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
||||
/>
|
||||
<span className="icon is-left has-text-grey">
|
||||
<i className="fa-solid fa-lock"></i>
|
||||
|
|
@ -164,7 +246,7 @@ export default function LoginPage() {
|
|||
<span
|
||||
className="icon is-right is-clickable"
|
||||
onClick={() => setShowLoginPass(!showLoginPass)}
|
||||
style={{ pointerEvents: 'all' }}
|
||||
style={{ pointerEvents: 'all', cursor: 'pointer' }}
|
||||
>
|
||||
<i className={`fa-solid ${showLoginPass ? 'fa-eye-slash' : 'fa-eye'}`}></i>
|
||||
</span>
|
||||
|
|
@ -172,50 +254,49 @@ export default function LoginPage() {
|
|||
</div>
|
||||
|
||||
<div className="field mb-5">
|
||||
<div className="control">
|
||||
<label className="checkbox is-size-7 has-text-grey is-flex is-align-items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={rememberMe}
|
||||
onChange={(e) => setRememberMe(e.target.checked)}
|
||||
className="mr-2"
|
||||
style={{ accentColor: 'var(--trad-maroon)' }}
|
||||
/>
|
||||
Remember this device for 30 days
|
||||
</label>
|
||||
</div>
|
||||
<label className="checkbox" htmlFor="remember-me" style={{ fontSize: '0.82rem', color: '#59524D', display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
|
||||
<input
|
||||
id="remember-me"
|
||||
type="checkbox"
|
||||
checked={rememberMe}
|
||||
onChange={(e) => setRememberMe(e.target.checked)}
|
||||
style={{ accentColor: '#791B2C', width: '16px', height: '16px' }}
|
||||
/>
|
||||
<span>Remember this device for 30 days</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="button is-fullwidth has-text-weight-bold mb-4"
|
||||
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', borderRadius: '8px', padding: '0.75rem', height: 'auto' }}
|
||||
className="button is-fullwidth has-text-weight-bold"
|
||||
style={{ backgroundColor: '#791B2C', color: '#ffffff', borderRadius: '8px', height: '44px', border: 'none', fontSize: '0.92rem', boxShadow: '0 2px 8px rgba(121, 27, 44, 0.25)' }}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
/* Tab 2: Mobile OTP Form */
|
||||
/* Form Tab 2: Mobile OTP */
|
||||
<form onSubmit={handleOtpLogin}>
|
||||
<div className="field mb-4">
|
||||
<label className="label is-size-7 is-uppercase has-text-grey">
|
||||
<label className="label" htmlFor="seller-phone" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', marginBottom: '0.35rem' }}>
|
||||
Registered Mobile Number
|
||||
</label>
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<a className="button is-static" style={{ borderColor: '#e7ded9', borderRadius: '8px 0 0 8px' }}>
|
||||
<span className="has-text-weight-bold mr-1">IN</span> +91
|
||||
</a>
|
||||
<span className="button is-static" style={{ backgroundColor: '#F6F3F2', border: '1px solid #D1CAC7', borderRight: 'none', borderTopLeftRadius: '8px', borderBottomLeftRadius: '8px', height: '42px', fontSize: '0.85rem', fontWeight: 600 }}>
|
||||
IN +91
|
||||
</span>
|
||||
</p>
|
||||
<p className="control is-expanded">
|
||||
<input
|
||||
id="seller-phone"
|
||||
type="tel"
|
||||
className="input"
|
||||
placeholder="e.g. 9876543210"
|
||||
placeholder="Enter 10-digit mobile number"
|
||||
maxLength={10}
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
style={{ borderColor: '#e7ded9' }}
|
||||
style={{ border: '1px solid #D1CAC7', height: '42px', fontSize: '0.9rem' }}
|
||||
/>
|
||||
</p>
|
||||
<p className="control">
|
||||
|
|
@ -223,29 +304,30 @@ export default function LoginPage() {
|
|||
type="button"
|
||||
className="button has-text-weight-semibold"
|
||||
onClick={handleSendOtp}
|
||||
style={{ backgroundColor: '#faeef0', color: 'var(--trad-maroon)', borderColor: '#e7ded9', borderRadius: '0 8px 8px 0' }}
|
||||
style={{ backgroundColor: '#FBECEE', color: '#791B2C', border: '1px solid #D1CAC7', borderLeft: 'none', borderTopRightRadius: '8px', borderBottomRightRadius: '8px', height: '42px', fontSize: '0.85rem' }}
|
||||
>
|
||||
{otpSent ? 'Resend OTP' : 'Get OTP'}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<p className="help has-text-grey">A 6-digit verification code will be sent via SMS.</p>
|
||||
<p className="help has-text-grey" style={{ fontSize: '0.75rem', marginTop: '0.25rem' }}>A 6-digit verification code will be sent via SMS.</p>
|
||||
</div>
|
||||
|
||||
{otpSent && (
|
||||
<div className="field mb-5">
|
||||
<label className="label is-size-7 is-uppercase has-text-grey">
|
||||
<label className="label" htmlFor="seller-otp" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', marginBottom: '0.35rem' }}>
|
||||
Enter 6-digit OTP
|
||||
</label>
|
||||
<div className="control has-icons-left">
|
||||
<input
|
||||
id="seller-otp"
|
||||
type="text"
|
||||
className="input"
|
||||
placeholder="123456"
|
||||
maxLength={6}
|
||||
value={enteredOtp}
|
||||
onChange={(e) => setEnteredOtp(e.target.value)}
|
||||
style={{ borderColor: '#e7ded9', borderRadius: '8px' }}
|
||||
style={{ border: '1px solid #D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
||||
/>
|
||||
<span className="icon is-left has-text-grey">
|
||||
<i className="fa-solid fa-key"></i>
|
||||
|
|
@ -256,41 +338,50 @@ export default function LoginPage() {
|
|||
|
||||
<button
|
||||
type="submit"
|
||||
className="button is-fullwidth has-text-weight-bold mb-4"
|
||||
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', borderRadius: '8px', padding: '0.75rem', height: 'auto' }}
|
||||
className="button is-fullwidth has-text-weight-bold"
|
||||
aria-label="Sign In"
|
||||
style={{ backgroundColor: '#791B2C', color: '#ffffff', borderRadius: '8px', height: '44px', border: 'none', fontSize: '0.92rem', boxShadow: '0 2px 8px rgba(121, 27, 44, 0.25)' }}
|
||||
>
|
||||
Log In to Seller Hub
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="has-text-centered mt-4 pt-4" style={{ borderTop: '1px solid #e7ded9' }}>
|
||||
<p className="is-size-6 has-text-grey">
|
||||
{/* Registration Link */}
|
||||
<div style={{ textAlign: 'center', marginTop: '1.5rem', paddingTop: '1.25rem', borderTop: '1px solid #E5E0DC' }}>
|
||||
<p style={{ fontSize: '0.86rem', color: '#5F5E5A', margin: 0 }}>
|
||||
Don't have a seller account yet?{' '}
|
||||
<a
|
||||
className="has-text-weight-bold is-clickable"
|
||||
onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
|
||||
style={{ color: 'var(--trad-maroon)' }}
|
||||
onClick={() => { setCurrentPage('profile-completion'); window.scrollTo(0, 0); }}
|
||||
style={{ color: '#791B2C', fontWeight: 700, cursor: 'pointer' }}
|
||||
>
|
||||
Register as a seller →
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trust badges footer */}
|
||||
<div className="is-flex is-justify-content-center is-align-items-center mt-5 pt-3" style={{ gap: '1.25rem' }}>
|
||||
<span className="is-size-7 has-text-grey">
|
||||
<i className="fa-solid fa-lock mr-1" style={{ color: 'var(--trad-teal)' }}></i> SSL Bank Encryption
|
||||
</span>
|
||||
<span className="is-size-7 has-text-grey">•</span>
|
||||
<span className="is-size-7 has-text-grey">
|
||||
<i className="fa-solid fa-certificate mr-1" style={{ color: 'var(--trad-bronze)' }}></i> GI Verified Artisans
|
||||
</span>
|
||||
</div>
|
||||
{/* Trust Badges & Compliance Row */}
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '1.25rem', marginTop: '1.75rem', paddingTop: '1rem', borderTop: '1px solid #F0ECE9', flexWrap: 'wrap' }}>
|
||||
<span style={{ fontSize: '0.75rem', color: '#666666', display: 'inline-flex', alignItems: 'center', gap: '0.35rem' }}>
|
||||
<i className="fa-solid fa-shield-halved" style={{ color: '#1B7D36' }}></i> 100% Secure SSL Bank-Grade Encryption
|
||||
</span>
|
||||
<span style={{ fontSize: '0.75rem', color: '#999999' }}>•</span>
|
||||
<span style={{ fontSize: '0.75rem', color: '#666666', display: 'inline-flex', alignItems: 'center', gap: '0.35rem' }}>
|
||||
<i className="fa-solid fa-certificate" style={{ color: '#B87333' }}></i> ODOP & GI Verified Artisans
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@media (max-width: 768px) {
|
||||
.login-card-shell {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue