function MainComponent({ title, imageUrl, description, heroBg }) { let hoverEffect = ''; const bgStyle = `bg-[${heroBg}]`; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col md:flex-row items-center justify-between ${bgStyle} p-4 rounded-lg md:px-10 my-4`, __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-2/3 flex flex-col", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-2 text-white", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-base text-white", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, description)), /*#__PURE__*/ React.createElement("div", { className: `md:w-1/3 ${hoverEffect}`, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `Preview of ${title}`, className: "w-36 h-36 md:w-48 md:h-48 object-cover rounded-lg transition-transform duration-300 ease-in-out", onMouseEnter: ()=>hoverEffect = 'transform scale-105', onMouseLeave: ()=>hoverEffect = '', __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, ` img:hover { transform: scale(1.05); } `)); } function StoryComponent() { const sectionStyles = [ { title: "Manga Adventures", imageUrl: "images/manga-adventures-preview.png", description: "Explore epic stories with Manga Adventures.", heroBg: "#6419E6" }, { title: "Anime Action", imageUrl: "images/anime-action-preview.png", description: "Experience the thrill of Anime Action series.", heroBg: "#FF007A" }, { title: "Classic Series", imageUrl: "images/classic-series-preview.png", description: "Revisit the classics that shaped the genre.", heroBg: "#08D9D6" } ]; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, sectionStyles.map((section, index)=>/*#__PURE__*/ React.createElement(MainComponent, { key: index, title: section.title, imageUrl: section.imageUrl, description: section.description, heroBg: section.heroBg, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })))); }