function VtuberWelcomeOverlay({ title, image }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-white", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated Welcome Image for Vtuber事務所", className: "w-[300px] h-[300px] mt-4 rounded", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this })); } function MainComponent({ currentPage, setCurrentPage }) { const [generatedImage, setGeneratedImage] = React.useState(''); React.useEffect(()=>{ if (currentPage === 'Home') { fetch('/integrations/dall-e-3/?prompt=Vtuber事務所').then((response)=>response.json()).then((data)=>setGeneratedImage(data.data[0])); } }, [ currentPage ]); const renderContent = ()=>{ switch(currentPage){ case 'Home': return /*#__PURE__*/ React.createElement("section", { className: "w-full h-[500px] bg-cover bg-center", style: { backgroundImage: "url('https://vspo.jp/wp-content/themes/vspo/images/common/vspo_main_2020_1.jpg')" }, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(VtuberWelcomeOverlay, { title: "Welcome to Vtuber事務所", image: generatedImage, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })); case 'About': return /*#__PURE__*/ React.createElement("section", { className: "my-8", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4 font-noto-sans", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-noto-sans", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "We are a premier Vtuber agency committed to excellence and innovation in virtual entertainment.")); case 'Talents': return /*#__PURE__*/ React.createElement("section", { className: "my-8", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4 font-noto-sans", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Our Talents"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://vspo.jp/wp-content/uploads/2020/12/vspo_mainimage-me02.jpg", alt: "Talent 1 Image for Vtuber事務所", className: "w-full h-[200px] object-cover rounded-t", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl mt-2 font-noto-sans", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "Talent 1"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "Short description about Talent 1.")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://vspo.jp/wp-content/uploads/2020/12/vspo_mainimage-me03.jpg", alt: "Talent 2 Image for Vtuber事務所", className: "w-full h-[200px] object-cover rounded-t", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl mt-2 font-noto-sans", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "Talent 2"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "Short description about Talent 2.")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://vspo.jp/wp-content/uploads/2020/12/vspo_mainimage-me04.jpg", alt: "Talent 3 Image for Vtuber事務所", className: "w-full h-[200px] object-cover rounded-t", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl mt-2 font-noto-sans", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Talent 3"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "Short description about Talent 3.")))); case 'Contact': return /*#__PURE__*/ React.createElement("section", { className: "my-8", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4 font-noto-sans", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("form", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "p-2 border border-gray-300 rounded", placeholder: "Your Name", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "p-2 border border-gray-300 rounded", placeholder: "Your Email", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", className: "p-2 border border-gray-300 rounded", placeholder: "Your Message", rows: "4", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-black text-white rounded", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Send Message"))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full font-noto-sans", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-black text-white flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold cursor-pointer", onClick: ()=>setCurrentPage('Home'), __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Vtuber事務所"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer hover:text-gray-400", onClick: ()=>setCurrentPage('Home'), __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer hover:text-gray-400", onClick: ()=>setCurrentPage('About'), __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer hover:text-gray-400", onClick: ()=>setCurrentPage('Talents'), __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Talents"), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer hover:text-gray-400", onClick: ()=>setCurrentPage('Contact'), __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, renderContent()), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-black text-white p-4 text-center", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "© 2023 Vtuber事務所. All rights reserved."))); } function StoryComponent() { const [currentPage, setCurrentPage] = React.useState('Home'); return /*#__PURE__*/ React.createElement(MainComponent, { currentPage: currentPage, setCurrentPage: setCurrentPage, __source: { fileName: "", lineNumber: 101, columnNumber: 5 }, __self: this }); }