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 → TwoPaths → Modules → WilsonNote → PricingTeaser → CTA * ForBusinessesPage /for-businesses 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', }; /* Reusable red glow backdrop for section backgrounds — zero extra DOM, just a layered radial-gradient over the base color. Safe everywhere (no overflow, no positioning). Use as: style={{ background: glowBg(c.bg) }}. */ const glowBg = (base: string, at = '82% -12%', strength = 0.08) => `radial-gradient(680px circle at ${at}, rgba(255,61,69,${strength}), rgba(255,61,69,0) 62%), ${base}`; /* ───── 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: 'Home', href: '/-home' }, { label: 'For Businesses', href: '/-for-businesses' }, { label: 'For Agencies', href: '/-for-agencies' }, { label: 'Pricing', href: '/-pricing' }, { label: 'About', href: '/-about' }, { label: 'Contact', href: '/-contact' }, { label: 'Start', href: '/-start' }, ]; 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', }, ]; /* Done-for-you build packages. These are the high-ticket motion: fixed scope, fixed price, booked via a call (CTA → /contact), with the platform subscription riding along as recurring once the build is live. Prices are display strings so 'from $25k' renders without special-casing. */ const buildPackages = [ { name: 'Launch', price: '$5,000', meta: '+ $297/mo · 1–2 weeks', tagline: 'One high-converting page, built on the platform and ready to capture leads.', features: [ 'One page, customized to your brand', 'Up to 6 sections from the template library', 'Lead-capture form wired to your CRM', 'Tenant provisioned + domain connected', 'Wilson onboarded to your business', '2 revision rounds', ], cta: 'Start your build', }, { name: 'Business', price: '$10,000', meta: '+ $497/mo · 2–3 weeks', highlight: true, tagline: 'A full multi-page presence with your core workflows running on day one.', features: [ 'Everything in Launch', 'Up to 5 additional pages', 'Up to 2 core workflows configured', 'Payments connected (Stripe or Square)', 'Wilson tuned to your workflows + goals', '2 revision rounds', ], cta: 'Start your build', }, { name: 'Enterprise', price: 'from $25k', meta: 'Scoped per project', tagline: 'Custom development beyond the platform — scoped, quoted, built to spec.', features: [ 'Paid discovery → fixed scope & quote', 'Custom features beyond the platform', 'Unlimited pages, bespoke layouts', 'Milestone billing with acceptance gates', 'Dedicated build support', ], cta: 'Book a scoping call', }, ]; const replaces = [ 'Your website builder', 'Your booking link', 'Your email marketing tool', 'Your course platform', 'Your payments + invoicing', 'The automation glue', ]; const faqs = [ { q: 'Can you just build it for me?', a: 'Yes — that\'s most of what we do. Pick Launch, Business, or Enterprise and we build your site, app, and core workflows on the platform, usually live in a few weeks. You provide the content; we handle the rest.' }, { q: 'What\'s the difference between a build and the subscription?', a: 'The build is the one-time, done-for-you setup. The subscription is the platform you run on every month. Every build includes the subscription — or you can skip the build and run it yourself from $297/month.' }, { 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 white-label workspace, login, and domain. You run all of them from one place.' }, { title: 'Resell builds as your own', body: "We're your fulfillment arm. Sell a done-for-you build under your brand — we build it, you keep the relationship and the margin." }, { title: 'Earn 30% recurring', body: 'Refer a client to the platform and earn 30% of their subscription for as long as they stay. Lifetime, not a one-time spiff.' }, { title: 'Your brand on everything', body: 'Clients see your agency, not Insubord. The whole platform — and every app — wears your name.' }, ]; const manifesto = [ "We won't make you the glue between tools that should have talked to each other.", "We won't send you off to wire up Stripe, Twilio, or anything with a developer's name on it.", "We won't lock the finished version — or your own app — behind a tier you can't afford yet.", "We won't hold your data hostage. It's yours, always.", ]; /* ───────────────────────────────────────────────────────────────────────── * PAGE EXPORTS — composition only * ───────────────────────────────────────────────────────────────────────── */ export function HomePage() { return ( <> ); } export function ForBusinessesPage() { 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." art="nodes" /> ); } export function ForAgenciesPage() { return ( <> Resell it. Run it.
Earn on all of it.} lead="White-label the whole platform for your clients, resell done-for-you builds as your own, and earn recurring on every account you bring." art="orbit" /> ); } export function PricingPage() { return ( <> Two ways in.
One platform.} lead="Have it built for you, or run it yourself. Either way you're on the same platform — and you always own your data." art="mesh" /> ); } export function AboutPage() { return ( <> One builder.
A century of practice behind it.} lead="Insubord is built by one person — drawing on a family that's spent the better part of a century building with computers. It's the platform small businesses were promised, made by someone who refused to ship anything less than the real thing." art="lineage" /> ); } export function ContactPage() { return ( <> Start your
build.} lead="Tell us about your business and what you need. We'll come back within a day with next steps — or just to answer a question." art="orbit" /> ); } /* ───────────────────────────────────────────────────────────────────────── * 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 * ───────────────────────────────────────────────────────────────────────── */ export 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; // Bespoke dark field styling. We intentionally do NOT pull the field // background/colors from checkoutData.theme — a stray theme value was // rendering the card field on a solid red fill. The template is dark, so // the field is explicitly dark with a red focus accent only. const fieldStyle = { '.input-container': { borderColor: 'rgba(255,255,255,0.10)', borderRadius: '10px' }, '.input-container.is-focus': { borderColor: c.red }, '.input-container.is-error': { borderColor: '#ef4444' }, '.message-text': { color: 'rgba(255,255,255,0.5)' }, '.message-icon': { color: 'rgba(255,255,255,0.5)' }, '.message-text.is-error': { color: '#ef4444' }, '.message-icon.is-error': { color: '#ef4444' }, input: { backgroundColor: '#101114', color: '#F5F5F7', // Square's Web Payments SDK restricts fontFamily to a short accepted // list; 'helvetica neue, sans-serif' is one Square accepts. fontFamily: 'helvetica neue, sans-serif', fontSize: '15px', fontWeight: '500', }, 'input::placeholder': { color: 'rgba(255,255,255,0.42)' }, 'input.is-error': { color: '#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.

