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 [selectedFile, setSelectedFile] = React.useState(null); const [preview, setPreview] = React.useState(null); const [question, setQuestion] = React.useState(""); const [response, setResponse] = React.useState(""); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [upload, { loading: uploadLoading }] = useUpload(); const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); const handleFileChange = async (e)=>{ const file = e.target.files[0]; if (file) { try { const { url, error } = await upload({ file }); if (error) throw new Error(error); setSelectedFile(url); setPreview(URL.createObjectURL(file)); } catch (err) { setError("Failed to upload image. Please try again."); console.error(err); } } }; const analyzeImage = async ()=>{ if (!selectedFile || !question.trim()) return; setLoading(true); setError(null); try { const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: question }, { type: "image_url", image_url: { url: selectedFile } } ] } ] }) }); if (!response.ok) throw new Error("Failed to analyze image"); const data = await response.json(); setResponse(data.choices[0].message.content); } catch (err) { console.error(err); setError("Failed to analyze the image. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen bg-gradient-to-b from-[#141415] to-[#1d2124] font-inter", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMobileMenuOpen(!isMobileMenuOpen), className: "md:hidden fixed top-4 left-4 z-50 p-2 rounded-lg bg-[#1d2124]/60 text-white", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMobileMenuOpen ? "fa-times" : "fa-bars"} text-xs`, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `fixed top-0 left-0 h-full w-64 bg-[#141415]/95 backdrop-blur-xl border-r border-[#B6B7B7]/10 z-40 transform transition-transform duration-300 ease-in-out ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"} md:translate-x-0`, __source: { fileName: "", lineNumber: 78, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/82bf40ba-7691-4c03-bef1-55eb63212828/-/format/auto/", alt: "Logo", className: "h-8 mb-8", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { className: "space-y-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/home", className: "flex items-center text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xs mr-3", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "flex items-center text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-xs mr-3", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("a", { href: "/create", className: "flex items-center text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-xs mr-3", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "Create")), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "flex items-center text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-xs mr-3", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Settings")), /*#__PURE__*/ React.createElement("a", { href: "/help", className: "flex items-center text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle text-xs mr-3", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "Help")), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "flex items-center text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus text-xs mr-3", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Sign Up")), /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "flex items-center text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-in-alt text-xs mr-3", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, "Sign In"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative overflow-hidden md:ml-64", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "matrix-rain absolute inset-0 opacity-20", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "neural-network absolute inset-0 opacity-30", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "cyber-grid absolute inset-0 opacity-10", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "scan-lines absolute inset-0 pointer-events-none", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "binary-code absolute inset-0 opacity-5", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "data-flow absolute inset-0 opacity-20", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "animated-gradient absolute inset-0 opacity-20", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto relative z-10 px-4 sm:px-6 lg:px-8 py-6 sm:py-8", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-xl sm:text-2xl md:text-3xl font-semibold mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "Describe Image"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d2124]/60 backdrop-blur-2xl rounded-lg p-4 sm:p-6 lg:p-8 mb-8 border border-[#B6B7B7]/20 shadow-glow transition-all duration-500 hover:shadow-stronger", __source: { fileName: "", lineNumber: 134, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white mb-2", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement("div", { className: `border-2 border-dashed border-[#B6B7B7]/20 rounded-lg p-8 text-center ${!preview ? "hover:border-[#7C4DFF]/50 hover:scale-[1.01] pulse-animation" : ""} transition-all duration-300`, __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, preview ? /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 146, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: preview, alt: "Preview", className: "max-h-[300px] w-auto mx-auto rounded-lg object-contain", __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setPreview(null); setSelectedFile(null); }, className: "absolute top-2 right-2 bg-[#141415]/80 p-2 rounded-full hover:bg-[#141415] transition-colors", __source: { fileName: "", lineNumber: 152, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-white text-xs", __source: { fileName: "", lineNumber: 159, columnNumber: 25 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", id: "imageInput", __source: { fileName: "", lineNumber: 164, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "imageInput", className: "cursor-pointer", __source: { fileName: "", lineNumber: 171, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#B6B7B7] mb-2", __source: { fileName: "", lineNumber: 172, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-2xl", __source: { fileName: "", lineNumber: 173, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] mb-1", __source: { fileName: "", lineNumber: 175, columnNumber: 25 }, __self: this }, "Drop your image here or click to upload"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7]/60", __source: { fileName: "", lineNumber: 178, columnNumber: 25 }, __self: this }, "Supports PNG, JPG, WEBP up to 5MB"))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "Ask a Question"), /*#__PURE__*/ React.createElement("input", { type: "text", value: question, onChange: (e)=>setQuestion(e.target.value), placeholder: "What do you want to know about this image?", className: "w-full p-4 bg-[#141415]/80 text-white border border-[#B6B7B7]/20 rounded-lg focus:border-[#7C4DFF] focus:shadow-[0_0_15px_rgba(124,77,255,0.3)] transition-all duration-300 backdrop-blur-sm", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: analyzeImage, disabled: !selectedFile || !question.trim() || loading, className: `w-full py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] ${!selectedFile || !question.trim() || loading ? "bg-[#B6B7B7]/20 text-[#B6B7B7]/50 cursor-not-allowed" : "bg-[#7C4DFF] text-white hover:bg-[#6A1B9A] hover:shadow-[0_0_20px_rgba(124,77,255,0.3)]"}`, __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, loading ? "Analyzing..." : "Analyze Image")), error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#FF4D4D]/10 border border-[#FF4D4D]/20 rounded-lg mb-6", __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#FF4D4D]", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, error)), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center my-8", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingState, { size: 50, color: "#B6B7B7", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this })), response && !loading && /*#__PURE__*/ React.createElement("div", { className: "bg-[#141415]/60 backdrop-blur-xl p-4 sm:p-6 rounded-lg border border-[#B6B7B7]/10 shadow-lg transition-all duration-500 fade-in-up", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-semibold mb-3 sm:mb-4 flex items-center text-sm sm:text-base", __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#7C4DFF] mr-2", __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }), "Analysis Complete"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] whitespace-pre-wrap text-sm sm:text-base", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, response)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#141415]/80 backdrop-blur-sm border-t border-[#B6B7B7]/10 py-6 mt-auto", __source: { fileName: "", lineNumber: 236, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 242, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/features", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 242, columnNumber: 23 }, __self: this }, "Features")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 243, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/pricing", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 243, columnNumber: 23 }, __self: this }, "Pricing")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/roadmap", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 244, columnNumber: 23 }, __self: this }, "Roadmap")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 250, columnNumber: 23 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 251, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/blog", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 251, columnNumber: 23 }, __self: this }, "Blog")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 252, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/careers", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 252, columnNumber: 23 }, __self: this }, "Careers")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this }, "Resources"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 258, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/docs", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 258, columnNumber: 23 }, __self: this }, "Documentation")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 259, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/help", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 259, columnNumber: 23 }, __self: this }, "Help Center")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 260, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/guides", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 260, columnNumber: 23 }, __self: this }, "Guides")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, "Legal"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm", __source: { fileName: "", lineNumber: 265, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/privacy", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 266, columnNumber: 23 }, __self: this }, "Privacy")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/terms", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 267, columnNumber: 23 }, __self: this }, "Terms")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 268, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/security", className: "text-[#B6B7B7] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 268, columnNumber: 23 }, __self: this }, "Security"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 pt-8 border-t border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7] text-sm", __source: { fileName: "", lineNumber: 273, columnNumber: 15 }, __self: this }, "© 2025 Create. All rights reserved."))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 278, columnNumber: 7 }, __self: this }, ` @keyframes matrixRain { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @keyframes neuralPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } } @keyframes scanLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @keyframes cyberGridPulse { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.3; } } @keyframes binaryFade { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.2; } } @keyframes dataFlow { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(100%) translateX(50%); } } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .matrix-rain { background: linear-gradient(180deg, transparent, rgba(124, 77, 255, 0.1)); font-family: monospace; white-space: nowrap; animation: matrixRain 20s linear infinite; background-size: 100% 100%; } .neural-network { background-image: radial-gradient(circle at 30% 30%, rgba(124, 77, 255, 0.1) 1px, transparent 1px), radial-gradient(circle at 70% 70%, rgba(0, 229, 255, 0.1) 1px, transparent 1px); background-size: 50px 50px; animation: neuralPulse 4s ease-in-out infinite; } .scan-lines::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(124, 77, 255, 0.2), transparent); animation: scanLine 3s linear infinite; } .cyber-grid { background-image: linear-gradient(rgba(124, 77, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 77, 255, 0.1) 1px, transparent 1px); background-size: 50px 50px; animation: cyberGridPulse 4s ease-in-out infinite; } .binary-code::after { content: '01101001 10100110'; position: absolute; font-family: monospace; font-size: 10px; color: rgba(124, 77, 255, 0.2); animation: binaryFade 3s ease-in-out infinite; } .data-flow { background: radial-gradient(circle, rgba(124, 77, 255, 0.1) 1px, transparent 1px); background-size: 20px 20px; animation: dataFlow 15s linear infinite; } .animated-gradient { background: linear-gradient(45deg, #7C4DFF, #4A148C, #311B92, #6A1B9A); background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; } .shadow-glow { box-shadow: 0 0 30px rgba(124, 77, 255, 0.15); } .shadow-stronger { box-shadow: 0 0 50px rgba(124, 77, 255, 0.25); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s ease forwards; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } .pulse-animation:hover { animation: pulse 2s ease-in-out infinite; } `)); }