// landing.jsx — RoStealth landing (filen.io-style) const { useState, useEffect, useRef } = React; // ─── SCROLL REVEAL ──────────────────────────────────────────────────────────── function useReveal(delay = 0) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; el.classList.add('reveal'); if (delay) el.style.transitionDelay = `${delay}ms`; let done = false; const show = () => { if (done) return; done = true; el.classList.add('in'); }; let io; try { io = new IntersectionObserver(e => e.forEach(e => { if (e.isIntersecting) show(); }), { threshold: 0.08 }); io.observe(el); } catch (e) { show(); } const t = setTimeout(show, 1400); return () => { io && io.disconnect(); clearTimeout(t); }; }, [delay]); return ref; } function useStaggerReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const children = Array.from(el.children); children.forEach((c, i) => { c.classList.add('reveal'); c.style.transitionDelay = `${i * 70}ms`; }); let done = false; const show = () => { if (done) return; done = true; children.forEach(c => c.classList.add('in')); }; let io; try { io = new IntersectionObserver(e => e.forEach(e => { if (e.isIntersecting) show(); }), { threshold: 0.05 }); io.observe(el); } catch (e) { show(); } const t = setTimeout(show, 1500); return () => { io && io.disconnect(); clearTimeout(t); }; }, []); return ref; } // gradient word like filen.io "Individuals" const GRADIENT_TEXT = { background: 'linear-gradient(90deg, #22D3EE 0%, #2DD4BF 38%, #5EEAD4 62%, #34D399 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', }; // white primary button (filen style) const WhiteBtn = ({ children, onClick, style = {} }) => ( ); // ─── SECTION HEADER (centered, filen style) ─────────────────────────────────── const SectionHead = ({ title, sub, gradientWord }) => { const r = useReveal(); return (

{title}{gradientWord && <> {gradientWord}}

