0d15a7ce3d
P0 fixes from UX_AUDIT_2026-10-09.md: - useMarketplaceItem now filters admin-hidden listings and skips showcase-only (not-for-sale) items, so a direct /listing/... URL cannot surface removed or non-sale content. - Listing detail hides Make an offer for logged-out users and for fixed-price listings (Buy is the single primary CTA there). Borrowed from the Plebeian market review: a /marketplace-guidelines page (peer-to-peer, buyer-beware, no checkout, prohibited items, soft moderation), linked from the marketplace hub; new marketTerms en/es keys. Records the remaining borrowables in the audit doc.
91 lines
3 KiB
TypeScript
91 lines
3 KiB
TypeScript
import { useSeoMeta } from '@unhead/react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Package, ShieldAlert, Handshake, Scale, Users, Ban } from 'lucide-react';
|
|
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
function Section({
|
|
icon: Icon,
|
|
color,
|
|
title,
|
|
children,
|
|
}: {
|
|
icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
|
|
color: string;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<section className="rounded-2xl border border-white/8 bg-white/3 p-5">
|
|
<div className="mb-3 flex items-center gap-3">
|
|
<div
|
|
className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl"
|
|
style={{ background: `${color}1a`, border: `1px solid ${color}40` }}
|
|
>
|
|
<Icon className="h-5 w-5" style={{ color }} />
|
|
</div>
|
|
<h2 className="text-lg font-black uppercase tracking-wide text-white">{title}</h2>
|
|
</div>
|
|
<div className="space-y-3 text-sm leading-relaxed text-gray-400">{children}</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Marketplace guidelines. Peer-to-peer, buyer-beware, no checkout, no central
|
|
* dispute handling — expectations stated up front, alongside the trust signals
|
|
* the app now shows.
|
|
*/
|
|
export default function MarketplaceGuidelinesPage() {
|
|
const { t } = useTranslation();
|
|
useSeoMeta({
|
|
title: t('marketTerms.seoTitle'),
|
|
description: t('marketTerms.seoDescription'),
|
|
});
|
|
|
|
return (
|
|
<div className="container max-w-3xl space-y-5 py-10">
|
|
<header className="space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<Package className="h-8 w-8 text-[#ccff00]" />
|
|
<h1 className="text-3xl font-black uppercase tracking-wide text-white">
|
|
{t('marketTerms.title')}
|
|
</h1>
|
|
</div>
|
|
<p className="text-gray-400">{t('marketTerms.intro')}</p>
|
|
</header>
|
|
|
|
<Section icon={Handshake} color="#13d2e5" title={t('marketTerms.howTitle')}>
|
|
<p>{t('marketTerms.howBody')}</p>
|
|
</Section>
|
|
|
|
<Section icon={Ban} color="#ef4444" title={t('marketTerms.rulesTitle')}>
|
|
<p>{t('marketTerms.rulesBody')}</p>
|
|
</Section>
|
|
|
|
<Section icon={Users} color="#6366f1" title={t('marketTerms.respectTitle')}>
|
|
<p>{t('marketTerms.respectBody')}</p>
|
|
</Section>
|
|
|
|
<Section icon={Scale} color="#22c55e" title={t('marketTerms.trustTitle')}>
|
|
<p>{t('marketTerms.trustBody')}</p>
|
|
<p className="space-x-3">
|
|
<Link to="/trust" className="text-xs text-[#ccff00] underline">
|
|
{t('marketTerms.trustLink')}
|
|
</Link>
|
|
<Link to="/privacy" className="text-xs text-[#ccff00] underline">
|
|
{t('marketTerms.privacyLink')}
|
|
</Link>
|
|
</p>
|
|
</Section>
|
|
|
|
<Section icon={ShieldAlert} color="#f59e0b" title={t('marketTerms.safetyTitle')}>
|
|
<p>{t('marketTerms.safetyBody')}</p>
|
|
</Section>
|
|
|
|
<Section icon={ShieldAlert} color="#8c929e" title={t('marketTerms.moderationTitle')}>
|
|
<p>{t('marketTerms.moderationBody')}</p>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|