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 [prompt, setPrompt] = React.useState(""); const [generatedImage, setGeneratedImage] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [isSidebarOpen, setIsSidebarOpen] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); const examplePrompts = [ "A professional headshot of a business woman in a navy suit, studio lighting, high quality DSLR", "A modern minimalist logo design for a tech startup, clean lines, white background", "A cozy cafe interior with warm lighting, exposed brick walls, and people working on laptops" ]; const handleExampleClick = (example)=>{ setPrompt(example); }; const handleGenerate = async ()=>{ if (!prompt.trim()) return; setLoading(true); setError(null); try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`, { method: "GET" }); if (!response.ok) { throw new Error("Failed to generate image"); } const data = await response.json(); setGeneratedImage(data.data[0]); } catch (err) { console.error(err); setError("Failed to generate image. Please try again."); } finally{ setLoading(false); } }; const handleShare = async ()=>{ if (!generatedImage) return; try { await navigator.clipboard.writeText(generatedImage); alert("Image URL copied to clipboard!"); } catch (err) { console.error(err); alert("Failed to copy URL"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#141415] to-[#1d2124] font-inter flex flex-col", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 bg-[#141415]/95 backdrop-blur-xl border-b border-[#B6B7B7]/10 z-50", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/82bf40ba-7691-4c03-bef1-55eb63212828/-/format/auto/", alt: "Logo", className: "h-8", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/create", className: "text-white", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Create"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/blog", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "Blog"))))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden fixed top-[72px] left-0 right-0 bg-[#141415]/95 backdrop-blur-xl border-b border-[#B6B7B7]/10 z-[55]", __source: { fileName: "", lineNumber: 92, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsSidebarOpen(!isSidebarOpen), className: "text-white", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isSidebarOpen ? "times" : "bars"} text-xs`, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: `fixed top-[72px] left-0 h-[calc(100vh-72px)] w-52 bg-[#141415]/95 backdrop-blur-xl border-r border-[#B6B7B7]/10 transform transition-transform duration-300 z-[50] ${isSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "h-full overflow-y-auto px-4 py-6 space-y-2", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-200", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xs mr-3", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("a", { href: "/create", className: "flex items-center px-4 py-2 rounded-lg text-white bg-[#1d2124]/60 hover:bg-[#1d2124] transition-all duration-200", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-xs mr-3", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Create")), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-200", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle text-xs mr-3", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("a", { href: "/blog", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-200", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-blog text-xs mr-3", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Blog")))), /*#__PURE__*/ React.createElement("div", { className: "md:pl-52 pt-24 md:pt-[88px] flex-grow", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-white mb-2", __source: { fileName: "", lineNumber: 146, columnNumber: 3 }, __self: this }, "Professional AI Image Generation"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7]", __source: { fileName: "", lineNumber: 149, columnNumber: 3 }, __self: this }, "Transform your ideas into high-quality, AI-generated imagery")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 animate-fade", __source: { fileName: "", lineNumber: 153, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 154, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 155, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this }, "Try these examples:"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle text-[#B6B7B7] hover:text-white transition-colors cursor-help text-xs", onMouseEnter: ()=>setShowTooltip(true), onMouseLeave: ()=>setShowTooltip(false), __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }), showTooltip && /*#__PURE__*/ React.createElement("div", { className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-1 bg-[#1d2124] text-white text-sm rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, "Click any example to try it out"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 170, columnNumber: 5 }, __self: this }, examplePrompts.map((example, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleExampleClick(example), className: "w-full text-left px-4 py-3 bg-[#1d2124]/40 hover:bg-[#1d2124]/60 text-[#B6B7B7] hover:text-white rounded-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, example)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 182, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Enter a detailed description of your desired image...", className: "w-full h-32 bg-[#1d2124]/60 text-white border border-[#B6B7B7]/20 rounded-lg px-4 py-3 focus:outline-none focus:border-[#7C4DFF] transition-colors resize-none", __source: { fileName: "", lineNumber: 183, columnNumber: 5 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] text-sm italic px-1", __source: { fileName: "", lineNumber: 189, columnNumber: 5 }, __self: this }, "Tip: Include details about style, lighting, and composition for best results")), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, disabled: !prompt.trim() || loading, className: `w-full py-3 rounded-lg font-medium transition-all duration-300 ${!prompt.trim() || loading ? "bg-gradient-to-r from-[#7C4DFF]/50 to-[#6A1B9A]/50 cursor-not-allowed" : "bg-gradient-to-r from-[#7C4DFF] to-[#6A1B9A] hover:from-[#8C5DFF] hover:to-[#7A2B9A]"} text-white`, __source: { fileName: "", lineNumber: 194, columnNumber: 3 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 204, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin text-xs mr-2", __source: { fileName: "", lineNumber: 205, columnNumber: 9 }, __self: this }), "Generating...") : "Generate Professional Image"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-[#B6B7B7] text-xs", __source: { fileName: "", lineNumber: 212, columnNumber: 3 }, __self: this }, "Powered by Stable Diffusion")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500/10 border border-red-500/20 rounded-lg p-4 text-red-400 text-center", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, error), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), generatedImage && !loading && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative rounded-lg overflow-hidden border border-[#B6B7B7]/20 animate-fade", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "AI generated artwork based on your description", className: "w-full h-auto object-cover", __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300", __source: { fileName: "", lineNumber: 237, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: generatedImage, download: "generated-image.png", className: "flex-1 bg-[#1d2124]/60 text-white py-3 rounded-lg text-center hover:bg-[#1d2124] transition-colors flex items-center justify-center", __source: { fileName: "", lineNumber: 240, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-xs mr-2", __source: { fileName: "", lineNumber: 245, columnNumber: 21 }, __self: this }), "Download Image"), /*#__PURE__*/ React.createElement("button", { onClick: handleShare, className: "flex-1 bg-[#1d2124]/60 text-white py-3 rounded-lg hover:bg-[#1d2124] transition-colors flex items-center justify-center", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share text-xs mr-2", __source: { fileName: "", lineNumber: 252, columnNumber: 21 }, __self: this }), "Share Image")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#141415] border-t border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 262, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 264, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/82bf40ba-7691-4c03-bef1-55eb63212828/-/format/auto/", alt: "Logo", className: "h-8", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7]", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, "Create professional AI-generated images instantly")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, "Quick Links"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#B6B7B7] hover:text-[#7C4DFF] transition-colors", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/create", className: "text-[#B6B7B7] hover:text-[#7C4DFF] transition-colors", __source: { fileName: "", lineNumber: 280, columnNumber: 17 }, __self: this }, "Create"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B6B7B7] hover:text-[#7C4DFF] transition-colors", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/blog", className: "text-[#B6B7B7] hover:text-[#7C4DFF] transition-colors", __source: { fileName: "", lineNumber: 282, columnNumber: 17 }, __self: this }, "Blog"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 286, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 287, columnNumber: 15 }, __self: this }, "Connect"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://twitter.com", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-[#7C4DFF] transition-colors", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-xs", __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://discord.com", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-[#7C4DFF] transition-colors", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-discord text-xs", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://github.com", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-[#7C4DFF] transition-colors", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-github text-xs", __source: { fileName: "", lineNumber: 296, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8 pt-8 border-t border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 302, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] text-sm", __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }, "© 2024 All rights reserved")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 308, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade { animation: fadeIn 0.5s ease-out forwards; } `)); }