// ESacademy — Variation A: Sanctuary // Off-white cream bg, deep muted forest green, meditative, spacious. // Sans: Heebo. Temple-like quiet. const C = window.ESA_CONTENT; const BpContext = window.BpContext; const A_PALETTE = { bg: '#f4f1ea', bgAlt: '#ebe7dd', bgWarm: '#e6e0d2', ink: '#1f2a24', inkSoft: '#3c4a42', muted: '#6b7870', rule: '#c8c2b4', accent: '#2d4a3e', accentSoft: '#5b7a6a', paper: '#faf8f3', gold: '#7a6a3a' }; function ANumeral({ children, muted }) { return ( {children} ); } function AKicker({ children }) { return (
{children}
); } function AButton({ children, primary, onClick }) { const bp = React.useContext(BpContext); const isMobile = bp === 'mobile'; const [hover, setHover] = React.useState(false); const [magRef, magDelta, magH] = useMagnetic(isMobile ? 0 : 0.28); const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 14, height: 56, padding: '0 30px', borderRadius: 2, fontSize: 15.5, fontWeight: 500, letterSpacing: '0.02em', cursor: 'pointer', transition: 'background 220ms ease, color 220ms ease, border-color 220ms ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1)', fontFamily: 'inherit', border: `1px solid ${A_PALETTE.ink}`, boxSizing: 'border-box', transform: isMobile ? 'none' : `translate(${magDelta.x}px, ${magDelta.y}px)`, width: isMobile ? '100%' : 'auto', }; const primaryStyle = primary ? { background: hover ? A_PALETTE.accent : `linear-gradient(135deg, ${A_PALETTE.ink} 0%, #253d30 100%)`, color: A_PALETTE.bg, borderColor: hover ? A_PALETTE.accent : A_PALETTE.ink } : { background: hover ? A_PALETTE.ink : 'transparent', color: hover ? A_PALETTE.bg : A_PALETTE.ink }; return ( ); } function ASection({ children, bg, id, narrow, tall }) { const bp = React.useContext(BpContext); const hPad = bp === 'mobile' ? 20 : bp === 'tablet' ? 32 : 64; const vPad = bp === 'mobile' ? 56 : bp === 'tablet' ? 80 : (tall ? 160 : 120); return (
{children}
); } // ──────────────────── NAV ──────────────────── const NAV_SECTION_MAP = { 'האדם גרסה 2.0': 'adam', 'תוכנית 369': '369', 'המצפן': 'compass', 'האדם גרסה 3.0': 'roots', }; function ANav() { const bp = React.useContext(BpContext); const isMobile = bp === 'mobile'; const isCompact = isMobile || bp === 'tablet'; const [scrolled, setScrolled] = React.useState(false); const [activeId, setActiveId] = React.useState(''); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { if (!isCompact && menuOpen) setMenuOpen(false); }, [isCompact]); React.useEffect(() => { const root = document.getElementById('esa-a-root'); if (!root) return; if (menuOpen) { root.style.overflow = 'hidden'; } else { root.style.overflow = 'auto'; } return () => { root.style.overflow = 'auto'; }; }, [menuOpen]); React.useEffect(() => { const el = document.getElementById('esa-a-root'); if (!el) return; const onScroll = () => setScrolled(el.scrollTop > 40); el.addEventListener('scroll', onScroll); return () => el.removeEventListener('scroll', onScroll); }, []); React.useEffect(() => { const ids = Object.values(NAV_SECTION_MAP); const io = new IntersectionObserver( (entries) => { entries.forEach(e => { if (e.isIntersecting) setActiveId(e.target.id); }); }, { threshold: 0.35 } ); ids.forEach(id => { const el = document.getElementById(id); if (el) io.observe(el); }); return () => io.disconnect(); }, []); const navItems = ['האדם גרסה 2.0', 'תוכנית 369', 'המצפן', 'האדם גרסה 3.0', 'אודות']; const navBase = { position: 'sticky', top: 0, zIndex: 50, background: scrolled || menuOpen ? 'rgba(244,241,234,0.96)' : 'transparent', backdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none', borderBottom: scrolled && !menuOpen ? `1px solid ${A_PALETTE.rule}` : '1px solid transparent', transition: 'background 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease', }; if (isCompact) { const hPad = isMobile ? 20 : 32; return ( ); } return ( ); } // ──────────────────── HERO ──────────────────── function AHero() { const bp = React.useContext(BpContext); const isMobile = bp === 'mobile'; const isTablet = bp === 'tablet'; const isDesktop = bp === 'desktop'; const h = C.hero; const parallax = useParallax(12); const hPad = isMobile ? 20 : isTablet ? 32 : 64; if (isDesktop) { return (
{/* עמודת טקסט — ימין ב-RTL */}
{h.kicker}

{h.title[0]}
{h.title[1]}
{h.title[2]}

{h.sub}

