/* global React, Icon, Btn, Reveal */ /* ────────────────────────────────────────────────────────────── tech-solutions.jsx — data, scrollspy pill-nav, solution sections ────────────────────────────────────────────────────────────── */ const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React; const SOLUTIONS = [ { id: 'modernize', pill: 'Modernization', icon: 'layers', overline: 'App Modernization', title: ['AI-driven application', 'modernization'], blurb: 'Turn decades of legacy systems into clean, maintainable services — automatically translated, decomposed, and documented.', features: [ { icon: 'code', title: 'Legacy code translation', desc: 'Automated COBOL-to-Java conversion with semantic equivalence checks.' }, { icon: 'split', title: 'Monolith deconstruction', desc: 'AI identifies clean microservice boundaries from tangled codebases.' }, { icon: 'gauge', title: 'Technical debt reduction', desc: 'Continuous refactoring removes duplication and dead paths.' }, { icon: 'map', title: 'Architecture mapping', desc: 'Instant, living documentation of legacy systems and dependencies.' }, ], }, { id: 'qa', pill: 'QA Automation', icon: 'shield', overline: 'QA Automation', title: ['Next-gen QA', 'automation'], blurb: 'Tests that fix themselves, data that generates itself, and defects caught before a single line is run.', features: [ { icon: 'flask', title: 'Self-healing test scripts', desc: 'AI repairs broken selectors automatically as the UI evolves.' }, { icon: 'layers',title: 'Synthetic data generation', desc: 'Instant creation of compliant, realistic test datasets.' }, { icon: 'bug', title: 'Predictive defect analysis', desc: 'Pinpoints high-risk code before testing even begins.' }, { icon: 'msg', title: 'Natural language testing', desc: 'Plain-English prompts generate full test suites.' }, ], }, { id: 'mobile', pill: 'Mobile', icon: 'phone', overline: 'Mobile Development', title: ['Intelligent mobile', 'app development'], blurb: 'One spec, every platform. Generate, migrate, and optimize native apps with an AI that understands the edge.', features: [ { icon: 'split', title: 'Cross-platform code gen', desc: 'Swift and Kotlin generated simultaneously from one source.' }, { icon: 'sync', title: 'Automated SDK updates', desc: 'AI migrates breaking API changes without manual rewrites.' }, { icon: 'cpu', title: 'On-device AI optimization', desc: 'Compresses models for fast, private edge execution.' }, { icon: 'target',title: 'Context-aware features', desc: 'Predictive user actions enable look-ahead loading.' }, ], }, { id: 'ux', pill: 'UI/UX Design', icon: 'pen', overline: 'UI/UX Design', title: ['AI-powered', 'UI/UX design'], blurb: 'From sketch to shipped interface — designs that build themselves, adapt to users, and stay accessible by default.', features: [ { icon: 'code', title: 'Wireframe-to-code', desc: 'Sketches instantly become functional, production frontend.' }, { icon: 'user', title: 'Dynamic personalization', desc: 'Interfaces adapt in real time to user behavior.' }, { icon: 'eye', title: 'Accessibility auditing', desc: 'Continuous WCAG compliance scanning as you design.' }, { icon: 'wave', title: 'Predictive heatmaps', desc: 'AI simulates user attention before a single user arrives.' }, ], }, ]; // ── Sticky scroll-spy pill nav ─────────────────────────────────── const SolutionsNav = ({ active, onJump }) => (
{SOLUTIONS.map((s) => ( ))}
); // ── Per-solution ambient visual ────────────────────────────────── const SolutionVisual = ({ id }) => { if (id === 'modernize') { const rows = [{ w: 92, c: 'debt' }, { w: 64, c: 'debt' }, { w: 38, c: 'ok' }, { w: 22, c: 'ok' }]; return (
{rows.map((r, i) => (
mod-{i + 1}
))}
Refactoring 1,204 duplicated blocks…
); } if (id === 'qa') { const tests = [ { n: 'checkout.spec', s: 'pass' }, { n: 'auth-flow.spec', s: 'heal' }, { n: 'cart.spec', s: 'pass' }, { n: 'search.spec', s: 'pass' }, ]; return (
{tests.map((t, i) => (
{t.n} {t.s === 'heal' ? 'self-healing selector' : 'passed'}
))}
); } if (id === 'mobile') { return (
{[{ n: 'Swift', c: 'var(--accent)' }, { n: 'Kotlin', c: 'var(--primary-700)' }].map((p, i) => (
{[1,2,3].map((k) =>
)}
{p.n}
))}
Generated simultaneously from a single definition
); } // ux return (
); }; const VisualShell = ({ label, badge, children }) => (
{label} {badge}
{children}
); // ── Solution section ───────────────────────────────────────────── const SolutionSection = ({ sol, index, registerRef, onLearn, onDemo }) => { const ref = useRefS(null); useEffectS(() => registerRef(sol.id, ref.current), []); const reversed = index % 2 === 1; const alt = index % 2 === 1; return (
{sol.overline} {sol.title[0]}
{sol.title[1]} {sol.blurb} onLearn(sol.id)}>Learn more onDemo(sol.id)}>See demo
{/* feature cards */}
{sol.features.map((f, i) => (

{f.title}

{f.desc}

 ))}
); }; // ── Section group with scrollspy ───────────────────────────────── const Solutions = ({ onLearn, onDemo }) => { const [active, setActive] = useStateS('modernize'); const refs = useRefS({}); const registerRef = (id, el) => { if (el) refs.current[id] = el; }; useEffectS(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id.replace('sec-', '')); }); }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 }); Object.values(refs.current).forEach((el) => el && obs.observe(el)); return () => obs.disconnect(); }, []); const jump = (id) => { const el = refs.current[id]; if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 118, behavior: 'smooth' }); }; return ( <> {SOLUTIONS.map((s, i) => ( ))} ); }; Object.assign(window, { Solutions, SOLUTIONS });