style: refine card UI, typography, and layout styles across page components #9
4 changed files with 235 additions and 118 deletions
|
|
@ -335,13 +335,16 @@ export const GrowBusinessPage: React.FC = () => {
|
|||
<div key={idx} className="column is-3-desktop is-6-tablet is-12-mobile">
|
||||
<div
|
||||
onClick={() => scrollToInitiative(card.target)}
|
||||
className="card p-4 h-100 trad-card-interactive"
|
||||
className="card p-4 trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '14px',
|
||||
border: '1px solid #EAE6DF',
|
||||
border: '1px solid #E5E7EB',
|
||||
backgroundColor: '#FFFFFF',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.02)',
|
||||
cursor: 'pointer'
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.03)',
|
||||
cursor: 'pointer',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -350,16 +353,17 @@ export const GrowBusinessPage: React.FC = () => {
|
|||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#E6F4EA',
|
||||
color: '#155E54'
|
||||
backgroundColor: '#FAF2F4',
|
||||
color: 'var(--trad-maroon)',
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
{card.icon}
|
||||
</div>
|
||||
<h3 className="title is-size-6 has-text-weight-bold mb-2" style={{ color: '#111827' }}>
|
||||
<h3 className="title is-size-6 has-text-weight-bold mb-2" style={{ color: '#111827', fontSize: '0.95rem' }}>
|
||||
{card.title}
|
||||
</h3>
|
||||
<p style={{ fontSize: '12px', color: '#4B5563', lineHeight: 1.5, margin: 0 }}>
|
||||
<p style={{ fontSize: '0.85rem', color: '#4B5563', lineHeight: 1.5, margin: 0, flex: '1 1 auto' }}>
|
||||
{card.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -526,21 +530,26 @@ export const GrowBusinessPage: React.FC = () => {
|
|||
{advantages.map((adv, idx) => (
|
||||
<div key={idx} className="column is-4-desktop is-12-tablet">
|
||||
<div
|
||||
className="card p-5 h-100 has-text-centered"
|
||||
className="card p-5 has-text-centered trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #EAE6DF',
|
||||
border: '1px solid #E5E7EB',
|
||||
backgroundColor: '#FFFFFF',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.02)'
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.03)',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
padding: '1.5rem 1.25rem'
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '1.75rem', fontWeight: 800, color: '#155E54', marginBottom: '6px' }}>
|
||||
<div style={{ fontSize: '1.65rem', fontWeight: 800, color: 'var(--trad-maroon)', marginBottom: '6px' }}>
|
||||
{adv.highlight}
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', fontWeight: 700, color: '#1F2937', marginBottom: '10px' }}>
|
||||
<div style={{ fontSize: '0.95rem', fontWeight: 700, color: '#111827', marginBottom: '8px' }}>
|
||||
{adv.title}
|
||||
</div>
|
||||
<p style={{ fontSize: '12.5px', color: '#4B5563', lineHeight: 1.5, margin: 0 }}>
|
||||
<p style={{ fontSize: '0.875rem', color: '#4B5563', lineHeight: 1.55, margin: 0 }}>
|
||||
{adv.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -190,33 +190,40 @@ export const HowItWorksPage: React.FC = () => {
|
|||
<div key={item.num} className="column is-2-desktop is-4-tablet is-6-mobile">
|
||||
<div
|
||||
onClick={() => scrollToStep(item.target)}
|
||||
className="card p-3 has-text-centered h-100 is-flex is-flex-direction-column is-align-items-center is-justify-content-center trad-card-interactive"
|
||||
className="card p-3 has-text-centered trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '14px',
|
||||
border: '1px solid var(--trad-border)',
|
||||
border: '1px solid #E5E7EB',
|
||||
backgroundColor: '#FFFFFF',
|
||||
cursor: 'pointer',
|
||||
minHeight: '115px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.03)',
|
||||
transition: 'transform 0.2s ease, box-shadow 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="is-flex is-align-items-center is-justify-content-center mb-2"
|
||||
style={{
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--trad-maroon)',
|
||||
color: '#ffffff',
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 700
|
||||
fontWeight: 700,
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
{item.num}
|
||||
</div>
|
||||
<div className="is-size-7 has-text-weight-bold" style={{ color: '#1A1A1A' }}>
|
||||
<div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#111827', lineHeight: 1.25 }}>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="is-size-7 has-text-grey" style={{ fontSize: '0.72rem' }}>
|
||||
<div style={{ fontSize: '0.73rem', color: '#6B7280', marginTop: '2px' }}>
|
||||
{item.sub}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -113,32 +113,32 @@ export const LandingPage: React.FC = () => {
|
|||
const journeySteps = [
|
||||
{
|
||||
num: '1',
|
||||
title: '1. Create',
|
||||
title: 'Create',
|
||||
desc: 'Craft your unique handmade creations with traditional skill, sustainable materials, and artisan pride.'
|
||||
},
|
||||
{
|
||||
num: '2',
|
||||
title: '2. List',
|
||||
title: 'List',
|
||||
desc: 'Upload photos, specifications & set fair pricing with our zero listing fee support and catalog assistance.'
|
||||
},
|
||||
{
|
||||
num: '3',
|
||||
title: '3. Tell your story',
|
||||
title: 'Tell your story',
|
||||
desc: 'Showcase the artisan heritage, technique and cultural narrative behind each craft to connect with buyers.'
|
||||
},
|
||||
{
|
||||
num: '4',
|
||||
title: '4. Order',
|
||||
title: 'Order',
|
||||
desc: 'Receive confirmed domestic and international orders seamlessly through your seller portal with instant alerts.'
|
||||
},
|
||||
{
|
||||
num: '5',
|
||||
title: '5. Shipment',
|
||||
title: 'Shipment',
|
||||
desc: 'Doorstep courier pickup across 15,000+ pincodes with eco-friendly protective packaging and live tracking.'
|
||||
},
|
||||
{
|
||||
num: '6',
|
||||
title: '6. Payment',
|
||||
title: 'Payment',
|
||||
desc: 'Direct bank payout with 100% transparency, timely settlement cycles within 7 days, and zero hidden deductions.'
|
||||
}
|
||||
];
|
||||
|
|
@ -147,20 +147,20 @@ export const LandingPage: React.FC = () => {
|
|||
<div className="landing-page-exact">
|
||||
{/* 1. HeroSection */}
|
||||
<section className="section py-6" style={{ background: 'linear-gradient(180deg, #FDFCFA 0%, #FFFFFF 100%)', borderBottom: '1px solid var(--trad-border)' }}>
|
||||
<div className="container is-widescreen px-4">
|
||||
<div className="columns is-vcentered is-variable is-8">
|
||||
<div className="container is-widescreen px-4" style={{ maxWidth: '1320px' }}>
|
||||
<div className="columns is-vcentered is-variable is-6-desktop is-4-tablet">
|
||||
{/* Hero Left Column */}
|
||||
<div className="column is-7-desktop is-12-tablet">
|
||||
<div className="tag is-trad-wine is-rounded mb-4 py-2 px-3">
|
||||
<div className="tag is-trad-wine is-rounded mb-4 py-2 px-3" style={{ fontSize: '0.8rem' }}>
|
||||
<span className="mr-2" style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: 'var(--trad-maroon)' }}></span>
|
||||
<span className="has-text-weight-bold">India's Premier Artisan & Handcrafted Marketplace</span>
|
||||
<span className="has-text-weight-bold">India's Premier Artisan & Handcrafted Marketplace</span>
|
||||
</div>
|
||||
|
||||
<h1 className="title is-size-1-desktop is-size-2-tablet is-size-3-mobile has-text-weight-black mb-4" style={{ lineHeight: 1.15, color: '#1A1A1A' }}>
|
||||
Sell Authentic Handcrafted Products Across India & Worldwide
|
||||
<h1 className="title is-size-1-desktop is-size-2-tablet is-size-3-mobile has-text-weight-black mb-4" style={{ lineHeight: 1.18, color: '#111827', letterSpacing: '-0.02em' }}>
|
||||
Sell Authentic Handcrafted Products Across India & Worldwide
|
||||
</h1>
|
||||
|
||||
<p className="subtitle is-size-5-desktop is-size-6-mobile mb-5" style={{ color: '#4A4A4A', lineHeight: 1.6 }}>
|
||||
<p className="subtitle is-size-5-desktop is-size-6-mobile mb-5" style={{ color: '#4B5563', lineHeight: 1.6, maxWidth: '620px' }}>
|
||||
Empowering artisans, ODOP clusters, and regional creators with transparent pricing, comprehensive logistics, and zero upfront platform charges.
|
||||
</p>
|
||||
|
||||
|
|
@ -186,13 +186,13 @@ export const LandingPage: React.FC = () => {
|
|||
</form>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="is-flex is-flex-wrap-wrap is-align-items-center is-size-7 mb-4" style={{ color: '#2D3748', fontWeight: 600, gap: '0.75rem 1rem' }}>
|
||||
<div className="is-flex is-flex-wrap-wrap is-align-items-center is-size-7 mb-4" style={{ color: '#374151', fontWeight: 600, gap: '0.75rem 1rem' }}>
|
||||
<span className="is-flex is-align-items-center" style={{ color: '#15803D' }}>
|
||||
<Check size={15} className="mr-1" style={{ strokeWidth: 3 }} /> Zero listing fees
|
||||
</span>
|
||||
<span style={{ color: '#CBD5E1' }}>•</span>
|
||||
<span className="is-flex is-align-items-center">
|
||||
Fair & transparent
|
||||
Fair & transparent
|
||||
</span>
|
||||
<span style={{ color: '#CBD5E1' }}>•</span>
|
||||
<span className="is-flex is-align-items-center">
|
||||
|
|
@ -203,8 +203,8 @@ export const LandingPage: React.FC = () => {
|
|||
|
||||
{/* Hero Right Column: Montage Image */}
|
||||
<div className="column is-5-desktop is-12-tablet">
|
||||
<div className="card" style={{ borderRadius: '24px', overflow: 'hidden', border: '1px solid var(--trad-border)', position: 'relative' }}>
|
||||
<div style={{ height: '360px', position: 'relative' }}>
|
||||
<div className="card" style={{ borderRadius: '20px', overflow: 'hidden', border: '1px solid #E5E7EB', position: 'relative', boxShadow: '0 10px 30px rgba(0, 0, 0, 0.06)' }}>
|
||||
<div style={{ height: '420px', position: 'relative', backgroundColor: '#F3F4F6' }}>
|
||||
<img
|
||||
src="/images/landing/hero-showcase.jpg"
|
||||
alt="Comprehensive collective montage showcase of authentic Indian handcrafted artisan products"
|
||||
|
|
@ -213,24 +213,24 @@ export const LandingPage: React.FC = () => {
|
|||
(e.target as HTMLImageElement).src = '/artisan_banner.jpg';
|
||||
}}
|
||||
/>
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%)' }}></div>
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 55%)' }}></div>
|
||||
|
||||
{/* Top-Right Badge */}
|
||||
<div className="tag is-white is-rounded has-text-weight-bold" style={{ position: 'absolute', top: '16px', right: '16px', border: '1px solid var(--trad-border)', color: 'var(--trad-maroon)' }}>
|
||||
<span className="mr-1" style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: 'var(--trad-maroon)' }}></span>
|
||||
<div className="tag is-white is-rounded has-text-weight-bold" style={{ position: 'absolute', top: '16px', right: '16px', border: '1px solid #E5E7EB', color: 'var(--trad-maroon)', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
|
||||
<span className="mr-1.5" style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: 'var(--trad-maroon)' }}></span>
|
||||
AUTHENTIC HANDCRAFTS
|
||||
</div>
|
||||
|
||||
{/* Bottom Collective Overlay */}
|
||||
<div style={{ position: 'absolute', bottom: '16px', left: '16px', right: '16px', background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(8px)', borderRadius: '16px', padding: '14px 16px', border: '1px solid var(--trad-border)' }}>
|
||||
<div style={{ position: 'absolute', bottom: '16px', left: '16px', right: '16px', background: 'rgba(255, 255, 255, 0.96)', backdropFilter: 'blur(10px)', borderRadius: '14px', padding: '14px 16px', border: '1px solid rgba(255,255,255,0.8)', boxShadow: '0 4px 16px rgba(0,0,0,0.12)' }}>
|
||||
<div className="is-flex is-align-items-center is-justify-content-space-between">
|
||||
<div>
|
||||
<div className="is-size-7 has-text-weight-bold" style={{ color: 'var(--trad-maroon)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>TRADHOX Collective</div>
|
||||
<div className="is-size-6 has-text-weight-bold has-text-dark">From Village Roots to Global Shelves</div>
|
||||
<div className="is-size-6 has-text-weight-bold" style={{ color: '#111827' }}>From Village Roots to Global Shelves</div>
|
||||
</div>
|
||||
<div className="pl-3 has-text-centered" style={{ borderLeft: '1px solid var(--trad-border)' }}>
|
||||
<div className="pl-3 has-text-centered" style={{ borderLeft: '1px solid #E5E7EB' }}>
|
||||
<div className="is-size-5 has-text-weight-black" style={{ color: 'var(--trad-maroon)' }}>100%</div>
|
||||
<div className="is-size-7 has-text-grey" style={{ fontSize: '10px' }}>Authentic</div>
|
||||
<div className="is-size-7" style={{ fontSize: '10px', color: '#6B7280', fontWeight: 600 }}>Authentic</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -257,8 +257,19 @@ export const LandingPage: React.FC = () => {
|
|||
<div className="columns is-mobile is-multiline is-variable is-2-mobile is-3-tablet">
|
||||
{benefitCards.map((card, idx) => (
|
||||
<div key={idx} className="column is-one-fifth-desktop is-one-third-tablet is-6-mobile">
|
||||
<div className="card trad-card-interactive h-100 is-flex is-flex-direction-column" style={{ borderRadius: '16px', overflow: 'hidden' }}>
|
||||
<div style={{ height: '115px', position: 'relative', overflow: 'hidden' }}>
|
||||
<div
|
||||
className="card trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '14px',
|
||||
overflow: 'hidden',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
border: '1px solid #E5E7EB',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '140px', position: 'relative', overflow: 'hidden', backgroundColor: '#F3F4F6', flexShrink: 0 }}>
|
||||
<img
|
||||
src={card.img}
|
||||
alt={card.title}
|
||||
|
|
@ -270,24 +281,41 @@ export const LandingPage: React.FC = () => {
|
|||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
left: '8px',
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
top: '10px',
|
||||
left: '10px',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
border: '1px solid rgba(103, 27, 38, 0.2)',
|
||||
color: 'var(--trad-maroon)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
|
||||
}}
|
||||
>
|
||||
{card.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 is-flex-grow-1 is-flex is-align-items-center">
|
||||
<span className="is-size-7 has-text-weight-bold has-text-dark" style={{ lineHeight: 1.3 }}>
|
||||
<div
|
||||
className="p-3"
|
||||
style={{
|
||||
flex: '1 1 auto',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minHeight: '58px',
|
||||
backgroundColor: '#FFFFFF'
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 700,
|
||||
color: '#1F2937',
|
||||
lineHeight: 1.35
|
||||
}}
|
||||
>
|
||||
{card.title}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -317,23 +345,40 @@ export const LandingPage: React.FC = () => {
|
|||
<div className="columns is-multiline is-variable is-4">
|
||||
{journeySteps.map((step, idx) => (
|
||||
<div key={idx} className="column is-4-desktop is-6-tablet is-12-mobile">
|
||||
<div className="card p-5 h-100" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
|
||||
<div
|
||||
className="mb-3 is-flex is-align-items-center is-justify-content-center"
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'rgba(103, 27, 38, 0.1)',
|
||||
color: 'var(--trad-maroon)',
|
||||
fontWeight: 800,
|
||||
fontSize: '0.9rem'
|
||||
}}
|
||||
>
|
||||
{step.num}
|
||||
<div
|
||||
className="card trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #E5E7EB',
|
||||
padding: '1.35rem 1.25rem',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
backgroundColor: '#FFFFFF',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)'
|
||||
}}
|
||||
>
|
||||
<div className="is-flex is-align-items-center mb-3">
|
||||
<div
|
||||
className="mr-2.5 is-flex is-align-items-center is-justify-content-center"
|
||||
style={{
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--trad-maroon)',
|
||||
color: '#FFFFFF',
|
||||
fontWeight: 800,
|
||||
fontSize: '0.85rem',
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
{step.num}
|
||||
</div>
|
||||
<h3 className="title mb-0" style={{ color: '#111827', fontSize: '1.05rem', fontWeight: 700 }}>
|
||||
{step.title}
|
||||
</h3>
|
||||
</div>
|
||||
<h3 className="title is-size-5 mb-2">{step.title}</h3>
|
||||
<p className="is-size-6 has-text-grey" style={{ lineHeight: 1.55 }}>
|
||||
<p style={{ color: '#4B5563', fontSize: '0.875rem', lineHeight: 1.55, margin: 0 }}>
|
||||
{step.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -359,72 +404,114 @@ export const LandingPage: React.FC = () => {
|
|||
<div className="columns is-variable is-5">
|
||||
{/* Box 1: GI-tagged products */}
|
||||
<div className="column is-4-desktop is-12-tablet">
|
||||
<div className="card trad-card-interactive p-4 h-100 is-flex is-flex-direction-column justify-between" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
|
||||
<div>
|
||||
<div style={{ height: '180px', borderRadius: '12px', overflow: 'hidden', position: 'relative' }}>
|
||||
<img src="/images/landing/cat-gi.jpg" alt="Authentic Indian GI-tagged crafts showcase flatlay" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
<span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '10px', left: '10px', color: 'var(--trad-maroon)', fontSize: '10px' }}>
|
||||
GI Authenticated
|
||||
</span>
|
||||
</div>
|
||||
<div className="has-text-centered mt-4">
|
||||
<h3 className="title is-size-5 mb-1">GI-tagged products</h3>
|
||||
<p className="is-size-7 has-text-grey mb-3">
|
||||
<div
|
||||
className="card trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #E5E7EB',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#FFFFFF',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)'
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '190px', position: 'relative', overflow: 'hidden', backgroundColor: '#F3F4F6', flexShrink: 0 }}>
|
||||
<img src="/images/landing/cat-gi.jpg" alt="Authentic Indian GI-tagged crafts showcase flatlay" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
<span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '12px', left: '12px', color: 'var(--trad-maroon)', fontSize: '11px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
|
||||
GI Authenticated
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4" style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<h3 className="title mb-1.5" style={{ fontSize: '1.15rem', fontWeight: 700, color: '#111827' }}>
|
||||
GI-tagged products
|
||||
</h3>
|
||||
<p style={{ color: '#4B5563', fontSize: '0.85rem', lineHeight: 1.5, margin: 0 }}>
|
||||
Protected geographical indication crafts preserving verified regional legacy and genuine master traditions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-3 is-flex is-justify-content-space-between is-size-7 has-text-grey" style={{ borderTop: '1px solid #EFEFEF' }}>
|
||||
<span>Verified Heritage Crafts</span>
|
||||
<strong className="has-text-dark">100% Authentic</strong>
|
||||
<div className="pt-3 mt-4 is-flex is-justify-content-space-between is-size-7" style={{ borderTop: '1px solid #F3F4F6', color: '#6B7280' }}>
|
||||
<span>Verified Heritage Crafts</span>
|
||||
<strong style={{ color: '#111827', fontWeight: 700 }}>100% Authentic</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Box 2: ODOP products */}
|
||||
<div className="column is-4-desktop is-12-tablet">
|
||||
<div className="card trad-card-interactive p-4 h-100 is-flex is-flex-direction-column justify-between" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
|
||||
<div>
|
||||
<div style={{ height: '180px', borderRadius: '12px', overflow: 'hidden', position: 'relative' }}>
|
||||
<img src="/images/landing/cat-odop.jpg" alt="High-resolution authentic product flatlay representing India's One District One Product specialties" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
<span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '10px', left: '10px', color: 'var(--trad-maroon)', fontSize: '10px' }}>
|
||||
ODOP Regional Hub
|
||||
</span>
|
||||
</div>
|
||||
<div className="has-text-centered mt-4">
|
||||
<h3 className="title is-size-5 mb-1">ODOP products</h3>
|
||||
<p className="is-size-7 has-text-grey mb-3">
|
||||
<div
|
||||
className="card trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #E5E7EB',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#FFFFFF',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)'
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '190px', position: 'relative', overflow: 'hidden', backgroundColor: '#F3F4F6', flexShrink: 0 }}>
|
||||
<img src="/images/landing/cat-odop.jpg" alt="High-resolution authentic product flatlay representing India's One District One Product specialties" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
<span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '12px', left: '12px', color: 'var(--trad-maroon)', fontSize: '11px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
|
||||
ODOP Regional Hub
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4" style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<h3 className="title mb-1.5" style={{ fontSize: '1.15rem', fontWeight: 700, color: '#111827' }}>
|
||||
ODOP products
|
||||
</h3>
|
||||
<p style={{ color: '#4B5563', fontSize: '0.85rem', lineHeight: 1.5, margin: 0 }}>
|
||||
Indigenous district-level specialties bringing distinctive indigenous crafts from local villages to direct markets.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-3 is-flex is-justify-content-space-between is-size-7 has-text-grey" style={{ borderTop: '1px solid #EFEFEF' }}>
|
||||
<span>Districts Active</span>
|
||||
<strong className="has-text-dark">760+ Districts</strong>
|
||||
<div className="pt-3 mt-4 is-flex is-justify-content-space-between is-size-7" style={{ borderTop: '1px solid #F3F4F6', color: '#6B7280' }}>
|
||||
<span>Districts Active</span>
|
||||
<strong style={{ color: '#111827', fontWeight: 700 }}>760+ Districts</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Box 3: Sustainable products */}
|
||||
<div className="column is-4-desktop is-12-tablet">
|
||||
<div className="card trad-card-interactive p-4 h-100 is-flex is-flex-direction-column justify-between" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
|
||||
<div>
|
||||
<div style={{ height: '180px', borderRadius: '12px', overflow: 'hidden', position: 'relative' }}>
|
||||
<img src="/images/landing/cat-sustainable.jpg" alt="High-resolution commercial flatlay of sustainable eco-friendly handcrafted lifestyle products" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
<span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '10px', left: '10px', color: 'var(--trad-maroon)', fontSize: '10px' }}>
|
||||
Eco-Conscious
|
||||
</span>
|
||||
</div>
|
||||
<div className="has-text-centered mt-4">
|
||||
<h3 className="title is-size-5 mb-1">Sustainable products</h3>
|
||||
<p className="is-size-7 has-text-grey mb-3">
|
||||
<div
|
||||
className="card trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #E5E7EB',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#FFFFFF',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)'
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '190px', position: 'relative', overflow: 'hidden', backgroundColor: '#F3F4F6', flexShrink: 0 }}>
|
||||
<img src="/images/landing/cat-sustainable.jpg" alt="High-resolution commercial flatlay of sustainable eco-friendly handcrafted lifestyle products" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
<span className="tag is-white has-text-weight-bold is-rounded" style={{ position: 'absolute', top: '12px', left: '12px', color: 'var(--trad-maroon)', fontSize: '11px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
|
||||
Eco-Conscious
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4" style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<h3 className="title mb-1.5" style={{ fontSize: '1.15rem', fontWeight: 700, color: '#111827' }}>
|
||||
Sustainable products
|
||||
</h3>
|
||||
<p style={{ color: '#4B5563', fontSize: '0.85rem', lineHeight: 1.5, margin: 0 }}>
|
||||
Eco-friendly, chemical-free creations crafted with natural fibers, terracotta, bamboo, and circular materials.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-3 is-flex is-justify-content-space-between is-size-7 has-text-grey" style={{ borderTop: '1px solid #EFEFEF' }}>
|
||||
<span>Eco Clusters</span>
|
||||
<strong className="has-text-dark">1,850+ Clusters</strong>
|
||||
<div className="pt-3 mt-4 is-flex is-justify-content-space-between is-size-7" style={{ borderTop: '1px solid #F3F4F6', color: '#6B7280' }}>
|
||||
<span>Eco Clusters</span>
|
||||
<strong style={{ color: '#111827', fontWeight: 700 }}>1,850+ Clusters</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -526,6 +526,7 @@ h1, h2, h3, h4, h5, h6, .title {
|
|||
/* Landing Page Hero Form Responsive Styles */
|
||||
.trad-hero-lead-form {
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -533,23 +534,32 @@ h1, h2, h3, h4, h5, h6, .title {
|
|||
.trad-hero-lead-form .form-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 9999px;
|
||||
border: 1.5px solid var(--trad-border);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
padding: 5px;
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.trad-hero-lead-form .form-container:focus-within {
|
||||
border-color: var(--trad-maroon);
|
||||
box-shadow: 0 4px 24px rgba(103, 27, 38, 0.12);
|
||||
}
|
||||
.trad-hero-lead-form .input-group-mobile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.trad-hero-lead-form .phone-prefix {
|
||||
padding-left: 1rem;
|
||||
padding-left: 1.15rem;
|
||||
padding-right: 0.5rem;
|
||||
font-weight: 700;
|
||||
color: #2D3748;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.trad-hero-lead-form .phone-input {
|
||||
flex: 1;
|
||||
|
|
@ -560,13 +570,17 @@ h1, h2, h3, h4, h5, h6, .title {
|
|||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.5rem 0.5rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.trad-hero-lead-form .submit-btn {
|
||||
border-radius: 9999px !important;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
height: 44px;
|
||||
padding-left: 1.5rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue