import { A } from '@solidjs/router'; import { For, Show, createMemo, createSignal, onCleanup, onMount } from 'solid-js'; import PublicHeader from '~/components/PublicHeader'; const chapters = [ { id: 'chapter-problem', title: '01 The problem' }, { id: 'chapter-built', title: '02 What we built' }, { id: 'chapter-trust', title: '03 How trust works' }, { id: 'chapter-principles', title: '04 Principles' }, { id: 'chapter-timeline', title: '05 Timeline' }, ] as const; const trustSequence = [ { num: '01', title: 'Submission', body: 'A user submits profile, job, or requirement details with required context.' }, { num: '02', title: 'Human Review', body: 'A reviewer checks quality, relevance, and verification requirements.' }, { num: '03', title: 'Approval', body: 'Validated submissions are approved and moved to publish-ready state.' }, { num: '04', title: 'Visible to Marketplace', body: 'Approved entities become discoverable and can receive responses.' }, ] as const; const milestones = [ { title: 'Research', body: 'Mapped trust breakdowns in hiring and service discovery journeys.' }, { title: 'MVP', body: 'Built a marketplace core with structured onboarding and review signals.' }, { title: 'Private pilot', body: 'Tested operational workflows with role-specific submissions.' }, { title: 'Launch', body: 'Released trust-layered marketplace experience to wider users.' }, { title: 'Next: expanding categories', body: 'Adding more categories while keeping quality controls strong.' }, ] as const; const chapterFourNarrative = [ 'We didn’t build another marketplace.', 'We built a filter.', 'A review layer.', 'Clarity replaces noise.', ] as const; const chapterTwoRows = ['Profile status', 'Requirement status', 'Activity transparency'] as const; export default function AboutPage() { const [showBackToTop, setShowBackToTop] = createSignal(false); const [reduceMotion, setReduceMotion] = createSignal(false); const [activeChapter, setActiveChapter] = createSignal(0); const [scrollY, setScrollY] = createSignal(0); const [heroVisible, setHeroVisible] = createSignal(false); const [problemVisible, setProblemVisible] = createSignal(false); const [builtVisible, setBuiltVisible] = createSignal(false); const [trustVisible, setTrustVisible] = createSignal(false); const [principlesVisible, setPrinciplesVisible] = createSignal(false); const [timelineVisible, setTimelineVisible] = createSignal(false); const [closingVisible, setClosingVisible] = createSignal(false); const [problemProgress, setProblemProgress] = createSignal(0); const [trustProgress, setTrustProgress] = createSignal(0); const [principleProgress, setPrincipleProgress] = createSignal(0); const [builtTilt, setBuiltTilt] = createSignal({ x: 0, y: 0 }); let heroRef: HTMLElement | undefined; let chapterProblemRef: HTMLElement | undefined; let chapterBuiltRef: HTMLElement | undefined; let chapterTrustRef: HTMLElement | undefined; let chapterPrinciplesRef: HTMLElement | undefined; let chapterTimelineRef: HTMLElement | undefined; let closingRef: HTMLElement | undefined; onMount(() => { const media = window.matchMedia('(prefers-reduced-motion: reduce)'); const syncMotion = () => setReduceMotion(media.matches); syncMotion(); const chapterRefs = () => [chapterProblemRef, chapterBuiltRef, chapterTrustRef, chapterPrinciplesRef, chapterTimelineRef]; const revealMap = new Map void>(); if (heroRef) revealMap.set(heroRef, setHeroVisible); if (chapterProblemRef) revealMap.set(chapterProblemRef, setProblemVisible); if (chapterBuiltRef) revealMap.set(chapterBuiltRef, setBuiltVisible); if (chapterTrustRef) revealMap.set(chapterTrustRef, setTrustVisible); if (chapterPrinciplesRef) revealMap.set(chapterPrinciplesRef, setPrinciplesVisible); if (chapterTimelineRef) revealMap.set(chapterTimelineRef, setTimelineVisible); if (closingRef) revealMap.set(closingRef, setClosingVisible); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; const setter = revealMap.get(entry.target as HTMLElement); if (setter) setter(true); }); }, { threshold: 0.12 } ); revealMap.forEach((_, el) => observer.observe(el)); const onScroll = () => { setShowBackToTop(window.scrollY > 500); setScrollY(window.scrollY || 0); const middle = window.innerHeight * 0.42; let nextActive = 0; chapterRefs().forEach((section, index) => { if (!section) return; const rect = section.getBoundingClientRect(); if (rect.top <= middle) nextActive = index; }); setActiveChapter(nextActive); if (chapterProblemRef && !reduceMotion()) { const rect = chapterProblemRef.getBoundingClientRect(); const viewport = window.innerHeight; const start = viewport * 0.9; const end = viewport * 0.18; const range = rect.height + (start - end); const raw = (start - rect.top) / range; setProblemProgress(Math.max(0, Math.min(1, raw))); } else if (reduceMotion()) { setProblemProgress(1); } if (chapterTrustRef && !reduceMotion()) { const rect = chapterTrustRef.getBoundingClientRect(); const viewport = window.innerHeight; const start = viewport * 0.75; const end = viewport * 0.18; const range = rect.height + (start - end); const raw = (start - rect.top) / range; setTrustProgress(Math.max(0, Math.min(1, raw))); } else if (reduceMotion()) { setTrustProgress(1); } if (chapterPrinciplesRef && !reduceMotion()) { const rect = chapterPrinciplesRef.getBoundingClientRect(); const viewport = window.innerHeight; const sectionTopAbs = window.scrollY + rect.top; const start = sectionTopAbs - viewport * 0.9; const end = sectionTopAbs + rect.height - viewport * 0.52; const range = Math.max(1, end - start); const raw = (window.scrollY - start) / range; setPrincipleProgress(Math.max(0, Math.min(1, raw))); } else if (reduceMotion()) { setPrincipleProgress(1); } }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); media.addEventListener('change', syncMotion); onCleanup(() => { window.removeEventListener('scroll', onScroll); media.removeEventListener('change', syncMotion); observer.disconnect(); }); }); const progress = createMemo(() => { if (chapters.length <= 1) return 0; return (activeChapter() / (chapters.length - 1)) * 100; }); const progressBetween = (value: number, start: number, end: number) => { const span = Math.max(0.001, end - start); return Math.max(0, Math.min(1, (value - start) / span)); }; const effectiveProblemProgress = createMemo(() => (reduceMotion() ? 1 : problemProgress())); const effectiveTrustProgress = createMemo(() => (reduceMotion() ? 1 : trustProgress())); const effectivePrincipleProgress = createMemo(() => (reduceMotion() ? 1 : principleProgress())); const chapterOneHeadlineIn = createMemo(() => progressBetween(effectiveProblemProgress(), 0.12, 0.42)); const chapterOneBodyIn = createMemo(() => progressBetween(effectiveProblemProgress(), 0.24, 0.56)); const chapterOneShapeFade = createMemo(() => (reduceMotion() ? 0 : 0.08 * (1 - effectiveProblemProgress()))); const principleStage = createMemo(() => { const p = effectivePrincipleProgress(); if (p < 0.25) return 0; if (p < 0.5) return 1; if (p < 0.75) return 2; return 3; }); const stateTwoUnderline = createMemo(() => progressBetween(effectivePrincipleProgress(), 0.26, 0.46)); const stateThreeLine = createMemo(() => progressBetween(effectivePrincipleProgress(), 0.52, 0.74)); return (
); }