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 } = 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: 'Home', href: '/-home' }, { label: 'Platform', href: '/-platform' }, { 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', '14-day trial — no card up front', ], cta: 'Start a 14-day trial', }, { 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: 'Talk to the founder', }, ]; 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 * ───────────────────────────────────────────────────────────────────────── */ export function HomePage() { return ( <> ); } export 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." /> ); } export 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." /> ); } export function PricingPage() { return ( <> One bill.
Everything included.} lead="No add-ons for things that should have been included. No surprises." /> ); } export 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 function ContactPage() { return ( <> Let's see if
this is for you.} lead="Book a 15-minute call. We look at how you run things now, walk through Insubord, and figure out honestly whether it fits." /> ); } /* ───────────────────────────────────────────────────────────────────────── * 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'; const NAV_PHONE = '239-555-0029'; const NAV_PHONE_PRETTY = '239 · 555 · 0029'; const NAV_LOCATION = 'Built in Florida · Used everywhere'; const NAV_ROUTES: { label: string; href: string }[] = [ { label: 'Platform', href: '/platform' }, { label: 'For Agencies', href: '/for-agencies' }, { label: 'Pricing', href: '/pricing' }, { label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }, ]; 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(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 */}

One platform · One bill

{NAV_LOCATION}

{NAV_PHONE_PRETTY}

{/* Main nav */}

{item.label}

{/* Right side — desktop: Login link OR profile dropdown, then Try Free 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 */} )}

)} {/* Try Free CTA — replaces former "Book a call". Only shown to logged-out (or still-loading) visitors; a signed-in user already has an account so the trial CTA isn't relevant. */} {(user === false || user === null) && ( Try free )}

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