feat: design alignment for landing page, header, and support navigation links
This commit is contained in:
parent
b89132b7d6
commit
f054a3ed3e
1 changed files with 109 additions and 91 deletions
200
src/App.tsx
200
src/App.tsx
|
|
@ -805,120 +805,138 @@ export default function App() {
|
|||
return (
|
||||
<>
|
||||
{/* Dynamic Header */}
|
||||
<header className="app-header">
|
||||
<div className="logo-container" onClick={() => navigateTo('home')}>
|
||||
<div className="logo-icon">{CONFIG.logoLetter}</div>
|
||||
<span className="logo-text">{CONFIG.companyName}</span>
|
||||
</div>
|
||||
<nav className="nav-links">
|
||||
<button
|
||||
className={`nav-link ${currentPage === 'home' ? 'active' : ''}`}
|
||||
onClick={() => navigateTo('home')}
|
||||
>
|
||||
Platform
|
||||
<nav className="w-full top-0 sticky z-50 bg-white border-b border-[#D9C5B2] transition-all duration-300">
|
||||
<div className="flex justify-between items-center max-w-7xl mx-auto px-8 py-4">
|
||||
<button className="font-caslon text-2xl font-bold text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('home')}>
|
||||
Tradhox
|
||||
</button>
|
||||
<button
|
||||
className="nav-link"
|
||||
onClick={() => navigateTo('home')}
|
||||
>
|
||||
Pricing
|
||||
</button>
|
||||
<button
|
||||
className={`nav-link ${currentPage === 'about' ? 'active' : ''}`}
|
||||
onClick={() => navigateTo('about')}
|
||||
>
|
||||
Success Stories
|
||||
</button>
|
||||
<button
|
||||
className={`nav-link ${currentPage === 'contact' ? 'active' : ''}`}
|
||||
onClick={() => navigateTo('contact')}
|
||||
>
|
||||
Support
|
||||
</button>
|
||||
</nav>
|
||||
<div className="nav-buttons">
|
||||
{currentPage === 'dashboard' ? (
|
||||
<button className="btn btn-secondary" onClick={handleLogout}>
|
||||
Logout
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button className="btn btn-secondary" onClick={() => { setActiveTab('login'); navigateTo('login'); }}>
|
||||
Login
|
||||
</button>
|
||||
<button className="btn btn-primary" onClick={() => { setActiveTab('register'); navigateTo('signup'); }}>
|
||||
Get Started
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="hidden md:flex gap-8 items-center text-sm font-semibold">
|
||||
<button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('home')}>Shop</button>
|
||||
<button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('about')}>Artisans</button>
|
||||
<button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('about')}>Our Story</button>
|
||||
<button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('contact')}>Support</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm font-semibold">
|
||||
{currentPage === 'dashboard' ? (
|
||||
<button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={handleLogout}>
|
||||
Logout
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer"
|
||||
onClick={() => { setActiveTab('login'); navigateTo('login'); }}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
className="bg-primary text-white px-4 py-2 rounded font-semibold transition-opacity hover:opacity-90 cursor-pointer"
|
||||
onClick={() => { setActiveTab('register'); navigateTo('signup'); }}
|
||||
>
|
||||
Get Started
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* Main Content Area */}
|
||||
{currentPage !== 'dashboard' ? (
|
||||
<main className={`main-content ${currentPage === 'home' ? 'full-width' : ''}`}>
|
||||
|
||||
{/* HOMEPAGE VIEW */}
|
||||
{currentPage === 'home' && (
|
||||
<div>
|
||||
<section className="hero-section">
|
||||
<div className="hero-content">
|
||||
<h1>
|
||||
{CONFIG.hero.title.split('. ')[0]}.<br />
|
||||
{CONFIG.hero.title.split('. ')[1]}
|
||||
</h1>
|
||||
<p>
|
||||
{CONFIG.hero.subtitle}
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<button className="btn btn-dark" onClick={() => { setActiveTab('register'); navigateTo('signup'); }}>
|
||||
Get Started Today
|
||||
<div className="animate-fadeIn">
|
||||
{/* Hero Section */}
|
||||
<section className="relative w-full h-[600px] flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img src="/artisan_weaving.jpg" className="w-full h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-black/50"></div>
|
||||
</div>
|
||||
<div className="relative z-10 text-center max-w-3xl px-8 mx-auto text-white space-y-6">
|
||||
<h1 className="font-caslon text-5xl md:text-6xl font-bold leading-tight">Sell Globally. Celebrate Craft.</h1>
|
||||
<p className="text-lg md:text-xl max-w-2xl mx-auto opacity-90">Discover authentic Indian craftsmanship, preserved for generations and handcrafted for you.</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
|
||||
<button className="bg-primary text-white px-8 py-3 rounded font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2 cursor-pointer" onClick={() => { setActiveTab('register'); navigateTo('signup'); }}>
|
||||
Shop the Collection
|
||||
<span className="material-symbols-outlined text-lg">arrow_forward</span>
|
||||
</button>
|
||||
<button className="btn btn-outline-dark" onClick={() => navigateTo('about')}>
|
||||
Learn More
|
||||
<button className="bg-transparent border border-white text-white px-8 py-3 rounded font-semibold hover:bg-white/10 transition-colors cursor-pointer" onClick={() => navigateTo('about')}>
|
||||
Meet our Artisans
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-image-wrapper">
|
||||
<img
|
||||
src={CONFIG.hero.image}
|
||||
alt="Artisans Crafting"
|
||||
className="hero-img"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="features-section">
|
||||
<div className="features-grid">
|
||||
{CONFIG.features.map((feature, i) => (
|
||||
<div className="feature-card" key={i}>
|
||||
<div className="feature-icon-wrapper">{feature.icon}</div>
|
||||
<h3>{feature.title}</h3>
|
||||
<p>{feature.description}</p>
|
||||
{/* Discover Heritage Cards */}
|
||||
<section className="max-w-7xl mx-auto px-8 py-16">
|
||||
<h2 className="font-caslon text-3xl font-bold text-center text-primary mb-12">Discover Heritage</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* Category 1 */}
|
||||
<div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
|
||||
<img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/terracotta_vases.jpg" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 p-4 w-full text-white">
|
||||
<h3 className="font-caslon text-lg font-bold mb-1">Hand-Thrown Pottery</h3>
|
||||
<p className="text-xs opacity-90">Explore Collection</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Category 2 */}
|
||||
<div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
|
||||
<img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/kanchipuram_silk.jpg" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 p-4 w-full text-white">
|
||||
<h3 className="font-caslon text-lg font-bold mb-1">Traditional Textiles</h3>
|
||||
<p className="text-xs opacity-90">Explore Collection</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Category 3 */}
|
||||
<div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
|
||||
<img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/terracotta_vases.jpg" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 p-4 w-full text-white">
|
||||
<h3 className="font-caslon text-lg font-bold mb-1">Metallic Arts</h3>
|
||||
<p className="text-xs opacity-90">Explore Collection</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Category 4 */}
|
||||
<div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
|
||||
<img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/kanchipuram_silk.jpg" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 p-4 w-full text-white">
|
||||
<h3 className="font-caslon text-lg font-bold mb-1">Wooden Heritage</h3>
|
||||
<p className="text-xs opacity-90">Explore Collection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="featured-artisan-section">
|
||||
<div className="artisan-card">
|
||||
<img
|
||||
src={CONFIG.featuredArtisan.avatar}
|
||||
alt="Featured Artisan"
|
||||
className="artisan-avatar"
|
||||
/>
|
||||
<div className="artisan-info">
|
||||
<h4>Featured Artisan</h4>
|
||||
<p className="artisan-quote">
|
||||
{CONFIG.featuredArtisan.quote}
|
||||
</p>
|
||||
<p style={{ fontWeight: 'bold' }}>- {CONFIG.featuredArtisan.name} ({CONFIG.featuredArtisan.role})</p>
|
||||
{/* The Tradhox Promise */}
|
||||
<section className="bg-surface-container-low py-16 border-y border-outline-variant/30">
|
||||
<div className="max-w-7xl mx-auto px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
||||
<div className="flex flex-col items-center p-4">
|
||||
<span className="material-symbols-outlined text-primary text-4xl mb-2">verified</span>
|
||||
<h3 className="font-caslon text-xl font-bold text-primary mb-2">Expand Your Reach</h3>
|
||||
<p className="text-sm text-secondary max-w-xs mx-auto">Every piece is verified for its origin and traditional crafting methods, ensuring you receive true heritage art.</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-4">
|
||||
<span className="material-symbols-outlined text-primary text-4xl mb-2">handshake</span>
|
||||
<h3 className="font-caslon text-xl font-bold text-primary mb-2">Easy Inventory Tools</h3>
|
||||
<p className="text-sm text-secondary max-w-xs mx-auto">We empower creators directly, bypassing intermediaries to foster sustainable livelihoods for artisanal communities.</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-4">
|
||||
<span className="material-symbols-outlined text-primary text-4xl mb-2">eco</span>
|
||||
<h3 className="font-caslon text-xl font-bold text-primary mb-2">Secure Payments</h3>
|
||||
<p className="text-sm text-secondary max-w-xs mx-auto">Committed to eco-friendly materials and ethical production processes that respect both people and the planet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ABOUT US VIEW */}
|
||||
{currentPage === 'about' && (
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue