function ButtonStyles({ variant = "primary", text, keyboardCommand, onClick }) { const baseClasses = "font-inter font-medium rounded-lg px-4 py-2 inline-block"; const primaryClasses = "bg-[#101012] text-white border border-[#3D3D3F]"; const secondaryClasses = "bg-transparent text-[#101012] border border-[#D1D1D3]"; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: `${baseClasses} ${variant === "primary" ? primaryClasses : secondaryClasses}`, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, text, keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: `ml-2 text-xs px-1.5 py-0.5 rounded ${variant === "primary" ? "bg-[#3D3D3F] text-white" : "bg-[#D1D1D3] text-[#101012]"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStylesStory() { const handleClick = ()=>{ alert('Button clicked!'); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Primary Button"), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Click me", onClick: handleClick, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Primary Button with Keyboard Command"), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Save", keyboardCommand: "⌘S", onClick: handleClick, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Secondary Button"), /*#__PURE__*/ React.createElement(ButtonStyles, { variant: "secondary", text: "Cancel", onClick: handleClick, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Secondary Button with Keyboard Command"), /*#__PURE__*/ React.createElement(ButtonStyles, { variant: "secondary", text: "Undo", keyboardCommand: "⌘Z", onClick: handleClick, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [email, setEmail] = useState(""); const [submitted, setSubmitted] = useState(false); const [error, setError] = useState(""); const [copySuccess, setCopySuccess] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setIsSubmitting(true); try { await fetch("/api/db/waitlist-entries", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `waitlist` (`email`, `signup_date`) VALUES (?, ?)", values: [ email, new Date().toISOString() ] }) }); setSubmitted(true); setEmail(""); setError(""); } catch (err) { setError("Something went wrong. Please try again."); console.error("Error during signup:", err); } finally{ setIsSubmitting(false); } }; const handleShareLink = (platform)=>{ const shareUrl = window.location.href; const shareText = "I just joined the MemeVu OS waitlist! Join me and be among the first to experience it."; const baseUrls = { twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`, facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}"e=${encodeURIComponent(shareText)}`, youtube: `https://www.youtube.com/channel/UCxxxxxxxx` }; const shareLink = baseUrls[platform]; if (shareLink) { window.open(shareLink, "_blank"); } }; const copyToClipboard = ()=>{ const shareUrl = window.location.href; navigator.clipboard.writeText(shareUrl).then(()=>{ setCopySuccess("Link copied!"); setTimeout(()=>setCopySuccess(""), 2000); }, ()=>{ setCopySuccess("Failed to copy"); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FCFCFC] flex flex-col relative overflow-hidden pb-24", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-0", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/e58d0e87-de13-4dbb-8e01-b42cb9369624/-/format/auto/", alt: "Circuit board background", className: "w-full h-full object-cover opacity-50 filter blur-sm", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#FCFCFC] opacity-70", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: "relative w-full z-10", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-16", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#101012] text-3xl font-inter", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Meme", /*#__PURE__*/ React.createElement("span", { className: "text-[#101012]", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, "Vu")))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col items-center justify-center px-6 md:px-10 py-24 relative z-10", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto w-full", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 md:p-12", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl lg:text-7xl text-[#101012] font-inter mb-8", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "The MemeOS"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "is coming....")), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#777777] font-inter mb-8 leading-relaxed", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Be among the first to experience MemeVu OS. Designed for Memelords. Join our waitlist for early access. It is OK you were not first."), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-8", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-px flex-1 bg-[#D1D1D3]", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-inter text-[#101012]", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Join the waitlist now"), /*#__PURE__*/ React.createElement("div", { className: "h-px flex-1 bg-[#D1D1D3]", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this })), !submitted ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email", className: "w-full px-6 py-4 rounded-lg border border-[#D1D1D3] text-[#101012] placeholder-[#777777] focus:outline-none focus:border-[#101012] focus:ring-1 focus:ring-[#101012] transition-colors font-inter", required: true, disabled: isSubmitting, __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement(ButtonStyles, { text: isSubmitting ? "Processing..." : "Join Waitlist", onClick: ()=>{}, className: "w-full", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }))), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-400 text-sm font-inter", __source: { fileName: "", lineNumber: 120, columnNumber: 27 }, __self: this }, error)) : /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-[#F2F2F2] to-[#FCFCFC] border border-[#D1D1D3] shadow-lg text-[#101012] p-8 rounded-lg space-y-6 transition-all duration-300", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F2F2F2] p-3 rounded-full", __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-check-circle text-3xl text-[#101012]", __source: { fileName: "", lineNumber: 126, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-inter", __source: { fileName: "", lineNumber: 128, columnNumber: 19 }, __self: this }, "You're on the list!")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#101012] font-inter", __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, "Thanks for joining the MemeVu OS waitlist! We'll keep you updated on our progress and let you know when we're ready to launch.")), /*#__PURE__*/ React.createElement("div", { className: "pt-4 border-t border-[#D1D1D3]", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#101012] font-inter mb-4", __source: { fileName: "", lineNumber: 140, columnNumber: 19 }, __self: this }, "Invite your friends to join the waitlist:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-6", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleShareLink("twitter"), className: "flex items-center justify-center w-[45px] h-[45px] bg-[#000000] rounded-full hover:opacity-90 transition-opacity", "aria-label": "Share on Twitter", __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-x-twitter text-lg text-white", __source: { fileName: "", lineNumber: 148, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleShareLink("facebook"), className: "flex items-center justify-center w-[45px] h-[45px] bg-[#1877F2] rounded-full hover:opacity-90 transition-opacity", "aria-label": "Share on Facebook", __source: { fileName: "", lineNumber: 151, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-f text-lg text-white", __source: { fileName: "", lineNumber: 156, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleShareLink("youtube"), className: "flex items-center justify-center w-[45px] h-[45px] bg-[#FF0000] rounded-full hover:opacity-90 transition-opacity", "aria-label": "Visit our YouTube", __source: { fileName: "", lineNumber: 159, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube text-lg text-white", __source: { fileName: "", lineNumber: 164, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "flex items-center justify-center w-[45px] h-[45px] bg-[#101012] rounded-full hover:opacity-90 transition-opacity relative", "aria-label": "Copy link", __source: { fileName: "", lineNumber: 167, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-copy text-lg text-white", __source: { fileName: "", lineNumber: 172, columnNumber: 23 }, __self: this }), copySuccess && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-8 left-1/2 transform -translate-x-1/2 bg-[#101012] text-white text-xs py-1 px-2 rounded", __source: { fileName: "", lineNumber: 174, columnNumber: 25 }, __self: this }, copySuccess)))))), /*#__PURE__*/ React.createElement("div", { className: "absolute -z-10 top-1/4 left-1/2 w-96 h-96 -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#4F46E5] rounded-full mix-blend-multiply filter blur-[128px] opacity-10", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, ` @keyframes slowPulse { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.05; } } .animate-slow-pulse { animation: slowPulse 8s ease-in-out infinite; } `), /*#__PURE__*/ React.createElement("div", { className: "w-full h-full animate-slow-pulse", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#9333EA] rounded-full mix-blend-multiply filter blur-[128px] opacity-10", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full animate-slow-pulse", style: { animationDelay: "4s" }, __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 z-10 w-full py-6 px-6 md:px-20 bg-[#FCFCFC] border-t border-[#D1D1D3]", __source: { fileName: "", lineNumber: 207, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", __source: { fileName: "", lineNumber: 208, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 209, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#777777] hover:text-[#101012] transition-colors", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-x-twitter text-xl", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, "X")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#777777] hover:text-[#101012] transition-colors", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-instagram text-xl", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#777777] hover:text-[#101012] transition-colors", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-linkedin text-xl", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-[#777777] font-inter text-sm", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, "© 2025 MemeVu. All rights reserved.")))); }

The MemeOSis coming....

The MemeOS
is coming....