function MainComponent() { const [currentIndex, setCurrentIndex] = React.useState(0); const [autoPlay, setAutoPlay] = React.useState(true); const images = [ '/api/placeholder/400/300', '/api/placeholder/400/300', '/api/placeholder/400/300', '/api/placeholder/400/300', '/api/placeholder/400/300' ]; const rotateCarousel = (direction)=>{ if (direction === 'next') { setCurrentIndex((prevIndex)=>(prevIndex + 1) % images.length); } else { setCurrentIndex((prevIndex)=>(prevIndex - 1 + images.length) % images.length); } }; React.useEffect(()=>{ let interval; if (autoPlay) { interval = setInterval(()=>{ rotateCarousel('next'); }, 3000); } return ()=>clearInterval(interval); }, [ autoPlay ]); const carouselTransform = `rotateY(${-currentIndex * (360 / images.length)}deg)`; return /*#__PURE__*/ React.createElement("div", { className: "gradient-bg min-h-screen flex flex-col items-center justify-center text-white font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full text-center mb-10", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold neon-text", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Cool 3D Carousel Showcase")), /*#__PURE__*/ React.createElement("main", { className: "w-full max-w-4xl mx-auto px-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[500px] perspective-1200 bg-[#100000] rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full transition-transform duration-1000 ease-in-out transform-style-3d", style: { transform: carouselTransform }, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, images.map((src, index)=>{ const slideTransform = `rotateY(${index * (360 / images.length)}deg) translateZ(500px)`; return /*#__PURE__*/ React.createElement("div", { key: index, className: "absolute w-[40%] max-w-[425px] left-[30%] h-full transform-style-3d", style: { transform: slideTransform }, __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: `Slide ${index + 1}`, className: "w-full h-full object-cover rounded-lg shadow-lg", style: { boxShadow: '0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3), 0 0 60px rgba(0, 255, 255, 0.1)' }, __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this })); })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>rotateCarousel('prev'), className: "absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-75 transition-all duration-300", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-left w-8 h-8", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>rotateCarousel('next'), className: "absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-75 transition-all duration-300", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-right w-8 h-8", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setAutoPlay(!autoPlay), className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 text-white rounded-full px-4 py-2 text-sm hover:bg-opacity-75 transition-all duration-300", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, autoPlay ? 'Pause' : 'Play'))), /*#__PURE__*/ React.createElement("footer", { className: "w-full text-center mt-10", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "© 2024 Cool 3D Carousel. All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, ` @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gradient-bg { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } .neon-text { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } .perspective-1200 { perspective: 1200px; } .transform-style-3d { transform-style: preserve-3d; height: 500px; transform-origin: 50% 50% -500px; } `)); }