function MainComponent() { const images = [ '/path/to/portrait1.jpg', '/path/to/portrait2.jpg', '/path/to/portrait3.jpg' ]; let currentIndex = 0; const [currentImage, setCurrentImage] = React.useState(images[0]); React.useEffect(()=>{ const interval = setInterval(()=>{ currentIndex = (currentIndex + 1) % images.length; setCurrentImage(images[currentIndex]); }, 3000); return ()=>clearInterval(interval); }, []); const nextImage = ()=>{ currentIndex = (currentIndex + 1) % images.length; setCurrentImage(images[currentIndex]); }; const prevImage = ()=>{ currentIndex = (currentIndex - 1 + images.length) % images.length; setCurrentImage(images[currentIndex]); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white font-roboto min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#010101] w-full p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("header", { className: "text-center my-10", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "岩﨑大造"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-gray-300", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "俺かっこいい")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-10 w-[300px] h-[400px] relative", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: prevImage, className: "absolute left-0 text-5xl text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: currentImage, alt: "ポートレートショットカルーセル", className: "w-full h-full object-cover shadow-lg border-4 border-gray-800", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: nextImage, className: "absolute right-0 text-5xl text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "text-center mt-10", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "© 2023 岩﨑大造 All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, ` nav a { transition: color 0.3s ease; } img:hover { transform: scale(1.05); transition: transform 0.3s ease; } button { background: none; border: none; cursor: pointer; } `)); }