function ChatBot({ initialOpen = false, position = "bottom-right" }) { const [isOpen, setIsOpen] = React.useState(initialOpen); const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [loading, setLoading] = React.useState(false); const chatRef = React.useRef(null); const [error, setError] = React.useState(null); const positionClasses = { "bottom-right": "bottom-4 right-4", "bottom-left": "bottom-4 left-4", "top-right": "top-4 right-4", "top-left": "top-4 left-4" }; React.useEffect(()=>{ if (isOpen && chatRef.current) { chatRef.current.scrollTop = chatRef.current.scrollHeight; } }, [ messages, isOpen ]); const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputValue.trim() || loading) return; const userMessage = inputValue.trim(); setInputValue(""); setError(null); setLoading(true); setMessages((prev)=>[ ...prev, { role: "user", content: userMessage } ]); try { const response = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ messages: [ ...messages, { role: "user", content: userMessage } ], model: "claude-3-opus-20240229" }) }); if (!response.ok) { throw new Error("Failed to get response"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setMessages((prev)=>[ ...prev, { role: "assistant", content: data.content } ]); } catch (err) { console.error("Chat error:", err); setError("Failed to get response. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: `fixed ${positionClasses[position]} z-50`, __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, isOpen && /*#__PURE__*/ React.createElement("div", { className: "bg-[#141415] border border-[#B6B7B7]/10 rounded-lg shadow-lg w-[320px] md:w-[380px] mb-4 backdrop-blur-xl", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#B6B7B7]/10 flex justify-between items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Chat Assistant"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(false), className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { ref: chatRef, className: "h-[400px] overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] rounded-lg px-4 py-2 ${message.role === "user" ? "bg-[#7C4DFF] text-white" : "bg-[#1d2124] text-[#B6B7B7]"}`, __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, message.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d2124] text-[#B6B7B7] rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin text-xs", __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-400 text-sm text-center", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }), error)), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 border-t border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputValue, onChange: (e)=>setInputValue(e.target.value), placeholder: "Type your message...", className: "flex-1 bg-[#1d2124] text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-[#7C4DFF]", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !inputValue.trim() || loading, className: "bg-[#7C4DFF] text-white px-4 py-2 rounded-lg hover:bg-[#6A1B9A] transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-xs", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "bg-[#7C4DFF] hover:bg-[#6A1B9A] text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-colors", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isOpen ? 'fa-times' : 'fa-comment'} text-xs`, __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }))); } function ChatBotStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#141415] to-[#1d2124] p-4", __source: { fileName: "", lineNumber: 145, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-white mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, "Chat Button Positions"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[500px] bg-[#1d2124]/50 rounded-lg p-4", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "Bottom Right (Default)"), /*#__PURE__*/ React.createElement(ChatBot, { position: "bottom-right", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative h-[500px] bg-[#1d2124]/50 rounded-lg p-4", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, "Bottom Left"), /*#__PURE__*/ React.createElement(ChatBot, { position: "bottom-left", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative h-[500px] bg-[#1d2124]/50 rounded-lg p-4", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "Top Right"), /*#__PURE__*/ React.createElement(ChatBot, { position: "top-right", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative h-[500px] bg-[#1d2124]/50 rounded-lg p-4", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, "Top Left"), /*#__PURE__*/ React.createElement(ChatBot, { position: "top-left", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative h-[500px] bg-[#1d2124]/50 rounded-lg p-4", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, "Initially Open"), /*#__PURE__*/ React.createElement(ChatBot, { initialOpen: true, __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this })))); } function SubscriptionPage({ email, redirectURL, price = "5.00" }) { const [loading, setLoading] = React.useState(false); const { data: session, status } = useSession(); const handleSubscribe = async ()=>{ setLoading(true); try { const response = await fetch("/api/stripe/create-checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, redirectURL }) }); const data = await response.json(); if (data.checkoutUrl) { window.location.href = data.checkoutUrl; } else if (data.billingPortalUrl) { window.location.href = data.billingPortalUrl; } else { alert("Something went wrong. Please try again."); } } catch (error) { console.error("Error:", error); alert("An error occurred. Please try again."); } finally{ setLoading(false); } }; if (status === "loading") { return /*#__PURE__*/ React.createElement("div", { className: "p-4 text-[#B6B7B7] font-inter font-medium", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Loading..."); } if (status === "unauthenticated") { return /*#__PURE__*/ React.createElement("div", { className: "p-4 text-left bg-gradient-to-b from-[#141415] to-[#1d2124]", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-[#B6B7B7] font-inter font-medium opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Please sign in to subscribe."), /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-white hover:text-[#B6B7B7] transition-colors font-inter font-medium", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Sign In")); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen font-inter bg-gradient-to-b from-[#141415] to-[#1d2124] flex items-start justify-center px-4 py-8", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md text-left opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl sm:text-4xl font-semibold mb-2 text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "One Simple Monthly Plan"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] mb-8 text-lg font-medium", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "One easy subscription, all features included"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold mb-2 text-white", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Start with 15 Free Generations"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] font-medium", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Then upgrade to unlimited for just $", price, "/month")), /*#__PURE__*/ React.createElement("div", { className: "flex items-end mb-10", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-5xl sm:text-6xl font-semibold text-white", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "$", price), /*#__PURE__*/ React.createElement("span", { className: "text-xl sm:text-2xl ml-2 mb-1 text-[#B6B7B7] font-medium", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "/month")), /*#__PURE__*/ React.createElement("div", { className: "max-w-xs", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "mb-10", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-check mr-3 text-white text-xs w-3 h-3", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#B6B7B7] font-medium", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Unlimited image generations")), /*#__PURE__*/ React.createElement("li", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-check mr-3 text-white text-xs w-3 h-3", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#B6B7B7] font-medium", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "Priority processing")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-check mr-3 text-white text-xs w-3 h-3", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#B6B7B7] font-medium", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Advanced customization options")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSubscribe, disabled: loading, className: "inline-block px-8 py-4 rounded-lg bg-[#1d2124] text-white text-lg hover:bg-[#2A2A2A] transition-colors font-medium", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, loading ? "Processing..." : "Subscribe Now"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; } `)); } function SubscriptionPageStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-[#141415] to-[#1d2124] min-h-screen p-4", __source: { fileName: "", lineNumber: 133, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement(SubscriptionPage, { email: "user@example.com", redirectURL: "http://localhost:3000/account", price: "5.00", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement("div", { className: "border border-[#B6B7B7]/20 rounded-lg p-4", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 text-[#B6B7B7] font-inter font-medium", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, "Loading..."))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, "Unauthenticated State"), /*#__PURE__*/ React.createElement("div", { className: "border border-[#B6B7B7]/20 rounded-lg p-4", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 text-left", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-[#B6B7B7] font-inter font-medium", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "Please sign in to subscribe."), /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-white hover:text-[#B6B7B7] transition-colors font-inter font-medium", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, "Sign In"))))); } 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 LoadingState({ size = 50, color = "#B6B7B7" }) { const sizeClasses = { sm: "w-[50px] h-[50px]", md: "w-[100px] h-[100px]", lg: "w-[150px] h-[150px]" }; const dynamicSize = typeof size === "number" ? `w-[${size}px] h-[${size}px]` : sizeClasses[size] || sizeClasses.md; return /*#__PURE__*/ React.createElement("div", { className: `inline-flex items-center justify-center relative opacity-0 animate-fade-in ${dynamicSize}`, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#7C4DFF]/10 animate-pulse-glow rounded-full", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#7C4DFF]/5 animate-ripple rounded-full", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/03b2f010-026f-4041-ba1b-f331532a66ac/-/format/auto/", alt: "Loading logo", className: `${dynamicSize} object-contain animate-loading`, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, ` @keyframes spinSlow { from { transform: rotate(0deg) scale(0.95); } to { transform: rotate(360deg) scale(0.95); } } @keyframes pulse { 0% { transform: scale(0.98); opacity: 0.6; } 50% { transform: scale(1.02); opacity: 0.9; } 100% { transform: scale(0.98); opacity: 0.6; } } @keyframes glowPulse { 0% { opacity: 0.3; transform: scale(0.98); } 50% { opacity: 0.6; transform: scale(1.05); } 100% { opacity: 0.3; transform: scale(0.98); } } @keyframes ripple { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 0; } } @keyframes fadeInOut { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-loading { animation: spinSlow 2s cubic-bezier(0.4, 0, 0.2, 1) infinite, pulse 2s ease-in-out infinite, fadeInOut 2s ease-in-out infinite; } .animate-pulse-glow { animation: glowPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .animate-ripple { animation: ripple 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .animate-fade-in { animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } `)); } function LoadingStateStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#141415] to-[#1d2124] font-inter", __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start p-4 md:p-8", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-semibold text-xl md:text-2xl mb-4 opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "Loading States"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] font-medium mb-6 md:mb-8 opacity-0 animate-fade-in animation-delay-200", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "Different size variants of the loading component"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8 w-full", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center opacity-0 animate-fade-in animation-delay-300", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] font-medium mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "Small"), /*#__PURE__*/ React.createElement(LoadingState, { size: "sm", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center opacity-0 animate-fade-in animation-delay-400", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] font-medium mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement(LoadingState, { size: "md", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center opacity-0 animate-fade-in animation-delay-500", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] font-medium mb-4", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "Large"), /*#__PURE__*/ React.createElement(LoadingState, { size: "lg", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }))))); } function MainComponent() { const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); const { signInWithGoogle } = useAuth(); const { data: user, loading: userLoading } = useUser(); const [activeAccordion, setActiveAccordion] = React.useState(null); const [showSignupModal, setShowSignupModal] = React.useState(false); const [recentCreations, setRecentCreations] = React.useState([ "https://ucarecdn.com/fd2570fe-4311-407d-b64f-3f6e94e38aef/", "https://ucarecdn.com/b71de46c-8da2-42eb-b00f-35af98ec5e87/" ]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [showShareTooltip, setShowShareTooltip] = React.useState(null); const [selectedLanguage, setSelectedLanguage] = React.useState("en"); const [translations, setTranslations] = React.useState({}); const [isTranslating, setIsTranslating] = React.useState(false); const [activeSection, setActiveSection] = React.useState(null); const [onlineUsers, setOnlineUsers] = React.useState(0); const [currentSlide, setCurrentSlide] = React.useState(0); const slides = [ "https://ucarecdn.com/e7c7acc2-60a9-4018-a7db-964155bbc1a0/-/format/auto/", "https://ucarecdn.com/d006d89b-d22c-495c-90c8-d6a357cf1524/-/format/auto/", "https://ucarecdn.com/9a0bce4a-022a-4cbe-b8b2-a93e9d01509b/-/format/auto/", "https://ucarecdn.com/cdf89b66-c2cf-41e1-98d9-1b02846aa3eb/-/format/auto/" ]; React.useEffect(()=>{ if (typeof window !== "undefined") { const hasSeenModal = localStorage.getItem("hasSeenSignupModal"); if (!hasSeenModal && !user) { setShowSignupModal(true); localStorage.setItem("hasSeenSignupModal", "true"); } const savedLanguage = localStorage.getItem("selectedLanguage"); if (savedLanguage) { setSelectedLanguage(savedLanguage); } } }, [ user ]); React.useEffect(()=>{ const fetchFeaturedImages = async ()=>{ try { const response = await fetch("/api/db/ai-image-generator-7119863", { method: "POST", body: JSON.stringify({ query: "SELECT i.*, u.name as creator_name FROM generated_images i LEFT JOIN user_accounts u ON i.user_id = u.id ORDER BY i.created_at DESC LIMIT 6", values: [] }) }); if (!response.ok) throw new Error("Failed to fetch images"); const data = await response.json(); setRecentCreations(data); setLoading(false); } catch (error) { console.error("Error:", error); setError("Failed to load recent creations"); setLoading(false); } }; fetchFeaturedImages(); }, []); React.useEffect(()=>{ const translateContent = async ()=>{ if (selectedLanguage === "en") { setTranslations({}); return; } setIsTranslating(true); const textsToTranslate = { home: "Home", create: "Create", explore: "Explore", textToSpeech: "Text to Speech", describeImage: "Describe Image", promptLibrary: "Prompt Library", tagline: "Transform your ideas into stunning AI art in seconds", tryBefore: "Try Before You Subscribe", startWith: "Start with 15 free image generations. No credit card required.", startCreating: "Start Creating", subscription: "Subscription", month: "month", unlimited: "Unlimited image generation", download: "Download images in high resolution", save: "Save images to your collection", subscribeNow: "Subscribe Now", poweredBy: "Powered by AI 🤖", features: "Features", testimonials: "What Users Say", faq: "Frequently Asked Questions", customStyles: "Custom Art Styles", pricing: "Pricing", contact: "Contact", aiPowered: "AI-Powered Generation", createStunning: "Create stunning images with advanced AI technology", highRes: "High-Resolution Downloads", getPremium: "Get your creations in premium quality", instant: "Instant Generation", getResults: "Get results in seconds", about: "About", blog: "Blog", news: "News", careers: "Careers", support: "Support", helpCenter: "Help Center", contactUs: "Contact Us", community: "Community", legal: "Legal", privacy: "Privacy Policy", terms: "Terms of Service", cookie: "Cookie Policy", connect: "Connect", howWorks: "How does the AI art generation work?", howWorksAnswer: "Our AI art generator uses advanced machine learning to transform your text descriptions into stunning visual artwork. Simply enter your prompt, and watch as the AI brings your vision to life.", trialIncluded: "What's included in the free trial?", trialAnswer: "The free trial includes 15 image generations. You can create any type of image you want and download them in high resolution.", canDownload: "Can I download my generated images?", downloadAnswer: "Yes! All generated images can be downloaded in high resolution for your personal or commercial use." }; try { const response = await fetch("/integrations/google-translate/language/translate/v2", { method: "POST", body: new URLSearchParams({ q: Object.values(textsToTranslate).join("|"), target: selectedLanguage }) }); if (!response.ok) { throw new Error("Translation failed"); } const data = await response.json(); const translatedTexts = data.data.translations[0]?.translatedText.split("|") || []; const translationObject = {}; Object.keys(textsToTranslate).forEach((key, index)=>{ translationObject[key] = translatedTexts[index] || textsToTranslate[key]; }); setTranslations(translationObject); } catch (error) { console.error("Translation error:", error); } finally{ setIsTranslating(false); } }; translateContent(); }, [ selectedLanguage ]); React.useEffect(()=>{ const handleScroll = ()=>{ const sections = document.querySelectorAll("section[id]"); const scrollPosition = window.scrollY + 100; sections.forEach((section)=>{ const sectionTop = section.offsetTop; const sectionHeight = section.offsetHeight; if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { setActiveSection(section.id); } }); }; if (typeof window !== "undefined") { window.addEventListener("scroll", handleScroll); return ()=>window.removeEventListener("scroll", handleScroll); } }, []); React.useEffect(()=>{ const fetchOnlineUsers = async ()=>{ try { const response = await fetch("/api/explore/online", { method: "POST", body: JSON.stringify({}) }); if (!response.ok) { throw new Error("Failed to fetch online users"); } const data = await response.json(); setOnlineUsers(data.count); } catch (error) { console.error("Error fetching online users:", error); } }; fetchOnlineUsers(); const interval = setInterval(fetchOnlineUsers, 60000); return ()=>clearInterval(interval); }, []); React.useEffect(()=>{ const timer = setInterval(()=>{ setCurrentSlide((prev)=>(prev + 1) % 4); }, 5000); return ()=>clearInterval(timer); }, []); const toggleAccordion = (index)=>{ setActiveAccordion(activeAccordion === index ? null : index); }; const handleShare = async (imageUrl)=>{ try { const shareUrl = `${window.location.origin}?image=${encodeURIComponent(imageUrl)}`; await navigator.clipboard.writeText(shareUrl); setShowShareTooltip(imageUrl); setTimeout(()=>setShowShareTooltip(null), 2000); } catch (error) { console.error("Error sharing:", error); } }; const handleLanguageChange = (language)=>{ setSelectedLanguage(language); if (typeof window !== "undefined") { localStorage.setItem("selectedLanguage", language); } }; const scrollToSection = (sectionId)=>{ const section = document.getElementById(sectionId); if (section) { window.scrollTo({ top: section.offsetTop - 60, behavior: "smooth" }); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 245, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("meta", { name: "description", content: "Create stunning AI-generated art with our powerful image generation tools. Transform your ideas into beautiful artwork instantly.", __source: { fileName: "", lineNumber: 246, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("script", { type: "application/ld+json", __source: { fileName: "", lineNumber: 247, columnNumber: 9 }, __self: this }, ` { "@context": "https://schema.org", "@type": "WebApplication", "name": "Create", "description": "AI-powered art generation platform", "applicationCategory": "Multimedia", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD", "description": "15 free generations" }, "featureList": [ "AI image generation", "High-resolution downloads", "Custom art styles" ] } `)), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen max-w-[100vw] overflow-x-hidden bg-gradient-to-b from-[#141415] to-[#1d2124] font-inter", __source: { fileName: "", lineNumber: 270, columnNumber: 7 }, __self: this }, showSignupModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center z-[70] p-4", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d2124] rounded-xl p-8 max-w-md w-full border border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 275, columnNumber: 17 }, __self: this }, "Welcome to Create"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSignupModal(false), className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 276, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 280, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] mb-8", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, "Start creating amazing AI-generated art with 15 free generations. No credit card required."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>signInWithGoogle({ callbackUrl: "/app" }), className: "w-full bg-white hover:bg-gray-100 text-[#1d2124] font-medium py-3 px-4 rounded-lg mb-4 flex items-center justify-center transition-colors", __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google text-xs mr-3", __source: { fileName: "", lineNumber: 290, columnNumber: 17 }, __self: this }), "Continue with Google"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 justify-center", __source: { fileName: "", lineNumber: 293, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-[#B6B7B7] hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("span", { className: "text-[#B6B7B7]", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "text-[#B6B7B7] hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this }, "Sign Up with Email")))), /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 bg-[#141415] border-b border-[#B6B7B7]/10 text-white h-[40px] flex items-center justify-between px-4 z-[60]", __source: { fileName: "", lineNumber: 311, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 312, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-white", onClick: ()=>setIsMobileMenuOpen(!isMobileMenuOpen), "aria-label": "Toggle menu", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMobileMenuOpen ? 'fa-times' : 'fa-bars'} text-xs`, __source: { fileName: "", lineNumber: 318, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-white hover:text-[#B6B7B7] transition-all duration-300 font-semibold", __source: { fileName: "", lineNumber: 320, columnNumber: 13 }, __self: this }, "Create")), user ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 325, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this }, "Online: ", onlineUsers), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "text-sm hover:text-[#B6B7B7] hover:opacity-80 transition-all duration-300", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, "Sign Out")) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, "Online: ", onlineUsers), /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-sm hover:text-[#B6B7B7] hover:opacity-80 transition-all duration-300", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "text-sm hover:text-[#B6B7B7] hover:opacity-80 transition-all duration-300", __source: { fileName: "", lineNumber: 343, columnNumber: 15 }, __self: this }, "Sign Up"))), /*#__PURE__*/ React.createElement("div", { className: `fixed top-[40px] left-0 h-[calc(100vh-40px)] w-[280px] md:w-52 bg-[#141415]/95 backdrop-blur-xl border-r border-[#B6B7B7]/10 z-[50] transform transition-transform duration-300 ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`, __source: { fileName: "", lineNumber: 352, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "h-[calc(100vh-40px)] overflow-y-auto px-4 py-6 space-y-2", __source: { fileName: "", lineNumber: 353, columnNumber: 11 }, __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-300", __source: { fileName: "", lineNumber: 354, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xs mr-3", __source: { fileName: "", lineNumber: 355, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 356, columnNumber: 15 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("a", { href: "/app", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 358, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic text-xs mr-3", __source: { fileName: "", lineNumber: 359, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 360, columnNumber: 15 }, __self: this }, "AI Generator")), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-xs mr-3", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 364, columnNumber: 15 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("a", { href: "/prompts", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 366, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-xs mr-3", __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 368, columnNumber: 15 }, __self: this }, "Prompts")), /*#__PURE__*/ React.createElement("a", { href: "/text-to-speech", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 370, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-xs mr-3", __source: { fileName: "", lineNumber: 371, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 372, columnNumber: 15 }, __self: this }, "Text to Speech")), /*#__PURE__*/ React.createElement("a", { href: "/describe-image", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 374, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-image text-xs mr-3", __source: { fileName: "", lineNumber: 375, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 376, columnNumber: 15 }, __self: this }, "Describe Image")), /*#__PURE__*/ React.createElement("a", { href: "/prompt-library", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 378, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book text-xs mr-3", __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this }, "Prompt Library")), /*#__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-300", __source: { fileName: "", lineNumber: 382, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book text-xs mr-3", __source: { fileName: "", lineNumber: 383, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, "Blog")), /*#__PURE__*/ React.createElement("a", { href: "/news", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 386, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-newspaper text-xs mr-3", __source: { fileName: "", lineNumber: 387, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 388, columnNumber: 15 }, __self: this }, "News")), /*#__PURE__*/ React.createElement("a", { href: "/event-center", className: "flex items-center px-4 py-2 rounded-lg text-[#B6B7B7] hover:bg-[#1d2124]/60 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 390, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar text-xs mr-3", __source: { fileName: "", lineNumber: 391, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 392, columnNumber: 15 }, __self: this }, "Event Center")))), /*#__PURE__*/ React.createElement("main", { className: "md:pl-52 pt-24 md:pt-[52px] transition-all duration-300 max-w-[100vw] overflow-x-hidden", __source: { fileName: "", lineNumber: 397, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-2 md:px-4 py-12 md:py-20 max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 398, columnNumber: 11 }, __self: this }, userLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-[60vh]", __source: { fileName: "", lineNumber: 400, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingState, { __source: { fileName: "", lineNumber: 401, columnNumber: 17 }, __self: this })) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", { className: "text-center py-8 md:py-24", __source: { fileName: "", lineNumber: 405, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-6xl font-bold text-white mb-4 md:mb-6 px-2", __source: { fileName: "", lineNumber: 406, columnNumber: 19 }, __self: this }, user ? `Welcome back, ${user.name || user.email.split("@")[0]}!` : translations.tagline || "Transform your ideas into stunning AI art"), /*#__PURE__*/ React.createElement("p", { className: "text-base md:text-xl text-[#B6B7B7] mb-6 md:mb-8 px-2", __source: { fileName: "", lineNumber: 412, columnNumber: 19 }, __self: this }, user ? "Continue creating amazing AI-generated art" : translations.startWith || "Start with 15 free image generations. No credit card required."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/app", className: "inline-block bg-[#7C4DFF] hover:bg-[#6A1B9A] text-white font-bold py-2 md:py-3 px-6 md:px-8 rounded-lg transition-all duration-300 hover:scale-105 hover:translate-y-[-2px]", __source: { fileName: "", lineNumber: 418, columnNumber: 19 }, __self: this }, translations.startCreating || "Start Creating")), /*#__PURE__*/ React.createElement("section", { className: "relative w-full h-[300px] md:h-[600px] overflow-hidden rounded-lg mb-8 md:mb-16", __source: { fileName: "", lineNumber: 425, columnNumber: 1 }, __self: this }, slides.map((slide, index)=>/*#__PURE__*/ React.createElement("article", { key: index, className: `absolute inset-0 transition-all duration-1000 ${currentSlide === index ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 427, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: slide, alt: `AI-generated artwork showcasing ${index === 0 ? "vibrant digital landscapes" : index === 1 ? "artistic portrait styles" : index === 2 ? "abstract compositions" : "unique character designs"}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 433, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center", __source: { fileName: "", lineNumber: 446, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-2xl md:text-4xl font-bold text-center px-2 md:px-4", __source: { fileName: "", lineNumber: 447, columnNumber: 25 }, __self: this }, "Create stunning social media content with AI")))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2", __source: { fileName: "", lineNumber: 453, columnNumber: 19 }, __self: this }, slides.map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setCurrentSlide(index), "aria-label": `Go to slide ${index + 1}`, className: `w-2 h-2 rounded-full transition-all duration-300 ${currentSlide === index ? "bg-white" : "bg-white/50"}`, __source: { fileName: "", lineNumber: 455, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: "py-8 md:py-12", __source: { fileName: "", lineNumber: 466, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-3xl font-bold text-white mb-6 md:mb-8 text-center px-2", __source: { fileName: "", lineNumber: 467, columnNumber: 19 }, __self: this }, "Recently Created"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 max-w-6xl mx-auto px-2", __source: { fileName: "", lineNumber: 470, columnNumber: 19 }, __self: this }, recentCreations.map((imageUrl, index)=>/*#__PURE__*/ React.createElement("article", { key: index, className: "relative group overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 472, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `Recently created AI artwork featuring creative ${index % 2 === 0 ? "digital art" : "artistic composition"}`, className: "w-full h-[200px] md:h-[300px] object-cover transition-all duration-300 group-hover:scale-110", __source: { fileName: "", lineNumber: 476, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 483, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/app", className: "opacity-0 group-hover:opacity-100 bg-[#7C4DFF] text-white px-4 md:px-6 py-2 rounded-lg transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:scale-105 hover:translate-y-[-2px] text-sm md:text-base", __source: { fileName: "", lineNumber: 484, columnNumber: 27 }, __self: this }, "Create Similar")))))), /*#__PURE__*/ React.createElement("section", { className: "py-12 md:py-24 text-center px-2", __source: { fileName: "", lineNumber: 495, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-4xl font-bold text-white mb-8 md:mb-12", __source: { fileName: "", lineNumber: 496, columnNumber: 19 }, __self: this }, "Simple Pricing"), /*#__PURE__*/ React.createElement("div", { className: "max-w-sm mx-auto bg-[#1d2124]/50 rounded-xl p-6 md:p-8 border border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 499, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-baseline mb-4", __source: { fileName: "", lineNumber: 500, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl md:text-5xl font-bold text-white", __source: { fileName: "", lineNumber: 501, columnNumber: 23 }, __self: this }, "$5"), /*#__PURE__*/ React.createElement("span", { className: "text-lg md:text-xl text-[#B6B7B7] ml-2", __source: { fileName: "", lineNumber: 502, columnNumber: 23 }, __self: this }, "/month")), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] mb-6 md:mb-8 text-sm md:text-base", __source: { fileName: "", lineNumber: 504, columnNumber: 21 }, __self: this }, "Unlimited AI image generation"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3 md:space-y-4 mb-6 md:mb-8 text-sm md:text-base", __source: { fileName: "", lineNumber: 507, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center text-[#B6B7B7]", __source: { fileName: "", lineNumber: 508, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-xs mr-3 text-[#7C4DFF]", __source: { fileName: "", lineNumber: 509, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 510, columnNumber: 25 }, __self: this }, "Priority processing")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center text-[#B6B7B7]", __source: { fileName: "", lineNumber: 512, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-xs mr-3 text-[#7C4DFF]", __source: { fileName: "", lineNumber: 513, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 514, columnNumber: 25 }, __self: this }, "Advanced customization options")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center text-[#B6B7B7]", __source: { fileName: "", lineNumber: 516, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-xs mr-3 text-[#7C4DFF]", __source: { fileName: "", lineNumber: 517, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 518, columnNumber: 25 }, __self: this }, "Unlimited image generations"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/app", className: "w-full bg-[#7C4DFF] hover:bg-[#6A1B9A] text-white font-bold py-2 md:py-3 px-6 md:px-8 rounded-lg transition-all duration-300 hover:scale-105 hover:translate-y-[-2px] text-sm md:text-base", __source: { fileName: "", lineNumber: 521, columnNumber: 21 }, __self: this }, "Start Free Trial"))), /*#__PURE__*/ React.createElement("section", { className: "text-center py-12 md:py-24 px-2", __source: { fileName: "", lineNumber: 529, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-6xl font-bold text-white mb-4 md:mb-6", __source: { fileName: "", lineNumber: 530, columnNumber: 19 }, __self: this }, translations.tagline || "Transform your ideas into stunning AI art"), /*#__PURE__*/ React.createElement("p", { className: "text-base md:text-xl text-[#B6B7B7] mb-6 md:mb-8", __source: { fileName: "", lineNumber: 533, columnNumber: 19 }, __self: this }, translations.startWith || "Start with 15 free image generations. No credit card required."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/app", className: "inline-block bg-[#7C4DFF] hover:bg-[#6A1B9A] text-white font-bold py-2 md:py-3 px-6 md:px-8 rounded-lg transition-all duration-300 hover:scale-105 hover:translate-y-[-2px] text-sm md:text-base", __source: { fileName: "", lineNumber: 537, columnNumber: 19 }, __self: this }, translations.startCreating || "Start Creating")), /*#__PURE__*/ React.createElement("footer", { className: "py-8 border-t border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 544, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-2 md:px-8", __source: { fileName: "", lineNumber: 545, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8", __source: { fileName: "", lineNumber: 546, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 547, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-3 md:mb-4 text-sm md:text-base", __source: { fileName: "", lineNumber: 548, columnNumber: 25 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 549, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 550, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/app", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 551, columnNumber: 29 }, __self: this }, "AI Generator")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 555, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 556, columnNumber: 29 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 560, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/prompt-library", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 561, columnNumber: 29 }, __self: this }, "Prompt Library")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 567, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-3 md:mb-4 text-sm md:text-base", __source: { fileName: "", lineNumber: 568, columnNumber: 25 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 569, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 570, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 571, columnNumber: 29 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 575, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/careers", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 576, columnNumber: 29 }, __self: this }, "Careers")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 582, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-3 md:mb-4 text-sm md:text-base", __source: { fileName: "", lineNumber: 583, columnNumber: 25 }, __self: this }, "Resources"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 584, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 585, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/docs", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 586, columnNumber: 29 }, __self: this }, "Documentation")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 590, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/help", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 591, columnNumber: 29 }, __self: this }, "Help Center")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 595, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/status", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 596, columnNumber: 29 }, __self: this }, "Status")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 602, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-3 md:mb-4 text-sm md:text-base", __source: { fileName: "", lineNumber: 603, columnNumber: 25 }, __self: this }, "Legal"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 604, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 605, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/privacy", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 606, columnNumber: 29 }, __self: this }, "Privacy")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 610, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/terms", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 611, columnNumber: 29 }, __self: this }, "Terms")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 615, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/cookies", className: "text-[#B6B7B7] hover:text-white transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 616, columnNumber: 29 }, __self: this }, "Cookies"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 md:mt-8 pt-6 md:pt-8 border-t border-[#B6B7B7]/10 flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 623, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] text-xs md:text-sm", __source: { fileName: "", lineNumber: 624, columnNumber: 23 }, __self: this }, "© 2025 Create. All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 md:space-x-6 mt-4 md:mt-0", __source: { fileName: "", lineNumber: 625, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://twitter.com/create", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 626, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-xs", __source: { fileName: "", lineNumber: 627, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://github.com/create", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 629, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-github text-xs", __source: { fileName: "", lineNumber: 630, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://discord.gg/create", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 632, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-discord text-xs", __source: { fileName: "", lineNumber: 633, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.tiktok.com/@setoffdesign", target: "_blank", rel: "noopener noreferrer", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 635, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-tiktok text-xs", __source: { fileName: "", lineNumber: 636, columnNumber: 27 }, __self: this }))))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 646, columnNumber: 9 }, __self: this }, ` .bg-[#7C4DFF] { box-shadow: 0 0 15px rgba(124, 77, 255, 0.3); } .bg-[#7C4DFF]:hover { box-shadow: 0 0 25px rgba(124, 77, 255, 0.5); transform: scale(1.05) translateY(-2px); } .text-white { text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } @keyframes fadeTransition { from { opacity: 0; } to { opacity: 1; } } .transition-opacity { animation: fadeTransition 1s ease-in-out; } `), /*#__PURE__*/ React.createElement(ChatBot, { position: "bottom-right", __source: { fileName: "", lineNumber: 669, columnNumber: 9 }, __self: this }), isMobileMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-[45] md:hidden", onClick: ()=>setIsMobileMenuOpen(false), __source: { fileName: "", lineNumber: 671, columnNumber: 11 }, __self: this }))); }