/* ARES Technology — Live work section * * Features real launched sites built by ARES Technology. Distinct from the * illustrative "Sample preview layouts" — every card links to the live URL. * * Currently featured: * 1. ARES Protocol — AI governance & compliance consulting * https://www.aresprotocol.org/ * 2. EdgeFinder AI — Gated AI product access page * https://edgefinderai.org/gate */ /* LiveSiteEmbed — scaled iframe of a real production site. * Renders the iframe at desktop width inside a card-width container and * scales it down with CSS transform. Clicks pass through to the parent . * If framing is blocked (X-Frame-Options / CSP) or the iframe never loads, * we swap in the styled mock fallback so the card never looks broken. */ function LiveSiteEmbed({ src, renderWidth = 1280, renderHeight = 820, fallback }) { const [loaded, setLoaded] = React.useState(false); const [errored, setErrored] = React.useState(false); // On phones the scaled-desktop iframe always crops awkwardly inside the card — // the styled mock fallback looks cleaner. Watch the viewport width so a // device-rotation or window resize swaps the right view in. const [isNarrow, setIsNarrow] = React.useState(() => typeof window !== 'undefined' && window.matchMedia('(max-width: 720px)').matches ); React.useEffect(() => { if (typeof window === 'undefined') return; const mql = window.matchMedia('(max-width: 720px)'); const onChange = (e) => setIsNarrow(e.matches); if (mql.addEventListener) mql.addEventListener('change', onChange); else mql.addListener(onChange); return () => { if (mql.removeEventListener) mql.removeEventListener('change', onChange); else mql.removeListener(onChange); }; }, []); // Measure the card's actual width so we can render the site at a true desktop // viewport (renderWidth × renderHeight) and scale it down to fit the card // exactly. This keeps one clean desktop fold visible — full width, correct // aspect ratio, no half-page crop and no side gaps. const wrapRef = React.useRef(null); const [boxW, setBoxW] = React.useState(0); React.useEffect(() => { const el = wrapRef.current; if (!el) return; const update = () => setBoxW(el.clientWidth); update(); if (typeof ResizeObserver === 'undefined') { window.addEventListener('resize', update); return () => window.removeEventListener('resize', update); } const ro = new ResizeObserver(update); ro.observe(el); return () => ro.disconnect(); }, []); // No auto-timeout — only fall back if the iframe itself errors. // Some sites (like edgefinderai.org/gate) take a long time to fully load // their interactive JS, but the visual is fine within a second or two. if ((errored || isNarrow) && fallback) { const Fallback = fallback; return ; } const scale = boxW ? boxW / renderWidth : 0; const boxH = renderHeight * scale; return (
{!loaded && (
)} {scale > 0 && (