fix: improve footer links for small screens

Author: Prakash1185

src/containers/landing/Footer.tsx

@@ -24,15 +24,17 @@ export default function Footer() {
   ];
 
   return (
-    <footer className="flex h-12 items-center justify-center w-full border-t">
-      <div className="flex items-center w-full max-w-page-header md:px-8 px-4 gap-x-8 text-xs text-slate-500">
-        <div className="flex items-center gap-2">
+    <footer className="flex sm:h-12 min-h-12 py-4 sm:py-0 items-center justify-center w-full border-t">
+      <div className="flex flex-col sm:flex-row items-center w-full max-w-page-header sm:px-8 px-4 gap-y-3 sm:gap-x-8 text-xs text-slate-500">
+        <div className="flex items-center gap-2 shrink-0">
           <Logo className="w-[20px] h-[20px] text-slate-500" />
-          <span>{"© 2025 JSON For You"}</span>
+          <span className="whitespace-nowrap">{"© 2025 JSON For You"}</span>
+        </div>
+        <div className="flex items-center gap-4 sm:gap-8 sm:ml-0">
+          <Legal />
         </div>
-        <Legal />
         {isCN && <Upyun />}
-        <div className="ml-auto lg:flex hidden gap-8">
+        <div className="flex flex-wrap justify-center items-center gap-4 sm:gap-8 sm:ml-auto">
           {items.map((item, i) => (
             <FooterLink key={i} title={item.title} href={item.href} />
           ))}