function MainComponent() { const [currentSlide, setCurrentSlide] = React.useState(0); const handlePrevClick = ()=>{ setCurrentSlide((prev)=>prev === 0 ? 2 : prev - 1); }; const handleNextClick = ()=>{ setCurrentSlide((prev)=>prev === 2 ? 0 : prev + 1); }; const slideStyle = (index)=>({ transform: `translateX(${index - currentSlide}00%)`, opacity: currentSlide === index ? 1 : 0.3 }); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-tr from-[#232526] to-[#414345] p-4 overflow-hidden", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 border-b border-[#576574]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl text-white font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Discoverify"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { className: "text-gray-300 font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Trending"), /*#__PURE__*/ React.createElement("li", { className: "text-gray-300 font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Genres"), /*#__PURE__*/ React.createElement("li", { className: "text-gray-300 font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "New Releases"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search new music...", className: "px-4 py-2 rounded-l bg-[#2f3b4c] text-white placeholder-gray-400 border-0 outline-none focus:ring-2 focus:ring-[#657786] font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#657786] text-white px-4 py-2 rounded-r border-0", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-search", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { className: "mt-8 relative", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[300px] overflow-hidden", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 transition-all duration-500", style: slideStyle(0), __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/discover1.jpg", alt: "Dynamic album cover representing new music discovery", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-white font-bold font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Discover Weekly"))), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 transition-all duration-500", style: slideStyle(1), __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/discover2.jpg", alt: "Energetic concert scene with crowd enthusiasm", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-white font-bold font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Live Concerts"))), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 transition-all duration-500", style: slideStyle(2), __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/discover3.jpg", alt: "Artistic representation of diverse music genres", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-white font-bold font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Explore Genres"))), /*#__PURE__*/ React.createElement("button", { onClick: handlePrevClick, className: "absolute left-4 top-1/2 transform -translate-y-1/2 text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-chevron-left", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleNextClick, className: "absolute right-4 top-1/2 transform -translate-y-1/2 text-white", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-chevron-right", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-2 mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, Array.from({ length: 3 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>setCurrentSlide(index), className: `w-3 h-3 rounded-full ${currentSlide === index ? 'bg-white' : 'bg-gray-400'}`, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "flex justify-center items-center p-4 border-t border-[#576574]", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 font-roboto text-sm", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "© 2023 Discoverify, Inc.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, ` body { margin: 0; padding: 0; box-sizing: border-box; } `)); }