feat: implement news layout components and context for improved structure and functionality

app/layouts/news/footer-links.tsx

@@ -0,0 +1,58 @@
+import { Link } from 'react-router'
+
+import { APP } from '~/data/meta'
+
+import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'
+
+export const FooterLinks = () => {
+  return (
+    <div className="col-span-1 flex flex-col justify-between sm:col-span-3">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        {FOOTER_MENU.map(({ group, items }, index) => (
+          <div
+            key={index}
+            className="flex w-full flex-col gap-3"
+          >
+            <h3 className="text-xl font-semibold sm:text-2xl">{group}</h3>
+            <div
+              className={`${group === 'Follow Us' ? 'flex-col-2 flex w-full flex-wrap' : ''}`}
+            >
+              {items.map(({ url, icon: Icon, title }, subIndex) => (
+                <Link
+                  key={subIndex}
+                  to={url}
+                  className="flex w-1/2 items-center gap-3 py-1 sm:w-full"
+                >
+                  {Icon && (
+                    <Icon
+                      color="white"
+                      width={24}
+                      height={24}
+                    />
+                  )}
+                  {title}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="mt-8 justify-between border-t border-white pt-8 text-center text-xs sm:flex sm:text-sm">
+        <div className="flex gap-6">
+          {COPYRIGHT_MENU.map(({ url, title }, index) => (
+            <Link
+              key={index}
+              to={url}
+              className={`w-full text-white underline`}
+            >
+              {title}
+            </Link>
+          ))}
+        </div>
+        <div className="mt-2 sm:order-first">
+          {new Date().getFullYear()} {APP.title}. All rights reserved.
+        </div>
+      </div>
+    </div>
+  )
+}