// site/components.jsx — reusable atoms shared across sections. // ─── Wordmark — uses the official SVG via inline color inheritance ───────── function Wordmark({ height = 28, color = 'currentColor', className = '' }) { // We use a CSS mask trick: load the SVG (which uses currentColor) as . // Easier: just the file — its paths use fill="currentColor", which // sadly an tag can't recolor. So we inline a stripped version. return ( ); } // Mount this once near the root so refs work. function WordmarkDefs() { return ( ); } // ─── Buttons ─────────────────────────────────────────────────────────────── function PrimaryButton({ children, onClick, href, target, rel, size = 'md', variant = 'yellow' }) { const cls = 'sw-btn sw-btn--' + variant + ' sw-btn--' + size; if (href) return {children}; return ; } function GhostButton({ children, href, onClick, dark = false }) { const cls = 'sw-btn sw-btn--ghost ' + (dark ? 'sw-btn--ghost-dark' : ''); if (href) return {children}; return ; } function ArrowIcon() { return ( ); } // ─── Eyebrow ─────────────────────────────────────────────────────────────── function Eyebrow({ children, dark = false, accent = false }) { return (
{children}
); } // ─── Channel Pin — the yellow-circle motif from the brand manual ────────── function ChannelPin({ id, size = 96 }) { const paths = { email: ( ), whatsapp: ( ), telegram: ( ), sms: ( ), push: ( ), }; return ( ); } // ─── BrandMark — the official Showtime! stylized "S" glyph ───────────────── // 4 paths from brand-mark.svg. The body+echo colors flip per background: // on="white" → body BLACK, echo YELLOW (default) // on="yellow" → body BLACK, echo WHITE // on="black" → body WHITE, echo YELLOW // on="inverted" → body YELLOW, echo BLACK // on="mono-black" / "mono-yellow" → single color // The mark stands alone — no circle behind. It's a letter, not a button. function BrandMark({ size = 96, on = 'white' }) { const palettes = { 'white': { body: '#000', echo: '#F7C217' }, 'yellow': { body: '#000', echo: '#FFFFFF' }, 'black': { body: '#FFFFFF', echo: '#F7C217' }, 'inverted': { body: '#F7C217', echo: '#000' }, 'mono-black': { body: '#000', echo: '#000' }, 'mono-yellow': { body: '#F7C217', echo: '#F7C217' }, }; const p = palettes[on] || palettes.white; return ( ); } // Backwards-compat alias (old code referenced ShowtimeS as a pin-in-circle). function ShowtimeS({ size = 48, on = 'white' }) { return ; } // ─── Customer logo — stylized text-only placeholder ──────────────────────── function CustomerLogo({ name, src, kind, city }) { if (src) { return (
{name}
); } // Fallback: stylized text wordmark. const hash = (name.charCodeAt(0) + name.charCodeAt(1)) % 5; const styles = [ { fontFamily: 'Poppins, sans-serif', fontWeight: 800, textTransform: 'lowercase', letterSpacing: '-0.02em' }, { fontFamily: '"DM Sans", sans-serif', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: '0.82em' }, { fontFamily: 'Poppins, sans-serif', fontWeight: 500, textTransform: 'lowercase', fontStyle: 'italic', letterSpacing: '-0.01em' }, { fontFamily: '"DM Sans", sans-serif', fontWeight: 500, letterSpacing: '0.02em' }, { fontFamily: 'Poppins, sans-serif', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '-0.02em', fontSize: '0.92em' }, ]; return (
{name}
); } // ─── Mini console / "product window" — used as visual asset in hero & elsewhere // Stylized representation of the Showtime! console with channels + segments. function ConsoleMock({ scale = 1 }) { return (
showtime.platform / console
MC
community
i tuoi 18.247 contatti
Nuovi questo mese
+842
Tasso di apertura
42%
Risposte WhatsApp
1.2k
Segmenti recenti
Soci 2025 4.218 contatti aggiornato 2h fa
Visitatori mostra "Caravaggio" 2.871 aggiornato ieri
Famiglie con bambini 1.504 aggiornato 3g fa
); } Object.assign(window, { Wordmark, WordmarkDefs, PrimaryButton, GhostButton, ArrowIcon, Eyebrow, ChannelPin, BrandMark, ShowtimeS, CustomerLogo, ConsoleMock, });