// sig-doorways.jsx — Section 03. Three Doorways. // // Three Levels of depth. Same foundation. Same community. Same // seven days. Chosen by you. // // Per direction: equal visual weight across the three. Each // layout option preserves that — no Level III "premium tier" // styling. The differentiation is in copy + depth-of-included, // not in size or color hierarchy. // // Layout options (tweak: doorways): // columns — three equal columns (default, conversion-led) // editorial — three full-width rows, each a doorway essay // architectural — three architectural arch "portals" side-by-side, // each cinematic, each opens to the level's brief. const DOORWAYS = [ { level: 'Level I', name: 'Learn', sub: 'The Foundation', price: '$49', seats: '7 seats', headline: 'Build the foundation for a way of living with technology — grounded, intentional, yours.', includes: [ 'Your full Core Curriculum', 'Seven days inside The Tech Lifestyle', 'The inaugural cohort experience', ], outcome: 'You leave with: skills, a community, and a foundation that\'s yours.', away: 'A foundation. Skills you can use the same day you learn them. A community that\'s still there when the seven days end.', cta: 'Walk in through Foundation', href: 'https://connect.livingdigitally.co/make-an-inquiry/ols/products/7-days-of-living-digitally-level-i-learn-the-foundation', }, { level: 'Level II', name: 'Apply', sub: 'The Founding 21', price: '$97', seats: '21 seats', headline: 'Take the foundation into the world — and leave with a custom AI prompt for one real moment in your life.', includes: [ 'Everything in The Foundation', '15-minute Prompt Precision Session — one prompt, refined for your real life, yours to use again.', ], outcome: 'You leave with: skills, a community, and a custom prompt that\'s yours.', away: 'A foundation, applied. A custom resource you\'ll use long after the cohort ends. A community that\'s still there when the seven days end.', cta: 'Walk in with The Founding 21', href: 'https://connect.livingdigitally.co/make-an-inquiry/ols/products/7-days-of-living-digitally-level-ii-apply-the-founding-21', }, { level: 'Level III', name: 'Access', sub: 'The Seven of Access', price: '$397', seats: '7 seats', headline: 'Design a personalized AI system that runs alongside your real life, every day.', includes: [ 'Everything in The Foundation', '45–60 minute AI Workflow Design Session — a personalized AI system, designed with you, built for your daily life.', ], outcome: 'You leave with: skills, a community, and a personalized AI system that\'s yours.', away: 'A foundation, scaled. A personalized AI system — yours to run every day. A community that\'s still there when the seven days end.', cta: 'Walk in through Access', href: 'https://connect.livingdigitally.co/make-an-inquiry/ols/products/7-days-of-living-digitally-level-iii-access-the-seven-of-access', }, ]; // Shared frame — pearl ground breaks the navy register here. // This is THE conversion section, so the page lifts into pearl // for a moment, then returns to navy in the next beat. const DoorwaysFrame = ({ children }) => (

Choose the Doorway
that feels like home.

Same Core Curriculum. Same cohort. Same community.
Your Level shapes the depth.

{children} {/* Footnote */}

A note on Level III: the AI Workflow Design Session{' '} replaces{' '} the Level II Prompt Precision Session. Every Resident, at every Level, shares the same Core Curriculum, cohort, and community.

); // Roman numeral helper const ROMAN = ['I', 'II', 'III']; // ───────────────────────────────────────────────────────────── // LAYOUT A · COLUMNS (default) // Three equal columns. Conversion-led but editorially designed. // All three identical scaffolding — only copy differs. Equal // weight, equal visual treatment. // ───────────────────────────────────────────────────────────── const DoorwaysColumns = () => (
{DOORWAYS.map((D, i) => (
{/* Roman numeral */}
{D.level} · {D.name}

{D.sub}

{D.price} · {D.seats}

{D.headline}

Included
    {D.includes.map((it, j) => (
    • ))}
You walk away with

{D.away}

{D.cta}
))}
); // ───────────────────────────────────────────────────────────── // LAYOUT B · EDITORIAL // Three full-width rows. Each Doorway is its own essay — long // columns of editorial text with the Roman numeral as a large // initial, price/seats as a hairline rail, included list inline. // Equal weight; the form repeats identically for each level. // ───────────────────────────────────────────────────────────── const DoorwaysEditorial = () => (
{DOORWAYS.map((D, i) => (
{/* LEFT — Roman numeral + level eyebrow */}
{D.level}
{D.name}
{/* CENTER — essay */}

{D.sub}

{D.headline}

Included
    {D.includes.map((it, j) => (
    • ))}

You walk away with — {D.away}

{/* RIGHT — price card + CTA */}
{D.price}
{D.seats}
{D.cta}
))}
); // ───────────────────────────────────────────────────────────── // LAYOUT C · ARCHITECTURAL // Three architectural arches side by side. Each "doorway" is a // literal portal — a tall arched card with the Roman numeral // glowing in the arch and the level brief beneath. Cinematic; // keeps equal weight by making every arch identical in form. // ───────────────────────────────────────────────────────────── const DoorwaysArchitectural = () => (
{DOORWAYS.map((D, i) => ( {/* Inner arch glow */} ))}
); // ───────────────────────────────────────────────────────────── // LAYOUT D · DOORS — literal door panels that "open" on hover/tap // Each Doorway is rendered as a tall door with a frame, panels, // and a brass handle. Resting state: the door is closed; only the // Level (I/II/III) and sub-title are visible on the door face. // On hover (desktop) or tap (mobile) the door "opens" — the // content (price, included list, walk-away, CTA) reveals from // behind. Equal weight; all three doors identical in form. // ───────────────────────────────────────────────────────────── const DoorsCard = ({ D, i, openId, setOpenId }) => { const id = D.level; const isOpen = openId === id; const handleEnter = () => setOpenId(id); const handleLeave = () => setOpenId(null); const handleClick = (e) => { // On touch / narrow viewports, click toggles open state. if (window.matchMedia('(hover: none)').matches) { e.preventDefault(); setOpenId(isOpen ? null : id); } }; return ( {/* ── DOOR FACE (closed state) ─────────────────────────── */}
{/* Inner door panels — three stacked rectangles, classic paneled door */}
{[0,1,2].map((p) => ( ))}
{/* brass pull-loop at the bottom — the thing you grab to lift a roll-up door */}
{/* ── INTERIOR (revealed state) ───────────────────────── */}
{/* aqua threshold line at the bottom */}
); }; const DoorwaysDoors = () => { const [openId, setOpenId] = React.useState(null); return (
{DOORWAYS.map((D, i) => ( ))}
); }; // ───────────────────────────────────────────────────────────── // Router // ──────────────────────────────────────────���────────────────── const SigDoorways = ({ variant = 'doors' }) => { if (variant === 'doors') return ; if (variant === 'editorial') return ; if (variant === 'architectural') return ; return ; }; Object.assign(window, { SigDoorways });