// website.jsx — The Composer OS marketing website. // Long-scroll single page: fixed header → 7 sections → footer. // Each section: banner (from banners v2.jsx) + content block + FCP-style carousel. const PAGE_BG = '#faf8f5'; const PAGE_INK = '#1c1a17'; const PAGE_INK_SOFT = 'rgba(28,26,23,0.62)'; const PAGE_INK_MUTE = 'rgba(28,26,23,0.42)'; const PAGE_LINE = 'rgba(28,26,23,0.10)'; // ──────────────────────────────────────────────── // Form delivery — Web3Forms (forms POST here; submissions land in the inbox // tied to this access key). No backend needed; works from any origin. // ──────────────────────────────────────────────── const WEB3FORMS_KEY = 'daf52102-0251-41e7-92ef-083ce5dd7970'; const WEB3FORMS_NEWSLETTER_KEY = '150e6339-fe99-424a-b853-3a7f4ca82f65'; async function submitToWeb3Forms(fields) { const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ access_key: WEB3FORMS_KEY, ...fields }), }); const data = await res.json(); if (!data.success) throw new Error(data.message || 'Submission failed'); return data; } if (typeof window !== 'undefined') window.submitToWeb3Forms = submitToWeb3Forms; // ──────────────────────────────────────────────── // Header — fixed, sticky, minimal // ──────────────────────────────────────────────── // Section → accent color for the hovering logo. Matches the banner tone of each section. const HEADER_ACCENTS = { hero: '#7a9b7e', // sage/moss (green) home: '#f7c948', // bright yellow sun studio: '#b26f5c', // terracotta library: '#8a5a34', // warm bronze projects: '#6b5d7a', // plum — set apart from the warm-brown sections health: '#f0b268', // sunset gold aria: '#c9a34a', // quiet ochre }; // Returns the accent of the section currently nearest the top of the viewport. // Used by CTAs (waitlist / demo) so the modal opens themed to where you are. function activeSectionAccent() { const ids = ['hero','home','studio','library','projects','health','aria']; const mid = window.scrollY + window.innerHeight * 0.25; let current = 'hero'; for (const id of ids) { const el = document.getElementById(id); if (el && el.offsetTop <= mid) current = id; } return HEADER_ACCENTS[current] || HEADER_ACCENTS.hero; } function SiteHeader() { const [scrolled, setScrolled] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); const [activeSection, setActiveSection] = React.useState('hero'); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); // Track which section's banner is most in view; swap logo accent accordingly. React.useEffect(() => { const ids = ['hero','home','studio','library','projects','health','aria']; const els = ids.map(id => document.getElementById(id)).filter(Boolean); if (!els.length) return; const pick = () => { // Use the viewport midline to decide which section is "active". const mid = window.scrollY + window.innerHeight * 0.25; let current = 'hero'; for (const el of els) { const top = el.offsetTop; if (top <= mid) current = el.id; } setActiveSection(current); }; pick(); window.addEventListener('scroll', pick, {passive:true}); window.addEventListener('resize', pick); return () => { window.removeEventListener('scroll', pick); window.removeEventListener('resize', pick); }; }, []); const items = [ { l: 'Home', h: '#home' }, { l: 'Studio', h: '#studio' }, { l: 'Library', h: '#library' }, { l: 'Projects', h: '#projects' }, { l: 'Health', h: '#health' }, { l: 'Aria', h: '#aria' }, ]; return (
{/* Section-tinted wash — subtle color blend matching the active banner */}
); } // ──────────────────────────────────────────────── // Banner wrapper — scales a 1920×800 banner to container width. // On small screens, swaps to a portrait recomposition. // ──────────────────────────────────────────────── function BannerBlock({ id, Comp, tone, portrait }) { const wrapRef = React.useRef(null); const innerRef = React.useRef(null); const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const check = () => setIsMobile(window.innerWidth < 720); check(); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); React.useEffect(() => { const fit = () => { const w = wrapRef.current?.clientWidth || 0; if (w && innerRef.current) { const base = isMobile ? 720 : 1920; const s = w / base; innerRef.current.style.transform = `scale(${s})`; } }; fit(); const ro = new ResizeObserver(fit); if (wrapRef.current) ro.observe(wrapRef.current); window.addEventListener('resize', fit); return () => { ro.disconnect(); window.removeEventListener('resize', fit); }; }, [isMobile]); const ratio = isMobile ? '720 / 900' : '1920 / 800'; const baseW = isMobile ? 720 : 1920; const baseH = isMobile ? 900 : 800; return (
{isMobile && portrait ? React.createElement(portrait, {tone}) : }
); } // ──────────────────────────────────────────────── // Content block — 2-3 paragraphs below banner // ──────────────────────────────────────────────── function ContentBlock({ eyebrow, heading, body, accent }) { return (
{eyebrow}

