function MainComponent() { const [graphicNovels, setGraphicNovels] = React.useState([ { id: 1, title: "The Shadow Hero", author: "Gene Luen Yang", cover: "shadow-hero-cover.jpg" }, { id: 2, title: "La Borinqueña", author: "Edgardo Miranda-Rodriguez", cover: "la-borinquena-cover.jpg" }, { id: 3, title: "M.F.K.", author: "Nilah Magruder", cover: "mfk-cover.jpg" } ]); const graphicNovelElements = graphicNovels.map((novel)=>/*#__PURE__*/ React.createElement("div", { key: novel.id, className: "p-4 w-full sm:w-1/2 lg:w-1/3 xl:w-1/4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col justify-between border-2 border-gray-300 border-opacity-75 rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-300", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "lg:h-72 md:h-48 w-full object-cover object-center", src: `./images/${novel.cover}`, alt: `Cover of "${novel.title}", a graphic novel by ${novel.author}`, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6 flex flex-col justify-between flex-grow", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "tracking-widest text-xs title-font font-medium text-gray-500 mb-1", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, novel.author), /*#__PURE__*/ React.createElement("h1", { className: "title-font text-lg font-medium text-gray-900 mb-3", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, novel.title)), /*#__PURE__*/ React.createElement("button", { className: "self-start py-2 px-4 bg-[#6E7DAB] hover:bg-[#586995] text-white rounded-lg transition-colors duration-200 ease-in-out", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Add to Cart 🛒"))))); return /*#__PURE__*/ React.createElement("div", { className: "MainComponent font-roboto text-gray-800 bg-[#f1f5f8]", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container px-5 py-24 mx-auto", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col text-center w-full mb-12", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "sm:text-3xl text-2xl font-medium title-font text-gray-900", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Graphic Novels by Minority Authors"), /*#__PURE__*/ React.createElement("p", { className: "lg:w-2/3 mx-auto leading-relaxed text-base text-gray-600", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Explore our diverse collection of narratives and artwork from a wide range of voices and experiences.")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -m-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, graphicNovelElements))); }