2026-09-16 21:21:43 +02:00
|
|
|
interface TripoliLogoProps {
|
|
|
|
|
size?: number;
|
|
|
|
|
variant?: 'hero' | 'sidebar';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Minimalist inline SVG mark — no external asset, easy to swap later. */
|
|
|
|
|
export function TripoliLogo({ size = 28, variant = 'sidebar' }: TripoliLogoProps) {
|
Refonte complète du thème : éditorial clair, inspiré de studiocart.co
À la demande explicite de l'utilisateur (site jugé "trop moche"),
inspiration visuelle prise sur https://www.studiocart.co/ : grands
titres serif (Fraunces) avec italique, fond papier clair plutôt que le
coffre-fort sombre d'origine, un seul accent vif (citron vert) utilisé
avec parcimonie pour les surlignages, cartes blanches nettes à bordure
fine, petites touches dessinées à la main (squiggle, flèche) sur l'écran
de connexion.
- Jetons de thème (index.css, tailwind.config.js) : le thème clair
devient la palette par défaut. Le thème sombre existant reste
disponible via le bouton de bascule, inchangé.
- ThemeContext : thème par défaut passé à 'light'.
- Écran de connexion entièrement repensé (fond génératif pastel qui
dérive lentement, carte blanche, surlignage citron vert via la
nouvelle classe utilitaire .tc-highlight, doodles SVG).
- Reste de l'application : cascade automatique via les tokens CSS déjà
utilisés partout (bg-panel, text-ink, ...), sans avoir à toucher
chaque composant individuellement.
Inspiration de studiocart.co pour le ton visuel uniquement (typographie,
palette, motifs) - aucun contenu, logo ni image de ce site n'est repris.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-22 14:37:16 +02:00
|
|
|
const badgeFill = variant === 'hero' ? 'rgba(23,20,14,0.05)' : 'rgba(91,140,255,0.14)';
|
|
|
|
|
const badgeStroke = variant === 'hero' ? 'rgba(23,20,14,0.16)' : 'rgba(91,140,255,0.36)';
|
2026-09-16 21:21:43 +02:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
|
|
|
|
|
<rect x="1" y="1" width="30" height="30" rx="9" fill={badgeFill} stroke={badgeStroke} />
|
|
|
|
|
<path
|
|
|
|
|
d="M10 20.5h11a3.6 3.6 0 0 0 .3-7.2 5.6 5.6 0 0 0-10.7-1.1A3.6 3.6 0 0 0 10 20.5z"
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="#7ba4ff"
|
|
|
|
|
strokeWidth="1.6"
|
|
|
|
|
strokeLinejoin="round"
|
|
|
|
|
/>
|
|
|
|
|
<circle cx="16" cy="16.6" r="1.5" fill="#5b8cff" />
|
|
|
|
|
</svg>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function TripoliWordmark({ className = '' }: { className?: string }) {
|
|
|
|
|
return (
|
|
|
|
|
<span className={`text-[15px] font-bold tracking-tight ${className}`}>
|
|
|
|
|
Tripoli<span className="font-medium opacity-55"> Cloud</span>
|
|
|
|
|
</span>
|
|
|
|
|
);
|
|
|
|
|
}
|