From 23ce3103021800c90f77066422a37fe537bb064c Mon Sep 17 00:00:00 2001
From: eukom <emmanuelukom0@gmail.com>
Date: Tue, 28 Jul 2026 12:24:19 +0100
Subject: [PATCH] feat(mobile): implement touch-friendly simplified footer
 (#318)

- Add MobileFooter component with responsive layout
- Navigation links in 2x2 grid on mobile
- Social icons centered
- Copyright centered
- WCAG 2.1 AA compliant touch targets (44px min)
- Dark mode support

Closes #318
---
 app/mobile-footer/page.tsx         | 31 ++++++++++++
 components/mobile/MobileFooter.tsx | 76 ++++++++++++++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 app/mobile-footer/page.tsx
 create mode 100644 components/mobile/MobileFooter.tsx

diff --git a/app/mobile-footer/page.tsx b/app/mobile-footer/page.tsx
new file mode 100644
index 0000000..5a05562
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/mobile/MobileFooter.tsx b/components/mobile/MobileFooter.tsx
new file mode 100644
index 0000000..303e290
--- /dev/null
+++ b/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
+