// about-v2.jsx — redesigned About for "MLOPS Website v2": full-width department
// accordion that expands on hover. Exports AboutV2. v1 is untouched.
const ABOUT_DEPTS = {
en: [
{ icon: 'development', name: 'Development', role: 'Production ML systems',
desc: 'We ship and operate production-grade ML with performance guarantees.',
items: ['Model deployment & serving', 'Scalable inference pipelines & monitoring', 'Web apps and APIs for your models', 'MLOps infrastructure design'] },
{ icon: 'research', name: 'Research', role: 'Applied AI & fine-tuning',
desc: 'Applied AI research tuned to your domain and your data.',
items: ['Custom training & fine-tuning', 'Custom dataset creation & data annotation', 'Evaluation on your domain data', 'Emerging-technique prototyping'] },
{ icon: 'procurement', name: 'Infrastructure & Procurement', role: 'Hardware, cloud & tenders',
desc: 'The compute and contracts that run the models.',
items: ['GPU, server & workstation sourcing', 'Cloud architecture & procurement', 'Privacy-preserving local AI', 'Public procurement & vendor evaluation'] },
{ icon: 'secured', name: 'Funding & Strategy', role: 'EU grants, consortia & compliance',
desc: 'We make the economics of AI adoption work — and keep it compliant.',
items: ['EU project preparation & applications', 'Grant implementation & reporting', 'Cross-border consortium coordination', 'EU AI Act, GDPR & PLD compliance'] },
],
hr: [
{ icon: 'development', name: 'Razvoj', role: 'Produkcijski ML sustavi',
desc: 'Isporučujemo i održavamo produkcijski ML uz garanciju performansi.',
items: ['Implementacija i posluživanje modela', 'Skalabilni inference i nadzor', 'Web aplikacije i API-ji za krajnje korisnike', 'Dizajn MLOps infrastrukture'] },
{ icon: 'research', name: 'Istraživanje', role: 'Primijenjeni AI i podešavanje',
desc: 'Primijenjeno AI istraživanje prilagođeno vašoj domeni i podacima.',
items: ['Prilagođeno treniranje i fino podešavanje', 'Izrada skupova podataka i anotacija', 'Evaluacija na vašim podacima', 'Prototipiranje novih tehnika'] },
{ icon: 'procurement', name: 'Infrastruktura i nabava', role: 'Oprema, cloud i natječaji',
desc: 'Računalna snaga i ugovori koji pokreću modele.',
items: ['Nabava GPU-ova, servera i stanica', 'Arhitektura i nabava clouda', 'Lokalni AI uz očuvanje privatnosti', 'Javna nabava i evaluacija dobavljača'] },
{ icon: 'secured', name: 'Financiranje i strategija', role: 'EU potpore, konzorciji i usklađenost',
desc: 'Slažemo ekonomiju usvajanja AI-ja — i držimo je usklađenom.',
items: ['Priprema EU projekata i prijava', 'Provedba projekta i izvještavanje', 'Koordinacija prekograničnih konzorcija', 'Usklađenost: EU AI Act, GDPR i PLD'] },
],
};
function DeptPanel({ d, n, accent, hovered, anyHovered, onEnter, onLeave }) {
const grow = hovered ? '2.6 1 0%' : (anyHovered ? '0.92 1 0%' : '1 1 0%');
const ref = React.useRef(null);
const [w, setW] = React.useState(0);
React.useEffect(() => {
const el = ref.current; if (!el || !window.ResizeObserver) return;
const ro = new ResizeObserver(() => setW(el.clientWidth));
ro.observe(el); setW(el.clientWidth);
return () => ro.disconnect();
}, []);
// measure the always-visible name+role block so the un-hovered layout can
// sit it at an exact y (keeps spacing equal even when a name wraps to 2 lines)
const textRef = React.useRef(null);
const [th, setTh] = React.useState(0);
React.useEffect(() => {
const el = textRef.current; if (!el || !window.ResizeObserver) return;
const ro = new ResizeObserver(() => setTh(el.clientHeight));
ro.observe(el); setTh(el.clientHeight);
return () => ro.disconnect();
}, []);
const PAD = 26, BASE = 36, BIG = 64; // icon base render px / large visual px
const CARD_H = 366, ICON_TOP = 84; // un-hovered icon visual top (was 54)
const cx = w ? w / 2 : 130; // current half-width for centering
// un-hovered text top = icon bottom + same gap as top→icon, so the two gaps match
const textRise = th ? (2 * ICON_TOP + BIG) - (CARD_H - PAD - th) : 0;
// default: large icon centered, dropped lower · hover: small icon in top-left
const iconTransform = hovered
? 'translate(0px, 0px) scale(1)'
: `translate(${(cx - PAD - BIG / 2).toFixed(1)}px, ${ICON_TOP - 24}px) scale(${(BIG / BASE).toFixed(3)})`;
return (
{/* dot-grid texture */}
{/* accent top bar grows on hover */}
{/* icon — animates from centered-large to top-left-small */}
{/* bottom content block — un-hovered: centered & raised so top→icon and
icon→text gaps match · hover: returns to bottom-anchored, as before */}
{d.name}
{d.role}
{/* detail reveal */}
{d.desc}
{d.items.map((it, j) => (
{it}
))}
);
}
// stacked card for narrow screens — everything visible, no hover
function DeptCardStacked({ d, n, accent }) {
return (