feat: add brand mark component and dashboard page

- Introduced a new `BrandMark` component for branding purposes.
- Created a `DashboardPage` component with a responsive layout, including sections for user profile, apartment management, and API demo.
- Added styles for the dashboard page to enhance user experience.
- Implemented a settings page with theme preferences and session management features.
- Developed a sign-in page with branding and user-friendly design.
- Established a workspace navigation component for easy access to different sections of the application.
- Implemented an `ApartmentService` for managing apartment data with corresponding unit tests.
- Created a `ConfigService` for loading application configuration.
- Added a `ThemeService` to manage user theme preferences dynamically.

frontend/src/app/components/settings-page/settings-page.css

@@ -0,0 +1,150 @@
+:host {
+  display: block;
+}
+.page-section {
+  animation: page-in 180ms ease-out;
+}
+@keyframes page-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.page-heading {
+  margin-bottom: 30px;
+}
+.page-heading h1 {
+  margin-bottom: 8px;
+  font-size: clamp(2rem, 7vw, 3.2rem);
+  font-weight: 750;
+  letter-spacing: -0.055em;
+  line-height: 1.02;
+}
+.page-heading > div > p:last-child {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.settings-card {
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  background: var(--surface);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+.settings-card h2 {
+  margin-bottom: 9px;
+  font-size: 1.35rem;
+  letter-spacing: -0.035em;
+}
+.settings-card p:not(.eyebrow) {
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+.settings-copy {
+  display: flex;
+  gap: 15px;
+  padding: 22px;
+  border-bottom: 1px solid var(--border);
+}
+.settings-icon {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  flex: 0 0 46px;
+  place-items: center;
+  border-radius: 16px;
+  background: var(--surface-accent);
+  color: var(--accent);
+}
+.settings-icon svg {
+  width: 24px;
+  height: 24px;
+}
+.settings-copy h2 {
+  margin-bottom: 5px;
+}
+.settings-copy p:last-child {
+  margin-bottom: 0;
+  font-size: 0.88rem;
+}
+.theme-options {
+  display: grid;
+  padding: 8px;
+}
+.theme-options mat-radio-button {
+  border-radius: 14px;
+}
+.theme-options mat-radio-button:hover {
+  background: var(--surface-soft);
+}
+.theme-option-copy {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 8px;
+}
+.theme-option-copy strong {
+  color: var(--text);
+}
+.theme-option-copy small {
+  margin-top: 3px;
+  color: var(--text-muted);
+  white-space: normal;
+}
+.session-settings {
+  margin-top: 16px;
+}
+.session-action {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 18px;
+  padding: 22px;
+}
+.session-action > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+.session-action strong,
+.session-action span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-action span {
+  margin-top: 3px;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+}
+.session-action .mat-mdc-outlined-button {
+  --mdc-outlined-button-label-text-color: var(--danger);
+  --mdc-outlined-button-outline-color: var(--border-strong);
+  border-radius: 12px;
+}
+@media (min-width: 700px) {
+  .page-heading {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 28px;
+  }
+}
+@media (min-width: 960px) {
+  .settings-card {
+    display: grid;
+    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
+  }
+  .settings-copy {
+    border-right: 1px solid var(--border);
+    border-bottom: 0;
+  }
+  .session-action {
+    align-items: flex-start;
+    justify-content: center;
+  }
+}