// Landing — the signed-out public homepage. Shares the SAME app header and the // SAME (black) footer as every other surface. The hero is the animated artlito // mark over a full-bleed auto-advancing carousel; then the anti-engagement // promise on a dark band, the audience trio (the three role blobs), recently- // added feature rows, and a closing "doors" CTA. McQueen only, lowercase. const LDS = window.ArtlitoDesignSystem_f3b428; const { Logo: LLogo, Button: LButton } = LDS; const PAGE = { maxWidth: 'var(--page-max)', margin: '0 auto', padding: '0 var(--gutter-desktop)' }; /* ─────────────────────────── hero — artlito, animated ────────────────────── */ function LandingHero({ works, onEnter }) { const [active, setActive] = React.useState(0); const [paused, setPaused] = React.useState(false); const markRef = React.useRef(null); const count = works.length; React.useEffect(() => { if (count <= 1 || paused) return; const id = window.setInterval(() => setActive((i) => (i + 1) % count), 5500); return () => window.clearInterval(id); }, [count, paused]); // mount the official Lottie wordmark — whiten only the wordmark TEXT (the // `typo` layer) so it reads over the dark hero, while keeping the brand bubbles // (the `rond …`/`Calque …` dot layers) in their true colours. React.useEffect(() => { if (!window.lottie || !markRef.current) return; let anim, cancelled = false; fetch('/artlito/assets/artlito-logo-animation.json') .then((r) => r.json()) .then((j) => { if (cancelled || !markRef.current) return; const data = JSON.parse(JSON.stringify(j)); const whiten = (o) => { if (Array.isArray(o)) { o.forEach(whiten); return; } if (o && typeof o === 'object') { if ((o.ty === 'fl' || o.ty === 'st') && o.c && o.c.a === 0 && Array.isArray(o.c.k)) { const k = o.c.k; if (k[0] < 0.18 && k[1] < 0.18 && k[2] < 0.18) o.c.k = [1, 1, 1, k[3] == null ? 1 : k[3]]; } Object.keys(o).forEach((key) => whiten(o[key])); } }; (data.layers || []).forEach((L) => { if (!/rond|calque/i.test(L.nm || '')) whiten(L); }); anim = window.lottie.loadAnimation({ container: markRef.current, renderer: 'svg', loop: true, autoplay: true, animationData: data, }); }) .catch(() => {}); return () => { cancelled = true; if (anim) anim.destroy(); }; }, []); const cur = works[active]; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ position: 'relative', height: '100vh', minHeight: 640, maxHeight: 1040, overflow: 'hidden', background: 'var(--black)' }} aria-label="artlito — featured work"> {works.map((w, i) => (
))} {/* curtain — even darkening so the white mark reads over the imagery */}
{/* centred brand composition */}
a living archive for art {/* animated artlito wordmark — white text, true-colour bubbles */}

from process to permanence — a quiet space to archive your work, connect with the ecosystem, and let your practice grow.

