function MainComponent() { const featuredBooks = [ { title: 'The Adventures of Sherlock Holmes', author: 'Arthur Conan Doyle', price: '$10.99', image: 'sherlock-holmes.jpg', alt: 'Sherlock Holmes book cover' }, { title: '1984', author: 'George Orwell', price: '$9.99', image: '1984.jpg', alt: '1984 book cover' }, { title: 'Pride and Prejudice', author: 'Jane Austen', price: '$11.99', image: 'pride-and-prejudice.jpg', alt: 'Pride and Prejudice book cover' } ]; const bestSellerStyles = { animation: 'slideIn 500ms ease-in-out forwards' }; const bookList = featuredBooks.map((book)=>/*#__PURE__*/ React.createElement("div", { key: book.title, className: "flex flex-col items-center p-4 shadow-lg m-4 w-[200px] md:w-[250px] lg:w-[300px] h-[350px] md:h-[400px] lg:h-[450px] bg-white rounded transform hover:scale-105 transition duration-300 ease-in-out", style: bestSellerStyles, __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.image, alt: book.alt, className: "w-full md:w-[200px] lg:w-[250px] h-[225px] md:h-[275px] lg:h-[325px] object-cover", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "mt-2 font-semibold text-lg md:text-xl lg:text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-base lg:text-lg text-[#555]", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, book.author), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-bold text-md md:text-lg lg:text-xl text-[#121212]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, book.price), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 mt-2 bg-blue-600 text-white font-roboto rounded", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Buy Now"))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center md:justify-between p-8 md:p-12 bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl text-center text-[#121212] my-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "E-Books Store"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col md:flex-row items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "bookSearch", className: "px-4 py-2 border rounded-l w-full md:w-[300px]", placeholder: "Search for books...", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-600 text-white border border-l-0 rounded-r", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Search"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-stretch", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, bookList), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } `)); }