function MainComponent() { const fadeIn = { animation: 'fadeIn 1s ease-in-out' }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1e1e1e] text-white p-4", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#121212]", style: fadeIn, __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "🎬 Movie App"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "search", placeholder: "Search movies...", className: "rounded-md bg-[#2C2C2C] p-2 text-sm font-light font-roboto w-full max-w-[300px]", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 text-[#f5c518]", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "search", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "🔍")))), /*#__PURE__*/ React.createElement("main", { className: "mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-[#353535] rounded-lg overflow-hidden", style: fadeIn, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/movie/poster.jpg", alt: "Dramatic scene from Movie Title", className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Movie Title"), /*#__PURE__*/ React.createElement("p", { className: "font-light font-roboto text-base", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "An epic journey of a hero in a world of turmoil. Experience the adventure and mystery."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center font-light font-roboto text-sm", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "⏰ 120 min"), /*#__PURE__*/ React.createElement("span", { className: "flex items-center font-light font-roboto text-sm", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "⭐ 8.5"))))), /*#__PURE__*/ React.createElement("footer", { className: "flex items-center justify-center p-4 bg-[#121212]", style: fadeIn, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-light font-roboto text-sm", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "© 2023 Movie App. All Rights Reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } body { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } `)); }