// Lithosbase — Demo guidata // Interactive tour over a frozen mock of the app/catalog. // 7 routes: intro, step-1..5, finish. // ============== i18n ============== const DEMO_I18N = { it: { banner: "Stai esplorando la demo · Laboratorio Rossi · sola lettura", bannerSkip: "Salta al finale", bannerExit: "Esci", stepLabel: (n) => `PASSO ${n} / 05`, prev: "Indietro", next: "Prossimo", finish: "Finale", introEyebrow: "Tour interattivo · 5 minuti", introH1a: "Esplora Lithosbase senza ", introH1accent: "registrarti", introH1b: ".", introBody: 'Ambiente demo in sola lettura del workspace "Laboratorio Rossi". Materiali, movimenti, catalogo e team reali — solo per guardare. Cinque passi guidati. Esci quando vuoi.', introStart: "Inizia il tour", introBack: "Torna al sito", tourSections: ["Stock","Movimenti","Catalogo","Team","Export"], finaleEyebrow: "Tour completato", finaleH1a: "Hai visto come ", finaleH1accent: "funziona", finaleH1b: ". Vuoi provare con i tuoi dati?", finaleBody: "Crea il tuo workspace e importa lo stock esistente da un CSV. Due minuti. Niente carta di credito, niente periodo di prova a tempo.", finaleCreate: "Crea il tuo workspace", finaleRestart: "Rifai il tour", finaleExit: "torna al sito", steps: [ { title: "Stock in tempo reale.", body: "Tutto il magazzino in una sola tabella. Ogni materiale ha SKU, dimensioni, soglia e status. Le righe sotto soglia sono evidenziate — niente fogli Excel da chiudere la sera.", bullets: ["SKU auto-generato (modificabile)","Soglie e alert per categoria","Sotto soglia in giallo, esaurito in rosso"] }, { title: "Un movimento, in due gesti.", body: "Carico, scarico o taglio. Apri il modulo, scegli il materiale, conferma. L'operatore registra dal telefono — le mani sporche non sono un problema, i bottoni sono grandi.", bullets: ["Carichi e scarichi firmati per operatore","Taglio lastra → offcut tracciato come figlio","Note libere, foto opzionale"] }, { title: "Catalogo pubblico, dietro il tuo nome.", body: "Un URL pulito per ogni laboratorio. I clienti vedono i tuoi marmi — non Lithosbase. Disponibilità sincronizzata con il magazzino: se è esaurito, sparisce.", bullets: ["lithosbase.app/c/laboratorio-rossi","Toggle pubblico/privato per singolo materiale","Form contatto integrato"] }, { title: "Tre ruoli. Permessi espliciti.", body: "Owner, Admin, Operatore. Inviti via email con scadenza. Ogni movimento è firmato — quando manca una lastra, si sa chi l'ha presa.", bullets: ["Owner imposta il workspace","Admin gestisce team e categorie","Operatore registra carichi e scarichi"] }, { title: "Export per chiunque ti serva.", body: "Excel per il commercialista. PDF per il cliente. CSV per importare in altri gestionali. Filtri per data, categoria, operatore — esci esattamente quello che ti chiedono.", bullets: ["Stock attuale o storico filtrato","Excel, PDF, CSV","Inviato per email o scaricato"] }, ], }, en: { banner: "You're exploring the demo · Stone Workshop · read-only", bannerSkip: "Skip to end", bannerExit: "Exit", stepLabel: (n) => `STEP ${n} / 05`, prev: "Back", next: "Next", finish: "Finish", introEyebrow: "Interactive tour · 5 minutes", introH1a: "Explore Lithosbase without ", introH1accent: "signing up", introH1b: ".", introBody: 'Read-only demo of the "Stone Workshop" workspace. Real materials, movements, catalog and team — just for browsing. Five guided steps. Exit whenever you want.', introStart: "Start the tour", introBack: "Back to site", tourSections: ["Stock","Movements","Catalog","Team","Export"], finaleEyebrow: "Tour complete", finaleH1a: "You've seen how it ", finaleH1accent: "works", finaleH1b: ". Want to try it with your data?", finaleBody: "Create your workspace and import your existing stock from a CSV. Two minutes. No credit card, no time-limited trial.", finaleCreate: "Create your workspace", finaleRestart: "Restart the tour", finaleExit: "back to site", steps: [ { title: "Real-time stock.", body: "Your entire warehouse in a single table. Every material has a SKU, dimensions, threshold and status. Low-stock rows are highlighted — no more spreadsheets to close in the evening.", bullets: ["Auto-generated SKU (editable)","Thresholds and alerts per category","Low stock in yellow, out of stock in red"] }, { title: "A movement, in two taps.", body: "Load, unload or cut. Open the form, pick the material, confirm. The operator records from their phone — dirty hands aren't a problem, the buttons are big.", bullets: ["Loads and unloads signed by operator","Slab cut → offcut tracked as child","Free notes, optional photo"] }, { title: "Public catalog, under your name.", body: "A clean URL for every workshop. Clients see your marble — not Lithosbase. Availability synced with your stock: if it's out, it disappears.", bullets: ["lithosbase.app/c/stone-workshop","Public/private toggle per material","Integrated contact form"] }, { title: "Three roles. Explicit permissions.", body: "Owner, Admin, Operator. Email invites with expiry. Every movement is signed — when a slab is missing, you know who took it.", bullets: ["Owner configures the workspace","Admin manages team and categories","Operator records loads and unloads"] }, { title: "Export for whoever needs it.", body: "Excel for your accountant. PDF for your client. CSV for other systems. Filter by date, category, operator — export exactly what they ask for.", bullets: ["Current stock or filtered history","Excel, PDF, CSV","Sent by email or downloaded"] }, ], }, es: { banner: "Estás explorando la demo · Laboratorio Rossi · solo lectura", bannerSkip: "Saltar al final", bannerExit: "Salir", stepLabel: (n) => `PASO ${n} / 05`, prev: "Atrás", next: "Siguiente", finish: "Final", introEyebrow: "Tour interactivo · 5 minutos", introH1a: "Explora Lithosbase sin ", introH1accent: "registrarte", introH1b: ".", introBody: 'Demo de solo lectura del workspace "Laboratorio Rossi". Materiales, movimientos, catálogo y equipo reales — solo para mirar. Cinco pasos guiados. Sal cuando quieras.', introStart: "Iniciar el tour", introBack: "Volver al sitio", tourSections: ["Stock","Movimientos","Catálogo","Equipo","Exportar"], finaleEyebrow: "Tour completado", finaleH1a: "Has visto cómo ", finaleH1accent: "funciona", finaleH1b: ". ¿Quieres probarlo con tus datos?", finaleBody: "Crea tu workspace e importa el stock existente desde un CSV. Dos minutos. Sin tarjeta de crédito, sin período de prueba.", finaleCreate: "Crea tu workspace", finaleRestart: "Repetir el tour", finaleExit: "volver al sitio", steps: [ { title: "Stock en tiempo real.", body: "Todo el almacén en una sola tabla. Cada material tiene SKU, dimensiones, umbral y estado. Las filas por debajo del umbral están resaltadas.", bullets: ["SKU auto-generado (editable)","Umbrales y alertas por categoría","Bajo umbral en amarillo, agotado en rojo"] }, { title: "Un movimiento, en dos pasos.", body: "Carga, descarga o corte. Abre el formulario, elige el material, confirma. El operador registra desde el móvil — las manos sucias no son problema.", bullets: ["Cargas y descargas firmadas por operador","Corte de losa → retazo rastreado como hijo","Notas libres, foto opcional"] }, { title: "Catálogo público, bajo tu nombre.", body: "Una URL limpia para cada laboratorio. Los clientes ven tus mármoles, no Lithosbase. Disponibilidad sincronizada con el stock.", bullets: ["lithosbase.app/c/laboratorio-rossi","Toggle público/privado por material","Formulario de contacto integrado"] }, { title: "Tres roles. Permisos explícitos.", body: "Owner, Admin, Operador. Invitaciones por email con caducidad. Cada movimiento está firmado.", bullets: ["Owner configura el workspace","Admin gestiona equipo y categorías","Operador registra cargas y descargas"] }, { title: "Exportar para quien lo necesite.", body: "Excel para el contable. PDF para el cliente. CSV para otros sistemas. Filtros por fecha, categoría, operador.", bullets: ["Stock actual o historial filtrado","Excel, PDF, CSV","Enviado por email o descargado"] }, ], }, de: { banner: "Sie erkunden die Demo · Steinwerkstatt · nur lesen", bannerSkip: "Zum Ende springen", bannerExit: "Verlassen", stepLabel: (n) => `SCHRITT ${n} / 05`, prev: "Zurück", next: "Weiter", finish: "Ende", introEyebrow: "Interaktive Tour · 5 Minuten", introH1a: "Erkunden Sie Lithosbase ohne ", introH1accent: "Registrierung", introH1b: ".", introBody: 'Schreibgeschützte Demo des Workspaces "Steinwerkstatt". Echte Materialien, Bewegungen, Katalog und Team — nur zum Ansehen. Fünf geführte Schritte. Verlassen Sie jederzeit.', introStart: "Tour starten", introBack: "Zurück zur Website", tourSections: ["Lager","Bewegungen","Katalog","Team","Export"], finaleEyebrow: "Tour abgeschlossen", finaleH1a: "Sie haben gesehen, wie es ", finaleH1accent: "funktioniert", finaleH1b: ". Möchten Sie es mit Ihren Daten ausprobieren?", finaleBody: "Erstellen Sie Ihren Workspace und importieren Sie den Bestand aus einer CSV-Datei. Zwei Minuten. Keine Kreditkarte, keine zeitlich begrenzte Testphase.", finaleCreate: "Workspace erstellen", finaleRestart: "Tour wiederholen", finaleExit: "zurück zur Website", steps: [ { title: "Echtzeit-Lagerbestand.", body: "Ihr gesamtes Lager in einer einzigen Tabelle. Jedes Material hat eine SKU, Abmessungen, Schwellenwert und Status.", bullets: ["Auto-generierte SKU (bearbeitbar)","Schwellenwerte und Warnungen pro Kategorie","Niedrig in Gelb, Ausverkauft in Rot"] }, { title: "Eine Bewegung, zwei Schritte.", body: "Einlagern, auslagern oder schneiden. Formular öffnen, Material wählen, bestätigen. Der Bediener erfasst vom Telefon aus.", bullets: ["Eingänge und Ausgänge vom Bediener signiert","Plattenschnitt → Reststück als Kind verfolgt","Freie Notizen, optionales Foto"] }, { title: "Öffentlicher Katalog, unter Ihrem Namen.", body: "Eine saubere URL für jede Werkstatt. Kunden sehen Ihren Marmor — nicht Lithosbase. Verfügbarkeit mit dem Lager synchronisiert.", bullets: ["lithosbase.app/c/steinwerkstatt","Öffentlich/Privat-Schalter pro Material","Integriertes Kontaktformular"] }, { title: "Drei Rollen. Explizite Berechtigungen.", body: "Owner, Admin, Operator. E-Mail-Einladungen mit Ablaufdatum. Jede Bewegung ist signiert.", bullets: ["Owner konfiguriert den Workspace","Admin verwaltet Team und Kategorien","Operator erfasst Ein- und Ausgänge"] }, { title: "Export für jeden Bedarf.", body: "Excel für den Buchhalter. PDF für den Kunden. CSV für andere Systeme. Filter nach Datum, Kategorie, Operator.", bullets: ["Aktueller Bestand oder gefilterter Verlauf","Excel, PDF, CSV","Per E-Mail gesendet oder heruntergeladen"] }, ], }, fr: { banner: "Vous explorez la démo · Atelier Rossi · lecture seule", bannerSkip: "Passer à la fin", bannerExit: "Quitter", stepLabel: (n) => `ÉTAPE ${n} / 05`, prev: "Précédent", next: "Suivant", finish: "Fin", introEyebrow: "Tour interactif · 5 minutes", introH1a: "Explorez Lithosbase sans ", introH1accent: "vous inscrire", introH1b: ".", introBody: 'Démo en lecture seule du workspace "Atelier Rossi". Matériaux, mouvements, catalogue et équipe réels — pour regarder uniquement. Cinq étapes guidées. Quittez quand vous voulez.', introStart: "Démarrer le tour", introBack: "Retour au site", tourSections: ["Stock","Mouvements","Catalogue","Équipe","Export"], finaleEyebrow: "Tour terminé", finaleH1a: "Vous avez vu comment ça ", finaleH1accent: "fonctionne", finaleH1b: ". Vous voulez l'essayer avec vos données ?", finaleBody: "Créez votre workspace et importez le stock existant depuis un CSV. Deux minutes. Pas de carte bancaire, pas d'essai limité dans le temps.", finaleCreate: "Créer votre workspace", finaleRestart: "Recommencer le tour", finaleExit: "retour au site", steps: [ { title: "Stock en temps réel.", body: "Tout votre entrepôt en un seul tableau. Chaque matériau a un SKU, des dimensions, un seuil et un statut. Les lignes sous le seuil sont mises en évidence.", bullets: ["SKU auto-généré (modifiable)","Seuils et alertes par catégorie","Sous le seuil en jaune, épuisé en rouge"] }, { title: "Un mouvement, en deux gestes.", body: "Chargement, déchargement ou découpe. Ouvrez le formulaire, choisissez le matériau, confirmez. L'opérateur enregistre depuis son téléphone.", bullets: ["Entrées et sorties signées par l'opérateur","Découpe de dalle → chute tracée comme enfant","Notes libres, photo optionnelle"] }, { title: "Catalogue public, sous votre nom.", body: "Une URL propre pour chaque atelier. Les clients voient vos marbres — pas Lithosbase. Disponibilité synchronisée avec le stock.", bullets: ["lithosbase.app/c/atelier-rossi","Bascule public/privé par matériau","Formulaire de contact intégré"] }, { title: "Trois rôles. Permissions explicites.", body: "Owner, Admin, Opérateur. Invitations par email avec expiration. Chaque mouvement est signé.", bullets: ["Owner configure le workspace","Admin gère l'équipe et les catégories","Opérateur enregistre les entrées et sorties"] }, { title: "Export pour tous vos besoins.", body: "Excel pour le comptable. PDF pour le client. CSV pour d'autres systèmes. Filtres par date, catégorie, opérateur.", bullets: ["Stock actuel ou historique filtré","Excel, PDF, CSV","Envoyé par email ou téléchargé"] }, ], }, tr: { banner: "Demoyu keşfediyorsunuz · Rossi Atölyesi · salt okunur", bannerSkip: "Sona atla", bannerExit: "Çık", stepLabel: (n) => `ADIM ${n} / 05`, prev: "Geri", next: "İleri", finish: "Son", introEyebrow: "İnteraktif tur · 5 dakika", introH1a: "Lithosbase'i ", introH1accent: "kayıt olmadan", introH1b: " keşfedin.", introBody: '"Rossi Atölyesi" çalışma alanının salt okunur demosu. Gerçek malzemeler, hareketler, katalog ve ekip — sadece göz atmak için. Beş rehberli adım. İstediğinizde çıkın.', introStart: "Turu başlat", introBack: "Siteye geri dön", tourSections: ["Stok","Hareketler","Katalog","Ekip","Dışa Aktar"], finaleEyebrow: "Tur tamamlandı", finaleH1a: "Nasıl ", finaleH1accent: "çalıştığını", finaleH1b: " gördünüz. Kendi verilerinizle denemek ister misiniz?", finaleBody: "Çalışma alanınızı oluşturun ve mevcut stoğu CSV'den içe aktarın. İki dakika. Kredi kartı yok, süreli deneme yok.", finaleCreate: "Çalışma alanı oluştur", finaleRestart: "Turu tekrarla", finaleExit: "siteye geri dön", steps: [ { title: "Gerçek zamanlı stok.", body: "Tüm deponuz tek bir tabloda. Her malzemenin SKU'su, boyutları, eşiği ve durumu var. Eşik altındaki satırlar vurgulanır.", bullets: ["Otomatik oluşturulan SKU (düzenlenebilir)","Kategori başına eşikler ve uyarılar","Düşük stok sarı, tükendi kırmızı"] }, { title: "Bir hareket, iki adımda.", body: "Yükleme, boşaltma veya kesme. Formu açın, malzemeyi seçin, onaylayın. Operatör telefondan kaydeder.", bullets: ["Operatör tarafından imzalanan yüklemeler ve boşaltmalar","Levha kesimi → artık parça çocuk olarak takip edilir","Serbest notlar, isteğe bağlı fotoğraf"] }, { title: "Adınız altında halka açık katalog.", body: "Her atölye için temiz bir URL. Müşteriler marmerlerinizi görür — Lithosbase'i değil. Kullanılabilirlik stokla senkronize.", bullets: ["lithosbase.app/c/rossi-atolyesi","Malzeme başına genel/özel geçiş","Entegre iletişim formu"] }, { title: "Üç rol. Açık izinler.", body: "Owner, Admin, Operatör. Son kullanma tarihli e-posta davetleri. Her hareket imzalıdır.", bullets: ["Owner çalışma alanını yapılandırır","Admin ekibi ve kategorileri yönetir","Operatör yükleme ve boşaltmaları kaydeder"] }, { title: "İhtiyaç duyan herkes için dışa aktarma.", body: "Muhasebeci için Excel. Müşteri için PDF. Diğer sistemler için CSV. Tarih, kategori, operatöre göre filtreler.", bullets: ["Mevcut stok veya filtrelenmiş geçmiş","Excel, PDF, CSV","E-posta ile gönderildi veya indirildi"] }, ], }, }; const _demoLocale = (() => { try { const l = new URLSearchParams(window.location.search).get('locale') || 'it'; return DEMO_I18N[l] ? l : 'it'; } catch { return 'it'; } })(); const T = DEMO_I18N[_demoLocale]; const Icon = ({ name, size = 18, ...rest }) => ( ); // ============== Step config ============== const STEPS = [ { id: "step-1", num: "01", title: T.steps[0].title, body: T.steps[0].body, bullets: T.steps[0].bullets, scene: "stock", spotlight: { selector: ".scene-stock", inset: 0 }, tooltipPos: { left: "32px", top: "180px" }, arrow: "left", }, { id: "step-2", num: "02", title: T.steps[1].title, body: T.steps[1].body, bullets: T.steps[1].bullets, scene: "movements", spotlight: null, tooltipPos: { right: "32px", top: "120px" }, arrow: "right", }, { id: "step-3", num: "03", title: T.steps[2].title, body: T.steps[2].body, bullets: T.steps[2].bullets, scene: "catalog", spotlight: { selector: ".scene-catalog .mock-cat-grid", inset: 0 }, tooltipPos: { right: "32px", top: "120px" }, arrow: "right", }, { id: "step-4", num: "04", title: T.steps[3].title, body: T.steps[3].body, bullets: T.steps[3].bullets, scene: "team", spotlight: { selector: ".scene-team .mock-table", inset: 0 }, tooltipPos: { left: "32px", top: "180px" }, arrow: "left", }, { id: "step-5", num: "05", title: T.steps[4].title, body: T.steps[4].body, bullets: T.steps[4].bullets, scene: "export", spotlight: { selector: ".scene-export .mock-export-card:last-child", inset: 0 }, tooltipPos: { left: "32px", top: "120px" }, arrow: "left", }, ]; // ============== Frozen mock scenes ============== const SceneSidebar = ({ active }) => ( ); const SceneTop = ({ crumb }) => (
{crumb[0]} / {crumb[1]}
); const SceneStock = () => (

Stock

48 materials · 320 sqm total · 3 below threshold
Export
SKUMaterialThresholdStockStatus
{[ { sku:"LB-A38", name:"Carrara Bianco", cat:"Marble", sw:"#EFECE5", th:"5.00", st:"12.48", k:"ok", l:"Available" }, { sku:"LB-N12", name:"Nero Marquina", cat:"Marble", sw:"#1c1917", th:"4.00", st:"3.92", k:"low",l:"Low stock" }, { sku:"LB-G07", name:"Calacatta Oro", cat:"Marble", sw:"#F5F0E6", th:"4.00", st:"0.00", k:"err",l:"Out of stock" }, { sku:"LB-V21", name:"Verde Alpi", cat:"Marble", sw:"#1a2e22", th:"4.00", st:"8.20", k:"ok", l:"Available" }, { sku:"LB-R03", name:"Rosso Levanto", cat:"Marble", sw:"#5b1d18", th:"4.00", st:"5.40", k:"ok", l:"Available" }, { sku:"LB-T11", name:"Travertino", cat:"Travertine", sw:"#E8DFCB", th:"5.00", st:"9.60", k:"ok", l:"Available" }, { sku:"LB-K05", name:"Cement Ceramic", cat:"Ceramics", sw:"#8a8783", th:"4.00", st:"2.40", k:"low", l:"Low stock" }, ].map(r => (
{r.sku} {r.name} {r.th} {r.st} sqm {r.l}
))}
); const SceneMovements = () => (

Movements

186 movements · signed by operator
Record
DateTypeMaterialQtyOperator
{[ ["14 May · 14:32","LOAD","Carrara Bianco","+6 slabs","Andrea","ok"], ["14 May · 11:08","UNLOAD","Nero Marquina","−2 slabs","Marco","err"], ["14 May · 09:44","CUT","Calacatta Oro","→ 3 pcs","Elena","acc"], ["13 May · 16:21","LOAD","Verde Alpi","+12 slabs","Andrea","ok"], ["13 May · 10:55","UNLOAD","Travertino","−5 slabs","Giulio","err"], ].map(([d,t,m,q,o,k], i) => (
{d} {t} {m} {q} {o}
))}
{/* Centered modal */}

New movement

Material
LB-A38 · Carrara Bianco
Type
Load
Unload
Quantity
6 slabs
Cancel
Record
); const SceneCatalog = () => (

Stone Workshop

lithosbase.app/c/stone-workshop
Public preview
{["All","Marble","Granite","Quartz","Travertine","Ceramics"].map((c,i) => ( {c} ))}
{[ ["Carrara Bianco","320 × 160","#F5F4F1","#D9D6CE","ok"], ["Verde Alpi","290 × 150","#1a2e22","#3d5a44","ok"], ["Nero Marquina","280 × 140","#1c1917","#44403c","ok"], ["Calacatta Oro","310 × 155","#F5F0E6","#C9B585","out"], ["Travertino","320 × 155","#E8DFCB","#BFB29A","ok"], ["Rosso Levanto","260 × 140","#5b1d18","#a04638","ok"], ["Granito Nero","300 × 160","#101010","#2a2a2a","ok"], ["Quarzo Calacatta","330 × 160","#F2EFE9","#D4CFC1","ok"], ].map(([n,d,c1,c2,st]) => (
{n}
{d}
● {st === "ok" ? "Available" : "Out of stock"} 3
))}
); const SceneTeam = () => (

Team

4 active members · 1 pending invite
Invite
{[ ["AR","Andrea Rossi","andrea@stone-workshop.com","Owner","owner"], ["MC","Marco Conti","marco@stone-workshop.com","Admin","admin"], ["EF","Elena Ferrari","elena@stone-workshop.com","Operator","op"], ["GP","Giulio Pini","giulio@stone-workshop.com","Operator","op"], ].map(([i,n,e,r,cls]) => (
{i}
{n}
{e}
{r}
))}
Pending invites
?
giulio@stone-workshop.com
Invited 2 days ago · expires in 5 days
Operator
); const SceneExport = () => (

Export

Export current stock or filtered history.

What to export

Current stock
Active materials, quantities, thresholds.
Movement history
Loads, unloads, cuts — signed.

Filters

Category · All
Operator · All

Format

XLSX
PDF
CSV

Export preview

Current stock.xlsx
Estimated rows48
PeriodNow
Size~24 KB
Download
Or email to andrea@…workshop.com
); const SCENE_MAP = { stock: SceneStock, movements: SceneMovements, catalog: SceneCatalog, team: SceneTeam, export: SceneExport, }; // ============== Intro / Finale ============== const Intro = ({ onStart, onExit }) => (
{T.introEyebrow}

