// nda-panels.jsx — WorksPanel · ServicesPanel · ProcessPanel · AboutPanel · ResultsPanel · FAQPanel · StackPanel · ContactPanel · PanelFooter const { useState, useRef, useEffect } = React; /* ── Works Panel ───────────────────────────────────────────────────── */ const WORKS = [ { name: 'Lume Clinic', tags: 'Web Design · Branding', role: 'Design Lead', platform: 'Mockup', live: true, href: 'https://lumi-clinic.netlify.app/', color: '#1a1727' }, { name: 'Maison Aesthetic', tags: 'Web Design', role: 'Design Lead', platform: 'Mockup', live: true, href: 'https://maison-aesthetic.netlify.app/', color: '#1c1421' }, { name: 'Kuro Clinic', tags: 'Web Design', role: 'Design Lead', platform: 'Mockup', live: true, href: 'https://kuro-clinic.netlify.app/', color: '#111623' }, { name: 'Elevate IV SF', tags: 'Web Design', role: 'VA · Web Build', platform: 'Squarespace', live: true, href: 'https://www.elevateivsf.com/', color: '#0f1a1c' }, { name: 'Leary Law Offices', tags: 'Web Maintenance', role: 'VA · Web Support', platform: 'Squarespace', live: true, href: 'https://learylawoffices.com/', color: '#12141a' }, { name: 'Stanley Keleman', tags: 'Web Support', role: 'VA · Web Support', platform: 'Squarespace', live: true, href: 'https://www.stanleykeleman.com/', color: '#151210' }, { name: 'Youth Experience Sponsorship', tags: 'Web Design', role: 'Web Build', platform: 'WordPress', live: true, href: 'https://youthexperiencesponsorship.org/', color: '#1a1520' }, { name: 'Coming Soon', tags: 'Automation', role: '', platform: '', live: false, href: undefined, color: '#111018' }, { name: 'Coming Soon', tags: 'Full System', role: '', platform: '', live: false, href: undefined, color: '#111018' }]; function WorksPanel() { const { SlidePanel, TextRoll } = window; return ( What we've built.} num="02"> ); } /* ── Services Panel ────────────────────────────────────────────────── */ const SERVICES = [ { num: '01', title: 'Brand Design', body: 'Visual identity systems built for aesthetic practices. Logos, color, typography, and the premium look that converts.', tags: ['Logo Design', 'Color System', 'Brand Guide'] }, { num: '02', title: 'Websites', body: 'Conversion-focused sites that load fast and turn visitors into booked appointments. Squarespace and custom HTML/CSS.', tags: ['Squarespace', 'Custom HTML/CSS', 'Mobile-First'] }, { num: '03', title: 'Automation', body: 'Lead capture, follow-up sequences, booking systems, and intake flows that keep your clinic running without manual work.', tags: ['Make.com', 'n8n', 'Booking Systems'] }, { num: '04', title: 'Systems', body: 'Forms, CRMs, calendars, and email tools wired together so nothing falls through the cracks in a clinical setting.', tags: ['CRM Setup', 'Calendar Sync', 'Intake Forms'] }]; function ServicesPanel() { const { SlidePanel } = window; return ( Four skills. One studio.} num="03">
{SERVICES.map((s) =>
e.currentTarget.style.background = 'rgba(12,11,18,.8)'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--surface)'}>
{s.title} {s.num}

{s.body}

{s.tags.map((t) => {t})}
)}
); } /* ── Process Panel ─────────────────────────────────────────────────── */ const PROCESS = [ { id: 1, num: '01', tag: 'Discovery', title: 'Understand your practice', body: 'Deep-dive call to map your clinic, clients, and lead losses. No templates. Just a clear picture of what needs building.' }, { id: 2, num: '02', tag: 'Design', title: 'Build the visual system', body: 'Brand and website designed to match the caliber of your practice. From type scale to booking flow.' }, { id: 3, num: '03', tag: 'Build', title: 'Develop and automate', body: 'Dev and automation run in parallel. Site goes live while the backend gets built. CRM, follow-ups, and booking wired up automatically.' }, { id: 4, num: '04', tag: 'Launch', title: 'Go live and hand off', body: 'QA, performance check, and launch. Full docs, training, and 30 days of support. Nothing gets lost post-handoff.' }, ]; function ProcessIcon({ tag }) { const s = 'var(--cream)', a = 'var(--violet)', sw = '1.8'; const b = { fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' }; if (tag === 'Discovery') return ( ); if (tag === 'Design') return ( ); if (tag === 'Build') return ( ); if (tag === 'Launch') return ( ); return null; } function ProcessPanel() { const { SlidePanel } = window; const [activeId, setActiveId] = useState(1); const [rotAngle, setRotAngle] = useState(0); const [autoRot, setAutoRot] = useState(true); const timerRef = useRef(null); const activeStep = PROCESS.find(s => s.id === activeId); useEffect(() => { clearInterval(timerRef.current); if (!autoRot) return; timerRef.current = setInterval(() => { setRotAngle(prev => (prev + 0.25) % 360); }, 50); return () => clearInterval(timerRef.current); }, [autoRot]); const getPos = (index, total) => { const angle = ((index / total) * 360 + rotAngle) % 360; const rad = (angle * Math.PI) / 180; const R = 118; return { x: R * Math.cos(rad), y: R * Math.sin(rad), zIndex: Math.round(100 + 50 * Math.cos(rad)), opacity: Math.max(0.42, Math.min(1, 0.42 + 0.58 * ((1 + Math.sin(rad)) / 2))), }; }; const pick = (id) => { setActiveId(id); setAutoRot(false); }; const resume = () => setAutoRot(true); return ( The process.} num="05">
{/* ── Orbit canvas ── */}
{/* Orbit ring */}
{/* Center orb — click to resume */}
{/* Nodes */} {PROCESS.map((step, i) => { const pos = getPos(i, PROCESS.length); const on = activeId === step.id; return (
pick(step.id)} style={{ position: 'absolute', top: 'calc(50% - 24px)', left: 'calc(50% - 24px)', transform: `translate(${pos.x}px, ${pos.y}px)`, zIndex: on ? 200 : pos.zIndex, opacity: on ? 1 : pos.opacity, transition: 'opacity .25s', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
{step.tag}
); })}
{/* ── Step info ── */} {activeStep && (
{activeStep.num} {activeStep.tag}
{activeStep.title}

{activeStep.body}

{/* Step dots */}
{PROCESS.map(s => (

{autoRot ? '◉ AUTO-ROTATING' : '◎ PAUSED · CLICK ORB TO RESUME'}

)}
); } /* ── Results Panel (About + Proof) ────────────────────────────────── */ const GRAPH_PTS = [3, 4, 4, 6, 9, 8, 12, 16, 14, 20, 25, 29, 36]; function MiniGraph() { const max = Math.max(...GRAPH_PTS); const W = 360,H = 80; const pts = GRAPH_PTS.map((v, i) => ({ x: i / (GRAPH_PTS.length - 1) * W, y: H - 6 - v / max * (H - 16) })); let d = `M ${pts[0].x} ${pts[0].y}`; for (let i = 1; i < pts.length; i++) {const cx = (pts[i - 1].x + pts[i].x) / 2;d += ` C ${cx} ${pts[i - 1].y} ${cx} ${pts[i].y} ${pts[i].x} ${pts[i].y}`;} const last = pts[pts.length - 1]; return ( ); } function ResultsPanel() { const { SlidePanel } = window; const circ = 2 * Math.PI * 18; const scores = [['Performance', 100], ['Accessibility', 100], ['Best Practices', 100], ['SEO', 100]]; return ( Built for wellness, by design.} num="04">
{/* Left: studio story + stats */}

LIWAN is a boutique studio working exclusively with wellness brands. Medspas, IV clinics, functional medicine, aesthetic practices. One lane. Deep pattern recognition.

{[['12+', 'Projects'], ['100%', 'Wellness'], ['2026', 'Founded']].map(([v, l]) =>
{v}
{l}
)}
Client lead growth after launch +210%
{/* Right: lighthouse rings + key metrics */}
3×
Consultation requests
48h
Time to first lead
Google Lighthouse. Live.
{scores.map(([name, val]) => { const dash = val / 100 * circ; return (
{val}
{name}
); })}
); } /* ── Contact Panel ─────────────────────────────────────────────────── */ function ContactPanel() { const { SlidePanel, ShinyBtn } = window; const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [sendError, setSendError] = useState(false); const [form, setForm] = useState({ name: '', email: '', practice: '', practiceType: '', hasWebsite: '', platform: '', needs: [], message: '', consent: false }); const set = (k, v) => setForm((p) => ({ ...p, [k]: v })); const submitForm = async (e) => { e.preventDefault(); if (sending) return; setSending(true); setSendError(false); try { const res = await fetch('https://formsubmit.co/ajax/nathan.virtualassistance@gmail.com', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ _subject: `New project inquiry: ${form.practice || form.name}`, _template: 'table', Name: form.name, Email: form.email, 'Practice name': form.practice, 'Practice type': form.practiceType, 'Has website': form.hasWebsite, 'Current platform': form.platform, 'Needs help with': form.needs.join(', '), Message: form.message, }), }); if (!res.ok) throw new Error('send failed'); setSent(true); } catch (err) { setSendError(true); } finally { setSending(false); } }; const ALL_NEEDS = ['Web Design', 'Brand Design', 'Automation']; const allNeeds = ALL_NEEDS.every((v) => form.needs.includes(v)); const toggleNeed = (val) => setForm((p) => ({ ...p, needs: p.needs.includes(val) ? p.needs.filter((n) => n !== val) : [...p.needs, val] })); const toggleAllNeeds = () => setForm((p) => ({ ...p, needs: ALL_NEEDS.every((v) => p.needs.includes(v)) ? [] : [...ALL_NEEDS] })); return ( Start a project.} num="10">
{/* Left: info */}

Ready to build something that glows? Fill in the form and we will get back to you within one business day.

{[['Email', 'nathan.virtualassistance@gmail.com', true], ['Based in', 'Philippines. Remote worldwide.', false], ['Response', 'Within 1 business day', false]].map(([label, val, isLink]) => )}
{/* Right: form */}
{sent ?
✓
Message received.
We will be in touch within one business day.
:
set('name', e.target.value)} required aria-label="Name" /> set('email', e.target.value)} required aria-label="Email" />
set('practice', e.target.value)} required aria-label="Practice name" />
Do you have a current website?
{['Yes', 'No'].map((opt) => )}
{form.hasWebsite === 'Yes' && set('platform', e.target.value)} aria-label="Current platform" /> }
What do you need help with?
{ALL_NEEDS.map((opt) => )}