function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center min-h-screen bg-gray-100 font-roboto overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "w-full bg-white shadow-md fixed top-0 flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "マッチング型SNS"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-500 hover:text-blue-800", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "ログイン")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-500 hover:text-blue-800", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "新規登録")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full mt-24 space-y-8", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 w-[800px]", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 text-center text-[#000] slide-in", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "SNSアプリケーション"), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "ようこそ！最新のフィードとメッセージをお楽しみください。"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 w-[800px]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "お気に入りのコンテンツをスライドで紹介します。"), /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden h-[300px] mt-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full flex", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-300 w-full flex-shrink-0", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-green-300 w-full flex-shrink-0", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-red-300 w-full flex-shrink-0", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, ` .slide-in { animation: slideIn 2s forwards; } @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes autoSlide { 0% { transform: translateX(0); } 33% { transform: translateX(-100%); } 66% { transform: translateX(-200%); } 100% { transform: translateX(0); } } .relative > .absolute > .absolute { animation: autoSlide 9s infinite; } `)); }