function GallerySection({ images }) { const [modalImage, setModalImage] = React.useState(null); const openModal = (image)=>{ setModalImage(image); }; const closeModal = ()=>{ setModalImage(null); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image.src, alt: image.alt, className: "w-full h-[300px] object-cover cursor-pointer", onClick: ()=>openModal(image.src), __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }))), modalImage && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: modalImage, alt: "Modal Content", className: "h-[300px]", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-0 right-0 mt-2 mr-2 text-white text-2xl", onClick: closeModal, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "×")))); } function GallerySectionStory() { const images = [ { src: "/path/to/gallery1.jpg", alt: "バンドのライブ写真1" }, { src: "/path/to/gallery2.jpg", alt: "バンドのライブ写真2" }, { src: "/path/to/gallery3.jpg", alt: "バンドのライブ写真3" }, { src: "/path/to/gallery4.jpg", alt: "バンドのライブ写真4" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GallerySection, { images: images, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleFormSubmit = (event)=>{ event.preventDefault(); alert("お問い合わせありがとうございます。送信内容を確認しました。"); }; const images = [ { src: "/path/to/gallery1.jpg", alt: "バンドのライブ写真1" }, { src: "/path/to/gallery2.jpg", alt: "バンドのライブ写真2" }, { src: "/path/to/gallery3.jpg", alt: "バンドのライブ写真3" }, { src: "/path/to/gallery4.jpg", alt: "バンドのライブ写真4" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000] text-white font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#111]", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "LIENOVA"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "HOME"), /*#__PURE__*/ React.createElement("a", { href: "#live", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "LIVE"), /*#__PURE__*/ React.createElement("a", { href: "#gallery", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "GALLERY"), /*#__PURE__*/ React.createElement("a", { href: "#members", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "MEMBERS"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "CONTACT"))), /*#__PURE__*/ React.createElement("section", { id: "home", className: "relative h-[400px] flex items-center justify-center bg-cover bg-center", style: { backgroundImage: "url('/path/to/your/image.jpg')" }, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black opacity-50", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 text-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Experience the Future of Rock"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-[#ff0000] hover:bg-[#ff4545] rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "最新情報を見る"))), /*#__PURE__*/ React.createElement("section", { id: "live", className: "p-8", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "ライブ情報"), /*#__PURE__*/ React.createElement("table", { className: "w-full bg-[#111] text-white", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-[#222]", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "場所"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "イベント名"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "チケットリンク"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "2023-11-01"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "東京"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "ロックフェス"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#ticket-1", className: "text-[#ff0000]", __source: { fileName: "", lineNumber: 49, columnNumber: 35 }, __self: this }, "購入する"))), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "2023-12-15"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "大阪"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "冬のライブ"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#ticket-2", className: "text-[#ff0000]", __source: { fileName: "", lineNumber: 55, columnNumber: 35 }, __self: this }, "購入する")))))), /*#__PURE__*/ React.createElement("section", { id: "gallery", className: "p-8", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "ギャラリー"), /*#__PURE__*/ React.createElement(GallerySection, { images: images, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("section", { id: "members", className: "p-8", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "メンバー紹介"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] p-4 rounded text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/member1.jpg", alt: "ギタリストメンバー1", className: "w-[300px] h-[300px] object-cover mx-auto mb-4 rounded-full", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "メンバー名1"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#888]", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "ギター"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "簡単なプロフィール...")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] p-4 rounded text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/member2.jpg", alt: "ボーカリストメンバー2", className: "w-[300px] h-[300px] object-cover mx-auto mb-4 rounded-full", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "メンバー名2"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#888]", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "ボーカル"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "簡単なプロフィール...")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] p-4 rounded text-center", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/member3.jpg", alt: "ドラマーメンバー3", className: "w-[300px] h-[300px] object-cover mx-auto mb-4 rounded-full", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "メンバー名3"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#888]", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "ドラム"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "簡単なプロフィール...")))), /*#__PURE__*/ React.createElement("section", { id: "contact", className: "p-8", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "お問い合わせ"), /*#__PURE__*/ React.createElement("form", { className: "bg-[#111] p-4 rounded space-y-4", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "w-full p-2 bg-[#222] rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: "w-full p-2 bg-[#222] rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", className: "w-full p-2 bg-[#222] rounded", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#ff0000] hover:bg-[#ff4545] rounded", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#111] text-white p-4", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://twitter.com", className: "fab fa-twitter", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "https://instagram.com", className: "fab fa-instagram", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "https://facebook.com", className: "fab fa-facebook", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "© 2023 LIENOVA"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "HOME"), /*#__PURE__*/ React.createElement("a", { href: "#live", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "LIVE"), /*#__PURE__*/ React.createElement("a", { href: "#gallery", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "GALLERY"), /*#__PURE__*/ React.createElement("a", { href: "#members", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "MEMBERS"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "hover:text-[#ff0000]", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "CONTACT")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, ` .cursor-pointer:hover { transform: scale(1.05); transition: transform 0.2s; } `)); }

日付	場所	イベント名	チケットリンク
2023-11-01	東京	ロックフェス	購入する
2023-12-15	大阪	冬のライブ	購入する