function ChatInterface({ messages = [], onSendMessage }) { const [inputText, setInputText] = useState(""); const messagesEndRef = useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); const handleSubmit = (e)=>{ e.preventDefault(); if (inputText.trim()) { onSendMessage(inputText); setInputText(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[600px] w-full max-w-[800px] bg-[#f0f2f5] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.isSent ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-2xl px-4 py-2 break-words ${message.isSent ? "bg-[#2AA1F4] text-white rounded-br-none" : "bg-white text-[#333] rounded-bl-none"}`, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 bg-white border-t border-gray-200", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputText, onChange: (e)=>setInputText(e.target.value), className: "flex-1 px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:border-[#2AA1F4] font-roboto", placeholder: "Write a message...", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#2AA1F4] text-white rounded-full p-2 w-[40px] h-[40px] flex items-center justify-center hover:bg-[#2591dc]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }))))); } function ChatInterfaceStory() { const [messages, setMessages] = useState([ { text: "Hi there!", isSent: false }, { text: "Hello! How are you?", isSent: true }, { text: "I'm doing great, thanks for asking!", isSent: false }, { text: "That's wonderful to hear!", isSent: true } ]); const handleSendMessage = (text)=>{ setMessages([ ...messages, { text, isSent: true } ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInterface, { messages: messages, onSendMessage: handleSendMessage, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); } function AuthBox({ variant = "login" }) { const [isLogin, setIsLogin] = useState(variant === "login"); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-gradient-to-r from-[#2C3E50] to-[#3498DB] p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-2xl w-full max-w-md p-8 transform hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-8", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsLogin(true), className: `flex-1 py-2 text-lg font-roboto ${isLogin ? "text-[#3498DB] border-b-2 border-[#3498DB]" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsLogin(false), className: `flex-1 py-2 text-lg font-roboto ${!isLogin ? "text-[#3498DB] border-b-2 border-[#3498DB]" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Sign Up")), isLogin ? /*#__PURE__*/ React.createElement("form", { className: "space-y-6", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[#3498DB] focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[#3498DB] focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#3498DB] text-white py-3 rounded-lg hover:bg-[#2980B9] transition-colors duration-300 font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Login")) : /*#__PURE__*/ React.createElement("form", { className: "space-y-6", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Full Name", className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[#3498DB] focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[#3498DB] focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[#3498DB] focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#3498DB] text-white py-3 rounded-lg hover:bg-[#2980B9] transition-colors duration-300 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Sign Up")))); } function AuthBoxStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AuthBox, { variant: "login", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(AuthBox, { variant: "signup", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this })); } function MedicalFeatures({ tools = [ { name: "BMI Calculator", icon: "fa-calculator", description: "Calculate your Body Mass Index" }, { name: "Heart Rate Monitor", icon: "fa-heartbeat", description: "Track your pulse rate" }, { name: "Medicine Reminder", icon: "fa-clock", description: "Set medication schedules" } ], medInfo = [ { title: "Blood Pressure Guide", icon: "fa-hand-holding-medical", content: "Normal BP: 120/80 mmHg" }, { title: "First Aid Tips", icon: "fa-kit-medical", content: "Basic emergency response steps" }, { title: "Health Resources", icon: "fa-hospital", content: "Find nearby medical facilities" } ] }) { const [selectedTool, setSelectedTool] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8fafc] p-6", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-[#1e293b] mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Medical Tools & Information"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg p-6 shadow-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#334155] mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Medical Tools"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, tools.map((tool)=>/*#__PURE__*/ React.createElement("div", { key: tool.name, onClick: ()=>setSelectedTool(tool), className: "flex items-center p-4 bg-[#f1f5f9] rounded-lg cursor-pointer hover:bg-[#e2e8f0] transition-colors", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${tool.icon} text-[#0ea5e9] text-xl w-10`, __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#334155]", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, tool.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#64748b]", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, tool.description)))))), /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg p-6 shadow-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#334155] mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Medical Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, medInfo.map((info)=>/*#__PURE__*/ React.createElement("div", { key: info.title, className: "p-4 bg-[#f1f5f9] rounded-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${info.icon} text-[#0ea5e9] text-xl w-10`, __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#334155]", __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, info.title)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#64748b] pl-10", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, info.content)))))))); } function MedicalFeaturesStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MedicalFeatures, { __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this })); } function OtpVerification({ isOpen, onClose, onVerify }) { const [otp, setOtp] = useState([ "", "", "", "", "", "" ]); const handleChange = (index, value)=>{ if (value.length > 1) return; const newOtp = [ ...otp ]; newOtp[index] = value; setOtp(newOtp); if (value && index < 5) { document.getElementById(`otp-${index + 1}`).focus(); } }; const handlePaste = (e)=>{ e.preventDefault(); const paste = e.clipboardData.getData("text"); const pasteArray = paste.slice(0, 6).split(""); setOtp([ ...pasteArray, ...Array(6 - pasteArray.length).fill("") ]); }; if (!isOpen) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 w-[90%] max-w-md", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Enter Verification Code"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Please enter the 6-digit code sent to your device")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 justify-center mb-6", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, otp.map((digit, index)=>/*#__PURE__*/ React.createElement("input", { key: index, id: `otp-${index}`, type: "text", maxLength: "1", className: "w-12 h-12 border-2 rounded-lg text-center text-xl font-semibold", value: digit, onChange: (e)=>handleChange(index, e.target.value), onPaste: handlePaste, name: `otp-${index}`, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onVerify(otp.join("")), className: "flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Verify")))); } function OtpVerificationStory() { const [isOpen, setIsOpen] = useState(false); const handleVerify = (code)=>{ alert(`Verification code: ${code}`); setIsOpen(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "px-4 py-2 bg-blue-600 text-white rounded-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, "Open OTP Popup"), /*#__PURE__*/ React.createElement(OtpVerification, { isOpen: isOpen, onClose: ()=>setIsOpen(false), onVerify: handleVerify, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this })); } function MainComponent() { const [currentStep, setCurrentStep] = useState(1); const [email, setEmail] = useState(""); const [loading, setLoading] = useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); try { const response = await fetch("/api/verify-otp", { method: "POST", body: JSON.stringify({ email, action: "generate" }) }); const data = await response.json(); if (data.success) { setCurrentStep(2); } } catch (error) { console.error(error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen relative overflow-hidden flex items-center justify-center bg-transparent", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "shape-1", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-2", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-3", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 w-full max-w-md p-8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-500 ${currentStep === 1 ? "opacity-100" : "opacity-0 hidden"}`, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-gray-200", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-gray-800 text-center mb-2 animate-title", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Welcome"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-center mb-8 animate-subtitle", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Enter your email to get started"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6 animate-form", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full bg-white border border-gray-200 rounded-lg px-4 py-3 text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 transition-all", placeholder: "your@email.com", required: true, __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-white text-indigo-600 rounded-lg py-3 px-4 font-medium hover:bg-gray-50 transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-70 border border-gray-200", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }) : "Send OTP")))), /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-500 ${currentStep === 2 ? "opacity-100" : "opacity-0 hidden"}`, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(OtpVerification, { isOpen: true, onClose: ()=>setCurrentStep(1), onVerify: ()=>setCurrentStep(3), __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-500 ${currentStep === 3 ? "opacity-100" : "opacity-0 hidden"}`, __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInterface, { __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-6 border-t pt-6", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(MedicalFeatures, { __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, ` .bg-gradient { background: transparent; background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .shape-1, .shape-2, .shape-3 { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; } .shape-1 { background: white; width: 600px; height: 600px; top: -200px; right: -100px; animation: float 10s ease-in-out infinite; } .shape-2 { background: white; width: 400px; height: 400px; bottom: -100px; left: -100px; animation: float 8s ease-in-out infinite; } .shape-3 { background: white; width: 300px; height: 300px; bottom: 50%; right: 30%; animation: float 12s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } } .animate-title { animation: slideDown 0.6s ease-out; } .animate-subtitle { animation: slideDown 0.6s ease-out 0.1s both; } .animate-form { animation: slideUp 0.6s ease-out 0.2s both; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } `)); }