start your archive browse the collection
{/* current-work credit + dots */}
{cur.title} {works.map((w, i) => (
); } /* ─────────────────────────── principles band ─────────────────────────────── */ function LandingPrinciples() { return (
how artlito works

no feeds, and no public counts on anyone or anything. nothing here is ranked by popularity or sorted by whatever is getting the most attention. you find work because a curator chose it, or because it matches what you searched — never because an algorithm decided it would keep you scrolling.

profiles and works are records, not posts. identity is grounded in verified signals — a portfolio domain, an institution, an orcid — not popularity.

); } /* ─────────────────────────── audience trio ───────────────────────────────── */ const AUDIENCE = [ { icon: '/artlito/assets/audience/artist.png', title: 'artists', accent: '#5ef05c', desc: 'showcase your work, find collaborations, apply for residencies, and connect with galleries worldwide.', points: ['professional portfolio', 'research & process sharing', 'collaboration opportunities'], price: { big: 'free', sub: 'forever' } }, { icon: '/artlito/assets/audience/art_lover.png', title: 'art enthusiasts', accent: '#9b66ff', desc: 'support artists, discover new work, and engage with the contemporary art scene as a collector or curator.', points: ['curated art discovery', 'direct artist contact', 'research resources'], price: { big: '$19', sub: 'per month' } }, { icon: '/artlito/assets/audience/galleries.png', title: 'galleries & institutions', accent: '#b1b1b1', desc: 'discover emerging talent, manage exhibitions, and connect with the global art community.', points: ['artist discovery tools', 'exhibition management', 'institutional networking'], price: { big: '$49', sub: 'per month' } }, ]; function LandingAudience({ onEnter }) { return (
who it's for

one archive, four kinds of people

{AUDIENCE.map((a) => (

{a.title}

{a.desc}

    {a.points.map((p) => (
  • {p}
    • ))}
{a.price.big} · {a.price.sub}
))}
); } /* ─────────────────────────── recently added (feature rows) ───────────────── */ // Floating "gallery" shadow lifted from the individual work page, so the work // hangs off the wall instead of sitting in a flat box. Static — no hover // effects; the images are plain clickable surfaces. const LAND_ART_SHADOW = '0 40px 72px -30px rgba(0,0,0,0.42), 0 14px 30px -20px rgba(0,0,0,0.20)'; function NewsImage({ w, onOpen }) { return ( ); } // Rows render in batches — only the first LAND_NEWS_BATCH mount; reaching the // bottom of what's shown appends the next batch, so the landing opens without // laying out / fetching all 40 full-width work images at once. NewsImage blurs // each image until it actually loads. const LAND_NEWS_BATCH = 4; function LandingNews({ works, onOpenWork }) { const [count, setCount] = React.useState(LAND_NEWS_BATCH); const sentinel = React.useRef(null); React.useEffect(() => { setCount(LAND_NEWS_BATCH); }, [works]); React.useEffect(() => { if (count >= works.length) return; const el = sentinel.current; if (!el) return; const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) setCount((c) => Math.min(works.length, c + LAND_NEWS_BATCH)); }, { rootMargin: '700px 0px' }); io.observe(el); return () => io.disconnect(); }, [count, works]); return (

recently added to the archive

{ e.preventDefault(); onOpenWork(works[0]); }} style={{ fontSize: 15, textDecoration: 'underline', textUnderlineOffset: 4, textTransform: 'lowercase', whiteSpace: 'nowrap' }}>browse all
{works.slice(0, count).map((w, i) => { const rtl = i % 2 === 1; return ( ); })}
{count < works.length &&
}
); } /* ─────────────────────────── closing doors ───────────────────────────────── */ function LandingDoors({ onEnter }) { return (
{/* brand cluster — Lottie layout: dots touch (no gap), black TL · purple TR · green BL · gray BR */}

where practice has a place

begin your archive in minutes — a cover, a title, a few words. the rest grows with your practice.

start your archive browse the collection
); } /* ─────────────────────────── page ────────────────────────────────────────── */ function LandingPage(props) { const p = props || {}; const { works } = window.ARTLITO_DATA; // In the standalone bundle these are supplied as callbacks (state-routed); // as a standalone landing.html page they fall back to cross-file links. const enter = p.onEnter || (() => { window.location.href = '/discover'; }); const signUp = p.onSignUp || (() => { window.location.href = '/auth'; }); const openWork = p.onOpenWork || ((w) => { window.location.href = '/work?w=' + w.id; }); const nav = p.onNav || ((key) => { if (key === 'login' || key === 'signup') { window.location.href = '/auth'; return; } enter(); }); const footerNav = p.onFooterNav || ((k) => { window.location.href = '/discover#' + k; }); // Hero slides are drawn from the featured works (so the placeholder imagery // applies) rather than the audience icons — the hero reads as "featured work". const hero = works.slice(0, 5).map((w, i) => ({ id: 'hero-' + i, image: w.image, title: '', artist: '' })); const news = [works[0], works[8], works[5]]; return ( ); } window.LandingPage = LandingPage;