function MainComponent() { const [showDetails, setShowDetails] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "bg-white min-h-screen flex flex-col items-center justify-center overflow-hidden font-noto-sans-jp", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "fixed top-0 left-0 right-0 bg-white shadow-md z-10", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center space-x-8 py-4 text-lg", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this }, "TOP")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, "VBrowserとは")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, "VReporterとは")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, "使い方")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, "Q＆A")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, "About US")))), !showDetails ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full flex items-center justify-center mt-24", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "vbrowser_logo.png", alt: "VBrowserロゴ画像", className: "w-[600px] h-[600px] object-contain", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/4 h-1/4 absolute top-0 left-0 animate-fade-in-out", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "image1.png", alt: "VBrowserの3Dアバター機能を表す画像", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/4 h-1/4 absolute top-0 right-0 animate-fade-in-out animation-delay-500", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "image2.png", alt: "VBrowserのAIボイスチェンジャー機能を表す画像", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/4 h-1/4 absolute bottom-0 left-0 animate-fade-in-out animation-delay-1000", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "image3.png", alt: "VBrowserでのVReporterとしてのコンテンツ発信を表す画像", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/4 h-1/4 absolute bottom-0 right-0 animate-fade-in-out animation-delay-1500", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "image4.png", alt: "VBrowserで「伝える」をもっと身近にすることを表す画像", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDetails(true), className: "mt-8 px-8 py-4 bg-[#FF69B4] text-white font-bold rounded-full text-2xl hover:bg-[#FF1493] transition duration-300", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "詳しく見る")) : /*#__PURE__*/ React.createElement("div", { className: "mt-40 text-center max-w-4xl", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold mb-6 text-[#333] font-noto-sans-jp", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "VBrowser"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#666] mb-8 leading-relaxed", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "VBrowserは、ブラウザ一つで完結する革新的な3Dアバター表示とAIボイスチェンジャーのツールです。", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 47, columnNumber: 65 }, __self: this }), "「伝える」をもっと身近に、よりインパクトのあるものにするVReporterとしてのコンテンツ発信を強力にサポートするブロードキャストツールです。", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 48, columnNumber: 85 }, __self: this }), "VBrowserで、あなたのメッセージを今までにない形で伝えてみませんか？")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` @keyframes fadeInOut { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 20%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .animate-fade-in-out { animation: fadeInOut 6s infinite; transform-origin: top left; } .animation-delay-500 { animation-delay: 2s; transform-origin: top right; } .animation-delay-1000 { animation-delay: 4s; transform-origin: bottom left; } .animation-delay-1500 { animation-delay: 6s; transform-origin: bottom right; } `)); }