function MainComponent() { const [movies, setMovies] = React.useState([ { id: 1, title: 'Stranger Things', image: '/stranger-things.jpg' } ]); const handleSignIn = ()=>{ // Placeholder for sign-in logic }; const featuredStyle = { background: 'linear-gradient(to top, #141414 10%, transparent 60%)' }; const featuredMovieTitle = "Featured Movie: The Matrix"; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#141414] min-h-screen text-white p-8", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center mb-12", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/netflix-logo.png", alt: "Netflix logo", className: "w-[92px] h-[30px]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { className: "text-sm font-light font-roboto space-x-2", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#e5e5e5] hover:text-white", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#e5e5e5] hover:text-white", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "TV Shows"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#e5e5e5] hover:text-white", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Movies"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#e5e5e5] hover:text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "New & Popular"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#e5e5e5] hover:text-white", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "My List"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#b3b3b3] hover:text-white", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-search", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mx-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/user-avatar.png", alt: "User avatar", className: "w-8 h-8 rounded-full", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSignIn, className: "bg-[#e50914] py-1.5 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Sign In"))), /*#__PURE__*/ React.createElement("main", { className: "pt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: featuredStyle, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/featured-movie.jpg", alt: "Featured movie background", className: "w-full h-[60vh] object-cover", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-10 left-10 text-left", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-5xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, featuredMovieTitle), /*#__PURE__*/ React.createElement("p", { className: "text-base font-roboto mb-4 max-w-md", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "When a beautiful stranger leads computer hacker Neo to a forbidding underworld, he discovers the shocking truth—the life he knows is the elaborate deception of an evil cyber-intelligence."), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-white text-black py-2 px-4 rounded font-roboto mr-4", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-play mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }), "Play"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#6d6d6d] py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-plus mr-2", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }), "My List")))), /*#__PURE__*/ React.createElement("section", { className: "pt-24", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-6 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Popular on NetStream"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-scroll pl-10 space-x-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, movies.map((movie)=>/*#__PURE__*/ React.createElement("div", { key: movie.id, className: "min-w-[180px] shrink-0", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: movie.image, alt: `Poster of ${movie.title}`, className: "w-full h-auto mb-2 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-semibold font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, movie.title))))))); }