{T.introH1a}{T.introH1accent}{T.introH1b}

{T.introBody}

{T.tourSections.map((s, i) => ( {String(i + 1).padStart(2,"0")} {s} ))}
); const Finale = ({ onSignup, onRestart, onExit }) => (
{T.finaleEyebrow}

{T.finaleH1a}{T.finaleH1accent}{T.finaleH1b}

{T.finaleBody}

{[ [T.tourSections[0],"Real-time"], [T.tourSections[1],"Signed"], [T.tourSections[2],"Public"], ["Team","3 roles"], [T.tourSections[4],"Excel + PDF"], ].map(([n, s]) => (
{n}
{s}
))}
); // ============== Tour with spotlight + tooltip ============== const Tour = ({ stepIdx, navTo, finishToSignup }) => { const step = STEPS[stepIdx]; const Scene = SCENE_MAP[step.scene]; const containerRef = React.useRef(null); const [spot, setSpot] = React.useState(null); // After scene mounts, locate the spotlight target React.useLayoutEffect(() => { if (!step.spotlight) { setSpot(null); return; } const compute = () => { const el = containerRef.current && containerRef.current.querySelector(step.spotlight.selector); if (!el || !containerRef.current) { setSpot(null); return; } const cRect = containerRef.current.getBoundingClientRect(); const eRect = el.getBoundingClientRect(); const pad = step.spotlight.pad || 6; setSpot({ left: eRect.left - cRect.left - pad, top: eRect.top - cRect.top - pad, width: eRect.width + pad * 2, height: eRect.height + pad * 2, }); }; compute(); const r = new ResizeObserver(compute); r.observe(containerRef.current); window.addEventListener("resize", compute); return () => { r.disconnect(); window.removeEventListener("resize", compute); }; }, [stepIdx, step.spotlight]); const next = () => { if (stepIdx >= STEPS.length - 1) navTo("finish"); else navTo(STEPS[stepIdx + 1].id); }; const prev = () => { if (stepIdx <= 0) navTo("intro"); else navTo(STEPS[stepIdx - 1].id); }; return (
{spot && (
)}
{T.stepLabel(step.num)}

{step.title}

{step.body}

{step.bullets.map(b =>
{b}
)}
{stepIdx + 1}/{STEPS.length}
); }; // ============== Top-level shell ============== const DemoApp = ({ route, theme, onNav, onJump }) => { const navTo = (r) => onNav(r); const exit = () => onJump("marketing"); const finishToSignup = () => onJump("signup"); const stepIdx = STEPS.findIndex(s => s.id === route); const inTour = stepIdx >= 0; const progress = route === "intro" ? 0 : route === "finish" ? 100 : inTour ? ((stepIdx + 1) / STEPS.length) * 100 : 0; return ( <>
DEMO {T.banner} {route !== "finish" && ( )}
{route === "intro" && navTo("step-1")} onExit={exit}/>} {inTour && } {route === "finish" && navTo("intro")} onExit={exit}/>} ); }; window.DemoApp = DemoApp;