function MainComponent() { const [email, setEmail] = React.useState(''); const [message, setMessage] = React.useState(''); const validateEmail = (email)=>{ return email.match(/^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/); }; const handleSubmit = (e)=>{ e.preventDefault(); if (validateEmail(email)) { // Here you would normally handle the database save operation setMessage('登録ありがとうございます！先行アクセスの詳細をメールでお送りします。'); } else { setMessage('有効なメールアドレスを入力してください。'); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-inter", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#FFFFFF] p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#000000] text-2xl font-bold", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "プロダクト名")), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "product-image.jpg", alt: "魅力的な商品やサービスの画像", className: "w-full h-screen object-cover", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex flex-col justify-center items-center p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFFFFF] text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "先行登録で特別オファーをゲット！"), /*#__PURE__*/ React.createElement("p", { className: "text-[#D3D3D3] text-lg mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "新しい次世代の〇〇を最初に体験しよう。今すぐ登録！"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "メールアドレス", className: "border-2 border-[#FFFFFF] bg-transparent text-[#FFFFFF] text-lg p-2", value: email, onChange: (e)=>setEmail(e.target.value), __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#FFC107] text-[#FFFFFF] font-bold text-lg px-6 py-2 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "登録"), message && /*#__PURE__*/ React.createElement("p", { className: "text-[#FFFFFF] mt-4", __source: { fileName: "", lineNumber: 34, columnNumber: 25 }, __self: this }, message)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#F8F9FA] p-4 text-center", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "© 2023 プロダクト名. すべての権利を保持。"))); }