89 lines
4.0 KiB
TypeScript
89 lines
4.0 KiB
TypeScript
export default function SimPlatformMockup() {
|
|
return (
|
|
<div className="relative w-full max-w-3xl mx-auto">
|
|
<div className="bg-iron-gray border border-charcoal-outline rounded-lg p-6 shadow-2xl">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between pb-4 border-b border-charcoal-outline">
|
|
<div className="text-sm font-semibold text-slate-300">Platform Support</div>
|
|
<div className="text-xs text-slate-500">Active: 1 | Planned: 3</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{/* iRacing - Active */}
|
|
<div className="bg-deep-graphite border-2 border-primary-blue rounded-lg p-4 relative overflow-hidden">
|
|
<div className="absolute top-2 right-2">
|
|
<div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded bg-primary-blue/10 flex items-center justify-center">
|
|
<span className="text-2xl font-bold text-primary-blue">iR</span>
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-white">iRacing</div>
|
|
<div className="text-xs text-performance-green">Active</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 text-xs text-slate-400">
|
|
Full integration
|
|
</div>
|
|
</div>
|
|
|
|
{/* ACC - Future */}
|
|
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
|
|
<span className="text-2xl font-bold text-slate-600">AC</span>
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-slate-500">ACC</div>
|
|
<div className="text-xs text-slate-600">Planned</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 text-xs text-slate-600">
|
|
Coming later
|
|
</div>
|
|
</div>
|
|
|
|
{/* rFactor 2 - Future */}
|
|
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
|
|
<span className="text-2xl font-bold text-slate-600">rF</span>
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-slate-500">rFactor 2</div>
|
|
<div className="text-xs text-slate-600">Planned</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 text-xs text-slate-600">
|
|
Coming later
|
|
</div>
|
|
</div>
|
|
|
|
{/* LMU - Future */}
|
|
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
|
|
<span className="text-2xl font-bold text-slate-600">LM</span>
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-slate-500">Le Mans Ult.</div>
|
|
<div className="text-xs text-slate-600">Planned</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 text-xs text-slate-600">
|
|
Coming later
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-charcoal-outline">
|
|
<div className="text-xs text-slate-500 text-center">
|
|
Your identity stays with you across platforms
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |