// Features — six pillars, right side is empty for image. const Features = () => { const [active, setActive] = React.useState(0); const listRef = React.useRef(null); const itemRefs = React.useRef([]); const isMobile = useResponsive(); const pillars = [ { title: 'Use your existing CCTV', icon: 'camera', body: 'No costly upgrades required.', illustration: ( ), }, { title: 'Every recording becomes insight', icon: 'database', body: 'Not wasted storage.', illustration: ( ), }, { title: 'Works with any camera', icon: 'check-circle', body: 'No compatibility worries.', illustration: ( ), }, { title: 'Guard, reporter, and assistant', icon: 'shield-alert', body: 'More than just monitoring.', illustration: ( ), }, { title: 'Smarter results with more compute', icon: 'zap', body: 'Allocate more hardware, get better analytics.', illustration: ( ), }, { title: 'Smarter analytics, locally', icon: 'lock', body: 'Faster and more private.', illustration: ( ), }, ]; return (

What can you do with BlinkFree?

Six core capabilities that transform ordinary CCTV into intelligent security.

{/* Left column: six feature items */}
{pillars.map((p, i) => (
{ itemRefs.current[i] = el; }} style={{ position: 'relative', padding: 16, borderRadius: 8, border: i === active ? '2px solid #9146FF' : '2px solid transparent', background: i === active ? 'rgba(145,70,255,0.08)' : 'transparent', transition: 'all 300ms', }} >
))}
{/* Right: image placeholder */}
{pillars[active].illustration}
); }; window.Features = Features;