135 lines
6.7 KiB
TypeScript
135 lines
6.7 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
export default function TestColors() {
|
|
return (
|
|
<div className="min-h-screen bg-banquise-slate-50">
|
|
{/* Header avec gradient moderne */}
|
|
<div className="bg-gradient-banquise-nav text-white p-8 mb-8">
|
|
<h1 className="text-4xl font-bold mb-4">Nouvelle Palette Banquise</h1>
|
|
<p className="text-banquise-blue-200 text-lg">Design professionnel et harmonieux</p>
|
|
</div>
|
|
|
|
<div className="max-w-6xl mx-auto p-8 space-y-12">
|
|
|
|
{/* Palette Bleus */}
|
|
<section>
|
|
<h2 className="text-2xl font-bold text-banquise-blue-900 mb-6">Palette Bleus Principaux</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
<div className="bg-banquise-blue-900 text-white p-4 rounded-lg text-center">
|
|
<div className="font-bold">900</div>
|
|
<div className="text-sm">#0f2a3d</div>
|
|
<div className="text-xs mt-2">Headers foncés</div>
|
|
</div>
|
|
<div className="bg-banquise-blue-800 text-white p-4 rounded-lg text-center">
|
|
<div className="font-bold">800</div>
|
|
<div className="text-sm">#1f5078</div>
|
|
<div className="text-xs mt-2">Navigation</div>
|
|
</div>
|
|
<div className="bg-banquise-blue-600 text-white p-4 rounded-lg text-center">
|
|
<div className="font-bold">600</div>
|
|
<div className="text-sm">#34a6fc</div>
|
|
<div className="text-xs mt-2">Boutons primaires</div>
|
|
</div>
|
|
<div className="bg-banquise-blue-400 text-white p-4 rounded-lg text-center">
|
|
<div className="font-bold">400</div>
|
|
<div className="text-sm">#76beee</div>
|
|
<div className="text-xs mt-2">Liens</div>
|
|
</div>
|
|
<div className="bg-banquise-blue-200 text-banquise-blue-900 p-4 rounded-lg text-center">
|
|
<div className="font-bold">200</div>
|
|
<div className="text-sm">#a0ecf9</div>
|
|
<div className="text-xs mt-2">Accents clairs</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Palette Gris */}
|
|
<section>
|
|
<h2 className="text-2xl font-bold text-banquise-blue-900 mb-6">Palette Gris Harmonieux</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
<div className="bg-banquise-slate-900 text-white p-4 rounded-lg text-center">
|
|
<div className="font-bold">Slate 900</div>
|
|
<div className="text-sm">#0f172a</div>
|
|
<div className="text-xs mt-2">Texte principal</div>
|
|
</div>
|
|
<div className="bg-banquise-slate-700 text-white p-4 rounded-lg text-center">
|
|
<div className="font-bold">Slate 700</div>
|
|
<div className="text-sm">#334155</div>
|
|
<div className="text-xs mt-2">Texte secondaire</div>
|
|
</div>
|
|
<div className="bg-banquise-slate-300 text-banquise-slate-800 p-4 rounded-lg text-center">
|
|
<div className="font-bold">Slate 300</div>
|
|
<div className="text-sm">#cbd5e1</div>
|
|
<div className="text-xs mt-2">Bordures</div>
|
|
</div>
|
|
<div className="bg-banquise-slate-100 text-banquise-slate-800 p-4 rounded-lg text-center">
|
|
<div className="font-bold">Slate 100</div>
|
|
<div className="text-sm">#f1f5f9</div>
|
|
<div className="text-xs mt-2">Fonds clairs</div>
|
|
</div>
|
|
<div className="bg-banquise-slate-50 text-banquise-slate-800 p-4 rounded-lg text-center border">
|
|
<div className="font-bold">Slate 50</div>
|
|
<div className="text-sm">#f8fafc</div>
|
|
<div className="text-xs mt-2">Fonds de page</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Exemples d'application */}
|
|
<section>
|
|
<h2 className="text-2xl font-bold text-banquise-blue-900 mb-6">Exemples d'Application</h2>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{/* Card moderne */}
|
|
<div className="bg-white border border-banquise-slate-200 rounded-xl p-6 shadow-banquise">
|
|
<div className="w-12 h-12 bg-gradient-banquise-primary rounded-lg mb-4 flex items-center justify-center text-white font-bold">
|
|
B
|
|
</div>
|
|
<h3 className="text-lg font-bold text-banquise-blue-900 mb-2">Service Moderne</h3>
|
|
<p className="text-banquise-slate-600 mb-4">Description avec contraste optimal pour la lisibilité.</p>
|
|
<button className="bg-gradient-banquise-primary text-white px-4 py-2 rounded-lg hover:shadow-banquise-lg transition-all">
|
|
Découvrir
|
|
</button>
|
|
</div>
|
|
|
|
{/* Card subtile */}
|
|
<div className="bg-gradient-banquise-card border border-banquise-blue-200 rounded-xl p-6">
|
|
<div className="w-12 h-12 bg-banquise-blue-200 rounded-lg mb-4 flex items-center justify-center text-banquise-blue-800 font-bold">
|
|
S
|
|
</div>
|
|
<h3 className="text-lg font-bold text-banquise-blue-800 mb-2">Service Subtil</h3>
|
|
<p className="text-banquise-slate-700 mb-4">Design épuré avec couleurs harmonieuses.</p>
|
|
<button className="bg-banquise-blue-600 text-white px-4 py-2 rounded-lg hover:bg-banquise-blue-700 transition-colors">
|
|
En savoir plus
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Navigation exemple */}
|
|
<section>
|
|
<h2 className="text-2xl font-bold text-banquise-blue-900 mb-6">Exemple Navigation</h2>
|
|
<div className="bg-gradient-banquise-nav rounded-xl p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-white font-bold text-xl">La Banquise</div>
|
|
<div className="flex space-x-6">
|
|
<a href="#" className="text-banquise-blue-200 hover:text-white transition-colors">Accueil</a>
|
|
<a href="#" className="text-banquise-blue-200 hover:text-white transition-colors">Services</a>
|
|
<a href="#" className="text-banquise-blue-200 hover:text-white transition-colors">À propos</a>
|
|
</div>
|
|
<button className="bg-banquise-blue-600 text-white px-4 py-2 rounded-lg hover:bg-banquise-blue-500 transition-colors">
|
|
Contact
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="text-center pt-8">
|
|
<Link href="/" className="text-banquise-blue-600 hover:text-banquise-blue-800 underline text-lg">
|
|
← Voir le site avec la nouvelle palette
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |