function MainComponent() { const [currentImageIndex, setCurrentImageIndex] = React.useState(0); React.useEffect(()=>{ const interval = setInterval(()=>{ setCurrentImageIndex((prevIndex)=>(prevIndex + 1) % 3); }, 10000); return ()=>{ clearInterval(interval); }; }, []); const images = [ "https://ucarecdn.com/6570e4f6-b758-43db-85cc-0099f3cc194b/-/format/auto/", "https://ucarecdn.com/62021824-9de0-4af7-a36c-49fbb8712bcb/-/format/auto/", "https://ucarecdn.com/9c67bce0-a10e-4d32-8765-d86e7648b9ae/-/format/auto/" ]; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen overflow-hidden", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full flex transition-transform duration-1000 ease-in-out", style: { transform: `translateX(-${currentImageIndex * 100}%)` }, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Image ${index + 1}`, className: "w-full h-full object-cover flex-shrink-0", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-[#000000] to-transparent opacity-70 transform skew-x-[-20deg] animate-slide-right", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 px-4 py-2 bg-[#000000] bg-opacity-70 rounded-br-[20px] font-bold text-white text-[17px] whitespace-pre", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "一般社団法人カーボンニュートラル・ウェルビーイング・ラボ "), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/4 right-[10%] text-4xl font-bold text-white animate-slide-right", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "持続可能な未来へ"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[15%] right-[7%] w-12 h-12 bg-white bg-opacity-30 rounded-lg pointer-events-none", style: { transform: 'rotate(45deg)' }, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/4 right-[10%] mt-16 text-2xl font-bold text-white animate-slide-right", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "中小企業の脱炭素経営をサポート"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/4 right-[10%] mt-40 animate-slide-left", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-6 py-3 bg-transparent text-white font-semibold border-2 border-white rounded-full hover:bg-white hover:text-black transition-colors duration-300 transform hover:scale-110 focus:outline-none", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "お問い合わせ・お申し込み"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, ` @keyframes slide-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes slide-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .animate-slide-right { animation: slide-right 1s ease-out; } .animate-slide-left { animation: slide-left 1s ease-out; } `)); }