feat: add social media icons to footer menu and update layout

app/pages/news/footer-links.tsx

@@ -1,3 +1,55 @@
+import { Link } from 'react-router'
+
+import { DUMMY } from '~/data/dummy'
+import { COPYRIGHT_MENU, FOOTER_MENU } from '~/data/menu'
+
 export const FooterLinks = () => {
-  return <div className="col-span-3">FooterLinks</div>
+  return (
+    <div className="col-span-3 flex flex-col justify-between">
+      <div className="grid grid-cols-3 gap-4">
+        {FOOTER_MENU.map(({ group, items }, index) => (
+          <div
+            key={index}
+            className="flex flex-col gap-3"
+          >
+            <h3 className="text-2xl font-semibold">{group}</h3>
+            <div>
+              {items.map(({ url, icon: Icon, title }, subIndex) => (
+                <Link
+                  key={subIndex}
+                  to={url}
+                  className="flex items-center gap-3 py-2"
+                >
+                  {Icon && (
+                    <Icon
+                      fill="white"
+                      width={24}
+                      height={24}
+                    />
+                  )}
+                  {title}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-between border-t border-white pt-8 text-sm">
+        <div>
+          {new Date().getFullYear()} {DUMMY.title}. All rights reserved.
+        </div>
+        <div className="flex gap-6">
+          {COPYRIGHT_MENU.map(({ url, title }, index) => (
+            <Link
+              key={index}
+              to={url}
+              className="text-white underline"
+            >
+              {title}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }

app/pages/news/footer-newsletter.tsx

@@ -9,7 +9,7 @@ export const FooterNewsletter = () => {
       <div className="h-[75px] bg-white p-3">
         <Link
           to="/news"
-          className="h-full py-[5px]"
+          className="h-full"
         >
           <img
             src={DUMMY.logo}

app/pages/news/index.tsx

@@ -22,7 +22,7 @@ export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
           {children}
         </div>
       </div>
-      <footer className="absolute bottom-0 grid w-full grid-cols-5 gap-32 bg-[#2E2F7C] px-16 py-20 text-white">
+      <footer className="grid w-full grid-cols-5 gap-16 bg-[#2E2F7C] px-16 py-20 text-white">
         <FooterNewsletter />
         <FooterLinks />
       </footer>