function MainComponent({ section, description, imageUrl, socialLinks }) { const renderSection = ()=>{ switch(section){ case 'header': return /*#__PURE__*/ React.createElement("header", { className: "bg-[#000000] text-[#FFFFFF] py-4", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFFFFF] font-['Geizer']", __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this }, "Beatablesのロゴ"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, description.map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: `#${item.toLowerCase()}`, className: "mx-4 font-['Geizer'] hover:text-[#FF4655] transition-colors duration-300", __source: { fileName: "", lineNumber: 9, columnNumber: 54 }, __self: this }, item))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF4655] text-[#FFFFFF] font-['Geizer'] py-2 px-4 rounded hover:bg-[#FFFFFF] hover:text-[#FF4655] transition-all duration-300", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, "MINT NOW"))); case 'hero': return /*#__PURE__*/ React.createElement("section", { style: { backgroundImage: `url(${imageUrl})` }, className: "bg-cover bg-center h-screen flex flex-col justify-center items-center text-center", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFFFFF] font-['Geizer'] text-4xl", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "COLLECT, TRAIN, BATTLE"), /*#__PURE__*/ React.createElement("p", { className: "text-[#FFFFFF] mt-4 mb-8 font-['Montserrat']", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "10,000 UNIQUE BEASTABLES"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF4655] text-[#FFFFFF] font-['Geizer'] py-2 px-6 rounded hover:bg-[#FFFFFF] hover:text-[#FF4655] transition-all duration-300", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "MINT NOW")); case 'vision': return /*#__PURE__*/ React.createElement("section", { className: "p-8", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FFFFFF] font-['Geizer'] mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "VISION"), /*#__PURE__*/ React.createElement("p", { className: "text-[#FFFFFF] font-['Montserrat'] mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, description), /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Beastables Character Illustration", className: "w-full max-w-sm mx-auto", style: { animation: "fadeIn 2s" }, __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })); case 'lore': return /*#__PURE__*/ React.createElement("section", { className: "p-8", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FFFFFF] font-['Geizer'] mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "LORE"), /*#__PURE__*/ React.createElement("p", { className: "text-[#FFFFFF] font-['Montserrat'] mb-8", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, description), /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "World of Beastables Illustration", className: "w-full max-w-sm mx-auto", style: { animation: "fadeIn 2s" }, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })); case 'roadmap': return /*#__PURE__*/ React.createElement("section", { className: "p-8", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FFFFFF] font-['Geizer'] mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "ROADMAP"), /*#__PURE__*/ React.createElement("div", { className: "font-['Montserrat'] text-[#FFFFFF]", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, description)); case 'footer': return /*#__PURE__*/ React.createElement("footer", { className: "bg-[#000000] text-[#FFFFFF] py-4 font-['Montserrat']", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-4", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, socialLinks.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.url, className: "text-[#FFFFFF] hover:text-[#FF4655] transition-colors duration-300", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: link.icon, __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "© 2023 Beastables. All rights reserved.")); default: break; } }; return renderSection(); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { section: "header", description: [ 'VISION', 'LORE', 'ROADMAP' ], __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { section: "hero", imageUrl: "path/to/character-image.jpg", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { section: "vision", description: "Vision section description", imageUrl: "path/to/character-image.jpg", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { section: "lore", description: "Lore section description", imageUrl: "path/to/world-image.jpg", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { section: "roadmap", description: /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 53 } }, "Phase descriptions with their respective images/icons."), __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { section: "footer", socialLinks: [ { url: 'https://twitter.com', icon: 'fa fa-twitter' }, { url: 'https://discord.com', icon: 'fa fa-discord' } ], __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` body { background-color: #000000; color: #FFFFFF; font-family: 'Geizer', 'Montserrat', sans-serif; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } button:hover { color: #FF4655 !important; background-color: #FFFFFF !important; transform: scale(1.1); } `)); }