function RoundedButtonDesign({ children, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "font-inter font-medium text-[#0E0F10] bg-[#E4E4E4] rounded-[8px] px-4 py-2 hover:bg-white transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function RoundedButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Button clicked'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Click me"), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Another button clicked'), __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Another button")); } function MainComponent() { const [activeAccordion, setActiveAccordion] = React.useState(null); const toggleAccordion = (index)=>{ setActiveAccordion(activeAccordion === index ? null : index); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen font-inter bg-gradient-to-b from-[#141415] to-[#1d2124]", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-start p-8", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-xl font-semibold text-white", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "MatterForge"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { target: "_self", href: "/app", className: "px-6 py-2 rounded-lg border border-[#B6B7B7] text-[#B6B7B7] hover:bg-[#1d2124]", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Login"))), /*#__PURE__*/ React.createElement("header", { className: "text-left py-16 md:py-24 px-8 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-7xl font-semibold mb-8 text-white", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Generate AI Images"), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl mb-12 text-[#B6B7B7]", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Create stunning images with just a few clicks!"), /*#__PURE__*/ React.createElement("a", { href: "/app", target: "_self", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-8 md:px-10 py-3 md:py-4 rounded-lg border border-[#B6B7B7] text-[#B6B7B7] text-lg mb-16 hover:bg-[#1d2124]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Start Generating")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-12 mt-8 mb-8 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/2af2a257-183b-4cb0-8631-2e4d79a014f8/", alt: "Magical house on a book with waterfall", className: "w-full h-full object-cover rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/2fe9d1b9-01d9-41b8-a51a-ece5e3c208b6/", alt: "Colorful cosmic art with planets and stars", className: "w-full h-full object-cover rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/07bebd32-b560-4cc0-836c-ac984d247739/", alt: "Man working in the forest", className: "w-full h-full object-cover rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/de515928-b890-46a8-bbb9-49cacf6b88d2/", alt: "Anime style girl with panda in bamboo forest", className: "w-full h-full object-cover rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: "py-12 md:py-16", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start px-8", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl md:text-2xl mb-8 text-white", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Subscription"), /*#__PURE__*/ React.createElement("div", { className: "flex items-end mb-12", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl md:text-5xl font-medium text-white", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "$9.99"), /*#__PURE__*/ React.createElement("span", { className: "text-lg md:text-xl ml-2 mb-1 text-[#B6B7B7]", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "/month")), /*#__PURE__*/ React.createElement("ul", { className: "mb-12 text-left", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-6 flex items-center", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-check mr-4 text-[12px] text-[#B6B7B7]", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#B6B7B7]", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Unlimited image generation")), /*#__PURE__*/ React.createElement("li", { className: "mb-6 flex items-center", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-check mr-4 text-[12px] text-[#B6B7B7]", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#B6B7B7]", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Download images in high resolution")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-check mr-4 text-[12px] text-[#B6B7B7]", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#B6B7B7]", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Save images to your collection"))), /*#__PURE__*/ React.createElement("button", { className: "px-8 py-3 rounded-lg border border-[#B6B7B7] text-[#B6B7B7] text-lg hover:bg-[#1d2124]", onClick: ()=>window.location.href = "/app", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Subscribe Now"))), /*#__PURE__*/ React.createElement("section", { className: "py-16 md:py-24 max-w-2xl mx-auto px-8", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-3xl mb-8 text-left text-white", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "Frequently Asked Questions"), [ "How many images can I generate?", "What types of images can I create?", "How detailed can the generated images be?" ].map((question, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-8", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex justify-between items-center w-full p-6 rounded border border-[#B6B7B7] text-[#B6B7B7]", onClick: ()=>toggleAccordion(index), __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, question), /*#__PURE__*/ React.createElement("i", { className: `far ${activeAccordion === index ? "fa-chevron-up" : "fa-chevron-down"} text-[12px]`, __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this })), activeAccordion === index && /*#__PURE__*/ React.createElement("div", { className: "p-6 text-[#B6B7B7] border border-[#B6B7B7] border-t-0", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, index === 0 && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, "You can generate an unlimited number of images with our subscription plan. However, we may need to limit generation during peak times to ensure fair usage for all users."), index === 1 && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, "Our AI can generate a wide variety of image types, including landscapes, portraits, abstract art, and more. You can describe what you want, and the AI will create it for you."), index === 2 && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }, "The AI can create highly detailed images based on your descriptions. The more specific you are, the more detailed and accurate the generated image will be."))))), /*#__PURE__*/ React.createElement("footer", { className: "py-16 border-t border-[#B6B7B7]", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-8", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-start", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl text-white mb-8 md:mb-0", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "MatterForge"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-8 md:mb-0 text-[#B6B7B7]", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "DarkMatter AI 🤖"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/create_xyz", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-white w-6 h-6", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-x text-lg", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-white w-6 h-6", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-telegram text-lg", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.youtube.com/@createdotxyz", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-white w-6 h-6", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube text-lg", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } * { animation: fadeIn 0.5s ease-in; } `)); }