feat(ui): separate career and connected accounts

job-tracker-ui/src/views/ConnectedAccountsPage.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Box, Button, Paper, Typography } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+import EmailProviderConnections from "../components/EmailProviderConnections";
+
+export default function ConnectedAccountsPage() {
+  const navigate = useNavigate();
+
+  return (
+    <Box sx={{ display: "grid", gap: 2 }}>
+      <Paper sx={{ p: 2.5, borderRadius: 4, boxShadow: "0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
+        <Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>Connected accounts</Typography>
+        <Typography sx={{ color: "text.secondary", maxWidth: 720 }}>
+          Connect the inboxes Jobbjakt may use to identify recruiter correspondence. Connecting an inbox never sends a message on your behalf.
+        </Typography>
+        <Button sx={{ mt: 1 }} onClick={() => navigate("/settings")}>Back to settings</Button>
+      </Paper>
+      <EmailProviderConnections />
+    </Box>
+  );
+}