// sw-components.jsx — Shared design system components // Almanac preview: blue-hour ground, frost text, Ember as the one warm accent const C = { black: '#0e1520', // blue hour slate: '#17202d', deep: '#0a1019', line: '#273345', lineStrong: '#43516a', white: '#eae7df', // frost pink: '#17202d', // the draft's blush band becomes slate greenBright: '#3f5a3a', greenForest: '#9fb38a', // lichen greenDeep: '#eae7df', grey3: '#8e95a0', grey4: '#c3c4c2', // mist amber: '#dda149', // ember ember: '#dda149', blueGrade: '#1e2b44', parchment: '#f4efe6', // light reading sections ink: '#1c1e1a', driftwood: '#6b675f', emberDeep: '#7a4e0e', }; // The logomark's two triangles, exactly as in Logos/SVGs/KS_logo_mark.svg (500 × 500 box) const MARK_DOWN = '246.7,80.95 405.98,80.95 326.34,218.89 246.7,356.83 167.06,218.89 87.42,80.95'; const MARK_UP = '246.7,418.95 87.42,418.95 167.06,281 246.7,143.06 326.34,281 405.98,418.95'; // Real links for moving between pages: a plain click stays in the page as before, // while Cmd/Ctrl-click or a middle click opens a new tab, and keyboards can reach them const plainClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey; // Clean page addresses (/wheel, /about…), since the domain moved (13 Nov 2026). // goPage changes the address and tells the app, which listens for popstate. const goPage = (id) => { const path = id === 'home' ? '/' : `/${id}`; if (window.location.pathname !== path) window.history.pushState({}, '', path); window.dispatchEvent(new PopStateEvent('popstate')); }; window.goPage = goPage; const linkTo = (navigate, id) => (e) => { if (!plainClick(e)) return; e.preventDefault(); navigate(id); window.scrollTo(0, 0); }; const T = { font: "'Gill Sans', 'Cabin', sans-serif", serif: "'IM Fell English', Georgia, serif", serifStyle: 'italic', // back to italic (Krish, 29 Oct 2026); 'normal' sets IM Fell upright light: 300, }; // ── Shared design tokens (6 Nov 2026): the values the refined pages share, in one place ── // See "Site design rules (6 Nov 2026).md". The same values are CSS variables in index.html (:root) for the style rules there. const TOK = { cream: 'rgba(234,231,223,0.9)', // body text on dark grounds creamSoft: 'rgba(234,231,223,0.8)', // quieter body text on dark grounds (panels, descriptions) body: 17, // body text, px bodyLg: 18, // body text in open sections, px leading: 1.8, // body line height measure: '33em', // the widest a paragraph runs padSection: '88px 0', // standard section padding padKey: 'clamp(88px,9vw,120px) 0', // a page's key sections padFeature: 'clamp(88px, 10vw, 128px) 0', // the home page's sections tap: 44, // smallest tap target, px rule: (c) => `2px solid ${c}`, // the gold edge on panels and quotes }; // The Druid gates in order, with the dates used for the almanac line const GATES = [ { name: 'Imbolc', m: 1, d: 1 }, { name: 'Alban Eilir', season: 'spring equinox', m: 2, d: 20 }, { name: 'Beltane', m: 4, d: 1 }, { name: 'Alban Hefin', season: 'summer solstice', m: 5, d: 21 }, { name: 'Lughnasadh', m: 7, d: 1 }, { name: 'Alban Elfed', season: 'autumn equinox', m: 8, d: 22 }, { name: 'Samhain', m: 9, d: 31 }, { name: 'Alban Arthan', season: 'winter solstice', m: 11, d: 21 }, ]; const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; function nextGate(now = new Date()) { const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); for (const g of GATES) { const date = new Date(now.getFullYear(), g.m, g.d); if (date >= today) return { ...g, date }; } return { ...GATES[0], date: new Date(now.getFullYear() + 1, GATES[0].m, GATES[0].d) }; } // Reworded (Krish, 5 Nov 2026): full month, season in plain words, no year. It must start "Next gate", // as the footer's hover countdown (sw-interactions.js) finds the line by those words const MONTHS_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; function gateLine() { const g = nextGate(); return `Next gate: ${g.name}${g.season ? `, the ${g.season}` : ''}, ${g.date.getDate()} ${MONTHS_FULL[g.date.getMonth()]}`; } // ── The wheel: eight gates, Alban Hefin at the top, the next gate marked in Ember ── function Wheel({ size = 560, opacity = 0.35, color = C.white }) { // Clockwise from the top: Alban Hefin, Lughnasadh, Alban Elfed, Samhain, Alban Arthan, Imbolc, Alban Eilir, Beltane const order = ['Alban Hefin', 'Lughnasadh', 'Alban Elfed', 'Samhain', 'Alban Arthan', 'Imbolc', 'Alban Eilir', 'Beltane']; const active = order.indexOf(nextGate().name); const pt = (i, r) => [300 + r * Math.sin(i * Math.PI / 4), 300 - r * Math.cos(i * Math.PI / 4)]; return ( ); } // ── Manifesto shapes, drawn as lines so they sit on any ground ── function AlmanacShape({ kind, color = C.greenForest, size = 96 }) { const s = { fill: 'none', stroke: color, strokeWidth: 1.2 }; const star = [0, 30, 60, 90, 120, 150].map(a => { const r = a * Math.PI / 180; return [30 + 22 * Math.cos(r), 30 + 22 * Math.sin(r), 30 - 22 * Math.cos(r), 30 - 22 * Math.sin(r)]; }); return ( ); } const maxW = { maxWidth: 1200, margin: '0 auto', padding: '0 clamp(24px, 8vw, 120px)', }; // ── Logomark SVG (Krish's own mark) ────────────────────────── function Logomark({ size = 32, color = C.white, weight = 14 }) { return ( ); } // ── Full wordmark SVG ───────────────────────────────────────── function FullLogo({ height = 40, color = C.white }) { // Renders just the KRISH SURROY wordmark paths + logomark from the uploaded SVG // Cropped to the text+mark region: roughly x:560-1260, y:240-840 return ( {/* Logomark */} {/* KRISH */} {/* SURROY */} {/* Circle O with dot */} {/* Horizontal rule */} ); } // ── Nav ─────────────────────────────────────────────────────── function Nav({ page, navigate }) { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const h = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h); }, []); const links = [ { id: 'one-to-one', label: 'One-to-one', items: [ { id: 'coaching', label: 'Soul Aligned Coaching' }, { id: 'readings', label: 'Intuitive Readings' }, { id: 'supervision', label: 'Supervision' }, ] }, { id: 'group-programmes', label: 'Group programmes', items: [ { id: 'soul-compass', label: 'The Soul’s Compass' }, { id: 'wheel', label: 'The Wheel of Becoming' }, ] }, { id: 'transmissions', label: 'Transmissions' }, { id: 'about', label: 'About' }, ]; const goTo = (id) => { setMenuOpen(false); setDropOpen(null); navigate(id); window.scrollTo(0,0); }; // The two headings open the Work with me page at their own section const goToGroup = (id) => { goTo('work'); // Wait for the fonts and the photos above the section to load first (at most 1.5 seconds), // so the section is measured where it will really sit; then jump straight there, as a smooth // glide got cut short when the scroll animations recalculated setTimeout(async () => { const el = document.getElementById(id); if (!el) return; const above = [...document.querySelectorAll('#root img')] .filter(i => !i.complete && (i.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING)); const loaded = i => new Promise(r => { i.addEventListener('load', r, { once: true }); i.addEventListener('error', r, { once: true }); }); await Promise.race([Promise.all([document.fonts.ready, ...above.map(loaded)]), new Promise(r => setTimeout(r, 1500))]); window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 68, behavior: 'instant' }); }, 50); }; const [dropOpen, setDropOpen] = React.useState(null); return ( <> {menuOpen && (
{links.concat([{ id: 'book', label: 'Book a free call' }]).map(l => ( {l.items && l.items.map(w => ( ))} ))}
)} ); } // ── Green Photo Wrapper ─────────────────────────────────────── function GreenPhoto({ src, style, imgStyle, warm }) { // Almanac grade: lightly desaturated, cooled towards blue hour; "warm" keeps the photo's own colour const overlayColor = C.blueGrade; const overlayOpacity = warm ? 0.12 : 0.5; return (
); } // ── Hero Section ────────────────────────────────────────────── function HeroSection({ image, eyebrow, title, subtitle, cta, onCta, direction, minH }) { return (
{/* The wheel, with the next gate marked */}
{eyebrow !== false && ( {eyebrow ? `${eyebrow} · ` : ''}{gateLine()} )}

