const { ArrowRight, ArrowUpRight, Phone, Mail, MapPin, Clock, Users, GraduationCap, CreditCard, Calendar, Globe, Workflow, Sparkles, Check, X: XIcon, Menu, Slash, Heart, Instagram, Linkedin, Github, Twitter, LayoutDashboard, Inbox, BarChart3, Settings, ChevronRight, Play, Send, MousePointer2, FileText, User, ChevronDown, Building2, LogIn, LogOut, MonitorPlay, Home, Library: LibraryIcon, Plus, Video, MessageCircle, Lock, Loader2 } = require('lucide-react') ; /* ───────────────────────────────────────────────────────────────────────────── * INSUBORD — Multi-Page Template v3 (pragmatic rewrite) * ───────────────────────────────────────────────────────────────────────────── * * Design philosophy: * - Compact. Hero fits in one viewport. Sections breathe but don't sprawl. * - Honest scale. Type maxes at ~64px headlines, not 100px. We're an SMB * platform, not a Series C company. * - Boring on purpose. Standard Tailwind text sizes that always render. * Where we need responsive scaling, we use inline `style.fontSize` with * clamp() — never Tailwind arbitrary `text-[clamp(...)]`, which the * section extractor in Wilson sometimes strips. * - Self-contained Nav/Footer. Every constant they touch is defined INSIDE * the function so the extractor can lift them out without losing data * references and crashing at runtime. * * Pages (exported, one per route): * HomePage / Hero → Modules → AppShowcase → PricingTeaser → CTA * PlatformPage /platform PageHero → ModulesDetailed → AppShowcase → CTA * ForAgenciesPage /for-agencies PageHero → AgencyValueProps → AgencyTier → CTA * PricingPage /pricing PageHero → PricingTiers → Replaces → FAQ → CTA * AboutPage /about PageHero → OriginStory → Manifesto → FounderNote → CTA * ContactPage /contact PageHero → ContactCards → CTA(formOnly) * * Chrome (Nav + Footer) at the bottom are reference globals — Wilson extracts * them as separate global sections during import. * * Forms: onSubmit posts to /api/form-submissions with formId='__REPLACE_FORM_ID__'. * Wilson's importer creates the Payload form and rewrites the placeholder. * * Deps: tailwindcss v3+, lucide-react. React hooks are factory-injected. * ───────────────────────────────────────────────────────────────────────── */ /* ───── Brand tokens ─────────────────────────────────────────────────────── */ const c = { bg: '#0A0A0C', bg2: '#111114', surface: '#16171B', surface2: '#1C1D22', line: 'rgba(255,255,255,0.08)', line2: 'rgba(255,255,255,0.14)', ink: '#F5F5F7', inkM: '#A1A1AA', inkS: '#71717A', red: '#FF3D45', redSoft: 'rgba(255,61,69,0.12)', green: '#37D399', }; /* ───── Content data ─────────────────────────────────────────────────────── */ const brand = { name: 'INSUBORD', tagline: 'One platform to run your whole business.', }; const contact = { phone: '239-555-0029', phonePretty: '239 · 555 · 0029', email: 'hello@insubord.app', location: 'Built in Florida · Used everywhere', }; const navRoutes = [ { label: 'Platform', href: '/platform' }, { label: 'For Agencies', href: '/for-agencies' }, { label: 'Pricing', href: '/pricing' }, { label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }, ]; const modules = [ { icon: Users, title: 'Customers', blurb: 'Every lead, client, and conversation in one list.', points: ['Every contact in one place', 'Notes that stay with the person', 'Nothing falls through the cracks'] }, { icon: GraduationCap, title: 'Courses', blurb: 'Sell programs and run a members area, no extra tool.', points: ['Lessons released on a schedule', 'Members-only areas', 'Video built in'] }, { icon: CreditCard, title: 'Payments', blurb: 'Subscriptions, one-time, invoices — built in.', points: ['Recurring + one-time charges', 'Send invoices', 'Receipts handled automatically'] }, { icon: Mail, title: 'Marketing', blurb: 'Email + text from your business, to the right people.', points: ['Email + SMS campaigns', 'Sends from your business name', 'No separate email tool'] }, { icon: Calendar, title: 'Bookings', blurb: 'Clients self-schedule. Reminders go out automatically.', points: ['Share a booking link', 'Syncs to your calendar', 'Automatic reminders'] }, { icon: Globe, title: 'Website', blurb: 'A real site on your domain that you can edit.', points: ['Your own domain', 'Edit it yourself, no code', 'Forms feed your customer list'] }, { icon: Workflow, title: 'Automations',blurb: 'Follow-ups, welcomes, and reminders that just run.', points: ['Welcome messages', 'Payment retries', 'Set once, forget it'] }, ]; const tiers = [ { name: 'Operator', price: 297, cadence: 'per month', highlight: true, tagline: 'Everything to run one business.', features: [ 'All 7 parts of the platform', 'Your own website + domain', 'Your own white-label mobile app', 'Wilson, the built-in AI helper', 'We migrate you from your old tools', 'Cancel anytime · No long contracts', ], cta: 'Get started', }, { name: 'Agency', price: 497, cadence: 'per month', tagline: "Run every client's business from one place.", features: [ 'Everything in Operator', 'A separate space for each client', 'Each client gets their own app + domain', 'Your branding everywhere', 'We migrate every client for you', 'A direct line to the founder', ], cta: 'Get started', }, ]; const replaces = [ 'Your website builder', 'Your booking link', 'Your email marketing tool', 'Your course platform', 'Your payments + invoicing', 'The automation glue', ]; const faqs = [ { q: 'Do I have to set up Stripe or Twilio myself?', a: 'No. Payments, email, and texts are built into the platform. You will not be sent off to configure third-party tools.' }, { q: 'I already have a website. Do I lose it?', a: 'You rebuild it inside Insubord on your own domain — usually better than what you had. We help you do it.' }, { q: 'Can I really get my own mobile app?', a: 'Yes — on every plan. Your business, your name, on your customer\'s phone. Not an expensive upgrade.' }, { q: 'What if I want to leave?', a: 'You take your data with you, anytime. We earn the renewal every month.' }, { q: 'I am not technical. Is this for me?', a: 'Especially for you. If you can use your phone, you can run Insubord. Wilson walks you through setup.' }, ]; const agencyFeatures = [ { title: 'A space for every client', body: 'Each client gets their own workspace, login, and domain. You see everything from one place.' }, { title: 'Every client gets an app', body: 'Not just you. Every client you run can have their own branded mobile app.' }, { title: 'Your brand on everything', body: 'Clients see your agency, not Insubord. The whole platform wears your name.' }, { title: 'We migrate every client', body: 'Switching a book of business is the scary part. We do it before you flip the switch.' }, ]; const manifesto = [ 'We refuse to make you the glue between tools that should have talked to each other.', 'We refuse to send you off to set up Stripe, Twilio, or anything with a developer\'s name on it.', 'We refuse to lock the polished version, or your own app, behind a tier you can\'t afford yet.', 'We refuse to hold your data hostage. It\'s yours.', ]; /* ───────────────────────────────────────────────────────────────────────── * PAGE EXPORTS — composition only * ───────────────────────────────────────────────────────────────────────── */ function HomePage() { return ( <> ); } function PlatformPage() { return ( <> One app.
Your whole business.} lead="Seven parts of running a business — built as one connected thing, not seven apps you have to wire together." /> ); } function ForAgenciesPage() { return ( <> Run every client
from one place.} lead="Each client gets their own workspace and their own branded app — all under your agency, all on one bill." /> ); } function PricingPage() { return ( <> One bill.
Everything included.} lead="No add-ons for things that should have been included. No surprises." /> ); } function AboutPage() { return ( <> Built by someone
tired of the chaos too.} lead="A one-person shop building the platform small business owners were promised and never got." /> ); } export default function ContactPage() { return ( <> Let's see if
this is for you.} lead="Have a question before signing up? Send us a note and we'll get back to you within a day." /> ); } /* ───────────────────────────────────────────────────────────────────────── * START — checkout route. /start?plan=operator&billing=monthly lands here * from the pricing tier CTAs. Non-conflicting with the JGPH /checkout * Next.js file route, so JGPH's flow stays untouched. * * Flow: * 1. URL params (?plan=&billing=) → choose product * 2. Fetch /api/lms/products for the tenant → resolve product + price * 3. Auth gate (signup or signin) via /api/users/me * 4. POST /api/lms/checkout → returns Square applicationId/locationId * 5. Load Square Web Payments SDK from CDN, mount card field inline * 6. Submit → tokenize card → POST /api/lms/checkout/square-payment * 7. On success → redirect to /portal * ───────────────────────────────────────────────────────────────────────── */ function StartPage() { const params = (() => { if (typeof window === 'undefined') return { plan: '', billing: 'monthly' as 'monthly' | 'annual' }; const sp = new URLSearchParams(window.location.search); return { plan: (sp.get('plan') || '').toLowerCase(), billing: (sp.get('billing') === 'annual' ? 'annual' : 'monthly') as 'monthly' | 'annual', }; })(); const [user, setUser] = useState(null); const [authLoading, setAuthLoading] = useState(true); const [product, setProduct] = useState(null); const [productError, setProductError] = useState(null); const [authMode, setAuthMode] = useState<'signup' | 'signin'>('signup'); const [authName, setAuthName] = useState(''); const [authEmail, setAuthEmail] = useState(''); const [authPassword, setAuthPassword] = useState(''); const [authError, setAuthError] = useState(null); const [authBusy, setAuthBusy] = useState(false); const [checkoutData, setCheckoutData] = useState(null); const [checkoutError, setCheckoutError] = useState(null); const [sdkReady, setSdkReady] = useState(false); const [cardReady, setCardReady] = useState(false); const [paying, setPaying] = useState(false); const [paySuccess, setPaySuccess] = useState(false); const cardContainerRef = useRef(null); const cardRef = useRef(null); const walletContainerRef = useRef(null); const [walletReady, setWalletReady] = useState(false); const loadUser = async () => { try { const res = await fetch('/api/users/me', { credentials: 'include', cache: 'no-store' }); const data = await res.json().catch(() => null); setUser(data && data.id ? data : null); } catch { setUser(null); } finally { setAuthLoading(false); } }; useEffect(() => { loadUser(); }, []); useEffect(() => { let cancelled = false; (async () => { try { const tenantHint = typeof window !== 'undefined' ? new URLSearchParams(window.location.search).get('tenant') : null; const qp = new URLSearchParams({ active: 'true', limit: '50' }); if (tenantHint) qp.set('tenant', tenantHint); const res = await fetch(`/api/lms/products?${qp.toString()}`, { credentials: 'include' }); const data = await res.json().catch(() => ({})); if (cancelled) return; const list: any[] = Array.isArray(data?.products) ? data.products : []; const nameLC = params.plan; let found = nameLC ? list.find((p) => String(p?.name || '').toLowerCase().includes(nameLC)) : null; if (!found && list.length) found = list[0]; if (!found) { setProductError('No product configured yet. Sync your products in the office to enable checkout.'); return; } setProduct(found); } catch { if (!cancelled) setProductError('Failed to load product details.'); } })(); return () => { cancelled = true; }; }, [params.plan]); const submitAuth = async () => { setAuthError(null); if (!authEmail || !authPassword) { setAuthError('Email and password required.'); return; } setAuthBusy(true); try { const endpoint = authMode === 'signup' ? '/api/users/register-member' : '/api/users/login'; const body = authMode === 'signup' ? { email: authEmail, password: authPassword, name: authName } : { email: authEmail, password: authPassword }; const res = await fetch(endpoint, { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err?.error || err?.message || 'Authentication failed'); } await loadUser(); } catch (e: any) { setAuthError(e?.message || 'Authentication failed'); } finally { setAuthBusy(false); } }; useEffect(() => { if (!user?.id || !product) return; let cancelled = false; (async () => { setCheckoutError(null); try { const res = await fetch('/api/lms/checkout', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: user.id, plan: params.plan || undefined, billing: params.billing, productId: product?.id && !String(product.id).startsWith('plan-') ? product.id : undefined, quantity: 1, successPath: '/portal', cancelPath: typeof window !== 'undefined' ? window.location.pathname + window.location.search : '/start', metadata: { email: user.email, name: user.name }, }), }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data?.error || `Checkout init failed (${res.status})`); if (data?.provider !== 'square') { throw new Error('This page expects Square as the payment provider.'); } if (cancelled) return; setCheckoutData(data); } catch (e: any) { if (!cancelled) setCheckoutError(e?.message || 'Could not initialize checkout'); } })(); return () => { cancelled = true; }; }, [user?.id, product?.id, params.plan, params.billing]); useEffect(() => { if (!checkoutData?.squareApplicationId) return; const isSandbox = !!checkoutData.isSandbox; const src = isSandbox ? 'https://sandbox.web.squarecdn.com/v1/square.js' : 'https://web.squarecdn.com/v1/square.js'; if ((window as any).Square) { setSdkReady(true); return; } const existing = document.querySelector(`script[src="${src}"]`); if (existing) { existing.addEventListener('load', () => setSdkReady(true)); return; } const s = document.createElement('script'); s.src = src; s.async = true; s.onload = () => setSdkReady(true); s.onerror = () => setCheckoutError('Failed to load Square SDK'); document.head.appendChild(s); }, [checkoutData?.squareApplicationId, checkoutData?.isSandbox]); useEffect(() => { if (!sdkReady || !(window as any).Square) return; if (!checkoutData?.squareApplicationId || !checkoutData?.squareLocationId) return; if (!cardContainerRef.current || cardRef.current) return; let cancelled = false; const t = checkoutData.theme || {}; const fieldStyle = { '.input-container': { borderColor: t.inputBorder || 'rgba(255,255,255,0.12)', borderRadius: '6px' }, '.input-container.is-focus': { borderColor: t.accentColor || c.red }, '.input-container.is-error': { borderColor: t.errorColor || '#ef4444' }, '.message-text': { color: t.placeholderColor || 'rgba(255,255,255,0.5)' }, '.message-icon': { color: t.placeholderColor || 'rgba(255,255,255,0.5)' }, '.message-text.is-error': { color: t.errorColor || '#ef4444' }, '.message-icon.is-error': { color: t.errorColor || '#ef4444' }, input: { backgroundColor: t.inputBackground || 'rgba(255,255,255,0.04)', color: t.inputColor || c.ink, // Square's Web Payments SDK restricts fontFamily to a short list // of accepted families — 'system-ui' and arbitrary stacks are // rejected. 'helvetica neue, sans-serif' is the same value the // existing SquarePaymentForm uses and Square accepts it. fontFamily: 'helvetica neue, sans-serif', fontSize: '15px', }, 'input::placeholder': { color: t.placeholderColor || 'rgba(255,255,255,0.4)' }, 'input.is-error': { color: t.errorColor || '#ef4444' }, }; (async () => { try { const payments = await (window as any).Square.payments( checkoutData.squareApplicationId, checkoutData.squareLocationId, ); const card = await payments.card({ style: fieldStyle }); if (cancelled) return; await card.attach(cardContainerRef.current); cardRef.current = card; setCardReady(true); } catch (e: any) { if (!cancelled) setCheckoutError(e?.message || 'Could not mount card field'); } })(); return () => { cancelled = true; try { cardRef.current?.destroy(); } catch {} cardRef.current = null; }; }, [sdkReady, checkoutData?.squareApplicationId, checkoutData?.squareLocationId]); // ── Apple Pay / Google Pay ───────────────────────────────────────── // Square exposes wallets via the same `payments.paymentRequest()` API. // Try Google Pay first, fall back to Apple Pay. If neither is available // (desktop browser without a wallet, no merchant wallet config, etc.) // the section is just hidden — the card field is the primary path. useEffect(() => { if (!sdkReady || !(window as any).Square) return; if (!checkoutData?.squareApplicationId || !checkoutData?.squareLocationId) return; if (!walletContainerRef.current) return; const amount = checkoutData?.price?.amount || 0; if (amount === 0) return; // wallets require a non-zero amount let cancelled = false; let walletInstance: any = null; let clickHandler: (() => Promise) | null = null; const handleWalletToken = async (tokenResult: any) => { if (tokenResult.status !== 'OK') return; setPaying(true); setCheckoutError(null); try { const res = await fetch('/api/lms/checkout/square-payment', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sourceId: tokenResult.token, productId: checkoutData?.product?.id || product?.id, amount: checkoutData?.price?.amount || 0, currency: checkoutData?.price?.currency || 'USD', billing: params.billing, userId: user?.id, email: user?.email, name: user?.name, mode: checkoutData?.mode || 'subscription', itemName: checkoutData?.itemName, }), }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data?.error || `Payment failed (${res.status})`); setPaySuccess(true); setTimeout(() => { window.location.href = '/portal'; }, 900); } catch (e: any) { setCheckoutError(e?.message || 'Payment failed'); } finally { setPaying(false); } }; (async () => { try { const payments = await (window as any).Square.payments( checkoutData.squareApplicationId, checkoutData.squareLocationId, ); const paymentRequest = payments.paymentRequest({ countryCode: 'US', currencyCode: (checkoutData?.price?.currency || 'USD').toUpperCase(), total: { amount: (amount / 100).toFixed(2), label: checkoutData?.itemName || 'Subscription', }, }); // Try Google Pay first try { const googlePay = await payments.googlePay(paymentRequest); if (cancelled) return; await googlePay.attach(walletContainerRef.current!); walletInstance = googlePay; clickHandler = async () => { const tokenResult = await googlePay.tokenize(); handleWalletToken(tokenResult); }; walletContainerRef.current!.onclick = clickHandler; setWalletReady(true); return; } catch { /* fall through to Apple Pay */ } // Apple Pay fallback try { const applePay = await payments.applePay(paymentRequest); if (cancelled) return; await applePay.attach(walletContainerRef.current!); walletInstance = applePay; clickHandler = async () => { const tokenResult = await applePay.tokenize(); handleWalletToken(tokenResult); }; walletContainerRef.current!.onclick = clickHandler; setWalletReady(true); } catch { /* no wallet available — card field is the primary path */ } } catch { /* non-fatal */ } })(); return () => { cancelled = true; try { walletInstance?.destroy?.(); } catch {} if (walletContainerRef.current) walletContainerRef.current.onclick = null; }; }, [sdkReady, checkoutData?.squareApplicationId, checkoutData?.squareLocationId, checkoutData?.price?.amount, checkoutData?.price?.currency, checkoutData?.itemName, product?.id, params.billing, user?.id, user?.email, user?.name]); const submitPayment = async () => { if (!cardRef.current || paying) return; setPaying(true); setCheckoutError(null); try { const tokenResult = await cardRef.current.tokenize(); if (tokenResult.status !== 'OK') { throw new Error(tokenResult.errors?.[0]?.message || 'Card tokenization failed'); } const res = await fetch('/api/lms/checkout/square-payment', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sourceId: tokenResult.token, productId: checkoutData?.product?.id || product?.id, amount: checkoutData?.price?.amount || 0, currency: checkoutData?.price?.currency || 'USD', billing: params.billing, userId: user?.id, email: user?.email, name: user?.name, mode: checkoutData?.mode || 'subscription', itemName: checkoutData?.itemName, }), }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data?.error || `Payment failed (${res.status})`); setPaySuccess(true); setTimeout(() => { window.location.href = '/portal'; }, 900); } catch (e: any) { setCheckoutError(e?.message || 'Payment failed'); } finally { setPaying(false); } }; const dollars = (checkoutData?.price?.amount || 0) / 100; const intervalLabel = checkoutData?.price?.interval || (params.billing === 'annual' ? 'year' : 'month'); const formattedTotal = dollars > 0 ? new Intl.NumberFormat('en-US', { style: 'currency', currency: checkoutData?.price?.currency || 'USD' }).format(dollars) : '—'; const productName = checkoutData?.itemName || product?.name || (params.plan || 'Subscription'); return (

Checkout

Get the platform running today.

Charged today. We set you up, migrate your data from your old tools, and have you running inside the week.

{!authLoading && !user && (

Step 1 of 2

{authMode === 'signup' ? 'Create your account' : 'Sign in to continue'}

{authMode === 'signup' && ( setAuthName(e.target.value)} className="w-full rounded px-3 py-2.5 text-sm outline-none" style={{ background: c.bg2, border: `1px solid ${c.line2}`, color: c.ink }} /> )} setAuthEmail(e.target.value)} className="w-full rounded px-3 py-2.5 text-sm outline-none" style={{ background: c.bg2, border: `1px solid ${c.line2}`, color: c.ink }} /> setAuthPassword(e.target.value)} className="w-full rounded px-3 py-2.5 text-sm outline-none" style={{ background: c.bg2, border: `1px solid ${c.line2}`, color: c.ink }} /> {authError &&

{authError}

}

)} {user && (

Step 2 of 2 · Payment

Card details

Encrypted

{/* Apple Pay / Google Pay — Square auto-detects which wallet the visitor's browser/device supports. Hidden if neither is available so it doesn't render an empty slot. */}

{walletReady && (

or pay by card

)}

{!cardReady && !checkoutError && (

Loading secure card field…

)} {checkoutError &&

{checkoutError}

}

Charged today · Cancel anytime · No long contracts

)}

Order summary

{!product && !productError &&

Loading plan…

} {productError &&

{productError}

} {product && ( <>

{productName}

{formattedTotal}

Billed {intervalLabel === 'year' ? 'annually' : 'monthly'} · Charged today

{Array.isArray(product?.features) && product.features.length > 0 && (

{text}

)}

PCI-compliant · Tokenized · No card data stored

)}

); } /* ───────────────────────────────────────────────────────────────────────── * PAGE HERO — interior pages (smaller than home Hero by design) * ───────────────────────────────────────────────────────────────────────── */ function PageHero({ eyebrow, title, lead, }: { eyebrow: string; title: React.ReactNode; lead: string; }) { return ( // overflow-hidden so the InteractiveDots canvas can't overflow the // section bounds when its parent is the first thing on the page.

{eyebrow}

{title}

{lead}

); } /* ───────────────────────────────────────────────────────────────────────── * HERO (home) — compact, fits in viewport * ───────────────────────────────────────────────────────────────────────── */ function Hero() { return ( // overflow-hidden on the section so anything that bleeds past the right // viewport edge doesn't create a horizontal scrollbar. // min-h on lg+ ensures the section is tall enough for the absolutely // positioned mock — otherwise the mock can overflow the section vertically // when the text content is short.

{/* On-load animation for the hero mock. Cinematic feel: long duration + deep ease-out curve (Apple-style cubic-bezier) + bigger slide distance + staged opacity so the fade lingers behind the motion. Keyframes inlined so the section travels self-contained through Wilson's extractor. The desktop variant keeps translateY(-50%) in every frame to preserve vertical centering after settling. */} {/* Text column lives in the centered max-w-7xl container; the mock is positioned absolutely OUTSIDE the container so it can reach the actual viewport right edge with no padding gap. The text column has an explicit max-width so it never reflows into the mock's territory on wide screens. ⚠ pointer-events-none on the container because its box spans the full max-w-7xl width and physically overlaps the absolutely- positioned mock on the right — without this it intercepts clicks meant for the dashboard's interactive sidebar tabs. The inner text child re-enables pointer events for its CTAs/links. */}

One platform · One bill

Running a business
shouldn't feel
this hard.

One platform that runs all of it — website, payments, clients, bookings, even your own app. Built for the operator doing it themselves.

Get started See how it works

Migrate from your old tools · Cancel anytime

{/* Mobile/tablet — mock stacks below the text in the normal flow. Same on-load fade+slide as the desktop variant, just without the translateY centering trick. */}

{/* Desktop mock — anchored to the section's (= viewport's) right edge with NO padding. Width scales with viewport via min() but is sized a touch smaller than the visible space so there's a comfortable gap (~50-130px depending on screen) between the headline column and the mock's left edge. Cap at 960 so it doesn't dominate ultrawides. The animation's `to` state preserves translateY(-50%) so vertical centering is maintained after it settles — that's why the keyframes are inlined as `insHeroMockIn` rather than relying on a plain transform. We DON'T set a fallback `transform: translateY(-50%)` on the inline style: the animation has `both` fill mode so the 0%/100% transforms cover the whole timeline, and a stale inline transform can compete with the animated transform for the same property and (in some browsers) leave the element in a "post-animation" state where pointer-events behave oddly. Explicit `pointerEvents: 'auto'` + `isolation: 'isolate'` and a much higher zIndex make absolutely sure clicks on the dashboard sidebar tabs reach the buttons. */}

); } /** * DashboardMock — the hero's right-column visual. * * Mirrors the real /office shell: left sidebar with brand badge + workspace * label + nav, right pane with breadcrumb header, greeting, KPI strip, and * an activity feed. Cycles gently every ~7s so it feels alive without being * noisy. Wilson's nudge rotates on its own slower cadence. * * Visual language matches src/app/(app)/office/components/OfficeLayout.tsx — * surface bg #16171B, sidebar #111114, 28×28 accent badge, 13px brand name, * 10px uppercase "Workspace" label, small icon-led nav rows. */ function DashboardMock() { var initialFeed = [ { id: 'a', icon: Calendar, text: 'Sarah K. booked Fri 3pm', time: '2m' }, { id: 'b', icon: CreditCard, text: 'Marco paid $97', time: '8m' }, { id: 'c', icon: Users, text: 'New lead from /contact', time: '14m' }, { id: 'd', icon: Mail, text: 'Welcome sequence sent (x3)', time: '1h' }, ]; var incomingPool = [ { icon: CreditCard, text: 'Jordan paid $97', metric: 'paid', delta: 97 }, { icon: Calendar, text: 'Alex booked Mon 10am', metric: 'booked', delta: 1 }, { icon: Users, text: 'New lead from /pricing', metric: 'leads', delta: 1 }, { icon: CreditCard, text: 'Renewal: Maya, $297', metric: 'paid', delta: 297 }, { icon: Calendar, text: 'Priya booked Wed 4pm', metric: 'booked', delta: 1 }, { icon: Users, text: 'New lead from Instagram', metric: 'leads', delta: 1 }, { icon: Mail, text: 'Course Week 2 sent (x42)', metric: null }, { icon: CreditCard, text: 'Devon paid $97', metric: 'paid', delta: 97 }, ]; var nudgePool = [ <>Two payments failed — want me to send reminders?, <>Thursday is quiet on the calendar — email your waitlist?, <>Welcome series open rate is 64% — send a win-back to lapsed?, <>Five leads from /pricing this week — draft a follow-up sequence?, ]; // Office-style nav — clickable, swaps the right pane. var navItems = [ { icon: LayoutDashboard, label: 'Overview' }, { icon: Users, label: 'People' }, { icon: CreditCard, label: 'Payments' }, { icon: Calendar, label: 'Calendar' }, { icon: Mail, label: 'Marketing' }, { icon: Globe, label: 'Site' }, { icon: BarChart3, label: 'Intelligence' }, ]; const [activeTab, setActiveTab] = useState('Overview'); const [feed, setFeed] = useState(initialFeed); const [leads, setLeads] = useState(6); const [booked, setBooked] = useState(4); const [paid, setPaid] = useState(1240); const [flash, setFlash] = useState(''); const [nudgeIdx, setNudgeIdx] = useState(0); useEffect(function () { if (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; } var i = 0; var n = 0; var seq = 0; var iv = setInterval(function () { var next = incomingPool[i % incomingPool.length]; i++; seq++; var newItem = { id: 'new-' + seq, icon: next.icon, text: next.text, time: 'just now' }; setFeed(function (prev) { return [newItem].concat(prev.slice(0, 3)); }); if (next.metric === 'paid') { setPaid(function (v) { return v + next.delta; }); setFlash('paid'); } if (next.metric === 'booked') { setBooked(function (v) { return v + next.delta; }); setFlash('booked'); } if (next.metric === 'leads') { setLeads(function (v) { return v + next.delta; }); setFlash('leads'); } if (next.metric === null) setFlash(''); setTimeout(function () { setFlash(''); }, 700); // Wilson nudge rotates every 3 ticks (~21s) — slower so it doesn't compete. if (i % 3 === 0) { n++; setNudgeIdx(n % nudgePool.length); } }, 7000); return function () { clearInterval(iv); }; }, []); const fmtPaid = '$' + paid.toLocaleString(); const stats = [ { v: String(leads), k: 'NEW LEADS', trend: '+' + Math.min(leads - 4, 9), up: leads > 4, key: 'leads' }, { v: String(booked), k: 'BOOKED', trend: booked > 4 ? '+' + (booked - 4) : '—', up: booked > 4, key: 'booked' }, { v: fmtPaid, k: 'PAID', trend: '+' + Math.round(((paid - 1050) / 1050) * 100) + '%', up: paid > 1050, key: 'paid' }, ]; return (

{/* ─── Window chrome — title bar + browser tab + URL pill ───────────── */}

{/* Title bar — traffic lights + URL pill */}

{/* Traffic lights */}

{/* URL pill — centered. flex-1 on either side keeps it true-centered. */}

your-business.com/office/{activeTab.toLowerCase()}

{/* Right-side window menu dot (placeholder for parity with the lights) */}

{/* Browser tab strip — single active tab, with a sibling "+ New" */}

{/* Favicon — the brand red square */} I {activeTab} · Your Business

{/* + new tab affordance */} +

{/* ─── Office shell — sidebar + main ────────────────────────────────── */}

{/* ─── Sidebar ────────────────────────────────────────────────────── */}

{/* Brand area — mirrors brandAreaStyle from OfficeLayout.tsx */}

Your Business

Workspace

{/* Nav */}

{/* Bottom: settings */}

Settings

{/* ─── Main pane ──────────────────────────────────────────────────── */}

{/* Header — breadcrumb + live indicator + avatar */}

Office {activeTab}

Live M

{/* Content — per-tab panels, re-keyed so a soft fade plays on switch. Fixed minHeight prevents the window from resizing as you switch between tabs with different row counts. */}

{/* Page eyebrow + title (same shape across tabs) */}

{tabMeta[activeTab].eyebrow}

{tabMeta[activeTab].title}

{/* Panel body */} {activeTab === 'Overview' && ( <>

{stats.map((s) => { const isFlashing = flash === s.key; return (

{s.k}

{s.v}

{s.up && } {s.trend}

); })}

{feed.map(function (a, idx) { return ( {a.text} {a.time} ); })}

Wilson: {nudgePool[nudgeIdx]}

)} {activeTab === 'People' && ( <>

{[ { initial: 'S', name: 'Sarah Kim', meta: 'Booked Fri 3pm', pill: 'Active', tone: 'green' }, { initial: 'M', name: 'Marco Vélez', meta: 'Paid $97 · 8m ago', pill: 'Active', tone: 'green' }, { initial: 'P', name: 'Priya Shah', meta: 'Joined 2 days ago', pill: 'New', tone: 'red' }, { initial: 'D', name: 'Devon Lee', meta: 'Course Week 2', pill: 'Active', tone: 'green' }, { initial: 'A', name: 'Alex Park', meta: 'Card expiring', pill: 'At risk', tone: 'amber' }, ].map((p, idx, arr) => (

{p.name}

{p.meta}

{p.pill} ))}

)} {activeTab === 'Payments' && ( <>

{[ { name: 'Maya Ortiz', meta: 'Renewal · Operator', amt: '+$297', tone: 'green', time: '2m' }, { name: 'Jordan Reed', meta: 'One-time · Workshop', amt: '+$97', tone: 'green', time: '14m' }, { name: 'Casey Bloom', meta: 'Card declined', amt: '—', tone: 'red', time: '1h' }, { name: 'Devon Lee', meta: 'Subscription', amt: '+$97', tone: 'green', time: '3h' }, { name: 'Riley Chen', meta: 'Refund issued', amt: '−$45', tone: 'amber', time: '5h' }, ].map((t, idx, arr) => (

{t.name}

{t.meta}

{t.amt} {t.time} ))}

)} {activeTab === 'Calendar' && ( <>

{[ { time: '9:00', client: 'Sarah Kim', type: 'Coaching · 45m' }, { time: '11:30', client: 'Marco Vélez', type: 'Intro call · 30m' }, { time: '2:00', client: 'Priya Shah', type: 'Strategy · 60m' }, { time: '4:30', client: 'Devon Lee', type: 'Check-in · 30m' }, ].map((b, idx, arr) => ( {b.time}

{b.client}

{b.type}

Confirmed ))}

)} {activeTab === 'Marketing' && ( <>

{[ { name: 'Welcome sequence', meta: 'Email · automated', open: 0.71, sent: '142' }, { name: 'Spring promo · 20% off', meta: 'Email + SMS', open: 0.58, sent: '286' }, { name: 'Win-back lapsed', meta: 'Email · 1-time', open: 0.42, sent: '34' }, ].map((m, idx, arr) => (

{m.name}

{m.meta} · {m.sent} sent

{Math.round(m.open * 100)}%

))}

)} {activeTab === 'Site' && ( <>

{[ { path: '/', title: 'Home', views: '742' }, { path: '/pricing', title: 'Pricing', views: '218' }, { path: '/about', title: 'About', views: '164' }, { path: '/contact', title: 'Contact', views: '96' }, { path: '/programs', title: 'Programs', views: '64' }, ].map((p, idx, arr) => (

{p.title}

{p.path}

Live {p.views} ))}

)} {activeTab === 'Intelligence' && ( <>

{[ { name: 'MRR to $6,000', pct: 0.71, status: 'On track', tone: 'green' }, { name: '50 active subscribers', pct: 0.84, status: 'On track', tone: 'green' }, { name: 'Course completion 60%', pct: 0.42, status: 'Behind', tone: 'amber' }, ].map((g, idx, arr) => (

{g.name}

{g.status} {Math.round(g.pct * 100)}%

))}

Wilson: Course completion is the lagging metric — schedule a week-2 nudge?

)}

); } /* ───── DashboardMock — small inline panel helpers ──────────────────────── */ const tabMeta: Record = { Overview: { eyebrow: 'Today · Tue Mar 18', title: 'Overview' }, People: { eyebrow: '248 customers', title: 'People' }, Payments: { eyebrow: 'March · 18 days in', title: 'Payments' }, Calendar: { eyebrow: 'Today · Tue Mar 18', title: 'Calendar' }, Marketing: { eyebrow: '3 active campaigns', title: 'Marketing' }, Site: { eyebrow: 'your-business.com', title: 'Site' }, Intelligence: { eyebrow: 'Q2 · 18 days in', title: 'Intelligence' }, }; function PanelHeader({ left, right }: { left: string; right: string }) { return (

{left} {right}

); } function MiniKpis({ items }: { items: { k: string; v: string }[] }) { return (

{items.map((s) => (

{s.k}

{s.v}

))}

); } function RowFrame({ children, last, animate }: { children: any; last?: boolean; animate?: boolean }) { return (

{children}

); } function RowIcon({ icon: Ico }: { icon: any }) { return ( ); } function Avatar({ initial }: { initial: string }) { return ( {initial} ); } function Pill({ children, tone }: { children: any; tone: string }) { const colors: Record = { green: { bg: 'rgba(55,211,153,0.12)', fg: c.green }, red: { bg: 'rgba(255,61,69,0.12)', fg: c.red }, amber: { bg: 'rgba(245,158,11,0.12)', fg: '#F59E0B' }, }; const t = colors[tone] || colors.green; return ( {children} ); } /* ───────────────────────────────────────────────────────────────────────── * MODULES — clean 7-up grid (no deep-dive strips) * ───────────────────────────────────────────────────────────────────────── */ /** * Modules — a feature spotlight, not a static grid. * - Left rail: compact list of all 7 module names (numbered, with icons). * - Right panel: detail of the currently-focused module — big icon, title, * description, three capability bullets. * - Auto-advances every ~3.8s. * - Pauses on hover anywhere in the section so the visitor can read. * - Hovering any list item snaps focus to that module. * - Active list item gets a red rail and a thin progress bar that fills over * the auto-advance interval. Both reset on every change. * - Detail panel re-keys on activeIdx so a CSS fade-in plays on each switch. * - On mobile: list becomes a horizontal row above the detail panel. */ function Modules() { // Scroll-driven activation. On every scroll frame, find the tab whose // marker is CLOSEST to the viewport's vertical center and set that one // active. This replaces a narrow-band IntersectionObserver — IO fires // per-target on threshold crossings, and during a fast scroll those // crossings can arrive out of order or be missed entirely, leaving the // chrome window stuck on the wrong tab. Scanning every frame and // picking the nearest marker means activeIdx always matches whatever's // visually in the middle of the viewport, regardless of scroll speed. const [activeIdx, setActiveIdx] = useState(0); const tabRefs = useRef>([]); useEffect(() => { if (typeof window === 'undefined') return; let rafId = 0; function pickActive() { rafId = 0; const refs = tabRefs.current; if (!refs || refs.length === 0) return; const viewportCenter = window.innerHeight / 2; let closestIdx = 0; let closestDist = Infinity; for (let i = 0; i < refs.length; i++) { const el = refs[i]; if (!el) continue; // marker is 1px at top:50% inside the tab box, so rect.top is // effectively the marker's vertical position in the viewport const rect = el.getBoundingClientRect(); const dist = Math.abs(rect.top - viewportCenter); if (dist < closestDist) { closestDist = dist; closestIdx = i; } } // Functional update skips re-render when nothing changed setActiveIdx((prev) => (prev === closestIdx ? prev : closestIdx)); } function onScroll() { // rAF-throttle: at most one pickActive per animation frame, so a // 120Hz wheel input or trackpad burst can't queue 100 calls if (rafId) return; rafId = window.requestAnimationFrame(pickActive); } window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); // Pick once on mount so the initial activeIdx matches whatever is // already centered (handles direct-link / deep scroll cases) pickActive(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (rafId) window.cancelAnimationFrame(rafId); }; }, []); const active = modules[activeIdx]; const ActiveIcon = active.icon; return (

What it does Seven parts of one business.
Not seven apps. They already know about each other. A booking becomes a customer becomes a payment — without you touching anything. {/* Scroll-driven split. Each tab on the left is a tall (80vh) block; as the user scrolls past it, IntersectionObserver flips activeIdx and the sticky browser window on the right transitions its preview to match. On mobile the sticky column is hidden — tabs render as a simple stacked list. */}

{/* Left column — scrolling tabs */}

{modules.map((m, i) => { const Icon = m.icon; const isActive = i === activeIdx; return (

block above (150vh on md+ via a // real CSS @media query). Tailwind arbitrary classes // like md:min-h-[150vh] were being stripped by the // Wilson section extractor, so the tabs collapsed to // natural height and switching felt instant. // First tab uses the `-first` variant (80vh) so its // text is visible the moment the section starts. // `relative` is needed so the absolute marker (below) // can position itself against the tab box. className={(i === 0 ? 'ins-modules-tab-first' : i === modules.length - 1 ? 'ins-modules-tab-last' : 'ins-modules-tab') + ' relative flex items-center py-16 md:py-0'} > {/* Activation marker — invisible 1px element pinned to the vertical center of the tab box. The Intersection- Observer watches THIS, not the outer box. That way activeIdx changes when the tab's TEXT reaches the viewport center (because flex items-center puts the content at the box center too) — instead of firing when the box edge enters the band, which was ~75vh ahead of the visible content. */}

{ tabRefs.current[i] = el; }} aria-hidden="true" style={{ position: 'absolute', top: '50%', left: 0, width: 1, height: 1, pointerEvents: 'none', }} />

{String(i + 1).padStart(2, '0')} / 07

{m.title}

{m.blurb}

); })}

{/* Right column — sticky browser window. Hidden on mobile (no sticky behavior on small screens; tabs alone tell the story). */}

{/* Window chrome — title bar + browser tab. Patterned after the DashboardMock chrome so the visual language matches. */}

{/* Title bar — traffic lights + URL pill */}

your-business.com/office/{active.title.toLowerCase()}

{/* Browser tab strip — single active tab whose label updates with the active module, plus an inert + new-tab affordance. */}

I {active.title} · Your Business

{/* Detail panel — now fills the full chrome width since the left rail / numbered list has moved OUTSIDE the window into the scrolling tabs column (see new outer split layout). */}

{/* Title bar — single row, browser-titlebar-like. Icon + name + thin separator + blurb inline. Compact so the preview below owns the rest of the panel. */}

{active.title}

{active.blurb}

{/* Visual preview — different per module. Patterned after the actual office workbenches (PeopleWorkbench, CoursesStudio, PaymentsWorkbench, MarketingDashboard, CalendarWorkbench, SiteDashboard, WorkflowsWorkbench) so this section reads as a screenshot of the product, not a marketing diagram. */}

{/* ─── 0. Customers ─── matches PeopleWorkbench data rows ─── */} {activeIdx === 0 && (

{/* Filter chip strip — mirrors OfficeFilterBar */}

{[ { label: 'All', count: 248, active: true }, { label: 'Customers', count: 184, active: false }, { label: 'Leads', count: 38, active: false }, { label: 'Trialing', count: 14, active: false }, { label: 'Past due', count: 3, active: false }, ].map((f) => ( {f.label} {f.count} ))}

{/* Data rows */}

{[ { initial: 'SK', name: 'Sarah Kim', email: 'sarah@kimstudio.co', lifecycle: 'Customer', tone: 'green', tier: 'VIP', tags: ['vip', 'coaching'], meta: 'Booked Fri 3pm' }, { initial: 'MV', name: 'Marco Vélez', email: 'marco.velez@gmail.com', lifecycle: 'Customer', tone: 'green', tier: 'Premium', tags: ['returning'], meta: 'Paid $97 · 8m ago' }, { initial: 'PS', name: 'Priya Shah', email: 'priya@shahworks.com', lifecycle: 'Lead', tone: 'amber', tier: null, tags: ['/pricing'], meta: 'New · 1h ago' }, { initial: 'DL', name: 'Devon Lee', email: 'd.lee@protonmail.com', lifecycle: 'Customer', tone: 'green', tier: 'Basic', tags: ['course'], meta: 'Course wk 2' }, { initial: 'AP', name: 'Alex Park', email: 'alex.p@parkfit.io', lifecycle: 'At risk', tone: 'amber', tier: 'Premium', tags: ['card-expiring'], meta: 'Past due · 2d' }, { initial: 'JR', name: 'Jordan Reed', email: 'jordan.reed@outlook.com',lifecycle: 'Customer', tone: 'green', tier: 'Basic', tags: ['workshop'], meta: 'Joined 2w ago' }, { initial: 'MO', name: 'Maya Ortiz', email: 'm.ortiz@workmail.io', lifecycle: 'Customer', tone: 'green', tier: 'VIP', tags: ['founding'], meta: 'Renewal $297' }, ].map((p, idx, arr) => (

{p.initial}

{p.name}

{p.email}

{/* Tags */}

{p.tags.slice(0, 1).map((t) => ( {t} ))}

{/* Tier */} {p.tier && ( {p.tier === 'VIP' ? '⚡' : p.tier === 'Premium' ? '♛' : '★'} {p.tier} )} {/* Lifecycle pill */} {p.lifecycle}

))}

)} {/* ─── 1. Courses ─── matches CoursesStudio (Lessons / Courses tabs) ─── */} {activeIdx === 1 && (

{/* Tab strip — Lessons / Courses */}

{[ { label: 'Lessons', count: 24, active: false }, { label: 'Courses', count: 4, active: true }, ].map((t) => ( ))}

{/* Course rows — title | lessons count | status pill | updated */}

{[ { title: 'Six-Week Foundations', lessons: 8, members: 248, status: 'Published', tone: 'green', updated: '2d ago' }, { title: 'Advanced Form', lessons: 6, members: 142, status: 'Published', tone: 'green', updated: '5d ago' }, { title: 'Recovery & Mobility', lessons: 4, members: 67, status: 'Draft', tone: 'neutral', updated: '1w ago' }, { title: 'Nutrition Basics', lessons: 5, members: 0, status: 'Draft', tone: 'neutral', updated: '2w ago' }, { title: 'Mindset for Athletes', lessons: 7, members: 89, status: 'Published', tone: 'green', updated: '3w ago' }, { title: 'Group Programming · Q2', lessons: 12, members: 34, status: 'Published', tone: 'green', updated: '1mo ago' }, ].map((cr, idx, arr) => (

{cr.title}

{cr.lessons} lessons · {cr.members} members

{cr.status} {cr.updated}

))}

)} {/* ─── 2. Payments ─── matches PaymentsWorkbench Subscribers tab ─── */} {activeIdx === 2 && (

{/* Tab strip — Subscribers / Transactions / Refunds / Disputes */}

{[ { label: 'Subscribers', count: 184, active: true }, { label: 'Transactions', count: 412, active: false }, { label: 'Refunds', count: 2, active: false }, { label: 'Disputes', count: 0, active: false }, ].map((t) => ( {t.label} {t.count > 0 && {t.count}} ))}

{/* Metric strip */}

{[ { k: 'MRR', v: '$4,287' }, { k: 'ACTIVE', v: '184' }, { k: 'PAST DUE', v: '3' }, ].map((m) => (

{m.k}

{m.v}

))}

{/* Subscriber rows */}

{[ { name: 'Maya Ortiz', plan: 'Operator · monthly', amt: '$297', status: 'Active', tone: 'green' }, { name: 'Jordan Reed', plan: 'Operator · monthly', amt: '$297', status: 'Trialing', tone: 'blue' }, { name: 'Devon Lee', plan: 'Operator · monthly', amt: '$297', status: 'Active', tone: 'green' }, { name: 'Sarah Kim', plan: 'Operator · annual', amt: '$2,970', status: 'Active', tone: 'green' }, { name: 'Marco Vélez', plan: 'Operator · monthly', amt: '$297', status: 'Active', tone: 'green' }, { name: 'Casey Bloom', plan: 'Operator · monthly', amt: '$297', status: 'Past due', tone: 'amber' }, ].map((s, idx, arr) => (

{s.name}

{s.plan}

{s.amt} {s.status}

))}

)} {/* ─── 3. Marketing ─── matches MarketingDashboard pipeline widget ─── */} {activeIdx === 3 && (

{/* Pipeline stage bar chart — the signature visual */}

Pipeline $28,400 total

{[ { stage: 'New', count: 14, value: 4200, color: '#3b82f6', max: 14 }, { stage: 'Contacted', count: 9, value: 5400, color: '#8b5cf6', max: 14 }, { stage: 'Qualified', count: 6, value: 7200, color: '#f59e0b', max: 14 }, { stage: 'Proposal', count: 3, value: 8900, color: '#14b8a6', max: 14 }, { stage: 'Negotiation', count: 2, value: 2700, color: '#ec4899', max: 14 }, ].map((s) => (

{s.stage}

{s.count} ${s.value.toLocaleString()}

))}

{/* Recent deals — matches MarketingDashboard recent deals strip */}

Recent deals

{[ { name: 'Priya Shah', stage: 'New → Contacted', value: 297, time: '2m', color: '#8b5cf6' }, { name: 'Marco Vélez', stage: 'Qualified → Proposal', value: 497, time: '34m', color: '#14b8a6' }, { name: 'Devon Lee', stage: 'Proposal → Negotiation', value: 1240, time: '2h', color: '#ec4899' }, { name: 'Casey Bloom', stage: 'Negotiation → Won', value: 2970, time: '5h', color: '#22c55e' }, ].map((d, idx, arr) => (

{d.name}

{d.stage}

${d.value.toLocaleString()} {d.time}

))}

)} {/* ─── 4. Bookings ─── matches CalendarWorkbench week view, with event-type colors ─── */} {activeIdx === 4 && (

{/* Tiny toolbar — month/week/day */}

March 17 – 23

{['Month', 'Week', 'Day'].map((v, i) => ( {v} ))}

{/* Week grid with actual event chips (color-coded per event type) */}

{[ { day: 'MON', date: '17', events: [ { label: '9:00a Sarah K · Coaching', color: '#14b8a6' }, { label: '11a Team standup', color: '#f59e0b' }, { label: '2:00p Marco · Check-in', color: '#14b8a6' }, { label: '4:30p Send weekly emails', color: '#3b82f6' }, ] }, { day: 'TUE', date: '18', events: [ { label: '9:00a Devon · Intro', color: '#14b8a6' }, { label: '11:30a Priya · Strategy', color: '#14b8a6' }, { label: '1p New client kickoff', color: '#f59e0b' }, { label: '4:30p Sarah · Follow-up', color: '#14b8a6' }, { label: 'Review Q1 numbers', color: '#8b5cf6' }, ] }, { day: 'WED', date: '19', events: [ { label: 'Launch · Spring program', color: '#22c55e' }, { label: '2:00p Priya · Strategy', color: '#14b8a6' }, { label: '5:30p Group session', color: '#14b8a6' }, ] }, { day: 'THU', date: '20', events: [ { label: '10a Group · Foundations', color: '#14b8a6' }, { label: '12p Lunch · Maya', color: '#f59e0b' }, { label: '3p Review · Q1 retrospectiv', color: '#8b5cf6' }, { label: 'Send invoice batch', color: '#eab308' }, ] }, { day: 'FRI', date: '21', events: [ { label: '3:00p Sarah K · Coaching', color: '#14b8a6' }, { label: 'Post · IG carousel', color: '#ec4899' }, { label: '5p Wrap & shutdown', color: '#3b82f6' }, ] }, { day: 'SAT', date: '22', events: [ { label: '9a Group class', color: '#14b8a6' }, ] }, { day: 'SUN', date: '23', events: [] }, ].map((d, idx) => (

{d.day} {d.date}

{d.events.map((e, ei) => (

{e.label}

))}

)} {/* ─── 5. Website ─── matches SiteDashboard pages widget ─── */} {activeIdx === 5 && (

{/* Metric strip */}

{[ { k: 'PAGES', v: '6' }, { k: 'POSTS', v: '14' }, { k: 'PUBLISHED', v: '17' }, { k: 'DOMAINS', v: '1' }, ].map((m) => (

{m.k}

{m.v}

))}

{/* Pages widget — matches SiteDashboard layout */}

Pages ● your-business.com

{[ { title: 'Home', slug: '/', status: 'published', updated: '2d ago' }, { title: 'Pricing', slug: '/pricing', status: 'published', updated: '5d ago' }, { title: 'About', slug: '/about', status: 'published', updated: '1w ago' }, { title: 'Programs', slug: '/programs', status: 'draft', updated: '3h ago' }, { title: 'Contact', slug: '/contact', status: 'published', updated: '2w ago' }, { title: 'Testimonials', slug: '/reviews', status: 'published', updated: '3w ago' }, { title: 'Spring promo', slug: '/spring', status: 'draft', updated: '1h ago' }, ].map((p, idx, arr) => (

{p.title} {p.slug} {p.status} {p.updated}

))}

{/* Domain status strip */}

your-business.com

Primary · SSL active · DNS verified

Live

)} {/* ─── 6. Automations ─── matches WorkflowsWorkbench trigger→action chain ─── */} {activeIdx === 6 && (

{/* Workflow header — name + status */}

Welcome new customers · edited 3d ago

Active

{/* Flow chain — uses actual workflow trigger/action types & colors */}

{[ // Colors pulled from src/app/(app)/office/marketing/workflows/constants.ts { label: 'Payment Succeeded', sub: 'Trigger', icon: CreditCard, color: '#22c55e' }, { label: 'Send Welcome Email',sub: 'Action', icon: Mail, color: '#14b8a6' }, { label: 'Wait 2 days', sub: 'Delay', icon: Clock, color: '#6366f1' }, { label: 'If lesson done?', sub: 'Condition', icon: Check, color: '#8b5cf6' }, { label: 'Add tag · onboarded',sub: 'Action', icon: Sparkles, color: '#f59e0b' }, ].flatMap((n, idx, arr) => { const NIcon = n.icon; const out: any[] = [

{n.label}

{n.sub}

, ]; if (idx < arr.length - 1) { out.push(

); } return out; })}

{/* Run log — recent executions, mirrors workflow run history */}

Recent runs 12 today · 184 this month

{[ { contact: 'Maya Ortiz', step: 'Sent welcome email', state: 'done', time: '2m' }, { contact: 'Jordan Reed', step: 'Waiting 2 days', state: 'running', time: '14m' }, { contact: 'Devon Lee', step: 'Added tag · onboarded', state: 'done', time: '1h' }, { contact: 'Sarah Kim', step: 'Sent welcome email', state: 'done', time: '3h' }, ].map((r, idx, arr) => (

{r.state === 'done' ? ( ) : ( )}

{r.contact}

{r.step}

{r.state} {r.time}

))}

)}

{/* close chrome wrapper (rounded-xl + window shadow) */}

{/* close sticky wrapper */}

{/* close right col (md:col-span-7) */}

{/* close outer split grid */}

Walk through the platform

); } function ModulesDetailed() { return (

{modules.map((m, i) => (

{String(i + 1).padStart(2, '0')}

{m.title}

{m.blurb}

))}

); } /* ───────────────────────────────────────────────────────────────────────── * APP SHOWCASE — the differentiator, single clean composition * ───────────────────────────────────────────────────────────────────────── */ function AppShowcase() { return (

Your own app Your business.
On their home screen.

Insubord gives you your own branded app — your logo, your name, one tap from your client's home screen. They book, message, and open courses inside your app, not a stranger's website.

No app-store review queue, no separate native build. They add it to their phone in one tap on iPhone or Android, and updates push instantly. Included on every plan.

iPhone + Android
One-tap install
Updates instantly

); } /** * PhoneFrame — dynamic mock of the actual JGPH-style portal. * * Cycles through Home → Library → Reviews → Chat every ~4.5s, with the * matching bottom nav tab highlighting in teal. Each "page" is a compact * facsimile of the real portal screen: * - Home welcome screen — message + glass card. * - Library matches a Netflix-style course tile grid. * - Reviews matches /portal/reviews — video tiles. * - Chat matches /portal/chat — conversation list with unread dots. * * Bottom nav matches src/components/MobileBottomNav.tsx — four tabs around * a center FAB lifted above the bar. Teal-400 active state with a small dot * indicator below the icon, exactly like the real portal nav. * * Everything (cycle timer, page render, nav) is self-contained inside this * function so Wilson's section extractor can lift the component cleanly. */ function PhoneFrame() { const W = 240; const ASPECT = 2.05; const RADIUS = 36; const BEZEL = 9; const innerRadius = RADIUS - BEZEL; // Palette — the file's own brand tokens (red/black/gray) instead of // JGPH's teal/emerald. Same layout/feel as the real portal mock, just // rethemed so this section reads as Insubord's product, not a client's. const ACCENT = c.red; // #FF3D45 — active text/icon, FAB const ACCENT_DEEP = '#D62932'; // darker red for FAB gradient tail const ACCENT_GLOW = 'rgba(255,61,69,0.18)'; // soft red wash behind the screen const ACCENT_SOFT = 'rgba(255,61,69,0.12)'; // red chip / pill background const GLASS_BG = 'rgba(255,255,255,0.04)'; const GLASS_BORDER = 'rgba(255,255,255,0.08)'; // Phase machine: intro (homescreen → opening → loading) plays once when // the phone scrolls into view, then the in-app page cycle runs forever. type Phase = 'homescreen' | 'opening' | 'loading' | 'home' | 'library' | 'reviews' | 'chat'; const [active, setActive] = useState('homescreen'); const containerRef = useRef(null); const [hasStarted, setHasStarted] = useState(false); // Viewport gate: defer the intro until the phone is actually on screen. // Without this, the brand-app open animation plays while the user is // still reading the hero — they never see it. useEffect(() => { if (typeof window === 'undefined') return; const el = containerRef.current; if (!el || !('IntersectionObserver' in window)) { setHasStarted(true); return; } const obs = new IntersectionObserver( (entries) => { if (entries[0] && entries[0].isIntersecting) { setHasStarted(true); obs.disconnect(); } }, { threshold: 0.4 }, // wait until ~40% of the phone is in view ); obs.observe(el); return () => obs.disconnect(); }, []); useEffect(() => { if (!hasStarted || typeof window === 'undefined') return; // Reduced-motion: jump straight to the app's home page, skip the intro if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setActive('home'); return; } // FULL loop — homescreen + open + load + 4 app pages, then back to // homescreen, forever. Each step has its own dwell time. After the // last page (chat), we restart the entire intro so the user always // sees the "tap to open" story play out. const sequence: Array<{ phase: Phase; duration: number }> = [ { phase: 'homescreen', duration: 3000 }, // see the apps { phase: 'opening', duration: 700 }, // brand icon zooms up { phase: 'loading', duration: 1000 }, // splash with logo { phase: 'home', duration: 4500 }, // welcome { phase: 'library', duration: 4500 }, { phase: 'reviews', duration: 4500 }, { phase: 'chat', duration: 4500 }, ]; let i = 0; let timerId: ReturnType | null = null; setActive(sequence[0].phase); const advance = () => { i = (i + 1) % sequence.length; setActive(sequence[i].phase); timerId = setTimeout(advance, sequence[i].duration); }; timerId = setTimeout(advance, sequence[0].duration); return () => { if (timerId) clearTimeout(timerId); }; }, [hasStarted]); // Whether we're past the intro and on an actual app page const isAppPage = active === 'home' || active === 'library' || active === 'reviews' || active === 'chat'; return (

{/* Inline keyframes — page swap fade + intro sequence (homescreen → opening → loading → app). Inlined here so the section travels self-contained through Wilson's extractor. */} {/* Side buttons */}

{/* Chrome */}

{/* Screen */}

{/* Red radial glow inside the app — atmospheric mood-light effect, teal mood-light, just rethemed. Suppressed during the intro (homescreen/opening/loading) so the OS shell reads as a neutral phone, not "already inside the app". */} {isAppPage && (

)} {/* Status bar */}

9:41

{/* Dynamic island */}

{/* Page content — swaps based on `active`. On intro phases the bottom nav is hidden, so paddingBottom shrinks to give the home-screen / splash content more room. */}

{/* ───── HOMESCREEN — iOS-style app grid with the brand app LIVING IN the grid as one of the apps (with a tap-hint ring), not as a separate dock tile. ───── */} {active === 'homescreen' && (

{/* Page header date — small iOS-style mock */}

TUESDAY, MAR 18

9:41

{/* 4×3 app grid (12 apps total — Your Brand is one of them, placed centrally so it's clearly part of the page). Other apps fade out via insHomeIconsOut just before the open transition fires; the brand stays so it can scale up. */}

{[ { label: 'Phone', bg: '#22c55e', icon: Phone, iconColor: '#fff', brand: false }, { label: 'Messages', bg: '#22c55e', icon: MessageCircle, iconColor: '#fff', brand: false }, { label: 'Mail', bg: '#3b82f6', icon: Mail, iconColor: '#fff', brand: false }, { label: 'Calendar', bg: '#fff', icon: Calendar, iconColor: c.red, brand: false }, { label: 'Photos', bg: '#0a0a0a', icon: Sparkles, iconColor: '#fff', brand: false }, { label: 'Your Brand', bg: '', icon: Heart, iconColor: '#fff', brand: true }, { label: 'Maps', bg: '#22c55e', icon: MapPin, iconColor: '#fff', brand: false }, { label: 'Clock', bg: '#0a0a0a', icon: Clock, iconColor: '#fff', brand: false }, { label: 'Notes', bg: '#fbbf24', icon: FileText, iconColor: '#000', brand: false }, { label: 'Music', bg: '#ef4444', icon: Play, iconColor: '#fff', brand: false }, { label: 'Health', bg: '#fff', icon: Heart, iconColor: '#ef4444', brand: false }, { label: 'Settings', bg: '#71717a', icon: Settings, iconColor: '#fff', brand: false }, ].map((app) => { const Ico = app.icon; return (

{/* Icon container — relative wrapper so the tap ring can sit at inset:0 without needing translateX. */}

{app.brand ? ( // Custom-business app icon: bold "YB" monogram // instead of a generic Heart. Reads like a real // small-biz app tile (e.g. "MyGym", "YouFit") — // the gradient + monogram pattern is how most // custom-branded coach/trainer apps look on // iOS today. YB ) : ( )}

{/* Tap-hint ripple — covers the icon exactly via inset:0, expands outward via insTapRing. */} {app.brand && ( )}

{app.label}

); })}

)} {/* ───── OPENING — brand icon scales up to fill the screen ───── */} {active === 'opening' && (

)} {/* ───── LOADING — brand splash with logo + pulsing dots. Logo sized so the pulse (1.06×) + box-shadow glow stays well inside the screen edges. ───── */} {active === 'loading' && (

Your Brand

{/* Three pulsing dots */}

{[0, 1, 2].map((i) => ( ))}

)} {/* ───── HOME — welcome card with greeting + jump-back-in CTA ───── */} {active === 'home' && (

{/* Logo bar with teal gradient lines */}

Your Brand

WELCOME BACK,

SARAH

{/* Glass card */}

Learning meets confidence. I'm here to guide you, challenge you, and help you unlock your full potential.

JUMP BACK IN

)} {/* ───── LIBRARY — Netflix-style course tiles ───── */} {active === 'library' && (

Your library

{[ { title: 'Foundations', tag: 'Week 3 · 5/8' }, { title: 'Advanced Form', tag: 'Week 1 · 0/6' }, { title: 'Recovery', tag: 'New · Locked' }, { title: 'Mindset', tag: 'Featured' }, ].map((card, i) => (

{card.title}

{card.tag}

))}

)} {/* ───── REVIEWS — video review tiles ───── */} {active === 'reviews' && (

Reviews · 4 pending

{[ { name: 'Squat form check', status: 'New', time: '2h' }, { name: 'Deadlift week 3', status: 'Reviewed', time: '1d' }, { name: 'Pull-up progression', status: 'New', time: '2d' }, ].map((r) => (

{/* video thumb */}

{r.name}

{r.status} {r.time}

))}

)} {/* ───── CHAT — conversation list ───── */} {active === 'chat' && (

Messages

{[ { name: 'Coach Josiane', preview: 'Great form today! Let\'s push…', time: '2m', unread: 2 }, { name: 'Group chat', preview: 'Marco: thanks for the tip 🙏', time: '34m', unread: 0 }, { name: 'Support', preview: 'Your renewal is set up.', time: '1d', unread: 0 }, ].map((m) => (

{m.name.charAt(0)}

{m.name} {m.time}

{m.preview} {m.unread > 0 && ( {m.unread} )}

))}

)}

{/* ───── Bottom nav — mirrors MobileBottomNav.tsx. Only renders on app phases; the intro (homescreen/opening/loading) doesn't have it because those represent the OS shell, not the app. */} {isAppPage && (

{/* Home */} {/* Library */} {/* FAB */}

{/* Reviews */} {/* Chat */}

)} {/* Home indicator */}

); } /* Bottom-nav tab — extracted helper. Active state mirrors the real MobileBottomNav structure (icon scales 1.1, label color matches active, tiny dot indicator below), themed in the file's brand red instead of JGPH's teal. */ function NavTab({ icon: Icon, label, activeFlag, accent, unread, }: { icon: any; label: string; activeFlag: boolean; accent: string; unread?: number; }) { return (

{unread && unread > 0 && ( {unread} )}

{label} {activeFlag && (

)}

); } /* ───────────────────────────────────────────────────────────────────────── * WILSON — short, integrated, no separate page * ───────────────────────────────────────────────────────────────────────── */ function WilsonNote() { return (

Meet Wilson An assistant that works inside your business.

Wilson sees your bookings, customers, and payments together — and tells you the one or two things worth doing this week. Plain language. No jargon.

This week

{[ <>Five people booked a call last month and never came back. Want me to send a check-in?, <>Your calendar is quiet on Thursdays. I can email your waitlist., <>Two payments failed. I've drafted the reminders., ].map((body, i) => (

{body}

))}

); } /* ───────────────────────────────────────────────────────────────────────── * PRICING * ───────────────────────────────────────────────────────────────────────── */ function PricingTeaser() { return (

Pricing One price. Everything in.

See what's included

); } function PricingTiers() { return (

Both plans include your own white-label mobile app. Annual billing available — ask on your call.

); } function PricingGrid() { return (

{tiers.map((t) => (

{t.highlight &&

}

{t.name} {t.highlight && ( Most popular )}

${t.price} / {t.cadence}

{t.tagline}

{t.highlight ? {t.cta} : {t.cta}}

))}

); } function Replaces() { return (

What goes away One bill replaces
this whole list.

Not here to be the cheapest line on your statement. Here to be the only one.

{replaces.map((r) => (

{r}

))}

Insubord — $297/month, all of it

); } function FAQ() { return (

Honest answers The questions people actually ask.

{faqs.map((f, i) => (

{String(i + 1).padStart(2, '0')}

{f.q}

{f.a}

))}

); } /* ───────────────────────────────────────────────────────────────────────── * AGENCIES * ───────────────────────────────────────────────────────────────────────── */ function AgencyValueProps() { return (

What you get Built for the way you actually work.

{agencyFeatures.map((f, i) => (

{String(i + 1).padStart(2, '0')}

{f.title}

{f.body}

))}

); } function AgencyTier() { const agency = tiers[1]; return (

{agency.name}

${agency.price} / month

{agency.tagline}

Get started

); } /* ───────────────────────────────────────────────────────────────────────── * ABOUT * ───────────────────────────────────────────────────────────────────────── */ function OriginStory() { return (

Why this exists Built from the frustration of doing it the hard way.

For years, building a business online meant the same thing: a website here, a booking link there, an email tool, a course platform, a payment setup, and an automation app trying to glue it together.

Every owner was promised the cloud would make this simple. They got eighteen logins, a monthly pile of charges, and the quiet job of being the glue between tools that were never built to talk.

Insubord exists to end that. One platform that runs the whole business — built for the owner doing it themselves, not for an agency and not for a developer.

); } function Manifesto() { return (

What we refuse The name is on purpose.

Insubord is short for insubordinate — refusing to go along with how this is "supposed" to work.

/0{i + 1}

{m}

); } function FounderNote() { return (

A note From the founder.

Insubord is one person right now. Me. I built it because I spent years watching small business owners — good ones, working hard — buried under software that was supposed to help them.

They didn't need another tool. They needed all of it to finally be one thing, to look finished, and to feel like theirs. So that's what I'm building.

Your business shouldn't feel this hard. Let's fix that.

Michael

Founder · Insubord

); } /* ───────────────────────────────────────────────────────────────────────── * CONTACT * ───────────────────────────────────────────────────────────────────────── */ function ContactCards() { const cards = [ { Icon: Phone, title: 'Call or text', value: contact.phonePretty, body: 'Mon–Fri · 9–6 ET. A real person.', href: `tel:${contact.phone}` }, { Icon: Mail, title: 'Email', value: contact.email, body: 'We answer within a day.', href: `mailto:${contact.email}` }, { Icon: Clock, title: 'Response time', value: 'Within one business day', body: 'We answer every message in person.', href: null }, ]; return (

{cards.map((card) => (

{card.title}

{card.href ? {card.value} :

{card.value}

}

{card.body}

))}

); } /* ───────────────────────────────────────────────────────────────────────── * CTA — every page closer * ───────────────────────────────────────────────────────────────────────── */ function CTA({ formOnly = false }: { formOnly?: boolean } = {}) { // formOnly=true is only used on /contact — that page IS the contact form. // Every other page closes with a clean Get started / See how it works // pair (no form, no booking-call language). if (formOnly) { return (

); } return (

Get started Your business,
finally in one place.

All seven parts of the platform. Your own app. One bill. We get you live inside the week.

Get started See how it works

Charged today
Cancel anytime
We migrate you in

); } function ContactForm() { const interests = ['Running one business', 'I run an agency', 'Just exploring', 'Moving off another tool']; return (

{ e.preventDefault() const fd = new FormData(e.currentTarget) const data = {} fd.forEach((v, k) => { if (data[k]) { data[k] = [].concat(data[k], String(v)) } else { data[k] = String(v) } }) try { await fetch('/api/form-submissions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ formId: '49', data, submittedBy: { name: String(data.name || data.fullName || ''), email: String(data.email || '') } }) }) e.currentTarget.reset() alert('Submitted! We\'ll be in touch soon.') } catch { alert('Something went wrong. Please try again.') } }} className="rounded-lg p-6 sm:p-7" style={{ background: c.surface, border: `1px solid ${c.line2}` }} >

Send a message

Which sounds like you?

{interests.map((opt) => ( {opt} ))}

); } function FormField({ label, name, placeholder, type = 'text', full = false, textarea = false, }: { label: string; name: string; placeholder: string; type?: string; full?: boolean; textarea?: boolean; }) { const wrap = full ? 'sm:col-span-2' : ''; const inputClass = 'w-full bg-transparent border-b py-2 mt-2 text-sm outline-none placeholder:text-zinc-600'; const inputStyle = { borderColor: c.line2, color: c.ink }; return ( {label} {textarea ?

: <input name={name} type={type} placeholder={placeholder} className={inputClass} style={inputStyle} />}
    </label>
  );
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Small utilities
 * ───────────────────────────────────────────────────────────────────────── */

function SectionH2({ children }: { children: React.ReactNode }) {
  return (
    <h2
      className="mt-4 font-sans font-bold tracking-tight leading-[1.1]"
      style={{ color: c.ink, fontSize: 'clamp(1.625rem, 3.5vw, 2.75rem)' }}
    >
      {children}
    </h2>
  );
}

function SectionLead({ children }: { children: React.ReactNode }) {
  return (
    <p className="mt-5 max-w-2xl text-base sm:text-lg" style={{ color: c.inkM, lineHeight: 1.55 }}>
      {children}
    </p>
  );
}

/**
 * InteractiveDots — a canvas-rendered grid of short line segments. Each line's
 * angle and brightness is recomputed per frame based on its distance/angle to
 * the cursor, so the field appears to "lean toward" or "radiate from" the
 * mouse position. Falls back to a static dot pattern when the user has
 * prefers-reduced-motion set.
 *
 * Self-contained: every constant lives inside the function so Wilson's section
 * extractor can lift this out cleanly. Sizes the canvas to its parent via
 * ResizeObserver so it works inside any section without explicit dimensions.
 */
function InteractiveDots() {
  const wrapRef = useRef<HTMLDivElement | null>(null);
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const reduced = useRef(false);

useEffect(() => {
    const wrap = wrapRef.current;
    const canvas = canvasRef.current;
    if (!wrap || !canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

reduced.current = typeof window !== 'undefined'
      && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;

const SPACING       = 26;      // grid pitch in px
    const LINE_LEN      = 7;       // length of each segment in px
    const INFLUENCE     = 240;     // radius of cursor influence in px
    const BASE_ALPHA    = 0.07;    // resting opacity for far dots
    const NEAR_ALPHA    = 0.55;    // peak opacity for dots near the cursor
    const COLOR         = '255,255,255';
    const DPR           = Math.max(1, Math.min(2, window.devicePixelRatio || 1));

let width = 0;
    let height = 0;
    let dots: { x: number; y: number }[] = [];
    // Store the cursor's VIEWPORT (clientX / clientY) coords. The cursor's
    // position relative to the section is recomputed every frame inside draw()
    // using getBoundingClientRect — so scrolling the page (which shifts the
    // section without firing pointermove) still keeps the dots tracking the
    // cursor's effective position within the section.
    let clientX = -1e6;
    let clientY = -1e6;
    let raf = 0;
    let running = true;

function resize() {
      const rect = wrap.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      canvas.width = Math.round(width * DPR);
      canvas.height = Math.round(height * DPR);
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
      rebuildGrid();
    }

// Window pointermove is the only listener now — it just records the
    // latest cursor viewport coords. draw() runs every frame anyway via
    // requestAnimationFrame and does the bounds check, opacity sync, AND
    // the cull/draw itself. That removes the separate scroll listener +
    // syncOpacity getBoundingClientRect call per scroll tick (which could
    // fire 100+ times per second on a high-refresh mouse wheel).
    function onWindowMove(e: PointerEvent) {
      clientX = e.clientX;
      clientY = e.clientY;
    }

resize();
    if (reduced.current) {
      drawStatic();
    } else {
      raf = requestAnimationFrame(draw);
      window.addEventListener('pointermove', onWindowMove as EventListener);
    }

const ro = new ResizeObserver(() => {
      resize();
      if (reduced.current) drawStatic();
    });
    ro.observe(wrap);

return () => {
      running = false;
      cancelAnimationFrame(raf);
      ro.disconnect();
      window.removeEventListener('pointermove', onWindowMove as EventListener);
    };
  }, []);

return (
    <div
      ref={wrapRef}
      className="pointer-events-none absolute inset-0 overflow-hidden"
      style={{ opacity: 0, transition: 'opacity 350ms ease-out' }}
    >
      <canvas ref={canvasRef} className="block h-full w-full" />
    </div>
  );
}

function FileBadge({ children }: { children: React.ReactNode }) {
  return (
    <div className="inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.18em]" style={{ color: c.red }}>
      <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c.red }} />
      {children}
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────────────────
 *
 *  PROJECT GLOBALS — REFERENCE ONLY
 *  ──────────────────────────────
 *  Nav and Footer below are extracted by Wilson as standalone global
 *  sections. They are NOT called from any page export. To survive that
 *  extraction, both are SELF-CONTAINED: every color, route, and label they
 *  reference is defined inside the function — no module-level data deps.
 *
 *  Pattern proven in the v2 fix (b0c1f7e). Do not refactor to share with
 *  the module-level `c` / `navRoutes` / `contact` constants above.
 *
 * ───────────────────────────────────────────────────────────────────────── */

const [open, setOpen] = useState(false);

// Auth state — checked client-side via Payload's /api/users/me endpoint.
  // null = still loading (treat as logged-out for UI purposes so the CTA
  // doesn't jump around), object = logged in, false = explicitly logged out.
  // Response shape from src/app/api/users/me/route.ts:
  //   { id, email, name, role, isAgencyAdmin, tenants }
  const [user, setUser] = useState<any>(null);
  const [profileOpen, setProfileOpen] = useState(false);

useEffect(() => {
    let cancelled = false;
    fetch('/api/users/me', { credentials: 'include', cache: 'no-store' })
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => { if (!cancelled) setUser(data && data.id ? data : false); })
      .catch(() => { if (!cancelled) setUser(false); });
    return () => { cancelled = true; };
  }, []);

// Close profile dropdown on Escape
  useEffect(() => {
    if (!profileOpen) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setProfileOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [profileOpen]);

const signOut = () => {
    fetch('/api/users/logout', { method: 'POST', credentials: 'include' })
      .finally(() => { window.location.href = '/'; });
  };

// Initials for the profile avatar — fall back to email if no name.
  const userInitial = (() => {
    if (!user || typeof user !== 'object') return '?';
    const src = (user.name || user.email || '?').trim();
    const parts = src.split(/\s+/).filter(Boolean);
    if (parts.length === 0) return '?';
    if (parts.length === 1) return src.substring(0, 2).toUpperCase();
    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
  })();

useEffect(() => {
    if (!open) return;
    const scrollY = window.scrollY;
    const { body } = document;
    const prev = {
      position: body.style.position,
      top: body.style.top,
      width: body.style.width,
      overflow: body.style.overflow,
    };
    body.style.position = 'fixed';
    body.style.top = `-${scrollY}px`;
    body.style.width = '100%';
    body.style.overflow = 'hidden';
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => {
      body.style.position = prev.position;
      body.style.top = prev.top;
      body.style.width = prev.width;
      body.style.overflow = prev.overflow;
      window.scrollTo(0, scrollY);
      window.removeEventListener('keydown', onKey);
    };
  }, [open]);

return (
    <>
      {/* Announcement bar */}
      <div className="relative z-50 border-b" style={{ background: NAV_BG, color: NAV_INK_MUTED, borderColor: NAV_LINE }}>
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-2 text-[11px] uppercase tracking-[0.16em] sm:px-6">
          <div className="flex min-w-0 items-center gap-2">
            <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full animate-pulse" style={{ background: NAV_GREEN }} />
            <span className="truncate font-mono">One platform · One bill</span>
          </div>
          <div className="hidden items-center gap-4 font-mono lg:flex">
            <span>{NAV_LOCATION}</span>
          </div>
          <a href={`tel:${NAV_PHONE}`} className="flex flex-shrink-0 items-center gap-1.5 font-mono" style={{ color: NAV_INK }}>
            <Phone size={11} strokeWidth={2.5} />
            <span>{NAV_PHONE_PRETTY}</span>
          </a>
        </div>
      </div>

{/* Main nav */}
      <header className="sticky top-0 z-40 border-b" style={{ background: NAV_BG + 'F0', backdropFilter: 'blur(12px)', borderColor: NAV_LINE }}>
        <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 sm:py-4">
          <a href="/" className="flex items-center gap-2" style={{ color: NAV_INK }}>
            <span className="flex h-8 w-8 items-center justify-center rounded" style={{ background: NAV_RED }}>
              <Slash size={14} strokeWidth={3} style={{ color: NAV_BG }} />
            </span>
            <span className="font-sans text-lg font-bold tracking-tight">{NAV_BRAND}</span>
          </a>

<ul className="hidden items-center gap-8 text-sm font-medium lg:flex" style={{ color: NAV_INK_MUTED }}>
            {NAV_ROUTES.map((item) => (
              <li key={item.label}>
                <a href={item.href} className="transition-colors hover:text-white" style={{ color: NAV_INK_MUTED }}>
                  {item.label}
                </a>
              </li>
            ))}
          </ul>

{/* Right side — desktop: Login link OR profile dropdown, then Get started CTA */}
          <div className="hidden items-center gap-5 lg:flex">
            {/* Logged-out: simple Login link. While auth is still loading we
                also render this so the layout doesn't shift in. */}
            {(user === false || user === null) && (
              <a
                href="/auth/signin"
                className="flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-white"
                style={{ color: NAV_INK_MUTED }}
              >
                <LogIn size={14} strokeWidth={2} />
                <span>Login</span>
              </a>
            )}

{/* Logged-in: profile avatar with dropdown */}
            {user && typeof user === 'object' && (
              <div className="relative">
                <button
                  type="button"
                  onClick={(e) => { e.stopPropagation(); setProfileOpen((v) => !v); }}
                  aria-haspopup="menu"
                  aria-expanded={profileOpen}
                  className="flex items-center gap-2 transition-opacity hover:opacity-90"
                  style={{ color: NAV_INK }}
                >
                  <span
                    className="flex items-center justify-center"
                    style={{
                      width: 30, height: 30, borderRadius: '50%',
                      background: NAV_RED, color: NAV_INK,
                      fontSize: 11, fontWeight: 700, letterSpacing: 0.5,
                    }}
                  >
                    {userInitial}
                  </span>
                  <ChevronDown size={13} strokeWidth={2.5} style={{
                    color: NAV_INK_MUTED,
                    transform: profileOpen ? 'rotate(180deg)' : 'none',
                    transition: 'transform 0.18s',
                  }} />
                </button>

{profileOpen && (
                  <>
                    {/* Click-away backdrop */}
                    <div className="fixed inset-0" style={{ zIndex: 39 }} onClick={() => setProfileOpen(false)} />
                    {/* Menu */}
                    <div
                      role="menu"
                      className="absolute right-0 top-full mt-3 overflow-hidden"
                      style={{
                        zIndex: 41,
                        minWidth: 220,
                        background: NAV_BG,
                        border: `1px solid ${NAV_LINE_2}`,
                        borderRadius: 8,
                        boxShadow: '0 18px 40px -12px rgba(0,0,0,0.6), 0 8px 18px -6px rgba(0,0,0,0.45)',
                      }}
                    >
                      {/* User header */}
                      <div style={{ padding: '12px 14px', borderBottom: `1px solid ${NAV_LINE}` }}>
                        <div className="truncate" style={{ fontSize: 12, color: NAV_INK, fontWeight: 600 }}>
                          {user.name || 'Account'}
                        </div>
                        <div className="truncate" style={{ fontSize: 11, color: NAV_INK_MUTED, marginTop: 1 }}>
                          {user.email}
                        </div>
                      </div>

{/* Menu items */}
                      <div style={{ padding: '6px 0' }}>
                        {[
                          { href: '/office',           label: 'Office',   icon: LayoutDashboard, show: true },
                          { href: '/agency',           label: 'Agency',   icon: Building2,       show: !!user.isAgencyAdmin },
                          { href: '/portal',           label: 'Portal',   icon: MonitorPlay,     show: true },
                          { href: '/office/settings',  label: 'Settings', icon: Settings,        show: true },
                        ].filter((i) => i.show).map((i) => {
                          const Ico = i.icon;
                          return (
                            <a
                              key={i.label}
                              href={i.href}
                              onClick={() => setProfileOpen(false)}
                              role="menuitem"
                              className="flex items-center gap-2.5 transition-colors"
                              style={{
                                padding: '8px 14px',
                                fontSize: 13,
                                color: NAV_INK,
                                textDecoration: 'none',
                              }}
                              onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
                              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
                            >
                              <Ico size={14} strokeWidth={2} style={{ color: NAV_INK_MUTED }} />
                              <span>{i.label}</span>
                            </a>
                          );
                        })}
                      </div>

{/* Sign out */}
                      <div style={{ borderTop: `1px solid ${NAV_LINE}`, padding: '6px 0' }}>
                        <button
                          type="button"
                          onClick={() => { setProfileOpen(false); signOut(); }}
                          className="flex w-full items-center gap-2.5 transition-colors"
                          style={{
                            padding: '8px 14px',
                            fontSize: 13,
                            color: NAV_INK_MUTED,
                            background: 'transparent',
                            border: 'none',
                            cursor: 'pointer',
                            textAlign: 'left',
                          }}
                          onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.color = NAV_INK; }}
                          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = NAV_INK_MUTED; }}
                        >
                          <LogOut size={14} strokeWidth={2} />
                          <span>Sign out</span>
                        </button>
                      </div>
                    </div>
                  </>
                )}
              </div>
            )}

