fix: migrate inline styles to CSS modules per review feedback

web/src/pages/HomePage.tsx

@@ -1,83 +1,36 @@
 import { Link } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import styles from "./HomePage.module.css";
 
 export default function HomePage() {
   const { state, logout } = useAuth();
 
   return (
-    <div
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#f5f5f5",
-        fontFamily:
-          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      }}
-    >
-      <div
-        style={{
-          backgroundColor: "#fff",
-          padding: "2.5rem",
-          borderRadius: "8px",
-          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
-          textAlign: "center",
-        }}
-      >
-        <h1 style={{ margin: "0 0 0.5rem" }}>Job Tracker</h1>
-        <p style={{ color: "#666", marginBottom: "1.5rem" }}>
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1 className={styles.heading}>Job Tracker</h1>
+        <p className={styles.welcomeText}>
           Welcome to the Job Tracker application.
         </p>
 
         {state.isAuthenticated && state.user ? (
           <div>
-            <p style={{ marginBottom: "0.5rem" }}>
-              Signed in as <strong>{state.user.email}</strong>
+            <p className={styles.signedInText}>
+              Signed in as{" "}
+              <strong className={styles.emailStrong}>
+                {state.user.email}
+              </strong>
             </p>
-            <button
-              onClick={logout}
-              style={{
-                padding: "0.5rem 1.25rem",
-                backgroundColor: "#b91c1c",
-                color: "#fff",
-                border: "none",
-                borderRadius: "6px",
-                fontSize: "0.9rem",
-                cursor: "pointer",
-              }}
-            >
+            <button onClick={logout} className={styles.logoutButton}>
               Sign Out
             </button>
           </div>
         ) : (
-          <div style={{ display: "flex", gap: "0.75rem", justifyContent: "center" }}>
-            <Link
-              to="/login"
-              style={{
-                padding: "0.5rem 1.25rem",
-                backgroundColor: "#1a73e8",
-                color: "#fff",
-                textDecoration: "none",
-                borderRadius: "6px",
-                fontSize: "0.9rem",
-              }}
-            >
+          <div className={styles.authLinks}>
+            <Link to="/login" className={styles.signInLink}>
               Sign In
             </Link>
-            <Link
-              to="/register"
-              style={{
-                padding: "0.5rem 1.25rem",
-                backgroundColor: "#fff",
-                color: "#1a73e8",
-                textDecoration: "none",
-                border: "1px solid #1a73e8",
-                borderRadius: "6px",
-                fontSize: "0.9rem",
-              }}
-            >
+            <Link to="/register" className={styles.registerLink}>
               Register
             </Link>
           </div>