// METIO v2 — Dark premium landing. // Visual: navy base (#111827→#1C2B40), violet #8B5CF6, cyan #06B6D4. // Typography: Poppins (same as app). Glassmorphism, aurora orbs, scroll reveals. const V2 = { bg1:'#0B1120', bg2:'#111827', bg3:'#162032', bg4:'#1C2B40', violet:'#8B5CF6', violetDeep:'#6D28D9', cyan:'#06B6D4', cyanDeep:'#0891B2', white:'#ffffff', mute:'rgba(255,255,255,.72)', dim:'rgba(255,255,255,.52)', line:'rgba(255,255,255,.08)', }; // ───────────────────────────────────────────────────────────── // Scroll reveal primitive // ───────────────────────────────────────────────────────────── function Reveal({children, delay=0, y=30, style={}}) { const ref = React.useRef(null); const [vis, setVis] = React.useState(false); React.useEffect(()=>{ const io = new IntersectionObserver(([e])=>{ if(e.isIntersecting){ setVis(true); io.disconnect(); } },{threshold:.12}); if(ref.current) io.observe(ref.current); return ()=>io.disconnect(); },[]); return (
{children}
); } // ───────────────────────────────────────────────────────────── // Aurora background (orbs + mesh + grid + sport glyphs) // ───────────────────────────────────────────────────────────── function Aurora() { return (
{/* orbs */}
{/* grid */}
{/* sport glyphs scattered (subtle line-art) */}
); } function SportGlyph({x,y,rot=0,icon}) { const paths = { ball: , racket: , shoe: , glove: , ribbon: , }; return ( {paths[icon]} ); } // ───────────────────────────────────────────────────────────── // Glass surface // ───────────────────────────────────────────────────────────── function Glass({children, style={}, radius=20, glow}) { return (
{children}
); } function GradientText({children,style={}}) { return ( {children} ); } function ButtonPrimary({children, onClick, big}) { return ( ); } function ButtonGhost({children, onClick, big}) { return ( ); } // ───────────────────────────────────────────────────────────── // NAV // ───────────────────────────────────────────────────────────── function Nav() { return ( ); } // ───────────────────────────────────────────────────────────── // HERO // ───────────────────────────────────────────────────────────── function Hero() { return (
✦
Management complet pentru clubul tau sportiv

Clubul tau.
Organizat perfect.

tii evidenta elevilor, prezentelor si platilor — totul dintr-o aplicatie simpla, de pe telefon. Pentru orice club sportiv.

Incearca gratuit Vezi demo
{['#8B5CF6','#06B6D4','#F472B6','#FBBF24','#34D399'].map((c,i)=>(
0?-8:0}}/> ))}
Folosit de 127+ cluburi sportive din Romania
); } function PhoneFrame({src, rotate=0, width=300, glow='#8B5CF6', label}) { // Extra height = safe area strip (44px scaled to frame width) const safeArea = Math.round(width * 44 / 260); const h = width * 2.16 + safeArea; return (
0?'-4deg':rotate<0?'4deg':'0'})`,transition:'transform .6s'}}>
{/* iOS safe area strip — exactly like on a real iPhone */}
{/* Full screenshot — no crop top or bottom */}
{label && (
{label}
)}
); } Object.assign(window, { V2, Reveal, Aurora, Glass, GradientText, ButtonPrimary, ButtonGhost, Nav, Hero, PhoneFrame });