{sub &&

{sub}

}
); }; const Eyebrow = ({ children }) => (
{children}
); // ─── NAV (floating pill, filen style) ───────────────────────────────────────── const LandingNav = ({ onLogin, onSignup }) => { const links = [['Features', '#features'], ['How it works', '#how'], ['Pricing', '#pricing'], ['FAQ', '#faq']]; const go = (e, href) => { e.preventDefault(); const el = document.querySelector(href); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth' }); }; return (
); }; // ─── BROWSER CHROME WRAPPER ─────────────────────────────────────────────────── const BrowserFrame = ({ children, url = 'app.rostealth.site', maxWidth = 1080, glow = true }) => (
{glow &&
}
{['#FF5F57', '#FFBD2E', '#28C840'].map(c =>
)}
{url}
{children}
); // mini sidebar used in the snapshots const SnapSidebar = ({ active = 'Dashboard', width = 192 }) => { const items = [['Dashboard', Icon.Dashboard], ['Tracking', Icon.Tracking], ['Analytics', Icon.Analytics], ['Alerts', Icon.Alerts], ['Pricing', Icon.Pricing], ['Settings', Icon.Settings]]; return (
RoStealth
rostealth.site
{items.map(([label, I]) => { const on = label === active; return (
{label} {label === 'Alerts' && 3}
); })}
admin
Pro
); }; const SNAP_MEMBERS = [ { n: 'xShadowReaper', s: 'online', g: 'Da Hood' }, { n: 'FrostClan_Leader', s: 'in-game', g: 'Arsenal', flagged: true }, { n: 'VelocityX99', s: 'offline', g: null }, { n: 'Phantom_Wolf', s: 'online', g: 'Bloxburg' }, { n: 'DarkMatter_X', s: 'in-game', g: 'Da Hood' }, { n: 'NightOwl_99', s: 'online', g: 'Bloxburg' }, ]; // ─── FULL DASHBOARD SNAPSHOT (hero) ─────────────────────────────────────────── const DashboardPlaceholder = () => { const stats = [ { label: 'Online now', value: '4', color: 'var(--green)', bg: 'rgba(52,211,153,0.07)', border: 'rgba(52,211,153,0.18)' }, { label: 'Tracked total', value: '6', color: 'var(--p4)', bg: 'var(--p-dim)', border: 'rgba(6,182,212,0.2)' }, { label: 'In-game', value: '2', color: 'var(--amber)', bg: 'rgba(251,191,36,0.07)', border: 'rgba(251,191,36,0.18)' }, { label: 'Flagged', value: '1', color: 'var(--red)', bg: 'rgba(248,113,113,0.07)', border: 'rgba(248,113,113,0.18)' }, ]; const bars = [42, 68, 30, 88, 56, 100, 64]; return (
{/* topbar */}
Dashboard
Search ⌘K
{/* content */}
admin
4 members online right now
LIVE
{/* stat cards */}
{stats.map(s => (
{s.label}
{s.value}
))}
{/* two-col */}
{/* members */}
Members Manage →
{SNAP_MEMBERS.map(m => (
{m.flagged && }
{m.n.split('_')[0]}
{m.s === 'in-game' ? m.g : m.s}
))}
{/* chart + feed */}
Activity this week
Tracked sessions per day
{bars.map((h, i) => (
{['M','T','W','T','F','S','S'][i]}
))}
Live
{[['xShadow', 'came online', 'online'], ['FrostClan', 'joined Arsenal', 'in-game'], ['Phantom', 'came online', 'online']].map(([n, e, s], i) => (
{n} {e} {i * 2}m
))}
); }; // ─── FEATURE-ROW SNAPSHOTS ──────────────────────────────────────────────────── const MockPanel = ({ variant = 'tracking' }) => { if (variant === 'discord') { return (
#clan-watch via webhook
{[['xShadowReaper', 'is now online', 'var(--green)', '14:02'], ['FrostClan_Leader', 'joined Arsenal', 'var(--amber)', '14:09'], ['Phantom_Wolf', 'is now online', 'var(--green)', '14:21'], ['DarkMatter_X', 'joined Da Hood', 'var(--amber)', '14:33']].map(([n, e, c, t], i) => (
RoStealth BOT {t}
{n} {e}
))}
); } if (variant === 'analytics') { const bars = [38, 60, 28, 80, 52, 96, 70, 44, 66]; return (
Session trend
Activity over the last 30 days
{bars.map((h, i) => (
))}
{[['Total', '482', 'var(--t1)'], ['Peak day', '96', 'var(--p4)'], ['Avg / day', '16', 'var(--green)']].map(([l, v, c]) => (
{l}
{v}
))}
); } // default: tracking table return (
Filter by username or ID…
Add
{SNAP_MEMBERS.map((m, i) => (
{m.n} {m.flagged && Flagged}
{m.g || '—'}
))}
); }; // ─── HERO (centered, filen style) ───────────────────────────────────────────── const Hero = ({ onSignup }) => { const content = useReveal(); const mockup = useReveal(220); return (
{/* radial glow */}
{/* dot grid */}

Community Intelligence for{' '} Roblox Groups

Reliable live status, session history, and smart alerts you can trust. Track your whole community without bots, passwords, or guesswork.

Get started

No subscription required

); }; // ─── "FEATURES TO MEET ALL YOUR NEEDS" — alternating rows ────────────────────── const FeatureRow = ({ icon, title, body, flip, shot }) => { const r = useReveal(); return (
{icon}

{title}

{body}

); }; const HowItWorks = () => (
} title="Seamlessly track your community" body="Get a complete overview of every member with flexible list and detail views. Online, in-game, or offline — the board is always current, refreshed automatically every 30 seconds." /> } title="Smart alerts, where you live" body="Pipe any status change straight into Discord via webhook. Set conditions — a member coming online, joining a rival's favorite game — and RoStealth fires the moment they trigger." /> } title="Session history that sticks" body="Every session is logged and kept for 30 days. Scrub back through days of activity to spot patterns, no-shows, and suspicious behavior at a glance." />
); Object.assign(window, { useReveal, useStaggerReveal, Eyebrow, SectionHead, GRADIENT_TEXT, WhiteBtn, BrowserFrame, SnapSidebar, DashboardPlaceholder, MockPanel, LandingNav, Hero, HowItWorks, FeatureRow });