function MainComponent() { const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const userData = Object.fromEntries(formData.entries()); localStorage.setItem('userData', JSON.stringify(userData)); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-bl from-[#ffafbd] to-[#ffc3a0] min-h-screen flex flex-col items-center justify-center px-4", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold mb-4 font-chic text-[#222222]", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "✨ トータルビューティーマジック ✨"), /*#__PURE__*/ React.createElement("p", { className: "mb-8 font-chic text-md text-[#222222]", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "自分だけのスタイルを見つける場所"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#222222] text-xs font-bold mb-2", htmlFor: "grid-first-name", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "年齢"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-[#222222] border border-gray-300 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-600", id: "grid-first-name", type: "text", placeholder: "例：25", name: "age", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#222222] text-xs font-bold mb-2", htmlFor: "grid-last-name", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "好きなカラー"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-[#222222] border border-gray-300 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-600", id: "grid-last-name", type: "text", placeholder: "例：ピンク", name: "favoriteColor", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#222222] text-xs font-bold mb-2", htmlFor: "grid-state", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "スタイル"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "block appearance-none w-full bg-gray-200 border border-gray-300 text-[#222222] py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-600", id: "grid-state", name: "style", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, "カジュアル"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "フォーマル"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "ストリート"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "ビジネス")), /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-800", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff847c] hover:bg-[#e35d6a] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "コーデを見る"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 52, columnNumber: 6 }, __self: this }, ` @font-face { font-family: 'Chic'; src: url('/path/to/chic-font.woff') format('woff'); } .font-chic { font-family: 'Chic', sans-serif; } `)); }