function MainComponent() { const [currentSlide, setCurrentSlide] = React.useState(0); const [detailVisible, setDetailVisible] = React.useState(true); const slideData = [ { index: 0, headline: 'E-commerce', button: 'Shop now', src: 'https://i.postimg.cc/05GqNv0b/4571271.jpg', detail: '1500+ users, 1.5 months development' }, { index: 1, headline: 'Portfolio', button: 'View Portfolio', src: 'https://i.postimg.cc/FKqJ13mg/6525460.jpg', detail: '2000+ projects, 2 months development' }, { index: 2, headline: 'Membership Site', button: 'Join Now', src: 'https://i.postimg.cc/rm3bhnT0/3526379.png', detail: '5000+ members, 1 month development' }, { index: 3, headline: 'Booking System', button: 'Book Now', src: 'https://i.postimg.cc/CKdmWGmj/4203457.jpg', detail: '1000+ bookings, 1.5 months development' } ]; const previousSlide = ()=>{ setDetailVisible(false); setTimeout(()=>{ setCurrentSlide(currentSlide === 0 ? slideData.length - 1 : currentSlide - 1); setDetailVisible(true); }, 600); }; const nextSlide = ()=>{ setDetailVisible(false); setTimeout(()=>{ setCurrentSlide(currentSlide === slideData.length - 1 ? 0 : currentSlide + 1); setDetailVisible(true); }, 600); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col justify-center items-center bg-[#101118] overflow-x-hidden font-ibm-plex-sans", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "slider relative w-[70vmin] h-[70vmin] m-auto", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "slider__wrapper flex absolute transition-transform duration-[600ms] ease-[cubic-bezier(0.25,1,0.35,1)]", style: { transform: `translateX(-${currentSlide * (100 / slideData.length)}%)`, margin: '0 calc(4vmin * -1)' }, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { id: "slider-heading", className: "sr-only", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Example Slider"), slideData.map((slide, index)=>{ const isCurrent = index === currentSlide; const isPrevious = index === currentSlide - 1 || currentSlide === 0 && index === slideData.length - 1; const isNext = index === currentSlide + 1 || currentSlide === slideData.length - 1 && index === 0; return /*#__PURE__*/ React.createElement("li", { key: slide.index, className: `slide flex flex-col justify-center items-center text-center w-[70vmin] h-[70vmin] m-[4vmin] opacity-25 relative transition-opacity duration-[300ms] ease-[cubic-bezier(0.25,0.46,0.45,0.84)] ${isCurrent ? 'slide--current opacity-100' : isPrevious ? 'slide--previous hover:opacity-50 hover:translate-x-[2%] cursor-w-resize' : isNext ? 'slide--next hover:opacity-50 hover:-translate-x-[2%] cursor-e-resize' : ''}`, onClick: ()=>setCurrentSlide(slide.index), style: { ['--x']: 0, ['--y']: 0 }, onMouseMove: (e)=>{ const r = e.currentTarget.getBoundingClientRect(); e.currentTarget.style.setProperty('--x', e.clientX - (r.left + Math.floor(r.width / 2))); e.currentTarget.style.setProperty('--y', e.clientY - (r.top + Math.floor(r.height / 2))); }, onMouseLeave: (e)=>{ e.currentTarget.style.setProperty('--x', 0); e.currentTarget.style.setProperty('--y', 0); }, __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "slide__image-wrapper bg-[#1D1F2F] absolute top-0 left-0 w-full h-full overflow-hidden rounded-[1%] transition-transform duration-[150ms] ease-[cubic-bezier(0.25,0.46,0.45,0.84)]", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "slide__image absolute top-[-5%] left-[-5%] w-[110%] h-[110%] object-cover opacity-0 pointer-events-none select-none transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.46,0.45,0.84)]", src: slide.src, alt: `${slide.headline} website screenshot`, onLoad: (e)=>e.target.style.opacity = '1', __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("article", { className: "slide__content text-white opacity-0 invisible relative p-[4vmin] transition-transform duration-[600ms] ease-[cubic-bezier(0.25,0.46,0.45,0.84)] font-playfair", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "slide__headline text-[66px] font-bold mb-8 bg-[#f29effe6]", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, slide.headline), /*#__PURE__*/ React.createElement("p", { className: "mt-8 text-[20px] text-[#fbfafb] bg-[#fcafe9e6] transition-opacity duration-500", style: { opacity: detailVisible ? '1' : '0' }, __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, slide.detail))); })), /*#__PURE__*/ React.createElement("div", { className: "slider__controls flex justify-center absolute w-full top-[calc(100%+1rem)]", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "btn slider__control--previous bg-transparent border-3 border-transparent rounded-full flex justify-center items-center w-[3rem] h-[3rem] m-0 p-0 focus:border-[#6D64F7] focus:outline-none", onClick: previousSlide, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "icon w-full", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-chevron-left text-[40px]", style: { color: '#ffffff' }, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Previous Slide")), /*#__PURE__*/ React.createElement("button", { className: "btn slider__control--next bg-transparent border-3 border-transparent rounded-full flex justify-center items-center w-[3rem] h-[3rem] m-0 p-0 focus:border-[#6D64F7] focus:outline-none", onClick: nextSlide, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "icon w-full fill-[#6B7A8F]", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-chevron-right text-[40px]", style: { color: '#ffffff' }, __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Next Slide")))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 mb-10 ml-10", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", target: "_self", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-5 py-2 border border-white text-black font-medium rounded bg-white font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "ホームに戻る"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, ` @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } .slide--current .slide__image-wrapper { transform: scale(1.025) translate(calc(var(--x) / 50 * 1px), calc(var(--y) / 50 * 1px)); } .slide--current .slide__image { transform: translate(calc(var(--x) / 20 * 1px), calc(var(--y) / 20 * 1px)); } .slide--current .slide__content { animation: fade-in 300ms cubic-bezier(0.25, 0.46, 0.45, 0.84) forwards; visibility: visible; transform: translate(calc(var(--x) / 60 * -1px), calc(var(--y) / 60 * -1px)); } `)); }