// website/shell.jsx — shared UI for Xaduno marketing site const BRAND_GRAD = 'linear-gradient(135deg, #B45EE8 0%, #E14A8D 50%, #5FCAF9 100%)'; const BRAND_GRAD_TIGHT = 'linear-gradient(135deg, #B45EE8 0%, #E14A8D 100%)'; function XWordmark({ size = 28, color = '#0F172A', dot = true }) { return (
XADUNO {dot && ( )}
); } function SwissPill({ children = 'Hosting in der Schweiz', dark = false }) { return (
{children}
); } function ArrowRight({ size = 14 }) { return ( ); } function Check({ size = 14, color = '#16A34A' }) { return ( ); } function Dash({ size = 14, color = '#CBD5E1' }) { return ( ); } // Top nav with active state based on hash route function TopNav({ route, setRoute }) { const [funkOpen, setFunkOpen] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); const funkRef = React.useRef(null); const closeTimer = React.useRef(null); const openFunk = () => { if (closeTimer.current) clearTimeout(closeTimer.current); setFunkOpen(true); }; const closeFunkSoon = () => { closeTimer.current = setTimeout(() => setFunkOpen(false), 120); }; // Close on click outside (for click-to-open behavior) React.useEffect(() => { const onClick = (e) => { if (funkRef.current && !funkRef.current.contains(e.target)) setFunkOpen(false); }; document.addEventListener('mousedown', onClick); return () => document.removeEventListener('mousedown', onClick); }, []); const funktionen = [ { id: 'ats', label: 'Bewerbungsmanagement', tag: 'ATS', desc: 'Pipeline, Team-Feedback, Dokumente anfordern.', tone: '#335CFF' }, { id: 'multiposting', label: 'Multiposting', tag: 'Reichweite', desc: 'Eine Stelle, 100+ Plattformen, ein Klick.', tone: '#6941C6' }, { id: 'dossier', label: 'Mitarbeiterdossier', tag: 'HRIS', desc: 'Stammdaten, Verträge, Mitarbeitergespräche.', tone: '#F97316' }, ]; const funktionenActive = funktionen.some(f => f.id === route); return ( {/* Mobile overlay menu */}
{[ { id: 'home', label: 'Home' }, { id: 'ats', label: 'Bewerbungsmanagement' }, { id: 'multiposting', label: 'Multiposting' }, { id: 'dossier', label: 'Mitarbeiterdossier' }, { id: 'preise', label: 'Preise' }, { id: 'uns', label: 'Über uns' }, ].map(item => ( ))}
setMobileOpen(false)}> Demo anfragen
); } function NavIconPipeline() { // Candidate profile card — avatar + info lines + footer rows (ATS) return ( ); } function NavIconShare() { // Hub-and-spoke — a central node broadcasting to four corner endpoints (Multiposting) return ( ); } function NavIconUser() { // Folder/dossier with a person silhouette inside (HRIS) return ( ); } function Footer() { return ( ); } // Generic feature item w/ icon function FeatureItem({ icon, title, desc }) { return (
{icon}
{title}
{desc}
); } // 3-step process row function StepRow({ steps }) { return (
{steps.map((s, i) => (
{String(i + 1).padStart(2, '0')}
{s.title}
{s.desc}
))}
); } // CTA block function CTABlock({ headline, accent, sub, btnLabel = 'Demo anfragen' }) { return (

{headline}{' '} {accent && {accent}}

{sub &&

{sub}

} {btnLabel}
); } Object.assign(window, { XWordmark, SwissPill, ArrowRight, Check, Dash, TopNav, Footer, FeatureItem, StepRow, CTABlock, BRAND_GRAD, BRAND_GRAD_TIGHT, });