vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(login): resolve column overlap bug by refactoring with robust CSS grid layout

Browse source
This commit is contained in:
vickytechkey 2026-09-10 19:49:22 +05:30
parent 1472618680
commit 6190f5b699
1 changed files with 208 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

279
src/components/pages/LoginPage.tsx
View file

@ -31,94 +31,176 @@ export default function LoginPage() {
alert('Please enter the OTP'); alert('Please enter the OTP');
return; return;
} }
// Simulate login
handleLoginSubmit(e); handleLoginSubmit(e);
}; };
return ( 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="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 is-max-desktop"> <div className="container" style={{ maxWidth: '1080px', width: '100%' }}>
<div className="box p-0 overflow-hidden" style={{ borderRadius: '16px', border: '1px solid #e7ded9', boxShadow: '0 8px 30px rgba(103,27,38,0.08)' }}> {/* Split Card Shell matching Stitch Screen 11 */}
<div className="columns is-gapless mb-0"> <div
{/* Left Column: Artisan Branding Panel */} className="login-card-shell"
<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' }}> 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> <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 Badge */}
SELLER HUB <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' }}>
</span> <i className="fa-solid fa-star" style={{ fontSize: '0.7rem' }}></i>
<h2 className="title is-2 font-serif-trad mb-4" style={{ color: '#ffffff', lineHeight: 1.3 }}> <span>Seller Hub</span>
</div>
{/* 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. Beginning our journey to connect authentic Indian artisans with the world.
</h2> </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"> {/* Authentic Artisan Photography Showcase */}
<div className="is-flex is-align-items-center mb-4"> <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' }}>
<div style={{ width: '28px', height: '28px', borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: '12px' }}> <img
<i className="fa-solid fa-check" style={{ color: '#ffffff', fontSize: '0.8rem' }}></i> src="https://lh3.googleusercontent.com/aida/AEtjO1VVqC1Yq2L6fTDJ4jPuxxPQiR-Os8nuASct0PE-ib1UjQvWO_KRAPJkDjXOHTC2SryHVm9GK7t6I__E36AaIEf8e2gI4m5ujdJPa-XYOSKNY0dRzcwUwLQ4t6zKs98nvakERchACvV_DyH-w0J5s6sLkhmD9QYgmNyXc5rtNRHZUpCMmcgUJ19mJG8QAX3AmVi5eUmiqnZT3XYVTsvg8BJFzFB38Lhh3k-N4wie09_NRvfGEFYT6hWAwBdj"
</div> alt="Indian artisan potter"
<span className="is-size-6 has-text-weight-medium">Zero registration &amp; zero listing fees</span> style={{ width: '100%', height: '180px', objectFit: 'cover', display: 'block' }}
/>
</div> </div>
<div className="is-flex is-align-items-center mb-4"> {/* Value Props Checklist */}
<div style={{ width: '28px', height: '28px', borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: '12px' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
<i className="fa-solid fa-check" style={{ color: '#ffffff', fontSize: '0.8rem' }}></i> <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> </div>
<span className="is-size-6 has-text-weight-medium">100% direct bank payouts on schedule</span> <span style={{ fontSize: '0.88rem', fontWeight: 500, color: '#403B37' }}>Zero registration &amp; zero listing fees</span>
</div> </div>
<div className="is-flex is-align-items-center mb-4"> <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<div style={{ width: '28px', height: '28px', borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: '12px' }}> <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" style={{ color: '#ffffff', fontSize: '0.8rem' }}></i> <i className="fa-solid fa-check"></i>
</div> </div>
<span className="is-size-6 has-text-weight-medium">Pan-India delivery covering 15,000+ pin codes</span> <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> </div>
</div> </div>
<div className="mt-6 pt-4" style={{ borderTop: '1px solid rgba(255,255,255,0.15)' }}> {/* Bottom Note */}
<p className="is-size-7" style={{ color: 'rgba(255,255,255,0.7)' }}> <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 &amp; AEO certification standards. Protected by 256-bit SSL encryption &amp; AEO certification standards.
</p> </p>
</div> </div>
</div> </div>
{/* Right Column: Login Forms */} {/* Right Column: Interactive Login Portal */}
<div className="column is-7 p-6 has-background-white is-flex is-flex-direction-column is-justify-content-center"> <div
<div className="mb-5"> className="seller-login-panel"
<span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.75rem' }}> style={{
Seller ID Portal backgroundColor: '#ffffff',
</span> padding: '2.5rem 2.75rem',
<h1 className="title is-3 font-serif-trad mt-1 mb-2" style={{ color: 'var(--trad-maroon)' }}> 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 Welcome back, Maker
</h1> </h1>
<p className="has-text-grey is-size-6"> <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. Access your dashboard, manage orders, and grow your authentic craft brand.
</p> </p>
</div>
{/* Login Method Tabs */} {/* Login Method Tabs */}
<div className="tabs is-boxed mb-5"> <div style={{ display: 'flex', backgroundColor: '#F6F3F2', borderRadius: '10px', padding: '4px', border: '1px solid #E5E0DC', marginBottom: '1.5rem' }}>
<ul style={{ borderBottomColor: '#e7ded9' }}> <button
<li className={activeTab === 'email' ? 'is-active' : ''}> type="button"
<a onClick={() => setActiveTab('email')} className="has-text-weight-semibold"> onClick={() => setActiveTab('email')}
<i className="fa-solid fa-envelope mr-2"></i> Email &amp; Password style={{
</a> flex: 1,
</li> padding: '8px 12px',
<li className={activeTab === 'otp' ? 'is-active' : ''}> borderRadius: '8px',
<a onClick={() => setActiveTab('otp')} className="has-text-weight-semibold"> border: 'none',
<i className="fa-solid fa-mobile-screen mr-2"></i> Mobile OTP Login cursor: 'pointer',
</a> fontSize: '0.84rem',
</li> fontWeight: activeTab === 'email' ? 700 : 500,
</ul> 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 &amp; 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> </div>
{/* Tab 1: Email & Password Form */} {/* Form Tab 1: Email & Password */}
{activeTab === 'email' ? ( {activeTab === 'email' ? (
<form onSubmit={handleLoginSubmit}> <form onSubmit={handleLoginSubmit}>
<div className="field mb-4"> <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 Registered Email Address
</label> </label>
<div className="control has-icons-left"> <div className="control has-icons-left">
@ -130,7 +212,7 @@ export default function LoginPage() {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
required required
style={{ borderColor: '#e7ded9', borderRadius: '8px' }} style={{ borderColor: '#D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
/> />
<span className="icon is-left has-text-grey"> <span className="icon is-left has-text-grey">
<i className="fa-solid fa-envelope"></i> <i className="fa-solid fa-envelope"></i>
@ -139,11 +221,11 @@ export default function LoginPage() {
</div> </div>
<div className="field mb-4"> <div className="field mb-4">
<div className="is-flex is-justify-content-between is-align-items-center mb-1"> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
<label className="label is-size-7 is-uppercase has-text-grey mb-0" htmlFor="seller-pass"> <label className="label" htmlFor="seller-pass" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', margin: 0 }}>
Password Password
</label> </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? Forgot password?
</a> </a>
</div> </div>
@ -156,7 +238,7 @@ export default function LoginPage() {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
required required
style={{ borderColor: '#e7ded9', borderRadius: '8px' }} style={{ borderColor: '#D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
/> />
<span className="icon is-left has-text-grey"> <span className="icon is-left has-text-grey">
<i className="fa-solid fa-lock"></i> <i className="fa-solid fa-lock"></i>
@ -164,7 +246,7 @@ export default function LoginPage() {
<span <span
className="icon is-right is-clickable" className="icon is-right is-clickable"
onClick={() => setShowLoginPass(!showLoginPass)} onClick={() => setShowLoginPass(!showLoginPass)}
style={{ pointerEvents: 'all' }} style={{ pointerEvents: 'all', cursor: 'pointer' }}
> >
<i className={`fa-solid ${showLoginPass ? 'fa-eye-slash' : 'fa-eye'}`}></i> <i className={`fa-solid ${showLoginPass ? 'fa-eye-slash' : 'fa-eye'}`}></i>
</span> </span>
@ -172,50 +254,49 @@ export default function LoginPage() {
</div> </div>
<div className="field mb-5"> <div className="field mb-5">
<div className="control"> <label className="checkbox" htmlFor="remember-me" style={{ fontSize: '0.82rem', color: '#59524D', display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
<label className="checkbox is-size-7 has-text-grey is-flex is-align-items-center">
<input <input
id="remember-me"
type="checkbox" type="checkbox"
checked={rememberMe} checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)} onChange={(e) => setRememberMe(e.target.checked)}
className="mr-2" style={{ accentColor: '#791B2C', width: '16px', height: '16px' }}
style={{ accentColor: 'var(--trad-maroon)' }}
/> />
Remember this device for 30 days <span>Remember this device for 30 days</span>
</label> </label>
</div> </div>
</div>
<button <button
type="submit" type="submit"
className="button is-fullwidth has-text-weight-bold mb-4" className="button is-fullwidth has-text-weight-bold"
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', borderRadius: '8px', padding: '0.75rem', height: 'auto' }} 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 Sign In
</button> </button>
</form> </form>
) : ( ) : (
/* Tab 2: Mobile OTP Form */ /* Form Tab 2: Mobile OTP */
<form onSubmit={handleOtpLogin}> <form onSubmit={handleOtpLogin}>
<div className="field mb-4"> <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 Registered Mobile Number
</label> </label>
<div className="field has-addons"> <div className="field has-addons">
<p className="control"> <p className="control">
<a className="button is-static" style={{ borderColor: '#e7ded9', borderRadius: '8px 0 0 8px' }}> <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 }}>
<span className="has-text-weight-bold mr-1">IN</span> +91 IN +91
</a> </span>
</p> </p>
<p className="control is-expanded"> <p className="control is-expanded">
<input <input
id="seller-phone"
type="tel" type="tel"
className="input" className="input"
placeholder="e.g. 9876543210" placeholder="Enter 10-digit mobile number"
maxLength={10} maxLength={10}
value={phone} value={phone}
onChange={(e) => setPhone(e.target.value)} onChange={(e) => setPhone(e.target.value)}
style={{ borderColor: '#e7ded9' }} style={{ border: '1px solid #D1CAC7', height: '42px', fontSize: '0.9rem' }}
/> />
</p> </p>
<p className="control"> <p className="control">
@ -223,29 +304,30 @@ export default function LoginPage() {
type="button" type="button"
className="button has-text-weight-semibold" className="button has-text-weight-semibold"
onClick={handleSendOtp} 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'} {otpSent ? 'Resend OTP' : 'Get OTP'}
</button> </button>
</p> </p>
</div> </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> </div>
{otpSent && ( {otpSent && (
<div className="field mb-5"> <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 Enter 6-digit OTP
</label> </label>
<div className="control has-icons-left"> <div className="control has-icons-left">
<input <input
id="seller-otp"
type="text" type="text"
className="input" className="input"
placeholder="123456" placeholder="123456"
maxLength={6} maxLength={6}
value={enteredOtp} value={enteredOtp}
onChange={(e) => setEnteredOtp(e.target.value)} 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"> <span className="icon is-left has-text-grey">
<i className="fa-solid fa-key"></i> <i className="fa-solid fa-key"></i>
@ -256,41 +338,50 @@ export default function LoginPage() {
<button <button
type="submit" type="submit"
className="button is-fullwidth has-text-weight-bold mb-4" className="button is-fullwidth has-text-weight-bold"
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', borderRadius: '8px', padding: '0.75rem', height: 'auto' }} 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 Log In to Seller Hub
</button> </button>
</form> </form>
)} )}
<div className="has-text-centered mt-4 pt-4" style={{ borderTop: '1px solid #e7ded9' }}> {/* Registration Link */}
<p className="is-size-6 has-text-grey"> <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?{' '} Don't have a seller account yet?{' '}
<a <a
className="has-text-weight-bold is-clickable" onClick={() => { setCurrentPage('profile-completion'); window.scrollTo(0, 0); }}
onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }} style={{ color: '#791B2C', fontWeight: 700, cursor: 'pointer' }}
style={{ color: 'var(--trad-maroon)' }}
> >
Register as a seller → Register as a seller →
</a> </a>
</p> </p>
</div> </div>
</div>
{/* Trust badges footer */} {/* Trust Badges & Compliance Row */}
<div className="is-flex is-justify-content-center is-align-items-center mt-5 pt-3" style={{ gap: '1.25rem' }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '1.25rem', marginTop: '1.75rem', paddingTop: '1rem', borderTop: '1px solid #F0ECE9', flexWrap: 'wrap' }}>
<span className="is-size-7 has-text-grey"> <span style={{ fontSize: '0.75rem', color: '#666666', display: 'inline-flex', alignItems: 'center', gap: '0.35rem' }}>
<i className="fa-solid fa-lock mr-1" style={{ color: 'var(--trad-teal)' }}></i> SSL Bank Encryption <i className="fa-solid fa-shield-halved" style={{ color: '#1B7D36' }}></i> 100% Secure SSL Bank-Grade Encryption
</span> </span>
<span className="is-size-7 has-text-grey">•</span> <span style={{ fontSize: '0.75rem', color: '#999999' }}>•</span>
<span className="is-size-7 has-text-grey"> <span style={{ fontSize: '0.75rem', color: '#666666', display: 'inline-flex', alignItems: 'center', gap: '0.35rem' }}>
<i className="fa-solid fa-certificate mr-1" style={{ color: 'var(--trad-bronze)' }}></i> GI Verified Artisans <i className="fa-solid fa-certificate" style={{ color: '#B87333' }}></i> ODOP &amp; GI Verified Artisans
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<style>{`
@media (max-width: 768px) {
.login-card-shell {
grid-template-columns: 1fr !important;
}
}
`}</style>
</div> </div>
); );
} }