function MainComponent() { const [currentIndex, setCurrentIndex] = React.useState(0); const catchphrases = [ "自分のペースでフィードバック", "新しい企業を発見", "視野を広げて" ]; React.useEffect(()=>{ const intervalId = setInterval(()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % catchphrases.length); }, 3000); return ()=>{ clearInterval(intervalId); }; }, []); const [isModalOpen, setIsModalOpen] = React.useState(false); const openModal = ()=>{ setIsModalOpen(true); }; const closeModal = ()=>{ setIsModalOpen(false); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 text-white fixed top-0 w-full p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "inline-block", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "inline mr-4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "企業を探す"))), /*#__PURE__*/ React.createElement("div", { className: "search-bar float-right", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "検索...", className: "mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-600 text-white px-4 py-2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "検索")))), /*#__PURE__*/ React.createElement("section", { className: "hero-section bg-gray-100 pt-32 pb-16 text-center", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { id: "catchphrase", className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, catchphrases[currentIndex]), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-800 text-white text-lg px-4 py-2", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "はじめよう")), /*#__PURE__*/ React.createElement("section", { className: "featured-companies p-8", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "注目の企業"), /*#__PURE__*/ React.createElement("div", { className: "company-card border border-gray-300 rounded p-4 mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "company1.jpg", alt: "企業1", className: "w-full", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "企業名1"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "企業説明のプレースホルダー")), /*#__PURE__*/ React.createElement("div", { className: "company-card border border-gray-300 rounded p-4 mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "company2.jpg", alt: "企業2", className: "w-full", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "企業名2"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "企業説明のプレースホルダー"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white p-4 text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "mr-2", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "ブログ"), " |", ' ', /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "FAQ"), " |", ' ', /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-2", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "プライバシーポリシー"), " |", ' ', /*#__PURE__*/ React.createElement("button", { id: "contact-btn", className: "ml-2", onClick: openModal, __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "お問い合わせ")), isModalOpen && /*#__PURE__*/ React.createElement("div", { id: "contact-modal", className: "modal fixed top-0 left-0 w-full h-full bg-black bg-opacity-50", onClick: closeModal, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "modal-content bg-white w-1/2 mx-auto mt-40 p-4", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "お問い合わせ"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block mb-2", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "お名前:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", required: true, className: "w-full mb-4 px-2 py-1 border border-gray-300", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "メールアドレス:"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", required: true, className: "w-full mb-4 px-2 py-1 border border-gray-300", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "メッセージ:"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", required: true, className: "w-full mb-4 px-2 py-1 border border-gray-300", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-gray-800 text-white px-4 py-2", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "送信")), /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "カスタマーサポート情報: support@shukatsu-lab.com")))); }