{title}

{subtitle && (

{subtitle}

)} {cta && ( )}
); } // ── Typography helpers ──────────────────────────────────────── function SectionLabel({ children, color }) { return ( {children} ); } function SectionHeading({ children, style = {}, color }) { return (

{children}

); } function BodyText({ children, style = {} }) { return (

{children}

); } function Hairline({ color = 'rgba(255,255,255,0.1)', style = {} }) { return
; } function GreenAccentLine({ width = 40 }) { return
; } // ── Buttons ─────────────────────────────────────────────────── function PillBtn({ children, onClick, dark }) { return ( ); } function OutlineBtn({ children, onClick, color = C.white, hoverText = C.black }) { const [hov, setHov] = React.useState(false); return ( ); } // ── Contact Section ─────────────────────────────────────────── function ContactSection({ navigate }) { const [form, setForm] = React.useState({ name: '', email: '', message: '' }); const [sent, setSent] = React.useState(false); const inp = { background: C.slate, border: `1px solid ${C.line}`, color: C.white, padding: '16px 18px', fontSize: 17, fontFamily: T.font, fontWeight: 400, letterSpacing: '0.01em', outline: 'none', width: '100%', boxSizing: 'border-box', borderRadius: 2 }; return (
Begin Begin the conversation If something here has landed, reach out. A short message is enough to begin. {sent ? (

Your message has been received.
Krish will be in touch.

) : (
{ e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 14, textAlign: 'left' }}> setForm({ ...form, name: e.target.value })} style={inp} /> setForm({ ...form, email: e.target.value })} style={inp} />