{heading}

{body.map((p,i)=>

{p}

)}
); } // ──────────────────────────────────────────────── // Carousel — FCP-style. Fixed card on desktop, fluid card on mobile. // Horizontal scroll-snap with prev/next arrows bottom-right. // ──────────────────────────────────────────────── const CARD_W = 520; const CARD_H = 325; const CARD_GAP = 22; const CARD_RATIO = CARD_W / CARD_H; // 1.6 — 16:10 function useCardSize() { const [size, setSize] = React.useState({w: CARD_W, h: CARD_H, gap: CARD_GAP}); React.useEffect(() => { const recalc = () => { const vw = window.innerWidth; if (vw < 720) { // Phone: card = viewport minus 40px page padding (20px each side). const w = Math.max(280, Math.min(CARD_W, vw - 40)); const h = Math.round(w / CARD_RATIO); setSize({w, h, gap: 16}); } else { setSize({w: CARD_W, h: CARD_H, gap: CARD_GAP}); } }; recalc(); window.addEventListener('resize', recalc); return () => window.removeEventListener('resize', recalc); }, []); return size; } function Carousel({ items, accent }) { const trackRef = React.useRef(null); const [idx, setIdx] = React.useState(0); const [lightbox, setLightbox] = React.useState(null); // {src, alt, title} const {w: cardW, h: cardH, gap: cardGap} = useCardSize(); React.useEffect(() => { if (!lightbox) return; const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [lightbox]); const go = (dir) => { const next = Math.max(0, Math.min(items.length - 1, idx + dir)); setIdx(next); if (trackRef.current) { trackRef.current.scrollTo({ left: next * (cardW + cardGap), behavior: 'smooth', }); } }; const onScroll = () => { if (!trackRef.current) return; const p = Math.round(trackRef.current.scrollLeft / (cardW + cardGap)); if (p !== idx) setIdx(p); }; // Extract the image src from a card if it's a RealScreenshot — that's how we know it's clickable. const getRealSrc = (it) => { if (!it || typeof it.render !== 'function') return null; try { const el = it.render(); // RealScreenshot is a component; inspect its props (name or fullSrc). if (el && el.props) { const typeName = el.type && (el.type.displayName || el.type.name); if (typeName === 'RealScreenshot' || el.props.src) { const full = el.props.fullSrc || el.props.src; if (full) return {src: full, alt: el.props.alt || ''}; } } // Fallback: walk for an . const walk = (node) => { if (!node) return null; if (node.type === 'img' && node.props && node.props.src) return {src: node.props.src, alt: node.props.alt || ''}; const kids = node.props && node.props.children; if (!kids) return null; const arr = Array.isArray(kids) ? kids : [kids]; for (const k of arr) { const r = walk(k); if (r) return r; } return null; }; return walk(el); } catch { return null; } }; return (
{items.map((it, i) => { const real = getRealSrc(it); return (
setLightbox({src: real.src, alt: real.alt, title: it.title}) : undefined} className={real ? 'os-real-card' : ''} style={{ width: cardW, height: cardH, background:'#eeeae2', borderRadius:14, overflow:'hidden', cursor: real ? 'zoom-in' : 'default', position:'relative', }} > {(() => { const inner = typeof it.render === 'function' ? it.render() : it.render; // Scale 520×325-designed content to fit the actual card size. const scale = cardW / CARD_W; if (scale === 1) return inner; return (
{inner}
); })()} {real && (
⤢ VIEW
)}
{it.title}
{it.desc}
); })}
{String(idx+1).padStart(2,'0')} / {String(items.length).padStart(2,'0')}
go(-1)} accent={accent}/> go(1)} accent={accent}/>
{lightbox && (
setLightbox(null)} style={{ position:'fixed', inset:0, zIndex:100, background:'rgba(12,11,10,0.88)', backdropFilter:'blur(18px)', WebkitBackdropFilter:'blur(18px)', display:'flex', alignItems:'center', justifyContent:'center', padding:'clamp(20px, 4vw, 60px)', cursor:'zoom-out', animation:'lbFade 220ms cubic-bezier(.2,.7,.2,1)', }} >
e.stopPropagation()} > {lightbox.alt}
{lightbox.title}
)}
); } function CarouselArrow({ dir, disabled, onClick, accent, onDark }) { const [hover, setHover] = React.useState(false); const idle = onDark ? '#f4ecdc' : PAGE_INK; const idleLine = onDark ? 'rgba(244,236,220,0.28)' : PAGE_LINE; const idleLineDisabled = onDark ? 'rgba(244,236,220,0.12)' : 'rgba(28,26,23,0.08)'; const disabledCol = onDark ? 'rgba(244,236,220,0.35)' : PAGE_INK_MUTE; return ( ); } // ──────────────────────────────────────────────── // FeatureIcon — a small, calm line-icon set. Simple geometric strokes only, // matching the site's minimal language. Inherits color via currentColor. // ──────────────────────────────────────────────── function FeatureIcon({ name, size = 26 }) { const stk = { fill:'none', stroke:'currentColor', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round' }; const dot = { fill:'currentColor', stroke:'none' }; const ICONS = { dashboard: ( ), list: ( ), heart: ( ), spark: ( ), timeline: ( ), target: ( ), box: ( ), key: ( ), cycle: ( ), receipt: ( ), book: ( ), waveform: ( ), note: ( ), plug: ( ), cap: ( ), mic: ( ), calendar: ( ), clock: ( ), trend: ( ), chart: ( ), doc: ( ), chat: ( ), contacts: ( ), checkbox: ( ), }; return ( {ICONS[name] || ICONS.dashboard} ); } // ──────────────────────────────────────────────── // FeatureGrid — static icon + title + description grid. // Replaces the screenshot carousel for the pre-launch site: same content // (title + desc), no app imagery. Each card's `icon` names a FeatureIcon. // The original `render` functions are left untouched in the data so real // screenshots can be reinstated at launch. // ──────────────────────────────────────────────── function FeatureGrid({ items, accent }) { return (
{items.map((it, i) => (
{it.title}
{it.desc}
))}
); } // ──────────────────────────────────────────────── // Footer // ──────────────────────────────────────────────── function NewsletterForm() { const [email, setEmail] = React.useState(''); const [status, setStatus] = React.useState('idle'); // idle | submitted const [focus, setFocus] = React.useState(false); const submit = async (e) => { e.preventDefault(); if (!email || !/\S+@\S+\.\S+/.test(email) || status === 'sending') return; setStatus('sending'); const note = `A new subscriber has signed up for the ComposerOS newsletter:\n${email}`; try { await submitToWeb3Forms({ access_key: WEB3FORMS_NEWSLETTER_KEY, subject: 'ComposerOS — Newsletter signup', from_name: 'ComposerOS Website', email, message: note, }); setStatus('submitted'); } catch (_) { // Fallback: hand off to the visitor's email client if the POST fails. const subject = encodeURIComponent('ComposerOS — Newsletter signup'); const body = encodeURIComponent(note); window.location.href = `mailto:newsletter@nemmgroup.ltd?subject=${subject}&body=${body}`; setStatus('submitted'); } }; return (
Newsletter
Tips, tricks, and what's next. Composer OS features explained, workflow shortcuts, and early access to upcoming releases. Monthly insights for power users.
{status === 'submitted' ? (
Thanks — you're on the list.
We'll be in touch.
) : (
setEmail(e.target.value)} onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)} placeholder="you@studio.com" aria-label="Email address" style={{ flex:1, background:'transparent', border:'none', outline:'none', color:'#f2efe8', fontSize:16, padding:'10px 0', fontFamily:'inherit', letterSpacing:-0.1, }} />
)}
); } // ── Contact modal — footer/main-page palette (ink + ivory + ochre) ── function FooterContactModal({ open, onClose }) { const ivory = '#f2efe8'; const ochre = '#c9a876'; const [form, setForm] = React.useState({ name:'', email:'', role:'Composer', message:'' }); const [sent, setSent] = React.useState(false); const [sending, setSending] = React.useState(false); const dialogRef = React.useRef(null); React.useEffect(() => { if (!open) return; const onKey = e => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; setTimeout(() => { dialogRef.current && dialogRef.current.querySelector('input')?.focus(); }, 60); return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; }; }, [open, onClose]); React.useEffect(() => { if (open) setSent(false); }, [open]); if (!open) return null; const set = k => e => setForm(f => ({ ...f, [k]: e.target.value })); const valid = form.name.trim() && /\S+@\S+\.\S+/.test(form.email) && form.message.trim(); const submit = async e => { e.preventDefault(); if (!valid || sending) return; setSending(true); try { await submitToWeb3Forms({ subject: `Contact — ${form.name} (${form.role})`, from_name: form.name, email: form.email, role: form.role, message: form.message, }); setSent(true); } catch (_) { const subject = encodeURIComponent(`[${form.role}] ComposerOS — ${form.name}`); const body = encodeURIComponent(`Name: ${form.name}\nEmail: ${form.email}\nRole: ${form.role}\n\n${form.message}`); window.location.href = `mailto:info@nemmgroup.ltd?subject=${subject}&body=${body}`; setSent(true); } setSending(false); }; const field = { width:'100%', padding:'12px 14px', borderRadius:10, boxSizing:'border-box', background:'rgba(242,239,232,0.05)', border:'1px solid rgba(242,239,232,0.16)', color:ivory, fontSize:15, fontFamily:"'Inter Tight',system-ui,-apple-system,BlinkMacSystemFont,sans-serif", outline:'none', transition:'border-color 150ms, background 150ms', }; const label = { fontSize:11, fontFamily:"'JetBrains Mono',monospace", letterSpacing:1, textTransform:'uppercase', color:'rgba(242,239,232,0.55)', marginBottom:7, display:'block' }; const onFoc = e => { e.target.style.borderColor = ochre; e.target.style.background = 'rgba(242,239,232,0.08)'; }; const onBlur = e => { e.target.style.borderColor = 'rgba(242,239,232,0.16)'; e.target.style.background = 'rgba(242,239,232,0.05)'; }; return (
{ if (e.target === e.currentTarget) onClose(); }} style={{position:'fixed', inset:0, zIndex:300, display:'flex', alignItems:'center', justifyContent:'center', padding:20, background:'rgba(16,14,12,0.7)', backdropFilter:'blur(6px)', WebkitBackdropFilter:'blur(6px)', animation:'cos-fade 180ms ease'}}>
{sent ? (

Message sent.

Thanks — we've received your message and will be in touch. Prefer email? Reach us at{' '} info@nemmgroup.ltd.

) : (
Contact

Write to us.

Tell us a little about you and what's on your mind. We read every message.