231 lines
11 KiB
TypeScript
231 lines
11 KiB
TypeScript
import { useSeoMeta } from '@unhead/react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
import { ShoppingBag, ExternalLink, Package, DollarSign, Shield, Zap, Store } from 'lucide-react';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
export default function MarketplacePage() {
|
|
const { t } = useTranslation();
|
|
useSeoMeta({
|
|
title: t('seoUi.marketplaceTitle'),
|
|
description: t('seoUi.marketplaceDesc'),
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className="container px-4 py-12 max-w-4xl">
|
|
{/* Hero */}
|
|
<div className="text-center mb-12">
|
|
<div className="mb-6">
|
|
<div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] mb-4">
|
|
<ShoppingBag className="h-10 w-10 text-white" />
|
|
</div>
|
|
</div>
|
|
<h1 className="text-4xl md:text-6xl font-black uppercase mb-4 neon-orange" style={{
|
|
fontFamily: 'Impact, "Arial Black", sans-serif',
|
|
letterSpacing: '0.05em'
|
|
}}>
|
|
{t('marketUi.marketplace.heroTitle')}
|
|
</h1>
|
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
|
{t('marketUi.marketplace.heroBefore')} <strong className="text-[#ff6600]">Plebeian Market</strong> {t('marketUi.marketplace.heroAfter')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Plebeian Market Info */}
|
|
<Card className="bg-black/90 border-2 border-[#ff6600]/50 mb-8">
|
|
<CardContent className="p-8">
|
|
<div className="flex items-start gap-6 mb-6">
|
|
<div className="w-16 h-16 rounded-xl bg-[#ff6600] flex items-center justify-center flex-shrink-0">
|
|
<Store className="h-8 w-8 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h2 className="text-2xl font-black uppercase text-[#ff6600] mb-3">{t('marketUi.marketplace.whatIsTitle')}</h2>
|
|
<p className="text-gray-300 mb-4">
|
|
{t('marketUi.marketplace.whatIsBody')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div className="p-4 rounded-lg bg-black/50 border border-[#ff0040]/20">
|
|
<Shield className="h-6 w-6 text-[#ff0040] mb-2" />
|
|
<h3 className="font-bold text-white uppercase text-sm mb-1">{t('marketUi.marketplace.noFeesTitle')}</h3>
|
|
<p className="text-xs text-gray-400">{t('marketUi.marketplace.noFeesBody')}</p>
|
|
</div>
|
|
<div className="p-4 rounded-lg bg-black/50 border border-[#ccff00]/20">
|
|
<DollarSign className="h-6 w-6 text-[#ccff00] mb-2" />
|
|
<h3 className="font-bold text-white uppercase text-sm mb-1">{t('marketUi.marketplace.bitcoinTitle')}</h3>
|
|
<p className="text-xs text-gray-400">{t('marketUi.marketplace.bitcoinBody')}</p>
|
|
</div>
|
|
<div className="p-4 rounded-lg bg-black/50 border border-[#ff6600]/20">
|
|
<Package className="h-6 w-6 text-[#ff6600] mb-2" />
|
|
<h3 className="font-bold text-white uppercase text-sm mb-1">{t('marketUi.marketplace.decentralizedTitle')}</h3>
|
|
<p className="text-xs text-gray-400">{t('marketUi.marketplace.decentralizedBody')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center">
|
|
<a href="https://plebeian.market" target="_blank" rel="noopener noreferrer">
|
|
<Button size="lg" className="gap-2 bg-[#ff6600] hover:bg-[#ff6600]/90 text-white border-2 border-[#ff6600] shadow-[0_0_20px_rgba(255,102,0,0.5)] font-bold uppercase px-12 py-6 text-lg">
|
|
<ExternalLink className="h-6 w-6" />
|
|
{t('marketUi.marketplace.visit')}
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* What You Can Buy/Sell */}
|
|
<div className="mb-12">
|
|
<h2 className="text-2xl font-black uppercase text-white mb-6">{t('marketUi.marketplace.buySellTitle')}</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{[
|
|
{
|
|
title: t('marketUi.marketplace.catCompletes'),
|
|
items: [
|
|
t('marketUi.marketplace.preBuilt'),
|
|
t('marketUi.marketplace.customSetups'),
|
|
t('marketUi.marketplace.beginnerBoards'),
|
|
],
|
|
color: '#ff0040'
|
|
},
|
|
{
|
|
title: t('marketUi.marketplace.catParts'),
|
|
items: [
|
|
t('marketUi.marketplace.decks'),
|
|
t('marketUi.marketplace.trucks'),
|
|
t('marketUi.marketplace.wheels'),
|
|
t('marketUi.marketplace.bearings'),
|
|
t('marketUi.marketplace.gripTape'),
|
|
t('marketUi.marketplace.hardware'),
|
|
],
|
|
color: '#ff6600'
|
|
},
|
|
{
|
|
title: t('marketUi.marketplace.catApparel'),
|
|
items: [
|
|
t('marketUi.marketplace.skateShoes'),
|
|
t('marketUi.marketplace.clothing'),
|
|
t('marketUi.marketplace.helmets'),
|
|
t('marketUi.marketplace.pads'),
|
|
t('marketUi.marketplace.backpacks'),
|
|
],
|
|
color: '#ccff00'
|
|
},
|
|
{
|
|
title: t('marketUi.marketplace.catAccessories'),
|
|
items: [
|
|
t('marketUi.marketplace.tools'),
|
|
t('marketUi.marketplace.wax'),
|
|
t('marketUi.marketplace.rails'),
|
|
t('marketUi.marketplace.stickers'),
|
|
t('marketUi.marketplace.videos'),
|
|
t('marketUi.marketplace.magazines'),
|
|
],
|
|
color: '#ff0040'
|
|
},
|
|
].map((category, i) => (
|
|
<Card key={i} className="bg-black/90 border-2" style={{ borderColor: `${category.color}30` }}>
|
|
<CardContent className="p-6">
|
|
<h3 className="font-black uppercase mb-3" style={{ color: category.color }}>
|
|
{category.title}
|
|
</h3>
|
|
<ul className="space-y-1">
|
|
{category.items.map((item, j) => (
|
|
<li key={j} className="text-sm text-gray-400 flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: category.color }} />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* How It Works */}
|
|
<Card className="bg-black/90 border-2 border-[#ccff00]/50">
|
|
<CardContent className="p-8">
|
|
<h2 className="text-2xl font-black uppercase text-[#ccff00] mb-6">{t('marketUi.marketplace.howItWorks')}</h2>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{
|
|
num: 1,
|
|
title: t('marketUi.marketplace.step1Title'),
|
|
desc: t('marketUi.marketplace.step1Body'),
|
|
},
|
|
{
|
|
num: 2,
|
|
title: t('marketUi.marketplace.step2Title'),
|
|
desc: t('marketUi.marketplace.step2Body'),
|
|
},
|
|
{
|
|
num: 3,
|
|
title: t('marketUi.marketplace.step3Title'),
|
|
desc: t('marketUi.marketplace.step3Body'),
|
|
},
|
|
{
|
|
num: 4,
|
|
title: t('marketUi.marketplace.step4Title'),
|
|
desc: t('marketUi.marketplace.step4Body'),
|
|
},
|
|
].map((step) => (
|
|
<div key={step.num} className="flex gap-4 p-4 rounded-lg bg-black/50 border border-[#ccff00]/20">
|
|
<div className="w-10 h-10 rounded-full bg-[#ccff00] flex items-center justify-center font-black text-xl text-black flex-shrink-0">
|
|
{step.num}
|
|
</div>
|
|
<div>
|
|
<h4 className="font-black uppercase text-sm mb-1 text-white">{step.title}</h4>
|
|
<p className="text-sm text-gray-400">{step.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 p-4 rounded-lg bg-[#ff0040]/10 border border-[#ff0040]/30">
|
|
<div className="flex items-start gap-3">
|
|
<Zap className="h-5 w-5 text-[#ff0040] flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-bold text-[#ff0040] mb-1">{t('marketUi.marketplace.needBitcoinTitle')}</h4>
|
|
<p className="text-sm text-gray-300">
|
|
{t('marketUi.marketplace.needBitcoinBefore')} <Link to="/onboarding" className="text-[#ccff00] underline font-bold">{t('marketUi.marketplace.onboardingGuide')}</Link> {t('marketUi.marketplace.needBitcoinAfter')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* For Shop Owners */}
|
|
<Card className="bg-black/90 border-2 border-[#ff0040]/50 mt-8">
|
|
<CardContent className="p-8 text-center">
|
|
<Store className="h-12 w-12 mx-auto mb-4 text-[#ff0040]" />
|
|
<h2 className="text-2xl font-black uppercase text-white mb-3">{t('marketUi.marketplace.ownShopTitle')}</h2>
|
|
<p className="text-gray-300 mb-6 max-w-xl mx-auto">
|
|
{t('marketUi.marketplace.ownShopBody')}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Link to="/create-shop">
|
|
<Button className="gap-2 bg-[#ff0040] hover:bg-[#ff0040]/90 text-white border-2 border-[#ff0040] shadow-[0_0_20px_rgba(255,0,64,0.5)] font-bold uppercase px-8">
|
|
<Store className="h-5 w-5" />
|
|
{t('marketUi.marketplace.addShop')}
|
|
</Button>
|
|
</Link>
|
|
<a href="https://plebeian.market/sell" target="_blank" rel="noopener noreferrer">
|
|
<Button variant="outline" className="gap-2 border-2 border-[#ccff00]/50 hover:bg-[#ccff00]/10 text-[#ccff00] font-bold uppercase px-8">
|
|
<Package className="h-5 w-5" />
|
|
{t('marketUi.marketplace.startSelling')}
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|