// Shared brand primitives — Qubikos marketing surfaces.
// Neon pictograms inspired by hero-cube reference image.
const QB_SPORTS = [
// --- FRONT FACE (cyan): action sports ---
{ key:'swim', label:'Swimming',
paths:(
{/* Horizontal freestyle swimmer */}
) },
{ key:'run', label:'Running',
paths:(
{/* Sprinter — stick figure like reference */}
) },
{ key:'hoops', label:'Basketball',
paths:(
) },
{ key:'cycle', label:'Cycling',
paths:(
) },
{ key:'yoga', label:'Yoga',
paths:(
{/* Seated meditation — simple silhouette */}
) },
{ key:'karate', label:'Karate',
paths:(
{/* High side-kick */}
) },
{ key:'box', label:'Boxing',
paths:(
{/* Boxer with gloves */}
) },
{ key:'gymnast', label:'Gymnastics',
paths:(
{/* Gymnast leap — arms up, split */}
) },
{ key:'soccer', label:'Soccer',
paths:(
{/* Just the ball, like reference */}
) },
// --- RIGHT FACE (purple/magenta): artistic & equipment sports ---
{ key:'rings', label:'Rings',
paths:(
{/* Two hanging rings */}
) },
{ key:'ballet', label:'Ballet',
paths:(
{/* Ballerina on pointe — one leg extended */}
) },
{ key:'pommel', label:'Pommel horse',
paths:(
{/* Pommel horse */}
) },
{ key:'jump', label:'Jump rope',
paths:(
{/* Jumping rope */}
) },
{ key:'dance', label:'Dance',
paths:(
{/* Dancer arm up */}
) },
{ key:'gym', label:'Gym',
paths:(
{/* Building with "GYM" like reference */}
GYM
) },
{ key:'dancers', label:'Dancers',
paths:(
{/* Two figures holding hands */}
) },
{ key:'music', label:'Music',
paths:(
{/* Music notes */}
) },
];
function SportIcon({ paths, d, size = 22, className = '' }) {
return (
);
}
function Wordmark({ className = '', style = {} }) {
return (
qubikos.
);
}
function Pill({ children, tone = 'neutral', style }) {
const tones = {
neutral: { bg: 'rgba(255,255,255,0.06)', fg: 'var(--fg-1)', dot: 'var(--ink-400)' },
blue: { bg: 'rgba(57,104,255,0.12)', fg: 'var(--blue-300)', dot: 'var(--blue-400)' },
ok: { bg: 'rgba(16,185,129,0.12)', fg: '#34d399', dot: '#10b981' },
}[tone];
return (
{children}
);
}
function QBButton({ children, variant = 'primary', size = 'md', icon, style = {}, ...rest }) {
const sizes = {
sm: { h: 34, px: 14, fs: 13 },
md: { h: 44, px: 20, fs: 14 },
lg: { h: 52, px: 24, fs: 15 },
}[size];
const variants = {
primary: {
background: 'linear-gradient(180deg, #4d7dff 0%, #2950e6 100%)',
color: '#fff', border: '1px solid rgba(255,255,255,0.18)',
boxShadow: '0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px rgba(41,80,230,0.35)',
},
ghost: {
background: 'rgba(255,255,255,0.10)', color: '#fff',
border: '1px solid rgba(255,255,255,0.22)', boxShadow: 'none',
},
light: {
background: '#fff', color: 'var(--ink-900)',
border: '1px solid var(--ink-200)', boxShadow: 'var(--shadow-sm)',
},
}[variant];
return (
);
}
// 3D cube with neon pictograms — cyan front, magenta right, purple top.
function QubeHero({ size = 460 }) {
const front = QB_SPORTS.slice(0, 9); // cyan
const right = QB_SPORTS.slice(9, 18); // magenta
const top = [...QB_SPORTS.slice(0, 3), ...QB_SPORTS.slice(9, 12), ...QB_SPORTS.slice(3, 6)]; // mix
const tile = (size - 24) / 3;
const iconSize = Math.round(tile * 0.64);
function Face({ transform, icons, accent, shade }) {
return (
{icons.map((s, i) => (
))}