import React from "react";
import { frontPage } from "../content/front-page-content.jsx";
export const Infographic = () => {
    return (React.createElement("div", { className: "front-infographic" },
        React.createElement("span", { className: "bg-circle" }),
        frontPage.infographic.map((item, index) => (React.createElement("div", { key: index, className: "infograph-block", id: item.htmlID },
            React.createElement("span", null,
                React.createElement("img", { src: item.image, alt: "", loading: "lazy", width: "312", height: "349" })),
            React.createElement("div", { className: "info-card" },
                React.createElement("h3", null, item.name),
                React.createElement("div", null, item.content))))),
        React.createElement("div", { className: "view-docs" },
            React.createElement("h3", null, "Want to get started?"),
            "Check out the",
            " ",
            React.createElement("a", { href: "https://docs.openneuro.org/user-guide" }, "OpenNeuro User Documentation"))));
};
