// Citely landing page — shared section components. // Rendered by landing-app.jsx inside desktop/mobile artboards. // All sections accept { copy, direction, scale } props. // Wordmark D2 (Mark) — renders "Citely" with tick on the i. function Wordmark({ size = 22, color, kit = false }) { const c = color || 'var(--ink)'; const tickSize = size * 0.15; return ( C ı tely {kit && Kit} ); } // Section number eyebrow function Eyebrow({ num, label }) { return (
§ {num} · {label}
); } // Primary CTA button with arrow function CTA({ children, sub }) { return (
{sub && {sub}}
); } // Navigation function Nav({ copy, mobile }) { if (mobile) { return (
); } return (
); } // Hero function Hero({ copy, direction, mobile }) { const structured = direction === 'structured'; const c = copy.hero; return (
{structured && !mobile && (
§ 00 · Index Citely · 2026
)}
{c.eyebrow}

{c.h1}

{c.sub}

{c.cta}
{!mobile && (
{c.trust}
{['NORTHWIND', 'KUMO', 'SANTO.INC'].map((t, i) => (
{t}
))}
)} {mobile && (
NORTHWIND·KUMO·SANTO.INC
)}
); } // Line chart for The Shift section — pure SVG, monochrome. function ShiftChart() { // 2020 → 2026, share routed to answer engines. const data = [ { x: 2020, y: 1 }, { x: 2021, y: 2 }, { x: 2022, y: 4 }, { x: 2023, y: 9 }, { x: 2024, y: 18 }, { x: 2025, y: 28 }, { x: 2026, y: 38 }, ]; const w = 800, h = 300, pt = 20, pb = 30, pl = 40, pr = 20; const xs = data.map(d => d.x), ys = data.map(d => d.y); const minX = Math.min(...xs), maxX = Math.max(...xs); const maxY = 40; const px = (v) => pl + (v - minX) / (maxX - minX) * (w - pl - pr); const py = (v) => pt + (1 - v / maxY) * (h - pt - pb); const path = data.map((d, i) => (i === 0 ? 'M' : 'L') + px(d.x) + ',' + py(d.y)).join(' '); return (
{/* y grid */} {[0, 10, 20, 30, 40].map((v, i) => ( {v}% ))} {/* x ticks */} {data.map((d, i) => ( {d.x} ))} {/* line */} {/* points */} {data.map((d, i) => ( ))} {/* endpoint label */} 38% Q1 · 2026
); } // Answer-engine mock — the signature motion lives here. function AnswerEngineMock({ engine = 'PERPLEXITY', revealed = false, compact = false }) { return (
{engine}
How does Acme handle enterprise SSO?
Acme provides enterprise SSO through SAML 2.0 and OIDC, with SCIM provisioning for user lifecycle management¹. The implementation supports Okta, Azure AD, and Google Workspace, and can be enabled per-workspace by an administrator². Session policies and just-in-time user creation are configurable³.
Sources
01support.northwind.com
02acme.com / security
03community.saas-auth.dev
); } // The Shift section function SectionShift({ copy, direction, mobile, revealed }) { return (

{copy.shift.h2}

{copy.shift.sub}

Fig. 01 · Share of queries → answer engines
{copy.shift.note}
Fig. 02 · A cited answer
Citation marked with is Citely-assisted.
); } // Pillars — 진단 · 전략 · 구현 function SectionPillars({ copy, mobile, direction }) { return (

{copy.pillars.h2}

{copy.pillars.items.map((it, i) => (
— {it.num}
{it.kr}
{it.en}

{it.body}

{it.out}
))}
); } // Modes — two cards function SectionModes({ copy, mobile }) { return (

{copy.modes.h2}

{copy.modes.items.map((m, i) => (
{m.kind} · Mode
{i === 1 ? <> Kit : m.title}
{m.sub}

{m.body}

{m.meta.map((t, j) => {t})}
))}
); } // Method function SectionMethod({ copy, mobile }) { return (

{copy.method.h2}

{copy.method.items.map((it, i) => (
{it.n}
{it.t}
{!mobile &&
{it.b}
} {mobile &&
{it.b}
}
))}
); } // Cases function SectionCases({ copy, mobile }) { return (

{copy.cases.h2}

{copy.cases.items.map((c, i) => (
{c.metric}
{c.unit}
{c.who}
{c.body}
))}
); } // FAQ function SectionFAQ({ copy, mobile }) { const [open, setOpen] = React.useState(0); return (

{copy.faq.h2}

{copy.faq.items.slice(0, 5).map((f, i) => { const isOpen = open === i; return (
{f.a}
); })}
); } // CTA + Footer function SectionCTAFooter({ copy, mobile }) { return ( <>

{copy.ctaFooter.h2}

{copy.ctaFooter.cta} · {copy.ctaFooter.contact}
); } Object.assign(window, { Wordmark, Eyebrow, CTA, Nav, Hero, ShiftChart, AnswerEngineMock, SectionShift, SectionPillars, SectionModes, SectionMethod, SectionCases, SectionFAQ, SectionCTAFooter });