function MainComponent({ title, description, imageUrl, courses, categories, subscribeSection, footerLinks }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-[#6032A6] text-white", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Platform Logo", className: "h-10", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, categories.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, item))))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#6032A6] font-roboto my-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-md text-center text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, courses.map((course, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "rounded-lg shadow-lg p-4 bg-white", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: course.image, alt: `Featured course: ${course.title}`, className: "w-full h-32 object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mt-2", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, course.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, course.description))))), subscribeSection && /*#__PURE__*/ React.createElement("div", { className: "bg-[#6032A6] text-white p-4 text-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Subscribe to Our Newsletter"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Stay updated with the latest courses and offers!"), /*#__PURE__*/ React.createElement("form", { className: "mt-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", placeholder: "Enter your email", name: "email", className: "p-2 text-gray-700", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-white text-[#6032A6] font-bold py-2 px-4 ml-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Subscribe"))), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-gray-200", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-wrap justify-center gap-4 text-sm", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, footerLinks.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.url, className: "text-[#6032A6] hover:underline", __source: { fileName: "", lineNumber: 40, columnNumber: 29 }, __self: this }, link.text)))))); } function StoryComponent() { const categories = [ 'Home', 'Courses', 'About', 'Contact' ]; const courses = [ { title: "Introduction to Python", description: "Learn Python fundamentals and apply them to real-world applications.", image: "https://via.placeholder.com/150" }, { title: "Web Development Basics", description: "Understand the basics of web development through HTML, CSS, and JavaScript.", image: "https://via.placeholder.com/150" }, { title: "Advanced React Techniques", description: "Dive deeper into React and learn advanced techniques for building SPAs.", image: "https://via.placeholder.com/150" } ]; const footerLinks = [ { url: '#', text: 'About' }, { url: '#', text: 'FAQs' }, { url: '#', text: 'Terms of Service' }, { url: '#', text: 'Contact' } ]; const subscribeSection = true; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Explore Our Courses", description: "Dive into a variety of courses and start learning today.", imageUrl: "https://ucarecdn.com/453378b4-df07-4e24-93e7-99a40a142987/", categories: categories, courses: courses, footerLinks: footerLinks, subscribeSection: subscribeSection, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); }