{h.primary} {h.secondary}
מערכת הפעלה פנימית  ·  מסלול 369  ·  המצפן
גלול ↓
{/* עמודת תמונה — שמאל ב-RTL */}
{/* gradient: נמוג לכיוון הטקסט (קצה ימני של עמודת התמונה) */}
); } // מובייל / טאבלט — layout מקורי return (
{!isMobile && (
)}
{h.kicker}

{h.title[0]}
{h.title[1]}
{h.title[2]}

{h.sub}

{!isMobile && (
מערכת הפעלה פנימית  ·  מסלול 369  ·  המצפן  ·  חיים על קו ההתפתחות
גלול ↓
)}
); } // ──────────────────── RESONANCE ──────────────────── function AResonance() { const bp = React.useContext(BpContext); const isMobile = bp === 'mobile'; const r = C.resonance; const gridCols = isMobile ? 'repeat(1, 1fr)' : bp === 'tablet' ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)'; return ( {r.kicker}

{r.title}

 {r.sub && (

{r.sub}

 )}
{r.items.map((item, i) => (
0{i + 1}
{item}
 ))}
); } // ──────────────────── FIT ──────────────────── function AFitCard({ c }) { const bp = React.useContext(BpContext); const isMobile = bp === 'mobile'; const [cardRef, tilt, tiltH] = useCardTilt(4); return (
{c.n}
{c.title}
{c.body}
); } function AFit() { const bp = React.useContext(BpContext); const isMobile = bp === 'mobile'; const f = C.fit; const gridCols = isMobile ? 'repeat(1, 1fr)' : bp === 'tablet' ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)'; return ( {f.kicker}

{f.title}

{f.sub}
{f.cards.map((c, i) => ( ))}
); } // ──────────────────── JOURNEY ──────────────────── function AJourney() { const bp = React.useContext(BpContext); const isMobile = bp === 'mobile'; const isCompact = isMobile || bp === 'tablet'; const j = C.journey; const sectionRef = React.useRef(null); const [activeStep, setActiveStep] = React.useState(0); React.useEffect(() => { const root = document.getElementById('esa-a-root'); const target = root || window; const update = () => { const section = sectionRef.current; if (!section) return; const rect = section.getBoundingClientRect(); const totalScroll = section.offsetHeight - window.innerHeight; const scrolled = -rect.top; const progress = Math.min(1, Math.max(0, scrolled / totalScroll)); setActiveStep(Math.min(3, Math.floor(progress * 4))); }; target.addEventListener('scroll', update, { passive: true }); update(); return () => target.removeEventListener('scroll', update); }, []); const hPad = isMobile ? 20 : 32; return (
{j.kicker}

{j.title}

{!isMobile && (
{j.sub}
)}
{isCompact ? (
{/* Progress dots */}
{j.steps.map((_, i) => (
))}
{j.steps.map((s, i) => (
{s.n}
{s.name}
{s.tag}
{s.body}
))}
) : (
{j.steps.map((s, i) => { const isFeatured = activeStep === i; const isPast = i < activeStep; return (
activeStep ? 0.38 : 1, transition: 'opacity 0.5s ease', }}>
{isFeatured && (
)}
{s.n}
{s.name}
{s.tag}
{s.body}
); })}
)}
); } // ──────────────────── START PATHS ──────────────────── function AStart() { const bp = React.useContext(BpContext); const isMobile = bp === 'mobile'; const s = C.start; const [active, setActive] = React.useState(0); const gridCols = isMobile ? '1fr' : bp === 'tablet' ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'; return ( {s.kicker}

{s.title}
{s.paths.map((p, i) => { const isActive = isMobile ? true : (active === i); return (
setActive(i)} onMouseLeave={() => setActive(0)} onClick={() => { if (i === 0) window.location.href = '/adam-2.0.html'; else if (i === 2) window.location.href = '/369'; }} style={{ padding: isMobile ? '32px 24px' : '48px 36px', background: isActive ? `linear-gradient(135deg, ${A_PALETTE.ink} 0%, #253d30 100%)` : A_PALETTE.paper, color: isActive ? A_PALETTE.bg : A_PALETTE.ink, border: `1px solid ${isActive ? A_PALETTE.ink : A_PALETTE.rule}`, boxShadow: isActive ? '0 12px 40px rgba(31,42,36,0.22)' : '0 2px 16px rgba(31,42,36,0.07)', transform: isActive ? 'translateY(-3px)' : 'none', transition: 'all 300ms ease', cursor: 'pointer', minHeight: isMobile ? 'auto' : 360, display: 'flex', flexDirection: 'column', gap: 20 }}>
{p.letter}
{p.who}
{p.body}
{p.cta} ←
); })}
{s.note}
 ); } // Export window.EsaVariationA = { ANav, AHero, AResonance, AFit, AJourney, AStart, A_PALETTE, AKicker, AButton, ASection, ANumeral };