function MainComponent() { const [currentIndex, setCurrentIndex] = React.useState(0); const imageDetails = [ { src: "/images/photo1.jpg", name: "First Place" }, { src: "/images/photo2.jpg", name: "Second Place" }, { src: "/images/photo3.jpg", name: "Third Place" }, { src: "/images/photo4.jpg", name: "Fourth Place" } ]; React.useEffect(()=>{ const interval = setInterval(()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % 4); }, 3000); return ()=>clearInterval(interval); }, []); function goNext() { setCurrentIndex((prevIndex)=>(prevIndex + 1) % 4); } function goBack() { setCurrentIndex((prevIndex)=>prevIndex - 1 < 0 ? 3 : prevIndex - 1); } const sliderStyle = { width: "100%", maxHeight: "100vh", height: "auto" }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-between items-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#121212] font-roboto mt-10", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Welcome"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[90%] md:max-w-[70%] lg:max-w-[60%] xl:max-w-[50%] p-4 relative", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full relative overflow-hidden", style: sliderStyle, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, imageDetails.map((imageDetail, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { key: `image-${index}`, src: imageDetail.src, alt: `${imageDetail.name}`, className: `w-full h-auto object-cover absolute transition-opacity duration-700 ${index === currentIndex ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { key: `name-${index}`, className: `absolute bottom-0 left-0 w-full bg-[rgba(0,0,0,0.5)] text-white text-center py-2 transition-opacity duration-700 ${index === currentIndex ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, imageDetail.name)))), /*#__PURE__*/ React.createElement("button", { onClick: goBack, className: "absolute top-1/2 left-0 transform -translate-y-1/2 bg-opacity-90 bg-[#121212] text-white p-4 rounded-full", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: goNext, className: "absolute top-1/2 right-0 transform -translate-y-1/2 bg-opacity-90 bg-[#121212] text-white p-4 rounded-full", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] font-roboto mb-10", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "Explore the world with us.")); }