// ─── Shared components ────────────────────────────────────────────────────────
const { useState, useEffect, useRef } = React;
// Intersection observer hook for scroll animations
function useFadeUp(threshold = 0.15) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { el.classList.add('visible'); obs.unobserve(el); } },
{ threshold }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
return ref;
}
// ─── Logo Mark ────────────────────────────────────────────────────────────────
function TesseraLogo({ size = 36 }) {
const id = 'lg' + size;
return (
);
}
// ─── Wordmark ─────────────────────────────────────────────────────────────────
function Wordmark({ light = false }) {
return (
);
}
// ─── Gradient Button ──────────────────────────────────────────────────────────
function GradBtn({ children, href = '#contact', onClick, small = false }) {
const [hov, setHov] = useState(false);
return (
setHov(true)}
onMouseLeave={() => setHov(false)}
style={{
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
padding: small ? '9px 20px' : '13px 28px',
background: hov
? 'linear-gradient(90deg, #0891B2, #1D4ED8, #10B981)'
: 'linear-gradient(90deg, #10B981, #0891B2, #1D4ED8)',
color: '#fff',
fontFamily: 'var(--font)',
fontWeight: 600,
fontSize: small ? 13 : 14,
letterSpacing: '0.02em',
borderRadius: 6,
textDecoration: 'none',
border: 'none',
cursor: 'pointer',
transition: 'background 0.4s ease, box-shadow 0.3s ease, transform 0.2s ease',
boxShadow: hov ? '0 0 24px rgba(8,145,178,0.45)' : '0 0 0 rgba(0,0,0,0)',
transform: hov ? 'translateY(-1px)' : 'none',
backgroundSize: '200%',
}}
>{children}
);
}
// ─── Ghost Button ─────────────────────────────────────────────────────────────
function GhostBtn({ children, href = '#examples', onClick, dark = true }) {
const [hov, setHov] = useState(false);
return (
setHov(true)}
onMouseLeave={() => setHov(false)}
style={{
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
padding: '12px 27px',
background: 'transparent',
color: dark ? (hov ? '#fff' : 'rgba(255,255,255,0.8)') : (hov ? 'var(--text-dark)' : 'var(--text-muted)'),
fontFamily: 'var(--font)',
fontWeight: 500,
fontSize: 14,
letterSpacing: '0.02em',
borderRadius: 6,
textDecoration: 'none',
border: dark ? '1px solid rgba(255,255,255,0.25)' : '1px solid #CBD5E1',
cursor: 'pointer',
transition: 'all 0.25s ease',
borderColor: hov ? (dark ? 'rgba(255,255,255,0.5)' : '#94A3B8') : undefined,
}}
>{children}
);
}
// ─── Section Eyebrow ──────────────────────────────────────────────────────────
function Eyebrow({ children, light = false }) {
return (
{children}
);
}
// ─── Gradient underline heading ───────────────────────────────────────────────
function GradUnderline({ style: s }) {
return ;
}
// ─── Placeholder screenshot block ────────────────────────────────────────────
function ScreenPlaceholder({ label, dark = false, aspectRatio = '16/9' }) {
return (
);
}
// ─── Check icon ───────────────────────────────────────────────────────────────
function CheckIcon({ color = '#10B981', size = 16 }) {
return (
);
}
// ─── Sticky Header ────────────────────────────────────────────────────────────
function Header() {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const navLinks = [
{ label: 'Problem', href: '#problem' },
{ label: 'What We Build', href: '#what-we-build' },
{ label: 'Examples', href: '#examples' },
{ label: 'How We Work', href: '#how-we-work' },
{ label: 'FAQ', href: '#faq' },
];
return (
{/* Top gradient bar */}
{/* Mobile menu */}
{menuOpen && (
{navLinks.map(l => (
setMenuOpen(false)} style={{
display: 'block', color: 'rgba(255,255,255,0.75)', fontSize: 15,
fontWeight: 500, textDecoration: 'none', padding: '10px 0',
borderBottom: '1px solid rgba(255,255,255,0.07)',
}}>{l.label}
))}
Book a scoping call