feat(mobile): implement touch-friendly simplified footer (#318)

app/mobile-footer/page.tsx

@@ -0,0 +1,31 @@
+import MobileFooter from '@/components/mobile/MobileFooter'
+
+export default function MobileFooterPage() {
+  return (
+    <main className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="flex min-h-screen flex-col">
+        <div className="flex-1 p-4">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            Mobile Footer Preview
+          </h1>
+          <p className="mt-2 text-gray-500 dark:text-gray-400">
+            Scroll down to see the simplified footer
+          </p>
+          <div className="mt-8 space-y-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div
+                key={i}
+                className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
+              >
+                <p className="text-gray-700 dark:text-gray-300">
+                  Content block {i + 1}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+        <MobileFooter />
+      </div>
+    </main>
+  )
+}

components/mobile/MobileFooter.tsx

@@ -0,0 +1,76 @@
+`use client
+
+import React from react
+import Link from next/link
+
+// Navigation links data
+const footerLinks = [
+  { label: Home, href: / },
+  { label: About, href: /about },
+  { label: Services, href: /services },
+  { label: Support, href: /support },
+  { label: Privacy Policy, href: /privacy },
+  { label: Terms of Service, href: /terms },
+  { label: Contact, href: /contact },
+  { label: FAQs, href: /faq },
+]
+
+// Social icons data
+const socialLinks = [
+  { label: Twitter, href: https://twitter.com/swiftchain, icon: 🐦 },
+  { label: GitHub, href: https://github.com/swiftchain, icon: 🐙 },
+  { label: LinkedIn, href: https://linkedin.com/company/swiftchain, icon: 🔗 },
+  { label: Discord, href: https://discord.gg/swiftchain, icon: 💬 },
+]
+
+export function MobileFooter() {
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer className="border-t border-gray-200 bg-white px-4 py-8 dark:border-gray-800 dark:bg-gray-950">
+      <div className="mx-auto max-w-md">
+        {/* Navigation links - 2x2 grid on mobile */}
+        <nav className="mb-6 grid grid-cols-2 gap-2" aria-label="Footer navigation">
+          {footerLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="rounded-lg px-3 py-2.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:active:bg-gray-700"
+              style={{ minHeight: 44px }}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* Social icons - centered */}
+        <div className="mb-4 flex justify-center gap-4">
+          {socialLinks.map((social) => (
+            <a
+              key={social.label}
+              href={social.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex h-11 w-11 items-center justify-center rounded-full text-xl transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+              aria-label={social.label}
+              style={{ minHeight: 44px, minWidth: 44px }}
+            >
+              <span className="sr-only">{social.label}</span>
+              <span role="img" aria-hidden="true">
+                {social.icon}
+              </span>
+            </a>
+          ))}
+        </div>
+
+        {/* Copyright - centered */}
+        <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+          &copy; {currentYear} SwiftChain. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  )
+}
+
+export default MobileFooter
+