/* global React */
const { useState } = React;
/* ---------- Logo — uses the real PNG ---------- */
function Logo({ variant = 'black', size = 40 }) {
const src = variant === 'white' ? './assets/logo-white.png' : './assets/logo.png';
return (
);
}
/* ---------- Nav — matches live site: Montserrat Bold 16.5px uppercase, thin underline ---------- */
function Nav({ current, onNav, onDark = false, logoSize = 44 }) {
const fg = onDark ? '#fff' : 'rgba(0,0,0,0.99)';
const items = ['Home', 'Photo', 'Video', 'Contact Us'];
return (
onNav('Home')} style={{ cursor: 'pointer', display: 'inline-flex' }}>
onNav('Contact Us')} style={{ color: fg, cursor: 'pointer', display: 'inline-flex', marginLeft: 'auto' }} title="Contact">
);
}
/* ---------- Squircle tile (rounded-square with extra curvature) ---------- */
/* True iOS-style superellipse clip-path (squircle). The path is normalized
0..1 so we apply it via clipPath with objectBoundingBox. */
const SQUIRCLE_PATH = "M .5 0 C .82 0 1 .18 1 .5 C 1 .82 .82 1 .5 1 C .18 1 0 .82 0 .5 C 0 .18 .18 0 .5 0 Z";
function Squircle({ children, width, height, size, style, onClick, hover = true, shadow = true }) {
const [h, setH] = useState(false);
const w = width ?? size;
const ht = height ?? size;
return (
hover && setH(true)}
onMouseLeave={() => setH(false)}
style={{
width: w, height: ht,
overflow: 'hidden', flexShrink: 0, cursor: onClick ? 'pointer' : 'default',
position: 'relative',
filter: shadow ? 'drop-shadow(0 18px 24px rgba(0,0,0,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.25))' : 'none',
transform: h ? 'scale(1.06) translateY(-2px)' : 'scale(1)',
transition: 'transform .35s cubic-bezier(.2,.7,.15,1)',
clipPath: `path('${tvMaskPath(w, ht)}')`,
WebkitClipPath: `path('${tvMaskPath(w, ht)}')`,
...style,
}}
>{children}
);
}
/* Squarespace's "TV" fluid-image mask — captured directly from robis.org.
Normalized path (0..1), scaled to pixel dimensions so it works with any
width × height (square, portrait, or landscape tiles). */
function tvMaskPath(w, h) {
// Original normalized path from Squarespace:
// M0.5,0 C0.768,0,0.894,0.056,0.919,0.081 C0.944,0.106,1,0.242,1,0.505
// C1,0.768,0.947,0.891,0.919,0.919 C0.891,0.947,0.768,1,0.5,1
// C0.202,1,0.11,0.948,0.081,0.919 C0.052,0.89,0,0.768,0,0.5
// C0,0.232,0.053,0.109,0.081,0.081 C0.109,0.053,0.232,0,0.5,0
const pts = [
['M', 0.5, 0],
['C', 0.768, 0, 0.894, 0.056, 0.919, 0.081],
['C', 0.944, 0.106, 1, 0.242, 1, 0.505],
['C', 1, 0.768, 0.947, 0.891, 0.919, 0.919],
['C', 0.891, 0.947, 0.768, 1, 0.5, 1],
['C', 0.202, 1, 0.11, 0.948, 0.081, 0.919],
['C', 0.052, 0.89, 0, 0.768, 0, 0.5],
['C', 0, 0.232, 0.053, 0.109, 0.081, 0.081],
['C', 0.109, 0.053, 0.232, 0, 0.5, 0],
];
return pts.map(seg => {
const cmd = seg[0];
const nums = seg.slice(1).map((v, i) => (i % 2 === 0 ? v * w : v * h).toFixed(3));
return cmd + ' ' + nums.join(' ');
}).join(' ') + ' Z';
}
function ImgTile({ src, label, size, width, height, onClick, rotate = 0, style }) {
return (
);
}
/* ---------- Hero Statement — "DISCOVER. CREATE. INSPIRE." in quotes ---------- */
function HeroQuote({ words, color = '#000000' }) {
return (
“
{words.map((w, i) => (
{w}.
))}
”
);
}
/* ---------- Underlined "CONTACT US." link with blue scribble ---------- */
function UnderlineLink({ children, color = '#0a0a0b', onClick }) {
return (
{children}
{/* Hand-drawn blue underline */}
);
}
/* ---------- Spotify-style Media Card ---------- */
function MediaCard() {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
background: '#2b5ba8', borderRadius: 14,
padding: '14px 18px',
display: 'flex', alignItems: 'center', gap: 16, color: '#fff',
width: 380,
boxShadow: hover
? '0 28px 60px -10px rgba(0,0,0,.45)'
: '0 20px 50px -12px rgba(0,0,0,.35)',
transform: hover ? 'translateY(-2px)' : 'translateY(0)',
transition: 'all .25s cubic-bezier(.2,.7,.15,1)',
cursor: 'pointer',
}}>
ROBIS.org
Preview Jack R
+
Save on Spotify
);
}
/* ---------- Plane svg for sky hero ---------- */
function Plane({ style }) {
return (
);
}
/* ---------- Pill button — matches live site: Montserrat 800 italic, capitalize, 18.75px, opacity 0.8 idle → 1 hover ---------- */
function PillButton({ children, onClick, variant = 'dark' }) {
const [hover, setHover] = useState(false);
const [press, setPress] = useState(false);
const styles = variant === 'dark'
? { background: '#000', color: '#fff' }
: { background: '#fff', color: '#000' };
return (
);
}
/* ---------- Section wavy divider ---------- */
function WaveDivider({ flip = false, fill = '#000', bg = 'transparent' }) {
return (
);
}
/* ---------- Footer ---------- */
function Footer({ onDark = true, onNav }) {
const fg = onDark ? '#b4b4bc' : '#2a2a2e';
return (
);
}
Object.assign(window, {
Logo, Nav, Squircle, ImgTile, HeroQuote, UnderlineLink,
MediaCard, Annotation, Plane, PillButton, WaveDivider, Footer,
});