{/* Get started CTA — only shown to logged-out (or still-loading)
                visitors. Signed-in users already have an account so the
                signup CTA isn't relevant for them. */}
            {(user === false || user === null) && (
              <a
                href="/start?plan=operator&billing=monthly"
                className="group flex items-center gap-2 px-4 py-2.5 text-xs font-bold uppercase tracking-[0.14em] transition-opacity hover:opacity-90"
                style={{ background: NAV_RED, color: NAV_INK }}
              >
                Get started
                <ArrowUpRight size={13} strokeWidth={2.5} className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
              </a>
            )}
          </div>

<button
            type="button"
            aria-label="Open menu"
            onClick={() => setOpen(true)}
            className="flex h-10 w-10 items-center justify-center lg:hidden"
            style={{ color: NAV_INK }}
          >
            <Menu size={24} strokeWidth={2.25} />
          </button>
        </nav>
      </header>

{/* Mobile drawer */}
      {open && (
        <div className="fixed inset-0 z-50 lg:hidden" role="dialog" aria-modal="true">
          <div
            className="absolute inset-0"
            style={{ background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)' }}
            onClick={() => setOpen(false)}
          />
          <div
            className="absolute right-0 top-0 flex h-full w-[88%] max-w-sm flex-col"
            style={{ background: NAV_BG, borderLeft: `1px solid ${NAV_LINE_2}` }}
          >
            <div className="flex items-center justify-between border-b px-5 py-4" style={{ borderColor: NAV_LINE_2 }}>
              <a href="/" className="flex items-center gap-2" onClick={() => setOpen(false)} style={{ color: NAV_INK }}>
                <span className="flex h-7 w-7 items-center justify-center rounded" style={{ background: NAV_RED }}>
                  <Slash size={14} strokeWidth={3} style={{ color: NAV_BG }} />
                </span>
                <span className="font-sans text-lg font-bold tracking-tight">{NAV_BRAND}</span>
              </a>
              <button
                type="button"
                aria-label="Close menu"
                onClick={() => setOpen(false)}
                className="flex h-10 w-10 items-center justify-center"
                style={{ color: NAV_INK }}
              >
                <XIcon size={24} strokeWidth={2.25} />
              </button>
            </div>
            <ul className="flex-1 overflow-y-auto px-5 py-4">
              {NAV_ROUTES.map((item) => (
                <li key={item.label} className="border-b last:border-b-0" style={{ borderColor: NAV_LINE }}>
                  <a
                    href={item.href}
                    onClick={() => setOpen(false)}
                    className="flex items-center justify-between py-4 font-sans text-lg font-semibold tracking-tight"
                    style={{ color: NAV_INK }}
                  >
                    <span>{item.label}</span>
                    <ArrowUpRight size={18} strokeWidth={2.5} style={{ color: NAV_RED }} />
                  </a>
                </li>
              ))}
            </ul>
            <div className="border-t px-5 py-5" style={{ borderColor: NAV_LINE_2 }}>
              {/* Logged-in: workspace shortcuts above the CTA */}
              {user && typeof user === 'object' && (
                <div style={{ marginBottom: 14 }}>
                  <div className="flex items-center gap-3" style={{ marginBottom: 10 }}>
                    <span
                      className="flex items-center justify-center"
                      style={{ width: 32, height: 32, borderRadius: '50%', background: NAV_RED, fontSize: 12, fontWeight: 700, color: NAV_INK }}
                    >
                      {userInitial}
                    </span>
                    <div className="min-w-0">
                      <div className="truncate" style={{ fontSize: 13, color: NAV_INK, fontWeight: 600 }}>{user.name || 'Account'}</div>
                      <div className="truncate" style={{ fontSize: 11, color: NAV_INK_MUTED }}>{user.email}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-2">
                    {[
                      { href: '/office',          label: 'Office',   icon: LayoutDashboard, show: true },
                      { href: '/agency',          label: 'Agency',   icon: Building2,       show: !!user.isAgencyAdmin },
                      { href: '/portal',          label: 'Portal',   icon: MonitorPlay,     show: true },
                      { href: '/office/settings', label: 'Settings', icon: Settings,        show: true },
                    ].filter((i) => i.show).map((i) => {
                      const Ico = i.icon;
                      return (
                        <a
                          key={i.label}
                          href={i.href}
                          onClick={() => setOpen(false)}
                          className="flex items-center gap-2"
                          style={{
                            padding: '10px 12px',
                            background: 'rgba(255,255,255,0.04)',
                            border: `1px solid ${NAV_LINE}`,
                            borderRadius: 6,
                            fontSize: 13,
                            color: NAV_INK,
                          }}
                        >
                          <Ico size={14} strokeWidth={2} style={{ color: NAV_INK_MUTED }} />
                          <span>{i.label}</span>
                        </a>
                      );
                    })}
                  </div>
                  <button
                    type="button"
                    onClick={() => { setOpen(false); signOut(); }}
                    className="flex items-center gap-2 mt-3"
                    style={{ background: 'transparent', border: 'none', color: NAV_INK_MUTED, fontSize: 12, padding: 0, cursor: 'pointer' }}
                  >
                    <LogOut size={12} strokeWidth={2} />
                    <span>Sign out</span>
                  </button>
                </div>
              )}

{/* Logged-out: Login link above the CTA */}
              {(user === false || user === null) && (
                <a
                  href="/auth/signin"
                  onClick={() => setOpen(false)}
                  className="flex w-full items-center justify-between px-5 py-3 mb-3"
                  style={{ background: 'transparent', border: `1px solid ${NAV_LINE_2}`, color: NAV_INK, fontSize: 13, fontWeight: 500 }}
                >
                  <span className="flex items-center gap-2">
                    <LogIn size={14} strokeWidth={2} />
                    Login
                  </span>
                  <ArrowRight size={15} strokeWidth={2.5} style={{ color: NAV_INK_MUTED }} />
                </a>
              )}

{/* Get started CTA — same
                  rule as the desktop CTA: only logged-out/loading visitors
                  see it. Signed-in users already have an account. */}
              {(user === false || user === null) && (
                <a
                  href="/start?plan=operator&billing=monthly"
                  onClick={() => setOpen(false)}
                  className="flex w-full items-center justify-between px-5 py-3 text-xs font-bold uppercase tracking-[0.16em]"
                  style={{ background: NAV_RED, color: NAV_INK }}
                >
                  Get started
                  <ArrowRight size={15} strokeWidth={2.5} />
                </a>
              )}
              <a href={`tel:${NAV_PHONE}`} className="mt-3 flex items-center gap-3 font-mono text-xs uppercase tracking-[0.16em]" style={{ color: NAV_INK_MUTED }}>
                <Phone size={13} strokeWidth={2.5} />
                <span>{NAV_PHONE_PRETTY}</span>
              </a>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function Footer() {
  const FT_BG        = '#0A0A0C';
  const FT_INK       = '#F5F5F7';
  const FT_INK_MUTED = '#A1A1AA';
  const FT_INK_SOFT  = '#71717A';
  const FT_LINE      = 'rgba(255,255,255,0.08)';
  const FT_LINE_2    = 'rgba(255,255,255,0.14)';
  const FT_RED       = '#FF3D45';
  const FT_LOCATION  = 'Built in Florida · Used everywhere';
  const FT_TAGLINE   = 'One platform to run your whole business.';

const cols: { title: string; items: { label: string; href: string }[] }[] = [
    {
      title: 'Platform',
      items: [
        { label: 'Customers',     href: '/platform' },
        { label: 'Courses',       href: '/platform' },
        { label: 'Payments',      href: '/platform' },
        { label: 'Marketing',     href: '/platform' },
        { label: 'Bookings',      href: '/platform' },
        { label: 'Your own app',  href: '/platform' },
      ],
    },
    {
      title: 'Company',
      items: [
        { label: 'About',        href: '/about' },
        { label: 'For Agencies', href: '/for-agencies' },
        { label: 'Pricing',      href: '/pricing' },
        { label: 'Contact',      href: '/contact' },
      ],
    },
    {
      title: 'Legal',
      items: [
        { label: 'Terms',          href: '/terms' },
        { label: 'Privacy',        href: '/privacy' },
        { label: 'Acceptable use', href: '/acceptable-use' },
      ],
    },
  ];

const socials: { Icon: any; href: string; label: string }[] = [
    { Icon: Twitter,   href: 'https://x.com/insubord', label: 'Twitter'   },
    { Icon: Instagram, href: '#',                      label: 'Instagram' },
    { Icon: Linkedin,  href: '#',                      label: 'LinkedIn'  },
    { Icon: Github,    href: '#',                      label: 'GitHub'    },
  ];

function SpotlightWordmark() {
    const ref = useRef(null);

useEffect(function () {
      var el = ref.current;
      if (!el) return;
      el.style.setProperty('--mx', '-9999px');
      el.style.setProperty('--my', '-9999px');

var host = el.closest('footer') || el.parentElement || el;

// Cache the cursor's viewport coords. Sync runs on pointermove AND on
      // scroll so the spotlight activates when scrolling brings the footer
      // under a stationary cursor — pointermove alone misses that case.
      var clientX = -9999;
      var clientY = -9999;

// rAF throttle: scroll can fire 100+ times per second on a high-refresh
      // wheel, and each sync() costs two getBoundingClientRect calls. Coalesce
      // all pending events into one sync per animation frame.
      var pending = false;
      function scheduleSync() {
        if (pending) return;
        pending = true;
        requestAnimationFrame(function () {
          pending = false;
          var rect = el.getBoundingClientRect();
          el.style.setProperty('--mx', (clientX - rect.left) + 'px');
          el.style.setProperty('--my', (clientY - rect.top) + 'px');
          // Use the footer bounds (not the wordmark bounds) so the glow can
          // start to appear before the cursor is literally over the text.
          var hostRect = (host && host.getBoundingClientRect) ? host.getBoundingClientRect() : rect;
          var inside =
            clientX >= hostRect.left &&
            clientX <= hostRect.right &&
            clientY >= hostRect.top &&
            clientY <= hostRect.bottom;
          el.style.opacity = inside ? '1' : '0';
        });
      }

function onMove(e) {
        clientX = e.clientX;
        clientY = e.clientY;
        scheduleSync();
      }

window.addEventListener('pointermove', onMove);
      window.addEventListener('scroll', scheduleSync, { passive: true });
      return function () {
        window.removeEventListener('pointermove', onMove);
        window.removeEventListener('scroll', scheduleSync);
      };
    }, []);

var wordmarkStyle = {
      // Larger ceiling so the text actually fills the footer width edge-to-edge.
      // Excess on narrower viewports is clipped by the parent footer's
      // overflow-hidden.
      fontSize: 'clamp(3.5rem, 17vw, 15rem)',
      lineHeight: 0.9,
      letterSpacing: '-0.04em',
      textAlign: 'center',
      fontWeight: 700,
      fontFamily: 'inherit',
      wordBreak: 'normal',
      whiteSpace: 'nowrap',
    };
    // Wide-and-tall ellipse — a broad downward beam. Width 520px so several
    // letters light up under the cursor at once; height 850px so cursor
    // motion higher in the footer still casts light down onto the wordmark.
    var mask = 'radial-gradient(ellipse 520px 850px at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.7) 22%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.1) 78%, transparent 100%)';

return (
      <div
        ref={ref}
        className="relative mt-8 sm:mt-12 -mb-12 sm:-mb-20 select-none"
        style={{ opacity: 0, transition: 'opacity 350ms ease-out' }}
      >
        <div style={{ ...wordmarkStyle, visibility: 'hidden' }}>
          INSUBORD.
        </div>

<div
          aria-hidden="true"
          className="absolute inset-0 pointer-events-none"
          style={{
            ...wordmarkStyle,
            color: FT_INK,
            WebkitMaskImage: mask,
            maskImage: mask,
          }}
        >
          INSUBORD<span style={{ color: FT_RED }}>.</span>
        </div>
      </div>
    );
  }

return (
    <footer className="relative border-t pt-12 pb-0 sm:pt-14 overflow-hidden" style={{ background: FT_BG, color: FT_INK, borderColor: FT_LINE }}>
      <div className="mx-auto max-w-7xl px-6">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {cols.map((col) => (
            <div key={col.title}>
              <div className="font-mono text-[10px] uppercase tracking-[0.22em]" style={{ color: FT_RED }}>{col.title}</div>
              <ul className="mt-4 space-y-2 text-sm">
                {col.items.map((it) => (
                  <li key={it.label}>
                    <a href={it.href} className="transition-opacity hover:opacity-60" style={{ color: FT_INK_MUTED }}>{it.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
          <div>
            <div className="font-mono text-[10px] uppercase tracking-[0.22em]" style={{ color: FT_RED }}>Stay in the loop</div>
            <p className="mt-3 text-sm" style={{ color: FT_INK_MUTED, lineHeight: 1.5 }}>
              One email a month. Build notes, never spam.
            </p>
            <form onSubmit={(e) => { e.preventDefault(); }} className="mt-4 flex gap-2">
              <input
                type="email"
                name="email"
                placeholder="you@yourbusiness.com"
                className="flex-1 border-b bg-transparent py-2 text-sm outline-none placeholder:text-zinc-600"
                style={{ borderColor: FT_LINE_2, color: FT_INK }}
              />
              <button
                type="submit"
                aria-label="Subscribe"
                className="flex h-9 w-9 items-center justify-center"
                style={{ background: FT_RED, color: FT_INK }}
              >
                <ArrowRight size={15} strokeWidth={2.5} />
              </button>
            </form>
          </div>
        </div>

<div
          className="mt-12 flex flex-col items-start justify-between gap-4 border-t pt-6 font-mono text-[11px] uppercase tracking-[0.18em] md:flex-row md:items-center"
          style={{ borderColor: FT_LINE, color: FT_INK_SOFT }}
        >
          <span>© {new Date().getFullYear()} INSUBORD · {FT_LOCATION}</span>
          <div className="flex items-center gap-3">
            {socials.map(({ Icon, href, label }) => (
              <a key={label} href={href} aria-label={label} target="_blank" rel="noopener noreferrer"
                 className="flex h-8 w-8 items-center justify-center border transition-colors hover:bg-white/5"
                 style={{ borderColor: FT_LINE_2, color: FT_INK_MUTED }}>
                <Icon size={14} />
              </a>
            ))}
          </div>
        </div>
      </div>

{/* Giant wordmark spans the full footer width (outside max-w-7xl) so the
          text reaches edge-to-edge. Footer's overflow-hidden clips any horizontal
          overflow at narrow viewports. */}
      <SpotlightWordmark />
    </footer>
  );
}</article></body></html>

Get the platform running today.

{title}

Running a business shouldn't feel this hard.

{m.title}

{active.title}

{m.title}

{f.q}

{f.title}

{agency.name}

{card.title}

Running a business
shouldn't feel
this hard.

Let's see ifthis is for you.

Call or text

Email

Response time

Let's see if
this is for you.