feat(frontend): use library icons in footer

Author: tranhoangpich

apps/frontend/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "16.1.6",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "react-icons": "^5.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

apps/frontend/src/app/globals.css

@@ -604,24 +604,17 @@ body {
 }
 
 .footer-icon {
-  width: 26px;
-  height: 26px;
-  border-radius: 999px;
-  display: grid;
-  place-items: center;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.4px;
-  color: white;
-  background: #111827;
+  width: 18px;
+  height: 18px;
+  color: #111827;
 }
 
 .footer-link:nth-of-type(2) .footer-icon {
-  background: #0078d4;
+  color: #0078d4;
 }
 
 .footer-link:nth-of-type(3) .footer-icon {
-  background: #f04d2f;
+  color: #f04d2f;
 }
 
 .step {

apps/frontend/src/app/page.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useMemo, useRef, useState } from "react";
+import { FaGithub } from "react-icons/fa";
+import { SiRust, SiVisualstudiocode } from "react-icons/si";
 
 export default function Home() {
   const fileRef = useRef<HTMLInputElement>(null);
@@ -478,9 +480,7 @@ export default function Home() {
               rel="noreferrer"
               className="footer-link"
             >
-              <span className="footer-icon" aria-hidden="true">
-                GH
-              </span>
+              <FaGithub className="footer-icon" aria-hidden="true" />
               GitHub Repo
             </a>
             <a
@@ -489,9 +489,7 @@ export default function Home() {
               rel="noreferrer"
               className="footer-link"
             >
-              <span className="footer-icon" aria-hidden="true">
-                VS
-              </span>
+              <SiVisualstudiocode className="footer-icon" aria-hidden="true" />
               VS Code Extension
             </a>
             <a
@@ -500,9 +498,7 @@ export default function Home() {
               rel="noreferrer"
               className="footer-link"
             >
-              <span className="footer-icon" aria-hidden="true">
-                CR
-              </span>
+              <SiRust className="footer-icon" aria-hidden="true" />
               crates.io
             </a>
           </nav>