{/* Step indicator — Account → Payment */}

{user ? : '1'} Account

2 Payment

{!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 the wallet. Hidden entirely if neither is available. */} {walletReady && (

Express checkout

)}

{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}

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

Due today {formattedTotal} {dollars > 0 && /{intervalLabel === 'year' ? 'yr' : 'mo'}}

{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 _NavPart0() { const NAV_BG = '#0A0A0C'; const NAV_INK = '#F5F5F7'; const NAV_INK_MUTED= '#A1A1AA'; const NAV_LINE = 'rgba(255,255,255,0.08)'; const NAV_LINE_2 = 'rgba(255,255,255,0.14)'; const NAV_RED = '#FF3D45'; const NAV_GREEN = '#37D399'; const NAV_BRAND = 'INSUBORD'; // Platform is a megamenu hub for the two audiences; For Agencies now lives // under it instead of in the top-level list. Clicking "Platform" routes to // the For Businesses page. const PLATFORM_LINKS = [ { label: 'For Businesses', href: '/for-businesses', icon: Workflow, blurb: 'One platform that runs your entire business.' }, { label: 'For Agencies', href: '/for-agencies', icon: Users, blurb: 'White-label it, resell builds, earn recurring.' }, ]; const MAIN_LINKS = [ { label: 'Pricing', href: '/pricing' }, { label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }, ]; const [open, setOpen] = useState(false); const [platformOpen, setPlatformOpen] = useState(false); const navRef = useRef(null); const closeTimer = useRef(null); const openMenu = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } setPlatformOpen(true); }; const scheduleClose = () => { if (closeTimer.current) clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setPlatformOpen(false), 140); }; // 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(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]); // Close the Platform megamenu on outside click or Escape. useEffect(() => { if (!platformOpen) return; const onDown = (e: MouseEvent) => { if (navRef.current && !navRef.current.contains(e.target as Node)) setPlatformOpen(false); }; const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setPlatformOpen(false); }; document.addEventListener('mousedown', onDown); window.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDown); window.removeEventListener('keydown', onKey); }; }, [platformOpen]); 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 ( <> {/* Global type + dark backdrop. One injected stylesheet (same pattern the Hero uses for keyframes, so it survives extraction): loads the brand fonts and remaps Tailwind's font utilities site-wide. Display = Fraunces, a high-contrast serif — bold, elegant, and deliberately against the SaaS grain. Body/UI = Hanken Grotesk, clean and sleek. The mono labels are left untouched on purpose: serif headline + terminal mono label is the contrast. Overriding .font-sans means every existing heading picks up the display face with zero per-heading edits — swap the two family names here to restyle the whole site. */} {/* Fixed chrome — floating pill, overlaid on the page's first section. Fixed (out of flow) so the hero's dark background and dot texture show behind/around the pill and content scrolls under it. The first section of every page (Hero / PageHero) adds top padding to clear this chrome. */}

{/* Floating pill — inline styles for radius/blur/shadow so the runtime- extracted section keeps them (Tailwind JIT can't see section code). The pill sits over the first section; its surrounding padding is transparent, revealing the hero behind it. */}

{NAV_BRAND}

{item.label}

{/* Platform megamenu — 80% of the nav width, centered below the bar. The Platform control only opens/closes this (never navigates). Closes on outside click or Escape. Each card centers its own content; icons are dropped in favour of a styled background. Absolutely positioned against the nav (position: relative). */} {platformOpen && (

{PLATFORM_LINKS.map((p, i) => ( setPlatformOpen(false)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '54px 36px', textDecoration: 'none', borderLeft: i === 1 ? `1px solid ${NAV_LINE}` : 'none', borderTop: '2px solid transparent', transition: 'background 0.18s ease, border-color 0.18s ease', }} onMouseEnter={(e) => { e.currentTarget.style.background = 'radial-gradient(110% 130% at 50% 0%, rgba(255,61,69,0.18), rgba(255,61,69,0) 62%)'; e.currentTarget.style.borderTopColor = NAV_RED; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderTopColor = 'transparent'; }} >

{p.label}

{p.blurb}

))}

)} {/* Right side — desktop: Login link OR profile dropdown, then Get started CTA */}

{/* 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) && ( Login )} {/* Logged-in: profile avatar with dropdown */} {user && typeof user === 'object' && (

{profileOpen && ( <> {/* Click-away backdrop */}

setProfileOpen(false)} /> {/* Menu */} )}

)} {/* 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) && ( Get started )}

{/* Mobile drawer */} {open && (