/* global React, ReactDOM, Hero, Transition, Testimonials, Reveal, Features, HowItWorks, Recovery, Pricing, FAQ, Lenis */ const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React; // Smooth scrolling hook const useLenis = () => { useEffectA(() => { if (typeof Lenis === 'undefined') return; const lenis = new Lenis({ duration: 1.05, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smoothWheel: true, wheelMultiplier: 1.0, touchMultiplier: 1.2, }); let raf; const tick = (time) => { lenis.raf(time); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); lenis.destroy(); }; }, []); }; // Scroll listener hook const useScrollY = () => { const [y, setY] = useStateA(typeof window !== 'undefined' ? window.scrollY : 0); useEffectA(() => { let raf = 0; const tick = () => { raf = 0; setY(window.scrollY); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); }; window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); return y; }; // Top Header Bar const TopHeader = () => { const activeLang = (window.VirtueI18n && window.VirtueI18n.getLanguage) ? window.VirtueI18n.getLanguage() : 'en'; return (
Virtue FX Manager
Help Docs Contact Download Buy License
); }; // Left Sidebar Icon Navigation (Open by default) const LeftSidebar = ({ activeSection }) => { const items = [ { href: '#', label: 'Home', icon: }, { href: '#demo', label: 'Demo Video', icon: }, { href: '#testimonials', label: 'User Reviews', icon: }, { href: '#reveal', label: 'Comparison', icon: }, { href: '#features', label: 'Bento Grid', icon: }, { href: '#how', label: 'How It Works', icon: }, { href: '#recovery', label: 'Key Recovery', icon: }, { href: '#pricing', label: 'Pricing Plan', icon: }, { href: '#faq', label: 'Common FAQ', icon: } ]; return (
{/* Brand logo top link */} {/* Nav icon categories */}
{items.map((it, i) => { const currentId = it.href.replace('#', '') || 'home'; const active = activeSection === currentId; return ( {it.icon} {it.label} ); })}
{/* bottom spacer */}
); }; // SVG navigation icon components const HomeIcon = () => ( ); const DemoIcon = () => ( ); const ReviewIcon = () => ( ); const CompareIcon = () => ( ); const BentoIcon = () => ( ); const StepsIcon = () => ( ); const KeyIcon = () => ( ); const PricingIcon = () => ( ); const FAQIcon = () => ( ); const App = () => { useLenis(); const scrollY = useScrollY(); const [vh, setVh] = useStateA(typeof window !== 'undefined' ? window.innerHeight : 800); const [revealTop, setRevealTop] = useStateA(0); const [activeSection, setActiveSection] = useStateA('home'); const revealRef = useRefA(null); useEffectA(() => { const onResize = () => { setVh(window.innerHeight); if (revealRef.current) { setRevealTop(revealRef.current.offsetTop); } }; window.addEventListener('resize', onResize); // Initial compute setTimeout(() => { if (revealRef.current) { setRevealTop(revealRef.current.offsetTop); } }, 600); return () => window.removeEventListener('resize', onResize); }, []); // Section visibility observer drive active state in LeftSidebar useEffectA(() => { const sections = ['demo', 'testimonials', 'reveal', 'features', 'how', 'recovery', 'pricing', 'faq']; let current = 'home'; for (const section of sections) { const el = document.getElementById(section); if (el) { const rect = el.getBoundingClientRect(); // Section is active if its top is in the upper half of the viewport if (rect.top <= vh * 0.4) { current = section; } } } if (scrollY < 100) { current = 'home'; } setActiveSection(current); }, [scrollY, vh]); return ( <>