function NcmHeaderDesign({ logoText, smallText, navItems }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-[#011C40] via-[#012840] to-[#c87029] w-full h-[110px] flex items-center justify-between", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center ml-[35px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#F2F2F2] font-bold text-[24pt]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, logoText), /*#__PURE__*/ React.createElement("p", { className: "text-[#F2F2F2] text-[13pt] ml-[5px]", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, smallText)), /*#__PURE__*/ React.createElement("div", { className: "text-[#F2F2F2] text-[15pt] mr-[35px] flex items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, navItems.map((item, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "mx-[3px]", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, item)))); } function NcmHeaderDesignStory() { const logoText = "NCM"; const smallText = "No Code Morning"; const navItems = [ "|", "Top", "|", "About", "|", "Member", "|", "Contact", "|", "Sponsor", "|" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NcmHeaderDesign, { logoText: logoText, smallText: smallText, navItems: navItems, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function GradientFooter({ icons }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[120px] bg-gradient-to-r from-[#011C40] via-[#012840] to-[#c87029] flex items-center", style: { paddingLeft: '35px' }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, icons.map((icon, index)=>/*#__PURE__*/ React.createElement("i", { key: index, className: `${icon} w-[25px] h-[25px] ${index < icons.length - 1 ? 'mr-[1px]' : ''}`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function GradientFooterStory() { const icons = [ 'fa-instagram', 'fa-twitter', 'fa-facebook-f', 'fa-youtube' ].map((icon)=>`fab ${icon} text-white`); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GradientFooter, { icons: icons, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function MainComponent() { const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const [message, setMessage] = React.useState(''); const [isSubmitted, setIsSubmitted] = React.useState(false); const [formError, setFormError] = React.useState(''); const validateEmail = (email)=>{ return email.match(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/); }; const handleSubmit = (e)=>{ e.preventDefault(); if (!name || !email || !message) { setFormError('全ての必須フィールドを入力してください。'); return; } if (!validateEmail(email)) { setFormError('適切なメールアドレスを入力してください。'); return; } setIsSubmitted(true); }; if (isSubmitted) { return /*#__PURE__*/ React.createElement("div", { style: { position: 'fixed', inset: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(255,255,255,0.9)', zIndex: '1000' }, __source: { fileName: "", lineNumber: 26, columnNumber: 12 }, __self: this }, "お問い合わせありがとうございます。"); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NcmHeaderDesign, { logoText: "NCM", smallText: "No Code Morning", navItems: [ "|", "Top", "|", "About", "|", "Member", "|", "Contact", "|", "Sponsor", "|" ], __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", style: { height: '200px', width: '100%' }, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#011C40] font-bold text-[50pt]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("div", { style: { height: '50px', width: '100%' }, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center px-4", onSubmit: handleSubmit, style: { width: '100%' }, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, formError && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 23 }, __self: this }, formError), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", style: { maxWidth: '500px', width: '100%' }, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", style: { fontSize: '16px', marginBottom: '8px' }, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "お名前"), /*#__PURE__*/ React.createElement("input", { className: "w-full h-10 p-2 border-2", name: "name", type: "text", onChange: (e)=>setName(e.target.value), required: true, style: { borderColor: '#011C40', fontSize: '14px' }, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-1", style: { fontSize: '16px', marginBottom: '8px' }, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { className: "w-full h-10 p-2 border-2", name: "email", type: "email", onChange: (e)=>setEmail(e.target.value), required: true, style: { borderColor: '#011C40', fontSize: '14px' }, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-1", style: { fontSize: '16px', marginBottom: '8px' }, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "お問い合わせ内容"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-24 p-2 border-2", name: "message", onChange: (e)=>setMessage(e.target.value), required: true, style: { borderColor: '#011C40', fontSize: '14px' }, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "h-12 w-full", style: { backgroundColor: '#011C40', color: 'white', fontSize: '18px', fontWeight: 'bold' }, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("div", { style: { height: '100px', width: '100%' }, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(GradientFooter, { icons: [ 'fab fa-instagram text-white', 'fab fa-twitter text-white', 'fab fa-facebook-f text-white', 'fab fa-youtube text-white' ], __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this })); }