frontend update

package.json

@@ -10,11 +10,13 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.1.0",
+    "@angular/animations": "^16.2.12",
+    "@angular/cdk": "^16.2.14",
     "@angular/common": "^16.1.0",
     "@angular/compiler": "^16.1.0",
     "@angular/core": "^16.1.0",
     "@angular/forms": "^16.1.0",
+    "@angular/material": "^16.2.14",
     "@angular/platform-browser": "^16.1.0",
     "@angular/platform-browser-dynamic": "^16.1.0",
     "@angular/router": "^16.1.0",

src/app/api.service.ts

@@ -5,6 +5,7 @@ import { environment } from '../environments/environment';
 @Injectable({ providedIn: 'root' })
 export class ApiService {
 
+
   // Decide backend base URL at runtime
   private readonly base = location.hostname.endsWith('hf.space')
     ? 'https://pykara-py-match-backend.hf.space'
@@ -14,10 +15,10 @@ export class ApiService {
   constructor(private http: HttpClient) { }
 
   start(body = { n_questions: 10, batch_size: 5, domain: 'marriage' }) {
-    return this.http.post<any>(`${this.base}/llm/start`, body);
+    return this.http.post<any>(`${this.base}/q/start`, body);
   }
 
   next(session_id: string, selected_color: 'blue' | 'green' | 'red' | 'yellow') {
-    return this.http.post<any>(`${this.base}/llm/next`, { session_id, selected_color });
+    return this.http.post<any>(`${this.base}/q/next`, { session_id, selected_color });
   }
 }

src/app/app-routing.module.ts

@@ -2,9 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { IntroPageComponent } from './intro-page/intro-page.component';
 import { QuestionAnswerComponent } from './question-answer/question-answer.component';
-import { QuizComponent } from './quiz/quiz.component';
+import { LlmQuizComponent } from './llm-quiz/llm-quiz.component';
+import { MatchingListComponent } from './matching-list/matching-list.component';
 
 const routes: Routes = [
+  { path: '', component: IntroPageComponent, pathMatch: 'full' },
+
+  // Auth lazy standalone components
   {
     path: 'auth',
     children: [
@@ -21,12 +25,24 @@ const routes: Routes = [
     ],
   },
 
-  { path: '', component: IntroPageComponent, pathMatch: 'full' },
-
   { path: 'sign-in', redirectTo: 'auth/signin', pathMatch: 'full' },
   { path: 'sign-up', redirectTo: 'auth/signup', pathMatch: 'full' },
+
   { path: 'question-answer', component: QuestionAnswerComponent },
-  { path: 'quiz', component: QuizComponent },
+  { path: 'llmquiz', component: LlmQuizComponent },
+
+  // Preferences (standalone component lazy-loaded)
+  {
+    path: 'user-preferences',
+    loadComponent: () =>
+      import('./user-preferences/user-preferences.component').then(m => m.UserPreferencesComponent),
+  },
+
+  // Matching list routes (must be BEFORE wildcard). Provide optional id.
+  { path: 'matchinglist', component: MatchingListComponent },
+  { path: 'matchinglist/:id', component: MatchingListComponent },
+
+  // Wildcard LAST
   { path: '**', redirectTo: '' },
 ];
 
@@ -34,4 +50,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.css

@@ -0,0 +1,331 @@
+.header-bar {
+  background: #000 !important;
+  box-shadow: 0 2px 0 rgba(255,255,255,.04);
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start;
+  min-height: 82px;
+  padding: 14px clamp(1.4rem,4vw,3rem) !important;
+  gap: clamp(1.5rem,3vw,4rem);
+  position: fixed;
+  top: 0;
+  z-index: 2002;
+  width:100%;
+}
+
+  .header-bar .brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 1.5vw;
+    cursor: pointer;
+  }
+
+  .header-bar .brand__logo-img {
+    background: #fff;
+    width: 74px;
+    min-width: 74px;
+    max-width: 74px;
+    padding: 6px;
+    border-radius: 50%;
+    box-shadow: 0 4px 10px rgba(0,0,0,.25);
+  }
+
+  .header-bar .brand__name {
+    font-family: Roliana;
+    font-size: 2.5vw;
+    font-weight: 300;
+    letter-spacing: 3.2px;
+    color: #fff;
+    text-shadow: 0 2px 4px rgba(0,0,0,.35);
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+    .header-bar .brand__name strong {
+      color: #f3a54c;
+      font-weight: 300;
+    }
+
+.header__nav {
+  flex: 1 1 auto !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(2.2rem,3.4vw,4rem) !important;
+  margin: 0 !important;
+  white-space: nowrap;
+}
+
+.nav-link--icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9vw;
+  letter-spacing: 1px;
+  font-weight: 700;
+  color: #fff;
+  opacity: .92;
+  text-decoration: none;
+  padding: 6px 10px;
+  position: relative;
+  transition: .25s ease;
+  height: 46px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+  .nav-link--icon i {
+    font-size: .85rem;
+    opacity: .95;
+  }
+
+  .nav-link--icon:hover {
+    color: #f3a54c;
+    opacity: 1;
+  }
+
+  .nav-link--icon::after {
+    content: "";
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 2px;
+    height: 2px;
+    background: linear-gradient(90deg,#f3a54c,#ffcb7a);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform .35s ease;
+    border-radius: 2px;
+  }
+
+  .nav-link--icon:hover::after {
+    transform: scaleX(1);
+  }
+
+.header__actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin: 0 !important;
+}
+
+.btn-signup, .btn-signin {
+  border-radius: 10px;
+  font-size: .8rem;
+  padding: .65rem 1.25rem;
+  font-weight: 600;
+  letter-spacing: .5px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.btn-signup {
+  background: #f3a54c;
+  color: #0b0f1a;
+  border: none;
+  box-shadow: 0 4px 10px -2px rgba(243,165,76,.4);
+}
+
+  .btn-signup:hover {
+    filter: brightness(1.08);
+  }
+
+.btn-signin {
+  background: #0b0f1a;
+  color: #fff;
+  border: 2px solid #f3a54c;
+}
+
+  .btn-signin:hover {
+    background: #121b27;
+  }
+
+/* Marriage Sub Navigation */
+.nav-item-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.sub-nav {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: #0b0f1a;
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: 8px;
+  padding: 8px 0;
+  min-width: 200px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.4);
+  backdrop-filter: blur(14px);
+  z-index: 1000;
+  animation: subnavFadeIn 0.2s ease-out;
+}
+
+.sub-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  color: #e5e7eb;
+  text-decoration: none;
+  font-size: 0.75vw;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  transition: all 0.25s ease;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+}
+
+  .sub-nav-link:hover {
+    background: rgba(243, 165, 76, 0.1);
+    color: #f3a54c;
+  }
+
+  .sub-nav-link i {
+    font-size: 0.85rem;
+    width: 16px;
+    text-align: center;
+  }
+
+@keyframes subnavFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Ensure the main nav items have proper z-index */
+.header__nav {
+  position: relative;
+  z-index: 1001;
+}
+
+@media (max-width:1100px) {
+  .header__nav {
+    gap: 1.6rem;
+  }
+}
+
+@media (max-width:880px) {
+  .header-bar {
+    flex-wrap: wrap;
+    min-height: unset;
+  }
+
+  .header__nav {
+    order: 3;
+    flex: 1 1 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: .85rem 1.4rem;
+    padding-top: .35rem;
+  }
+
+  .header__actions {
+    order: 2;
+  }
+}
+
+@media (max-width:900px) {
+  .header-bar .brand__name {
+    font-size: 8vw;
+  }
+}
+
+@media (max-width:640px) {
+  .nav-link--icon {
+    font-size: .64rem;
+  }
+}
+
+/* Auth Modal (global) */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(10,14,25,0.72);
+  backdrop-filter: blur(6px);
+  display: flex;
+  align-items: center; /* center vertically */
+  justify-content: center; /* center horizontally */
+  z-index: 4000; /* above header */
+  padding: 2rem 1.2rem;
+}
+
+.modal-panel {
+/*  width: 100%;
+  max-width: 540px;
+  background: #111a24;
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 22px;*/
+/*  box-shadow: 0 20px 48px -12px rgba(0,0,0,.65), 0 4px 18px -4px rgba(0,0,0,.45);*/
+  position: relative;
+  padding: 2.25rem 2.4rem 2.4rem;
+  color: #fff;
+  animation: modalPop .35s cubic-bezier(.4,.8,.2,1);
+}
+
+/*.modal-panel--white {*/ /* allow reuse if needed */
+  /*background: linear-gradient(145deg,#ffffff,#f7f9fb);
+  color: #0b0f1a;
+}*/
+
+.modal-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  background: none;
+  border: none;
+  font-size: 1.6rem;
+  line-height: 1;
+  cursor: pointer;
+  color: inherit;
+  opacity: .6;
+  transition: .25s ease;
+}
+.modal-close:hover { opacity: 1; }
+
+@keyframes modalPop {
+  0% { opacity: 0; transform: translateY(28px) scale(.94); }
+  60% { opacity: 1; transform: translateY(-4px) scale(1.01); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* Make forms inside auth modal look nice if not already styled */
+.modal-panel form .field label { font-weight: 600; letter-spacing:.4px; }
+.modal-panel form input { width:100%; border:1px solid #d6dde3; border-radius:8px; padding:.7rem .85rem; font-size:.95rem; }
+.modal-panel form input:focus { outline:2px solid #f3a54c; border-color:#f3a54c; }
+.modal-panel h2.title { margin-top:0; font-size:1.65rem; font-weight:700; letter-spacing:.5px; }
+
+/* Override dark text if using white variant */
+.modal-panel--white form input { background:#fff; }
+
+@media (max-width:640px) {
+  .modal-panel { padding:1.75rem 1.4rem 2rem; border-radius:18px; }
+  .modal-panel h2.title { font-size:1.4rem; }
+}
+
+/* Liked button on matching page */
+.btn-liked {
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  background: rgba(243,165,76,.12);
+  color: #f3a54c;
+  border: 1px solid rgba(243,165,76,.4);
+  padding: .55rem .9rem;
+  border-radius: 10px;
+  font-weight: 700;
+  text-decoration: none;
+}
+.btn-liked:hover { background: rgba(243,165,76,.18); }

src/app/app.component.html

@@ -1 +1,71 @@
+<!-- Top Navigation -->
+<header class="topbar header-bar" role="banner" aria-label="Top navigation">
+  <a class="brand brand__link" (click)="goHome()" style="cursor: pointer;">
+    <img src="assets/pykara-logo.png" alt="Pykara Technologies logo" class="brand__logo-img" />
+    <span class="brand__name"><strong>Py</strong>-Match</span>
+  </a>
+
+  <!-- Center Navigation -->
+  <nav class="primary-nav header__nav" aria-label="Primary">
+    <div class="nav-item-wrapper">
+      <a (click)="toggleMarriageSubnav()" class="nav-link nav-link--icon">
+        <i class="fa-solid fa-ring"></i>
+        <span>MARRIAGE</span>
+      </a>
+
+      <!-- Marriage Sub Navigation -->
+      <div class="sub-nav" *ngIf="showMarriageSubnav" (mouseleave)="hideMarriageSubnav()">
+        <a (click)="selectRole('marriage'); navigateToProfile()" class="sub-nav-link">
+          <i class="fa-solid fa-user"></i>
+          <span>Profile</span>
+        </a>
+        <a (click)="navigateToExpectations()" class="sub-nav-link">
+          <i class="fa-solid fa-bullseye"></i>
+          <span>Your Expectations</span>
+        </a>
+        <a (click)="navigateToAssessment()" class="sub-nav-link">
+          <i class="fa-solid fa-clipboard-list"></i>
+          <span>Take Assessment</span>
+        </a>
+        <a (click)="navigateToMatchingProfile()" class="sub-nav-link">
+          <i class="fa-solid fa-chart-pie"></i>
+          <span>Your Matching Profile</span>
+        </a>
+      </div>
+    </div>
+    <a (click)="onSelectRole('interview')" class="nav-link nav-link--icon"><i class="fa-solid fa-user-tie"></i><span>INTERVIEW</span></a>
+    <a (click)="onSelectRole('partnership')" class="nav-link nav-link--icon"><i class="fa-solid fa-handshake"></i><span>PARTNERSHIP</span></a>
+    <a *ngIf="isIntroPage" (click)="scrollToFeatures()" class="nav-link nav-link--icon" aria-label="Jump to features section"><i class="fa-solid fa-grid"></i><span>FEATURES</span></a>
+    <a *ngIf="isIntroPage" (click)="scrollToJourney()" class="nav-link nav-link--icon" aria-label="Jump to how it works section"><i class="fa-solid fa-timeline"></i><span>HOW IT WORKS</span></a>
+  </nav>
+
+  <!-- Right Actions -->
+  <nav class="actions header__actions" aria-label="User actions">
+    <ng-container *ngIf="!isSignedIn; else signedInBlock">
+      <button type="button" class="btn btn-signup" (click)="onOpenSignUp()">Sign up</button>
+      <button type="button" class="btn btn-signin" (click)="onOpenSignIn()">Sign in</button>
+    </ng-container>
+    <ng-template #signedInBlock>
+      <button type="button" class="profile-btn" aria-label="Profile">
+        <i class="fa-solid fa-user" aria-hidden="true"></i>
+      </button>
+      <button type="button" class="btn btn-signin" (click)="onSignOut()">Sign out</button>
+    </ng-template>
+  </nav>
+</header>
+
+<!-- Main Content -->
 <router-outlet></router-outlet>
+
+<!-- Global Auth Modal -->
+<div *ngIf="authModal" class="modal-backdrop" (click)="closeAuthModal($event)">
+  <div class="modal-panel modal-panel--white" role="dialog" aria-modal="true" [attr.aria-label]="authModal === 'signin' ? 'Sign in' : 'Sign up'" (click)="$event.stopPropagation()">
+    <button type="button" class="modal-close" (click)="closeAuthModal()" aria-label="Close">×</button>
+    <app-sign-in *ngIf="authModal === 'signin'"
+                 (switchToSignUp)="onOpenSignUp()"
+                 (signInSuccess)="onSignInSuccess()"></app-sign-in>
+    <app-sign-up *ngIf="authModal === 'signup'"
+                 (switchToSignIn)="onOpenSignIn()"
+                 (signUpSuccess)="onSignUpSuccess()"></app-sign-up>
+  </div>
+</div>

src/app/app.component.ts

@@ -1,79 +1,128 @@
-
-//import { Component } from '@angular/core';
-//import { FormsModule } from '@angular/forms';  // Import FormsModule
-//import { CommonModule } from '@angular/common'; // Import CommonModule
-
-//import { IntroPageComponent } from './intro-page/intro-page.component';
-//import { SignInComponent } from './auth/sign-in/sign-in.component';
-//import { SignUpComponent } from './auth/sign-up/sign-up.component';
-//import { QuestionAnswerComponent } from './question-answer/question-answer.component';
-//import { QuizComponent } from './quiz/quiz.component';
-//import { ApiService } from './api.service';
-//import { RouterOutlet } from '@angular/router';
-//type Color = 'blue' | 'green' | 'red' | 'yellow';
-
-//@Component({
-//  selector: 'app-root',
-//  standalone: true,
-//  imports: [RouterOutlet, QuestionAnswerComponent, IntroPageComponent, QuizComponent,
-//    SignInComponent,
-//    SignUpComponent,
-//    FormsModule,   // Add FormsModule here
-//    CommonModule] ,  // Add CommonModule here], 
-//  templateUrl: './app.component.html',
-//  styleUrls: ['./app.component.css']
-//})
-//export class AppComponent {
-//  title = 'py-match';
-//  sessionId: string | null = null;
-//  index = 0;
-//  total = 0;
-//  question = '';
-//  options: { text: string, color: Color }[] = [];
-//  progress?: Record<Color, number>; // percentages
-
-//  constructor(private api: ApiService) { }
-
-//  start() {
-//    this.api.start({ n_questions: 10, batch_size: 5, domain: 'marriage' })
-//      .subscribe(res => {
-//        this.sessionId = res.session_id;
-//        this.index = res.index;
-//        this.total = res.total;
-//        this.question = res.question;
-//        this.options = res.options;
-//        this.progress = undefined; // first question has no progress yet
-//      });
-//  }
-
-//  answer(color: Color) {
-//    if (!this.sessionId) { return; }
-//    this.api.next(this.sessionId, color).subscribe(res => {
-//      if (res.done) {
-//        alert('Finished! Check console for final mix.');
-//        console.log('Final mix (percent):', res.mix);
-//        return;
-//      }
-//      this.index = res.index;
-//      this.total = res.total;
-//      this.question = res.question;
-//      this.options = res.options;
-//      this.progress = res.progress; // already in percentages (from your backend change)
-//    });
-//  }
-//}
-
-
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { SignupService } from './auth/sign-up/sign-up.service';
+import { SignInComponent } from './auth/sign-in/sign-in.component';
+import { SignUpComponent } from './auth/sign-up/sign-up.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, CommonModule, SignInComponent, SignUpComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'py-match';
+  showMarriageSubnav = false;
+  isSignedIn = false;
+  authModal: 'signin' | 'signup' | null = null; // global auth modal state
+
+  constructor(private router: Router, private signupService: SignupService) {
+    // Check if user is signed in
+    this.isSignedIn = !!localStorage.getItem('auth_token');
+  }
+
+  // Show intro-only nav items (Features, How it works) only on intro page
+  get isIntroPage(): boolean {
+    const url = (this.router.url || '').split('?')[0];
+    return url === '/' || url.startsWith('/intro');
+  }
+
+  // Show liked button only on matching list page
+  get isMatchingPage(): boolean {
+    const url = (this.router.url || '').split('?')[0];
+    return url.startsWith('/matchinglist');
+  }
+
+  toggleMarriageSubnav(): void {
+    this.showMarriageSubnav = !this.showMarriageSubnav;
+  }
+
+  hideMarriageSubnav(): void {
+    this.showMarriageSubnav = false;
+  }
+
+  onSelectRole(role: string): void {
+    const userId = localStorage.getItem('user_id');
+    if (!userId) {
+      alert('Please sign in first.');
+      return;
+    }
+
+    // Navigate based on role
+    if (role === 'marriage') {
+      this.router.navigate(['/question-answer'], { queryParams: { role: 'marriage' } });
+    } else {
+      this.router.navigate(['/question-answer'], { queryParams: { role } });
+    }
+    this.hideMarriageSubnav();
+  }
+
+  // Open auth modals instead of routing
+  onOpenSignIn(): void { this.authModal = 'signin'; }
+  onOpenSignUp(): void { this.authModal = 'signup'; }
+  closeAuthModal(evt?: MouseEvent): void {
+    if (evt && (evt.target as HTMLElement).classList.contains('modal-backdrop')) {
+      this.authModal = null;
+    } else if (!evt) {
+      this.authModal = null;
+    }
+  }
+
+  // Sign out
+  onSignOut(): void {
+    this.isSignedIn = false;
+    localStorage.removeItem('auth_token');
+    localStorage.removeItem('user_id');
+    this.router.navigate(['/']);
+  }
+
+  navigateToProfile(): void {
+    const userId = localStorage.getItem('user_id');
+    if (!userId) { alert('Please sign in first.'); return; }
+    this.router.navigate(['/question-answer'], { queryParams: { role: 'marriage' } });
+    this.hideMarriageSubnav();
+  }
+  navigateToExpectations(): void { this.hideMarriageSubnav(); this.router.navigate(['/userPreference']); }
+  navigateToAssessment(): void { this.hideMarriageSubnav(); this.router.navigate(['/llmquiz']); }
+  navigateToMatchingProfile(): void { this.hideMarriageSubnav(); this.router.navigate(['/matchinglist']); }
+
+  navigateToLikedProfiles(): void {
+    this.router.navigate(['/matchinglist'], { queryParams: { view: 'liked' } });
+  }
+
+  scrollToFeatures(): void { document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' }); }
+  scrollToJourney(): void { document.getElementById('journey')?.scrollIntoView({ behavior: 'smooth' }); }
+  goHome(): void { this.router.navigate(['/']); }
+
+  selectRole(role: string): void {
+    const userId = localStorage.getItem('user_id');
+    if (!userId) { alert('Please sign in first.'); return; }
+    this.signupService.assignRole(+userId, role).subscribe({
+      next: (res: any) => {
+        console.log('Role saved:', res);
+        this.router.navigate(['/question-answer'], { queryParams: { role } });
+      },
+      error: (err: any) => {
+        console.error('Role assign failed:', err);
+        alert('Failed to assign role.');
+      }
+    });
+  }
+
+  // Auth modal child callbacks
+  onSignInSuccess(): void {
+    this.isSignedIn = true;
+    // Placeholder: set token if backend integrates
+    if (!localStorage.getItem('auth_token')) {
+      localStorage.setItem('auth_token', 'true');
+    }
+    this.authModal = null;
+  }
+
+  onSignUpSuccess(): void {
+    // After signup, show sign-in form
+    this.authModal = 'signin';
+  }
 }

src/app/auth/sign-in/sign-in.component.css

@@ -43,6 +43,7 @@
   margin-bottom: 14px;
   border: 2px solid #b1b1b17d;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-radius:50%;
 }
 
 .title {

src/app/auth/sign-up/sign-up.component.css

@@ -56,6 +56,7 @@
   margin-bottom: 14px;
   border: 2px solid #b1b1b17d;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-radius:50%;
 }
 
 .title {

src/app/auth/sign-up/sign-up.component.ts

@@ -67,7 +67,13 @@ export class SignUpComponent {
       const res = await this.signupService.signup(payload).toPromise();
       if (res && res.message) {
         alert('Success: ' + res.message);
-        this.signUpSuccess.emit(); // Emit success instead of navigating
+
+        // Save user_id from backend for role assignment
+        if (res.user_id) {
+          localStorage.setItem('user_id', res.user_id.toString());
+        }
+
+        this.signUpSuccess.emit(); // Emit success
       } else if (res && res.error) {
         alert('Signup failed: ' + res.error);
       } else {
@@ -87,14 +93,19 @@ export class SignUpComponent {
     return error ? !!(c.touched && c.errors?.[error]) : !!(c.touched && c.invalid);
   }
 
-  navigateHome() { this.router.navigateByUrl('/'); }
+  navigateHome() {
+    this.router.navigateByUrl('/');
+  }
 
   goToLogin() {
     this.switchToSignIn.emit();
   }
 
   tr(key: string): string {
-    const map: Record<string, string> = { title: 'Create your account', subtitle: 'Join to continue' };
+    const map: Record<string, string> = {
+      title: 'Create your account',
+      subtitle: 'Join to continue'
+    };
     return map[key] || '';
   }
 }

src/app/auth/sign-up/sign-up.service.ts

@@ -13,6 +13,7 @@ export interface SignupPayload {
 export interface SignupResponse {
   message?: string;  // success message from backend
   error?: string;    // error message from backend
+  user_id?: number;   // <-- add this line
 }
 
 @Injectable({
@@ -20,6 +21,7 @@ export interface SignupResponse {
 })
 export class SignupService {
 
+  public user_id: number | null = null;
   // Exactly the same style as your other service:
   // hf.space => Hugging Face backend; otherwise => local Flask
   private baseUrl = location.hostname.endsWith('hf.space')
@@ -36,8 +38,25 @@ export class SignupService {
       catchError(this.handleError)
     );
   }
+  assignRole(userId: number, roleName: string) {
+    return this.http.post(`${this.apiUrl}/questions/select-role`, {
+      user_id: userId,
+      role_name: roleName,
+      assigned_at: new Date().toISOString()
+    });
+  }
 
   private handleError(error: HttpErrorResponse) {
     return throwError(() => new Error(error.message || 'Something went wrong'));
   }
+
+  // Method to store user_id after successful signup
+  setUserId(userId: number): void {
+    this.user_id = userId;
+  }
+  // Get user_id (to use in other components)
+  getUserId(): number | null {
+    console.log(this.user_id)
+    return this.user_id;
+  }
 }

src/app/intro-page/intro-page.component.css

@@ -2,904 +2,1102 @@
   display: block;
 }
 
-* {
-  box-sizing: border-box;
+#journeyTitle {
+  color: black !important;
 }
-
-.sr-only {
-  position: absolute;
+/* Utility */
+.visually-hidden {
+  position: absolute !important;
   width: 1px;
   height: 1px;
-  margin: -1px;
   padding: 0;
+  margin: -1px;
   overflow: hidden;
-  clip: rect(0,0,0,0);
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
   border: 0;
 }
-
-.skip-link {
-  position: absolute;
-  left: -9999px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+/* Layout container */
+.container {
+  width: 80%;
+  margin: 0 auto;
 }
-
-  .skip-link:focus {
-    left: 16px;
-    top: 12px;
-    width: auto;
-    height: auto;
-    padding: 8px 10px;
-    background: #fff;
-    color: #000;
-    border-radius: 6px;
-    z-index: 10;
-  }
-
-.page {
+/* HERO */
+.hero {
+  position: relative;
   height: 100vh;
   display: flex;
-  flex-direction: column;
-  background: url(/assets/11.png) no-repeat center center fixed;
-  background-size: cover;
-  color: #e5e7eb;
-  justify-content: space-evenly;
-  gap: 12vw;
+  align-items: center;
+  background: radial-gradient(circle at 20% 30%,rgba(243,165,76,.18),transparent 60%),radial-gradient(circle at 75% 55%,rgba(0,255,136,.12),transparent 55%);
 }
 
-/* Topbar aligned like QA */
-.topbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  background: #000000d4;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  padding: 17px 97px;
-  justify-content: space-between;
-  display: flex;
-  width: 100%;
+.hero__layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
   align-items: center;
+  gap: clamp(2.2rem,5vw,5rem);
 }
 
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 1.5vw;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
+.hero__content {
+  position: relative;
+  z-index: 2;
 }
 
-/* Match QA brand logo sizing/behavior */
-.brand__logo-img {
-  background: #ffffff;
-  max-width: 4.2vw;
-  min-width: 56px;
-  height: auto;
-  border-radius: 50%;
-  padding: 4px;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
-  transition: transform .25s ease;
+.hero__title {
+  font-size: clamp(2.2rem,3.6vw,3.8rem);
+  line-height: 1.1;
+  margin: 0 0 1.2rem;
+  font-weight: 700;
+  background: linear-gradient(90deg,#fff,#ffe2c5 45%,#fff);
+  -webkit-background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 4px 18px rgba(0,0,0,.35));
 }
 
-.brand:hover .brand__logo-img {
-  transform: scale(1.05);
+.hero__text {
+  font-size: clamp(.95rem,1.15vw,1.2rem);
+  max-width: 46ch;
+  line-height: 1.55;
+  margin: 0 0 1.6rem;
+  color: #d8dee7;
+  font-weight: 500;
 }
 
-.brand__name {
-  letter-spacing: 3.2px;
-  font-size: 2.5vw;
-  font-family: Roliana;
-  font-weight: lighter;
+.hero__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem .75rem;
+  margin: 0 0 1.75rem;
 }
 
-  /* Color the "Py" like QA */
-  .brand__name strong {
-    font-weight: unset;
-    color: #f3a54c;
+.badge {
+  position: relative;
+  padding: .4rem .85rem .45rem;
+  border-radius: 2rem;
+  font-size: .65rem;
+  letter-spacing: .8px;
+  font-weight: 600;
+  text-transform: uppercase;
+  background: #f3a54c;
+  color: #0b0f1a;
+  box-shadow: 0 4px 12px -2px rgba(0,0,0,.4);
+}
+
+.hero__sub-cta {
+  margin: 1.25rem 0 0;
+  font-size: .8rem;
+  letter-spacing: .6px;
+  color: #b8c4d2;
+}
+/* Features */
+.features {
+  padding: 2vw;
+  background: linear-gradient(180deg,#0b0f1a,#111c29);
+  position: relative;
+}
+
+  .features::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at 70% 30%,rgba(0,255,136,.12),transparent 60%);
+    pointer-events: none;
+    opacity: .65;
   }
 
-.brand__link {
-  display: inline-flex;
-  align-items: center;
-  color: white;
+.section-title {
+  font-size: clamp(1.8rem,2.9vw,2.6rem);
+  text-align: center;
+  font-weight: 700;
+  letter-spacing: .5px;
+  background: linear-gradient(90deg,#fff,#e6f9ff);
+  -webkit-background-clip: text;
+  color: transparent;
+  line-height: 4vw;
 }
 
-.actions {
+.features__grid {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  gap: 2vw;
+  width: 100%;
 }
 
-/* Controls / buttons */
-.select {
-  background: #0b0f1a;
-  color: #e5e7eb;
-  border: 1px solid #2b3246;
-  border-radius: 10px;
-  padding: 8px 10px;
+.feature {
+  background: linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
+  border: 1px solid rgba(255,255,255,.12);
+  padding: 1.2rem 1.15rem 1.25rem;
+  border-radius: 1.1rem;
+  backdrop-filter: blur(14px);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: .55rem;
+  min-height: 170px;
 }
 
-.btn {
-  display: inline-flex;
+  .feature::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at 25% 15%,rgba(243,165,76,.15),transparent 70%);
+    opacity: 0;
+    transition: opacity .4s ease;
+  }
+
+  .feature:hover::after {
+    opacity: 1;
+  }
+
+  .feature h3 {
+    margin: .2rem 0 .15rem;
+    font-size: .95rem;
+    letter-spacing: .6px;
+    font-weight: 600;
+    color: #fff;
+  }
+
+  .feature p {
+    margin: 0;
+    font-size: .72rem;
+    line-height: 1.35;
+    color: #d1d8e3;
+    max-width: 36ch;
+  }
+
+.feature__icon {
+  width: 44px;
+  height: 44px;
+  display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  background: #0b0f1a;
-  color: #e5e7eb;
-  border: 1px solid #2b3246;
-  border-radius: 10px;
-  padding: 10px 14px;
-  cursor: pointer;
-  text-decoration: none;
-  border: 2px solid #f3a54c;
+  font-size: 1.1rem;
+  border-radius: 14px;
+  background: linear-gradient(135deg,#182330,#1f2f40);
+  color: #ffe2c5;
+  box-shadow: 0 4px 14px -4px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
+}
+
+.gradient-ring {
+  position: relative;
 }
 
-  .btn:hover {
-    border-color: #00ff88;
+  .gradient-ring::before {
+    content: "";
+    position: absolute;
+    inset: -2px;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(120deg,#f3a54c,#00ff88);
+    -webkit-mask: linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
   }
+/* Journey */
+.journey {
+  padding-top: 4vw;
+  background: #f7f9fc;
+}
 
-.btn-primary {
-  background: #f3a54c;
-  color: #0b0f1a;
-  border: none;
-  font-weight: 700;
+.journey__steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1.4rem;
+  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
 }
 
-.btn-ghost {
-  background: #0b0f1a;
+.step {
+  background: #fff;
+  border: 1px solid #eceff3;
+  padding: 1.15rem 1rem 1.3rem;
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: .45rem;
+  box-shadow: 0 6px 16px -6px rgba(28,40,56,.18);
+  transition: transform .35s ease,box-shadow .35s ease;
 }
 
-.btn-disabled:hover {
-  border-color: #f3a54c !important;
+  .step:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 28px -10px rgba(28,40,56,.35);
+  }
+
+.step__num {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: .85rem;
+  background: linear-gradient(135deg,#f3a54c,#ffcb7a);
+  color: #111;
+  box-shadow: 0 4px 10px -2px rgba(0,0,0,.25);
 }
 
-.hero {
-  margin-left: 5vw;
-  position: absolute;
-  top: 50%;
-  left: 16.3%;
-  transform: translate(-50%, -16.3%);
+.step h3 {
+  margin: 0;
+  font-size: .85rem;
+  letter-spacing: .5px;
+  color: #222;
+  font-weight: 600;
 }
 
-.hero__content {
-  max-width: 620px;
+.step p {
+  margin: 0;
+  font-size: .68rem;
+  line-height: 1.35;
+  color: #4a5663;
+}
+/* Buttons */
+.btn-secondary {
+  background: linear-gradient(135deg,#f3a54c,#ffcb7a);
+  color: #111;
+  border: none;
+  font-weight: 600;
 }
 
-.hero__title {
-  margin: 0 0 25px;
-  font-size: 2.3vw;
-  line-height: 1.2;
-  font-weight: bold;
+  .btn-secondary.disabled, .btn-secondary[aria-disabled='true'] {
+    filter: grayscale(.7) brightness(.6);
+    cursor: not-allowed;
+  }
+/* Solutions */
+.cards {
+  background: #f7f7f7;
+  padding: 70px clamp(2.5rem,6vw,5rem);
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit,minmax(340px,1fr));
+  gap: 60px clamp(2rem,3.2vw,3rem);
 }
 
-.hero__text {
-  color: #b9c2d0;
-  margin: 0 0 34px;
-  font-size: 0.9vw;
-  font-weight: 500;
-  line-height: 1.5vw;
+  .cards > .card {
+    background: #fff;
+    border: 1px solid #e3e5e8;
+    border-radius: 8px;
+    padding: 36px 34px 42px;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    box-shadow: 0 6px 22px -8px rgba(0,0,0,.12);
+    transition: .35s ease;
+    position: relative;
+    isolation: isolate;
+  }
+
+    .cards > .card::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,0));
+      opacity: 0;
+      transition: opacity .45s ease;
+      pointer-events: none;
+    }
+
+    .cards > .card:hover {
+      transform: translateY(-6px);
+      box-shadow: 0 14px 38px -12px rgba(0,0,0,.22);
+    }
+
+      .cards > .card:hover::before {
+        opacity: 1;
+      }
+
+    .cards > .card img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      border-radius: 4px;
+      margin: -8px 0 6px;
+      box-shadow: 0 4px 10px -4px rgba(0,0,0,.18);
+    }
+
+    .cards > .card h3 {
+      margin: 10px 0 6px;
+      font-size: 22px;
+      font-weight: 700;
+      letter-spacing: .4px;
+      color: #1d2433;
+    }
+
+    .cards > .card p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.55;
+      color: #2a313d;
+      letter-spacing: .25px;
+    }
+
+@media (max-width:880px) {
+  .cards {
+    gap: 40px 28px;
+    padding: 60px clamp(1.5rem,5vw,3rem)
+  }
+
+    .cards > .card {
+      padding: 30px 26px 36px
+    }
 }
 
-.cta {
+@media (max-width:560px) {
+  .cards {
+    grid-template-columns: 1fr;
+    padding: 50px 1.25rem 60px
+  }
+
+    .cards > .card {
+      padding: 26px 22px 32px
+    }
+
+      .cards > .card img {
+        height: 180px
+      }
+}
+/* Special + bottom CTA */
+.special-content {
+  background: #e5e5ea;
+  position: relative;
+  padding: 110px clamp(2rem,6vw,5rem) 60px;
   display: flex;
-  gap: 10px;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
+  flex-direction: column;
+  align-items: center;
+  gap: 70px;
 }
 
-/* Footer */
-.footer {
+.special-card {
+  max-width: 860px;
+  width: 100%;
+  border-radius: 26px;
+  padding: 54px 56px 60px;
+  background: #fff;
+  box-shadow: 0 18px 42px -14px rgba(0, 0, 0, .12);
   display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-left: 5vw;
-  font-size: 0.7vw;
+  flex-direction: column;
+  gap: 2vw;
 }
 
-  /* remove styles targeting removed footer link */
-  .footer a {
-    all: unset;
+  .special-card h2 {
+    font-size: 2.05rem;
+    text-align: center;
+    color: #111;
+    font-weight: 700;
   }
 
-.about-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: 8px;
-  border: 1px solid rgba(255,255,255,.25);
-  background: rgba(11, 15, 26, 0.6);
-  color: #cfe8ff;
-  cursor: pointer;
+  .special-card p {
+    font-size: 1rem;
+    line-height: 1.55;
+    color: #111;
+    margin: 0;
+  }
+.secondaryCard {
+  display: flex;
+  flex-direction: column;
+  gap: 1vw;
 }
 
-  .about-btn:hover, .footer a:hover {
-    border-color: #00ff88;
+
+  .secondaryCard button {
+    width: max-content;
+    color: #f3a54c;
+    background: black;
+    padding: 0.8vw;
+    border-radius: 1vw;
+    font-weight: 900;
   }
 
-/* High contrast mode */
-.page.high-contrast {
-  background: #000;
-  color: #fff;
+
+  .cta-bottom {
+  text-align: center;
+  max-width: 760px;
+  width: 100%;
+  background: #fff;
+  padding: 54px 48px 60px;
+  border-radius: 26px;
+  box-shadow: 0 18px 42px -14px rgba(0,0,0,.12);
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
 }
 
-  .page.high-contrast a {
-    color: #fff;
-    text-decoration: underline;
-  }
+.cta-bottom__title {
+  margin: 0;
+  font-size: 1.9rem;
+  font-weight: 700;
+  letter-spacing: .5px;
+  color: #111;
+}
 
-  .page.high-contrast .card, .page.high-contrast .banner {
-    background: #000;
-    border: 2px solid #fff;
+.cta-bottom__text {
+  margin: 0;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: #222;
+}
+
+.cta-bottom__btn {
+  align-self: center;
+  margin-top: 6px;
+  font-size: .95rem;
+  padding: .9rem 2.2rem;
+}
+
+@media (max-width:860px) {
+  .special-card, .cta-bottom {
+    padding: 46px 40px 52px
   }
 
-  .page.high-contrast .btn, .page.high-contrast .select {
-    border-color: #fff !important;
+    .special-card h2 {
+      font-size: 1.85rem
+    }
+
+  .cta-bottom__title {
+    font-size: 1.75rem
   }
 
-/* AUTH Modal overlay */
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgb(255 255 255 / 34%);
-  display: grid;
-  place-items: center;
-  z-index: 1000;
-  animation: fadeIn 0.2s ease-out;
-  backdrop-filter: blur(8px);
+  .cta-bottom__text {
+    font-size: 1rem
+  }
 }
 
-.modal-panel {
-  animation: slideIn 0.3s ease-out;
-}
+@media (max-width:560px) {
+  .special-content {
+    padding: 80px 1.25rem 50px;
+    gap: 50px
+  }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
+  .special-card, .cta-bottom {
+    padding: 40px 30px 46px
   }
 
-  to {
-    opacity: 1;
+    .special-card h2 {
+      font-size: 1.6rem
+    }
+
+  .cta-bottom__title {
+    font-size: 1.55rem
+  }
+
+  .cta-bottom__text {
+    font-size: .95rem
+  }
+
+  .cta-bottom__btn {
+    width: 100%
   }
 }
+/* Footer */
+footer {
+  position: relative;
+  background: #05080d;
+  padding: 2.2rem 1rem 2.6rem;
+  margin: 0;
+}
 
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
+  footer p {
+    font-size: .65rem;
+    letter-spacing: .5px;
+    margin: 0 0 .9rem;
+    color: #9aa6b5;
   }
 
-  to {
+.footer-links a {
+  font-size: .6rem;
+  letter-spacing: .6px;
+  color: #d5dee9;
+  opacity: .85;
+  transition: opacity .3s ease;
+}
+
+  .footer-links a:hover {
     opacity: 1;
-    transform: translateY(0);
   }
+/* Footer redesign */
+.site-footer {
+  background: #000;
+  padding: 38px clamp(1.5rem,4vw,3.5rem) 54px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 26px;
 }
 
-button.modal-close {
-  background: white;
-  color: black;
-  position: relative;
-  left: 48.2vw;
-  top: 0.7vw;
-  z-index: 11;
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 1vw;
-  font-weight: bold;
+.site-footer__copy {
+  margin: 0;
+  font-size: .78rem;
+  letter-spacing: .5px;
+  color: #e5e5e5;
+  font-weight: 500;
 }
 
-/* Ensure the auth components fit properly in the modal */
-.modal-panel app-sign-in,
-.modal-panel app-sign-up {
-  display: block;
-  width: 100%;
+.site-footer__row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
 }
 
-/* Enhanced ABOUT Modal backdrop */
-.about-backdrop {
-  position: fixed;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  z-index: 1100; /* above auth backdrop */
-  animation: fadeIn 0.3s ease-out;
+.site-footer__links {
   display: flex;
   align-items: center;
+  gap: 30px;
+  font-size: .8rem;
+  font-weight: 500;
+  flex-wrap: wrap;
   justify-content: center;
 }
 
-  /* Add a subtle pattern/texture to the backdrop */
-  .about-backdrop::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-image: radial-gradient(circle at 25% 25%, rgba(243, 165, 76, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-  }
-
-/* Add a subtle animation to the backdrop pattern */
-@keyframes subtleShift {
-  0%, 100% {
-    transform: translate(0, 0);
+  .site-footer__links a {
+    color: #e5e5e5;
+    text-decoration: none;
+    position: relative;
+    letter-spacing: .4px;
+    transition: color .25s ease;
   }
 
-  50% {
-    transform: translate(3px, 3px);
-  }
-}
+    .site-footer__links a:hover {
+      color: #f3a54c;
+    }
 
-.about-backdrop::before {
-  animation: subtleShift 15s ease-in-out infinite;
-}
+    .site-footer__links a + a::before {
+      content: "";
+      position: absolute;
+      left: -15px;
+      top: 50%;
+      width: 2px;
+      height: 16px;
+      background: #333;
+      transform: translateY(-50%);
+      border-radius: 2px;
+    }
 
-/* Enhanced about modal */
-.about-modal {
-  position: fixed;
-  z-index: 1101; /* above auth modal */
-  inset: 50% auto auto 50%;
-  transform: translate(-50%, -50%);
-  width: min(720px, 92vw);
-  max-height: 80vh;
-  overflow: auto;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  color: #111;
-  border-radius: 16px;
-  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
-  outline: none;
-  animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+.site-footer__social {
+  display: flex;
+  gap: 34px;
+  align-items: center;
+  justify-content: center;
 }
 
-@keyframes modalSlideIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%);
+  .site-footer__social a {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #111;
+    border: 1px solid #32363d;
+    color: #e5e5e5;
+    font-size: 16px;
+    transition: .3s ease;
+    box-shadow: 0 4px 10px -4px rgba(0,0,0,.45);
   }
 
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
+    .site-footer__social a:hover {
+      color: #f3a54c;
+      border-color: #f3a54c;
+      transform: translateY(-3px);
+    }
+
+@media (max-width:680px) {
+  .site-footer {
+    padding: 46px 1.25rem 70px;
   }
-}
 
-.about-modal__header {
-  padding: 20px 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  display: flex;
-  align-items: center;
-  background: #dedee7;
-  color: #0b0f1a;
-  border-radius: 16px 16px 0 0;
-}
+  .site-footer__links {
+    gap: 20px;
+    font-size: .72rem;
+  }
 
-  .about-modal__header h2 {
-    margin: 0;
-    font-size: 1.5rem;
-    font-weight: 700;
+  .site-footer__social {
+    gap: 20px;
   }
 
-.about-modal__body {
-  padding: 24px;
-  line-height: 1.6;
-  background: #ffffff;
-  text-align: justify;
+    .site-footer__social a {
+      width: 38px;
+      height: 38px;
+      font-size: 15px;
+    }
+}
+/* Background */
+.page {
+  display: block;
+  min-height: 100vh;
+  background: linear-gradient(rgba(5,8,13,.65),rgba(5,8,13,.65)),url('/assets/11.png') center/cover fixed no-repeat;
+}
+/* Header */
+.header-bar {
+  background: #000 !important;
+  box-shadow: 0 2px 0 rgba(255,255,255,.04);
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start;
+  min-height: 82px;
+  padding: 14px clamp(1.4rem,4vw,3rem) !important;
+  gap: clamp(1.5rem,3vw,4rem);
+  position: sticky;
+  top: 0;
+  z-index: 2002;
 }
+  .header-bar .brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 1.5vw;
+  }
 
-  .about-modal__body p {
-    margin-bottom: 16px;
+  .header-bar .brand__logo-img {
+    background: #fff;
+    width: 74px;
+    min-width: 74px;
+    max-width: 74px;
+    padding: 6px;
+    border-radius: 50%;
+    box-shadow: 0 4px 10px rgba(0,0,0,.25);
   }
 
-.about-modal__footer {
-  padding: 16px 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  background: #f8f9fa;
-  border-radius: 0 0 16px 16px;
+  .header-bar .brand__name {
+    font-family: Roliana;
+    font-size: 2.5vw;
+    font-weight: 300;
+    letter-spacing: 3.2px;
+    color: #fff;
+    text-shadow: 0 2px 4px rgba(0,0,0,.35);
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+    .header-bar .brand__name strong {
+      color: #f3a54c;
+      font-weight: 300;
+    }
+
+.header__nav {
+  flex: 1 1 auto !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(2.2rem,3.4vw,4rem) !important;
+  margin: 0 !important;
+  white-space: nowrap;
 }
 
-/* Enhanced close button for the about modal */
-.about-close {
-  margin-left: auto;
-  border: none;
-  color: #000000;
-  border: 2px solid #f3a54c;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  font-size: 22px;
-  cursor: pointer;
-  display: flex;
+.nav-link--icon {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  font-weight: bold;
-  background: transparent;
+  gap: 8px;
+  font-size: 0.9vw;
+  letter-spacing: 1px;
+  font-weight: 700;
+  color: #fff;
+  opacity: .92;
+  text-decoration: none;
+  padding: 6px 10px;
+  position: relative;
+  transition: .25s ease;
+  height: 46px;
+  line-height: 1;
 }
 
-  .about-close:hover {
-    border: 2px solid #00ff88;
-    /*transform: scale(0.8);*/
+  .nav-link--icon i {
+    font-size: .85rem;
+    opacity: .95;
   }
 
-  .about-close:focus {
-    outline: 2px solid #00ff88;
-    outline-offset: 2px;
+  .nav-link--icon:hover {
+    color: #f3a54c;
+    opacity: 1;
   }
 
-/* High contrast mode adjustments */
-.page.high-contrast .about-backdrop {
-  background: rgba(0, 0, 0, 0.8);
-}
+  .nav-link--icon::after {
+    content: "";
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 2px;
+    height: 2px;
+    background: linear-gradient(90deg,#f3a54c,#ffcb7a);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform .35s ease;
+    border-radius: 2px;
+  }
 
-  .page.high-contrast .about-backdrop::before {
-    display: none;
+  .nav-link--icon:hover::after {
+    transform: scaleX(1);
   }
 
-.page.high-contrast .about-modal {
-  border: 2px solid #fff;
-  background: #000;
-  color: #fff;
+.header__actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin: 0 !important;
 }
 
-.page.high-contrast .about-modal__header {
-  border-bottom: 2px solid #fff;
-  background: #000;
+.btn-signup, .btn-signin {
+  border-radius: 10px;
+  font-size: .8rem;
+  padding: .65rem 1.25rem;
+  font-weight: 600;
+  letter-spacing: .5px;
+  line-height: 1;
 }
 
-.page.high-contrast .about-modal__footer {
-  border-top: 2px solid #fff;
-  background: #000;
+.btn-signup {
+  background: #f3a54c;
+  color: #0b0f1a;
+  border: none;
+  box-shadow: 0 4px 10px -2px rgba(243,165,76,.4);
 }
 
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .about-backdrop,
-  .about-modal {
-    animation: none;
+  .btn-signup:hover {
+    filter: brightness(1.08);
   }
 
-    .about-backdrop::before {
-      animation: none;
-    }
+.btn-signin {
+  background: #0b0f1a;
+  color: #fff;
+  border: 2px solid #f3a54c;
+}
 
-  .about-close:hover {
-    transform: none;
+  .btn-signin:hover {
+    background: #121b27;
   }
+/* Tagline line break styling */
+.tagline-line2 {
+  display: inline-block;
+  margin-top: .35rem;
+  font-weight: 700;
+  background: linear-gradient(90deg,#ffe2c5,#ffffff);
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
-/* Enhanced tooltip for Get Started when not signed in */
-.tooltip {
-  position: relative;
-  display: inline-block;
-  /* theme tokens */
-  --t-bg: #cfe8ff; /* requested background */
-  --t-border: #2b3246;
-  --t-text: #0b0f1a; /* dark text for contrast */
-  --t-shadow: rgba(0,0,0,.25);
-  --t-glow: rgba(0,255,136,.18); /* brand neon */
-}
-
-/* Bubble positioned to the right of trigger */
-.tooltip__bubble {
-  transform: translateY(-50%) translateX(-6px) scale(0.98);
-  padding: 10px 14px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity .18s ease, transform .18s ease;
-  transition-delay: .06s;
-  z-index: 20;
+.hero__title br {
+  content: "";
+}
+/* Auth Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,.55);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
-  position: absolute;
-  top: 50%;
-  left: calc(100% + 12px);
-  background: #cfe8ffb5;
-  color: var(--t-text);
-  padding: 10px 14px;
-  border-radius: 12px;
-  font-size: 10px;
-  transition: opacity .18s ease, transform .18s ease;
-  width: max-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px clamp(12px,4vw,40px);
+  z-index: 2000;
+  animation: modalFade .25s ease;
 }
 
-  /* subtle top highlight */
-  .tooltip__bubble::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    background: radial-gradient(120px 40px at 50% -20px, rgba(255,255,255,.35), transparent 70%);
-  }
-
-  /* Arrow on the left side pointing to trigger */
-  .tooltip__bubble::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: -16px;
-    transform: translateY(-50%);
-    border: 8px solid transparent;
-    border-right-color: var(--t-bg);
-    filter: drop-shadow(0 2px 0 rgba(0,0,0,.12));
-  }
-
-.tooltip.tooltip--active:hover .tooltip__bubble,
-.tooltip.tooltip--active:focus-within .tooltip__bubble,
-.tooltip.tooltip--active .tooltip__bubble:hover,
-.tooltip.tooltip--active .tooltip__bubble:focus {
-  opacity: 1;
-  transform: translateY(-50%) translateX(0) scale(1);
-  pointer-events: auto;
-  animation: tooltip-pop-right .22s cubic-bezier(.2,.8,.25,1);
-}
-
-@keyframes tooltip-pop-right {
-  0% {
-    opacity: 0;
-    transform: translateY(-50%) translateX(-10px) scale(.96);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translateY(-50%) translateX(2px) scale(1.02);
+@keyframes modalFade {
+  from {
+    opacity: 0
   }
 
-  100% {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0) scale(1);
+  to {
+    opacity: 1
   }
 }
 
-/* High contrast friendly tooltip */
-.page.high-contrast .tooltip__bubble {
-  background: #000;
-  color: #fff;
-  border-color: #fff;
-  box-shadow: 0 0 0 2px #fff;
+.modal-panel {
+  position: relative;
+  width: 56%;
+  border-radius: 22px;
+  background: #0f1522;
+  color: #e5e7eb;
+  padding: 52px 44px 48px;
+  animation: panelIn .35s cubic-bezier(.16,1,.3,1);
 }
 
-  .page.high-contrast .tooltip__bubble::after {
-    border-right-color: #000;
-  }
+.modal-panel--white {
+  background: transparent;
+  color: #111;
+}
 
-/* Keep right-side placement on small screens as requested */
-@media (prefers-reduced-motion: reduce) {
-  .tooltip__bubble {
-    transition: none;
+@keyframes panelIn {
+  from {
+    transform: translateY(22px) scale(.95);
+    opacity: 0
   }
 
-  .tooltip.tooltip--active:hover .tooltip__bubble,
-  .tooltip.tooltip--active:focus-within .tooltip__bubble {
-    animation: none;
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1
   }
 }
 
-/* Cards Section */
-.cards {
+button.modal-close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: #0b0f1a;
+  color: #fff;
+  border: 2px solid #f3a54c;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
   display: flex;
-  justify-content: space-around;
-  padding: 60px 10%;
-  background: #f9f9f9;
-  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  transition: .25s ease;
 }
 
-.card {
-  width: 30%;
+.modal-panel--white button.modal-close {
   background: #fff;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  margin-bottom: 20px;
-  border-radius: 12px;
-  overflow: hidden;
-  text-align: left;
+  color: #111;
+  border: 2px solid #f3a54c;
 }
 
-  .card img {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-  }
-
-  .card h3 {
-    margin: 15px;
-    font-size: 20px;
-    color: #444;
-  }
-
-  .card p {
-    margin: 0 15px 20px 15px;
-    font-size: 0.89vw;
-    line-height: 1.5;
-    text-align: justify;
-    color: black;
-  }
-
-/* Scrolling Images */
-.scroll-container {
-  overflow: hidden;
-  white-space: nowrap;
-  padding: 20px 0;
-  position: relative;
+button.modal-close:hover {
+  border-color: #00ff88;
+  transform: scale(.92);
 }
 
-/* Use flex track with two identical sequences for seamless loop */
-.scroll-images {
-  display: flex;
-  align-items: center;
-  animation: scroll-left 40s linear infinite;
-  width: max-content;
+button.modal-close:focus-visible {
+  outline: 3px solid #00ff88;
+  outline-offset: 2px;
 }
 
-  .scroll-images img {
-    width: 10vw;
-    height: 10vw;
-    margin: 0 10px;
-    border-radius: 8px;
-    object-fit: cover;
-    flex: 0 0 auto;
-  }
-
-/* Pause on hover (optional UX improvement) */
-.scroll-container:hover .scroll-images {
-  animation-play-state: paused;
+.modal-panel app-sign-in, .modal-panel app-sign-up {
+  display: block;
 }
 
-@keyframes scroll-left {
-  0% {
-    transform: translateX(0);
-  }
-
-  100% {
-    transform: translateX(-50%);
-  }
-  /* shift exactly one set width (because duplicated) */
+.page, .hero, .features, .journey, .cards, .special-content {
+  position: relative;
+  z-index: 1;
 }
 
-/* Special Content */
-.special-content {
-  background: #dedee7;
-  padding: 50px 15%;
-  text-align: center;
+@media (max-width:1100px) {
+  .header__nav {
+    gap: 1.6rem;
+  }
 }
 
-  .special-content h2 {
-    font-size: 28px;
-    margin-bottom: 20px;
+@media (max-width:880px) {
+  .header-bar {
+    flex-wrap: wrap;
+    min-height: unset;
   }
 
-  .special-content p {
-    font-size: 18px;
-    line-height: 1.6;
+  .header__nav {
+    order: 3;
+    flex: 1 1 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: .85rem 1.4rem;
+    padding-top: .35rem;
   }
 
-/* Footer */
-footer {
-  background: black;
-  color: #fff;
-  text-align: center;
-  padding: 15px 10px;
+  .header__actions {
+    order: 2;
+  }
 }
 
-  footer a {
-    color: #fff;
-    text-decoration: none;
-    margin: 0 10px;
+@media (max-width:900px) {
+  .header-bar .brand__name {
+    font-size: 8vw;
   }
+}
 
-  footer .social-icons {
-    margin-top: 10px;
+@media (max-width:640px) {
+  .nav-link--icon {
+    font-size: .64rem;
   }
+}
 
-    footer .social-icons img {
-      width: 25px;
-      margin: 0 8px;
-      vertical-align: middle;
-    }
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .card {
-    width: 100%;
-  }
 
-  .brand__name {
-    font-size: 1.5rem;
-  }
 
-  .topbar {
-    gap: 20px;
-    justify-content: space-between;
-  }
+a.brand.brand__link {
+  text-decoration: unset;
+}
 
-  .cards {
-    padding: 30px 5%;
-  }
 
-  .special-content {
-    padding: 30px 5%;
-  }
+.cta {
+  display: flex;
+  gap: 1vw;
 }
 
-/* Adjust page padding to account for fixed header/footer */
-.page {
-  padding-top: 70px; /* Space for fixed header */
-  padding-bottom: 80px; /* Space for fixed footer */
-  height: auto;
-  min-height: 100vh;
+.about-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
 }
 
-/* Adjust cards section to account for fixed elements */
-.cards {
-  padding: 80px 51px;
+.about-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 2.5rem;
+  width: 45%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  animation: _ngcontent-ng-c221623785_modalFadeIn 0.4s ease-out;
+  text-align: justify;
+  margin: 0 auto;
 }
 
-/* Adjust scrolling images section */
-.scroll-container {
-  margin: 20px 0;
+.about-modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-/* Adjust special content section */
-.special-content {
-  padding: 60px 15% 80px;
+.about-modal__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0;
+  color: #f3a54c;
 }
 
-/* Responsive adjustments for fixed elements */
-@media (max-width: 768px) {
-  .topbar {
-    gap: 20px;
-    padding: 8px 12px;
-  }
-
-  .page {
-    padding-top: 60px;
-    padding-bottom: 70px;
-  }
-
-  .cards {
-    padding: 70px 5% 30px;
-  }
+.about-modal__close {
+  background: transparent;
+  border: 2px solid black;
+  color: #f3a54c;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  border-radius: 0.3vw;
+}
 
-  .special-content {
-    padding: 40px 5% 60px;
+  .about-modal__close:hover {
+    background: #f3a54c;
+    color: black;
   }
 
-  footer .social-icons img {
-    width: 20px;
-    margin: 0 5px;
-  }
+.about-modal__content {
+  color: #e5e7eb;
+  line-height: 1.6;
 }
 
-/* Social Media Icons */
-.social-icons {
+.about-modal__footer {
   display: flex;
-  justify-content: center;
-  gap: 15px;
-  margin-top: 10px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1rem;
 }
 
-.social-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  text-decoration: none;
-  font-size: 18px;
-  transition: all 0.3s ease;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+.about-modal__btn {
+  background: linear-gradient(135deg, #f3a54c, #ffcb7a);
+  color: #111;
+  border: none;
+  padding: 0.8rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.3s ease;
 }
 
-  .social-icon:hover {
-    transform: translateY(-3px);
-    background: rgba(255, 255, 255, 0.2);
+  .about-modal__btn:hover {
+    transform: translateY(-2px);
   }
 
-  /* Specific colors for each platform */
-  .social-icon.facebook:hover {
-    background: #3b5998;
-    box-shadow: 0 4px 8px rgba(59, 89, 152, 0.3);
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -40%);
   }
 
-  .social-icon.youtube:hover {
-    background: #ff0000;
-    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
   }
+}
 
-  .social-icon.linkedin:hover {
-    background: #0077b5;
-    box-shadow: 0 4px 8px rgba(0, 119, 181, 0.3);
+@keyframes modalFadeOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%);
   }
 
-  .social-icon.instagram:hover {
-    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
-    box-shadow: 0 4px 8px rgba(188, 24, 136, 0.3);
+  to {
+    opacity: 0;
+    transform: translate(-50%, -60%);
   }
+}
 
-/* Responsive adjustments for social icons */
-@media (max-width: 768px) {
-  .social-icons {
-    gap: 10px;
-  }
+/* Marriage Sub Navigation */
+.nav-item-wrapper {
+  position: relative;
+  display: inline-block;
+}
 
-  .social-icon {
-    width: 32px;
-    height: 32px;
-    font-size: 16px;
-  }
+.sub-nav {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: #0b0f1a;
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: 8px;
+  padding: 8px 0;
+  min-width: 200px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.4);
+  backdrop-filter: blur(14px);
+  z-index: 1000;
+  animation: subnavFadeIn 0.2s ease-out;
 }
 
-/* New special-card styles */
-.special-card {
-  width: min(840px, 90%);
-  margin: 0 auto;
-  background: #fff;
-  padding: 28px 32px 34px;
-  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15);
-  border: 1px solid rgba(0,0,0,0.06);
-  border-radius: 20px;
+.sub-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  color: #e5e7eb;
+  text-decoration: none;
+  font-size: 0.75vw;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  transition: all 0.25s ease;
+  border: none;
+  background: none;
+  width: 100%;
   text-align: left;
+  cursor: pointer;
 }
 
-  .special-card h3 {
-    margin: 0 0 16px;
-    font-size: 28px;
-    background: linear-gradient(90deg, #f3a54c, #ffcb7a);
-    -webkit-background-clip: text;
-    color: transparent;
-    letter-spacing: .5px;
-    color: black;
+  .sub-nav-link:hover {
+    background: rgba(243, 165, 76, 0.1);
+    color: #f3a54c;
+  }
+
+  .sub-nav-link i {
+    font-size: 0.85rem;
+    width: 16px;
     text-align: center;
   }
 
-  .special-card p {
-    margin: 0;
-    line-height: 1.6;
-    color: #000000;
+@keyframes subnavFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
   }
 
-.primary-nav {
-  display: flex;
-  gap: 1.8rem;
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.nav-link {
+/* Ensure the main nav items have proper z-index */
+.header__nav {
   position: relative;
-  font-size: 0.9rem;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
-  font-weight: 600;
-  color: #e5e7eb;
-  text-decoration: none;
-  padding: 6px 4px;
-  transition: color .25s ease;
+  z-index: 1001;
 }
-
-  .nav-link::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 0;
-    height: 2px;
-    background: linear-gradient(90deg,#f3a54c,#ffcb7a);
-    transition: width .3s ease;
-    border-radius: 2px;
-  }
-
-  .nav-link:hover {
-    color: #f3a54c;
-  }
-
-    .nav-link:hover::after {
-      width: 100%;
-    }

src/app/intro-page/intro-page.component.html

@@ -1,67 +1,189 @@
 <a class="skip-link" href="#main">Skip to content</a>
 
 <section class="page">
-  <!-- Top bar (now fixed) -->
-  <header class="topbar" role="banner" aria-label="Top navigation">
-    <a class="brand brand__link"
-       href="https://pykara.net/"
-       target="_blank"
-       rel="noopener noreferrer"
-       aria-label="Visit Pykara website">
-      <img src="assets/pykara-logo.png" alt="Pykara Technologies logo" class="brand__logo-img" />
-      <span class="brand__name"><strong>Py</strong>-Match</span>
+  <!-- Logo link added below -->
+  <div class="intro-logo">
+    <a href="https://pykara.net/" target="_blank" rel="noopener" aria-label="Pykara Technologies Home">
+      <img src="assets/logo.png" alt="Pykara Technologies Logo" style="height: 60px;" />
     </a>
+  </div>
 
-    <!-- Primary navigation for assessment types -->
-    <nav class="primary-nav" aria-label="Assessment navigation">
-      <a routerLink="/question-answer" [queryParams]="{ role: 'marriage' }" class="nav-link">
-        <i class="fa-solid fa-ring nav-link__icon" aria-hidden="true"></i>
-        <span>Marriage</span>
-      </a>
-      <a routerLink="/question-answer" [queryParams]="{ role: 'interview' }" class="nav-link">
-        <i class="fa-solid fa-user-tie nav-link__icon" aria-hidden="true"></i>
-        <span>Interview</span>
-      </a>
-      <a routerLink="/question-answer" [queryParams]="{ role: 'partnership' }" class="nav-link">
-        <i class="fa-solid fa-handshake nav-link__icon" aria-hidden="true"></i>
-        <span>Partnership</span>
-      </a>
-    </nav>
-
-    <nav class="actions" aria-label="Actions">
-      <ng-container *ngIf="!isSignedIn; else signedInBlock">
-        <button type="button" class="btn btn-primary" (click)="openSignUp()">{{ tr('signup') }}</button>
-        <button type="button" class="btn btn-ghost" (click)="openSignIn()">{{ tr('signin') }}</button>
-      </ng-container>
-      <ng-template #signedInBlock>
-        <button type="button" class="profile-btn" aria-label="Profile">
-          <i class="fa-solid fa-user" aria-hidden="true"></i>
-        </button>
-        <button type="button" class="btn btn-ghost" (click)="signOut()">Sign out</button>
-      </ng-template>
-    </nav>
-  </header>
-
-  <!-- Hero (unchanged) -->
+  <!-- Hero -->
   <main id="main" class="hero" role="main">
-    <div class="hero__content">
-      <h1 class="hero__title">{{ tr('tagline') }}</h1>
-      <p class="hero__text">{{ tr('subtext') }}</p>
-      <div class="cta">
-        <button type="button"
-                class="btn btn-ghost"
-                (click)="openAbout()"
-                aria-haspopup="dialog"
-                aria-controls="aboutDialog"
-                [attr.aria-expanded]="isAboutOpen ? 'true' : 'false'">
-          Know more
-        </button>
+    <div class="hero__bg" aria-hidden="true"></div>
+    <div class="container hero__layout">
+      <div class="hero__content">
+        <h1 class="hero__title" [innerHTML]="tr('tagline')"></h1>
+        <p class="hero__text">{{ tr('subtext') }}</p>
+        <div class="hero__badges">
+          <span class="badge">AI Adaptive</span>
+          <span class="badge">Psychometrics</span>
+            <span class="badge">Privacy First</span>
+        </div>
+        <div class="cta">
+          <button type="button"
+                  class="btn btn-ghost"
+                  (click)="openAbout()"
+                  aria-haspopup="dialog"
+                  aria-controls="aboutDialog"
+                  [attr.aria-expanded]="isAboutOpen ? 'true' : 'false'">
+            Know more
+          </button>
+        </div>
+        <p class="hero__sub-cta" *ngIf="!isSignedIn">Create a free profile to begin your first assessment.</p>
       </div>
     </div>
   </main>
 
+  <!-- Feature Differentiators -->
+  <section id="features" class="features" aria-labelledby="featuresTitle">
+    <div class="container">
+      <h2 id="featuresTitle" class="section-title">What Makes Py-Match Different</h2>
+      <div class="features__grid">
+        <div class="feature">
+          <div class="feature__icon gradient-ring"><i class="fa-solid fa-layer-group"></i></div>
+          <h3>Adaptive Questioning</h3>
+          <p>Dynamic assessments that evolve with every answer to sharpen accuracy.</p>
+        </div>
+        <div class="feature">
+          <div class="feature__icon gradient-ring"><i class="fa-solid fa-dna"></i></div>
+          <h3>Behavioral Modeling</h3>
+          <p>Maps responses to validated personality archetypes for deep insight.</p>
+        </div>
+        <div class="feature">
+          <div class="feature__icon gradient-ring"><i class="fa-solid fa-chart-line"></i></div>
+          <h3>Role Intelligence</h3>
+          <p>Aligns your profile with scenario-specific success templates.</p>
+        </div>
+        <div class="feature">
+          <div class="feature__icon gradient-ring"><i class="fa-solid fa-shield-halved"></i></div>
+          <h3>Privacy by Design</h3>
+          <p>Secure data handling and minimal exposure at every interaction.</p>
+        </div>
+        <div class="feature">
+          <div class="feature__icon gradient-ring"><i class="fa-solid fa-people-group"></i></div>
+          <h3>Multi-Context Matching</h3>
+          <p>Marriage, hiring, leadership and partnerships in one unified engine.</p>
+        </div>
+        <div class="feature">
+          <div class="feature__icon gradient-ring"><i class="fa-solid fa-bolt"></i></div>
+          <h3>Actionable Insights</h3>
+          <p>Clear strengths, gaps and complementarity—not vague labels.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Journey / How it works -->
+  <section id="journey" class="journey" aria-labelledby="journeyTitle">
+    <div class="container">
+      <h2 id="journeyTitle" class="section-title">Your Matching Journey</h2>
+      <ol class="journey__steps">
+        <li class="step">
+          <div class="step__num">1</div>
+          <h3>Create Profile</h3>
+          <p>Sign up and select your objective: marriage, hiring, or partnership.</p>
+        </li>
+        <li class="step">
+          <div class="step__num">2</div>
+          <h3>Adaptive Assessment</h3>
+          <p>Answer evolving questions tailored to sharpen trait precision.</p>
+        </li>
+        <li class="step">
+          <div class="step__num">3</div>
+          <h3>Profile Modeling</h3>
+          <p>Your responses map into a multi-dimensional personality structure.</p>
+        </li>
+        <li class="step">
+          <div class="step__num">4</div>
+          <h3>Intelligent Matching</h3>
+          <p>Compare against role or compatibility templates for data-driven fit.</p>
+        </li>
+        <li class="step">
+          <div class="step__num">5</div>
+          <h3>Insight & Action</h3>
+          <p>Receive transparent recommendations and next-step guidance.</p>
+        </li>
+      </ol>
+    </div>
+  </section>
+
+  <!-- Solutions (Cards) -->
+  <section class="cards" aria-labelledby="solutionsTitle">
+    <h2 id="solutionsTitle" class="visually-hidden">Solution Scenarios</h2>
+    <div class="card">
+      <img src="assets/ring.png" alt="Marriage Match">
+      <h3>Marriage Match</h3>
+      <p>Find the right life partner, beyond surface-level details.</p>
+      <p>This analyzes values, habits, and personality traits such as analytical, organized, decisive, and creative.</p>
+      <p>Understand true compatibility.</p>
+      <p>See strengths and differences clearly.</p>
+      <p>Make informed decisions for a lasting relationship.</p>
+    </div>
+    <div class="card">
+      <img src="assets/Hiring.png" alt="Interview & Hiring Match">
+      <h3>Interview & Hiring Match</h3>
+      <p>Recruit with confidence, powered by science.</p>
+      <p>Spot hidden strengths and leadership potential.</p>
+      <p>Match candidates to roles where they'll thrive.</p>
+      <p>Build balanced, high-performing teams.</p>
+    </div>
+    <div class="card">
+      <img src="assets/business.png" alt="Business Partner Match">
+      <h3>Business Partner Match</h3>
+      <p>Choose partners who complement your strengths.</p>
+      <p>Identify complementary skills and leadership styles.</p>
+      <p>Reduce risks of conflict in decision-making.</p>
+      <p>Build stronger, trust-based collaborations.</p>
+    </div>
+  </section>
+
+  <!-- Special Content + Bottom CTA -->
+  <section class="special-content" aria-labelledby="specialTitle">
+    <div class="card special-card">
+      <h2 id="specialTitle">Why Py-Match is Special?</h2>
+      <p>
+        <strong>Py-Match</strong> isn't just about data — it's about people.
+        Using cutting-edge technology and psychology-based personality models, <strong>Py-Match</strong> decodes human compatibility.
+        Whether in love, business, or recruitment, <strong>Py-Match</strong> gives you clarity and confidence.
+        It's science made simple, to help you make life's most important decisions wisely.
+      </p>
+      <div class="secondaryCard">
+        <h3 class="cta-bottom__title">Have a question or need guidance?</h3>
+        <p class="cta-bottom__text">Contact us — we’re happy to assist you on your journey.</p>
+        <button>Contact Us</button>
+      </div>
+    </div>
 
-  <!-- AUTH MODAL OVERLAY (unchanged) -->
+    <!--<div class="cta-bottom" *ngIf="!isSignedIn">
+    </div>-->
+    <div class="cta-bottom" *ngIf="isSignedIn">
+      <h3 class="cta-bottom__title">Ready to continue matching?</h3>
+      <p class="cta-bottom__text">Jump back in and explore intelligent compatibility insights.</p>
+      <a class="btn btn-secondary cta-bottom__btn" [routerLink]="['/matchinglist', userId]" [class.disabled]="!canMatch" [attr.aria-disabled]="!canMatch ? true : null">Continue Matching</a>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="site-footer" role="contentinfo">
+    <p class="site-footer__copy">© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+    <div class="site-footer__row">
+      <nav class="site-footer__links" aria-label="Footer navigation">
+        <a href="#" (click)="$event.preventDefault(); openPrivacyModal();">Privacy Policy</a>
+        <a href="https://pykara.net/" target="_blank" rel="noopener">About Us</a>
+        <a href="https://pykara.net/contact-us/" target="_blank" rel="noopener">Contact</a>
+        <a href="#" (click)="$event.preventDefault(); openTermsModal();">Terms & Conditions</a>
+      </nav>
+      <div class="site-footer__social" aria-label="Social media">
+        <a href="https://www.facebook.com/profile.php?id=100087653675803" target="_blank" rel="noopener" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
+        <a href="https://www.youtube.com/@PykaraTechnologies" target="_blank" rel="noopener" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
+        <a href="https://www.linkedin.com/in/pykara-technologies" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
+        <a href="https://www.instagram.com/pykaratechnologie/" target="_blank" rel="noopener" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
+      </div>
+    </div>
+  </footer>
+
+  <!-- AUTH MODAL -->
   <div class="modal-backdrop" *ngIf="modal" (click)="backdropClick($event)">
     <div class="modal-panel modal-panel--white"
          role="dialog"
@@ -74,13 +196,12 @@
                    (signInSuccess)="handleSignInSuccess()"></app-sign-in>
       <app-sign-up *ngIf="modal === 'signup'"
                    (switchToSignIn)="openSignIn()"
-                   (signUpSuccess)="handleSignUpSuccess()"></app-sign-up> <!-- Add this line -->
+                   (signUpSuccess)="handleSignUpSuccess()"></app-sign-up>
     </div>
   </div>
 
-  <!-- ABOUT MODAL OVERLAY (new) -->
+  <!-- ABOUT MODAL (restyled to match Privacy Policy modal) -->
   <div class="about-backdrop" *ngIf="isAboutOpen" (click)="closeAbout()" tabindex="-1"></div>
-
   <div class="about-modal"
        *ngIf="isAboutOpen"
        role="dialog"
@@ -89,147 +210,83 @@
        id="aboutDialog"
        tabindex="-1">
     <div class="about-modal__header">
-      <h2 id="aboutTitle">About Py-Match</h2>
-      <button class="about-close" (click)="closeAbout()" aria-label="Close dialog">×</button>
+      <h2 id="aboutTitle" class="about-modal__title">About Py-Match</h2>
+      <button class="about-modal__close" (click)="closeAbout()" aria-label="Close dialog">×</button>
     </div>
-
     <div class="about-modal__body">
-      <h1>Your Ideal Match Awaits</h1>
+      <p><strong>Your Ideal Match Awaits</strong></p>
       <p><strong>Py-Match</strong> is an advanced personality assessment tool designed to help individuals find the ideal match based on their core personality traits. The system uses a series of adaptive questions that are tailored to each user's profile. Each response is mapped to one of four core personality profiles, which represent different dominant behavioral tendencies. As users progress through the assessment, the platform continuously adapts, ensuring that the questions remain relevant and engaging, ultimately providing a more accurate personality profile.</p>
-
       <p>The primary goal of <strong>Py-Match</strong> is to offer data-driven, personalized matches for various scenarios such as marriage compatibility, business partnerships, and leadership fit. By comparing the individual's personality profile to role-specific templates, the platform ensures that the match is based on both complementary and compatible traits. This sophisticated matching engine provides an in-depth, personalized experience while maintaining strict privacy standards. With a focus on both accuracy and user confidentiality, <strong>Py-Match</strong> guarantees that sensitive information is securely stored, offering users peace of mind while they explore the platform's potential.</p>
     </div>
+    <div class="about-modal__footer">
+      <button class="about-modal__btn" (click)="closeAbout()">Close</button>
+    </div>
   </div>
 
-</section>
-
-<!-- Cards Section -->
-<section class="cards">
-  <div class="card">
-    <img src="assets/ring.png" alt="Marriage Match">
-    <h3><b>Marriage Match</b></h3>
-    <p>
-      Find the right life partner, beyond surface-level details.<br>
-      This analyzes values, habits, and personality traits such as analytical, organized, decisive, and creative.<br>
-      Understand true compatibility.<br>
-      See strengths and differences clearly.<br>
-      Make informed decisions for a lasting relationship.
-    </p>
-  </div>
-  <div class="card">
-    <img src="assets/Hiring.png" alt="Interview & Hiring Match">
-    <h3><b>Interview & Hiring Match</b></h3>
-    <p>
-      Recruit with confidence, powered by science.<br>
-      Spot hidden strengths and leadership potential.<br>
-      Match candidates to roles where they'll thrive.<br>
-      Build balanced, high-performing teams.
-    </p>
-  </div>
-  <div class="card">
-    <img src="assets/business.png" alt="Business Partner Match">
-    <h3><b>Business Partner Match</b></h3>
-    <p>
-      Choose partners who complement your strengths.<br>
-      Identify complementary skills and leadership styles.<br>
-      Reduce risks of conflict in decision-making.<br>
-      Build stronger, trust-based collaborations.
-    </p>
+  <!-- Privacy Policy Modal (styled like About modal) -->
+  <div class="about-backdrop" *ngIf="showPrivacyModal" (click)="closePrivacyModal()" tabindex="-1"></div>
+  <div class="about-modal"
+       *ngIf="showPrivacyModal"
+       role="dialog"
+       aria-modal="true"
+       aria-labelledby="privacyTitle"
+       id="privacyDialog"
+       tabindex="-1">
+    <div class="about-modal__header">
+      <h2 id="privacyTitle" class="about-modal__title">Privacy Policy</h2>
+      <button class="about-modal__close" (click)="closePrivacyModal()" aria-label="Close dialog">×</button>
+    </div>
+    <div class="about-modal__body">
+      <p><strong>Py-Match Privacy Policy</strong></p>
+      <p>Your privacy is important to us. Py-Match securely stores your data and only uses it for personality assessment and matching purposes. We do not sell or share your personal information with third parties. All responses are encrypted and handled according to strict privacy standards. You can request deletion of your data at any time by contacting support.</p>
+      <ul>
+        <li>We collect only the information necessary for matching and assessment.</li>
+        <li>Your data is never sold or shared outside Py-Match.</li>
+        <li>All communications are encrypted and confidential.</li>
+        <li>You may request data deletion at any time.</li>
+      </ul>
+      <p>By using Py-Match, you agree to our privacy practices. For questions, contact support@pykara.net.</p>
+    </div>
+    <div class="about-modal__footer">
+      <button class="about-modal__btn" (click)="acceptPrivacyPolicy()">Accept Privacy Policy</button>
+    </div>
   </div>
-</section>
 
-<!-- Scrolling Images -->
-<div class="scroll-container">
-  <div class="scroll-images">
-    <!-- Sequence A -->
-    <img src="assets/small-img/1.png" alt="smallImage">
-    <img src="assets/small-img/2.png" alt="smallImage">
-    <img src="assets/small-img/3.png" alt="smallImage">
-    <img src="assets/small-img/4.png" alt="smallImage">
-    <img src="assets/small-img/5.png" alt="smallImage">
-    <img src="assets/small-img/6.png" alt="smallImage">
-    <img src="assets/small-img/7.png" alt="smallImage">
-    <img src="assets/small-img/8.png" alt="smallImage">
-    <img src="assets/small-img/9.png" alt="smallImage">
-    <img src="assets/small-img/10.png" alt="smallImage">
-    <img src="assets/small-img/11.png" alt="smallImage">
-    <img src="assets/small-img/12.png" alt="smallImage">
-    <img src="assets/small-img/13.png" alt="smallImage">
-    <img src="assets/small-img/14.png" alt="smallImage">
-    <img src="assets/small-img/15.png" alt="smallImage">
-    <img src="assets/small-img/16.png" alt="smallImage">
-    <img src="assets/small-img/17.png" alt="smallImage">
-    <img src="assets/small-img/18.png" alt="smallImage">
-    <img src="assets/small-img/19.png" alt="smallImage">
-    <img src="assets/small-img/20.png" alt="smallImage">
-    <img src="assets/small-img/21.png" alt="smallImage">
-    <img src="assets/small-img/22.png" alt="smallImage">
-    <img src="assets/small-img/24.png" alt="smallImage">
-    <img src="assets/small-img/26.png" alt="smallImage">
-    <img src="assets/small-img/28.png" alt="smallImage">
-    <!-- Sequence B (duplicate for seamless loop) -->
-    <img src="assets/small-img/1.png" alt="smallImage">
-    <img src="assets/small-img/2.png" alt="smallImage">
-    <img src="assets/small-img/3.png" alt="smallImage">
-    <img src="assets/small-img/4.png" alt="smallImage">
-    <img src="assets/small-img/5.png" alt="smallImage">
-    <img src="assets/small-img/6.png" alt="smallImage">
-    <img src="assets/small-img/7.png" alt="smallImage">
-    <img src="assets/small-img/8.png" alt="smallImage">
-    <img src="assets/small-img/9.png" alt="smallImage">
-    <img src="assets/small-img/10.png" alt="smallImage">
-    <img src="assets/small-img/11.png" alt="smallImage">
-    <img src="assets/small-img/12.png" alt="smallImage">
-    <img src="assets/small-img/13.png" alt="smallImage">
-    <img src="assets/small-img/14.png" alt="smallImage">
-    <img src="assets/small-img/15.png" alt="smallImage">
-    <img src="assets/small-img/16.png" alt="smallImage">
-    <img src="assets/small-img/17.png" alt="smallImage">
-    <img src="assets/small-img/18.png" alt="smallImage">
-    <img src="assets/small-img/19.png" alt="smallImage">
-    <img src="assets/small-img/20.png" alt="smallImage">
-    <img src="assets/small-img/21.png" alt="smallImage">
-    <img src="assets/small-img/22.png" alt="smallImage">
-    <img src="assets/small-img/24.png" alt="smallImage">
-    <img src="assets/small-img/26.png" alt="smallImage">
-    <img src="assets/small-img/28.png" alt="smallImage">
+  <!-- Terms & Conditions Modal (styled like About modal) -->
+  <div class="about-backdrop" *ngIf="showTermsModal" (click)="closeTermsModal()" tabindex="-1"></div>
+  <div class="about-modal"
+       *ngIf="showTermsModal"
+       role="dialog"
+       aria-modal="true"
+       aria-labelledby="termsTitle"
+       id="termsDialog"
+       tabindex="-1">
+    <div class="about-modal__header">
+      <h2 id="termsTitle" class="about-modal__title">Terms & Conditions</h2>
+      <button class="about-modal__close" (click)="closeTermsModal()" aria-label="Close dialog">×</button>
+    </div>
+    <div class="about-modal__body">
+      <p><strong>Py-Match Terms & Conditions</strong></p>
+      <ul>
+        <li>By using Py-Match, you agree to provide accurate information for assessments and matching.</li>
+        <li>Py-Match is intended for personal, business, and recruitment use only. Misuse or unauthorized access is prohibited.</li>
+        <li>All intellectual property, including algorithms, content, and branding, belongs to Pykara Technologies Pvt. Ltd.</li>
+        <li>Py-Match does not guarantee match outcomes; results are based on provided data and scientific models.</li>
+        <li>Users are responsible for maintaining the confidentiality of their login credentials.</li>
+        <li>Py-Match reserves the right to update these terms at any time. Continued use constitutes acceptance of changes.</li>
+        <li>For questions or concerns, contact support@pykara.net.</li>
+      </ul>
+      <p>By continuing to use Py-Match, you acknowledge and accept these terms and conditions.</p>
+    </div>
+    <div class="about-modal__footer">
+      <button class="about-modal__btn" (click)="closeTermsModal()">Close</button>
+    </div>
   </div>
-</div>
 
-<!-- Special Content as Card -->
-<section class="special-content">
-  <div class="card special-card">
-    <h3><b>Why Py-Match is Special?</b></h3>
-    <p>
-      <strong>Py-Match</strong> isn't just about data — it's about people.<br>
-      Using cutting-edge technology and psychology-based personality models, <strong>Py-Match</strong> decodes human compatibility.<br>
-      Whether in love, business, or recruitment, <strong>Py-Match</strong> gives you clarity and confidence.<br>
-      It's science made simple, to help you make life's most important decisions wisely.
-    </p>
+  <!-- Loader Overlay (same as llm-quiz) -->
+  <div class="loader-overlay" *ngIf="isLoading">
+    <div class="loader-container">
+      <img src="assets/Loader.gif" alt="Loading..." class="loader-gif" />
+    </div>
   </div>
 </section>
-
-<!-- Footer (now fixed) -->
-<footer>
-  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
-  <div class="footer-links">
-    <a href="#">About Us</a> |
-    <a href="#">Contact</a> |
-    <a href="#">Privacy Policy</a> |
-    <a href="#">Terms & Conditions</a>
-  </div>
-  <div class="social-icons">
-    <a href="#" class="social-icon facebook" aria-label="Facebook">
-      <i class="fab fa-facebook-f"></i>
-    </a>
-    <a href="#" class="social-icon youtube" aria-label="YouTube">
-      <i class="fab fa-youtube"></i>
-    </a>
-    <a href="#" class="social-icon linkedin" aria-label="LinkedIn">
-      <i class="fab fa-linkedin-in"></i>
-    </a>
-    <a href="#" class="social-icon instagram" aria-label="Instagram">
-      <i class="fab fa-instagram"></i>
-    </a>
-  </div>
-</footer>

src/app/intro-page/intro-page.component.ts

@@ -1,8 +1,10 @@
-import { Component, ChangeDetectionStrategy, HostListener, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, OnInit, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
 import { SignInComponent } from '../auth/sign-in/sign-in.component';
 import { SignUpComponent } from '../auth/sign-up/sign-up.component';
+import { SignupService } from '../auth/sign-up/sign-up.service';
 
 type AuthModal = 'signin' | 'signup' | null;
 
@@ -14,12 +16,87 @@ type AuthModal = 'signin' | 'signup' | null;
   styleUrls: ['./intro-page.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class IntroPageComponent {
+export class IntroPageComponent implements OnInit {
   modal: AuthModal = null;
   isSignedIn = false;
   isAboutOpen = false;
+  canMatch: boolean = false;
+  userId: number | null = null;
+  showMarriageSubnav = false;
+  showPrivacyModal = false;
+  privacyAccepted = false;
+  showTermsModal = false;
+  isLoading = false;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private signupService: SignupService,
+    private router: Router,
+    private http: HttpClient
+  ) { }
+
+  ngOnInit(): void {
+    window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+    this.userId = this.signupService.getUserId();
+    if (this.userId) {
+      // Check if the user has completed LLM questions
+      this.http.get(`http://127.0.0.1:5000/api/match/${this.userId}?role=marriage`)
+        .subscribe({
+          next: () => {
+            this.canMatch = true;
+            this.cdr.markForCheck();
+          },
+          error: () => {
+            this.canMatch = false;
+            this.cdr.markForCheck();
+          }
+        });
+    }
+    // Only check if accepted, do not show modal automatically
+    this.privacyAccepted = localStorage.getItem('privacyAccepted') === 'true';
+  }
+
+  // --- Marriage Sub Navigation Methods ---
+  toggleMarriageSubnav(): void {
+    this.showMarriageSubnav = !this.showMarriageSubnav;
+    this.cdr.markForCheck();
+  }
+
+  hideMarriageSubnav(): void {
+    this.showMarriageSubnav = false;
+    this.cdr.markForCheck();
+  }
+
+  navigateToProfile(): void {
+    const userId = localStorage.getItem('user_id');
+    if (!userId) {
+      alert('Please sign in first.');
+      return;
+    }
+
+    this.router.navigate(['/question-answer'], { queryParams: { role: 'marriage' } });
+    this.showMarriageSubnav = false;
+  }
+
+  navigateToExpectations(): void {
+    this.showMarriageSubnav = false;
+    this.router.navigate(['/userPreference']);
+  }
+  
+    navigateToAssessment(): void {
+      this.showMarriageSubnav = false;
+      this.router.navigate(['/llmquiz']);
+    }
+
+  navigateToMatchingProfile(): void {
+    this.showMarriageSubnav = false;
+      this.router.navigate(['/matchinglist']);
+    }
+    //} else {
+    //  alert('User ID not found. Please sign in first.');
+    //}
+  //}
 
-  constructor(private cdr: ChangeDetectorRef) { }
   // --- Auth modal handlers ---
   openSignIn(): void {
     this.modal = 'signin';
@@ -37,25 +114,19 @@ export class IntroPageComponent {
     this.cdr.markForCheck();
   }
 
-
-  // Called by child components on success
   handleSignInSuccess(): void {
     this.isSignedIn = true;
     this.closeModal();
   }
 
-  // Handle sign-up success - switch to sign-in modal
   handleSignUpSuccess(): void {
-    // Close sign-up and open sign-in
     this.modal = 'signin';
-    // You can optionally show a success message here
     alert('Sign up successful! Please sign in to continue.');
     this.cdr.markForCheck();
   }
 
   signOut(): void {
     this.isSignedIn = false;
-    // Clear any persisted auth if used later
     localStorage.removeItem('auth_token');
     this.cdr.markForCheck();
   }
@@ -70,41 +141,96 @@ export class IntroPageComponent {
   openAbout(): void {
     this.isAboutOpen = true;
     document.body.style.overflow = 'hidden';
-    // Move focus into the dialog for accessibility
     setTimeout(() => document.getElementById('aboutDialog')?.focus(), 0);
     this.cdr.markForCheck();
   }
 
   closeAbout(): void {
     this.isAboutOpen = false;
-    // If Auth is also open, keep scroll locked. Otherwise restore.
     if (!this.modal) document.body.style.overflow = '';
     this.cdr.markForCheck();
   }
 
-  // --- Global ESC handler closes whichever is open ---
+  openPrivacyModal(): void {
+    this.showPrivacyModal = true;
+    this.cdr.markForCheck();
+  }
+
+  closePrivacyModal(): void {
+    this.showPrivacyModal = false;
+    this.cdr.markForCheck();
+  }
+
+  acceptPrivacyPolicy(): void {
+    localStorage.setItem('privacyAccepted', 'true');
+    this.privacyAccepted = true;
+    this.closePrivacyModal();
+  }
+
+  openTermsModal(): void {
+    this.showTermsModal = true;
+    this.cdr.markForCheck();
+  }
+
+  closeTermsModal(): void {
+    this.showTermsModal = false;
+    this.cdr.markForCheck();
+  }
+
   @HostListener('document:keydown.escape')
   onEsc(): void {
     if (this.modal) this.closeModal();
     else if (this.isAboutOpen) this.closeAbout();
+    else if (this.showMarriageSubnav) this.hideMarriageSubnav();
   }
-  scrollToContent() {
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    // Close subnav when clicking outside
+    if (this.showMarriageSubnav) {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.nav-item-wrapper')) {
+        this.hideMarriageSubnav();
+      }
+    }
+  }
+
+  scrollToContent(): void {
     const element = document.getElementById('content-sections');
     if (element) {
       element.scrollIntoView({ behavior: 'smooth' });
     }
   }
-  // Your existing i18n helper, keep as-is if already present:
+
+  selectRole(role: string): void {
+    const userId = localStorage.getItem('user_id');
+    if (!userId) {
+      alert('Please sign in first.');
+      return;
+    }
+
+    this.signupService.assignRole(+userId, role).subscribe({
+      next: (res) => {
+        console.log('Role saved:', res);
+        this.router.navigate(['/question-answer'], { queryParams: { role } });
+      },
+      error: (err) => {
+        console.error('Role assign failed:', err);
+        alert('Failed to assign role.');
+      }
+    });
+  }
+
+  // i18n helper
   tr(key: string): string {
     const dict = {
       brand: 'Py-Match',
       signup: 'Sign up',
       signin: 'Sign in',
-      tagline: 'Smarter matches, powered by personality science.',
+      tagline: 'Smarter matches,<br><span class="tagline-line2">powered by personality science.</span>',
       subtext: 'Discover compatibility in love, business, and careers with AI-driven personality insights.',
-      /*      getStarted: 'Get started',*/
       exploreFeatures: 'Explore our features below'
-    };
-    return dict[key as keyof typeof dict] ?? key;
+    } as const;
+    return (dict as Record<string, string>)[key] ?? key;
   }
 }

src/app/llm-quiz/llm-quiz.component.css

@@ -1,274 +1,732 @@
-/*.quiz-wrap {
-  max-width: 880px;
-  margin: 20px auto;
-  padding: 12px;
-  font-family: system-ui, Arial, sans-serif;
+/*[file name]: llm-quiz.component.css
+[file content begin]*/
+/* Enhanced brain-themed UI */
+:host {
+  display: block;
+  min-height: 100vh;
+  background: 
+    radial-gradient(circle at 15% 20%, rgba(45, 75, 120, 0.8) 0%, transparent 40%),
+    radial-gradient(circle at 85% 80%, rgba(120, 75, 180, 0.6) 0%, transparent 40%),
+    radial-gradient(circle at 50% 50%, rgba(30, 45, 75, 1) 0%, #121a23 100%);
+  background-attachment: fixed;
+  position: relative;
+  overflow-x: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Neural network background animation */
+.brain-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.4;
 }
 
-h2 {
-  margin: 0 0 12px;
+.neuron {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #f3a54c, #e67e22);
+  box-shadow: 0 0 12px 4px rgba(243, 165, 76, 0.7);
+  animation: neuronPulse 3s ease-in-out infinite;
 }
 
-.panel, .qcard, .result {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 12px;
-  background: #fff;
-  margin-bottom: 14px;
+.neuron-connection {
+  position: absolute;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(243, 165, 76, 0.6), transparent);
+  transform-origin: left center;
+  animation: connectionFlow 4s linear infinite;
 }
 
-.row {
+@keyframes neuronPulse {
+  0%, 100% { transform: scale(1); opacity: 0.7; }
+  50% { transform: scale(1.3); opacity: 1; }
+}
+
+@keyframes connectionFlow {
+  0% { opacity: 0; transform: scaleX(0); }
+  50% { opacity: 0.8; transform: scaleX(1); }
+  100% { opacity: 0; transform: scaleX(0); }
+}
+
+/* Enhanced topbar with brain theme */
+.quiz-topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 14px 38px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(18, 26, 35, 0.9);
+  backdrop-filter: blur(12px);
+  z-index: 2000;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(243, 165, 76, 0.2);
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  user-select: none;
+  transition: transform 0.3s ease;
+}
+
+.brand:hover {
+  transform: translateY(-2px);
+}
+
+.brand__logo-img {
+  background: linear-gradient(135deg, #f3a54c, #e67e22);
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  padding: 6px;
+  box-shadow: 0 4px 15px rgba(243, 165, 76, 0.4);
+  transition: all 0.3s ease;
+}
+
+.brand__name {
+  letter-spacing: 2px;
+  color: #ffffff;
+  font-size: 28px;
+  font-weight: 300;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.brand__name strong {
+  color: #f3a54c;
+  font-weight: 400;
+}
+
+.top-progress {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 10px;
+  color: #f0f0f0;
 }
 
-  .row.column {
-    flex-direction: column;
-    align-items: stretch;
-  }
+.tp-label {
+  font-size: 14px;
+  font-weight: 500;
+}
 
-  .row label {
-    width: 180px;
-    font-weight: 600;
-  }
+.tp-track {
+  width: 120px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
 
-  .row input[type="number"], .row select, textarea {
-    flex: 1;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-  }
+.tp-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #f3a54c, #e67e22);
+  border-radius: 3px;
+  transition: width 0.5s ease;
+}
 
-.actions {
+/* Brain-themed hero section */
+.quiz-hero {
+  max-width: 880px;
+  margin: 100px auto 30px;
+  padding: 50px 40px;
+  background: 
+    radial-gradient(circle at 20% 30%, rgba(243, 165, 76, 0.15) 0%, transparent 50%),
+    linear-gradient(135deg, rgba(30, 42, 60, 0.9) 0%, rgba(40, 55, 80, 0.9) 100%);
+  border-radius: 24px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.4),
+    0 8px 24px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(243, 165, 76, 0.2);
+  color: #f5f8fb;
+  text-align: center;
+}
+
+.quiz-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: 
+    radial-gradient(circle at 70% 20%, rgba(243, 165, 76, 0.25) 0%, transparent 40%),
+    radial-gradient(circle at 30% 80%, rgba(120, 75, 180, 0.2) 0%, transparent 40%);
+  mix-blend-mode: overlay;
+  z-index: 1;
+}
+
+.hero-inner {
+  position: relative;
+  z-index: 2;
   display: flex;
-  gap: 10px;
-  margin-top: 8px;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
 }
 
-  .actions button {
-    padding: 8px 14px;
-    border: 0;
-    border-radius: 6px;
-    background: #111827;
-    color: #fff;
-    cursor: pointer;
-  }
+.hero-icon {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #f3a54c, #e67e22);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 46px;
+  color: #1e2532;
+  box-shadow: 
+    0 10px 30px rgba(243, 165, 76, 0.5),
+    0 0 0 4px rgba(243, 165, 76, 0.2);
+  animation: iconFloat 4s ease-in-out infinite;
+}
 
-    .actions button[disabled] {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
+@keyframes iconFloat {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-10px) rotate(5deg); }
+}
+
+.hero-title {
+  margin: 0;
+  font-size: clamp(36px, 4vw, 48px);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.hero-title .fa-brain {
+  color: #f3a54c;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
+  animation: brainPulse 2s ease-in-out infinite;
+}
+
+@keyframes brainPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+.hero-sub {
+  margin: 0;
+  max-width: 680px;
+  font-size: clamp(1rem, 1.1vw, 1.1rem);
+  line-height: 1.6;
+  opacity: 0.9;
+  font-weight: 400;
+}
+
+/* Enhanced quiz container */
+.quiz {
+    position: absolute;
+    z-index: 2;
+    width: 80%;
+    margin: 0 auto 40px;
+    background: rgba(255, 255, 255, 0.88);
+    -webkit-backdrop-filter: blur(15px);
+    backdrop-filter: blur(15px);
+    border-radius: 20px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.15);
+    padding: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Enhanced cards with brain-inspired design */
+.question-card, .result, .panel {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  box-shadow: 
+    0 8px 24px rgba(0, 0, 0, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04);
+  padding: 28px;
+  margin-bottom: 24px;
+  border: 1px solid rgba(243, 165, 76, 0.1);
+  animation: cardAppear 0.5s ease-out;
+  position: relative;
+  overflow: hidden;
+}
+
+.question-card::before, .result::before, .panel::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #f3a54c, #e67e22, #f3a54c);
+  background-size: 200% 100%;
+  animation: shimmer 3s ease-in-out infinite;
+}
 
-.error {
-  color: #b91c1c;
-  margin-top: 8px;
+@keyframes cardAppear {
+  from { opacity: 0; transform: translateY(20px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-.loading {
-  margin-top: 10px;
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }
 
-.meta {
+/* Question styling */
+.q-meta {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 8px;
-  color: #374151;
-  font-size: 13px;
+  align-items: center;
+  margin-bottom: 16px;
+  color: #666;
+  font-size: 0.9rem;
 }
 
-.question {
-  font-size: 18px;
-  font-weight: 700;
-  margin-bottom: 10px;
+.q-count {
+  font-weight: 600;
+  color: #2C3E50;
+  background: rgba(243, 165, 76, 0.1);
+  padding: 6px 12px;
+  border-radius: 20px;
+}
+
+.q-role .badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: linear-gradient(135deg, rgba(243, 165, 76, 0.15), rgba(230, 126, 34, 0.1));
+  color: #e67e22;
+  border: 1px solid rgba(230, 126, 34, 0.3);
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.q-text {
+  font-size: 1.7rem;
+  font-weight: 600;
+  margin: 20px 0;
+  line-height: 1.4;
+  color: #2C3E50;
+  text-align: center;
+}
+
+.q-brain {
+  color: #f3a54c;
+  margin-right: 10px;
+  animation: thoughtBubble 2s ease-in-out infinite;
+}
+
+@keyframes thoughtBubble {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  25% { transform: scale(1.1) rotate(5deg); }
+  75% { transform: scale(1.1) rotate(-5deg); }
 }
 
+/* Enhanced options with brain-inspired colors */
 .options {
   display: grid;
-  gap: 8px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin: 24px 0;
+}
+
+.option {
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.option:hover {
+  transform: translateY(-3px);
+}
+
+.option input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.opt-text {
+  display: block;
+  padding: 20px;
+  border: 2px solid #e2e7ee;
+  border-radius: 12px;
+  background: #fbfcfe;
+  color: #2C3E50;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.opt-text::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(243, 165, 76, 0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.option:hover .opt-text::before {
+  left: 100%;
+}
+
+.option input:checked + .opt-text {
+  border-color: #f3a54c;
+  background: rgba(243, 165, 76, 0.05);
+  box-shadow: 0 4px 12px rgba(243, 165, 76, 0.2);
+  transform: scale(1.02);
 }
 
-.opt {
+/* Color chips for options */
+.color-chip {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  margin-right: 10px;
+  display: inline-block;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  vertical-align: middle;
+}
+
+/* Enhanced buttons */
+.actions {
+  margin-top: 24px;
   display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+button {
+  padding: 14px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
-  padding: 8px;
-  border: 1px solid #eee;
-  border-radius: 6px;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  position: relative;
+  overflow: hidden;
 }
 
-  .opt input {
-    transform: scale(1.1);
-  }
+button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.5s ease;
+}
 
-.badge {
-  display: inline-block;
-  padding: 3px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  color: #fff;
+button:hover::before {
+  left: 100%;
 }
 
-  .badge.blue {
-    background: #2563eb;
-  }
+button:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
 
-  .badge.green {
-    background: #059669;
-  }
+button.primary, button.submit-btn {
+  background: linear-gradient(135deg, #f3a54c, #e67e22);
+  color: white;
+  flex: 1;
+}
 
-  .badge.red {
-    background: #dc2626;
-  }
+button.primary:hover, button.submit-btn:hover {
+  background: linear-gradient(135deg, #ffb347, #e67e22);
+  transform: translateY(-2px);
+}
 
-  .badge.yellow {
-    background: #d97706;
-  }
+button[disabled] {
+  background: #cfd8e3;
+  color: #6b7280;
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
 
-.mix, .result {
-  margin-top: 14px;
+button[disabled]::before {
+  display: none;
+}
+
+/* Enhanced progress bars */
+.progress {
+  margin: 24px 0;
 }
 
 .bar {
   display: grid;
-  grid-template-columns: 90px 1fr 48px;
+  grid-template-columns: 140px 1fr 60px;
   align-items: center;
-  gap: 8px;
-  margin: 6px 0;
+  gap: 14px;
+  margin: 14px 0;
 }
 
 .bar-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
   font-weight: 600;
+  color: #2C3E50;
+  text-transform: capitalize;
 }
 
-.bar-track {
-  height: 10px;
-  background: #f3f4f6;
-  border-radius: 999px;
-  overflow: hidden;
-}
+/* Strengthened specificity for dimension colors */
+.progress .bar .bar-label.dim-blue, .result .bar .bar-label.dim-blue { color:#2980b9 !important; }
+.progress .bar .bar-label.dim-green, .result .bar .bar-label.dim-green { color:#1d7f44 !important; }
+.progress .bar .bar-label.dim-red, .result .bar .bar-label.dim-red { color:#b93528 !important; }
+.progress .bar .bar-label.dim-yellow, .result .bar .bar-label.dim-yellow { color:#b56a00 !important; }
 
-.bar-fill {
-  height: 100%;
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-  .bar-fill.blue {
-    background: #93c5fd;
-  }
-
-  .bar-fill.green {
-    background: #86efac;
-  }
+.dot.blue { background:#3498db; }
+.dot.green { background:#2ecc71; }
+.dot.red { background:#e74c3c; }
+.dot.yellow { background:#f1c40f; }
 
-  .bar-fill.red {
-    background: #fca5a5;
-  }
-
-  .bar-fill.yellow {
-    background: #fde68a;
-  }
+/* Add missing bar-fill color classes */
+.bar-fill.blue { background:linear-gradient(90deg,#5dade2,#2e86c1); }
+.bar-fill.green { background:linear-gradient(90deg,#58d68d,#239b56); }
+.bar-fill.red { background:linear-gradient(90deg,#ec7063,#cb4335); }
+.bar-fill.yellow { background:linear-gradient(90deg,#f8c471,#d68910); }
 
-.bar-val {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
+/* Fallback if gradient not supported */
+@supports not (background:linear-gradient(red,blue)) {
+  .bar-fill.blue { background:#2e86c1; }
+  .bar-fill.green { background:#239b56; }
+  .bar-fill.red { background:#cb4335; }
+  .bar-fill.yellow { background:#d68910; }
 }
-*/
 
+/* Enhanced results section */
+.result h2 {
+  color: #2C3E50;
+  text-align: center;
+  margin-bottom: 24px;
+  font-size: 2rem;
+}
 
-.panel {
-  padding: 12px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  margin-bottom: 16px;
+.result-sub {
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 1.1rem;
+  color: #666;
 }
 
-.row {
-  display: flex;
-  gap: 8px;
+.pill {
+  display: inline-flex;
   align-items: center;
-  margin: 8px 0;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-weight: 600;
+  text-transform: capitalize;
 }
 
-  .row label {
-    width: 160px;
-  }
+.pill-blue { background: rgba(52, 152, 219, 0.15); color: #2980b9; }
+.pill-green { background: rgba(46, 204, 113, 0.15); color: #27ae60; }
+.pill-red { background: rgba(231, 76, 60, 0.15); color: #c0392b; }
+.pill-yellow { background: rgba(241, 196, 15, 0.15); color: #d35400; }
 
-.actions {
-  margin-top: 12px;
-  display: flex;
-  gap: 8px;
+.dom-desc {
+  text-align: center;
+  font-size: 1.1rem;
+  font-style: italic;
+  color: #7f8c8d;
+  margin-bottom: 30px;
+  padding: 16px;
+  background: rgba(243, 165, 76, 0.05);
+  border-radius: 12px;
+  border-left: 4px solid #f3a54c;
 }
 
+/* Loader overlay */
 .loader-overlay {
   position: fixed;
   inset: 0;
+  background: rgba(12, 18, 28, 0.7);
   display: grid;
   place-items: center;
-  background: rgba(0,0,0,0.08);
+  z-index: 9999;
+  backdrop-filter: blur(5px);
 }
 
-.question-card {
-  padding: 16px;
-  border: 1px solid #eee;
-  border-radius: 8px;
-}
+.loader-container { text-align:center; }
+.loader-gif { width: 50%; height: 50%; }
+/* Keep spinner styles in case referenced elsewhere */
+.loader { display:none; }
+.spinner { display:none; }
 
-.q-meta {
-  display: flex;
-  gap: 16px;
-  color: #666;
-  margin-bottom: 8px;
+/* Form elements in panel */
+.panel {
+  text-align: center;
 }
 
-.q-text {
-  margin: 8px 0 16px;
+.panel-title {
+  color: #2C3E50;
+  margin-bottom: 16px;
+  font-size: 1.8rem;
 }
 
-.options {
-  display: grid;
-  gap: 8px;
+.panel-hint {
+  color: #666;
+  margin-bottom: 28px;
+  line-height: 1.5;
 }
 
-.option {
+.row {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.opt-color {
-  color: #888;
-}
-
-.progress, .result {
-  margin-top: 16px;
+  justify-content: space-between;
+  margin-bottom: 18px;
+  text-align: left;
 }
 
-.bar {
-  display: grid;
-  grid-template-columns: 80px 1fr 60px;
-  align-items: center;
-  gap: 8px;
-  margin: 6px 0;
+.row label {
+  font-weight: 600;
+  color: #2C3E50;
+  min-width: 140px;
 }
 
-.bar-track {
-  height: 10px;
-  background: #eee;
-  border-radius: 8px;
-  overflow: hidden;
+.row input, .row select {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid #e2e7ee;
+  border-radius: 10px;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+  background: white;
 }
 
-.bar-fill {
-  height: 100%;
-  background: #7dafff;
+.row input:focus, .row select:focus {
+  outline: none;
+  border-color: #f3a54c;
+  box-shadow: 0 0 0 3px rgba(243, 165, 76, 0.2);
 }
 
-.bar-val {
-  text-align: right;
+/* Watermark */
+/*:host::after {
+  content: "NeuroMatch";
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 2;
+  pointer-events: none;
+  user-select: none;
+  font-weight: 700;
+  font-size: 14px;
+  letter-spacing: 1px;
+  color: rgba(255, 255, 255, 0.7);
+  background: rgba(30, 42, 60, 0.7);
+  backdrop-filter: blur(4px);
+  padding: 8px 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(243, 165, 76, 0.3);
+}*/
+
+/* Responsive design */
+@media (max-width: 900px) {
+  .quiz-hero {
+    padding: 40px 28px;
+    margin-top: 110px;
+  }
+  
+  .hero-icon {
+    width: 80px;
+    height: 80px;
+    font-size: 38px;
+  }
+  
+  .quiz {
+    margin: 0 16px 30px;
+    padding: 24px;
+  }
+  
+  .options {
+    grid-template-columns: 1fr;
+  }
 }
 
-.empty {
-  color: #777;
-  margin-top: 16px;
+@media (max-width: 600px) {
+  .quiz-topbar {
+    padding: 12px 20px;
+  }
+  
+  .brand__logo-img {
+    width: 44px;
+    height: 44px;
+  }
+  
+  .brand__name {
+    font-size: 22px;
+  }
+  
+  .quiz-hero {
+    padding: 30px 20px;
+    margin-top: 90px;
+  }
+  
+  .hero-title {
+    font-size: 28px;
+  }
+  
+  .q-text {
+    font-size: 1.4rem;
+  }
+  
+  .bar {
+    grid-template-columns: 1fr;
+    gap: 8px;
+    text-align: center;
+  }
+  
+  .bar-val {
+    text-align: center;
+  }
+  
+  .row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  
+  .row input, .row select {
+    width: 100%;
+  }
+  
+  .actions {
+    flex-direction: column;
+  }
 }
+/*[file content end]*/

src/app/llm-quiz/llm-quiz.component.html

@@ -1,142 +1,138 @@
-<!-- Control panel -->
-<!--<section class="panel">
-  <div class="row">
-    <label>User ID</label>
-    <input type="text" [(ngModel)]="userId" placeholder="e.g. 1" />
-  </div>
-
-  <div class="row">
-    <label>Role</label>
-    <select [(ngModel)]="role">
-      <option value="interview">interview</option>
-      <option value="marriage">marriage</option>
-      <option value="partnership">partnership</option>
-      <option value="team">team</option>
-      <option value="general">general</option>
-      <option value="assistant">assistant</option>
-      <option value="ceo">ceo</option>
-    </select>
-  </div>
-
-  <div class="row">
-    <label>No. of questions</label>
-    <input type="number" [(ngModel)]="nQuestions" min="1" max="50" />
-  </div>
-
-  <div class="row">
-    <label>Batch size</label>
-    <input type="number" [(ngModel)]="batchSize" min="1" max="20" />
-  </div>
-
-  <div class="actions">
-    <button type="button" (click)="start()" [disabled]="loading">Start</button>
-    <button type="button" (click)="restart()" [disabled]="loading">Reset</button>
-  </div>
-
-  <p class="error" *ngIf="errorMsg">{{ errorMsg }}</p>
-</section>-->
+<!-- Removed local brand header (global top navigation present) -->
+<div class="brain-bg" #brainBg></div>
 
-<!-- Loader -->
+<!-- Loader (updated to match quiz component) -->
 <div class="loader-overlay" *ngIf="loading">
-  <div class="loader">Loading…</div>
+  <div class="loader-container">
+    <img src="assets/Loader.gif" alt="Loading..." class="loader-gif" />
+  </div>
 </div>
 
 <!-- Quiz area -->
 <section class="quiz" *ngIf="!loading">
-
-  <!-- When there is an active question -->
+  <!-- Active question area -->
   <div class="question-card" *ngIf="!isDone && question">
     <div class="q-meta">
-      <div class="q-count">Question {{ index }} / {{ total }}</div>
-      <div class="q-role">Role: {{ role }}</div>
+      <div class="q-count">Neural Query {{ index }} / {{ total }}</div>
+      <div class="q-role">
+        <span class="badge"><i [class]="quizIcon"></i> {{ role | titlecase }} Profile</span>
+      </div>
     </div>
 
-    <h2 class="q-text">{{ question }}</h2>
+    <h2 class="q-text fade-in"><i class="fa-solid fa-brain q-brain"></i> {{ question }}</h2>
 
     <form (ngSubmit)="submitAnswer()">
       <div class="options">
         <label class="option" *ngFor="let opt of options; let i = index">
-          <input type="radio"
-                 name="answer"
-                 [value]="opt.color"
-                 [(ngModel)]="selectedColor"
-                 required />
-          <span class="opt-text">{{ opt.text }}</span>
-          <!--<small class="opt-color">({{ opt.color }})</small>-->
+          <input type="radio" name="answer" [value]="opt.color" [(ngModel)]="selectedColor" required />
+          <span class="opt-text">
+            <span class="color-chip {{opt.color}}"></span>
+            {{ opt.text }}
+          </span>
         </label>
       </div>
-
       <div class="actions">
-        <button type="submit" [disabled]="!selectedColor || loading">Submit</button>
+        <button type="submit" [disabled]="!selectedColor || loading" class="submit-btn">
+          <i class="fa-solid fa-brain"></i> Process Response
+        </button>
+        <button type="button" (click)="restart()" [disabled]="loading">
+          <i class="fa-solid fa-rotate-left"></i> Reset Assessment
+        </button>
       </div>
     </form>
 
-    <!-- In-progress mix (live) -->
-    <!--<div class="progress" *ngIf="inProgressMix">
-      <h3>Current mix</h3>
-      <div class="bar">
-        <span>Blue</span>
-        <div class="bar-track"><div class="bar-fill" [style.width.%]="getInProgressMixValue('blue')"></div></div>
-        <div class="bar-val">{{ asPercent(getInProgressMixValue('blue')) }}%</div>
-      </div>
-
-      <div class="bar">
-        <span>Green</span>
-        <div class="bar-track"><div class="bar-fill" [style.width.%]="getInProgressMixValue('green')"></div></div>
-        <div class="bar-val">{{ asPercent(getInProgressMixValue('green')) }}%</div>
-      </div>
-
-      <div class="bar">
-        <span>Red</span>
-        <div class="bar-track"><div class="bar-fill" [style.width.%]="getInProgressMixValue('red')"></div></div>
-        <div class="bar-val">{{ asPercent(getInProgressMixValue('red')) }}%</div>
-      </div>
+    <div class="inline-progress" *ngIf="total">
+      <div class="ip-track"><div class="ip-fill" [style.width.%]="progressPercent"></div></div>
+      <small class="ip-label">Neural Mapping: {{ progressPercent }}% Complete</small>
+    </div>
 
-      <div class="bar">
-        <span>Yellow</span>
-        <div class="bar-track"><div class="bar-fill" [style.width.%]="getInProgressMixValue('yellow')"></div></div>
-        <div class="bar-val">{{ asPercent(getInProgressMixValue('yellow')) }}%</div>
+    <div class="progress" *ngIf="inProgressMix">
+      <h3><i class="fa-solid fa-network-wired"></i> Current Neural Signature</h3>
+      <div class="bar" *ngFor="let color of ['blue', 'green', 'red', 'yellow']">
+        <span class="bar-label" [ngClass]="'dim-' + color">
+          <span class="dot" [ngClass]="color"></span>
+          {{ getDimensionName(color) }}
+        </span>
+        <div class="bar-track">
+          <div class="bar-fill {{color}}" [style.width.%]="getInProgressMixValue(color)"></div>
+        </div>
+        <div class="bar-val">{{ asPercent(getInProgressMixValue(color)) }}%</div>
       </div>
-    </div>-->
+    </div>
   </div>
 
   <!-- Final result -->
-  <div>DONE</div>
-  <!--<div class="result" *ngIf="isDone && finalMix">
-    <h2>Final result</h2>
-
-    <div class="bar">
-      <span>Blue</span>
-      <div class="bar-track"><div class="bar-fill" [style.width.%]="getFinalMixValue('blue')"></div></div>-->
-      <!--<div class="bar-val">{{ asPercent(getFinalMixValue('blue')) }}%</div>-->
-    <!--</div>
+  <div class="result" *ngIf="isDone && finalMix">
+    <h2 class="fade-in"><i class="fa-solid fa-brain"></i> Neural Profile Complete</h2>
+    <p class="result-sub" *ngIf="dominantColor">
+      Primary Cognitive Pattern: <span class="pill pill-{{dominantColor}}"><i [class]="quizIcon"></i> {{ getDimensionName(dominantColor) }}</span>
+    </p>
+    <p class="dom-desc" *ngIf="dominantDescription">{{ dominantDescription }}</p>
+
+    <div class="bar" *ngFor="let color of ['blue', 'green', 'red', 'yellow']">
+      <span class="bar-label" [ngClass]="'dim-' + color">
+        <span class="dot" [ngClass]="color"></span>
+        {{ getDimensionName(color) }}
+      </span>
+      <div class="bar-track">
+        <div class="bar-fill {{color}}" [style.width.%]="getFinalMixValue(color)"></div>
+      </div>
+      <div class="bar-val">{{ asPercent(getFinalMixValue(color)) }}%</div>
+    </div>
 
-    <div class="bar">
-      <span>Green</span>
-      <div class="bar-track"><div class="bar-fill" [style.width.%]="getFinalMixValue('green')"></div></div>-->
-      <!--<div class="bar-val">{{ asPercent(getFinalMixValue('green')) }}%</div>-->
-    <!--</div>
+    <div class="actions">
+      <button type="button" (click)="restart()" class="primary">
+        <i class="fa-solid fa-arrow-rotate-right"></i> New Assessment
+      </button>
+      <button type="button" (click)="goHome()">
+        <i class="fa-solid fa-house"></i> Return Home
+      </button>
+      <a [routerLink]="['/matchinglist', userId]"
+         class="btn btn-secondary">
+        Matching
+      </a>
+    </div>
+  </div>
 
-    <div class="bar">
-      <span>Red</span>
-      <div class="bar-track"><div class="bar-fill" [style.width.%]="getFinalMixValue('red')"></div></div>-->
-      <!--<div class="bar-val">{{ asPercent(getFinalMixValue('red')) }}%</div>-->
-    <!--</div>
+  <!-- Configuration panel -->
+  <div class="panel" *ngIf="!isDone && !question && !errorMsg">
+    <h2 class="panel-title"><i class="fa-solid fa-brain"></i> Configure Neural Assessment</h2>
+    <p class="panel-hint">Set up your cognitive profile assessment. Your existing profile will personalize the questions and results.</p>
 
-    <div class="bar">
-      <span>Yellow</span>
-      <div class="bar-track"><div class="bar-fill" [style.width.%]="getFinalMixValue('yellow')"></div></div>-->
-      <!--<div class="bar-val">{{ asPercent(getFinalMixValue('yellow')) }}%</div>-->
-    <!--</div>
+    <div class="row">
+      <label for="userId">ID</label>
+      <input id="userId" type="text" [(ngModel)]="userId" placeholder="Enter your unique identifier" />
+    </div>
+    <div class="row">
+      <label for="role">Assessment Context</label>
+      <select id="role" [(ngModel)]="role">
+        <option value="interview">Career Interview</option>
+        <option value="marriage">Relationship Compatibility</option>
+        <option value="partnership">Business Partnership</option>
+        <option value="team">Team Dynamics</option>
+        <option value="general">General Personality</option>
+        <option value="assistant">AI Assistant Matching</option>
+        <option value="ceo">Leadership Profile</option>
+      </select>
+    </div>
+    <div class="row">
+      <label for="nQuestions">Neural Queries</label>
+      <input id="nQuestions" type="number" [(ngModel)]="nQuestions" min="5" max="50" />
+    </div>
+    <div class="row">
+      <label for="batchSize">Processing Batch</label>
+      <input id="batchSize" type="number" [(ngModel)]="batchSize" min="1" max="20" />
+    </div>
 
     <div class="actions">
-      <button type="button" (click)="restart()">Restart</button>
+      <button type="button" (click)="start()" [disabled]="loading" class="primary">
+        <i class="fa-solid fa-play"></i> Begin Neural Mapping
+      </button>
+      <button type="button" (click)="restart()" [disabled]="loading">
+        <i class="fa-solid fa-rotate-left"></i> Reset Configuration
+      </button>
     </div>
-  </div>-->
 
-  <!-- Empty state -->
-  <div class="empty" *ngIf="!isDone && !question && !errorMsg">
-    <p>Press <strong>Start</strong> to begin the quiz.</p>
+    <p class="error" *ngIf="errorMsg">{{ errorMsg }}</p>
   </div>
 </section>
-

src/app/llm-quiz/llm-quiz.component.ts

@@ -1,244 +1,207 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { LlmQaService, Role, ColorKey, StartResponse, NextResponse } from '../services/llm-qa.service';
+import { LlmQaService, Role, ColorKey, StartResponse, NextResponse, LlmOption } from '../services/llm-qa.service';
 import { ActivatedRoute, Router } from '@angular/router';
-
+import { RouterLink } from '@angular/router';
 type Mix = Record<ColorKey, number>;
 
 @Component({
   selector: 'app-llm-quiz',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, RouterLink],
   templateUrl: './llm-quiz.component.html',
   styleUrls: ['./llm-quiz.component.css'],
 })
-export class LlmQuizComponent implements OnInit {
+export class LlmQuizComponent implements OnInit, AfterViewInit {
+  @ViewChild('brainBg') brainBg!: ElementRef;
+
   // --- Config bound to the UI ---
   role: Role = 'marriage';
-  nQuestions = 5;
-  batchSize = 5;
-
-  /** Provide user id. Will auto-read from localStorage('user_id') if available. */
+  nQuestions = 20;
+  batchSize = 10;
   userId = '';
 
   // --- Runtime state ---
   sessionId = '';
-  index = 0;
-  total = 0;
-
+  index = 0;      // current question index (1‑based from backend)
+  total = 0;      // total questions in session
   question = '';
-  options: { text: string; color: ColorKey }[] = [];
+  options: LlmOption[] = [];
   selectedColor: ColorKey | '' = '';
 
   loading = false;
   errorMsg = '';
   isDone = false;
 
-  inProgressMix: Mix | null = null; // live progress returned by backend
-  finalMix: Mix | null = null;
+  inProgressMix: Mix | null = null; // live progress (NextResponse.progress)
+  finalMix: Mix | null = null;      // final mix (NextResponse.mix when done)
 
-  /*constructor(private api: LlmQaService) { }*/
- 
+  constructor(
+    private api: LlmQaService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
 
-constructor(
-  private api: LlmQaService,
-  private route: ActivatedRoute,
-  private router: Router
-) { }
+  goHome(): void { this.router.navigate(['/']); }
 
-ngOnInit(): void {
-  const qp = this.route.snapshot.queryParamMap;
-  const uid = (qp.get('user_id') || localStorage.getItem('user_id') || '').trim();
-  const role = (qp.get('role') || localStorage.getItem('role') || '').toLowerCase();
-  const autostart = qp.get('autostart') === '1';
+  ngOnInit(): void {
+    const qp = this.route.snapshot.queryParamMap;
+    const uid = (qp.get('user_id') || localStorage.getItem('user_id') || '').trim();
+    const role = (qp.get('role') || localStorage.getItem('role') || '').toLowerCase();
+    const autostart = qp.get('autostart') === '1';
 
-  if(uid) this.userId = uid;
-  if(role) this.role = role as any;
+    if (uid) this.userId = uid;
+    if (role) this.role = role as any;
 
-  if(autostart && this.userId && this.role) {
-  this.start();
-}
-}
-
-
-  // ---------- Helpers ----------
-  asPercent(v: number | undefined | null): number {
-    const n = Number(v);
-    return Number.isFinite(n) ? Math.round(n) : 0;
+    if (autostart && this.userId && this.role) {
+      this.start();
+    }
   }
 
-  /** Safe getter for in-progress mix values. */
-  getInProgressMixValue(c: string): number {
-    if (!this.inProgressMix) return 0;
-    const key = this.toColorKey(c);
-    return key ? this.inProgressMix[key] ?? 0 : 0;
+  ngAfterViewInit(): void { this.createNeuralNetwork(); }
+
+  // Decorative background (unchanged)
+  createNeuralNetwork(): void {
+    if (!this.brainBg) return;
+    const container = this.brainBg.nativeElement;
+    const neuronCount = 25;
+    const connectionCount = 40;
+    for (let i = 0; i < neuronCount; i++) {
+      const neuron = document.createElement('div');
+      neuron.className = 'neuron';
+      neuron.style.left = Math.random() * 100 + '%';
+      neuron.style.top = Math.random() * 100 + '%';
+      neuron.style.animationDelay = (Math.random() * 3) + 's';
+      container.appendChild(neuron);
+    }
+    for (let i = 0; i < connectionCount; i++) {
+      const connection = document.createElement('div');
+      connection.className = 'neuron-connection';
+      connection.style.left = Math.random() * 100 + '%';
+      connection.style.top = Math.random() * 100 + '%';
+      connection.style.width = (50 + Math.random() * 150) + 'px';
+      connection.style.transform = `rotate(${Math.random() * 360}deg)`;
+      connection.style.animationDelay = (Math.random() * 4) + 's';
+      container.appendChild(connection);
+    }
   }
 
-  /** Safe getter for final mix values. */
-  getFinalMixValue(c: string): number {
-    if (!this.finalMix) return 0;
-    const key = this.toColorKey(c);
-    return key ? this.finalMix[key] ?? 0 : 0;
+  // ---------- Helpers ----------
+  asPercent(v: number | undefined | null): number { const n = Number(v); return Number.isFinite(n) ? Math.round(n) : 0; }
+  getDimensionName(color: string): string {
+    switch (color) {
+      case 'blue': return 'Analytical';
+      case 'green': return 'Empathetic';
+      case 'red': return 'Assertive';
+      case 'yellow': return 'Creative';
+      default: return color;
+    }
   }
-
-  private toColorKey(c: string): ColorKey | null {
-    switch (c) {
-      case 'blue':
-      case 'green':
-      case 'red':
-      case 'yellow':
-        return c;
-      default:
-        return null;
+  get quizIcon(): string {
+    switch (this.role) {
+      case 'interview': return 'fa-solid fa-briefcase';
+      case 'marriage': return 'fa-solid fa-heart';
+      case 'partnership': return 'fa-solid fa-handshake';
+      case 'team': return 'fa-solid fa-users';
+      case 'general': return 'fa-solid fa-user';
+      case 'assistant': return 'fa-solid fa-robot';
+      case 'ceo': return 'fa-solid fa-crown';
+      default: return 'fa-solid fa-brain';
     }
   }
+  get progressLabel(): string { return `${this.index} / ${this.total}`; }
+  get progressPercent(): number { return this.total ? Math.round((this.index / this.total) * 100) : 0; }
+  getInProgressMixValue(color: string): number { return this.inProgressMix?.[color as ColorKey] || 0; }
+  getFinalMixValue(color: string): number { return this.finalMix?.[color as ColorKey] || 0; }
+  get dominantColor(): ColorKey | null {
+    if (!this.finalMix) return null;
+    return (Object.entries(this.finalMix) as [ColorKey, number][])
+      .sort((a, b) => b[1] - a[1])[0]?.[0] || null;
+  }
+  get dominantDescription(): string {
+    const color = this.dominantColor; if (!color) return '';
+    const descriptions: Record<ColorKey, string> = {
+      blue: 'Your thinking is primarily analytical and logical, focusing on data-driven decisions and systematic problem-solving.',
+      green: 'You lead with empathy and emotional intelligence, valuing relationships and harmony in your interactions.',
+      red: 'You approach situations with assertiveness and directness, prioritizing action and tangible results.',
+      yellow: 'Your cognitive style is creative and innovative, embracing new ideas and unconventional approaches.'
+    };
+    return descriptions[color];
+  }
 
-  // ---------- Flow ----------
-  //start(): void {
-  //  this.errorMsg = '';
-  //  this.isDone = false;
-  //  this.finalMix = null;
-  //  this.inProgressMix = null;
-  //  this.selectedColor = '';
-  //  this.sessionId = '';
-  //  this.index = 0;
-  //  this.total = 0;
-  //  this.question = '';
-  //  this.options = [];
-
-  //  if (!this.userId?.trim()) {
-  //    this.errorMsg = 'User ID is required.';
-  //    return;
-  //  }
-
-  //  this.loading = true;
-  //  this.api .start({
-
-  //      user_id: this.userId.trim(),
-  //      role: this.role,
-  //      n_questions: this.nQuestions,
-  //      batch_size: this.batchSize,
-  //    })
-  //    .subscribe({
-  //      next: (res: StartResponse) => {
-  //        this.loading = false;
-  //        this.sessionId = res.session_id;
-  //        this.index = res.index;
-  //        this.total = res.total;
-  //        this.question = res.question;
-  //        this.options = (res.options || []) as any;
-  //        // Optional: inspect res.profile_used
-  //        if (res.profile_used === false) {
-  //          this.errorMsg =
-  //            'No profile found for this user and role. Please complete the profile first.';
-  //        }
-  //      },
-  //      error: (err) => {
-  //        this.loading = false;
-  //        this.errorMsg = err?.error?.error || 'Failed to start LLM session.';
-  //      },
-  //    });
-  //}
+  // ---------- API calls (Observable based) ----------
   start(): void {
+    if (!this.userId) { this.errorMsg = 'User ID required'; return; }
+    this.loading = true;
     this.errorMsg = '';
     this.isDone = false;
     this.finalMix = null;
     this.inProgressMix = null;
     this.selectedColor = '';
-    this.sessionId = '';
-    this.index = 0;
-    this.total = 0;
-    this.question = '';
-    this.options = [];
 
-    if (!this.userId?.trim()) {
-      this.errorMsg = 'User ID is required.';
-      return;
-    }
-
-    this.loading = true;
-
-    // Log the payload before the API request
-    const payload = {
-      user_id: this.userId.trim(),
+    this.api.start({
+      user_id: this.userId,
       role: this.role,
       n_questions: this.nQuestions,
-      batch_size: this.batchSize,
-    };
-
-    console.log('Payload:', payload); // Add this line to log the payload
-
-    this.api.start(payload).subscribe({
-      next: (res: StartResponse) => {
-        this.loading = false;
-        this.sessionId = res.session_id;
-        this.index = res.index;
-        this.total = res.total;
-        this.question = res.question;
-        this.options = (res.options || []) as any;
-        console.log("res", res);
-        // Optional: inspect res.profile_used
-        if (res.profile_used === false) {
-          this.errorMsg =
-            'No profile found for this user and role. Please complete the profile first.';
-        }
+      batch_size: this.batchSize
+    }).subscribe({
+      next: (resp: StartResponse) => {
+        this.sessionId = resp.session_id;
+        this.index = resp.index ?? 0;
+        this.total = resp.total ?? 0;
+        this.question = resp.question || '';
+        this.options = resp.options || [];
       },
       error: (err) => {
+        this.errorMsg = err?.error?.error || err.message || 'Failed to start quiz';
         this.loading = false;
-        this.errorMsg = err?.error?.error || 'Failed to start LLM session.';
       },
+      complete: () => { this.loading = false; }
     });
   }
 
   submitAnswer(): void {
-    if (!this.sessionId || !this.selectedColor) return;
+    if (!this.sessionId || !this.selectedColor || this.loading) return;
     this.loading = true;
     this.errorMsg = '';
 
-    this.api
-      .next({ session_id: this.sessionId, selected_color: this.selectedColor })
+    this.api.next({ session_id: this.sessionId, selected_color: this.selectedColor as ColorKey })
       .subscribe({
-        next: (res: NextResponse) => {
-          this.loading = false;
-
-          // Finished?
-          if (res.done) {
-            this.isDone = true;
-            this.finalMix = (res.mix || {
-              blue: 0,
-              green: 0,
-              red: 0,
-              yellow: 0,
-            }) as Mix;
-            return;
-          }
-
-          // Continue
-          this.index = res.index ?? this.index + 1;
-          this.total = res.total ?? this.total;
-          this.question = res.question || '';
-          this.options = (res.options || []) as any;
-          this.inProgressMix = (res.progress || null) as Mix;
-          this.selectedColor = ''; // reset selection
+        next: (resp: NextResponse) => {
+          // Update progress
+          if (resp.index !== undefined) this.index = resp.index;
+          if (resp.total !== undefined) this.total = resp.total;
+          if (resp.progress) this.inProgressMix = resp.progress as Mix;
+
+            if (resp.done) {
+              this.isDone = true;
+              this.finalMix = (resp.mix || null) as Mix;
+            } else {
+              this.question = resp.question || '';
+              this.options = resp.options || [];
+              this.selectedColor = '';
+            }
         },
         error: (err) => {
+          this.errorMsg = err?.error?.error || err.message || 'Failed to submit answer';
           this.loading = false;
-          this.errorMsg = err?.error?.error || 'Failed to fetch next question.';
         },
+        complete: () => { this.loading = false; }
       });
   }
 
   restart(): void {
-    this.isDone = false;
-    this.finalMix = null;
-    this.inProgressMix = null;
-    this.selectedColor = '';
     this.sessionId = '';
     this.index = 0;
     this.total = 0;
     this.question = '';
     this.options = [];
+    this.selectedColor = '';
+    this.loading = false;
     this.errorMsg = '';
+    this.isDone = false;
+    this.inProgressMix = null;
+    this.finalMix = null;
   }
 }

src/app/matching-list/matching-list.component.css

@@ -0,0 +1,586 @@
+:host {
+  display: block;
+  height: 100vh;
+  background: #f5f7f9;
+  font-family: "Poppins", sans-serif;
+  margin: 0;
+  color: #333;
+}
+
+/* Loader overlay */
+.loader-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(15, 19, 30, 0.95);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}
+
+.loader-container {
+  text-align: center;
+}
+
+.loader-gif {
+  width: 50%;
+}
+
+/* HEADER */
+.header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  padding: 15px 25px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 7vw;
+  z-index: 50;
+}
+
+.logo {
+  height: 40px;
+  margin-right: 10px;
+}
+
+.left-section {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.search-section {
+  flex: 1;
+  text-align: center;
+}
+
+  .search-section input,
+  .search-section select {
+    padding: 8px 12px;
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    margin-right: 6px;
+  }
+
+.filter-btn {
+  padding: 8px 14px;
+  border: none;
+  background: #00bfa6;
+  color: #fff;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.like-section {
+  position: relative;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: #f5f7f9;
+}
+
+.like-count {
+  margin-left: 5px;
+  font-weight: bold;
+}
+
+.liked-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 10px;
+  min-width: 150px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+}
+
+  .liked-dropdown.show {
+    display: block;
+  }
+
+  .liked-dropdown ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .liked-dropdown li {
+    padding: 5px 0;
+    border-bottom: 1px solid #eee;
+  }
+
+    .liked-dropdown li:last-child {
+      border-bottom: none;
+    }
+
+/* MAIN LAYOUT */
+.main-layout {
+  display: flex;
+  flex-direction: row;
+  height: calc(100vh - 70px);
+  position: relative;
+  top: 8vw;
+}
+
+.user-panel {
+  width: 260px;
+  background: #fff;
+  height: calc(100vh - 70px);
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: sticky;
+  top: 70px;
+  overflow-y: auto;
+}
+
+.user-photo {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 15px;
+}
+
+.user-name {
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.user-city {
+  color: #666;
+  margin-bottom: 20px;
+}
+
+.user-stats {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+  .user-stats div {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    padding: 5px 0;
+    border-bottom: 1px solid #eee;
+  }
+
+  .user-stats .value {
+    font-weight: bold;
+    color: #00bfa6;
+  }
+
+.edit-btn {
+  padding: 10px 20px;
+  border: none;
+  background: #f5f7f9;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.progress-bar-user {
+  width: 100%;
+  height: 8px;
+  border-radius: 6px;
+  background: #e5e5e5;
+  overflow: hidden;
+  margin-top: 10px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #00bfa6, #2ecc71);
+  transition: width 0.3s ease;
+}
+
+.matching-container {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.grid-view {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 20px;
+  margin-top: 10px;
+}
+
+/* PROFILE CARD */
+.profile-card {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: 0.3s;
+  cursor: pointer;
+  position: relative;
+}
+
+  .profile-card:hover {
+    transform: translateY(-5px);
+  }
+
+.image-wrapper {
+  position: relative;
+  height: 200px;
+  overflow: hidden;
+}
+
+  .image-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: 0.4s;
+  }
+
+    .image-wrapper img:hover {
+      transform: scale(1.05);
+    }
+
+.online-dot {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #0f0;
+  box-shadow: 0 0 6px #0f0;
+}
+
+.image-wrapper .badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: #00bfa6;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.profile-info {
+  padding: 15px;
+}
+
+  .profile-info h3 {
+    margin: 0 0 5px 0;
+    font-size: 16px;
+  }
+
+  .profile-info p {
+    margin: 2px 0;
+    color: #666;
+    font-size: 14px;
+  }
+
+.profession {
+  font-weight: 500;
+  color: #333 !important;
+}
+
+.progress-bar {
+  height: 6px;
+  background: #e5e5e5;
+  border-radius: 3px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+
+.progress-bar-inner {
+  height: 100%;
+  background: linear-gradient(90deg, #00bfa6, #2ecc71);
+  transition: width 0.3s ease;
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+  .actions button {
+    border: none;
+    background: #f3f3f3;
+    border-radius: 6px;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: 0.2s;
+    flex: 1;
+    margin: 0 2px;
+  }
+
+    .actions button:hover,
+    .actions button.liked {
+      background: #00bfa6;
+      color: #fff;
+    }
+
+/* MODAL */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 40;
+}
+
+  .modal.show {
+    display: flex;
+  }
+
+.modal-content {
+  background: #fff;
+  padding: 25px;
+  border-radius: 10px;
+  width: 450px;
+  max-height: 90vh;
+  overflow-y: auto;
+  text-align: center;
+  position: relative;
+}
+
+.ai-summary {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #444;
+  text-align: left;
+}
+
+.close {
+  position: absolute;
+  right: 30px;
+  top: 20px;
+  font-size: 28px;
+  cursor: pointer;
+  color: #555;
+}
+
+/* Compatibility Report */
+.compatibility-report {
+  background: #f8f9fa;
+  padding: 16px 20px;
+  border-radius: 10px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.quadratic-section h4 {
+  color: #007bff;
+  margin-bottom: 6px;
+  margin-top: 12px;
+}
+
+.quadratic-section p {
+  margin: 0 0 10px 0;
+  color: #333;
+}
+
+.quadratic-section ul {
+  padding-left: 20px;
+}
+
+.quadratic-section li {
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+/* CHAT WINDOW */
+.chat-window {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 350px;
+  height: 400px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
+  display: none;
+  flex-direction: column;
+  z-index: 100;
+}
+
+  .chat-window.show {
+    display: flex;
+  }
+
+.chat-header {
+  padding: 15px;
+  background: #00bfa6;
+  color: white;
+  border-radius: 10px 10px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chat-body {
+  flex: 1;
+  padding: 15px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chat-msg {
+  padding: 10px 15px;
+  border-radius: 18px;
+  max-width: 80%;
+  font-size: 14px;
+  position: relative;
+}
+
+.user-msg {
+  align-self: flex-end;
+  background: #00bfa6;
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.other-msg {
+  align-self: flex-start;
+  background: #f1f1f1;
+  color: #333;
+  border-bottom-left-radius: 4px;
+}
+
+.timestamp {
+  font-size: 10px;
+  opacity: 0.7;
+  margin-top: 4px;
+}
+
+.typing {
+  font-style: italic;
+  color: #666;
+  font-size: 12px;
+  align-self: flex-start;
+}
+
+.chat-input {
+  display: flex;
+  padding: 15px;
+  border-top: 1px solid #eee;
+}
+
+  .chat-input input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    margin-right: 10px;
+  }
+
+  .chat-input button {
+    padding: 10px 20px;
+    border: none;
+    background: #00bfa6;
+    color: white;
+    border-radius: 20px;
+    cursor: pointer;
+  }
+
+/* Skeleton Loader */
+.skeleton {
+  background: #e0e0e0;
+  border-radius: 12px;
+  height: 300px;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .main-layout {
+    flex-direction: column;
+  }
+
+  .user-panel {
+    width: 100%;
+    height: auto;
+    position: static;
+  }
+
+  .grid-view {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+
+  .header-bar {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .search-section {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
+
+    .search-section input,
+    .search-section select {
+      flex: 1;
+      min-width: 120px;
+    }
+
+  .modal-content {
+    width: 90%;
+    margin: 20px;
+  }
+
+  .chat-window {
+    width: 300px;
+    height: 350px;
+  }
+}
+
+@media (max-width: 480px) {
+  .grid-view {
+    grid-template-columns: 1fr;
+  }
+
+  .search-section input,
+  .search-section select {
+    min-width: 100px;
+  }
+
+  .chat-window {
+    width: 280px;
+    right: 10px;
+    bottom: 10px;
+  }
+}

src/app/matching-list/matching-list.component.html

@@ -0,0 +1,169 @@
+<!-- Loader Overlay -->
+<div class="loader-overlay" *ngIf="loading">
+  <div class="loader-container">
+    <img src="assets/Loader.gif" alt="Loading..." class="loader-gif" />
+  </div>
+</div>
+
+<!-- Main Content -->
+<div *ngIf="!loading" class="main-container">
+  <!-- HEADER -->
+  <div class="header-bar">
+    <div class="left-section">
+      <img src="https://cdn-icons-png.flaticon.com/512/168/168724.png" class="logo" alt="logo">
+      <h2>Py-Match</h2>
+    </div>
+    <div class="search-section">
+      <input type="text" id="searchBox" placeholder="Search name or city"
+             [(ngModel)]="searchTerm" (input)="onSearchChange()">
+      <select id="filterLocation" (change)="onLocationFilterChange($event)">
+        <option value="">All Locations</option>
+        <option *ngFor="let location of availableLocations" [value]="location">{{ location }}</option>
+      </select>
+      <select id="filterAge" (change)="onAgeFilterChange($event)">
+        <option value="">All Ages</option>
+        <option *ngFor="let ageRange of availableAgeRanges" [value]="ageRange">{{ ageRange }}</option>
+      </select>
+      <select id="filterProfession" (change)="onProfessionFilterChange($event)">
+        <option value="">All Professions</option>
+        <option *ngFor="let profession of availableProfessions" [value]="profession">{{ profession }}</option>
+      </select>
+      <select id="scoreFilter" (change)="onScoreFilterChange($event)">
+        <option value="0">All Scores</option>
+        <option value="80">80%+</option>
+        <option value="90">90%+</option>
+      </select>
+      <select id="sortBy" (change)="onSortChange($event)">
+        <option value="compatibility">Top Compatibility</option>
+        <option value="newest">Newest</option>
+        <option value="location">Closest Location</option>
+      </select>
+      <button class="filter-btn" (click)="applyFilters()">Apply</button>
+    </div>
+    <div class="like-section" (click)="toggleLikedDropdown()">
+      ❤️
+      <span class="like-count">{{ likedProfiles.length }}</span>
+      <div class="liked-dropdown" [class.show]="showLikedDropdown">
+        <ul>
+          <li *ngFor="let profile of likedProfiles">{{ profile.name }}</li>
+          <li *ngIf="likedProfiles.length === 0">No liked profiles</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <!-- MAIN LAYOUT -->
+  <div class="main-layout">
+    <!-- LEFT USER PANEL -->
+    <div class="user-panel">
+      <img [src]="userPhoto" class="user-photo" alt="User Photo">
+      <div class="user-name">{{ userName }}</div>
+      <div class="user-city">{{ userCity }}</div>
+      <div class="user-stats">
+        <div><span>Matches</span><span class="value">{{ totalMatches }}</span></div>
+        <div><span>Likes</span><span class="value">{{ likedProfiles.length }}</span></div>
+        <div><span>Compatibility</span><span class="value">87%</span></div>
+      </div>
+      <button class="edit-btn" (click)="openEditModal()">⚙️ Edit Profile</button>
+      <div class="progress-bar-user">
+        <div class="progress-fill" [style.width]="userProfileCompletion + '%'"></div>
+      </div>
+    </div>
+
+    <!-- RIGHT MATCHING CONTAINER -->
+    <div class="matching-container">
+      <div class="grid-view" id="profilesContainer">
+        <!-- Skeleton Loaders -->
+        <div class="skeleton" *ngIf="displayedMatches.length === 0 && !loading"></div>
+        <div class="skeleton" *ngIf="displayedMatches.length === 0 && !loading"></div>
+        <div class="skeleton" *ngIf="displayedMatches.length === 0 && !loading"></div>
+
+        <!-- Profile Cards -->
+        <div *ngFor="let profile of displayedMatches"
+             class="profile-card"
+             (click)="openProfileModal(profile)">
+          <div class="image-wrapper">
+            <div class="online-dot" *ngIf="profile.isOnline"></div>
+            <img [src]="profile.photo_url" [alt]="profile.name"
+                 (error)="handleImageError($event, profile)">
+            <span class="badge">{{ profile.match_score || profile.score }}%</span>
+          </div>
+          <div class="profile-info">
+            <h3>{{ profile.name }}</h3>
+            <p>{{ profile.age }} • {{ profile.city }}</p>
+            <p class="profession">{{ profile.job }}</p>
+            <div class="progress-bar">
+              <div class="progress-bar-inner" [style.width]="(profile.match_score || profile.score) + '%'"></div>
+            </div>
+            <div class="actions">
+              <button [class.liked]="isLiked(profile)"
+                      (click)="$event.stopPropagation(); toggleLike(profile)">
+                ❤️
+              </button>
+              <button (click)="$event.stopPropagation(); openChat(profile)">
+                💬
+              </button>
+              <button (click)="$event.stopPropagation(); openModal(profile)">
+                👁️
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- PROFILE MODAL -->
+  <div class="modal" [class.show]="showProfileModal">
+    <div class="modal-content" *ngIf="selectedProfile">
+      <span class="close" (click)="closeModal()">&times;</span>
+      <img [src]="selectedProfile.photo_url" [alt]="selectedProfile.name"
+           (error)="handleImageError($event, selectedProfile)">
+      <h3>{{ selectedProfile.name }} ({{ selectedProfile.gender || 'Male' }})</h3>
+      <p>{{ selectedProfile.age }} • {{ selectedProfile.city }}</p>
+      <p>{{ selectedProfile.job }}</p>
+      <p>Overall Match: {{ selectedProfile.match_score || selectedProfile.score }}%</p>
+
+      <div class="ai-summary" [innerHTML]="getCompatibilityReport(selectedProfile)"></div>
+
+      <canvas id="aiChart" style="display: none;"></canvas>
+    </div>
+  </div>
+
+  <!-- EDIT PROFILE MODAL -->
+  <div class="modal" [class.show]="showEditModal">
+    <div class="modal-content">
+      <span class="close" (click)="closeEditModal()">&times;</span>
+      <h3>Edit Profile</h3>
+      <input [(ngModel)]="editName" placeholder="Name" style="margin:6px;padding:6px;width:90%">
+      <input [(ngModel)]="editCity" placeholder="City" style="margin:6px;padding:6px;width:90%">
+      <button class="filter-btn" (click)="saveProfile()">Save</button>
+    </div>
+  </div>
+
+  <!-- CHAT WINDOW -->
+  <div class="chat-window" [class.show]="showChatWindow">
+    <div class="chat-header">
+      <span>Chat with {{ currentChatUser?.name }}</span>
+      <span style="cursor:pointer" (click)="closeChat()">✖</span>
+    </div>
+    <div class="chat-body" #chatBody>
+      <div *ngFor="let message of chatMessages"
+           class="chat-msg"
+           [class.user-msg]="message.sender === 'me'"
+           [class.other-msg]="message.sender === 'them'">
+        {{ message.text }}
+        <div class="timestamp">{{ message.time }}</div>
+      </div>
+      <div *ngIf="showTyping" class="typing" id="typingMsg">Typing...</div>
+    </div>
+    <div class="chat-input">
+      <input type="text"
+             [(ngModel)]="newMessage"
+             placeholder="Type a message..."
+             (keyup.enter)="sendMessage()"
+             (keypress)="typingIndicator()">
+      <button (click)="sendMessage()">Send</button>
+    </div>
+  </div>
+</div>

src/app/{quiz/quiz.component.spec.ts → matching-list/matching-list.component.spec.ts}

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { QuizComponent } from './quiz.component';
+import { MatchingListComponent } from './matching-list.component';
 
-describe('QuizComponent', () => {
-  let component: QuizComponent;
-  let fixture: ComponentFixture<QuizComponent>;
+describe('MatchingListComponent', () => {
+  let component: MatchingListComponent;
+  let fixture: ComponentFixture<MatchingListComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [QuizComponent]
+      imports: [MatchingListComponent]
     });
-    fixture = TestBed.createComponent(QuizComponent);
+    fixture = TestBed.createComponent(MatchingListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/matching-list/matching-list.component.ts

@@ -0,0 +1,481 @@
+import { Component, OnInit, ElementRef, ViewChild, HostListener } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { MatchingService, ApiMatchItem, ApiMatchResponse } from '../matching.service';
+import { CommonModule } from '@angular/common';
+
+interface Profile extends ApiMatchItem {
+  id?: number;
+  name?: string;
+  age?: number | null;
+  city?: string | null;
+  job?: string | null;
+  isOnline?: boolean;
+  match_score?: number;
+  photo_url?: string;
+  blue: number;
+  green: number;
+  yellow: number;
+  red: number;
+  score: number;
+  user_id: number;
+  gender?: string;
+  profession?: string;
+  meetsExpectations?: boolean;
+  expectationMatchScore?: number;
+  aiExplanation?: string;
+  hobbies?: string[];
+  education?: string;
+  location?: string;
+}
+
+interface ChatMessage {
+  text: string;
+  sender: 'me' | 'them';
+  time: string;
+}
+
+@Component({
+  selector: 'app-matching-list',
+  templateUrl: './matching-list.component.html',
+  styleUrls: ['./matching-list.component.css'],
+  standalone: true,
+  imports: [FormsModule, CommonModule]
+})
+export class MatchingListComponent implements OnInit {
+  @ViewChild('chatBody') chatBody!: ElementRef;
+
+  loading = false;
+  error: string | null = null;
+
+  // Modal states
+  showProfileModal = false;
+  showEditModal = false;
+  showChatWindow = false;
+  showLikedDropdown = false;
+  showTyping = false;
+
+  // User data
+  userId: number = 1;
+  userPhoto = 'https://randomuser.me/api/portraits/men/15.jpg';
+  userName = 'Ravi Kumar';
+  userCity = 'Chennai, India';
+  userProfileCompletion = 80;
+
+  // Edit profile
+  editName = '';
+  editCity = '';
+
+  // Filter state
+  searchTerm = '';
+  locationFilter = '';
+  ageFilter = '';
+  professionFilter = '';
+  scoreFilter = 0;
+  sortBy = 'compatibility';
+
+  // Data
+  allMatches: Profile[] = [];
+  filteredMatches: Profile[] = [];
+  selectedProfile: Profile | null = null;
+  currentChatUser: Profile | null = null;
+
+  // Chat state
+  chatMessages: ChatMessage[] = [];
+  newMessage = '';
+  typingTimeout: any = null;
+
+  // Stats
+  totalMatches = 0;
+
+  // Available filters
+  availableLocations: string[] = ['Chennai', 'Bengaluru', 'Hyderabad', 'Mumbai', 'Delhi'];
+  availableAgeRanges: string[] = ['18-25', '26-30', '31-35', '36-40', '41+'];
+  availableProfessions: string[] = ['Software Engineer', 'Doctor', 'Teacher', 'Business', 'Student', 'Architect', 'Data Scientist', 'Marketing Analyst'];
+
+  // Like functionality
+  likedProfiles: Profile[] = [];
+
+  constructor(
+    private router: Router,
+    private matchingService: MatchingService
+  ) { }
+
+  async ngOnInit() {
+    this.loadMatches();
+  }
+
+  get displayedMatches(): Profile[] {
+    return this.filteredMatches;
+  }
+
+  async loadMatches() {
+    this.loading = true;
+    this.error = null;
+
+    try {
+      this.matchingService.getMatches(this.userId, {
+        role: 'marriage',
+        limit: 50,
+        excludeSelf: true
+      }).subscribe({
+        next: (response: ApiMatchResponse) => {
+          this.allMatches = response.matches.map((match: ApiMatchItem) => ({
+            ...match,
+            id: match.user_id,
+            user_id: match.user_id,
+            name: match.name || `User ${match.user_id}`,
+            match_score: match.score,
+            age: match.age || Math.floor(Math.random() * 15) + 25,
+            city: match.city || this.availableLocations[Math.floor(Math.random() * this.availableLocations.length)],
+            job: match.role || this.availableProfessions[Math.floor(Math.random() * this.availableProfessions.length)],
+            profession: match.role || this.availableProfessions[Math.floor(Math.random() * this.availableProfessions.length)],
+            isOnline: Math.random() > 0.5,
+            photo_url: match.photo_url || `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${Math.floor(Math.random() * 50)}.jpg`,
+            gender: Math.random() > 0.5 ? 'Male' : 'Female',
+            meetsExpectations: false,
+            expectationMatchScore: 0,
+            aiExplanation: this.generateAIExplanation(match),
+            hobbies: ['Reading', 'Travel', 'Music'].slice(0, Math.floor(Math.random() * 3) + 1),
+            education: ['Bachelor', 'Master', 'PhD'][Math.floor(Math.random() * 3)],
+            location: match.city || 'Unknown'
+          }));
+
+          this.applyFilters();
+          this.totalMatches = this.allMatches.length;
+          this.loading = false;
+        },
+        error: (err: any) => {
+          console.error('Error loading matches:', err);
+          this.error = 'Failed to load matches. Please try again.';
+          this.loading = false;
+        }
+      });
+
+    } catch (err) {
+      this.error = 'Failed to load matches. Please try again.';
+      this.loading = false;
+    }
+  }
+
+  generateAIExplanation(profile: ApiMatchItem): string {
+    const traits = [];
+    if (profile.blue > 60) traits.push('analytical thinking');
+    if (profile.green > 60) traits.push('empathetic nature');
+    if (profile.yellow > 60) traits.push('creative approach');
+    if (profile.red > 60) traits.push('assertive communication');
+
+    if (traits.length > 0) {
+      return `Strong compatibility in ${traits.join(' and ')} based on personality assessment.`;
+    }
+
+    return 'Good overall compatibility with balanced personality traits.';
+  }
+
+  applyFilters() {
+    let filtered = [...this.allMatches];
+
+    // Apply search filter
+    if (this.searchTerm) {
+      const term = this.searchTerm.toLowerCase();
+      filtered = filtered.filter(profile =>
+        profile.name?.toLowerCase().includes(term) ||
+        profile.city?.toLowerCase().includes(term) ||
+        profile.job?.toLowerCase().includes(term) ||
+        profile.hobbies?.some(hobby => hobby.toLowerCase().includes(term))
+      );
+    }
+
+    // Apply location filter
+    if (this.locationFilter) {
+      filtered = filtered.filter(profile =>
+        profile.city?.toLowerCase().includes(this.locationFilter.toLowerCase())
+      );
+    }
+
+    // Apply age filter
+    if (this.ageFilter) {
+      filtered = filtered.filter(profile => {
+        if (!profile.age) return false;
+        return this.doesAgeMatch(profile.age, this.ageFilter);
+      });
+    }
+
+    // Apply profession filter
+    if (this.professionFilter) {
+      filtered = filtered.filter(profile =>
+        profile.profession?.toLowerCase().includes(this.professionFilter.toLowerCase())
+      );
+    }
+
+    // Apply score filter
+    if (this.scoreFilter > 0) {
+      filtered = filtered.filter(profile =>
+        (profile.match_score || profile.score) >= this.scoreFilter
+      );
+    }
+
+    // Apply sorting
+    filtered.sort((a, b) => {
+      switch (this.sortBy) {
+        case 'compatibility':
+          return (b.match_score || b.score) - (a.match_score || a.score);
+        case 'newest':
+          return Math.random() - 0.5; // Random for demo
+        case 'location':
+          return a.city?.localeCompare(b.city || '') || 0;
+        default:
+          return 0;
+      }
+    });
+
+    this.filteredMatches = filtered;
+  }
+
+  doesAgeMatch(age: number, ageRange: string): boolean {
+    const ranges: { [key: string]: [number, number] } = {
+      '18-25': [18, 25],
+      '26-30': [26, 30],
+      '31-35': [31, 35],
+      '36-40': [36, 40],
+      '41+': [41, 100]
+    };
+
+    const range = ranges[ageRange];
+    return range ? age >= range[0] && age <= range[1] : false;
+  }
+
+  // Filter handlers
+  onSearchChange() {
+    this.applyFilters();
+  }
+
+  onLocationFilterChange(event: any) {
+    this.locationFilter = event.target.value;
+    this.applyFilters();
+  }
+
+  onAgeFilterChange(event: any) {
+    this.ageFilter = event.target.value;
+    this.applyFilters();
+  }
+
+  onProfessionFilterChange(event: any) {
+    this.professionFilter = event.target.value;
+    this.applyFilters();
+  }
+
+  onScoreFilterChange(event: any) {
+    this.scoreFilter = parseInt(event.target.value);
+    this.applyFilters();
+  }
+
+  onSortChange(event: any) {
+    this.sortBy = event.target.value;
+    this.applyFilters();
+  }
+
+  // Profile actions
+  openModal(profile: Profile) {
+    this.selectedProfile = profile;
+    this.showProfileModal = true;
+  }
+
+  closeModal() {
+    this.showProfileModal = false;
+    this.selectedProfile = null;
+  }
+
+  openProfileModal(profile: Profile) {
+    this.selectedProfile = profile;
+    this.showProfileModal = true;
+  }
+
+  toggleLike(profile: Profile) {
+    const index = this.likedProfiles.findIndex(p => p.user_id === profile.user_id);
+
+    if (index > -1) {
+      this.likedProfiles.splice(index, 1);
+    } else {
+      this.likedProfiles.push(profile);
+      this.triggerConfetti();
+    }
+  }
+
+  isLiked(profile: Profile): boolean {
+    return this.likedProfiles.some(p => p.user_id === profile.user_id);
+  }
+
+  triggerConfetti() {
+    // Simple confetti effect - you can enhance this with a proper confetti library
+    console.log('Confetti effect triggered!');
+  }
+
+  toggleLikedDropdown() {
+    this.showLikedDropdown = !this.showLikedDropdown;
+  }
+
+  // Edit profile
+  openEditModal() {
+    this.editName = this.userName;
+    this.editCity = this.userCity.split(', ')[0]; // Remove country for edit
+    this.showEditModal = true;
+  }
+
+  closeEditModal() {
+    this.showEditModal = false;
+  }
+
+  saveProfile() {
+    this.userName = this.editName;
+    this.userCity = this.editCity + ', India';
+    this.userProfileCompletion = 100;
+    this.showEditModal = false;
+  }
+
+  // Chat functionality
+  openChat(profile: Profile) {
+    this.currentChatUser = profile;
+    this.showChatWindow = true;
+    this.loadChat(profile);
+    setTimeout(() => {
+      this.scrollChatToBottom();
+    }, 100);
+  }
+
+  closeChat() {
+    this.showChatWindow = false;
+    this.currentChatUser = null;
+    this.chatMessages = [];
+  }
+
+  typingIndicator() {
+    this.showTyping = true;
+    if (this.typingTimeout) {
+      clearTimeout(this.typingTimeout);
+    }
+    this.typingTimeout = setTimeout(() => {
+      this.showTyping = false;
+    }, 1500);
+  }
+
+  sendMessage() {
+    const text = this.newMessage.trim();
+    if (!text || !this.currentChatUser) return;
+
+    const message: ChatMessage = {
+      text,
+      sender: 'me',
+      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+    };
+
+    this.chatMessages.push(message);
+    this.saveMessage(this.currentChatUser, message);
+    this.newMessage = '';
+    this.scrollChatToBottom();
+
+    // Simulate reply after 1 second
+    setTimeout(() => {
+      const reply: ChatMessage = {
+        text: `${this.currentChatUser?.name}: Nice to hear from you!`,
+        sender: 'them',
+        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      };
+      this.chatMessages.push(reply);
+      this.saveMessage(this.currentChatUser!, reply);
+      this.scrollChatToBottom();
+    }, 1000);
+  }
+
+  saveMessage(user: Profile, message: ChatMessage) {
+    const key = `chat_${user.user_id}`;
+    let arr = JSON.parse(localStorage.getItem(key) || '[]');
+    arr.push(message);
+    localStorage.setItem(key, JSON.stringify(arr));
+  }
+
+  loadChat(user: Profile) {
+    const key = `chat_${user.user_id}`;
+    const arr = JSON.parse(localStorage.getItem(key) || '[]');
+    this.chatMessages = arr;
+  }
+
+  scrollChatToBottom() {
+    if (this.chatBody) {
+      this.chatBody.nativeElement.scrollTop = this.chatBody.nativeElement.scrollHeight;
+    }
+  }
+
+  // Compatibility report
+  getCompatibilityReport(profile: Profile): string {
+    const colorSet = {
+      B: Math.floor(Math.random() * 40),
+      G: Math.floor(Math.random() * 40),
+      Y: Math.floor(Math.random() * 40),
+      R: Math.floor(Math.random() * 40),
+    };
+    const colorMatch = (Math.random() * (0.9 - 0.6) + 0.6).toFixed(2);
+    const expectationMatch = (Math.random() * (0.9 - 0.6) + 0.6).toFixed(2);
+
+    const differences = [
+      "Their religion or faith expectations differ (same faith vs no preference).",
+      "Both share similar preferences in smoking preference (Occasionally).",
+      "Their alcohol preference expectations differ (no preference vs never).",
+      "Their dietary habits expectations differ (vegetarian vs no preference).",
+      "Both share similar preferences in family type (Either).",
+      "Their fitness lifestyle expectations differ (high vs moderate).",
+      "Their preferred location expectations differ (pune vs kolkata).",
+      "Their preferred country expectations differ (other vs australia).",
+    ];
+
+    return `
+    <div class="compatibility-report">
+      <p><strong>${profile.name}</strong> (${profile.gender || 'Male'})</p>
+      <p><strong>Overall Match:</strong> ${profile.match_score || profile.score}%</p>
+      <p><strong>Colors:</strong> B${colorSet.B} • G${colorSet.G} • Y${colorSet.Y} • R${colorSet.R}</p>
+      <p><strong>Color Match:</strong> ${colorMatch} • <strong>Expectation Match:</strong> ${expectationMatch}</p>
+      <br>
+      <div class="quadratic-section">
+        <h4>1️⃣ How this profile matches to you</h4>
+        <p>${profile.name} shows high compatibility in emotional stability, career orientation, and communication approach. You both value similar ethics, decision-making styles, and emotional awareness.</p>
+
+        <h4>2️⃣ Why the remaining percentage does not match</h4>
+        <p>The mismatch comes mainly from lifestyle and belief areas. Factors like faith flexibility, preferred diet, and regional lifestyle contribute to the gap.</p>
+
+        <h4>3️⃣ What you may need to sacrifice</h4>
+        <p>For smoother compatibility, consider being more adaptive toward dietary and cultural choices, and show patience toward different viewpoints in lifestyle preferences.</p>
+
+        <h4>4️⃣ Expectation-wise Comparison</h4>
+        <ul>
+          ${differences
+        .map(
+          (d) =>
+            `<li style="color:${d.includes("similar") ? "green" : "red"
+            }">${d}</li>`
+        )
+        .join("")}
+        </ul>
+      </div>
+    </div>`;
+  }
+
+  // Utility functions
+  handleImageError(event: any, profile: Profile) {
+    event.target.src = 'https://via.placeholder.com/300?text=' + (profile.name || 'User');
+  }
+
+  @HostListener('document:click', ['$event'])
+  handleDocumentClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest('.like-section')) {
+      this.showLikedDropdown = false;
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  handleEscape() {
+    this.closeModal();
+    this.closeEditModal();
+    this.closeChat();
+  }
+}

src/app/matching.service.spec.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+export interface ApiMatchItem {
+  user_id: number;
+  role?: string | null;
+  name?: string;
+  gender?: string;
+  blue: number;
+  green: number;
+  yellow: number;
+  red: number;
+  score: number;
+  created_at?: string | null;
+  explanations?: string[];
+  // Optional display fields that may not come from API but used in templates
+  city?: string | null;
+  age?: number | null;
+  job?: string | null;
+  isOnline?: boolean; // optional presence indicator for UI
+  photo_url?: string; // optional photo URL for profile image
+}
+
+export interface ApiMatchResponse {
+  input_user: {
+    user_id: number;
+    role?: string | null;
+    blue: number;
+    green: number;
+    yellow: number;
+    red: number;
+    created_at?: string | null;
+  };
+  matches: ApiMatchItem[];
+  count: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class MatchingService {
+  private readonly base = 'http://127.0.0.1:5000'; // Flask backend
+
+  constructor(private http: HttpClient) { }
+
+  getMatches(
+    userId: number,
+    opts?: { role?: string; limit?: number; excludeSelf?: boolean }
+  ): Observable<ApiMatchResponse> {
+    let params = new HttpParams()
+      .set('user_id', String(userId))
+      .set('limit', String(opts?.limit ?? 10))
+      .set('exclude_self', (opts?.excludeSelf ?? true) ? 'yes' : 'no');
+
+    // 👇 Default to "marriage" if role is not explicitly passed
+    params = params.set('role', opts?.role ?? 'marriage');
+
+    return this.http.get<ApiMatchResponse>(`${this.base}/match`, { params });
+  }
+}

src/app/matching.service.ts

@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+export interface ApiMatchItem {
+  user_id: number;
+  role?: string | null;
+  name?: string;
+  gender?: string;
+  blue: number;
+  green: number;
+  yellow: number;
+  red: number;
+  score: number;
+  created_at?: string | null;
+  explanations?: string[];
+  // Optional display fields that may not come from API but used in templates
+  city?: string | null;
+  age?: number | null;
+  job?: string | null;
+  isOnline?: boolean; // optional presence indicator for UI
+  photo_url?: string; // optional photo URL for profile image
+}
+
+export interface ApiMatchResponse {
+  input_user: {
+    user_id: number;
+    role?: string | null;
+    blue: number;
+    green: number;
+    yellow: number;
+    red: number;
+    created_at?: string | null;
+  };
+  matches: ApiMatchItem[];
+  count: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class MatchingService {
+
+  private baseUrl: string;
+
+  constructor(private http: HttpClient) {
+    // Initialize baseUrl based on the current hostname
+    this.baseUrl = typeof location !== 'undefined' && location.hostname.endsWith('hf.space')
+      ? 'https://pykara-py-match-backend.hf.space/api'
+      : 'http://localhost:5000/api';
+  }
+
+  getMatches(
+    userId: number,
+    opts?: { role?: string; limit?: number; excludeSelf?: boolean }
+  ): Observable<ApiMatchResponse> {
+    let params = new HttpParams()
+      .set('user_id', String(userId))
+      .set('limit', String(opts?.limit ?? 10))
+      .set('exclude_self', (opts?.excludeSelf ?? true) ? 'yes' : 'no');
+
+    // 👇 Default to "marriage" if role is not explicitly passed
+    params = params.set('role', opts?.role ?? 'marriage');
+
+    return this.http.get<ApiMatchResponse>(`${this.baseUrl}/match`, { params });
+  }
+}

src/app/question-answer/question-answer-service.service.ts

@@ -2,35 +2,41 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../environments/environment';
 import { Observable } from 'rxjs';
+
 export interface QAItem {
   label: string;
-  input_type: 'text' | 'date' | 'radio' | 'select';
+  input_type: 'text' | 'date' | 'select' | 'radio' | 'multiselect';
   options?: string[];
   column_key: string;
+  category: string;
+  required?: boolean;
+  placeholder?: string;
 }
+
 @Injectable({ providedIn: 'root' })
 export class QuestionAnswerService {
-  // hf.space => HF backend; else => local Flask
-  private baseUrl = location.hostname.endsWith('hf.space')
-    ? 'https://pykara-py-match-backend.hf.space/api/questions'
-    : 'http://localhost:5000/api/questions';
+  private baseUrl: string;
 
-  //private baseUrl = 'http://127.0.0.1:5000/api/questions';
-
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+    // Initialize baseUrl based on the current hostname
+    this.baseUrl = typeof location !== 'undefined' && location.hostname.endsWith('hf.space')
+      ? 'https://pykara-py-match-backend.hf.space/api/questions'
+      : 'http://127.0.0.1:5000/api/questions';
+  }
 
   // Assign role to user
-  assignRole(payload: { user_id: number; role_name: string; assigned_at: string }): Observable<any> {
+  assignRole(payload: { user_id: number; role_name: string; assigned_at?: string }): Observable<any> {
     return this.http.post<any>(`${this.baseUrl}/select-role`, payload);
   }
 
-  
+  // Fetch questions by role (returns label/options/input_type/column_key/category)
   getQuestions(role: string): Observable<QAItem[]> {
     return this.http.get<QAItem[]>(`${this.baseUrl}/${role}`);
   }
 
-  // fields = { full_name: 'John', created_at: '...' }
   submitAnswers(role: string, userId: number, fields: Record<string, any>): Observable<any> {
-    return this.http.post(`${this.baseUrl}/submit-answers/${role}`, { user_id: userId, ...fields });
+    const payload = { user_id: userId, ...fields };
+    console.log(payload);
+    return this.http.post(`${this.baseUrl}/submit-answers/${role}`, payload);
   }
 }

src/app/question-answer/question-answer.component.css

@@ -1,317 +1,693 @@
-/* ---------- Page & Topbar ---------- */
-.qa-page {
-  height: 100%;
+/* Professional Styles for Question Answer Component - Updated to match intro theme */
+.professional-page {
+  min-height: 100vh;
+  background: #f8fafc;
+}
+
+/* Loader */
+.loader-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(12, 18, 28, 0.7);
+  display: grid;
+  place-items: center;
+  z-index: 9999;
+  backdrop-filter: blur(5px);
+}
+
+.loader-container {
+  text-align: center;
+}
+
+.loader-gif {width: 50%; height: 50%;
+}
+
+/* Hero Section */
+.hero {
   position: relative;
-  background-image: url('/assets/Q&A-BG.png'); /* Set the background image */
-  background-size: cover; /* Ensure the image covers the entire area */
-  background-position: center center; /* Center the background image */
-  color: #1a1a1a;
-  overflow: hidden;
+  width: 100%;
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
 }
 
-.topbar {
+  .hero .content {
+    width: 100%;
+    padding: 80px 5%;
+    color: white;
+  }
+
+.info-card {
+  display: flex;
+  gap: 2rem;
+  margin: 0 auto;
+  background: rgb(255 255 255 / 52%);
+  border-radius: 24px;
+  padding: 3rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  align-items: center;
+  width: fit-content;
   position: relative;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  top: 50%;
+  transform: translatey(-50%);
+  right: 24vw;
+}
+
+.info-card__icon {
+  flex: 0 0 100px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #f3a54c, #ffcb7a);
+  display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 14px 18px;
-  background: transparent;
-}
-
-.home-btn {
-  appearance: none;
-  border: 1px solid rgba(0,0,0,0.08);
-  background: rgba(255,255,255,0.9);
-  backdrop-filter: blur(6px);
-  padding: 8px 12px;
-  border-radius: 10px;
+  justify-content: center;
+  color: #111;
+  font-size: 2.5rem;
+  box-shadow: 0 10px 30px rgba(243, 165, 76, 0.3);
+}
+
+.info-card__content {
+  flex: 1;
+}
+
+.info-card__title {
+  margin: 0 0 1rem 0;
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1a202c;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+  .info-card__title i {
+    color: #f3a54c;
+  }
+
+.info-card__text {
+  margin: 0 0 2rem 0;
+  font-size: 1.1rem;
+  line-height: 1.6;
+  color: black;
+  max-width: 600px;
+  font-weight: 500;
+}
+
+.info-card__actions {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1.75rem;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
   cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: inherit;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #f3a54c, #ffcb7a);
+  color: #111;
+  box-shadow: 0 4px 15px rgba(243, 165, 76, 0.3);
+}
+
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(243, 165, 76, 0.4);
+  }
+
+.btn-secondary {
+  background: white;
+  color: #f3a54c;
+  border: 2px solid #f3a54c;
+}
+
+  .btn-secondary:hover {
+    background: #f3a54c;
+    color: white;
+  }
+
+/* Questions Container */
+.questions-container {
+  background: white;
+  padding: 5rem 0 1vw 0;
+}
+
+.container {
+  width: 80%;
+  margin: 0 auto;
+/*  padding: 0 2rem;*/
+}
+
+/* Category Navigation */
+.category-nav-wrapper {
+  margin-bottom: 3rem;
+}
+
+.category-nav {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.nav-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: white;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
   font-weight: 600;
-  transition: transform .15s ease, box-shadow .15s ease;
+  color: #4a5568;
+  text-decoration: none;
+  border: 2px solid #e2e8f0;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: inherit;
 }
 
-  .home-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
-    border: 1px solid #f3a54c;
+  .nav-chip:hover {
+    border-color: #f3a54c;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(243, 165, 76, 0.15);
   }
 
-  .home-btn:active {
-    transform: translateY(0);
+  .nav-chip.active {
+    background: #f3a54c;
+    color: white;
+    border-color: #f3a54c;
   }
 
-  .home-btn:focus-visible {
-    outline: 3px solid #7cc4ff;
-    outline-offset: 2px;
+  .nav-chip.completed {
+    background: #00d68f;
+    color: #fff;
+    border-color: #00d68f;
   }
 
-.title {
-  margin: 0;
-  text-align: center;
-  color: #3a3a3a;
-  font-size: 3vw;
-  color: white;
+  .nav-chip.completed i {
+    color: #fff;
+  }
+
+  .nav-chip i {
+    font-size: 1.1rem;
+  }
+
+.chip-progress {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
 }
 
-.topbar-spacer {
-  width: 52px;
-  height: 1px;
+/* Category Content */
+.category-content {
+  background: white;
+  border-radius: 20px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  overflow: hidden;
+  border: 1px solid #e3e5e8;
 }
 
-/* ---------- Ambient soft background (subtle stripes + light blobs) ---------- */
-.ambient {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  background: #e9cfad57;
-  opacity: 0.8;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 28vw;
-  margin: 0 auto;
-  border-radius: 8vw;
-  border: 2px solid #e9cfad;
+.category-section {
+  padding: 2vw 2vw 0.5vw 2vw;
 }
 
-.stage {
-  position: absolute;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.category-header {
+  display: flex;
+  gap: 3rem;
+  margin-bottom: 3rem;
+  align-items: center;
 }
 
-/* Shared orb styles */
-.orb {
-  --size: clamp(160px, 26vw, 260px);
-  width: var(--size);
-  height: var(--size);
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  border: 10px solid rgba(255,255,255,0.9); /* white rim to mimic gaps */
-  box-shadow: 0 28px 60px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
-  position: absolute;
-  cursor: pointer;
-  text-align: center;
-  text-transform: uppercase;
-  font-weight: 800;
-  letter-spacing: .04em;
-  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
+.category-image {
+  flex: 0 0 300px;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  position: relative;
 }
 
-/* Color palette inspired by your reference image */
-.orb-top {
-  background: #595a5e;
-  color: #ffffff;
+  .category-image::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(243, 165, 76, 0.1), rgba(0, 255, 136, 0.1));
+    z-index: 1;
+  }
+
+  .category-image img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    position: relative;
+    z-index: 0;
+  }
+
+.category-info {
+  flex: 1;
 }
-/* dark grey */
-.orb-left {
-  background: #f3a54c;
-  color: #2b2316;
+
+.title-section {
+  margin-bottom: 2rem;
 }
-/* warm orange */
-.orb-right {
-  background: #d2a784;
-  color: #2a1e17;
+
+  .title-section h2 {
+    margin: 0 0 1rem 0;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1a202c;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+    .title-section h2 i {
+      color: #f3a54c;
+    }
+
+.progress-indicator {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
-/* soft tan */
 
-/* Placement to form a neat triad */
-.orb-top {
-  bottom: -2vw;
-  right: -6vw;
+.progress-bar {
+  flex: 1;
+  height: 8px;
+  background: #e2e8f0;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
-.orb-left {
-  left: -2vw;
-  top: -2vw;
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(135deg, #f3a54c, #ffcb7a);
+  border-radius: 4px;
+  transition: width 0.4s ease;
 }
 
-.orb-right {
-  right: 0vw;
-  top: -2vw;
+.progress-indicator small {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #4a5568;
+  min-width: 80px;
 }
 
-/* Hover / focus interactions */
-.orb:hover {
-  /*transform: translate(-50%, 0) scale(1.02);*/
-  box-shadow: 0 36px 80px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.65);
-  transform: translate(0,0) scale(1.02);
+/* Questions Grid - Compact 3-column layout */
+.questions-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+}
+.checkbox-options{
+    overflow-y:scroll;
+    height:3vh;
 }
+.question-card {
+  background: white;
+  border: 2px solid #f7fafc;
+  border-radius: 16px;
+  padding: 0.2vw;
+  transition: all 0.3s ease;
+  position: relative;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  height: auto;
+  color: #1a202c;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+}
+
+  .question-card:hover {
+    border-color: #f3a54c;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(243, 165, 76, 0.15);
+  }
+
+  .question-card.answered {
+    border-color: #48bb78;
+    background: #f0fff4;
+  }
+
+  .question-card.error {
+    border-color: #f56565;
+    animation: shake 0.5s ease-in-out;
+  }
+
+  .question-card.required::after {
+    content: 'Required';
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: #fed7d7;
+    color: #c53030;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  .question-card label {
+    display: block;
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+    color: #2d3748;
+    font-size: 0.95rem;
+    line-height: 1.4;
+  }
 
-.orb-left:hover {
-  transform: translate(0,0) scale(1.02);
+.required-indicator {
+  color: #f56565;
 }
 
-.orb-right:hover {
-  transform: translate(0,0) scale(1.02);
+.question-card select,
+.question-card input[type="text"],
+.question-card input[type="date"] {
+  width: 100%;
+  padding: 0.875rem 1rem;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+  background: white;
+  font-family: inherit;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }
 
-.orb:focus-visible {
-  outline: 4px solid #7cc4ff;
-  outline-offset: 3px;
+  .question-card select:focus,
+  .question-card input[type="text"]:focus,
+  .question-card input[type="date"]:focus {
+    outline: none;
+    border-color: #f3a54c;
+    box-shadow: 0 0 0 3px rgba(243, 165, 76, 0.1);
+  }
+
+.radio-options {
+  display: flex;/*
+  flex-direction: column;*/
+  gap: 0.75rem;
 }
 
-/* Text inside circles */
-.orb > span {
-  line-height: 1.15;
-  font-size: clamp(13px, 1.6vw, 18px);
-  padding: 0 18px;
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: #f7fafc;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.3s ease;
 }
 
+  .radio-option:hover {
+    background: #edf2f7;
+  }
 
-/* Modal Overlay */
-.modal-overlay {
+  .radio-option input {
+    margin: 0;
+  }
+
+.hint {
+  font-size: 0.85rem;
+  color: #718096;
+  margin-top: 0.5rem;
+  line-height: 1.4;
+}
+
+.error-message {
+  font-size: 0.85rem;
+  color: #e53e3e;
+  font-weight: 600;
+  margin-top: 0.5rem;
+}
+
+/* Submit Section */
+.submit-section {
+  text-align: center;
+  padding: 1vw;
+  border-top: 1px solid #e2e8f0;
+/*  margin-top: 2rem;*/
+}
+
+.submit-btn {
+  padding: 1rem 2.5rem;
+  font-size: 1.1rem;
+  background: linear-gradient(135deg, #f3a54c, #ffcb7a);
+  color: #111;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(243, 165, 76, 0.3);
+}
+
+  .submit-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(243, 165, 76, 0.4);
+  }
+
+  .submit-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+
+.validation-message {
+  margin-top: 1rem;
+  color: #e53e3e;
+  font-weight: 600;
+}
+
+/* Empty State */
+.empty-state {
+  padding: 4rem 2rem;
+  text-align: center;
+}
+
+.empty-state-text {
+  font-size: 1.1rem;
+  color: #718096;
+}
+
+/* Modal */
+.modal-backdrop {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
-  animation: 0.3s ease-in-out;
+  padding: 2rem;
 }
 
-/* Modal Content */
 .modal {
-  display: flex;
+  background: white;
   border-radius: 20px;
-  width: 70%;
-  max-height: 80%;
-  overflow-y: auto;
-  position: relative;
-  animation: slideUp 0.3s ease-out;
+  padding: 3rem;
+  max-width: 500px;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
+  border: 1px solid #e3e5e8;
 }
 
-  /* Left Side: Header and Image */
-  .modal .left-side {
-    width: 50%;
-    background: url('/assets/popup.png') no-repeat center center;
-    background-size: cover;
-    position: relative;
-    padding: 20px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
+.success-title {
+  color: #48bb78;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+/* Tip Card */
+.tip-card {
+  background: linear-gradient(135deg, #fed7aa, #fdba74);
+  border-radius: 16px;
+  padding: 1.5rem;
+  margin: 2rem 0;
+  text-align: left;
+}
+
+.tip-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.tip-icon {
+  width: 50px;
+  height: 50px;
+  flex-shrink: 0;
+}
+
+.tip-text {
+  flex: 1;
+}
+
+.tip-message {
+  margin: 0;
+  color: #7c2d12;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+/* Modal Actions */
+.modal-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+
+/* Countdown Timer */
+.countdown-timer {
+  margin-top: 2rem;
+}
+
+.timer-bar {
+  width: 100%;
+  height: 6px;
+  background: #e2e8f0;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.timer-fill {
+  height: 100%;
+  background: linear-gradient(135deg, #48bb78, #38a169);
+  border-radius: 3px;
+  transition: width 0.1s linear;
+}
+
+.countdown-timer small {
+  color: #718096;
+  font-size: 0.85rem;
+}
+
+/* Animations */
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
   }
 
-  .modal h2 {
-    font-size: 24px;
-    font-weight: 700;
-    color: #fff;
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    z-index: 2;
-    background-color: rgba(0, 0, 0, 0.5); /* Background for readability */
-    padding: 5px 10px;
-    border-radius: 5px;
+  25% {
+    transform: translateX(-5px);
   }
 
-  /* Right Side: Questions and Options */
-  .modal .right-side {
-    width: 50%;
-    padding: 20px;
-    color: #eb4814;
-    background-color: #fbeccf;
-    overflow-y: auto;
+  75% {
+    transform: translateX(5px);
   }
+}
 
-  /* Modal Question Styling */
-  .modal label {
-    display: block;
-    font-size: 18px;
-    font-weight: 500;
-    margin-bottom: 10px;
-    color: #000000;
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .questions-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .hero .content {
+    padding: 60px 2rem;
+  }
+
+  .info-card {
+    flex-direction: column;
+    text-align: center;
+    padding: 2rem;
+  }
+
+  .info-card__icon {
+    width: 80px;
+    height: 80px;
+    font-size: 2rem;
+  }
+
+  .info-card__title {
+    font-size: 2rem;
+    justify-content: center;
   }
 
-  .modal div {
-    margin-bottom: 20px;
+  .info-card__actions {
+    justify-content: center;
   }
 
-  .modal input[type="radio"] {
-    margin-right: 10px;
+  .category-header {
+    flex-direction: column;
+    gap: 2rem;
   }
 
-  .modal input[type="text"] {
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
+  .category-image {
+    flex: none;
     width: 100%;
-    margin-top: 10px;
   }
 
-/* Close Button */
-.close-btn {
-  position: absolute;
-  top: 10px;
-  right: 25px;
-  background: transparent;
-  font-size: 24px;
-  color: #aaa;
-  cursor: pointer;
-  transition: color 0.3s;
-  width: 2vw;
-  border: 3px solid #eb48149c;
-  padding: 1px;
-}
+  .questions-grid {
+    grid-template-columns: 1fr;
+  }
 
-  .close-btn:hover {
-    color: #333;
+  .category-nav {
+    justify-content: flex-start;
+    overflow-x: auto;
+    padding-bottom: 1rem;
   }
 
-/* Button Styling */
-button {
-  padding: 12px 20px;
-  background-color: #007bff;
-  color: black;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.2s ease;
-  width: 100%;
-  text-align: center;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  .nav-chip {
+    flex-shrink: 0;
+  }
+
+  .modal-actions {
+    flex-direction: column;
+  }
 }
 
-  button:active {
-    transform: translateY(1px);
+@media (max-width: 480px) {
+  .container {
+    padding: 0 1rem;
   }
 
-  button:focus-visible {
-    outline: 3px solid #7cc4ff;
-    outline-offset: 3px;
+  .category-section {
+    padding: 2rem 1rem;
   }
 
-/* Animations for modal */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
+  .modal {
+    padding: 2rem 1.5rem;
   }
 
-  to {
-    opacity: 1;
+  .info-card__title {
+    font-size: 1.75rem;
   }
-}
 
-@keyframes slideUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
+  .questions-grid {
+    gap: 1rem;
   }
 
-  to {
-    transform: translateY(0);
-    opacity: 1;
+  .question-card {
+    padding: 1.25rem;
   }
 }
+

src/app/question-answer/question-answer.component.html

@@ -1,67 +1,175 @@
-<div class="qa-page">
-  <header class="topbar">
-    <button class="home-btn" type="button" (click)="goHome()" aria-label="Go to Home">Home</button>
-    <h1 class="title">{{ heading }}</h1>
-  </header>
-
-  <main class="stage">
-    <button class="orb orb-top" type="button" (click)="onSelect('marriage')" aria-label="Select MARRIAGE">
-      <span><i class="fa-solid fa-ring"></i>&nbsp;MARRIAGE</span>
-    </button>
-    <button class="orb orb-left" type="button" (click)="onSelect('interview')" aria-label="Select INTERVIEW">
-      <span><i class="fa-solid fa-user-tie"></i>&nbsp;INTERVIEW</span>
-    </button>
-    <button class="orb orb-right" type="button" (click)="onSelect('partnership')" aria-label="Select BUSINESS PARTNERS">
-      <span><i class="fa-solid fa-handshake"></i>&nbsp;BUSINESS PARTNERS</span>
-    </button>
-  </main>
-
-  <div *ngIf="isModalOpen" class="modal-overlay">
-    <div class="modal">
-      <button class="close-btn" (click)="closeModal()">×</button>
+<div class="professional-page">
+  <!-- Loader Overlay (same as llm-quiz) -->
+<div class="loader-overlay" *ngIf="isLoading">
+  <div class="loader-container">
+    <img src="assets/Loader.gif" alt="Loading..." class="loader-gif" />
+  </div>
+</div>
 
-      <div class="left-side">
-        <h2>Questions for {{ selectedOption | uppercase }}</h2>
+  <!-- Hero Section -->
+  <section class="hero">
+    <div class="content" [ngStyle]="heroContentStyle">
+      <div class="info-card">
+        <div class="info-card__icon">
+          <i [class]="headingIcon"></i>
+        </div>
+        <div class="info-card__content">
+          <h1 class="info-card__title">{{ selectedOption ? (selectedOption | titlecase) + ' Match' : 'Marriage Match' }}</h1>
+          <p class="info-card__text">
+            Discover meaningful connections beyond surface-level swipes.<br>
+            This helps to analyse compatibility deeply.<br>
+            Understand habits, values, and life goals.
+            Find harmony and balance for a lasting relationship.
+          </p>
+          <div class="info-card__actions">
+            <button class="btn btn-primary" (click)="scrollToQuestions()">
+              Fill Your Details
+            </button>
+            <button class="btn btn-secondary" (click)="goToPreferences()">
+              Set Preference
+            </button>
+          </div>
+        </div>
       </div>
+    </div>
+  </section>
 
-      <div class="right-side">
-        <div *ngIf="selectedQuestions.length > 0; else noQuestions">
-          <form (ngSubmit)="submitAnswers()">
-            <div *ngFor="let q of selectedQuestions; let i = index">
-              <label>{{ q.label }}</label>
+  <!-- Questions container -->
+  <div id="questions-section" class="questions-container" *ngIf="selectedQuestions.length">
+    <div class="container">
+      <!-- Category Navigation -->
+      <div class="category-nav-wrapper">
+        <nav class="category-nav" aria-label="Question categories">
+          <button *ngFor="let cat of categoriesMeta" type="button"
+                  (click)="selectCategory(cat.key)"
+                  [class.active]="selectedCategory === cat.key"
+                  [class.completed]="getCategoryAnsweredCount(cat.key) === getCategoryRequiredCount(cat.key) && getCategoryRequiredCount(cat.key) > 0"
+                  [attr.aria-selected]="selectedCategory === cat.key"
+                  class="nav-chip">
+            <i class="fa-solid" [ngClass]="cat.icon"></i>
+            <span>{{ cat.title }}</span>
+            <span class="chip-progress" *ngIf="getCategoryQuestions(cat.key).length">
+              {{ getCategoryAnsweredCount(cat.key) }}/{{ getCategoryRequiredCount(cat.key) }}
+            </span>
+          </button>
+        </nav>
+      </div>
 
-              <!-- text/date -->
-              <div *ngIf="q.input_type === 'text' || q.input_type === 'date'">
-                <input [type]="q.input_type === 'date' ? 'date' : 'text'"
-                       [(ngModel)]="answers[i]"
-                       name="answer{{ i }}"
-                       (ngModelChange)="onAnswerChange(i, $event)"
-                       placeholder="Enter your answer" />
+      <!-- Single Category Rendering -->
+      <div class="category-content">
+        <ng-container *ngFor="let cat of categoriesMeta; let last = last">
+          <section *ngIf="selectedCategory === cat.key" [attr.id]="'cat-' + cat.key" class="category-section">
+            <div class="category-header">
+              <div class="category-image">
+                <img [src]="getCategoryImage(cat.key)" [alt]="cat.title" loading="lazy" />
+              </div>
+              <div class="category-info">
+                <div class="title-section">
+                  <h2><i class="fa-solid" [ngClass]="cat.icon"></i> {{ cat.title }}</h2>
+                  <div class="progress-indicator">
+                    <div class="progress-bar">
+                      <div class="progress-fill" [style.width.%]="getCategoryPercent(cat.key)"></div>
+                    </div>
+                    <small>{{ getCategoryProgressLabel(cat.key) }}</small>
+                  </div>
+                </div>
               </div>
+            </div>
 
-              <!-- radio/select -->
-              <div *ngIf="(q.input_type === 'select' || q.input_type === 'radio') && q.options?.length">
-                <label *ngFor="let option of q.options" class="option">
-                  <input type="radio"
-                         [name]="'answer' + i"
-                         [value]="option"
-                         [(ngModel)]="answers[i]"
-                         (change)="onAnswerChange(i, option)" />
-                  {{ option }}
+            <div class="questions-grid">
+              <div *ngFor="let question of getCategoryQuestions(cat.key); trackBy: trackQuestion"
+                   class="question-card"
+                   [attr.id]="'q-' + question.column_key"
+                   [class.required]="question.required"
+                   [class.answered]="isAnswered(question)"
+                   [class.error]="showError(question)">
+                <label [attr.for]="'answer' + question.column_key">
+                  {{ question.label }} <span *ngIf="question.required" class="required-indicator">*</span>
                 </label>
+                <ng-container [ngSwitch]="question.input_type">
+                  <!-- Custom multi-select for Languages Spoken -->
+                  <div *ngIf="question.label === 'Languages Spoken'" class="checkbox-options">
+                    <label class="checkbox-option" *ngFor="let opt of question.options">
+                      <input type="checkbox"
+                             [value]="opt"
+                             [checked]="answers[question.column_key]?.includes(opt)"
+                             (change)="onLanguagesCheckboxChange($event, question.column_key)" />
+                      <span class="checkmark"></span>
+                      {{ opt }}
+                    </label>
+                  </div>
+
+                  <!-- Default rendering for other types, only if not Languages Spoken -->
+                  <ng-container *ngIf="question.label !== 'Languages Spoken'">
+                    <select *ngSwitchCase="'select'" [id]="'answer' + question.column_key"
+                            [(ngModel)]="answers[question.column_key]"
+                            [name]="'answer' + question.column_key"
+                            (ngModelChange)="onAnswerChange(question.column_key, $event)"
+                            [required]="question.required || false">
+                      <option value="" disabled>{{ getPlaceholder(question) }}</option>
+                      <option *ngFor="let opt of question.options" [value]="opt">{{ opt }}</option>
+                    </select>
+
+                    <select *ngSwitchCase="'multiselect'" multiple [id]="'answer' + question.column_key"
+                            [(ngModel)]="answers[question.column_key]"
+                            [name]="'answer' + question.column_key"
+                            (ngModelChange)="onAnswerChange(question.column_key, $event)"
+                            [required]="question.required || false">
+                      <option *ngFor="let opt of question.options" [value]="opt">{{ opt }}</option>
+                    </select>
+                  </ng-container>
+
+                  <input *ngSwitchCase="'date'" type="date" [id]="'answer' + question.column_key"
+                         [(ngModel)]="answers[question.column_key]"
+                         [name]="'answer' + question.column_key"
+                         (ngModelChange)="onAnswerChange(question.column_key, $event)"
+                         [required]="question.required || false"
+                         [placeholder]="getPlaceholder(question)" />
+
+                  <input *ngSwitchCase="'text'" type="text" [id]="'answer' + question.column_key"
+                         [(ngModel)]="answers[question.column_key]"
+                         [name]="'answer' + question.column_key"
+                         (ngModelChange)="onAnswerChange(question.column_key, $event)"
+                         [required]="question.required || false"
+                         [placeholder]="getPlaceholder(question)" />
+
+                  <div *ngSwitchCase="'radio'" class="radio-options">
+                    <label *ngFor="let opt of question.options" class="radio-option">
+                      <input type="radio" [name]="'answer' + question.column_key" [value]="opt"
+                             [(ngModel)]="answers[question.column_key]"
+                             (ngModelChange)="onAnswerChange(question.column_key, $event)" />
+                      {{ opt }}
+                    </label>
+                  </div>
+
+                  <input *ngSwitchDefault type="text" [id]="'answer' + question.column_key"
+                         [(ngModel)]="answers[question.column_key]"
+                         [name]="'answer' + question.column_key"
+                         (ngModelChange)="onAnswerChange(question.column_key, $event)"
+                         [required]="question.required || false"
+                         [placeholder]="getPlaceholder(question)" />
+                </ng-container>
+                <div class="hint" *ngIf="question.placeholder && !showError(question)">{{ question.placeholder }}</div>
+                <div class="error-message" *ngIf="showError(question)">This field is required.</div>
               </div>
             </div>
 
-            <button type="submit">Submit Answers</button>
-          </form>
-          <!--<button [routerLink]="'/quiz'">Go to Quiz</button>-->
-          <a routerLink="/llmquiz" class="btn btn-primary">{{ tr('Go to Quiz') }}</a>
-        </div>
-
-        <ng-template #noQuestions>
-          <p>No questions available for this role.</p>
-        </ng-template>
+            <div class="submit-section" *ngIf="last">
+              <button class="btn btn-primary submit-btn" (click)="submitAnswers()" [disabled]="isLoading || !allFieldsAnswered">
+                <span *ngIf="!isLoading"><i class="fa-solid fa-paper-plane"></i> Submit Answers</span>
+                <span *ngIf="isLoading"><i class="fa-solid fa-circle-notch fa-spin"></i> Submitting...</span>
+              </button>
+              <div class="validation-message" *ngIf="attemptedSubmit && !allFieldsAnswered">
+                Please complete all fields ({{ unansweredCount }} remaining).
+              </div>
+            </div>
+          </section>
+        </ng-container>
       </div>
     </div>
   </div>
+
+  <div class="empty-state" *ngIf="!selectedQuestions.length && !isLoading">
+    <p class="empty-state-text">Select a matching mode to begin answering questions.</p>
+  </div>
 </div>

src/app/question-answer/question-answer.component.ts

@@ -1,157 +1,521 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { QuestionAnswerService, QAItem } from './question-answer-service.service';
-import { Router, RouterLink } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
+import { HttpErrorResponse } from '@angular/common/http';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTabGroup } from '@angular/material/tabs';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-question-answer',
   standalone: true,
-  imports: [FormsModule, CommonModule, RouterLink],
+  imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule, MatTabsModule],
   templateUrl: './question-answer.component.html',
   styleUrls: ['./question-answer.component.css']
 })
 export class QuestionAnswerComponent implements OnInit {
-  heading: string = 'CHOOSE YOUR ROLE';
-  selectedOption: string = '';                 // 'marriage' | 'interview' | 'partnership'
-  selectedQuestions: QAItem[] = [];            // questions fetched for selected role
-  isModalOpen: boolean = false;
+  @ViewChild('tabGroup') tabGroup!: MatTabGroup;
+
+  selectedQuestions: QAItem[] = [];
+  filteredQuestions: QAItem[] = [];
+  selectedOption = '';
+  currentTabIndex = 0;
+  isModalOpen = false;
+  displayMode: 'modal' | 'page' = 'modal';
+  isLoading = false;
+  userId: any;
+  answers: Record<string, any> = {};
+  attemptedSubmit = false;
+  showProceedModal = false;
+  selectedCategory: string = '';
+
+  // NEW: Add submission status variables
+  showSubmissionPopup = false;
+  submissionMessage = '';
+  isSubmissionSuccess = false;
+  redirectTimer: any = null;
+  countdownProgress = 100;
+  countdownInterval: any = null;
+
+  categories = ['personal', 'locationfamily', 'lifestyle', 'educationcareer'];
+  categoriesMeta = [
+    { key: 'personal', title: 'Personal Info', icon: 'fa-user', color: '#f3a54c' },
+    { key: 'locationfamily', title: 'Family & Location', icon: 'fa-people-roof', color: '#ffcb7a' },
+    { key: 'lifestyle', title: 'Lifestyle', icon: 'fa-seedling', color: '#f3a54c' },
+    { key: 'educationcareer', title: 'Education & Career', icon: 'fa-briefcase', color: '#ffcb7a' }
+  ];
+
+  private readonly allowedRoles = new Set(['marriage', 'interview', 'partnership']);
+
+  /** Columns that are BIT in SQL Server and require 1/0 values */
+  private readonly BIT_FIELDS = new Set<string>([
+    'dual_citizenship',
+    'live_with_parents',
+    'support_parents_financially',
+    'own_pets'
+  ]);
+
+  // Added getter for icon next to heading
+  get headingIcon(): string {
+    switch (this.selectedOption) {
+      case 'marriage':
+        return 'fa-solid fa-ring';
+      case 'interview':
+        return 'fa-solid fa-user-tie';
+      case 'partnership':
+        return 'fa-solid fa-handshake';
+      default:
+        return 'fa-solid fa-layer-group';
+    }
+  }
+
+  // Dynamic hero background style used in template
+  get heroBackgroundStyle() {
+    const role = this.selectedOption || 'marriage';
+    const img = this.getBackgroundForRole(role);
+    return { 'background-image': `linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(${img})` } as { [k: string]: string };
+  }
+
+  // Combined content style for hero content div
+  get heroContentStyle() {
+    return {
+      ...this.heroBackgroundStyle,
+      'background-repeat': 'no-repeat',
+      'background-position': 'center center',
+      'background-attachment': 'fixed',
+      'background-size': 'cover',
+      'width': '100%',
+      'height': '100vh'
+    } as { [k: string]: string };
+  }
+
+  get totalRequired(): number {
+    return this.selectedQuestions.filter(q => q.required).length;
+  }
+
+  get answeredRequired(): number {
+    return this.selectedQuestions.filter(q => q.required && this.isAnswered(q)).length;
+  }
+
+  get progressPercent(): number {
+    return this.totalRequired ? Math.round((this.answeredRequired / this.totalRequired) * 100) : 0;
+  }
 
-  // If you already know the logged-in user id, set it here or load from localStorage in ngOnInit.
-  userId: number = 1;
+  get progressLabel(): string {
+    return `${this.answeredRequired} / ${this.totalRequired || 0} Required`;
+  }
 
-  // Template-driven answers storage (bound via [(ngModel)])
-  answers: any[] = [];
+  get allFieldsAnswered(): boolean {
+    return this.selectedQuestions.length > 0 && this.selectedQuestions.every(q => this.isAnswered(q));
+  }
+
+  get unansweredFields(): QAItem[] {
+    return this.selectedQuestions.filter(q => !this.isAnswered(q));
+  }
+
+  get unansweredCount(): number {
+    return this.unansweredFields.length;
+  }
+
+  // --- Category progress helpers ---
+  getCategoryQuestions(key: string): QAItem[] {
+    const norm = key.replace(/\s+/g, '').toLowerCase();
+    return this.selectedQuestions.filter(q => (q.category || '').replace(/\s+/g, '').toLowerCase() === norm);
+  }
+  getCategoryAnsweredCount(key: string): number {
+    return this.getCategoryQuestions(key).filter(q => this.isAnswered(q)).length;
+  }
+  getCategoryRequiredCount(key: string): number {
+    const qs = this.getCategoryQuestions(key);
+    const requiredCnt = qs.filter(q => q.required).length;
+    return requiredCnt || qs.length;
+  }
+  getCategoryPercent(key: string): number {
+    const denom = this.getCategoryRequiredCount(key) || 1;
+    return (this.getCategoryAnsweredCount(key) / denom) * 100;
+  }
+  getCategoryProgressLabel(key: string): string {
+    return `${this.getCategoryAnsweredCount(key)} / ${this.getCategoryRequiredCount(key)}`;
+  }
+
+  // NEW: Method to get the completed category key (only one at a time).
+  completedCategory(): string | null {
+    // Return the first category key that is fully completed
+    for (const cat of this.categoriesMeta) {
+      const total = this.getCategoryRequiredCount(cat.key);
+      const answered = this.getCategoryAnsweredCount(cat.key);
+      if (total > 0 && answered === total) {
+        return cat.key;
+      }
+    }
+    return null;
+  }
 
   constructor(
     private qaService: QuestionAnswerService,
-    private router: Router
+    private router: Router,
+    private route: ActivatedRoute
   ) { }
 
+  // NEW: Method to show submission popup and redirect
+  private showSubmissionSuccessPopup(): void {
+    console.log('Submission successful, preparing redirect to preferences');
+    console.log('User ID:', this.userId, 'Role:', this.selectedOption);
+
+    this.showSubmissionPopup = true;
+    this.isSubmissionSuccess = true;
+    // Updated message for next screen
+    this.submissionMessage = 'Profile submitted! Redirecting to preferences....';
+
+    // Reset countdown
+    this.countdownProgress = 100;
+
+    // Clear any existing timers
+    if (this.redirectTimer) {
+      clearTimeout(this.redirectTimer);
+    }
+    if (this.countdownInterval) {
+      clearInterval(this.countdownInterval);
+    }
+
+    // Start countdown animation
+    const countdownDuration = 5000; // 5 seconds
+    const intervalDuration = 50; // update every 50ms
+    const steps = countdownDuration / intervalDuration;
+    const progressDecrement = 100 / steps;
+
+    this.countdownInterval = setInterval(() => {
+      this.countdownProgress -= progressDecrement;
+      if (this.countdownProgress <= 0) {
+        this.countdownProgress = 0;
+        clearInterval(this.countdownInterval);
+      }
+    }, intervalDuration);
+
+    // Set redirect timer
+    this.redirectTimer = setTimeout(() => {
+      console.log('Auto-redirecting to preferences...');
+      this.redirectToPreferences();
+    }, countdownDuration);
+  }
+
+  private redirectToPreferences(): void {
+    this.showSubmissionPopup = false;
+    this.router.navigate(['/userPreference'], {
+      queryParams: {
+        user_id: this.userId,
+        role: this.selectedOption
+      }
+    });
+  }
+
+  // NEW: Navigate directly from hero to preferences
+  goToPreferences(): void {
+    if (!this.userId) {
+      const uid = localStorage.getItem('user_id');
+      if (uid) this.userId = Number(uid);
+    }
+    const role = this.selectedOption || 'marriage';
+    this.router.navigate(['/userPreference'], {
+      queryParams: {
+        user_id: this.userId,
+        role
+      }
+    });
+  }
+
+  onSelect(role: string, mode: 'modal' | 'page' = 'page'): void {
+    this.selectedOption = role;
+    this.displayMode = mode;
+    this.isModalOpen = mode === 'modal';
+    this.isLoading = true;
+    this.fetchQuestions(role);
+  }
+
   ngOnInit(): void {
-    // Optional: restore from localStorage if available
     const uid = localStorage.getItem('user_id');
     if (uid) {
-      const n = Number(uid);
-      if (!Number.isNaN(n)) this.userId = n;
+      this.userId = Number(uid);
+    }
+
+    this.selectedCategory = this.categoriesMeta[0]?.key || '';
+
+    // Restore answers from localStorage if available
+    const savedAnswers = localStorage.getItem('qa_answers');
+    if (savedAnswers) {
+      try {
+        this.answers = JSON.parse(savedAnswers);
+      } catch { }
     }
 
-    const savedRole = localStorage.getItem('role');
-    if (savedRole) this.selectedOption = savedRole;
+    // If navigated with role param -> show full page (not popup)
+    this.route.queryParamMap.subscribe(params => {
+      const role = (params.get('role') || '').toLowerCase();
+      if (this.allowedRoles.has(role)) {
+        this.onSelect(role, 'page');
+      }
+      // Scroll to questions-section if scrollTo param is present
+      const scrollTo = params.get('scrollTo');
+      if (scrollTo === 'questions-section') {
+        // Wait for questions to load, then scroll
+        const scrollAfterLoad = () => {
+          if (this.selectedQuestions.length) {
+            setTimeout(() => this.scrollToQuestions(), 200);
+          } else {
+            setTimeout(scrollAfterLoad, 100);
+          }
+        };
+        scrollAfterLoad();
+      }
+    });
   }
 
-  onSelect(role: string): void {
-    this.selectedOption = role;
-    this.fetchQuestions(role);
-    this.isModalOpen = true;
-    this.assignRoleToUser(role);
+  selectCategory(key: string): void { this.selectedCategory = key; }
+  scrollToCategory(key: string): void { this.selectCategory(key); }
+
+  private getScrollOffset(): number {
+    const header = document.querySelector('.topbar') as HTMLElement | null;
+    const categoryNav = document.querySelector('.category-nav-wrapper') as HTMLElement | null;
+    let offset = 0;
+    if (header) offset += header.offsetHeight;
+    if (categoryNav) offset += categoryNav.offsetHeight;
+    return offset + 16; // Add some extra spacing
   }
 
-  assignRoleToUser(role: string): void {
-    const payload = {
-      user_id: this.userId,
-      role_name: role,
-      assigned_at: new Date().toISOString()
-    };
+  scrollToQuestions(): void {
+    setTimeout(() => {
+      const el = document.getElementById('questions-section');
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }, 100); // Delay to ensure DOM is rendered
+  }
+
+  trackQuestion(index: number, item: QAItem): string { return item.column_key; }
 
-    this.qaService.assignRole(payload).subscribe({
-      next: (res) => console.log('Role assigned successfully:', res),
-      error: (err: HttpErrorResponse) => console.error('Error assigning role:', err)
+  private applyMarriageOptionMapping(questions: QAItem[]): void {
+    const map: Record<string, string[] | undefined> = {
+      'gender': ['Male', 'Female', 'Other'],
+      'marital status': ['Single', 'Divorced', 'Widowed'],
+      'education level': ['School', 'Diploma', 'Bachelor', 'Master', 'Doctorate'],
+      'employment status': ['Student', 'Employed', 'Self-employed', 'Homemaker', 'Not working'],
+      'family type': ['Nuclear', 'Joint', 'Extended'],
+      'hobbies/interests': ['Music', 'Reading', 'Sports', 'Travel', 'Cooking', 'Art'],
+      'conflict approach': ['Avoid', 'Discuss calmly', 'Decide fast', 'Problem-solving'],
+      'financial style': ['Budget-oriented', 'Balanced', 'Spend-oriented'],
+      'relocation willingness': ['Yes', 'No', 'Maybe']
+    };
+    questions.forEach(q => {
+      const key = q.label.toLowerCase().trim();
+      const opts = map[key];
+      if (opts) { q.input_type = 'select'; q.options = opts; }
     });
   }
 
   fetchQuestions(role: string): void {
     this.qaService.getQuestions(role).subscribe({
       next: (data: QAItem[]) => {
+        // Process questions to ensure proper formatting
+        if (role === 'marriage') this.applyMarriageOptionMapping(data);
         this.selectedQuestions = data;
-        // Prepare answers array for template-driven binding
-        this.answers = new Array(data.length).fill('');
-        console.log('Fetched questions:', data);
+        this.answers = {};
+        data.forEach(q => { this.answers[q.column_key] = q.input_type === 'multiselect' ? [] : ''; });
+        this.isLoading = false;
+        this.attemptedSubmit = false;
+        if (role === 'marriage') {
+          this.displayMode = 'page';
+          this.isModalOpen = false;
+        } else if (this.displayMode === 'modal') {
+          this.isModalOpen = true;
+        } else {
+          this.isModalOpen = false;
+        }
+        this.selectedCategory = this.categoriesMeta[0]?.key || '';
+        this.filterQuestionsByCategory('personal');
       },
-      error: (err: HttpErrorResponse) => console.error('Error fetching questions:', err)
+      error: (err: HttpErrorResponse) => {
+        console.error('Error fetching questions:', err);
+        this.isLoading = false;
+      }
     });
   }
 
-  submitAnswers(): void {
-    const role = (this.selectedOption || '').toLowerCase(); // 'marriage' | 'interview' | 'partnership'
-    const userIdNum = Number(this.userId);
+  filterQuestionsByCategory(category: string): void {
+    const norm = category.replace(/\s+/g, '').toLowerCase();
+    this.filteredQuestions = this.selectedQuestions.filter(q => (q.category || '').replace(/\s+/g, '').toLowerCase() === norm);
+  }
+
+  getQuestionsByCategory(category: string): QAItem[] {
+    const norm = category.replace(/\s+/g, '').toLowerCase();
+    return this.selectedQuestions.filter(q => (q.category || '').replace(/\s+/g, '').toLowerCase() === norm);
+  }
+
+  onAnswerChange(key: string, value: any): void {
+    this.answers[key] = value;
+    localStorage.setItem('qa_answers', JSON.stringify(this.answers));
+    // Auto-move to next category if current is completed and not last
+    const currentIndex = this.categoriesMeta.findIndex(cat => cat.key === this.selectedCategory);
+    const currentCat = this.categoriesMeta[currentIndex];
+    const total = this.getCategoryRequiredCount(currentCat.key);
+    const answered = this.getCategoryAnsweredCount(currentCat.key);
+    if (total > 0 && answered === total && currentIndex < this.categoriesMeta.length - 1) {
+      // Move to next category
+      this.selectedCategory = this.categoriesMeta[currentIndex + 1].key;
+    }
+  }
+
+  // Add handler for Languages Spoken checkbox group
+  onLanguagesCheckboxChange(event: Event, key: string): void {
+    const input = event.target as HTMLInputElement;
+    if (!Array.isArray(this.answers[key])) {
+      this.answers[key] = [];
+    }
+    if (input.checked) {
+      if (!this.answers[key].includes(input.value)) {
+        this.answers[key].push(input.value);
+      }
+    } else {
+      this.answers[key] = this.answers[key].filter((v: string) => v !== input.value);
+    }
+    localStorage.setItem('qa_answers', JSON.stringify(this.answers));
+    this.onAnswerChange(key, this.answers[key]);
+  }
+
+  isCurrentTabComplete(): boolean {
+    const cat = this.categories[this.currentTabIndex];
+    return this.getQuestionsByCategory(cat).every(q => !q.required || (this.answers[q.column_key] ?? '') !== '');
+  }
+
+  isAnswered(q: QAItem): boolean {
+    const v = this.answers[q.column_key];
+    if (q.input_type === 'multiselect') {
+      return Array.isArray(v) && v.length > 0;
+    }
+    return v !== undefined && v !== null && v !== '';
+  }
+
+  goToNextTab(group: MatTabGroup): void {
+    if (!group || group.selectedIndex == null) return;
+    const next = group.selectedIndex + 1;
+    if (next < (group as any)._tabs.length) { group.selectedIndex = next; this.currentTabIndex = next; }
+  }
+
+  private normalizeForBackend(obj: Record<string, any>): Record<string, any> {
+    const out: Record<string, any> = {};
+    for (const [k, v] of Object.entries(obj)) {
+      if (!this.BIT_FIELDS.has(k)) {
+        out[k] = v;
+        continue;
+      }
+      if (v === undefined || v === null || v === '') { out[k] = null; continue; }
+      if (typeof v === 'boolean') { out[k] = v ? 1 : 0; continue; }
+      if (typeof v === 'number') { out[k] = v !== 0 ? 1 : 0; continue; }
+      if (typeof v === 'string') {
+        const s = v.trim().toLowerCase();
+        if (['yes', 'true', 'y', '1'].includes(s)) { out[k] = 1; continue; }
+        if (['no', 'false', 'n', '0'].includes(s)) { out[k] = 0; continue; }
+        out[k] = v;
+        continue;
+      }
+      out[k] = v;
+    }
+    return out;
+  }
 
-    if (!role || !userIdNum) {
-      console.error('Role and user id are required.');
+  submitAnswers(): void {
+    this.attemptedSubmit = true;
+    // Validate required fields
+    const incompleteRequired = this.selectedQuestions.filter(q => q.required && !this.isAnswered(q));
+    if (incompleteRequired.length) {
+      const first = incompleteRequired[0];
+      const el = document.getElementById('q-' + first.column_key);
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
       return;
     }
 
-    // Build the "fields" object from questions + answers.
-    // We prefer the backend-provided DB column name: r.column_key.
+    this.isLoading = true;
+    // Normalize answers (only affects BIT fields)
+    const normalizedAnswers = this.normalizeForBackend(this.answers);
+
+    // Build fields by column_key
     const fields: Record<string, any> = {};
-    this.selectedQuestions.forEach((q: QAItem, idx: number) => {
-      const key =
-        (q as any).column_key ||   // from RoleQuestions table
-        (q as any).key ||          // fallback if present
-        `q_${idx + 1}`;            // final fallback
-      fields[key] = this.answers[idx] ?? '';
+    this.selectedQuestions.forEach((q) => {
+      fields[q.column_key] = normalizedAnswers[q.column_key] ?? null;
     });
 
-    // Many insert statements expect created_at. Add if your backend uses it.
-    fields['created_at'] = new Date().toISOString();
+    // Build payload for Marriage table
+    const payload = {
+      user_id: this.userId,
+      ...fields,
+      created_at: new Date().toISOString()
+    };
 
-    // Service signature: submitAnswers(role: string, userId: number, fields: Record<string, any>)
-    this.qaService.submitAnswers(role, userIdNum, fields).subscribe({
+    this.qaService.submitAnswers(this.selectedOption, this.userId, payload).subscribe({
       next: () => {
-        // Close profile modal
-        this.isModalOpen = false;
-
-        // Persist for LLM Quiz
-        localStorage.setItem('user_id', String(userIdNum));
-        localStorage.setItem('role', role);
-        // Log the values passed to router
-        console.log('Navigating to LLM Quiz with queryParams:', fields);
-        // Navigate to LLM Quiz with autostart
-        // Prepare queryParams
-        const queryParams = {
-          user_id: String(userIdNum),
-          role,
-          fields,           // Fields object (you might want to reconsider passing this depending on the size/complexity)
-          autostart: '1'
-        };
-
-        // Log the queryParams before navigating
-        this.router.navigate(['/llmquiz'], {
-          queryParams: { user_id: String(userIdNum), role, fields, autostart: '1' }
+        this.isLoading = false;
+        // Redirect to user preferences after successful submit
+        this.router.navigate(['/userPreference'], {
+          queryParams: {
+            user_id: this.userId,
+            role: this.selectedOption || 'marriage'
+          }
         });
-        console.log('queryParams:', queryParams);
       },
       error: (err: HttpErrorResponse) => {
-        console.error('Error submitting answers:', err);
+        this.isLoading = false;
+        const reason = err.status === 0
+          ? 'Network/CORS or server unreachable'
+          : (err.error?.error || err.message || 'Server error');
+        console.error('Submit failed:', err);
+        alert(`Submit failed: ${reason}`);
       }
     });
   }
 
-  onAnswerChange(i: number, v: any): void {
-    this.answers[i] = v;
+  dismissProceedModal(): void {
+    this.showProceedModal = false;
   }
 
   closeModal(): void {
     this.isModalOpen = false;
+    if (this.displayMode === 'modal') { this.selectedQuestions = []; this.answers = {}; this.selectedOption = ''; }
   }
 
-  goHome(): void {
-    this.router.navigate(['/intro-page']);
+  goHome(): void { this.router.navigate(['/']); }
+
+  getBackgroundForRole(role: string): string {
+    const backgrounds: Record<string, string> = {
+      marriage: 'assets/wedding.png',
+      interview: 'assets/interview.png',
+      partnership: 'assets/partnership.png'
+    };
+    return backgrounds[role] || 'assets/default-bg.png';
   }
 
-  // i18n helper (keep if used in template)
-  tr(key: string): string {
-    const dict = {
-      brand: 'Pykara',
-      signup: 'Sign up',
-      signin: 'Sign in',
-      tagline: 'Discover your profile. Match with purpose.',
-      subtext: 'Py-Match runs a short, privacy-first assessment and builds a profile used for responsible matching. Color results are not shown to users.',
-      getStarted: 'Get started',
-      tos: 'Terms',
-      privacy: 'Privacy'
+  getCategoryImage(key: string): string {
+    const images: Record<string, string> = {
+      personal: 'assets/marriage-match/17.png',
+      locationfamily: 'assets/marriage-match/12.png',
+      lifestyle: 'assets/marriage-match/7.png',
+      educationcareer: 'assets/marriage-match/15.png'
     };
-    return dict[key as keyof typeof dict] ?? key;
+    return images[key] || 'assets/marriage-match/9.png';
+  }
+
+  getPlaceholder(question: QAItem): string {
+    if (question.placeholder) return question.placeholder;
+    switch (question.input_type) {
+      case 'date': return 'Select date';
+      case 'select': return 'Select option';
+      default: return 'Enter your answer';
+    }
+  }
+
+  showError(q: QAItem): boolean {
+    return this.attemptedSubmit && !!q.required && !this.isAnswered(q);
   }
 }

src/app/quiz/quiz.component.css

@@ -1,126 +0,0 @@
-/* General styling for the quiz container */
-.quiz-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh; /* Full viewport height */
-  background-image: url('src/assets/background.png');
-  background-size: cover; /* Ensures the image covers the entire area */
-  background-position: center; /* Center the image */
-  background-repeat: no-repeat; /* Prevents the image from repeating */
-  margin: 0; /* Remove default margin */
-}
-
-
-/* Overlay for dimming the background */
-.quiz-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Card for the quiz with soft green background */
-.quiz-card {
-  background-color: #eaf6e2; /* Soft light green background */
-  border-radius: 15px;
-  padding: 30px;
-  text-align: center;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-  max-width: 450px;
-  width: 100%;
-  position: relative;
-}
-
-/* Profile image */
-.profile-picture {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-bottom: 20px;
-}
-
-/* Title styling */
-.quiz-title {
-  font-size: 22px;
-  font-weight: bold;
-  color: #4caf50; /* Green color */
-  margin-bottom: 20px;
-}
-
-/* Question text styling */
-.question {
-  font-size: 18px;
-  color: #333;
-  margin-bottom: 30px;
-}
-
-/* Button styling for options */
-.option-button {
-  background-color: #4caf50;
-  color: white;
-  padding: 12px 20px;
-  margin: 10px;
-  border: none;
-  border-radius: 10px;
-  width: 100%;
-  text-align: center;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-  .option-button:hover {
-    background-color: #45a049;
-  }
-
-/* Button styling for "Next" and "Submit" */
-.next-button, .submit-button {
-  background-color: #4caf50;
-  color: white;
-  padding: 12px 20px;
-  border: none;
-  border-radius: 10px;
-  margin-top: 20px;
-  width: 100%;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-  .next-button:hover, .submit-button:hover {
-    background-color: #45a049;
-  }
-
-/* Success Popup */
-.success-popup {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 20px;
-  border-radius: 10px;
-  text-align: center;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-}
-
-  .success-popup button {
-    background-color: #4caf50;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 15px;
-    transition: background-color 0.3s ease;
-  }
-
-    .success-popup button:hover {
-      background-color: #45a049;
-    }

src/app/quiz/quiz.component.html

@@ -1,35 +0,0 @@
-<div class="quiz-container">
-  <div class="quiz-overlay">
-    <div class="quiz-card">
-      <h1 class="quiz-title">QUIZ</h1>
-      <div class="question-container">
-        <p class="question">{{ questions[currentQuestionIndex].question }}</p>
-        <div class="options">
-          <button *ngFor="let option of questions[currentQuestionIndex].options"
-                  class="option-button"
-                  (click)="selectOption(option)">
-            {{ option }}
-          </button>
-        </div>
-        <button *ngIf="currentQuestionIndex < questions.length - 1"
-                class="next-button"
-                [disabled]="!isOptionSelected"
-                (click)="nextQuestion()">
-          Next
-        </button>
-        <button *ngIf="currentQuestionIndex === questions.length - 1"
-                class="submit-button"
-                [disabled]="!isOptionSelected"
-                (click)="submitQuiz()">
-          Submit
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Success Popup -->
-<div *ngIf="isSubmitted" class="success-popup">
-  <p>Your test is submitted!</p>
-  <button (click)="closePopup()">Close</button>
-</div>

src/app/quiz/quiz.component.ts

@@ -1,107 +0,0 @@
-import { Component, OnInit  } from '@angular/core';
-import { Router } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { RouterLink } from '@angular/router';
-interface QuizQuestion {
-  question: string;
-  options: string[];
-  // store the selected answer; start as null and set to a string later
-  answer: string | null;
-}
-
-@Component({
-  selector: 'app-quiz',
-  standalone: true,
-  imports: [FormsModule, CommonModule, RouterLink],
-  templateUrl: './quiz.component.html',
-  styleUrls: ['./quiz.component.css'],
-})
-export class QuizComponent implements OnInit {
-
-  constructor(public router: Router) { }
-  ngOnInit(): void { }
-  questions: QuizQuestion[] = [
-    {
-      question: 'You are leading a small team. A new member is quiet and avoids discussions. What will you do first?',
-      options: [
-        'Assign a simple task and review later',
-        'Speak privately to understand concerns',
-        'Ask them to present in the next meeting',
-        'Ignore it and focus on deadlines'
-      ],
-      answer: null,
-    },
-    {
-      question: 'A stakeholder requests a big change late in the sprint. What is your approach?',
-      options: [
-        'Accept it immediately',
-        'Reject it immediately',
-        'Evaluate impact and negotiate scope/time',
-        'Ask the team to work overtime'
-      ],
-      answer: null,
-    },
-    {
-      question: 'Two teammates disagree on a solution. How do you proceed?',
-      options: [
-        'Pick the faster option',
-        'Let them resolve it alone',
-        'Facilitate a short decision session with facts',
-        'Escalate to management'
-      ],
-      answer: null,
-    },
-    {
-      question: 'You find a recurring production bug. What is your first step?',
-      options: [
-        'Hotfix every time',
-        'Add logs and create a root-cause ticket',
-        'Disable the feature',
-        'Rollback to an old release'
-      ],
-      answer: null,
-    },
-    {
-      question: 'Your release is on time but test coverage is low. What will you do?',
-      options: [
-        'Release as-is',
-        'Block the release',
-        'Risk-assess, add critical tests, and plan coverage',
-        'Let QA handle it later'
-      ],
-      answer: null,
-    },
-  ];
-
-  currentQuestionIndex = 0;
-  isOptionSelected = false;   // controls Next/Submit button enabled state
-  isSubmitted = false;        // controls the success popup
-
-  selectOption(option: string): void {
-    this.questions[this.currentQuestionIndex].answer = option; // type-safe: string | null
-    this.isOptionSelected = true;
-  }
-
-  nextQuestion(): void {
-    if (!this.isOptionSelected) return;
-    this.currentQuestionIndex++;
-
-    // Reset the enable/disable state for the next question
-    const next = this.questions[this.currentQuestionIndex];
-    this.isOptionSelected = !!next?.answer; // true if already answered, else false
-  }
-
-  submitQuiz(): void {
-    if (!this.isOptionSelected) return;
-    this.isSubmitted = true; // shows the “Your test is submitted!” popup
-  }
-
-  closePopup(): void {
-    this.isSubmitted = false;
-    // Optionally navigate or reset after closing:
-    // this.currentQuestionIndex = 0;
-    // this.questions.forEach(q => (q.answer = null));
-    // this.isOptionSelected = false;
-  }
-}

src/app/quiz/quiz.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { QuizService } from './quiz.service';
-
-describe('QuizService', () => {
-  let service: QuizService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(QuizService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/quiz/quiz.service.ts

@@ -1,36 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class QuizService {
-
-  // hf.space => HF backend; else => local Flask
-  private baseUrl = location.hostname.endsWith('hf.space')
-    ? 'https://pykara-py-match-backend.hf.space'
-    : 'http://localhost:5000';
-
-  //private apiUrl = 'http://localhost:5000';  // Your Flask backend URL
-
-  constructor(private http: HttpClient) { }
-
-  // Start the quiz by sending the profile and role
-  startQuiz(nQuestions: number, batchSize: number, role: string, profile: any): Observable<any> {
-    return this.http.post<any>(`${this.baseUrl}/q/start`, {
-      n_questions: nQuestions,
-      batch_size: batchSize,
-      role: role,
-      profile: profile
-    });
-  }
-
-  // Fetch next question
-  nextQuestion(sessionId: string, selectedColor: string): Observable<any> {
-    return this.http.post<any>(`${this.baseUrl}/q/next`, {
-      session_id: sessionId,
-      selected_color: selectedColor
-    });
-  }
-}

src/app/services/llm-qa.service.ts

@@ -63,25 +63,23 @@ export interface NextResponse {
 
 @Injectable({ providedIn: 'root' })
 export class LlmQaService {
+  private readonly api: string;
+  private readonly baseUrl: string;
 
-  private readonly api = location.hostname.endsWith('hf.space')
-    ? 'https://pykara-py-match-backend.hf.space'
-    : 'http://localhost:5000';
-
-  private readonly baseUrl = `${this.api}/api/questions`;
-  // Change this to your API origin if needed.
-  //private readonly api = 'http://localhost:5000';
-  //private baseUrl = 'http://127.0.0.1:5000/api/questions';
-  //test
-  constructor(private http: HttpClient) { }
-
+  constructor(private http: HttpClient) {
+    // Initialize URLs based on the current hostname
+    this.api = typeof location !== 'undefined' && location.hostname.endsWith('hf.space')
+      ? 'https://pykara-py-match-backend.hf.space'
+      : 'http://localhost:5000';
 
+    this.baseUrl = `${this.api}/api/questions`;
+  }
 
-  start(req: StartRequest) {
+  start(req: StartRequest): Observable<StartResponse> {
     return this.http.post<StartResponse>(`${this.api}/llm/start`, req);
   }
 
-  next(req: NextRequest) {
+  next(req: NextRequest): Observable<NextResponse> {
     return this.http.post<NextResponse>(`${this.api}/llm/next`, req);
   }
 }

src/app/user-preferences/user-preferences.component.css

@@ -0,0 +1,438 @@
+/* Reuse Question Answer styles for shared hero and info-card UI */
+@import url('../question-answer/question-answer.component.css');
+
+/* Professional Styles for User Preferences Component - Light theme to match question-answer */
+.preferences-container {
+  background: #f8fafc;
+  padding: 7.5vw 0 1.5vw 0;
+  color: #1a202c;
+}
+
+.preferences-content {
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  border: 1px solid #e3e5e8;
+}
+
+.preferences-section {
+  padding: 3rem;
+}
+
+.preferences-header {
+  display: flex;
+  gap: 3rem;
+  margin-bottom: unset !important;
+  align-items: flex-start;
+}
+
+.preferences-image {
+  flex: 0 0 300px;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+  .preferences-image::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(243, 165, 76, 0.1), rgba(0, 255, 136, 0.1));
+    z-index: 1;
+  }
+
+  .preferences-image img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    position: relative;
+    z-index: 0;
+    border-radius: 16px;
+  }
+
+.preferences-info {
+  flex: 1;
+}
+
+.section-description {
+  color: #4a5568;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* Progress Indicator (match QA) */
+.progress-indicator {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 8px;
+  background: #e2e8f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(135deg, #f3a54c, #ffcb7a);
+  border-radius: 4px;
+  transition: width 0.4s ease;
+}
+
+.progress-indicator small {
+  color: #4a5568;
+  font-weight: 600;
+  min-width: 80px;
+}
+
+/* Category Sections */
+.category-section {
+  margin-bottom: 3rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+  .category-section:last-of-type {
+    border-bottom: none;
+    margin-bottom: 2rem;
+  }
+
+/* category-title is a button; reset to look like a heading */
+.category-title {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0 0 1.5rem 0;
+  text-align: left;
+  font: inherit;
+  cursor: default;
+
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #2d3748;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid #f3a54c;
+  display: inline-block;
+}
+
+.category-title:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Preferences Form */
+.preferences-form {
+  margin-top: 2rem;
+}
+
+/* Form Controls */
+.form-control {
+  width: 100%;
+  padding: 0.875rem 1rem;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+  background: white;
+  color: #1a202c;
+  font-family: inherit;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+  .form-control:focus {
+    outline: none;
+    border-color: #f3a54c;
+    box-shadow: 0 0 0 3px rgba(243, 165, 76, 0.1);
+  }
+
+  .form-control::placeholder {
+    color: #718096;
+  }
+
+/* Checkbox Options */
+.checkbox-options {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+  .checkbox-options .question-card {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    max-height: 260px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+.checkbox-option {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.2vw;
+  background: #f7fafc;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  border: 2px solid transparent;
+  color: #2d3748;
+  margin-bottom: unset !important;
+}
+.checkbox-options {
+  overflow: scroll;
+  height: 8vh;
+}
+  .checkbox-option:hover {
+    background: #edf2f7;
+    border-color: #f3a54c;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(243, 165, 76, 0.15);
+  }
+
+  .checkbox-option input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+.checkmark {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  background-color: white;
+  border: 2px solid #cbd5e0;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+}
+
+.checkbox-option input:checked ~ .checkmark {
+  background-color: #f3a54c;
+  border-color: #f3a54c;
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+  left: 6px;
+  top: 2px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.checkbox-option input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Questions Grid - ensure consistent card widths */
+.questions-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: unset !important;
+  margin-bottom: 2rem;
+  align-items: start;
+  justify-items: stretch;
+}
+
+.question-card {
+  background: white;
+  border: 2px solid #f7fafc;
+  border-radius: 16px;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+  position: relative;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  box-sizing: border-box;
+  height: 18vh;
+  overflow-y: auto;
+  color: #1a202c;
+}
+
+  .question-card:hover {
+    border-color: #f3a54c;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(243, 165, 76, 0.15);
+  }
+
+  .question-card label {
+    display: flex;
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+    color: #2d3748;
+    font-size: 0.95rem;
+    /*line-height: 1.4;*/
+    overflow-wrap: anywhere;
+  }
+
+.question-card.answered {
+  border-color: #00d68f !important;
+  background: linear-gradient(135deg, #e6fff5 60%, #f7fafc 100%);
+  box-shadow: 0 4px 16px rgba(0, 214, 143, 0.12);
+}
+
+/* Submit Section */
+.submit-section {
+  text-align: center;
+  padding: 2rem 0 0;
+  border-top: 1px solid #e2e8f0;
+  margin-top: 2rem;
+}
+
+.submit-btn {
+  padding: 1rem 2.5rem;
+  font-size: 1.1rem;
+  background: linear-gradient(135deg, #f3a54c, #ffcb7a);
+  color: #111;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(243, 165, 76, 0.3);
+}
+
+  .submit-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(243, 165, 76, 0.4);
+  }
+
+  .submit-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+
+  /* Modal Styles - light */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: white;
+  padding: 3rem;
+  border-radius: 16px;
+  max-width: 460px;
+  text-align: center;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  border: 1px solid #e3e5e8;
+}
+
+.success-title {
+  color: #48bb78;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.error-title {
+  color: #e53e3e;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.modal p {
+  color: #4a5568;
+  margin-bottom: 2rem;
+  line-height: 1.5;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: #718096;
+}
+
+.empty-state-text {
+  font-size: 1.1rem;
+}
+
+/* Responsive Design for Preferences */
+@media (max-width: 1024px) {
+  .questions-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .preferences-header {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .preferences-image {
+    flex: none;
+    width: 100%;
+  }
+
+  .preferences-section {
+    padding: 2rem;
+  }
+
+  .questions-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .category-title {
+    font-size: 1.3rem;
+  }
+
+  .modal {
+    margin: 1rem;
+    padding: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .preferences-section {
+    padding: 1.5rem;
+  }
+
+  .questions-grid {
+    gap: 1rem;
+  }
+
+  .question-card {
+    padding: 1.25rem;
+  }
+
+  .category-title {
+    font-size: 1.2rem;
+  }
+
+  .progress-indicator {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .modal {
+    padding: 1.5rem;
+  }
+}
+
+

src/app/user-preferences/user-preferences.component.html

@@ -0,0 +1,135 @@
+<div class="professional-page">
+  <!-- Loader Overlay -->
+  <div *ngIf="!questions.length" class="loader-overlay">
+    <div class="loader-container">
+      <img src="assets/Loader.gif" alt="Loading..." class="loader-gif" />
+    </div>
+  </div>
+
+  <!-- Loader Overlay (same as llm-quiz) -->
+  <div class="loader-overlay" *ngIf="isLoading">
+    <div class="loader-container">
+      <img src="assets/Loader.gif" alt="Loading..." class="loader-gif" />
+    </div>
+  </div>
+
+  <!-- Hero Section -->
+  <section class="hero">
+    <div class="content" [ngStyle]="heroContentStyle">
+      <div class="info-card">
+        <div class="info-card__icon">
+          <i class="fa-solid fa-sliders"></i>
+        </div>
+        <div class="info-card__content">
+          <h1 class="info-card__title"><i class="fa-solid fa-sliders"></i> Preferences</h1>
+          <p class="info-card__text">
+            Tell us what matters to you most. These preferences guide better matching and help highlight alignment.
+          </p>
+          <div class="info-card__actions">
+            <button class="btn btn-primary" (click)="scrollToPrefSection()">
+              Set Preferences
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Preferences Form -->
+  <div id="pref-section" class="preferences-container" *ngIf="questions.length">
+    <div class="container">
+      <!-- Category Navigation (like QA) -->
+      <div class="category-nav-wrapper">
+        <button class="btn btn-secondary" style="margin-bottom: 1rem;" (click)="goBackToQuestions()">
+          <i class="fa fa-arrow-left"></i> Go Back
+        </button>
+        <nav class="category-nav" aria-label="Question categories">
+          <button *ngFor="let cat of categoriesMeta" type="button"
+                  (click)="selectCategory(cat.key)"
+                  [class.active]="selectedCategory === cat.key"
+                  [class.completed]="getCategoryAnsweredCount(cat.key) === getQuestionsByCategory(cat.key).length && getQuestionsByCategory(cat.key).length > 0"
+                  [attr.aria-selected]="selectedCategory === cat.key"
+                  class="nav-chip">
+            <i class="fa-solid" [ngClass]="cat.icon"></i>
+            <span>{{ cat.title }}</span>
+            <span class="chip-progress" *ngIf="getQuestionsByCategory(cat.key).length">
+              {{ getCategoryAnsweredCount(cat.key) }}/{{ getQuestionsByCategory(cat.key).length }}
+            </span>
+          </button>
+        </nav>
+      </div>
+
+      <div class="preferences-content category-content">
+        <ng-container *ngFor="let cat of categoriesMeta; let last = last">
+          <section *ngIf="selectedCategory === cat.key" class="preferences-section category-section">
+            <div class="preferences-header category-header">
+              <div class="preferences-image category-image">
+                <img [src]="getCategoryImage(cat.key)" [alt]="cat.title" loading="lazy" />
+              </div>
+              <div class="preferences-info category-info">
+                <div class="title-section">
+                  <h2><i class="fa-solid" [ngClass]="cat.icon"></i> {{ cat.title }}</h2>
+                  <p class="section-description">Configure your matching preferences for this section.</p>
+                  <div class="progress-indicator">
+                    <div class="progress-bar">
+                      <div class="progress-fill" [style.width.%]="getCategoryPercent(cat.key)"></div>
+                    </div>
+                    <small>{{ getCategoryProgressLabel(cat.key) }}</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <form [formGroup]="form" (ngSubmit)="submit()" class="preferences-form">
+              <div class="questions-grid">
+                <div class="question-card" *ngFor="let q of getQuestionsByCategory(cat.key)">
+                  <label [attr.for]="q.column_key">{{ q.question }}</label>
+
+                  <!-- Select -->
+                  <select *ngIf="q.input_type === 'select'"
+                          [formControlName]="q.column_key"
+                          [id]="q.column_key"
+                          class="form-control"
+                          (change)="onInputChange(q.column_key)">
+                    <option value="">Select an option</option>
+                    <option *ngFor="let opt of getOptions(q)" [value]="opt">{{ opt }}</option>
+                  </select>
+
+                  <!-- Text -->
+                  <input *ngIf="q.input_type === 'text'"
+                         type="text"
+                         [formControlName]="q.column_key"
+                         [id]="q.column_key"
+                         placeholder="Enter your preference"
+                         class="form-control"
+                         (input)="onInputChange(q.column_key)" />
+
+                  <!-- Multi select (checkbox group) -->
+                  <div *ngIf="q.input_type === 'multi_select'" class="checkbox-options">
+                    <label class="checkbox-option" *ngFor="let opt of getOptions(q)">
+                      <input type="checkbox"
+                             [value]="opt"
+                             (change)="onCheckboxChange($event, q.column_key); onInputChange(q.column_key)" />
+                      <span class="checkmark"></span>
+                      {{ opt }}
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="submit-section" *ngIf="last">
+                <button class="btn submit-btn" type="submit">
+                  <i class="fa-solid fa-floppy-disk"></i> Save Preferences
+                </button>
+              </div>
+            </form>
+          </section>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <div class="empty-state" *ngIf="!questions.length && !isLoading">
+    <p class="empty-state-text">Loading your preference questions...</p>
+  </div>
+</div>

src/app/user-preferences/user-preferences.component.ts

@@ -0,0 +1,280 @@
+import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';
+import { FormBuilder, FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { Router, ActivatedRoute } from '@angular/router';
+import { UserPreferencesService, ExpectationQuestion } from './user-preferences.service';
+
+@Component({
+  selector: 'app-user-preferences',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './user-preferences.component.html',
+  styleUrls: ['./user-preferences.component.css']
+})
+export class UserPreferencesComponent implements OnInit {
+  questions: ExpectationQuestion[] = [];
+  form!: FormGroup;
+  user_id = 1; // fallback; will be overridden by query/localStorage
+  role: string | null = null;
+  isLoading = true;
+  showModal = false;
+  progress = 0;
+  savedSuccessfully = false;
+
+  // Merge Family and Personality & Values into one tab
+  categoriesMeta: Array<{ key: string; title: string; icon: string }> = [
+    { key: 'personal_education', title: 'Personal & Education', icon: 'fa-user-graduate' },
+    { key: 'family_values', title: 'Family & Values', icon: 'fa-people-roof' },
+    { key: 'lifestyle', title: 'Lifestyle & Habits', icon: 'fa-heart' },
+    { key: 'finances_dealbreakers', title: 'Finances & Deal Breakers', icon: 'fa-sack-dollar' },
+    { key: 'interests', title: 'Interests & Social', icon: 'fa-bullseye' }
+  ];
+  selectedCategory: string = 'personal_education';
+
+  constructor(
+    private service: UserPreferencesService,
+    private fb: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private renderer: Renderer2,
+    private el: ElementRef
+  ) { }
+
+  // Match QA: background helpers
+  get heroBackgroundStyle() {
+    const role = (this.role || 'marriage').toLowerCase();
+    const img = this.getBackgroundForRole(role);
+    return { 'background-image': `linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(${img})` } as { [k: string]: string };
+  }
+
+  get heroContentStyle() {
+    return {
+      ...this.heroBackgroundStyle,
+      'background-repeat': 'no-repeat',
+      'background-position': 'center center',
+      'background-attachment': 'fixed',
+      'background-size': 'cover',
+      'width': '100%',
+      'height': '100vh'
+    } as { [k: string]: string };
+  }
+
+  private getBackgroundForRole(role: string): string {
+    const backgrounds: Record<string, string> = {
+      marriage: 'assets/wedding.png',
+      interview: 'assets/interview.png',
+      partnership: 'assets/partnership.png'
+    };
+    return backgrounds[role] || 'assets/default-bg.png';
+  }
+
+  ngOnInit(): void {
+    // Enhanced parameter capture - check both query params and localStorage
+    this.route.queryParamMap.subscribe(params => {
+      const qpUser = params.get('user_id');
+      const qpRole = params.get('role');
+
+      if (qpUser) {
+        this.user_id = Number(qpUser);
+        // Also store in localStorage for consistency
+        localStorage.setItem('user_id', qpUser);
+      } else {
+        // Fallback to localStorage
+        const lsUser = localStorage.getItem('user_id');
+        if (lsUser) this.user_id = Number(lsUser);
+      }
+
+      this.role = qpRole;
+
+      console.log('UserPreferences: user_id=', this.user_id, 'role=', this.role);
+    });
+
+    this.service.getQuestions().subscribe({
+      next: (data) => {
+        this.questions = data;
+        this.buildForm();
+        this.setInitialSelectedCategory();
+        this.isLoading = false;
+      },
+      error: () => {
+        this.isLoading = false;
+      }
+    });
+  }
+
+  buildForm(): void {
+    const group: any = {};
+    this.questions.forEach(q => {
+      if (q.input_type === 'multi_select') {
+        group[q.column_key] = this.fb.array([]);
+      } else {
+        group[q.column_key] = new FormControl('');
+      }
+    });
+    this.form = this.fb.group(group);
+
+    // Initialize progress after form is built
+    this.updateProgress();
+
+    // Keep progress up-to-date for all input types
+    this.form.valueChanges.subscribe(() => this.updateProgress());
+  }
+
+  // Normalize options to a string array for template binding
+  getOptions(q: ExpectationQuestion): string[] {
+    const opts = q.options;
+    if (Array.isArray(opts)) return (opts as string[]).filter(Boolean);
+    if (typeof opts === 'string') return opts.split(',').map(s => s.trim()).filter(Boolean);
+    return [];
+  }
+
+  // Get questions by category
+  getQuestionsByCategory(category: string): ExpectationQuestion[] {
+    if (category === 'personal_education') {
+      return this.questions.filter(q => q.category === 'demographics' || q.category === 'educationcareer');
+    }
+    if (category === 'finances_dealbreakers') {
+      return this.questions.filter(q => q.category === 'finances' || q.category === 'dealbreakers');
+    }
+    if (category === 'family_values') {
+      return this.questions.filter(q => q.category === 'family' || q.category === 'values');
+    }
+    return this.questions.filter(q => q.category === category);
+  }
+
+  selectCategory(key: string): void {
+    this.selectedCategory = key;
+  }
+
+  private setInitialSelectedCategory(): void {
+    const firstWithQuestions = this.categoriesMeta.find(c => this.getQuestionsByCategory(c.key).length > 0);
+    if (firstWithQuestions) {
+      this.selectedCategory = firstWithQuestions.key;
+    }
+  }
+
+  getCategoryAnsweredCount(key: string): number {
+    const qs = this.getQuestionsByCategory(key);
+    return qs.reduce((acc, q) => {
+      const ctrl = this.form?.get(q.column_key);
+      if (!ctrl) return acc;
+      const val = ctrl.value;
+      if (Array.isArray(val)) return acc + (val.length > 0 ? 1 : 0);
+      return acc + (!!val && val.toString().trim().length > 0 ? 1 : 0);
+    }, 0);
+  }
+
+  getCategoryPercent(key: string): number {
+    const total = this.getQuestionsByCategory(key).length || 1;
+    const answered = this.getCategoryAnsweredCount(key);
+    return Math.round((answered / total) * 100);
+  }
+
+  getCategoryProgressLabel(key: string): string {
+    const total = this.getQuestionsByCategory(key).length;
+    const answered = this.getCategoryAnsweredCount(key);
+    return `${answered}/${total} answered`;
+  }
+
+  getCategoryImage(key: string): string {
+    const images: Record<string, string> = {
+      personal_education: 'assets/marriage-match/1.png',
+      lifestyle: 'assets/marriage-match/3.png',
+      family_values: 'assets/marriage-match/4.png',
+      interests: 'assets/marriage-match/6.png',
+      finances_dealbreakers: 'assets/marriage-match/7.png'
+    };
+    return images[key] || 'assets/marriage-match/9.png';
+  }
+
+  onCheckboxChange(event: any, columnKey: string) {
+    const formArray: FormArray = this.form.get(columnKey) as FormArray;
+    if (event.target.checked) {
+      formArray.push(new FormControl(event.target.value));
+    } else {
+      const index = formArray.controls.findIndex(x => x.value === event.target.value);
+      formArray.removeAt(index);
+    }
+    this.updateProgress();
+  }
+
+  onInputChange(columnKey: string): void {
+    // Auto-move to next category if current is completed and not last
+    const currentIndex = this.categoriesMeta.findIndex(cat => cat.key === this.selectedCategory);
+    const currentCat = this.categoriesMeta[currentIndex];
+    const total = this.getQuestionsByCategory(currentCat.key).length;
+    const answered = this.getCategoryAnsweredCount(currentCat.key);
+    if (total > 0 && answered === total && currentIndex < this.categoriesMeta.length - 1) {
+      // Move to next category
+      this.selectedCategory = this.categoriesMeta[currentIndex + 1].key;
+    }
+  }
+
+  scrollToPrefSection(): void {
+    const el = document.getElementById('pref-section');
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  updateProgress(): void {
+    const total = Object.keys(this.form.controls).length || 1;
+    const filled = Object.values(this.form.value).filter(v => {
+      if (Array.isArray(v)) return v.length > 0;
+      return !!v && v.toString().trim().length > 0;
+    }).length;
+    this.progress = Math.round((filled / total) * 100);
+  }
+
+  submit(): void {
+    if (this.form.valid) {
+      this.savedSuccessfully = false;
+      this.showModal = true;
+
+      const payload = {
+        user_id: this.user_id,
+        ...this.form.value
+      };
+
+      this.service.saveResponse(payload).subscribe({
+        next: () => {
+          this.savedSuccessfully = true;
+          // Redirect to LLM quiz after successful save
+          this.router.navigate(['/llmquiz'], {
+            queryParams: {
+              user_id: this.user_id,
+              role: this.role || 'marriage',
+              autostart: '1'
+            }
+          });
+        },
+        error: (err) => {
+          this.savedSuccessfully = false;
+          console.error('Error saving preferences:', err);
+        }
+      });
+    }
+  }
+
+  closeModal(): void {
+    this.showModal = false;
+    if (this.savedSuccessfully) {
+      // Redirect to LLM quiz after successful save
+      this.router.navigate(['/llmquiz'], {
+        queryParams: {
+          user_id: this.user_id,
+          role: this.role || 'marriage',
+          autostart: '1'
+        }
+      });
+    }
+  }
+
+  goBackToQuestions(): void {
+    this.router.navigate(['/question-answer'], {
+      queryParams: {
+        user_id: this.user_id,
+        role: this.role || 'marriage',
+        scrollTo: 'questions-section'
+      }
+    });
+  }
+}

src/app/user-preferences/user-preferences.service.ts

@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+
+interface ExpectationQuestion {
+  id: number;
+  question: string;
+  options?: string | string[];
+  input_type: string;
+  column_key: string;
+  category: string;
+  required?: boolean;
+}
+
+interface UserExpectations {
+  pref_age_range?: string;
+  pref_location?: string;
+  pref_education_level?: string;
+  pref_employment_status?: string;
+  pref_countries?: string[];
+  pref_languages?: string[];
+  [key: string]: any;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserPreferencesService {
+
+  private baseUrl: string;
+
+  constructor(private http: HttpClient) {
+    // Initialize baseUrl based on the current hostname
+    this.baseUrl = location.hostname.endsWith('hf.space')
+      ? 'https://pykara-py-match-backend.hf.space/api'
+      : 'http://localhost:5000/api';
+  }
+
+  getQuestions(): Observable<ExpectationQuestion[]> {
+    return this.http.get<ExpectationQuestion[]>(`${this.baseUrl}/expectation-questions`);
+  }
+
+  saveResponse(payload: any): Observable<any> {
+    return this.http.post(`${this.baseUrl}/expectation-response`, payload);
+  }
+
+  // Add the missing method that MatchingListComponent expects
+  getUserExpectations(userId: number): Observable<UserExpectations> {
+    // Replace with your actual API endpoint for getting user expectations
+    // return this.http.get<UserExpectations>(`${this.baseUrl}/user-expectations/${userId}`);
+
+    // Temporary fallback - return empty expectations
+    return of({});
+  }
+
+  // Optional: Add method to save expectations
+  saveUserExpectations(userId: number, expectations: UserExpectations): Observable<any> {
+    return this.http.post(`${this.baseUrl}/user-expectations/${userId}`, expectations);
+  }
+}
+
+// Only export once at the end of the file
+export type { UserExpectations, ExpectationQuestion };

src/index.html

@@ -2,11 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Py-Match</title>
+  <title>PyMatch</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="pykara-favicon.ico">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <!-- Font Awesome via CDN (ensures icons render immediately in dev) -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-4oV3h6Fh2bP7o4F1Yc7c5b8J9c1t1tO8S4ZV6Lr2d9Vd8YH9B6kFq5XvQG3vE1Z4w7xKJ7xk3hQxG8i3k8QqQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

src/main.ts

@@ -3,15 +3,18 @@ import { provideHttpClient } from '@angular/common/http';
 import { provideRouter, Routes } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { importProvidersFrom } from '@angular/core';
+import { MatchingListComponent } from './app/matching-list/matching-list.component';
+import { UserPreferencesComponent } from './app/user-preferences/user-preferences.component';
 
 import { AppComponent } from './app/app.component';
 import { IntroPageComponent } from './app/intro-page/intro-page.component';
 import { QuestionAnswerComponent } from './app/question-answer/question-answer.component';
 import { LlmQuizComponent } from './app/llm-quiz/llm-quiz.component';
-import { QuizComponent } from './app/quiz/quiz.component';
-import { SignInComponent } from './app/auth/sign-in/sign-in.component';
-import { SignUpComponent } from './app/auth/sign-up/sign-up.component';
+//import { SignInComponent } from './app/auth/sign-in/sign-in.component';
+//import { SignUpComponent } from './app/auth/sign-up/sign-up.component';
+
 import { QuestionAnswerService } from './app/question-answer/question-answer-service.service';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 const routes: Routes = [
   {
@@ -34,7 +37,12 @@ const routes: Routes = [
   { path: 'sign-up', redirectTo: 'auth/signup', pathMatch: 'full' },
   { path: 'question-answer', component: QuestionAnswerComponent },
   { path: 'llmquiz', component: LlmQuizComponent },
-  { path: 'quiz', component: QuizComponent },
+  { path: 'matchinglist', component: MatchingListComponent },
+  { path: 'userPreference', component: UserPreferencesComponent },
+  {
+    path: 'matchinglist/:id',
+    component: MatchingListComponent
+  },
   { path: '**', redirectTo: '' }
 ];
 
@@ -43,6 +51,7 @@ bootstrapApplication(AppComponent, {
     provideHttpClient(),
     provideRouter(routes),
     importProvidersFrom(FormsModule),
-    QuestionAnswerService
-  ]
+    QuestionAnswerService,
+    provideAnimations()
+]
 });

src/styles.css

@@ -1,17 +1,17 @@
+@import url('../node_modules/@fortawesome/fontawesome-free/css/all.min.css');
+
 @font-face {
   font-family: 'Roliana';
   src: url('/assets/font/Roliana-Regular.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
 }
-
 @font-face {
   font-family: 'EBGaramond-Regular';
   src: url('/assets/font/EBGaramond-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
-
 @font-face {
   font-family: 'EBGaramond-Medium';
   src: url('/assets/font/EBGaramond-Medium.ttf') format('truetype');
@@ -95,22 +95,14 @@ html, body {
   letter-spacing: var(--ls);
 }
 
-  .btn:hover {
-    transform: translateY(-1px);
-  }
-
-  .btn:active {
-    transform: translateY(0);
-  }
-
-  .btn.primary {
-    background: var(--black);
-    color: var(--white);
-  }
+  .btn:hover { transform: translateY(-1px); }
+  .btn:active { transform: translateY(0); }
+  .btn.primary { background: var(--black); color: var(--white); }
 
 .btn-ghost {
-  border-color: var(--border);
-  color: var(--text);
+  border: 2px solid #f3a54c;
+  color: white;
+  background: black;
 }
 
 /* Skip link for accessibility */
@@ -124,60 +116,24 @@ html, body {
   border-radius: 6px;
   letter-spacing: var(--ls);
 }
-
-  .skip-link:focus {
-    top: 8px;
-  }
+  .skip-link:focus { top: 8px; }
 
 /* Hero section */
 /*.hero { padding: 56px 0 72px; }*/
-.hero h1 {
-  margin: 0 0 12px 0;
-  font-size: clamp(28px, 4vw, 44px);
-  line-height: 1.15;
-  letter-spacing: var(--ls);
-}
-
-.hero p {
-  margin: 0 0 28px 0;
-  color: var(--muted);
-  max-width: 60ch;
-}
+  .hero h1 { margin: 0 0 12px 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: var(--ls); }
+  .hero p { margin: 0 0 28px 0; color: var(--muted); max-width: 60ch; }
 
 /* Card (optional info block) */
-.card {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 20px;
-  background: var(--white);
-  letter-spacing: var(--ls);
-}
+.card { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: var(--white); letter-spacing: var(--ls); }
 
 /* Simple grid */
-.actions {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
+.actions { display: flex; gap: 12px; flex-wrap: wrap; }
 
-html, body {
-  height: 100%;
-}
+html, body { height: 100%; }
+body { margin: 0; }
 
-body {
-  margin: 0;
-}
-
-span.mdc-tab__text-label {
-  color: white !important;
-  font-weight: bold !important; /*font-family: EBGaramond-Medium !important;*/
-  letter-spacing: var(--ls) !important;
-}
+span.mdc-tab__text-label { color: white !important; font-weight:bold !important; /*font-family: EBGaramond-Medium !important;*/ letter-spacing: var(--ls) !important; }
 
-body.mat-typography { font-family: Roboto, sans-serif !important;
-  letter-spacing: var(--ls);
-}
+body.mat-typography { /*font-family: EBGaramond-Medium !important;*/ letter-spacing: var(--ls); }
 
-.mat-h2, .mat-headline-6, .mat-typography .mat-h2, .mat-typography .mat-headline-6, .mat-typography h2, .mat-h3, .mat-subtitle-1, .mat-typography .mat-h3, .mat-typography .mat-subtitle-1, .mat-typography h3, .mat-h1, .mat-headline-5, .mat-typography .mat-h1, .mat-typography .mat-headline-5, .mat-typography h1 { /*font-family: EBGaramond-Medium !important; */
-  letter-spacing: var(--ls) !important;
-}
+.mat-h2, .mat-headline-6, .mat-typography .mat-h2, .mat-typography .mat-headline-6, .mat-typography h2, .mat-h3, .mat-subtitle-1, .mat-typography .mat-h3, .mat-typography .mat-subtitle-1, .mat-typography h3, .mat-h1, .mat-headline-5, .mat-typography .mat-h1, .mat-typography .mat-headline-5, .mat-typography h1 { /*font-family: EBGaramond-Medium !important; */letter-spacing: var(--ls) !important; }