321 lines
12 KiB
TypeScript
321 lines
12 KiB
TypeScript
/**
|
|
* Design System Showcase
|
|
*
|
|
* This component demonstrates the Xpeditis brand colors and typography
|
|
* Delete this file once you understand the design system
|
|
*/
|
|
|
|
export function DesignSystemShowcase() {
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
{/* Color Palette */}
|
|
<section className="py-16 px-8">
|
|
<h1 className="mb-8">Xpeditis Color Palette</h1>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
|
{/* Navy Blue */}
|
|
<div>
|
|
<div className="bg-brand-navy h-32 rounded-lg shadow-lg mb-3"></div>
|
|
<h4 className="mb-1">Navy Blue</h4>
|
|
<p className="text-body-sm text-neutral-600">#10183A</p>
|
|
<p className="text-body-xs text-neutral-500">Primary color for headers, titles</p>
|
|
</div>
|
|
|
|
{/* Turquoise */}
|
|
<div>
|
|
<div className="bg-brand-turquoise h-32 rounded-lg shadow-lg mb-3"></div>
|
|
<h4 className="mb-1">Turquoise</h4>
|
|
<p className="text-body-sm text-neutral-600">#34CCCD</p>
|
|
<p className="text-body-xs text-neutral-500">Accent color for CTAs, links</p>
|
|
</div>
|
|
|
|
{/* Green */}
|
|
<div>
|
|
<div className="bg-brand-green h-32 rounded-lg shadow-lg mb-3"></div>
|
|
<h4 className="mb-1">Green</h4>
|
|
<p className="text-body-sm text-neutral-600">#067224</p>
|
|
<p className="text-body-xs text-neutral-500">Success states, confirmations</p>
|
|
</div>
|
|
|
|
{/* Light Gray */}
|
|
<div>
|
|
<div className="bg-brand-gray border border-neutral-300 h-32 rounded-lg shadow-lg mb-3"></div>
|
|
<h4 className="mb-1">Light Gray</h4>
|
|
<p className="text-body-sm text-neutral-600">#F2F2F2</p>
|
|
<p className="text-body-xs text-neutral-500">Backgrounds, sections</p>
|
|
</div>
|
|
|
|
{/* White */}
|
|
<div>
|
|
<div className="bg-white border border-neutral-300 h-32 rounded-lg shadow-lg mb-3"></div>
|
|
<h4 className="mb-1">White</h4>
|
|
<p className="text-body-sm text-neutral-600">#FFFFFF</p>
|
|
<p className="text-body-xs text-neutral-500">Main backgrounds, cards</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Typography - Manrope (Headings) */}
|
|
<section className="bg-brand-gray py-16 px-8">
|
|
<h2 className="mb-8">Typography - Manrope (Headings)</h2>
|
|
|
|
<div className="bg-white rounded-lg p-8 shadow-md space-y-6">
|
|
<div>
|
|
<p className="text-label mb-2">DISPLAY LARGE (72PX)</p>
|
|
<h1 className="text-display-lg">Shipping Excellence</h1>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">HEADING 1 (40PX)</p>
|
|
<h1>Maritime Freight Solutions</h1>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">HEADING 2 (32PX)</p>
|
|
<h2>Track Your Shipments</h2>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">HEADING 3 (24PX)</p>
|
|
<h3>Real-Time Updates</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">HEADING 4 (20PX)</p>
|
|
<h4>Book Your Container</h4>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">HEADING 5 (18PX)</p>
|
|
<h5>Instant Quotes</h5>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">HEADING 6 (16PX)</p>
|
|
<h6>Global Coverage</h6>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Typography - Montserrat (Body) */}
|
|
<section className="py-16 px-8">
|
|
<h2 className="mb-8">Typography - Montserrat (Body Text)</h2>
|
|
|
|
<div className="bg-white rounded-lg p-8 shadow-md space-y-6">
|
|
<div>
|
|
<p className="text-label mb-2">BODY LARGE (18PX)</p>
|
|
<p className="text-body-lg">
|
|
Xpeditis is a B2B SaaS maritime freight booking and management platform that allows
|
|
freight forwarders to search and compare real-time shipping rates.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">BODY REGULAR (16PX)</p>
|
|
<p className="text-body">
|
|
Book containers online and manage shipments from a centralized dashboard with
|
|
comprehensive tracking and reporting features.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">BODY SMALL (14PX)</p>
|
|
<p className="text-body-sm">
|
|
Get instant quotes from multiple carriers and choose the best option for your shipping
|
|
needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-label mb-2">BODY EXTRA SMALL (12PX)</p>
|
|
<p className="text-body-xs">
|
|
Supporting documentation and terms of service available upon request.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Buttons */}
|
|
<section className="bg-brand-gray py-16 px-8">
|
|
<h2 className="mb-8">Button Styles</h2>
|
|
|
|
<div className="bg-white rounded-lg p-8 shadow-md">
|
|
<div className="flex flex-wrap gap-4">
|
|
<button className="btn-primary">Primary Button</button>
|
|
<button className="btn-secondary">Secondary Button</button>
|
|
<button className="btn-success">Success Button</button>
|
|
<button className="btn-outline">Outline Button</button>
|
|
</div>
|
|
|
|
<div className="mt-8 p-6 bg-brand-navy rounded-lg">
|
|
<h4 className="text-white mb-4">On Dark Background</h4>
|
|
<div className="flex flex-wrap gap-4">
|
|
<button className="bg-brand-turquoise text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-brand-turquoise/90 transition-colors">
|
|
Primary on Dark
|
|
</button>
|
|
<button className="bg-white text-brand-navy font-heading font-semibold px-6 py-3 rounded-lg hover:bg-neutral-100 transition-colors">
|
|
White Button
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Cards & Badges */}
|
|
<section className="py-16 px-8">
|
|
<h2 className="mb-8">Cards & Badges</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{/* Booking Card */}
|
|
<div className="card">
|
|
<h3 className="card-header">Booking WCM-2024-ABC123</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<span className="label">STATUS</span>
|
|
<span className="badge-success ml-2">CONFIRMED</span>
|
|
</div>
|
|
<div>
|
|
<span className="label">ROUTE</span>
|
|
<p className="text-body mt-1">Le Havre → Shanghai</p>
|
|
</div>
|
|
<div>
|
|
<span className="label">TRANSIT TIME</span>
|
|
<p className="text-body mt-1">28 days</p>
|
|
</div>
|
|
<button className="btn-primary w-full mt-4">View Details</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rate Quote Card */}
|
|
<div className="card">
|
|
<h3 className="card-header">Rate Quote</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<span className="label">CARRIER</span>
|
|
<p className="text-body mt-1 font-semibold">MAERSK LINE</p>
|
|
</div>
|
|
<div>
|
|
<span className="label">TOTAL PRICE</span>
|
|
<p className="text-h3 text-brand-turquoise mt-1">$1,245 USD</p>
|
|
</div>
|
|
<div>
|
|
<span className="badge-info">Best Rate</span>
|
|
<span className="badge-success ml-2">Available</span>
|
|
</div>
|
|
<button className="btn-secondary w-full mt-4">Book Now</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tracking Card */}
|
|
<div className="card">
|
|
<h3 className="card-header">Shipment Tracking</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<span className="label">CONTAINER</span>
|
|
<p className="text-body mt-1 font-mono font-semibold">MSKU1234567</p>
|
|
</div>
|
|
<div>
|
|
<span className="label">CURRENT LOCATION</span>
|
|
<p className="text-body mt-1">Port of Rotterdam</p>
|
|
</div>
|
|
<div>
|
|
<span className="badge-info">In Transit</span>
|
|
</div>
|
|
<button className="btn-primary w-full mt-4">Track</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Form Elements */}
|
|
<section className="bg-brand-gray py-16 px-8">
|
|
<h2 className="mb-8">Form Elements</h2>
|
|
|
|
<div className="bg-white rounded-lg p-8 shadow-md max-w-2xl">
|
|
<form className="space-y-6">
|
|
<div>
|
|
<label className="label">Origin Port</label>
|
|
<input type="text" className="input w-full" placeholder="e.g., Le Havre (FRFOS)" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="label">Destination Port</label>
|
|
<input type="text" className="input w-full" placeholder="e.g., Shanghai (CNSHA)" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="label">Volume (CBM)</label>
|
|
<input type="number" className="input w-full" placeholder="0.00" />
|
|
</div>
|
|
<div>
|
|
<label className="label">Weight (KG)</label>
|
|
<input type="number" className="input w-full" placeholder="0.00" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<button type="submit" className="btn-primary flex-1">
|
|
Search Rates
|
|
</button>
|
|
<button type="reset" className="btn-outline">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Navy Section Example */}
|
|
<section className="section-navy">
|
|
<div className="container mx-auto px-8 text-center">
|
|
<h2 className="text-white mb-6">Ready to Get Started?</h2>
|
|
<p className="text-body-lg text-neutral-200 max-w-2xl mx-auto mb-8">
|
|
Join thousands of freight forwarders who trust Xpeditis for their maritime shipping
|
|
needs.
|
|
</p>
|
|
<div className="flex gap-4 justify-center">
|
|
<button className="bg-brand-turquoise text-white font-heading font-semibold px-8 py-4 rounded-lg hover:bg-brand-turquoise/90 transition-colors text-lg">
|
|
Start Free Trial
|
|
</button>
|
|
<button className="bg-white text-brand-navy font-heading font-semibold px-8 py-4 rounded-lg hover:bg-neutral-100 transition-colors text-lg">
|
|
Contact Sales
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Links */}
|
|
<section className="py-16 px-8">
|
|
<h2 className="mb-8">Links & Interactive Elements</h2>
|
|
|
|
<div className="bg-white rounded-lg p-8 shadow-md space-y-4">
|
|
<p className="text-body">
|
|
Check out our{' '}
|
|
<a href="#" className="link">
|
|
documentation
|
|
</a>{' '}
|
|
for more information about our{' '}
|
|
<a href="#" className="link">
|
|
API endpoints
|
|
</a>
|
|
.
|
|
</p>
|
|
|
|
<p className="text-body">
|
|
Need help?{' '}
|
|
<a href="#" className="link">
|
|
Contact our support team
|
|
</a>{' '}
|
|
or read our{' '}
|
|
<a href="#" className="link">
|
|
FAQ section
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|