// sig-lifestyles.jsx — Section 05. Five Lifestyles, One Culture. // // Bridges from the inventory ("Every Resident Receives") to the // arrival ("Welcome to The Tech Lifestyle"). The five named // Lifestyles — each a Resident archetype with her own landing // page — are surfaced here as doorways into the broader system. // // Layout options (tweak: lifestyles): // row — horizontal row of 5 plates, editorial (default) // editorial — vertical scroll list w/ portrait + role + line // constellation — billboard-collage; each lifestyle is a panel in // a cinematic billboard wall const LIFESTYLES = [ { who: 'Brenda', role: 'The Matriarch Upgrading', tag: 'For the woman already considered.', href: '/lifestyles/brenda', img: 'assets/persona-brenda.jpg' }, { who: 'Jasmine', role: 'The Builder', tag: 'For the woman already building.', href: '/lifestyles/jasmine', img: 'assets/persona-jasmine.png' }, { who: 'Keisha', role: 'The Architect Mom', tag: 'For the mother building while managing.', href: '/lifestyles/keisha', img: 'assets/persona-keisha.png' }, { who: 'Tamara', role: 'The Pivot', tag: 'For the woman in reinvention.', href: '/lifestyles/tamara', img: 'assets/persona-tamara-billboard-v2.png' }, { who: 'Destiny', role: 'The Quiet Riser', tag: 'For the quiet riser, upskilling with purpose.', href: '/lifestyles/destiny', img: 'assets/persona-destiny-retreat.png' }, ]; // Shared section frame const LifestylesFrame = ({ children }) => (
Five Lifestyles · One Culture
{children}
); // ───────────────────────────────────────────────────────────── // LAYOUT A · ROW // Horizontal row of 5 plates. Each plate: portrait, name, role, // tag, "Visit her room →". // ───────────────────────────────────────────────────────────── const LifestylesRow = () => (
{LIFESTYLES.map((l) => ( { e.currentTarget.style.borderColor = 'var(--ld-aqua)'; e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(95,224,230,0.20)'; e.currentTarget.style.transform = 'translateY(0)'; }} >
{`${l.who}
{l.who}
{l.role}

{l.tag}

Visit her room
))}
); // ───────────────────────────────────────────────────────────── // LAYOUT B · EDITORIAL // Vertical scroll list. Each row: index (01–05) · portrait · name + // role + tag · arrow. Like a magazine's table of contents. // ───────────────────────────────────────────────────────────── const LifestylesEditorial = () => (
{LIFESTYLES.map((L, i) => ( { e.currentTarget.style.background = 'rgba(95,224,230,0.05)'; e.currentTarget.style.paddingLeft = '12px'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; }} className="sig-lifestyles-ed-row" >
{`${L.who}
{l.who} · {L.role}
{l.tag}
 ))}
); // ───────────────────────────────────────────────────────────── // LAYOUT C · CONSTELLATION / BILLBOARD WALL // Billboard collage: a cinematic wall of 5 panels arranged in a // magazine-cover grid. The center panel is taller (the "main" // billboard); flanking panels are smaller, like a Times Square // wall. Hovers brighten the panel. // ───────────────────────────────────────────────────────────── const LifestylesConstellation = () => (
{/* layout: row1: [Brenda 2] [Jasmine 2] [Keisha 2] row2: [Tamara 3] [Destiny 3] */} {LIFESTYLES.map((L, i) => { const spans = [ { col: 'span 2', row: 'span 1' }, // Brenda { col: 'span 2', row: 'span 1' }, // Jasmine { col: 'span 2', row: 'span 1' }, // Keisha { col: 'span 3', row: 'span 1' }, // Tamara { col: 'span 3', row: 'span 1' }, // Destiny ][i]; return ( { e.currentTarget.style.borderColor = 'var(--ld-aqua)'; e.currentTarget.style.boxShadow = '0 16px 36px rgba(0,0,0,0.4), 0 0 32px rgba(95,224,230,0.36)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(95,224,230,0.32)'; e.currentTarget.style.boxShadow = '0 16px 36px rgba(0,0,0,0.4)'; }} > {`${L.who} ); // ───────────────────────────────────────────────────────────── // Router // ───────────────────────────────────────────────────────────── const SigLifestyles = ({ variant = 'row' }) => { if (variant === 'editorial') return ; if (variant === 'constellation') return ; return ; }; Object.assign(window, { SigLifestyles });