Frontend update and image

src/app/app-routing.module.ts

@@ -17,14 +17,18 @@ import { AuthComponent } from './auth/auth.component';
 import { authGuard } from './auth/auth.guard';
 import { rootRedirectGuard } from './auth/root-redirect.guard';
 import { RootRedirectComponent } from './root-redirect/root-redirect.component';
+import { SignInComponent } from './sign-in/sign-in.component';
 
 
 // Define and export routes
 export const routes: Routes = [
-  //{ path: '', redirectTo: 'authentication', pathMatch: 'full' },
-  { path: '', component: RootRedirectComponent, canActivate: [rootRedirectGuard], pathMatch: 'full' },
+  // Default public home page
+  { path: '', component: HomeComponent, pathMatch: 'full' },
 
-  { path: 'home', component: HomeComponent, canActivate: [authGuard] },
+  // Public home route (no guard)
+  { path: 'home', component: HomeComponent },
+
+  // Protected module routes
   { path: 'chat', component: ChatComponent, canActivate: [authGuard] },
   { path: 'generate-questions', component: GenerateQuestionsComponent, canActivate: [authGuard] },
   { path: 'voice', component: VoiceComponent, canActivate: [authGuard] },
@@ -33,14 +37,15 @@ export const routes: Routes = [
   { path: 'vocabulary-builder', component: VocabularyBuilderComponent, canActivate: [authGuard] },
   { path: 'findword', component: FindwordComponent, canActivate: [authGuard] },
   { path: 'reading', component: ReadingComponent, canActivate: [authGuard] },
+
+  // Auth routes
   { path: 'authentication', component: AuthenticationComponent },
-  { path: 'auth', component: AuthComponent },
-  { path: '**', redirectTo: 'auth' },
+  // Use integrated SignIn (with embedded SignUp) for auth and login aliases
+  { path: 'auth', component: SignInComponent },
+  { path: 'login', component: SignInComponent },
 
-  //{ path: 'generate-questions', component: GenerateQuestionsComponent },
-  //{ path: 'chat', component: ChatComponent},
-  //{ path: 'findword', component: FindwordComponent },
-  //{ path: 'reading', component: ReadingComponent},
+  // Fallback
+  { path: '**', redirectTo: '' },
 
 
 ];

src/app/app.module.ts

@@ -16,9 +16,9 @@ import { FindwordComponent } from './findword/findword.component';
 import { ReadingComponent } from './reading/reading.component';
 import { AuthenticationComponent } from './authentication/authentication.component';
 import { AuthComponent } from './auth/auth.component';
-
 import { RootRedirectComponent } from './root-redirect/root-redirect.component';
-
+import { HeaderComponent } from './shared/header/header.component';
+import { SignInComponent } from './sign-in/sign-in.component';
 
 
 
@@ -48,7 +48,8 @@ import { RootRedirectComponent } from './root-redirect/root-redirect.component';
     AppRoutingModule,
     FormsModule,
     HttpClientModule,
-   
+    HeaderComponent, // standalone component imported for use in declared components
+    SignInComponent // import the standalone sign-in (which embeds sign-up)
   ],
   providers: [],
   bootstrap: [AppComponent]  // Bootstrap AppComponent

src/app/auth/auth.service.ts

@@ -85,9 +85,14 @@ export class AuthService {
         console.log('🔙 Response from backend:', response);
         this.clearTokens();
         this.clearAutoRefresh();  // ✅ Stop auto-refresh
+        this.setLoggedIn(false);  // ✅ Reflect logout in UI
       }),
       catchError(error => {
         console.error('❌ Error from backend:', error);
+        // Still ensure local state reflects logout
+        this.clearTokens();
+        this.clearAutoRefresh();
+        this.setLoggedIn(false);
         return throwError(() => error);
       })
     );

src/app/home/home.component.css

@@ -1,13 +1,8 @@
-
-
-/* Hero Section with Background Image */
 .hero {
   background: url('/assets/images/home/background.png') no-repeat;
   flex: 1;
 }
 
-
-
 .hero-text {
   color: white;
   text-align: left;
@@ -16,16 +11,16 @@
   transform: translate(1vw, 17vw);
 }
 
-
 h1 {
   font-size: 7vw;
   font-family: Amonk_Outline;
+  margin-bottom: 3vw;
 }
 
 .hero-text h2 {
   font-size: 1.5vw;
   font-weight: 600;
-  color: #00ff00; /* Green text */
+  color: #00ff00;
 }
 
 .hero-text p {
@@ -33,17 +28,13 @@ h1 {
   line-height: 1.5vw;
 }
 
-
-
-
-/* General Navbar Styles */
 .navbar {
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: fixed;
-  font-size: 1vw; /* Customize font size for navbar */
+  font-size: 1vw;
   width: 100%;
-  z-index: 1000; /* Ensures it stays above other content */
+  z-index: 1000;
 }
 
 .navbar-container {
@@ -53,29 +44,27 @@ h1 {
   padding: 0vw 1vw;
 }
 
-/* Left: Logo */
 .logo {
   display: flex;
   align-items: center;
-  gap: 1vw; /* Space between logo image and text */
+  gap: 1vw;
 }
 
   .logo img {
-    height: 5vw; /* Adjust image size using vw */
+    height: 5vw;
     width: auto;
     cursor: pointer;
   }
 
   .logo span {
-    font-size: 1.5vw; /* Customize font size for logo text */
+    font-size: 1.5vw;
     font-weight: bold;
     color: #007bff;
   }
 
-/* Center: Navigation Links */
 .nav-links {
   display: flex;
-  gap: 2vw; /* Space between nav links */
+  gap: 2vw;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -86,71 +75,140 @@ h1 {
   .nav-links li a {
     text-decoration: none;
     color: #333;
-    font-size: 1.5vw; /* Customize font size for nav links */
+    font-size: 1.5vw;
     font-weight: 700;
   }
 
-    .nav-links li a:hover {
+  .nav-links li .nav-link {
+    text-decoration: none;
+    color: #333;
+    font-size: 1.5vw;
+    font-weight: 700;
+  }
+
+    .nav-links li .nav-link:hover {
       color: #007bff;
     }
 
+  .nav-links li a:hover {
+    color: #007bff;
+  }
 
+.nav-link--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 
-/* Footer Section */
-.footer {
-  background-color: #2c2c2c;
-  color: #fff;
-  padding: 20px 10px;
-  text-align: center;
-  width: 100%;
+.login-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.4vw;
+  height: 2.4vw;
+  border-radius: 50%;
+  border: 2px solid #006780;
+  color: #006780;
+  background: #ffffff;
+  font-size: 1.2vw;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 2px 8px rgba(93,145,195,0.12);
+}
+
+  .login-button:hover {
+    background: #006780;
+    color: #ffffff;
+    transform: translateY(-1px) scale(1.05);
+    box-shadow: 0 4px 16px rgba(93,145,195,0.18);
+  }
+
+.nav-actions {
   position: relative;
-  bottom: -37vw;
+  padding-right: 1.5vw;
 }
 
-/* Social Media Icons Styling */
-.social-media {
-  margin-top: 10px;
-  display: flex;
+.avatar {
+  width: 2.4vw;
+  height: 2.4vw;
+  min-width: 32px;
+  min-height: 32px;
+  border-radius: 50%;
+  background: #e6f2ff;
+  border: 2px solid #137ec4;
+  color: #137ec4;
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
-  gap: 15px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(93,145,195,0.12);
 }
 
-  .social-media a {
-    color: #fff;
-    font-size: 20px;
-    text-decoration: none;
-    transition: color 0.3s ease;
-  }
+.avatar-lg {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #e6f2ff;
+  border: 2px solid #137ec4;
+  color: #137ec4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+}
 
-    .social-media a:hover {
-      color: #1e90ff; /* Change hover color as desired */
-    }
+.account-menu {
+  position: absolute;
+  top: 3.2vw;
+  right: 0;
+  min-width: 260px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
+  padding: 12px;
+  z-index: 1200;
+}
 
-  .social-media img {
-    width: 3vw; /* Adjust the size of the icons */
-    height: 3vw;
-    transition: transform 0.3s ease;
-  }
+.account-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 6px 6px 10px 6px;
+}
 
-    .social-media img:hover {
-      transform: scale(1.1); /* Slightly enlarge on hover */
-    }
+.account-meta {
+  display: flex;
+  flex-direction: column;
+}
 
-/* Responsive Design */
-@media (max-width: 768px) {
-  .social-media {
-    gap: 10px;
-  }
+.account-name {
+  font-weight: 800;
+  color: #111827;
+}
 
-    .social-media a {
-      font-size: 18px;
-    }
+.account-email {
+  color: #6b7280;
+  font-size: 0.9rem;
+}
 
-    .social-media img {
-      width: 5vw;
-      height: 5vw;
-    }
+.account-item {
+  padding: 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: #111827;
+}
+
+  .account-item:hover {
+    background: #f3f4f6;
+  }
+
+.account-menu hr {
+  margin: 8px 0;
+  border: none;
+  border-top: 1px solid #e5e7eb;
 }
+
 .card {
   background-color: white;
   border-radius: 10px;
@@ -160,7 +218,7 @@ h1 {
   width: 100%;
   max-width: 460px;
   margin: auto;
-  height:31vw;
+  cursor: pointer;
 }
 
   .card:hover {
@@ -178,46 +236,6 @@ h1 {
   text-align: left;
 }
 
-.card-title {
-  font-size: 1.5vw;
-  font-weight: bold;
-  color: #1a8ec1;
-}
-
-.content-wrapper {
-  max-height: 9vw;
-  overflow-y: hidden;
-  transition: max-height 0.3s ease;
-}
-
-  .content-wrapper.expanded {
-    max-height: 9vw;
-    overflow-y: auto;
-    padding-right: 0.5vw;
-  }
-
-  .content-wrapper p {
-    font-size: 1vw;
-   text-align:justify;
-    color: black;
-    /*font-weight: 700;*/
-  }
-
-
-.view-more-link {
-  display: inline-block;
-  margin-top: 0.5vw;
-  font-size: 1vw;
-  color: #007bff;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-  .view-more-link:hover {
-    color: #0056b3;
-  }
-
-
 .cards-section {
   text-align: center;
   padding: 3vw 2vw;
@@ -232,7 +250,6 @@ h1 {
   margin-bottom: 2vw;
 }
 
-
 .cards-container {
   gap: 3vw;
   justify-content: center;
@@ -242,17 +259,16 @@ h1 {
   width: 80%;
 }
 
-
 .card-buttons {
   display: flex;
   gap: 1vw;
   margin-top: 1vw;
   flex-wrap: nowrap;
-  justify-content: space-between;
+  justify-content: center;
 }
 
 .card-button {
-  white-space: nowrap; /* Prevent text wrapping */
+  white-space: nowrap;
   padding: 0.5vw 0.5vw;
   font-size: 1vw;
   font-weight: bold;
@@ -269,24 +285,287 @@ h1 {
     color: white;
   }
 
+.user-guide-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 2000;
+}
+
+.user-guide-modal {
+  position: fixed;
+  top: 52%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 38vw;
+  width: 50vw;
+  background: linear-gradient(135deg, #fff 80%, #e3fcec 100%);
+  color: #222;
+  box-shadow: 0 12px 40px rgba(93, 145, 195, .22);
+  border-radius: 18px;
+  padding: 1vw;
+  z-index: 2001;
+  overflow: visible;
+  border: 10px solid #009688;
+  box-sizing: border-box;
+}
 
-.nav-link--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  
+  .user-guide-modal > ul,
+  .user-guide-modal > ol {
+    max-height: 34.6vw;
+    overflow-y: auto;
+    padding-right: 0.5vw;
+    margin: 0;
+  }
+
+.user-guide-close-icon {
+  position: absolute;
+  top: -22px;
+  right: -22px;
+  background: #009688;
+  border: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2vw;
+  color: black;
+  cursor: pointer;
+  z-index: 2010;
+  box-shadow: 0 2px 8px rgba(93,145,195,0.18);
+  transition: background 0.2s, color 0.2s;
+}
+
+  .user-guide-close-icon:hover {
+    background: white;
+    color: black;
+  }
+
+.user-guide-modal li {
+  line-height: 1.7;
+  font-size: 1.1vw;
+  background: rgba(93, 145, 195, .07);
+  padding: .5vw .5vw;
+  box-shadow: 0 2px 8px rgba(93, 145, 195, .06);
 }
 
+  .user-guide-modal li b {
+    color: #2b6296;
+    font-size: 1.15vw;
+  }
+
+footer {
+  background: linear-gradient(to right, #011022, #01030a);
+  color: #fff;
+  text-align: center;
+  padding: 15px 10px;
+  text-align: center;
+  width: 100%;
+  position: relative;
+  margin-top: 28vw;
+  font-size: 18px;
+  font-weight: 700;
+  font-family: Inter, Segoe UI, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+p.footer {
+  line-height: 1;
+  margin-top: 1vw;
+}
 
-/* Apply the same look to <a> and the disabled <span class="nav-link"> */
-.nav-links li a,
-.nav-links li .nav-link {
+footer a {
+  color: #fff;
   text-decoration: none;
+  margin: 0 5px;
+  margin-bottom: 0.5vw;
+  display: inline-block;
+}
+
+footer .social-icons {
+  margin-top: 0.5vw;
+  display: flex;
+  justify-content: center;
+  gap: 28px;
+  flex-wrap: wrap;
+}
+
+  footer .social-icons .social-icon {
+    width: 42px;
+    height: 42px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #fff;
+    color: #38bdf8;
+    font-size: 18px;
+    box-shadow: 0 0 0 1px #214055, 0 4px 14px #0006;
+    transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
+    text-decoration: none;
+  }
+
+    footer .social-icons .social-icon:hover {
+      background-color: #38bdf8;
+      color: #fff;
+      transform: translateY(-4px);
+      box-shadow: 0 6px 20px #38bdf8aa, 0 0 0 2px #38bdf8 inset;
+    }
+
+    footer .social-icons .social-icon.facebook {
+      color: #1877f2;
+    }
+
+    footer .social-icons .social-icon.youtube {
+      color: #ff0000;
+    }
+
+    footer .social-icons .social-icon.linkedin {
+      color: #0a66c2;
+    }
+
+    footer .social-icons .social-icon.instagram {
+      color: #fd5949;
+    }
+
+    footer .social-icons .social-icon.facebook:hover {
+      background-color: #1877f2;
+      color: #fff;
+    }
+
+    footer .social-icons .social-icon.youtube:hover {
+      background-color: #ff0000;
+      color: #fff;
+    }
+
+    footer .social-icons .social-icon.linkedin:hover {
+      background-color: #0a66c2;
+      color: #fff;
+    }
+
+    footer .social-icons .social-icon.instagram:hover {
+      background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
+      color: #fff;
+      filter: brightness(1.15);
+      box-shadow: 0 6px 22px rgba(253, 89, 73, .6);
+    }
+
+@media (max-width: 600px) {
+  .user-guide-modal {
+    width: 90vw;
+    height: 60vw;
+    border-radius: 12px;
+    padding: 4vw 2vw 2vw 2vw;
+  }
+
+    .user-guide-modal > ul,
+    .user-guide-modal > ol {
+      max-height: 52vw;
+      overflow-y: auto;
+      padding-right: 1.5vw;
+    }
+
+  .user-guide-close-icon {
+    font-size: 6vw;
+    top: 2vw;
+    right: 2vw;
+    width: 6vw;
+    height: 6vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  .card-button, .know-more-btn {
+    font-size: 2.8vw;
+    padding: 8px 12px;
+  }
+}
+
+.card-button, .know-more-btn {
+  padding: 10px 18px;
+  background: #006780;
+  color: #fff;
+  border: 2px solid #006780;
+  border-radius: 8px;
+  font-size: 1vw;
+  font-weight: bold;
+  cursor: pointer;
+  margin: 0 6px 6px 0;
+  box-shadow: 0 2px 8px rgba(93,145,195,0.12);
+  transition: background 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s;
+}
+
+  .card-button:hover, .know-more-btn:hover {
+    background: #ffffff;
+    color: #006780;
+    box-shadow: 0 4px 16px rgba(93,145,195,0.18);
+    transform: scale(1.05);
+  }
+
+.privacy-popup-content {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 1vw;
+}
+
+.main-menu-dropdown {
+  position: relative;
+}
+
+  .main-menu-dropdown > .nav-link {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .main-menu-dropdown .fas.fa-caret-down {
+    margin-left: 0.5vw;
+    font-size: 1vw;
+    transition: transform 0.2s;
+  }
+
+  .main-menu-dropdown:hover .fas.fa-caret-down,
+  .main-menu-dropdown:focus-within .fas.fa-caret-down {
+    transform: rotate(180deg);
+  }
+
+.submenu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 220px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  border-radius: 8px;
+  padding: 0.5vw 0;
+  z-index: 1100;
+  list-style: none;
+  white-space: nowrap;
+}
+
+.main-menu-dropdown:hover .submenu,
+.main-menu-dropdown:focus-within .submenu {
+  display: block;
+}
+
+.submenu li a {
+  display: block;
+  padding: 0.7vw 1vw;
   color: #333;
-  font-size: 1.5vw;
-  font-weight: 700;
+  font-size: 1.2vw;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: 6px;
+  transition: background 0.2s, color 0.2s;
 }
 
-  .nav-links li a:hover,
-  .nav-links li .nav-link:hover {
-    color: #007bff;
+  .submenu li a:hover,
+  .submenu li a.active-link {
+    background: #e6f2ff;
+    color: #137ec4;
   }

src/app/home/home.component.html

@@ -1,29 +1,21 @@
+<!-- ================= NAVIGATION BAR ================= -->
 <div class="hero">
-  <!-- Navigation Bar -->
   <nav class="navbar">
     <div class="navbar-container">
-      <!-- Logo -->
       <div class="logo">
-        <img src="assets/images/pykara-logo.png" alt="Logo" (click)="reloadPage()" />
+        <img [src]="brand.logo" [alt]="brand.name + ' Logo'" (click)="reloadPage()" />
       </div>
-
-      <!-- Desktop Navigation Links -->
       <ul class="nav-links">
         <li><a routerLink="/chat" routerLinkActive="active-link">Chat</a></li>
         <li><a routerLink="/generate-questions" routerLinkActive="active-link">Grammar</a></li>
         <li>
-          <!-- when disabled -->
           <span *ngIf="isVoiceDisabled; else voiceLink"
                 class="nav-link nav-link--disabled"
                 aria-disabled="true">
             Voice
           </span>
-
-          <!-- when enabled -->
           <ng-template #voiceLink>
-            <a class="nav-link"
-               routerLink="/Voice"
-               routerLinkActive="active-link">
+            <a class="nav-link" routerLink="/voice" routerLinkActive="active-link">
               Voice
             </a>
           </ng-template>
@@ -33,13 +25,49 @@
         <li><a routerLink="/writing" routerLinkActive="active-link">Writing</a></li>
         <li><a routerLink="/vocabulary-builder" routerLinkActive="active-link">Vocabulary-Builder</a></li>
         <li><a routerLink="/findword" routerLinkActive="active-link">Find Word</a></li>
+        <li class="main-menu-dropdown">
+          <a class="nav-link" href="#" (click)="$event.preventDefault()" aria-haspopup="true" aria-expanded="false">
+            General
+            <i class="fas fa-caret-down"></i>
+          </a>
+          <ul class="submenu">
+            <li><a routerLink="/pronunciation-improvement" routerLinkActive="active-link">Pronunciation Improvement</a></li>
+            <li><a routerLink="/personality-improvement" routerLinkActive="active-link">Personality Improvement</a></li>
+            <li><a routerLink="/body-language-improvement" routerLinkActive="active-link">Body Language Improvement</a></li>
+          </ul>
+        </li>
       </ul>
+      <!-- ================= ACCOUNT/LOGIN MENU ================= -->
+      <div class="nav-actions">
+        <ng-container *ngIf="isAuthenticated && username; else loginIcon">
+          <div class="avatar" (click)="toggleAccountMenu()" [attr.title]="usernameInitial">
+            {{ usernameInitial }}
+          </div>
+          <div class="account-menu" *ngIf="showAccountMenu" (mouseleave)="closeAccountMenu()">
+            <div class="account-header">
+              <div class="avatar avatar-lg">{{ usernameInitial }}</div>
+              <div class="account-meta">
+                <div class="account-name">{{ displayName }}</div>
+                <div class="account-email">{{ displayEmail }}</div>
+              </div>
+            </div>
+            <div class="account-item" (click)="goToAccount()">My account</div>
+            <hr />
+            <div class="account-item" (click)="logout()">Logout</div>
+          </div>
+        </ng-container>
+        <ng-template #loginIcon>
+          <a routerLink="/auth" class="login-button" [attr.title]="'Login'" aria-label="Login">
+            <i class="fas fa-user"></i>
+          </a>
+        </ng-template>
+      </div>
     </div>
   </nav>
 
-  <!-- Hero Section -->
+  <!-- ================= HERO SECTION ================= -->
   <div class="hero-text">
-    <h1>Py-Learn</h1>
+    <h1>{{ brand.name }}</h1>
     <h2>A Self-Learning System</h2>
     <p>
       It is a personalized self-learning system helps students to improve their language skills through interactive and customized exercises.
@@ -47,54 +75,1458 @@
     </p>
   </div>
 
-  <!-- Cards Section -->
+  <!-- ================= CARDS SECTION ================= -->
   <section class="cards-section">
     <h2 class="section-title">
       What would you like to <span class="highlight">learn</span> today?
     </h2>
-
     <div class="cards-container">
-      <div class="card" *ngFor="let card of cards; let i = index">
+      <div class="card" *ngFor="let card of cards; let i = index" (click)="card.action()" role="button" tabindex="0" (keydown.enter)="card.action()" (keydown.space)="card.action()">
         <div class="card-image">
           <img [src]="card.image" [alt]="card.title" />
         </div>
         <div class="card-content">
-          <h3 class="card-title">{{ card.title }}</h3>
-
-          <div #wrapper
-               class="content-wrapper"
-               [class.collapsed]="collapsedStates[i]"
-               [class.expanded]="!collapsedStates[i]">
-            <p>{{ card.description }}</p>
-          </div>
-
           <div class="card-buttons">
-            <button (click)="card.action()" class="card-button">Let's Start</button>
-            <button *ngIf="isOverflowing[i]"
-                    (click)="toggleCard(i)"
-                    class="card-button">
-              {{ collapsedStates[i] ? 'View More' : 'View Less' }}
-            </button>
-
+            <button class="know-more-btn" (click)="$event.stopPropagation(); openGuidePopup(card.title)">Know More</button>
           </div>
         </div>
       </div>
-
-
-
     </div>
   </section>
 
-  <!-- Footer -->
-  <div class="footer">
-    <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
-    <div class="social-media">
-      <a href="https://www.youtube.com/@PykaraTechnologies/videos" target="_blank">
-        <img src="assets/images/home/youtube-icon.png" alt="YouTube">
+  <!-- ================= FOOTER ================= -->
+  <footer>
+    <p class="footer">© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+    <a href="https://pykara.ai/contact-us/" target="blank">Contact Us</a> |
+    <a href="#" (click)="openPrivacyPopup($event)">Privacy Policy</a> |
+    <a href="#" (click)="openTermsPopup($event)">Terms & Conditions</a>
+    <div class="social-icons">
+      <a href="https://www.linkedin.com/in/pykara-technologies" target="_blank" class="social-icon linkedin" aria-label="LinkedIn">
+        <i class="fab fa-linkedin-in"></i>
+      </a>
+      <a href="https://www.youtube.com/@PykaraTechnologies" target="_blank" class="social-icon youtube" aria-label="YouTube">
+        <i class="fab fa-youtube"></i>
+      </a>
+      <a href="https://www.facebook.com/people/Pykara/100087653675803/" target="_blank" class="social-icon facebook" aria-label="Facebook">
+        <i class="fab fa-facebook-f"></i>
       </a>
-      <a href="https://www.youtube.com/@PykaraTechnologies/videos" target="_blank">
-        <img src="assets/images/home/linkedin-icon.png" alt="LinkedIn">
+      <a href="https://www.instagram.com/pykaratechnologie/" target="_blank" class="social-icon instagram" aria-label="Instagram">
+        <i class="fab fa-instagram"></i>
+      </a>
+      <a href="https://pykara.ai/" target="_blank" class="social-icon website" aria-label="Website">
+        <i class="fas fa-globe"></i>
       </a>
     </div>
+  </footer>
+
+  <!-- ================= GUIDE POPUP ================= -->
+  <div *ngIf="showGuidePopup">
+    <div class="user-guide-overlay" (click)="closeGuidePopup()"></div>
+    <div class="user-guide-modal" role="dialog" aria-modal="true">
+      <button class="user-guide-close-icon" (click)="closeGuidePopup()" aria-label="Close">&times;</button>
+      <ng-container [ngSwitch]="selectedCardTitle">
+        <!-- Card-specific guide content (all used) -->
+        <ng-container *ngSwitchCase="'Grammar Chat'">
+          <ul style="text-align: justify; font-size: 15px;">
+            <li>
+              <b>Introduction</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The Chat Module is an interactive learning environment designed to assist learners through text and voice-based communication.</li>
+                <li>Users can type their question or select from follow-up suggestions, using either the text input or the microphone.</li>
+                <li>Predefined questions appear above the input field for quick access.</li>
+                <li>This creates an engaging and personalised learning experience similar to interacting with a real tutor.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Starting the Chat</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>When learners open the module, they will see a text input box and a microphone icon. They can type a question or activate the microphone to speak.</li>
+                <li>While the microphone is active, a listening popup appears with options to mute or stop recording. Once the learner finishes speaking or typing, their question is displayed in the chat area along with a timestamp.</li>
+                <li>This simple interface ensures that both typing and speaking interactions are smooth and user-friendly.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Accessing the Syllabus</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Before learners begin, an administrator uploads the syllabus or textbook in digital format.</li>
+                <li>The system analyses the document and automatically generates a list of predefined questions based on the uploaded syllabus.</li>
+                <li>These predefined questions are displayed above the input field, allowing learners to choose any topic without needing to type.</li>
+                <li>When a learner selects a question, the system locates the relevant section from the syllabus and prepares an answer. The response appears instantly in the chat area in a clear and readable format.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Receiving the Response</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  After a question is sent, the system generates an immediate response that includes:
+                  <ul>
+                    <li>A text-based explanation</li>
+                    <li>An audio narration in the tutor’s real voice</li>
+                    <li>A derived video explanation, when applicable</li>
+                  </ul>
+                </li>
+                <li>The response is first produced as text. If the learner chooses to listen, the system plays an audio narration that has been synthetically generated using the real voice of the teacher.</li>
+                <li>The voice is not a generic computer voice; it has been trained and modelled on the actual tutor’s speech patterns, ensuring that the tone, pronunciation, and expression closely resemble the teacher’s natural way of speaking.</li>
+                <li>Similarly, when a video explanation is requested, the system displays a derived video of the teacher. This video is not a pre-recorded clip or animation, but is generated to resemble the real teacher’s voice and reactions.</li>
+                <li>All audio and video responses are created dynamically for each question, providing unique, real-time explanations. Learners can replay or stop the narration at any time, copy text responses, and follow the conversation naturally with the speaking indicator showing when the tutor’s voice is active.</li>
+                <li>By default, audio is muted; you can enable it as needed.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Handling Out-of-Syllabus Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>If a learner asks a question that is not part of the uploaded syllabus or textbook, the system responds with the message: “This topic is out of syllabus.”</li>
+                <li>Only administrators can configure whether such questions can be answered using external information sources.</li>
+                <li>This ensures that all discussions remain within the approved syllabus unless authorised otherwise.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Follow-Up and Progressive Learning</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>After each response, the system displays related or next-level questions below the chat. This feature helps learners progress through topics in a logical sequence.</li>
+                <li>A breadcrumb trail is also displayed, showing the topic flow and subtopics covered during the conversation.</li>
+                <li>Learners can easily revisit previous points and continue from where they left off.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Audio, Video, and Mode Controls</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  At the top of the chat interface, four control buttons provide flexibility and accessibility:
+                  <ul>
+                    <li>Audio Control – Enable or disable narration.</li>
+                    <li>Video Control – Show or hide derived video explanations.</li>
+                    <li>Syllabus Mode Control – Keep learning limited to syllabus topics.</li>
+                    <li>Breadcrumb Control – Display or hide the topic trail.</li>
+                  </ul>
+                </li>
+                <li>Only administrators can modify the syllabus mode to include out-of-syllabus responses.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Interface and Usability</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The chat interface presents a clear, conversational layout between the learner and the tutor. Each message includes a profile icon and timestamp for a natural reading flow.</li>
+                <li>Typing indicators appear while the system prepares responses, and a scroll button allows quick access to the most recent messages.</li>
+                <li>The design is responsive and adapts to different devices such as desktops, tablets, etc.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Summary</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The Chat Module provides an engaging, syllabus-focused learning experience where learners can type or speak their questions and receive immediate answers through text, real teacher voice, and derived video.</li>
+                <li>With predefined questions, real-time explanations, structured progression, and easy-to-use controls, this module offers a complete and intelligent conversational learning environment—all within a single platform.</li>
+                <li>Use this feature for summary-guided training.</li>
+              </ul>
+            </li>
+          </ul>
+        </ng-container>
+
+        <!-- Grammar Quiz specific content -->
+        <ng-container *ngSwitchCase="'Grammar Quiz'">
+          <ul style="text-align: justify; font-size: 15px;">
+            <li>
+              <b>Introduction</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The <b>Generate Questions</b> module helps children practise English grammar with step-by-step questions, instant feedback, and level-based progression.</li>
+                <li>All questions, hints, and follow-ups are drawn from a <b>predefined syllabus</b> prepared by your school or administrator.</li>
+                <li>The layout is simple and child-friendly, with clear buttons and readable text.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Syllabus Source</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The module uses a <b>predefined syllabus</b> that includes topics, chapters, sections, and pages.</li>
+                <li>Predefined content ensures that practice stays aligned with the lessons taught in class.</li>
+                <li>If a topic is not found in the syllabus, the system displays a clear message (see “Out-of-Syllabus Control”).</li>
+              </ul>
+            </li>
+            <li>
+              <b>Choose a Topic</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Type a grammar topic (e.g., <i>verbs</i>, <i>nouns</i>, <i>tenses</i>, <i>subject–verb agreement</i>) or select from the suggestion list.</li>
+                <li>Use specific terms (e.g., <i>simple past tense</i>) for better results.</li>
+                <li>If the topic is unclear or unrelated to grammar, the system may show: “Please enter a valid <b>grammar topic</b>, not a general word or unrelated question.”</li>
+              </ul>
+            </li>
+            <li>
+              <b>Generate Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Click <b>Generate</b> to create a set of questions based on the chosen topic from the predefined syllabus.</li>
+                <li>A brief loading screen appears while the questions are prepared.</li>
+                <li>To keep the practice consistent, the topic may be locked after generation until you reset the session.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Answer the Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Each <b>question</b> presents a sentence with a <b>blank</b>. The learner may type any suitable <b>answer</b> in the blank.</li>
+                <li>All blanks must be filled before you can check answers. The <b>Validate/Check Answers</b> button enables automatically.</li>
+                <li>The input fields are designed for easy typing and clear visibility.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Check Your Answers</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Click <b>Check Answers</b> to validate all responses together.</li>
+                <li><b>Color guidance:</b> correct answers are shown in green with the label <b>Correct</b>; incorrect answers are shown in red with the label <b>Wrong</b>.</li>
+                <li>During validation or timed messages, inputs may be temporarily read-only to prevent accidental edits.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Try Again (First Wrong Attempt)</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>For each incorrect <b>answer</b>, a <b>“Try Again”</b> message appears with a short countdown.</li>
+                <li>After the countdown, the wrong entry is cleared so the learner can attempt again.</li>
+                <li>This encourages self-correction with gentle guidance.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Show Correct Answer (Second Wrong Attempt)</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>If a <b>question</b> remains incorrect after the second attempt, another countdown appears.</li>
+                <li>When the countdown ends, the <b>correct answer</b> is shown and filled automatically.</li>
+                <li>This provides closure and allows the learner to continue smoothly.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Hints and Teacher Coaching</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Click the <b>Hint</b> icon to open helpful hints based on the same syllabus section as the questions.</li>
+                <li>When a hint is displayed or when an answer is incorrect, the module can also present the teacher’s voice and a short teacher video that explains the idea in simple words.</li>
+                <li>Audio is muted by default; you may enable it. You can play, pause, or close the video at any time.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Breadcrumb and Follow-Up Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The <b>breadcrumb</b> shows the learning path (Topic ? Chapter ? Section ? Page). Clicking a level focuses the practice on that part.</li>
+                <li><b>Predefined follow-up questions</b> appear below the main set. They come from the same syllabus section and guide the next step (e.g., identification, transformation, short explanation).</li>
+                <li>As answers are submitted, the follow-ups adjust to reinforce areas that need more practice.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Out-of-Syllabus Control</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>If a learner asks about a topic that is not part of the predefined syllabus, the system shows: “This topic is out of syllabus.”</li>
+                <li>Only administrators can decide whether such questions may be answered using other sources.</li>
+                <li>This keeps practice within approved lessons unless specific permission is given.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Level Progress and Progress Bar</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The module uses three levels: <b>Basic ? Intermediate ? Expert</b>.</li>
+                <li>A <b>progress bar</b> with level markers shows the current level and the remaining path.</li>
+                <li>Clear labels and gentle animations help children track progress.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Moving to the Next Level</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>When all <b>questions</b> in a level are correct, a message and a short countdown appear.</li>
+                <li>The module then advances to the next level and updates the progress bar.</li>
+                <li>Difficulty increases gradually to build mastery step by step.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Celebrate Success</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>After completing all three levels, a <b>celebration</b> screen appears.</li>
+                <li>Learners can click <b>Start Over</b> to practise the same topic again or choose a new topic.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Reset or Change Topic</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Use <b>Reset</b> to clear the current session and unlock the topic field.</li>
+                <li>Enter a new topic or select another suggestion to begin a new practice set.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Accessibility and Layout</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Countdowns and status messages are written clearly so learners understand what is happening.</li>
+                <li>The layout adapts to different screens. Buttons and inputs are sized for comfortable tapping and clicking.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Troubleshooting</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li><b>Invalid topic message:</b> Enter a clear grammar term (e.g., <i>articles</i>, <i>comparatives</i>, <i>passive voice</i>).</li>
+                <li><b>Out of syllabus:</b> Choose a topic that appears in the syllabus list or ask an administrator about permission for extra topics.</li>
+                <li><b>Buttons disabled:</b> The <i>Generate</i> button appears after entering a valid topic; the <i>Validate</i> button appears after all blanks are filled.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Benefits for Children</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li><b>Guided practice</b> with clear feedback builds confidence and accuracy.</li>
+                <li><b>Level-based progression</b> supports steady growth from basic understanding to higher skills.</li>
+                <li><b>Hints and teacher coaching</b> help learners correct mistakes and understand rules in simple language.</li>
+                <li><b>Predefined syllabus alignment</b> keeps practice consistent with classroom lessons.</li>
+              </ul>
+            </li>
+          </ul>
+        </ng-container>
+
+        <!-- Voice specific content -->
+        <ng-container *ngSwitchCase="'Voice'">
+          <ul style="text-align: justify; font-size: 15px;">
+            <li>
+              <b>Introduction</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The <b>voice </b> module helps children practise English grammar with step-by-step questions, instant feedback, and level-based progression.</li>
+                <li>All questions, hints, and follow-ups are drawn from a <b>predefined syllabus</b> prepared by your school or administrator.</li>
+                <li>The layout is simple and child-friendly, with clear buttons and readable text.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Syllabus Source</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The module uses a <b>predefined syllabus</b> that includes topics, chapters, sections, and pages.</li>
+                <li>Predefined content ensures that practice stays aligned with the lessons taught in class.</li>
+                <li>If a topic is not found in the syllabus, the system displays a clear message (see “Out-of-Syllabus Control”).</li>
+              </ul>
+            </li>
+            <li>
+              <b>Choose a Topic</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Type a grammar topic (e.g., <i>verbs</i>, <i>nouns</i>, <i>tenses</i>, <i>subject–verb agreement</i>) or select from the suggestion list.</li>
+                <li>Use specific terms (e.g., <i>simple past tense</i>) for better results.</li>
+                <li>If the topic is unclear or unrelated to grammar, the system may show: “Please enter a valid <b>grammar topic</b>, not a general word or unrelated question.”</li>
+              </ul>
+            </li>
+            <li>
+              <b>Generate Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Click <b>Generate</b> to create a set of questions based on the chosen topic from the predefined syllabus.</li>
+                <li>A brief loading screen appears while the questions are prepared.</li>
+                <li>To keep the practice consistent, the topic may be locked after generation until you reset the session.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Answer the Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Each <b>question</b> presents a sentence with a <b>blank</b>. The learner may type any suitable <b>answer</b> in the blank.</li>
+                <li>All blanks must be filled before you can check answers. The <b>Validate/Check Answers</b> button enables automatically.</li>
+                <li>The input fields are designed for easy typing and clear visibility.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Check Your Answers</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Click <b>Check Answers</b> to validate all responses together.</li>
+                <li><b>Color guidance:</b> correct answers are shown in green with the label <b>Correct</b>; incorrect answers are shown in red with the label <b>Wrong</b>.</li>
+                <li>During validation or timed messages, inputs may be temporarily read-only to prevent accidental edits.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Try Again (First Wrong Attempt)</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>For each incorrect <b>answer</b>, a <b>“Try Again”</b> message appears with a short countdown.</li>
+                <li>After the countdown, the wrong entry is cleared so the learner can attempt again.</li>
+                <li>This encourages self-correction with gentle guidance.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Show Correct Answer (Second Wrong Attempt)</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>If a <b>question</b> remains incorrect after the second attempt, another countdown appears.</li>
+                <li>When the countdown ends, the <b>correct answer</b> is shown and filled automatically.</li>
+                <li>This provides closure and allows the learner to continue smoothly.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Hints and Teacher Coaching</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Click the <b>Hint</b> icon to open helpful hints based on the same syllabus section as the questions.</li>
+                <li>When a hint is displayed or when an answer is incorrect, the module can also present the teacher’s voice and a short teacher video that explains the idea in simple words.</li>
+                <li>Audio is muted by default; you may enable it. You can play, pause, or close the video at any time.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Breadcrumb and Follow-Up Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The <b>breadcrumb</b> shows the learning path (Topic ? Chapter ? Section ? Page). Clicking a level focuses the practice on that part.</li>
+                <li><b>Predefined follow-up questions</b> appear below the main set. They come from the same syllabus section and guide the next step (e.g., identification, transformation, short explanation).</li>
+                <li>As answers are submitted, the follow-ups adjust to reinforce areas that need more practice.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Out-of-Syllabus Control</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>If a learner asks about a topic that is not part of the predefined syllabus, the system shows: “This topic is out of syllabus.”</li>
+                <li>Only administrators can decide whether such questions may be answered using other sources.</li>
+                <li>This keeps practice within approved lessons unless specific permission is given.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Level Progress and Progress Bar</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The module uses three levels: <b>Basic ? Intermediate ? Expert</b>.</li>
+                <li>A <b>progress bar</b> with level markers shows the current level and the remaining path.</li>
+                <li>Clear labels and gentle animations help children track progress.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Moving to the Next Level</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>When all <b>questions</b> in a level are correct, a message and a short countdown appear.</li>
+                <li>The module then advances to the next level and updates the progress bar.</li>
+                <li>Difficulty increases gradually to build mastery step by step.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Celebrate Success</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>After completing all three levels, a <b>celebration</b> screen appears.</li>
+                <li>Learners can click <b>Start Over</b> to practise the same topic again or choose a new topic.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Reset or Change Topic</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Use <b>Reset</b> to clear the current session and unlock the topic field.</li>
+                <li>Enter a new topic or select another suggestion to begin a new practice set.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Accessibility and Layout</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Countdowns and status messages are written clearly so learners understand what is happening.</li>
+                <li>The layout adapts to different screens. Buttons and inputs are sized for comfortable tapping and clicking.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Troubleshooting</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li><b>Invalid topic message:</b> Enter a clear grammar term (e.g., <i>articles</i>, <i>comparatives</i>, <i>passive voice</i>).</li>
+                <li><b>Out of syllabus:</b> Choose a topic that appears in the syllabus list or ask an administrator about permission for extra topics.</li>
+                <li><b>Buttons disabled:</b> The <i>Generate</i> button appears after entering a valid topic; the <i>Validate</i> button appears after all blanks are filled.</li>
+              </ul>
+            </li>
+            <li>
+              <b>Benefits for Children</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li><b>Guided practice</b> with clear feedback builds confidence and accuracy.</li>
+                <li><b>Level-based progression</b> supports steady growth from basic understanding to higher skills.</li>
+                <li><b>Hints and teacher coaching</b> help learners correct mistakes and understand rules in simple language.</li>
+                <li><b>Predefined syllabus alignment</b> keeps practice consistent with classroom lessons.</li>
+              </ul>
+            </li>
+          </ul>
+        </ng-container>
+
+        <!-- Listening specific content -->
+        <ng-container *ngSwitchCase="'Listening'">
+          <ul style="text-align: justify; font-size: 15px;">
+            <li>
+              <b>Introduction</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The Listen module helps learners improve listening skills using short videos.</li>
+                <li>It provides questions based on the video and gives instant feedback.</li>
+                <li>It supports repeated attempts, so learners can review, retry, and improve.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Preparing Your Video</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Upload a video from your device or select one from the list (if available).</li>
+                <li>Check your audio device (headphones/speakers) before you start.</li>
+                <li>Use a quiet environment for better focus.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Playing and Enabling Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Press <b>Play</b> and watch the video from start to finish.</li>
+                <li>After you complete the video, the <b>Generate Questions</b> button becomes active.</li>
+                <li>You may replay parts of the video before generating questions if needed.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Generating and Answering Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Click <b>Generate Questions</b> to create questions based on the video content.</li>
+                <li>Question types include multiple choice, fill-in-the-blank, short answer, and dictation.</li>
+                <li>Answer each question carefully; you can move between questions if navigation is enabled.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Validation and Feedback</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Click <b>Validate Answers</b> to check your responses.</li>
+                <li>You will see which answers are correct and which need revision.</li>
+                <li>Incorrect items can be retried; use the video or hints to correct your answers.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Hints and Transcript</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Hints may give a short clue, a key phrase, or a time range to review.</li>
+                <li>A transcript may be available after your first attempt, depending on settings.</li>
+                <li>Use these aids to understand difficult sections before retrying.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Playback Controls</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Use <b>replay</b> to review important parts and <b>seek</b> to jump to a time.</li>
+                <li>Adjust <b>playback speed</b> to slow down or speed up the audio.</li>
+                <li>Audio may start muted by default; enable sound when ready.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Progress and Scoring</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Your attempts and scores are recorded for review.</li>
+                <li>You can retry incorrect questions to improve your score.</li>
+                <li>Use your history to track improvement over time.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Good Practice</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Use headphones for clear audio and fewer distractions.</li>
+                <li>Pause and replay difficult parts before answering.</li>
+                <li>Focus on key words, speaker tone, and context.</li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Summary</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>The Listen module provides video-based practice with questions and instant feedback.</li>
+                <li>Replay, hints, and transcripts support understanding and correction.</li>
+                <li>Use it regularly to build confident and accurate listening skills.</li>
+              </ul>
+            </li>
+          </ul>
+
+        </ng-container>
+
+        <!--Reading-->
+        <!--Reading-->
+        <ng-container *ngSwitchCase="'Reading'">
+          <ul style="text-align: justify; font-size: 15px;">
+            <li>
+              <b>Introduction</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  The <b>Reading</b> module is a guided reading-comprehension exercise where learners
+                  enter a topic, get a short passage at a chosen difficulty level, and then answer
+                  questions based on that passage.
+                </li>
+                <li>
+                  It is designed as a self-learning tool for children, with simple controls, large
+                  buttons, and clear visual feedback.
+                </li>
+                <li>
+                  The module can be used in class, in labs, or at home to give structured,
+                  independent reading practice.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Selecting the Difficulty Level</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Before typing any topic, the learner must choose a <b>difficulty level</b>:
+                  <b>Easy</b>, <b>Medium</b>, or <b>Hard</b>.
+                </li>
+                <li>
+                  The topic box remains locked until a level is selected, so children follow the
+                  steps in the right order and do not get confused.
+                </li>
+                <li>
+                  Teachers can guide younger students to use Easy level, while older or stronger
+                  readers can use Medium or Hard passages for more challenge.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Entering the Topic and Generating the Passage</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  After selecting the level, the learner types a topic (for example:
+                  <i>Rainy Day</i>, <i>Animals</i>, <i>My School</i>, <i>Space</i>).
+                </li>
+                <li>
+                  The system checks that the topic is meaningful and safe. If it is not valid,
+                  a clear message is shown so the learner can correct it.
+                </li>
+                <li>
+                  When the topic is valid, clicking <b>Generate Passage</b> creates a short,
+                  level-appropriate reading passage based on that topic.
+                </li>
+                <li>
+                  A loading indicator is shown while the passage is being generated so learners
+                  know the system is working.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Reading the Passage</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  The passage is displayed in a dedicated reading card, with neat spacing and
+                  comfortable line height for children.
+                </li>
+                <li>
+                  Learners can adjust the <b>font size</b> using A− / A+ buttons so the text is
+                  easy to see on different devices.
+                </li>
+                <li>
+                  A <b>Read Aloud</b> button lets the passage be read using audio. Children can
+                  start, pause, or resume listening as needed.
+                </li>
+                <li>
+                  These options help visual and auditory learners, and support children who need
+                  help with pronunciation or slower reading.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Generating Questions from the Passage</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Once the learner has read or listened to the passage, they click
+                  <b>Generate Questions</b>.
+                </li>
+                <li>
+                  The system creates a set of <b>multiple-choice questions</b> directly linked
+                  to the passage so that all questions stay within the same context.
+                </li>
+                <li>
+                  A small loader or waiting message appears during question generation to prevent
+                  repeated clicks and to show progress.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Answering and Validating Questions</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Questions are presented <b>one at a time</b>, each with four options.
+                  Answer choices are shown as clear radio buttons with child-friendly layout.
+                </li>
+                <li>
+                  The learner first selects an option. The selected option is highlighted so the
+                  child clearly sees their current choice before checking.
+                </li>
+                <li>
+                  After choosing an option, the learner clicks <b>Validate</b>:
+                  <ul style="list-style: disc; margin-left: 1.4rem;">
+                    <li>Correct answers are shown with a friendly success style (e.g. green with a tick).</li>
+                    <li>Wrong answers are shown with a clear but gentle error style (e.g. red with a cross).</li>
+                  </ul>
+                </li>
+                <li>
+                  The Validate button is disabled after use for that question, preventing
+                  repeated clicks and keeping the flow simple.
+                </li>
+                <li>
+                  The button label then changes to allow the learner to move to the
+                  <b>Next</b> question. On the final question it may change to a reset or
+                  completion action.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Completion, Score, and Restart</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  When all questions are completed, the module shows a <b>summary</b> with the
+                  learner’s score (for example, “You answered 4 out of 5 questions correctly”).
+                </li>
+                <li>
+                  A simple congratulations or encouragement message is shown to keep motivation high.
+                </li>
+                <li>
+                  Learners can then click <b>Start Over</b> or a similar button to clear the
+                  current session, choose a new topic, or change the level and begin a fresh
+                  reading exercise.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Benefits for Children</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Builds <b>reading comprehension</b> by connecting text with follow-up questions.
+                </li>
+                <li>
+                  Improves <b>vocabulary</b> naturally through level-based passages on familiar topics.
+                </li>
+                <li>
+                  Encourages <b>focus and attention</b> by showing only one question at a time.
+                </li>
+                <li>
+                  Provides <b>instant feedback</b> so learners understand their mistakes and learn immediately.
+                </li>
+                <li>
+                  Supports different learning needs with font size controls and read-aloud options.
+                </li>
+                <li>
+                  Reduces teacher workload, because passages and questions are generated automatically
+                  instead of being prepared manually for each topic.
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </ng-container>
+
+
+        <!--Writing-->
+        <!-- Writing -->
+        <ng-container *ngSwitchCase="'Writing'">
+          <ul style="text-align: justify; font-size: 15px;">
+            <li>
+              <b>Introduction</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  The <b>Writing</b> module gives students a structured way to practise
+                  writing in English. It provides a topic based on the selected grade
+                  level, lets students write their answer, and then shows clear
+                  suggestions for improvement.
+                </li>
+                <li>
+                  The activity is designed for children to use at school or at home,
+                  with a simple layout, friendly images, and clear buttons that guide
+                  them step by step.
+                </li>
+                <li>
+                  It helps students develop better sentence structure, grammar, and
+                  expression through regular practice.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Selecting the Grade and Getting a Topic</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Students first choose a <b>grade band</b> from the dropdown:
+                  Lower, Middle, or Upper.
+                </li>
+                <li>
+                  After selecting the grade, they click <b>Get Topic</b>. The system
+                  then provides a suitable topic for that level, such as a simple daily
+                  life topic for lower grades or a slightly more thoughtful topic for
+                  higher grades.
+                </li>
+                <li>
+                  A small loader is shown while the topic is being fetched, so students
+                  understand that the system is working and do not keep clicking.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Writing on the Given Topic</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Once the topic is loaded, it is displayed inside a highlighted topic
+                  box so students always see what they need to write about.
+                </li>
+                <li>
+                  A large, notebook-style <b>writing box</b> is provided where students
+                  type their answer in their own words.
+                </li>
+                <li>
+                  The text area is big enough for a short paragraph and is easy to use
+                  on both laptops and tablets.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Minimum Word Requirement and Submit Button</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  To encourage meaningful writing, the submit button remains disabled
+                  until the student has written at least <b>10 words</b>.
+                </li>
+                <li>
+                  When the button is disabled, a small blue tooltip appears explaining
+                  that “We need at least 10 words to enable the submit button.”
+                </li>
+                <li>
+                  After the minimum length is reached, the <b>Submit Writing</b> button
+                  becomes active. On click, the text is sent for checking and the
+                  button text changes to “Submitting...” while the response is being
+                  processed.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Feedback and Suggestions for Improvement</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  After submission, students see a <b>Suggestions for Improvement</b>
+                  section.
+                </li>
+                <li>
+                  Feedback is shown as a list of clear, short points, such as
+                  suggestions about grammar, sentence formation, or clarity.
+                </li>
+                <li>
+                  This helps students understand what they did well and what they can
+                  improve in their writing next time.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Try Another Topic</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  A <b>Try Another</b> button allows students to reset the activity,
+                  get a new topic, and practise again.
+                </li>
+                <li>
+                  This makes the module suitable for regular writing practice, such as
+                  weekly writing tasks or extra homework.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Benefits for Students</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Develops regular <b>writing habit</b> and improves confidence in
+                  expressing ideas in English.
+                </li>
+                <li>
+                  Strengthens <b>grammar, vocabulary, and sentence structure</b>
+                  through repeated practice.
+                </li>
+                <li>
+                  Provides <b>instant, clear feedback</b> instead of only marks, so
+                  students know what to improve.
+                </li>
+                <li>
+                  Reduces teacher workload by automating topic generation and basic
+                  feedback, while still keeping the activity meaningful for students.
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </ng-container>
+
+
+        <!--Vocabulary Builder-->
+        <!-- Vocabulary Builder -->
+        <ng-container *ngSwitchCase="'Vocabulary Builder'">
+          <ul style="text-align: justify; font-size: 15px;">
+            <li>
+              <b>Introduction</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  The <b>Vocabulary Builder</b> module helps students strengthen their vocabulary step by step.
+                  It shows one main word, asks them to choose related words, and then helps them form sentences
+                  using the correct words.
+                </li>
+                <li>
+                  The activity is designed like a small game with clear cards, big buttons, and simple instructions,
+                  so children can use it easily in class, in the lab, or at home.
+                </li>
+                <li>
+                  It focuses on understanding word meanings, recognising related words, and using them in complete sentences.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 1 – Start the Vocabulary Builder</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  On the first screen, students see the title <b>“Vocabulary Builder”</b> and a short introduction
+                  explaining what they will do.
+                </li>
+                <li>
+                  When they click the <b>“Let’s Build”</b> button, the system loads a new word and its options
+                  in the background.
+                </li>
+                <li>
+                  A loader overlay appears while the word and options are being fetched, so students understand
+                  that the system is working and do not click repeatedly.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 2 – Choosing Related Words</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  The next screen shows the main vocabulary word in a highlighted box and may include a small
+                  image related to that word.
+                </li>
+                <li>
+                  Below the word, several option buttons are shown. Students are asked to
+                  <b>“Choose the related words (select only three)”</b>.
+                </li>
+                <li>
+                  Students can select up to <b>three options</b>. Once three options are selected,
+                  the other options are disabled so they cannot choose more than allowed.
+                </li>
+                <li>
+                  A large action button (for example, <b>Check</b> or <b>Validate</b>) lets students confirm
+                  their chosen words and move to the feedback stage.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 3 – Feedback on Word Selection</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  After validation, each option clearly shows whether it was a <b>correct</b> or
+                  <b>incorrect</b> choice using colours and simple styles (for example, green for correct
+                  and red for incorrect).
+                </li>
+                <li>
+                  A separate <b>Feedback</b> screen summarises the result with short points, such as which
+                  words were not related or why some choices were wrong.
+                </li>
+                <li>
+                  This helps students understand word relationships and avoid repeating the same mistake
+                  with similar words in future.
+                </li>
+                <li>
+                  A button at the bottom (for example, <b>Form a Sentence</b>) takes them to the next step
+                  where they will use the correct words in sentences.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 4 – Forming Sentences with Correct Words</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  In the sentence formation screen, the correctly related words are displayed in a list
+                  at the top, usually highlighted in a positive colour.
+                </li>
+                <li>
+                  For each correct word, there is a separate small textarea where the student has to
+                  <b>write a sentence using that word</b>.
+                </li>
+                <li>
+                  This moves the student from simply recognising the word to actually using it in
+                  meaningful context.
+                </li>
+                <li>
+                  The <b>Check Sentence</b> button remains disabled until all sentence boxes are filled.
+                  This ensures students write something for each word before asking for feedback.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 5 – Sentence Feedback and Reset</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  After checking, a <b>Sentence Feedback</b> screen shows clear comments on each sentence,
+                  such as whether it is correct or how it can be improved.
+                </li>
+                <li>
+                  Positive feedback (for example, correct answers) is highlighted clearly, and suggestions
+                  are given in simple language so children can understand what to change.
+                </li>
+                <li>
+                  A <b>Reset</b> or <b>Try Again</b> button allows students to start a new round with a
+                  different word, making the activity suitable for daily or weekly practice.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Navigation, Buttons and Safety</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Each screen includes a <b>Back</b> icon and a <b>Close</b> button so students and teachers
+                  can move safely between steps or leave the exercise if needed.
+                </li>
+                <li>
+                  Buttons are disabled while the loader is visible, which prevents accidental double-clicks
+                  and keeps the flow stable.
+                </li>
+                <li>
+                  All main actions use the shared button style from the rest of the platform so the module
+                  looks consistent with other exercises.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Benefits for Students</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Helps students <b>understand word meanings</b> by connecting a word with related words,
+                  not just memorising definitions.
+                </li>
+                <li>
+                  Trains them to <b>distinguish similar and unrelated words</b>, which is important for
+                  reading comprehension.
+                </li>
+                <li>
+                  Encourages students to <b>use new vocabulary in sentences</b>, improving both
+                  writing and speaking skills.
+                </li>
+                <li>
+                  Provides <b>instant, specific feedback</b> on both choices and sentences, so students
+                  know exactly what to correct.
+                </li>
+                <li>
+                  Can be reused many times with different words, making it a strong tool for regular
+                  vocabulary practice in class and at home.
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </ng-container>
+
+
+        <!--Find Word-->
+        <!-- Find the Word -->
+        <ng-container *ngSwitchCase="'Find Word'">
+          <ul style="text-align: justify; font-size: 15px;">
+            <li>
+              <b>Introduction</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  The <b>Find the Word</b> module is a listening and spelling exercise.
+                  Students listen to a spoken word, type what they hear, and receive
+                  immediate feedback.
+                </li>
+                <li>
+                  It is designed to connect <b>listening skills</b> with <b>correct spelling</b>,
+                  and also helps students learn the word’s meaning and example sentence.
+                </li>
+                <li>
+                  The activity uses a simple two-panel layout: an audio player on the left
+                  and a typing area with attempts and feedback on the right.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 1 – Start the Activity</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  The first screen explains that students will listen to a word and type
+                  it correctly to improve their word skills.
+                </li>
+                <li>
+                  When they click the <b>Start Learning</b> button, the module opens the
+                  main game screen.
+                </li>
+                <li>
+                  From the game screen, a <b>Back</b> icon and a <b>Close</b> button are
+                  always available at the top, so students and teachers can safely move
+                  back or exit the exercise at any time.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 2 – Listening to the Word (Audio Panel)</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  On the left side, students see the <b>audio panel</b> with:
+                  <ul style="list-style: disc; margin-left: 1.4rem;">
+                    <li>A <b>Generate audio</b> button to load a new word.</li>
+                    <li>A large <b>Play / Pause</b> button to listen to the word.</li>
+                    <li>A <b>progress bar</b> showing how much of the word has played.</li>
+                  </ul>
+                </li>
+                <li>
+                  When students click <b>Generate audio</b>, the system fetches a new
+                  audio word. While loading, the button and controls are temporarily
+                  disabled to prevent repeated clicks.
+                </li>
+                <li>
+                  The play button changes state while the audio is playing, and small
+                  animations (like moving bars) make it clear that sound is active.
+                </li>
+                <li>
+                  The audio can be replayed as many times as needed, so students can
+                  listen carefully before typing.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 3 – Typing the Word (Input Panel)</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  On the right side, students see the <b>Type the word</b> panel with:
+                  <ul style="list-style: disc; margin-left: 1.4rem;">
+                    <li>The title “Type the word”.</li>
+                    <li>Three <b>hearts</b> showing how many attempts are left.</li>
+                    <li>An input box for typing the word they heard.</li>
+                    <li>A <b>Submit</b> button to check their answer.</li>
+                  </ul>
+                </li>
+                <li>
+                  The input box is enabled only after the audio has played at least once.
+                  This encourages students to listen before they start typing.
+                </li>
+                <li>
+                  Each time the student submits an answer, the number of hearts (attempts)
+                  is updated. When there are no hearts left, the Submit button is disabled.
+                </li>
+                <li>
+                  If the answer is <b>correct</b>, the input box is highlighted in green
+                  and a small tick icon appears. If the answer is <b>wrong</b>, the box
+                  is highlighted in red and a clear message encourages the student to try again.
+                </li>
+                <li>
+                  A short <b>validation message</b> under the input box gives feedback in simple words
+                  (for example, “Try again” or “Well done!”).
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Step 4 – Meaning, Example and Reset</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Below the Submit button, there is an action bar with three options:
+                  <ul style="list-style: disc; margin-left: 1.4rem;">
+                    <li><b>📘 Meaning</b> – shows the meaning of the word.</li>
+                    <li><b>✍️ Example</b> – shows an example sentence using the word.</li>
+                    <li><b>⟲ Reset</b> – loads the next question or restarts the activity.</li>
+                  </ul>
+                </li>
+                <li>
+                  The Meaning and Example buttons are enabled only when it is appropriate
+                  (for example, after a word is loaded or after an attempt), so students
+                  follow the correct order.
+                </li>
+                <li>
+                  The Reset button becomes available when the student has finished their
+                  attempts or answered correctly. It clears the input and fetches a new word,
+                  making it easy to practise many words in one session.
+                </li>
+                <li>
+                  A popup message may also appear in the centre of the screen to give
+                  encouragement or clear information, with a Close button to return to the game.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Attempts, Safety and Controls</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  The three-heart system shows students exactly how many tries they have left.
+                  This keeps them focused and makes the exercise feel like a small challenge.
+                </li>
+                <li>
+                  Buttons are disabled during loading and when attempts are over, so there are
+                  no accidental double-clicks or confusing states.
+                </li>
+                <li>
+                  The Back and Close buttons at the top of the game screen allow teachers and
+                  students to leave the exercise at any time without losing control.
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <b>Benefits for Students</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>
+                  Improves <b>listening skills</b> by training students to hear individual sounds
+                  in English words.
+                </li>
+                <li>
+                  Strengthens <b>spelling and phonics</b>, as students must convert the sounds
+                  they hear into the correct letters.
+                </li>
+                <li>
+                  Builds <b>vocabulary</b> by linking each word with its meaning and an example sentence.
+                </li>
+                <li>
+                  Encourages <b>careful thinking</b> through limited attempts, instead of guessing
+                  many times without focus.
+                </li>
+                <li>
+                  Can be used as a short daily warm-up or regular practice activity in class,
+                  in the lab, or at home.
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+</div>
+
+<!-- ================= PRIVACY POLICY POPUP ================= -->
+<div *ngIf="showPrivacyPopup">
+  <div class="user-guide-overlay" (click)="closePrivacyPopup()"></div>
+  <div class="user-guide-modal" role="dialog" aria-modal="true" aria-labelledby="privacyTitle">
+    <button class="user-guide-close-icon" (click)="closePrivacyPopup()" aria-label="Close">×</button>
+    <ul style="text-align: justify; font-size: 15px;">
+      <!-- Privacy Policy content (all used) -->
+      <li id="privacyTitle">
+        <b>Privacy Policy — Py-learn</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li><b>Last Updated:</b> November 2025</li>
+          <li><b>Who we are:</b> Py-learn is operated by <b>Pykara Technologies Private Limited</b> (“we”, “us”, “our”), the data controller for personal data processed through the platform.</li>
+          <li><b>Contact:</b> <a href="mailto:info@pykara.ai">info&#64;pykara.ai</a></li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Overview</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>We collect limited personal data to deliver an AI-powered e-learning experience (chatbots, video lessons, quizzes) and to improve learning outcomes.</li>
+          <li>We comply with applicable laws, including GDPR where relevant to users in the EEA/UK.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Information We Collect</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li><b>Account Data:</b> name, email, password (hashed), profile details.</li>
+          <li><b>Learning Data:</b> enrolled courses, lessons viewed, quiz results, progress analytics, feedback.</li>
+          <li><b>Technical Data:</b> device/browser info, IP address, timestamps, logs, approximate location from IP.</li>
+          <li><b>Cookies & Similar Tech:</b> preferences, session management, analytics (see “Cookies”).</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Purposes of Processing</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>Provide and secure the service; authenticate users; maintain accounts.</li>
+          <li>Personalise content, recommendations, and difficulty levels.</li>
+          <li>Measure performance, improve features, and fix issues.</li>
+          <li>Send essential service communications (policy changes, security notices).</li>
+          <li>Comply with legal obligations and enforce Terms.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Legal Bases (GDPR)</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li><b>Contract necessity:</b> to deliver core features you request.</li>
+          <li><b>Legitimate interests:</b> service improvement, security, fraud prevention (balanced against your rights).</li>
+          <li><b>Consent:</b> non-essential cookies, optional marketing (you can withdraw at any time).</li>
+          <li><b>Legal obligation:</b> records, compliance, and requests from authorities where required by law.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Automated Processing & AI</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>AI is used to generate explanations, hints, and recommendations. We do not make decisions with legal or similarly significant effects solely by automated means.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Third-Party Processors & Transfers</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>We use reputable vendors for AI inference, hosting, analytics, email delivery, and content streaming. They act under contracts and process data only on our instructions.</li>
+          <li>Where data is transferred outside your country (including outside the EEA/UK), appropriate safeguards are applied (e.g., Standard Contractual Clauses).</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Data Sharing</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>With service providers under confidentiality and security obligations.</li>
+          <li>For legal reasons (court orders, to protect users and our rights, prevent fraud or abuse).</li>
+          <li>Business changes (merger, acquisition); we will ensure comparable protections or notify you of material changes.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Data Security & Retention</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>We apply technical and organisational measures (encryption at rest/in transit, access controls, monitoring).</li>
+          <li>We retain personal data only as long as needed for the purposes above or as required by law. <b>Inactive accounts may be deleted after 24 months.</b></li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Cookies & Similar Technologies</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li><b>Essential:</b> login/session, security, load balancing.</li>
+          <li><b>Preferences:</b> UI settings, language, playback choices.</li>
+          <li><b>Analytics:</b> usage statistics to improve features.</li>
+          <li>You may control cookies via your browser. Disabling some cookies may affect functionality.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Children’s Privacy</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>The service is intended for users aged 13+. If we learn that data from a child under 13 was collected without appropriate consent, we will delete it.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Your Rights (EEA/UK where applicable)</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>Access, rectify, erase, restrict processing, object, and data portability.</li>
+          <li>Withdraw consent (for consent-based processing) without affecting prior lawful processing.</li>
+          <li>Lodge a complaint with a supervisory authority. We encourage contacting us first at <a href="mailto:info@pykara.ai">info&#64;pykara.ai</a>.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Data Breach Notification</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>We will notify affected users and relevant authorities when legally required.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Changes to this Policy</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>We may update this policy. The “Last Updated” date reflects the latest version; material changes may be additionally notified in-app or by email.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Contact</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>Email: <a href="mailto:info@pykara.ai">info&#64;pykara.ai</a></li>
+          <li>Registered Office: Pykara Technologies Private Limited, Chennai, Tamil Nadu, India</li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<!-- ================= TERMS & CONDITIONS POPUP ================= -->
+<div *ngIf="showTermsPopup">
+  <div class="user-guide-overlay" (click)="closeTermsPopup()"></div>
+  <div class="user-guide-modal" role="dialog" aria-modal="true" aria-labelledby="termsTitle">
+    <button class="user-guide-close-icon" (click)="closeTermsPopup()" aria-label="Close">×</button>
+    <ul style="text-align: justify; font-size: 15px;">
+      <!-- Terms & Conditions content (all used) -->
+      <li id="termsTitle">
+        <b>Terms & Conditions — Py-learn</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li><b>Last Updated:</b> November 2025</li>
+          <li>By using Py-learn, you agree to these Terms and our Privacy Policy.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Eligibility & Accounts</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>You must be 13+ (or the age of digital consent in your region). Users under 18 require parental/guardian consent.</li>
+          <li>You are responsible for the accuracy of your information and for safeguarding your credentials.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Permitted Use & Prohibited Conduct</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>Use the service for lawful, educational purposes only.</li>
+          <li>Do not attempt unauthorised access, disrupt the service, reverse engineer components, or misuse AI features.</li>
+          <li>International users must comply with local laws.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Content & Intellectual Property</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>All software, UI, designs, text, graphics, videos, and datasets are owned by Pykara Technologies or its licensors.</li>
+          <li>Copying, redistribution, or commercial use requires prior written consent.</li>
+          <li>When you submit content (e.g., answers, uploads), you grant us a non-exclusive, royalty-free licence to host and process it to operate and improve the service (including for AI model quality and safety, where allowed by law and your settings).</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>AI Outputs & Educational Disclaimer</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>AI responses support learning but may contain errors. Verify outputs before relying on them; they are not professional advice.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Fees, Trials & Refunds</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>Some features may be paid (subscriptions or one-off fees). Prices and taxes are shown at checkout.</li>
+          <li>Payments are processed securely by third-party providers. Unless required by law, payments are non-refundable.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Third-Party Links & Services</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>We may link to third-party content or integrate with providers (hosting, analytics, AI). We are not responsible for third-party terms or policies.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Termination & Suspension</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>We may suspend or terminate access for violations, fraud, or security risks. You may request account closure at any time.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Warranties & Liability</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>The service is provided “as is” and “as available” without warranties of any kind.</li>
+          <li>To the fullest extent permitted by law, we are not liable for indirect, incidental, special, consequential, or punitive damages.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Indemnity</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>You agree to indemnify and hold us harmless from claims arising from your misuse of the service or breach of these Terms.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Changes to the Service or Terms</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>We may modify features or these Terms. Continued use after changes indicates acceptance; material updates may be additionally notified in-app or by email.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Governing Law & Disputes</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>Governing law: India. Exclusive jurisdiction: courts in Chennai, Tamil Nadu, India.</li>
+        </ul>
+      </li>
+
+      <li>
+        <b>Contact</b><br>
+        <ul style="list-style: unset; margin-left: 1.25rem;">
+          <li>Support & legal queries: <a href="mailto:info@pykara.ai">info&#64;pykara.ai</a></li>
+          <li>Registered Office: Pykara Technologies Private Limited, Chennai, Tamil Nadu, India</li>
+        </ul>
+      </li>
+    </ul>
   </div>
 </div>

src/app/home/home.component.ts

@@ -1,261 +1,161 @@
-import {
-  Component,
-  ElementRef,
-  QueryList,
-  ViewChildren,
-  AfterViewInit
-} from '@angular/core';
+import { Component, AfterViewInit, OnInit, OnDestroy, ElementRef, HostListener } from '@angular/core';
 import { Router } from '@angular/router';
+import { AuthService } from '../auth/auth.service';
+import { Subscription } from 'rxjs';
+import { BrandService } from '../shared/brand.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements AfterViewInit {
-  @ViewChildren('wrapper') wrappers!: QueryList<ElementRef>;
-  // component.ts
-  isVoiceDisabled = true; // set true to disable, false to enable
-
+export class HomeComponent implements AfterViewInit, OnInit, OnDestroy {
+  // -------------------- UI State --------------------
+  menuOpen = false;
+  showGuidePopup = false;
+  selectedCardTitle: string | null = null;
+  showAccountMenu = false;
+  showPrivacyPopup = false;
+  showTermsPopup = false;
+  isVoiceDisabled = true;
+
+  // -------------------- Authentication State --------------------
+  isAuthenticated = false;
+  username: string | null = null;
+  private authSub?: Subscription;
+
+  // -------------------- Card Data --------------------
   cards = [
-    {
-      title: 'Grammar Chat',
-      description: `
-        This Chat module is a fun and interactive chatbox where students can ask only the grammar-related questions and receive structured, dynamic responses from the bot. 
-        It supports both text input and speech recognition, allowing users to either type or speak their queries. 
- 
-        Students can also select from a list of predefined grammar questions shown when the input box is focused. 
-        The chat area simulates a live conversation.
-
-        This module also supports voice output. Users can listen to the responses using a built-in voice or their teacher's voice, based on their choice. 
-        Audio controls are provided for better interactivity.
-
-        It helps students educate themselves and solve their grammar-related questions, as if they are getting trained by their own teachers in the classroom.
-      `,
-      image: 'assets/images/home/Grammar_chat.png',
-      action: () => this.goToChat()
-    },
-    {
-      title: 'Grammar Quiz',
-      description: `
-        This module helps students practice grammar through an engaging fill-in-the-blank activity, which is dynamically generated based on the topic they choose.
-
-        The exercise follows a level-based progression system. It begins with simple questions and gradually increases in difficulty as the student advances.
-
-        Each question includes blanks that students must complete with the correct words. The answers are validated in real-time, encouraging immediate learning and correction.
-
-        Students are allowed two attempts for each question. If a student enters an incorrect answer in the first attempt, they receive another chance to try again.
-        If both attempts are incorrect or left incomplete, the correct answer is shown, and the system moves to the next level automatically.
-
-        Helpful hints are displayed after an incorrect attempt to support learning. However, validation is only enabled when all blanks are filled, ensuring complete engagement in the exercise.
-
-        Once all levels are completed, a congratulatory message is displayed to encourage and motivate the learner.
-
-        This module helps students test their grammar knowledge in a structured and interactive manner, similar to how they would be assessed in a classroom environment.
-      `,
-      image: 'assets/images/home/quiz.png',
-      action: () => this.goToGenerateQuestions()
-    },
-    {
-      title: 'Voice',
-      description: `
-        The Voice module helps students improve their pronunciation through guided listening and speaking exercises.
-
-
-        The system plays the correct pronunciation of a word using a default voice. Students listen carefully and then repeat the word using their microphone.
-        The spoken word is recorded and compared with the correct version, and students receive clear feedback on their pronunciation accuracy.
-
-        A special feature of this module is the option to use a custom voice. Schools or teachers can upload their own recorded voice to replace the system’s default pronunciation. T
-        his allows students to learn using a familiar or preferred voice, creating a more personalized and effective learning experience.
-
-        This module supports repeated practice and encourages students to speak clearly and confidently. By combining listening, speaking, and guided feedback,
-        it helps students build strong pronunciation skills.
-
-        It also allows students to test and improve their spoken grammar in a classroom-like environment.
-      `,
-      image: 'assets/images/home/voice.png',
-      action: () => this.goToVoice()
-    },
-    {
-      title: 'Listening',
-      description: `
-        This module helps students improve their listening comprehension through video-based exercises designed for interactive learning.
-
-        Students can watch a video selected by their teacher or use a default video provided in the system. Once the video is completed, the Generate Questions button becomes active.
-        Students can then attempt a set of multiple-choice questions based on the video content.
-
-        Each question includes several options, and students are required to select the most appropriate answer. After responding to all the questions, they can submit their answers.
-        The system will immediately show which responses are correct and which are incorrect, offering valuable feedback.
-
-        Once a question is answered, it becomes locked to prevent changes, and all answer attempts are tracked to ensure fair evaluation.
-
-        A key feature of this module is the flexibility to upload custom videos, allowing teachers to personalize the listening material as per the learning goals.
-
-        This module helps students develop active listening skills and improves their understanding of spoken English in real-world contexts.
-        It also gives students an opportunity to test their listening skills based on the uploaded video and improve their understanding in a classroom-like setting.
-      `,
-      image: 'assets/images/home/Listening.png',
-      action: () => this.goToListen()
-    },
-    {
-      title: 'Reading',
-      description: `
-        This reading module is designed to help students improve their comprehension and thinking skills.
-
-        Students begin by entering a topic and selecting a difficulty level—easy, medium, or hard. Based on their input, a reading passage is generated, followed by related multiple-choice questions.
-
-        When the input field is focused, a list of predefined topic suggestions is shown to guide students in choosing a suitable topic.
-
-        Students read the passage carefully and answer each question. After submitting their answers, the system shows which responses are correct and which are incorrect, along with helpful feedback.
-
-        This exercise encourages students to read with attention and apply their understanding in a clear and structured manner.
-
-        It also helps students practice reading and answering questions in a way that feels similar to a regular classroom environment.
-      `,
-      image: 'assets/images/home/Reading.png',
-      action: () => this.goToRead()
-    },
-    {
-      title: 'Writing',
-      description: `
-        This writing module generates custom writing topics based on the selected grade level.
-
-        Students can choose their grade level—Lower, Middle, or Upper—and the system will provide an appropriate writing topic.
-        Once the topic is displayed, students write their responses in a structured text area and submit them for feedback.
-
-        The system provides feedback on grammar, clarity, and sentence structure to help students improve their writing skills.
-        Each session allows a single submission, with a reset option for students to try again if they wish.
-
-        This exercise helps students develop their writing abilities by guiding them to express their thoughts clearly and correctly.
-      `,
-      image: 'assets/images/home/writting.png',
-      action: () => this.goToWrite()
-    },
-    {
-      title: 'Vocabulary Builder',
-      description: `
-        This module helps students enhance their vocabulary through word selection and sentence creation exercises.
-
-        Students begin by selecting three related words from a multiple-choice list, which is dynamically generated by AI. After selecting the words, students are prompted to form sentences using these chosen words.
-
-        Using the three correct words, students need to form sentences in the respective areas. Each sentence is then evaluated, and students receive feedback on their usage.
-
-        This activity promotes vocabulary expansion and helps students learn to use words meaningfully in context.
-
-        It provides a structured approach to developing vocabulary and improving sentence formation skills.
-      `,
-      image: 'assets/images/home/vocabulary.png',
-      action: () => this.goToVocubalary()
-    },
-    {
-      title: 'Find Word',
-      description: `
-        This module enhances both listening and vocabulary skills through audio-based word recognition.
-
-        Students listen to a word, type what they heard, and receive instant feedback on their answer. and if the student enter the wrong answer there have 2 attempt after the 2 attempt it
-        automatically show the correct answer.
-
-        After validating the answer, students can view the word's meaning if  student enabe to answer there can view the meaning so that student will able to answer otherwise there have 2 attempt
-        and an example sentence, helping them understand the word in context. Once they complete this step, they can move on to the next round.
-
-        This activity supports the development of spelling accuracy, active listening, and contextual word usage.
-
-
-
-        This module enhances both listening and vocabulary skills through audio-based word recognition.
-
-        Students listen to a word, type what they heard, and receive instant feedback on their answer. If the student enters the wrong answer, they have two attempts to correct it. After the second attempt, the correct answer is automatically shown.
-
-        Additionally, an example sentence is provided to help students understand how to use the word in context. Once this step is completed, students can move on to the next round.
-
-        This activity helps improve spelling accuracy, active listening, and contextual word usage.
-      `,
-      image: 'assets/images/home/find_word.png',
-      action: () => this.goToFindword()
-    }
+    { title: 'Grammar Chat', image: 'assets/images/home/Grammar_chat.png', action: () => this.goToChat() },
+    { title: 'Grammar Quiz', image: 'assets/images/home/quiz.png', action: () => this.goToGenerateQuestions() },
+    { title: 'Voice', image: 'assets/images/home/voice.png', action: () => this.goToVoice() },
+    { title: 'Listening', image: 'assets/images/home/Listening.png', action: () => this.goToListen() },
+    { title: 'Reading', image: 'assets/images/home/Reading.png', action: () => this.goToRead() },
+    { title: 'Writing', image: 'assets/images/home/writting.png', action: () => this.goToWrite() },
+    { title: 'Vocabulary Builder', image: 'assets/images/home/vocabulary.png', action: () => this.goToVocubalary() },
+    { title: 'Find Word', image: 'assets/images/home/find_word.png', action: () => this.goToFindword() }
   ];
 
-  collapsedStates: boolean[] = [];
-  isOverflowing: boolean[] = [];
-  menuOpen = false;
-
-  constructor(private router: Router) { }
+  // -------------------- Constructor --------------------
+  constructor(
+    private router: Router,
+    private authService: AuthService,
+    private host: ElementRef,
+    public brand: BrandService
+  ) { }
+
+  // -------------------- Lifecycle Hooks --------------------
+  ngOnInit(): void {
+    this.isAuthenticated = this.authService.isLoggedIn();
+    this.username = localStorage.getItem('username');
+    this.authSub = this.authService.isLoggedIn$.subscribe((v) => {
+      this.isAuthenticated = v;
+      this.username = v ? localStorage.getItem('username') : null;
+      if (!v) this.showAccountMenu = false;
+    });
+  }
 
-  ngAfterViewInit(): void {
-    this.collapsedStates = this.cards.map(() => true);
-    this.isOverflowing = this.cards.map(() => false);
+  ngAfterViewInit(): void { }
 
-    // Delay to ensure DOM is rendered
-    setTimeout(() => {
-      this.wrappers.forEach((wrapper, index) => {
-        const el = wrapper.nativeElement as HTMLElement;
-        const maxHeight = parseFloat(getComputedStyle(el).maxHeight);
-        if (el.scrollHeight > maxHeight) {
-          this.isOverflowing[index] = true;
-        }
-      });
-    }, 0);
+  ngOnDestroy(): void {
+    this.authSub?.unsubscribe();
   }
 
-  toggleCard(index: number): void {
-    this.collapsedStates[index] = !this.collapsedStates[index];
-
-    if (this.collapsedStates[index]) {
-      setTimeout(() => {
-        const wrapper = this.wrappers.toArray()[index];
-        if (wrapper) {
-          wrapper.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-      }, 0);
-    }
+  // -------------------- Avatar Helpers --------------------
+  get usernameInitial(): string {
+    const u = this.username || '';
+    return u.trim().charAt(0).toUpperCase() || 'U';
   }
 
-  toggleMenu(): void {
-    this.menuOpen = !this.menuOpen;
+  get displayName(): string {
+    const u = this.username || '';
+    if (!u) return '';
+    const name = u.includes('@') ? u.split('@')[0] : u;
+    return name.replace(/\b\w/g, (c) => c.toUpperCase());
   }
 
-  reloadPage(): void {
-    window.location.href = '/';
+  get displayEmail(): string {
+    return this.username || '';
   }
 
-  navigateTo(path: string): void {
-    const routes = ['chat', 'practice', 'voice'];
-    if (routes.includes(path)) {
-      this.router.navigate([`/${path}`]);
-    } else {
-      console.error('Invalid path:', path);
+  // -------------------- Account Menu Controls --------------------
+  toggleAccountMenu(): void { this.showAccountMenu = !this.showAccountMenu; }
+  openAccountMenu(): void { this.showAccountMenu = true; }
+  closeAccountMenu(): void { this.showAccountMenu = false; }
+
+  @HostListener('document:click', ['$event'])
+  onDocClick(ev: MouseEvent) {
+    if (!this.host.nativeElement.contains(ev.target)) {
+      this.showAccountMenu = false;
     }
   }
 
-  goToChat(): void {
-    this.router.navigate(['/chat']);
+  // -------------------- Main Menu Controls --------------------
+  toggleMenu(): void { this.menuOpen = !this.menuOpen; }
+
+  // -------------------- Navigation --------------------
+  reloadPage(): void { window.location.href = '/'; }
+
+  goToChat(): void { this.router.navigate(['/chat']); }
+  goToGenerateQuestions(): void { this.router.navigate(['/generate-questions']); }
+  goToVoice(): void { this.router.navigate(['/voice']); }
+  goToListen(): void { this.router.navigate(['/listen']); }
+  goToWrite(): void { this.router.navigate(['/writing']); }
+  goToRead(): void { this.router.navigate(['/reading']); }
+  goToVocubalary(): void { this.router.navigate(['/vocabulary-builder']); }
+  goToFindword(): void { this.router.navigate(['/findword']); }
+  goToDetails(title: string): void {
+    this.router.navigate(['/details'], { queryParams: { topic: title } });
+  }
+
+  // --------------------User Guide Popup Controls --------------------
+  openGuidePopup(title: string): void {
+    this.selectedCardTitle = title;
+    this.showGuidePopup = true;
   }
 
-  goToGenerateQuestions(): void {
-    this.router.navigate(['/generate-questions']);
+  closeGuidePopup(): void {
+    this.showGuidePopup = false;
+    this.selectedCardTitle = null;
   }
 
-  goToVoice(): void {
-    this.router.navigate(['/voice']);
+  // -------------------- Account Actions --------------------
+  goToAccount(): void {
+    this.router.navigate(['/home']);
+    this.showAccountMenu = false;
   }
 
-  goToListen(): void {
-    this.router.navigate(['/listen']);
+  logout(): void {
+    this.authService.logout().subscribe({
+      next: () => {
+        localStorage.removeItem('username');
+        this.showAccountMenu = false;
+        this.router.navigate(['/home']);
+      },
+      error: () => {
+        localStorage.removeItem('username');
+        this.showAccountMenu = false;
+        this.router.navigate(['/home']);
+      }
+    });
   }
 
-  goToWrite(): void {
-    this.router.navigate(['/writing']);
+  // -------------------- privacy and terms and condition Popup Controls --------------------
+  openPrivacyPopup(event: Event): void {
+    event.preventDefault();
+    this.showPrivacyPopup = true;
   }
 
-  goToRead(): void {
-    this.router.navigate(['/reading']);
+  closePrivacyPopup(): void {
+    this.showPrivacyPopup = false;
   }
 
-  goToVocubalary(): void {
-    this.router.navigate(['/vocabulary-builder']);
+  openTermsPopup(event: Event): void {
+    event.preventDefault();
+    this.showTermsPopup = true;
   }
 
-  goToFindword(): void {
-    this.router.navigate(['/findword']);
+  closeTermsPopup(): void {
+    this.showTermsPopup = false;
   }
 }

src/app/shared/brand.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class BrandService {
+  private nameSubject = new BehaviorSubject<string>('Py-Learn');
+  private logoSubject = new BehaviorSubject<string>('assets/images/pykara-logo.png');
+
+  readonly name$ = this.nameSubject.asObservable();
+  readonly logo$ = this.logoSubject.asObservable();
+
+  get name(): string { return this.nameSubject.value; }
+  get logo(): string { return this.logoSubject.value; } 
+
+  setName(name: string) { this.nameSubject.next(name); }
+  setLogo(path: string) { this.logoSubject.next(path); }
+}

src/app/shared/header/header.component.css

@@ -0,0 +1,92 @@
+/* Reuse global styles; keep only minor tweaks if needed */
+:host {
+  display: block;
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 0 2vw;
+  background-color: #009688;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  overflow-x: clip;
+}
+
+  .header-container .logo,
+  .header-container .home-btn,
+  .header-container .toggle-buttons-container {
+    flex: 0 0 auto;
+  }
+
+.header-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: center;
+}
+
+  .header-title h1 {
+    font-size: 3vw;
+    color: #fff;
+    margin: 0;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+.header-container .logo img {
+  max-width: 5vw;
+  height: auto;
+  background: #fff;
+  border-radius: 1vw;
+  margin: 0.5vw;
+}
+
+.home-btn img {
+  width: 5vw;
+  transition: transform 0.2s ease;
+}
+
+  .home-btn img:hover {
+    transform: scale(1.08);
+  }
+
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 1vw;
+}
+
+.brand-link {
+  display: flex;
+  align-items: center;
+  gap: 0.6vw;
+  text-decoration: none;
+}
+
+.product-name {
+  color: #fff;
+  font-size: 2vw;
+  letter-spacing: 0.5px;
+  font-family: Amonk_Outline;
+  line-height: 1;
+}
+
+.brand-link:hover .product-name {
+  opacity: 0.9;
+}
+
+.header-title h1 {
+  font-family: 'Super Cartoon', cursive;
+}

src/app/shared/header/header.component.html

@@ -0,0 +1,22 @@
+<div class="header-container">
+  <div class="logo">
+    <a routerLink="/home" class="brand-link">
+      <img [src]="logoSrc || brand.logo" [alt]="(productName || brand.name) + ' Logo'" />
+    </a>
+    <span class="product-name">{{ productName || brand.name }}</span>
+  </div>
+
+  <div class="header-title" *ngIf="title">
+    <h1>{{ title }}</h1>
+  </div>
+
+  <div class="toggle-buttons-container modern-toggle">
+    <ng-content select="[header-right]"></ng-content>
+  </div>
+
+  <div class="home-btn" *ngIf="showHome">
+    <a routerLink="/home">
+      <img src="assets/images/home.png" alt="Home" class="home-icon" />
+    </a>
+  </div>
+</div>

src/app/shared/header/header.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { BrandService } from '../brand.service';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent {
+  @Input() title: string | null = null;
+  @Input() showHome: boolean = true;
+  @Input() logoSrc?: string;    // optional override
+  @Input() productName?: string; // optional override
+
+  constructor(public brand: BrandService) {}
+}

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

@@ -0,0 +1,1889 @@
+/* root colors and variables remain unchanged */
+
+.signin-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  background: #05234b;
+  backdrop-filter: blur(16px);
+}
+
+/* Ensure no solid white background is set anywhere */
+
+.signin-header {
+  width: 420px;
+  max-width: 95vw;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 0;
+  position: absolute;
+  top: -28px;
+  right: 12px;
+  pointer-events: none;
+  z-index: 2;
+}
+.signin-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  pointer-events: auto;
+}
+.signin-login-link {
+  font-size: 1.1rem;
+  color: #fff;
+  margin-top: 0;
+  pointer-events: auto;
+  background: #18314a;
+  border-radius: 0 0 12px 12px;
+  padding: 8px 18px 4px 18px;
+  box-shadow: 0 2px 8px #0002;
+  position: relative;
+  right: 0;
+  top: 0;
+}
+.signin-login-link a {
+  color: #1de9b6;
+  text-decoration: underline;
+  margin-left: 6px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.signin-box {
+  margin: 0 auto;
+  /* Center the box horizontally and vertically */
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: #18314a;
+  border-radius: 22px;
+  box-shadow: 0 12px 48px #000a;
+  padding: 48px 38px 32px 38px;
+  width: 420px;
+  max-width: 95vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.signin-title {
+  color: #38bdf8;
+  font-size: 2.1rem;
+  font-weight: 800;
+  margin-bottom: 12px;
+  text-align: center;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 8px #0008;
+}
+form {
+  width: 100%;
+}
+.signin-row {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 18px;
+}
+.signin-field {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.signin-field label {
+  color: #fff;
+  font-weight: 600;
+  margin-bottom: 6px;
+  font-size: 1rem;
+  letter-spacing: 0.5px;
+}
+.signin-field input {
+  background: #fff;
+  color: #18314a;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 1rem;
+  margin-bottom: 2px;
+  box-shadow: 0 1px 4px #0002;
+  transition: border 0.2s, box-shadow 0.2s;
+}
+.signin-field input:focus {
+  outline: 2px solid #1de9b6;
+  border-color: #1de9b6;
+  box-shadow: 0 0 0 2px #1de9b688;
+}
+.signin-field input::placeholder {
+  color: #b0b8c1;
+  opacity: 1;
+}
+.signin-field small.error {
+  color: #ff5252;
+  font-size: 0.85rem;
+  margin-top: 4px;
+}
+.signin-options-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2vw;
+  margin-top: -8px;
+}
+.remember-me {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 1rem;
+  color: #b0b8c1;
+}
+  .remember-me input[type="checkbox"] {
+    accent-color: #38bdf8;
+    width: 16px;
+    height: 16px;
+  }
+.forgot-password {
+  font-size: 1rem;
+}
+.forgot-link {
+  color: #38bdf8;
+  text-decoration: underline;
+  font-weight: 500;
+  cursor: pointer;
+}
+.signin-btn {
+  width:100%;
+  background: #18314a;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 18px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+  .signin-btn:hover {
+    background: #38bdf8;
+  }
+.signin-footer {
+  color: #b0b8c1;
+  font-size: 0.95rem;
+  text-align: center;
+  margin-top: 8px;
+}
+.signin-footer .footer-sep {
+  display: block;
+  height: 16px;
+}
+  .signin-footer a {
+    color: #38bdf8;
+    text-decoration: underline;
+    margin-left: 4px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+.signin-close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 38px;
+  height: 38px;
+  border: none;
+  background: #14263c;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px #0005;
+}
+  .signin-close:hover {
+    background: #38bdf8;
+    color: #18314a;
+  }
+
+@media (max-width: 700px) {
+  .signin-box {
+    padding: 18px 6vw 18px 6vw;
+    width: 98vw;
+  }
+  .signin-header {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 98vw;
+    padding: 0 0 12px 0;
+  }
+  .signin-title {
+    font-size: 1.3rem;
+  }
+  .signin-row {
+    flex-direction: column;
+    gap: 0;
+  }
+}
+.ai-particle-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background: url('/assets/particles.svg');
+  opacity: 0.18;
+  animation: particleDrift 18s linear infinite;
+}
+@keyframes particleDrift {
+  0% { background-position: 0 0; }
+  100% { background-position: 120px 80px; }
+}
+.spinner {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 3px solid #fff;
+  border-top: 3px solid #38bdf8;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg);} 
+  100% { transform: rotate(360deg);} 
+}
+
+.py-logo-glow {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  box-shadow: 0 0 24px #38bdf8, 0 0 12px #13bfa6;
+  animation: logoGlow 3.5s ease-in-out infinite alternate;
+}
+@keyframes logoGlow {
+  0% { box-shadow: 0 0 12px #38bdf8, 0 0 6px #13bfa6; }
+  100% { box-shadow: 0 0 32px #38bdf8, 0 0 18px #13bfa6; }
+}
+.ai-scan-line {
+  display: none;
+}
+.ai-slide-in {
+  animation: slideInBox 0.8s cubic-bezier(.39,.58,.57,1) both;
+}
+@keyframes slideInBox {
+  0% { opacity: 0; transform: translateY(40px) scale(0.98); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+.lock-icon {
+  color: #38bdf8;
+  font-size: 1.2em;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+.signin-tagline {
+  color: #b0b8c1;
+  font-size: 1.08em;
+  text-align: center;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.signin-welcome {
+  color: #38bdf8;
+  font-size: 1.05em;
+  text-align: center;
+  margin-bottom: 18px;
+  font-weight: 600;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 22px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: #b0b8c1;
+  border-radius: 22px;
+  transition: .4s;
+}
+.switch input:checked + .slider {
+  background: #38bdf8;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 3px;
+  bottom: 3px;
+  background: #fff;
+  border-radius: 50%;
+  transition: .4s;
+}
+.switch input:checked + .slider:before {
+  transform: translateX(16px);
+}
+.signin-hint {
+  color: #b0b8c1;
+  font-size: 0.95em;
+  text-align: right;
+  margin-bottom: 8px;
+}
+.ai-pulse {
+  animation: aiPulseGlow 1.5s infinite alternate;
+}
+@keyframes aiPulseGlow {
+  0% { box-shadow: 0 2px 12px #38bdf844; }
+  100% { box-shadow: 0 2px 24px #38bdf888; }
+}
+.signin-session-tip {
+  color: #b0b8c1;
+  font-size: 0.95em;
+  text-align: center;
+  margin-bottom: 8px;
+}
+.signin-security-note {
+  color: #ff5252;
+  font-size: 0.95em;
+  font-weight: 600;
+  display: block;
+  margin-bottom: 4px;
+}
+.signin-error-toast {
+  background: transparent;
+  color: #ff5252;
+  font-weight: 700;
+  border-radius: 8px;
+  border: 1px solid #ff5252;
+  padding: 8px 18px;
+  margin: 12px 0;
+  text-align: center;
+  animation: shakeError 0.3s cubic-bezier(.39,.58,.57,1);
+}
+@keyframes shakeError {
+  0% { transform: translateX(0); }
+  20% { transform: translateX(-8px); }
+  40% { transform: translateX(8px); }
+  60% { transform: translateX(-8px); }
+  80% { transform: translateX(8px); }
+  100% { transform: translateX(0); }
+}
+.forgot-modal-bg {
+  position: fixed;
+  inset: 0;
+  background: rgba(30,41,59,0.9);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeInModalBg 0.4s;
+}
+@keyframes fadeInModalBg {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.forgot-modal {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+  padding: 32px 36px 28px 36px;
+  min-width: 320px;
+  max-width: 90vw;
+  text-align: center;
+  z-index: 2001;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: fadeInModal 0.4s;
+}
+@keyframes fadeInModal {
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
+}
+.forgot-modal h3 {
+  color: #38bdf8;
+  margin: 12px 0 8px 0;
+  font-size: 1.4em;
+  font-weight: 700;
+}
+.forgot-modal p {
+  color: #23272b;
+  font-size: 1.08em;
+  margin-bottom: 18px;
+}
+.forgot-modal input[type="email"] {
+  background: #f4f6fa;
+  color: #18314a;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 1rem;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 4px #0002;
+  width: 100%;
+}
+.modal-close {
+  width: 23%;
+  background: #18314a;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 0;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  display: block;
+}
+
+  .modal-close:hover {
+    background: #38bdf8;
+    color: #18314a;
+  }
+.google-signin-row {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+#google-btn-div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+#google-btn-div > div {
+  width: 100%;
+  min-width: 0;
+  border-radius: 8px !important;
+  padding: 14px 0 !important;
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  box-shadow: 0 2px 8px #0003 !important;
+  background: #fff !important;
+  color: #18314a !important;
+  border: none !important;
+  margin: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.g-signin2 {
+  width: 100%;
+  min-width: 0;
+  border-radius: 8px !important;
+  padding: 14px 0 !important;
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  box-shadow: 0 2px 8px #0003 !important;
+  background: #fff !important;
+  color: #18314a !important;
+  border: none !important;
+  margin: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.eye-toggle {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  font-size: 1.3em;
+  color: #888;
+  cursor: pointer;
+  z-index: 2;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.7;
+  transition: color 0.2s, opacity 0.2s;
+}
+#password {
+  padding-right: 40px;
+}
+
+.password-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.password-label .eye-toggle {
+  position: static;
+  right: auto;
+  top: auto;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  color: #888;
+  opacity: 0.9;
+  padding: 0 4px;
+}
+.password-label .eye-toggle:hover {
+  color: #555;
+  opacity: 1;
+}
+
+/* --- UI DESIGN UPDATE TO MATCH SCREENSHOT --- */
+.auth-box {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 820px;
+  max-width: 98vw;
+  min-width: 340px;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #0002;
+  overflow: hidden;
+  background: none;
+}
+
+.panel-left {
+  background: #fff;
+  color: #222;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 32px;
+}
+.panel-left .signin-title {
+  font-size: 2.1rem;
+  font-weight: 800;
+  margin-bottom: 12px;
+  text-align: center;
+  color: #222;
+}
+.panel-left .signin-desc {
+  font-size: 1.05rem;
+  margin-bottom: 24px;
+  text-align: center;
+  color: #555;
+}
+.panel-left .signin-btn {
+  background: var(--primary-cyan-mid);
+  color: #fff;
+  border: none;
+  border-radius: 999px;
+  padding: 12px 32px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+.panel-left .signin-btn:hover {
+  background: var(--primary-cyan-dark);
+  color: #fff;
+}
+
+.panel-right {
+  background: linear-gradient(135deg, var(--primary-cyan-dark) 0%, var(--primary-cyan-mid) 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 32px;
+}
+.panel-right .signup-title {
+  font-size: 2rem;
+  font-weight: 800;
+  margin-bottom: 18px;
+  text-align: left;
+  color: #fff;
+}
+.panel-right .signup-desc {
+  font-size: 1.05rem;
+  margin-bottom: 24px;
+  text-align: center;
+  color: #fff;
+}
+.panel-right .signup-btn {
+  background: none;
+  color: #fff;
+  border: 2px solid #fff;
+  border-radius: 999px;
+  padding: 12px 32px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: none;
+}
+
+
+/* Input fields and buttons for left panel */
+.panel-left .signin-field input,
+.panel-left .signin-field select {
+  background: #f5f5f5;
+  color: #222;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 1rem;
+  margin-bottom: 2px;
+  box-shadow: 0 1px 4px #0001;
+  transition: border 0.2s, box-shadow 0.2s;
+}
+.panel-left .signin-field input:focus,
+.panel-left .signin-field select:focus {
+  outline: 2px solid #ff416c;
+  border-color: #ff416c;
+  box-shadow: 0 0 0 2px #ff416c44;
+}
+
+/* Social buttons row for left panel */
+.panel-left .social-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 18px;
+  justify-content: center;
+}
+.panel-left .social-btn {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3em;
+  color: var(--primary-cyan-dark);
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 2px 8px #0001;
+  transition: background 0.2s, color 0.2s;
+}
+.panel-left .social-btn:hover {
+  background: var(--primary-cyan-dark);
+  color: #fff;
+}
+
+/* Professional shadow and rounded corners for the whole box */
+.auth-box {
+  box-shadow: 0 8px 32px #0002;
+  border-radius: 18px;
+}
+
+/* Ensure identical size and prevent clipping */
+.auth-box {
+  display: grid;
+  grid-template-columns: 420px 600px; /* match sign-up columns */
+  width: 1020px; /* increased to accommodate both panels */
+  height: 620px; /* increased height to avoid overflow */
+  max-width: 98vw;
+  min-width: 340px;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #0002;
+  overflow: visible; /* ensure no content is clipped */
+  background: none;
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* Reduce right panel width to make it less large */
+.auth-box {
+  display: grid;
+  grid-template-columns: 360px 840px; /* reduced right panel from 600px to 520px */
+  width: 850px; /* adjusted total width to match columns */
+  height: 820px;
+  max-width: 98vw;
+  min-width: 340px;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #0002;
+  overflow: visible; /* ensure no content is clipped */
+  background: none;
+  position: relative;
+  box-sizing: border-box;
+  justify-content:end;
+  align-items:baseline;
+  justify-items:start;
+}
+
+/* Ensure panels occupy full height and use box-sizing */
+.panel-left, .panel-right {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Card viewport and sliding inner container */
+.auth-card {
+  width: 1140px; /* viewport width remains */
+  height: 700px; /* increased height to accommodate content and remove scroll */
+  perspective: none;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12), #ffffff 1px 1px 51px; /* added white glow */
+  margin: 0 auto;
+}
+
+.card-inner {
+ width:200%; /* contains both faces side-by-side */
+ height:100%;
+ display: flex; /* place front and back side-by-side */
+ /* much slower transition so flip is clearly visible to users */
+ transition: transform 0.7s cubic-bezier(.22, .9, .32,1);
+ will-change: transform;
+}
+
+.auth-card.flipped .card-inner {
+ transform: translate3d(-50%,0,0);
+}
+.auth-card:not(.flipped) .card-inner {
+ transform: translate3d(0,0,0);
+}
+
+/* panel fade with proper syntax */
+.card-front .main-panel,
+.card-back .main-panel {
+ transition: opacity 1s ease 0.15s;
+}
+.card-front[aria-hidden="true"] .main-panel,
+.card-back[aria-hidden="true"] .main-panel {
+ opacity:0;
+}
+.card-front[aria-hidden="false"] .main-panel,
+.card-back[aria-hidden="false"] .main-panel {
+ opacity:1;
+}
+
+/* faces: each takes 50% of the inner width (i.e. the viewport) */
+.card-front, .card-back {
+  width: 50%;
+  height: 100%;
+  flex: 0 0 50%;
+  box-sizing: border-box;
+  position: relative; /* allow absolute children inside */
+  overflow: hidden;
+}
+
+/* layout inside each face: side-panel + main-panel split */
+.card-content {
+  display: flex;
+  height: 100%;
+  flex-direction: row-reverse;
+}
+.side-panel { width: 48%; display:flex; align-items:center; justify-content:center; }
+.main-panel { width: 55%; padding: 48px 48px; box-sizing:border-box; background:#fff; overflow: visible; display:flex; flex-direction:column; align-items:center; }
+
+/* center logo header */
+.logo-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: 8px;
+}
+.py-learn-text {
+  font-size: 3vw;
+  font-weight: 600;
+  color: #073879;
+  font-family: Amonk_Outline;
+  margin-bottom: 1vw;
+}
+.self-learning-system {
+  font-size: 1.2vw;
+  font-weight: bolder;
+  color: #073879;
+  margin-top: -.8vw;
+}
+
+.side-right {
+  background: linear-gradient(135deg,#137ec4 0%,#137ec4 100%);
+}
+.side-left {
+  background: linear-gradient(135deg, #137ec4 0%, #38bdf8 100%);
+}
+.side-inner { color:#fff; text-align:center; padding: 32px; }
+.side-inner h3 { font-size: 1.6rem; margin-bottom:12px; }
+.side-text { opacity: 0.95; }
+.panel-cta { background:none; border:2px solid #fff; color:#fff; padding:10px 22px; border-radius:999px; cursor:pointer; margin-top:12px; }
+
+/* Ensure sign-in text colors for white main panel */
+.card-front .main-panel .signin-title { color: #222; }
+.card-back .main-panel .signup-title { color: #222; }
+
+/* Maintain previous smaller-screen behavior (stack panels) */
+@media (max-width: 900px){
+  .auth-card{ width:92vw; height:auto; }
+  .card-inner{ width: 200%; /* still double width but we'll stack */ }
+  .card-content{ flex-direction: column; }
+  .side-panel{ width:100%; height:200px; }
+  .main-panel{ width:100%; overflow: visible; }
+}
+
+/* keep existing control styles unchanged (inputs/buttons/etc.) */
+
+/* minimal overwrite of previous rules that used absolute positioning */
+.m, .signin-close, .card-back .signin-close { position: absolute; top: 5px; right: 5px; z-index: 10; }
+
+/* accessibility: hide offscreen face from assistive tech when sliding */
+.card-front[aria-hidden="true"], .card-back[aria-hidden="true"] {
+  pointer-events: none;
+}
+
+/* Change right panel gradient to blue/cyan */
+.side-panel.side-right {
+  background: linear-gradient(135deg, #1d608b 0%, #1d608b 100%);
+}
+
+/* Info box styling for right panel */
+.side-info-box {
+  position: absolute;
+  top: 164px;
+  left: 0;
+  width: 88%;
+  padding: 0 32px;
+  z-index: 2;
+  text-align: left;
+}
+.side-info-title {
+  font-size: 1.35rem;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 6px;
+  letter-spacing: 0.5px;
+}
+.side-info-desc {
+  font-size: 1.08rem;
+  color: #e0f7fa;
+  margin-bottom: 8px;
+}
+.side-info-link {
+  color: #fff;
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.side-info-link:hover {
+  color: #23395d;
+}
+
+/* Ensure info box is above image */
+.side-panel {
+  position: relative;
+}
+
+/* Google button row spacing */
+.google-signin-row {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+#google-btn-div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.g-signin2 {
+
+  margin: 0 auto;
+}
+
+/* Ensure main-panel text is black (readable on white background) */
+.card-front .main-panel,
+.card-front .main-panel .signin-title,
+.card-front .main-panel .signin-tagline,
+.card-front .main-panel .signin-welcome,
+.card-front .main-panel .signin-session-tip,
+.card-front .main-panel .signin-hint,
+.card-front .main-panel .signin-footer,
+.card-front .main-panel label,
+.card-front .main-panel .signin-field small,
+.card-front .main-panel .signin-field label {
+  color: #23395d !important;
+}
+
+/* Ensure required field errors are red on the front main panel */
+.card-front .main-panel .signin-field small.error {
+  color: #ff5252 !important;
+}
+
+/* Keep links styled but darken slightly for contrast */
+.card-front .main-panel a {
+ color: #0b57a4 !important;
+}
+.signin-divider-row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width:100%;
+ margin:12px 018px 0;
+}
+.divider {
+ flex:1;
+ height:1px;
+ background: #b0b8c1;
+ margin:08px;
+}
+.divider-or {
+ color: #23395d;
+ font-size:1.08em;
+ font-weight:600;
+ margin:08px;
+}
+.google-btn {
+  width: 100%;
+  height: 45px;
+  background: #18314a;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 18px;
+  cursor: pointer;
+  box-shadow: 02px 8px #0003;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  transition: background 0.2s, color 0.2s;
+}
+  .google-btn:hover {
+    background: #38bdf8;
+  }
+.google-logo {
+ width:24px;
+ height:24px;
+}
+.fact-rotator {
+ font-size:1.18rem;
+ font-weight:700;
+ color: #fff;
+ margin-bottom:8px;
+ min-height:32px;
+ text-align: left;
+ transition: opacity 0.6s;
+ letter-spacing:0.5px;
+ animation: fadeFact0.6s;
+}
+@keyframes fadeFact {
+ from { opacity:0; }
+ to { opacity:1; }
+}
+.side-panel.side-left {
+  position: relative;
+  overflow: hidden;
+  background: #1d608b; /* Strong blue for contrast */
+  min-height: 400px;
+}
+.side-img {
+ position: absolute;
+ top:0; left:0;
+ width:100%; height:100%;
+ object-fit: cover;
+ z-index:0;
+}
+.side-bg-shapes {
+ position: absolute;
+ top:0; left:0; right:0; bottom:0;
+ width:100%; height:100%;
+ z-index:1;
+ pointer-events: none;
+}
+.bg-circle {
+ position: absolute;
+ border-radius:50%;
+ opacity:0.85;
+}
+.circle1 {
+  width: 120px;
+  height: 120px;
+  top: 18px;
+  left: 18px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+.circle2 {
+  width: 80px;
+  height: 80px;
+  top: 71%;
+  left: 113px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+
+.circle3 {
+  width: 48px;
+  height: 48px;
+  top: 80%;
+  left: 70%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+
+.circle4 {
+  width: 160px;
+  height: 160px;
+  top: 70px;
+  right: 204px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.7;
+}
+
+.circle5 {
+  width: 36px;
+  height: 36px;
+  top: 30%;
+  left: 80%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.6;
+}
+
+.circle6 {
+  width: 60px;
+  height: 60px;
+  bottom: 12%;
+  right: 18%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.5;
+}
+
+.circle7 {
+  width: 54px;
+  height: 54px;
+  top: 10%;
+  right: 10%;
+  background: #18314a;
+  opacity: 0.8;
+}
+
+.circle8 {
+  width: 32px;
+  height: 32px;
+  bottom: 20%;
+  left: 60%;
+  background: #14263c;
+  opacity: 0.8;
+}
+
+.circle9 {
+  width: 44px;
+  height: 44px;
+  top: 75%;
+  left: 40%;
+  background: #18314a;
+  opacity: 0.7;
+}
+
+.circle10 {
+  width: 28px;
+  height: 28px;
+  top: 15%;
+  left: 60%;
+  background: #14263c;
+  opacity: 0.9;
+}
+
+.circle11 {
+  width: 38px;
+  height: 38px;
+  bottom: 10%;
+  right: 10%;
+  background: #18314a;
+  opacity: 0.7;
+}
+
+.circle12 {
+  width: 22px;
+  height: 22px;
+  top: 85%;
+  right: 20%;
+  background: #14263c;
+  opacity: 0.8;
+}
+
+/* New large solid circles for sign-in page background */
+.circle-large1 {
+ width:220px;
+ height:220px;
+ top:40px;
+ left:60px;
+ background: #137ec4;
+ opacity:0.45;
+ z-index:0;
+}
+.circle-large2 {
+ width:180px;
+ height:180px;
+ bottom:40px;
+ right:40px;
+ background: #38bdf8;
+ opacity:0.35;
+ z-index:0;
+}
+.circle-large3 {
+ width:140px;
+ height:140px;
+ top:60%;
+ left:60%;
+ background: #18314a;
+ opacity:0.25;
+ z-index:0;
+}
+.circle-large4 {
+ width:100px;
+ height:100px;
+ bottom:11%;
+ left:5%;
+ background: #13bfa6;
+ opacity:0.52;
+ z-index:0;
+}
+
+/* Add more white rings for contrast */
+.bg-ring {
+ position: absolute;
+ border-radius:50%;
+ border:6px solid #fff;
+ background: none;
+ opacity:0.8;
+ z-index:1;
+}
+.ring1 { width:90px; height:90px; bottom:24px; left:18px; }
+.ring2 { width:48px; height:48px; top:60px; right:32px; }
+.ring3 { width:72px; height:72px; top:10%; left:70%; border-color: #fff; opacity:0.7; }
+.ring4 { width:110px; height:110px; bottom:2%; right:43%; border-color: #fff; opacity:0.5; }
+.ring5 { width:38px; height:38px; top:75%; left:10%; border-color: #fff; opacity:0.8; }
+.ring6 { width:64px; height:64px; top:49%; right:20%; border-color: #fff; opacity:0.7; }
+.ring7 { width:120px; height:120px; top:14%; left:49%; border-color: #fff; opacity:0.6; }
+.ring8 { width:80px; height:80px; bottom:20%; right:30%; border-color: #fff; opacity:0.7; }
+.ring9 { width:60px; height:60px; top:65%; left:36%; border-color: #fff; opacity:0.7; }
+
+.side-welcome-overlay {
+ position: absolute;
+ top:30%;
+ left:50px;
+ width:93%;
+ text-align: start;
+ z-index:2;
+ padding:024px;
+ pointer-events: auto;
+}
+.welcome-back-title {
+ font-size:2.1rem;
+ font-weight:800;
+ color: #fff;
+ margin-bottom:8px;
+ 
+}
+.welcome-back-desc {
+ font-size:1rem;
+ color: #e0f7fa;
+ margin-bottom:18px;
+
+}
+.action-btn {
+ width:21%;
+ background: #18314a;
+ color: #fff;
+ border: none;
+ border-radius:8px;
+ padding:14px 0;
+ font-size:1.1rem;
+ font-weight:700;
+ margin-top:18px;
+ margin-bottom:0;
+ display: inline-block;
+ letter-spacing:0.5px;
+ box-shadow:02px 8px #0003;
+ cursor: pointer;
+ transition: background 0.2s, color 0.2s;
+}
+.action-btn:hover {
+ background: #38bdf8;
+ color: #18314a;
+}
+
+/* Place reveal icon inline when inside the password label */
+.password-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Wrap for input with trailing icon */
+.input-with-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.input-with-icon input {
+  width: 100%;
+  padding-right: 42px; /* space for the icon */
+}
+.input-with-icon .eye-toggle {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  font-size: 1.2em;
+  color: #888;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.8;
+}
+.input-with-icon .eye-toggle:hover {
+  opacity: 1;
+  color: #555;
+}
+
+/* add invalid input red outline */
+.signin-field input.invalid {
+  border: 1px solid #ff5252;
+}
+
+/* === Readability enhancements for left image overlay (scoped) === */
+.side-panel.side-left { position: relative; }
+.side-panel.side-left::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(205deg, rgba(5,25,46,0.85) 8%, rgba(5,25,46,0.70) 40%, rgba(5,25,46,0.35) 75%);
+  z-index: 1; /* sits above the image, below text card */
+  pointer-events: none;
+}
+/* Frosted glass card for the welcome text */
+  .side-panel.side-left .side-welcome-overlay {
+    position: absolute;
+    top: 44%;
+    left: 10%;
+    z-index: 2;
+    background: rgba(15, 40, 70, 0.55);
+    backdrop-filter: blur(6px) saturate(140%);
+    -webkit-backdrop-filter: blur(6px) saturate(140%);
+    padding: 20px 24px 24px;
+    border-radius: 18px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    max-width: 429px;
+    width: auto;
+    
+    text-align: center;
+  }
+/* Strengthen text contrast */
+.side-panel.side-left .welcome-back-desc,
+.side-panel.side-left .welcome-back-title { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
+/* Refine button inside overlay only */
+.side-panel.side-left .action-btn {
+  background: #38bdf8;
+  color: #082a47;
+  border: 1px solid #4fd3ff;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
+  padding: 10px 28px;
+  width: auto; /* shrink to content */
+  margin-top: 4px;
+  letter-spacing: 0.6px;
+  transition: background .25s, box-shadow .25s, transform .25s;
+}
+.side-panel.side-left .action-btn:hover {
+  background: #4fd3ff;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
+  transform: translateY(-2px);
+}
+.side-panel.side-left .action-btn:active { transform: translateY(0); }
+.side-panel.side-left .action-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
+/* Responsive adjustment so card stays readable on narrow screens */
+@media (max-width: 900px) {
+  .side-panel.side-left .side-welcome-overlay {
+    left: 50%;
+    top: auto;
+    bottom: 20px;
+    transform: translateX(-50%);
+    max-width: 92%;
+    padding: 18px 20px 22px;
+  }
+}
+/* === End readability enhancements === */
+
+
+/* === Readability enhancements for right image overlay (scoped) === */
+.side-panel.side-right { position: relative; overflow:hidden; }
+.side-panel.side-right::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(205deg, rgba(5,25,46,0.85) 10%, rgba(5,25,46,0.70) 45%, rgba(5,25,46,0.32) 78%);
+  z-index: 1; /* above image, below info card */
+  pointer-events: none;
+}
+.side-panel.side-right .side-info-box {
+      position: absolute;
+    top: 38%;
+    left: 7%;
+    z-index: 2;
+    background: rgba(15, 40, 70, 0.55);
+    backdrop-filter: blur(6px) saturate(140%);
+    -webkit-backdrop-filter: blur(6px) saturate(140%);
+    padding: 20px 24px 24px;
+    border-radius: 18px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    max-width: 469px;
+    /* width: auto; */
+    text-align: center;
+}
+.side-panel.side-right .welcome-back-title,
+.side-panel.side-right .welcome-back-desc { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
+.side-panel.side-right .action-btn {
+  background: #38bdf8;
+  color: #082a47;
+  border: 1px solid #4fd3ff;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
+  padding: 10px 28px;
+  width: auto;
+  margin-top: 4px;
+  letter-spacing: 0.6px;
+  transition: background .25s, box-shadow .25s, transform .25s;
+}
+.side-panel.side-right .action-btn:hover {
+  background: #4fd3ff;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
+  transform: translateY(-2px);
+}
+.side-panel.side-right .action-btn:active { transform: translateY(0); }
+.side-panel.side-right .action-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
+@media (max-width: 900px) {
+  .side-panel.side-right .side-info-box {
+    left: 50%;
+    top: auto;
+    bottom: 20px;
+    transform: translateX(-50%);
+    max-width: 92%;
+    padding: 18px 20px 22px;
+  }
+}
+.side-panel.side-right {
+  position: relative;
+  overflow: hidden;
+  background: #1d608b; /* Strong blue for contrast */
+  min-height: 400px;
+}
+.side-img {
+ position: absolute;
+ top:0; left:0;
+ width:100%; height:100%;
+ object-fit: cover;
+ z-index:0;
+}
+.side-bg-shapes {
+ position: absolute;
+ top:0; left:0; right:0; bottom:0;
+ width:100%; height:100%;
+ z-index:1;
+ pointer-events: none;
+}
+.bg-circle {
+ position: absolute;
+ border-radius:50%;
+ opacity:0.85;
+}
+.circle1 {
+  width: 120px;
+  height: 120px;
+  top: 18px;
+  left: 18px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+.circle2 {
+  width: 80px;
+  height: 80px;
+  top: 71%;
+  left: 113px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+
+.circle3 {
+  width: 48px;
+  height: 48px;
+  top: 80%;
+  left: 70%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+
+.circle4 {
+  width: 160px;
+  height: 160px;
+  top: 70px;
+  right: 204px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.7;
+}
+
+.circle5 {
+  width: 36px;
+  height: 36px;
+  top: 30%;
+  left: 80%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.6;
+}
+
+.circle6 {
+  width: 60px;
+  height: 60px;
+  bottom: 12%;
+  right: 18%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.5;
+}
+
+.circle7 {
+  width: 54px;
+  height: 54px;
+  top: 10%;
+  right: 10%;
+  background: #18314a;
+  opacity: 0.8;
+}
+
+.circle8 {
+  width: 32px;
+  height: 32px;
+  bottom: 20%;
+  left: 60%;
+  background: #14263c;
+  opacity: 0.8;
+}
+
+.circle9 {
+  width: 44px;
+  height: 44px;
+  top: 75%;
+  left: 40%;
+  background: #18314a;
+  opacity: 0.7;
+}
+
+.circle10 {
+  width: 28px;
+  height: 28px;
+  top: 15%;
+  left: 60%;
+  background: #14263c;
+  opacity: 0.9;
+}
+
+.circle11 {
+  width: 38px;
+  height: 38px;
+  bottom: 10%;
+  right: 10%;
+  background: #18314a;
+  opacity: 0.7;
+}
+
+.circle12 {
+  width: 22px;
+  height: 22px;
+  top: 85%;
+  right: 20%;
+  background: #14263c;
+  opacity: 0.8;
+}
+
+/* New large solid circles for sign-in page background */
+.circle-large1 {
+ width:220px;
+ height:220px;
+ top:40px;
+ left:60px;
+ background: #137ec4;
+ opacity:0.45;
+ z-index:0;
+}
+.circle-large2 {
+ width:180px;
+ height:180px;
+ bottom:40px;
+ right:40px;
+ background: #38bdf8;
+ opacity:0.35;
+ z-index:0;
+}
+.circle-large3 {
+ width:140px;
+ height:140px;
+ top:60%;
+ left:60%;
+ background: #18314a;
+ opacity:0.25;
+ z-index:0;
+}
+.circle-large4 {
+ width:100px;
+ height:100px;
+ bottom:11%;
+ left:5%;
+ background: #13bfa6;
+ opacity:0.52;
+ z-index:0;
+}
+
+/* Add more white rings for contrast */
+.bg-ring {
+ position: absolute;
+ border-radius:50%;
+ border:6px solid #fff;
+ background: none;
+ opacity:0.8;
+ z-index:1;
+}
+.ring1 { width:90px; height:90px; bottom:24px; left:18px; }
+.ring2 { width:48px; height:48px; top:60px; right:32px; }
+.ring3 { width:72px; height:72px; top:10%; left:70%; border-color: #fff; opacity:0.7; }
+.ring4 { width:110px; height:110px; bottom:2%; right:43%; border-color: #fff; opacity:0.5; }
+.ring5 { width:38px; height:38px; top:75%; left:10%; border-color: #fff; opacity:0.8; }
+.ring6 { width:64px; height:64px; top:49%; right:20%; border-color: #fff; opacity:0.7; }
+.ring7 { width:120px; height:120px; top:14%; left:49%; border-color: #fff; opacity:0.6; }
+.ring8 { width:80px; height:80px; bottom:20%; right:30%; border-color: #fff; opacity:0.7; }
+.ring9 { width:60px; height:60px; top:65%; left:36%; border-color: #fff; opacity:0.7; }
+
+.side-welcome-overlay {
+ position: absolute;
+ top:30%;
+ left:50px;
+ width:93%;
+ text-align: start;
+ z-index:2;
+ padding:024px;
+ pointer-events: auto;
+}
+.welcome-back-title {
+ font-size:2.1rem;
+ font-weight:800;
+ color: #fff;
+ margin-bottom:8px;
+ 
+}
+.welcome-back-desc {
+ font-size:1rem;
+ color: #e0f7fa;
+ margin-bottom:18px;
+
+}
+.action-btn {
+ width:21%;
+ background: #18314a;
+ color: #fff;
+ border: none;
+ border-radius:8px;
+ padding:14px 0;
+ font-size:1.1rem;
+ font-weight:700;
+ margin-top:18px;
+ margin-bottom:0;
+ display: inline-block;
+ letter-spacing:0.5px;
+ box-shadow:02px 8px #0003;
+ cursor: pointer;
+ transition: background 0.2s, color 0.2s;
+}
+.action-btn:hover {
+ background: #38bdf8;
+ color: #18314a;
+}
+
+/* Place reveal icon inline when inside the password label */
+.password-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Wrap for input with trailing icon */
+.input-with-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.input-with-icon input {
+  width: 100%;
+  padding-right: 42px; /* space for the icon */
+}
+.input-with-icon .eye-toggle {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  font-size: 1.2em;
+  color: #888;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.8;
+}
+.input-with-icon .eye-toggle:hover {
+  opacity: 1;
+  color: #555;
+}
+
+/* add invalid input red outline */
+.signin-field input.invalid {
+  border: 1px solid #ff5252;
+}
+
+/* === Readability enhancements for left image overlay (scoped) === */
+.side-panel.side-left { position: relative; }
+.side-panel.side-left::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(205deg, rgba(5,25,46,0.85) 8%, rgba(5,25,46,0.70) 40%, rgba(5,25,46,0.35) 75%);
+  z-index: 1; /* sits above the image, below text card */
+  pointer-events: none;
+}
+/* Frosted glass card for the welcome text */
+  .side-panel.side-left .side-welcome-overlay {
+    position: absolute;
+    top: 44%;
+    left: 10%;
+    z-index: 2;
+    background: rgba(15, 40, 70, 0.55);
+    backdrop-filter: blur(6px) saturate(140%);
+    -webkit-backdrop-filter: blur(6px) saturate(140%);
+    padding: 20px 24px 24px;
+    border-radius: 18px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    max-width: 429px;
+    width: auto;
+    
+    text-align: center;
+  }
+/* Strengthen text contrast */
+.side-panel.side-left .welcome-back-desc,
+.side-panel.side-left .welcome-back-title { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
+/* Refine button inside overlay only */
+.side-panel.side-left .action-btn {
+  background: #38bdf8;
+  color: #082a47;
+  border: 1px solid #4fd3ff;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
+  padding: 10px 28px;
+  width: auto; /* shrink to content */
+  margin-top: 4px;
+  letter-spacing: 0.6px;
+  transition: background .25s, box-shadow .25s, transform .25s;
+}
+.side-panel.side-left .action-btn:hover {
+  background: #4fd3ff;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
+  transform: translateY(-2px);
+}
+.side-panel.side-left .action-btn:active { transform: translateY(0); }
+.side-panel.side-left .action-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
+/* Responsive adjustment so card stays readable on narrow screens */
+@media (max-width: 900px) {
+  .side-panel.side-left .side-welcome-overlay {
+    left: 50%;
+    top: auto;
+    bottom: 20px;
+    transform: translateX(-50%);
+    max-width: 92%;
+    padding: 18px 20px 22px;
+  }
+}
+/* === End readability enhancements === */
+
+
+/* === Readability enhancements for right image overlay (scoped) === */
+.side-panel.side-right { position: relative; overflow:hidden; }
+.side-panel.side-right::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(205deg, rgba(5,25,46,0.85) 10%, rgba(5,25,46,0.70) 45%, rgba(5,25,46,0.32) 78%);
+  z-index: 1; /* above image, below info card */
+  pointer-events: none;
+}
+.side-panel.side-right .side-info-box {
+      position: absolute;
+    top: 38%;
+    left: 7%;
+    z-index: 2;
+    background: rgba(15, 40, 70, 0.55);
+    backdrop-filter: blur(6px) saturate(140%);
+    -webkit-backdrop-filter: blur(6px) saturate(140%);
+    padding: 20px 24px 24px;
+    border-radius: 18px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    max-width: 469px;
+    /* width: auto; */
+    text-align: center;
+}
+.side-panel.side-right .welcome-back-title,
+.side-panel.side-right .welcome-back-desc { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
+.side-panel.side-right .action-btn {
+  background: #38bdf8;
+  color: #082a47;
+  border: 1px solid #4fd3ff;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
+  padding: 10px 28px;
+  width: auto;
+  margin-top: 4px;
+  letter-spacing: 0.6px;
+  transition: background .25s, box-shadow .25s, transform .25s;
+}
+.side-panel.side-right .action-btn:hover {
+  background: #4fd3ff;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
+  transform: translateY(-2px);
+}
+.side-panel.side-right .action-btn:active { transform: translateY(0); }
+.side-panel.side-right .action-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
+@media (max-width: 900px) {
+  .side-panel.side-right .side-info-box {
+    left: 50%;
+    top: auto;
+    bottom: 20px;
+    transform: translateX(-50%);
+    max-width: 92%;
+    padding: 18px 20px 22px;
+  }
+}
+
+/* Top-left brand logo inside popup */
+.signin-brand-logo {
+  position: absolute;
+  top: 18px;
+  left: 24px;
+  z-index: 1200;
+ 
+}
+.signin-brand-logo .brand-link { display:flex; align-items:center; gap:10px; text-decoration:none; }
+.brand-logo-img { /* width: 42px; */
+  height: 42px;
+  display: block;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
+  max-width: 5vw;
+  height: auto;
+  background: #fff;
+  border-radius: 1vw;
+  margin: 0.5vw;
+}
+.brand-text { font-size:1.05rem; font-weight:700; letter-spacing:0.6px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.6); font-family:inherit; }
+.signin-brand-logo:hover .brand-text { color:#4fd3ff; }
+
+@media (max-width:700px){
+  .signin-brand-logo { top:10px; left:10px; padding:6px 12px 6px 8px; }
+  .brand-logo-img { width:34px; height:34px; }
+  .brand-text { font-size:0.9rem; }
+}
+
+/* Bottom-right watermark */
+.signin-watermark {
+  text-decoration: none;
+  position: absolute;
+  bottom: 14px;
+  right: 22px;
+  font-size: 1vw;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: #ffffff;
+    
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+@media (max-width:700px){
+  .signin-watermark { bottom:8px; right:12px; font-size:0.65rem; }
+}
+
+/* Social Media Icons Top-Right for Sign-In (Home Style) */
+.social-icons.signin-social-icons {
+  position: absolute;
+  top: 18px;
+  right: 24px;
+  z-index: 1200;
+  display: flex;
+  gap: 18px;
+}
+.social-icons.signin-social-icons .social-icon {
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: #fff;
+  color: #38bdf8;
+  font-size: 18px;
+  box-shadow: 0 0 0 1px #214055, 0 4px 14px #0006;
+  transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
+  text-decoration: none;
+}
+.social-icons.signin-social-icons .social-icon.facebook {
+  color: #1877f2;
+}
+.social-icons.signin-social-icons .social-icon.youtube {
+  color: #ff0000;
+}
+.social-icons.signin-social-icons .social-icon.linkedin {
+  color: #0a66c2;
+}
+.social-icons.signin-social-icons .social-icon.instagram {
+  color: #fd5949;
+}
+.social-icons.signin-social-icons .social-icon.facebook:hover {
+  background-color: #1877f2;
+  color: #fff;
+}
+.social-icons.signin-social-icons .social-icon.youtube:hover {
+  background-color: #ff0000;
+  color: #fff;
+}
+.social-icons.signin-social-icons .social-icon.linkedin:hover {
+  background-color: #0a66c2;
+  color: #fff;
+}
+.social-icons.signin-social-icons .social-icon.instagram:hover {
+  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
+  color: #fff;
+  filter: brightness(1.15);
+  box-shadow: 0 6px 22px rgba(253, 89, 73, .6);
+}
+.social-icons.signin-social-icons .social-icon.website:hover {
+  background-color: #009688;
+  color: #fff;
+  transform: translateY(-4px);
+  box-shadow: 0 6px 20px #00968888, 0 0 0 2px #009688 inset;
+}
+@media (max-width:700px){
+  .social-icons.signin-social-icons {
+    top: 10px;
+    right: 10px;
+    gap: 10px;
+  }
+  .social-icons.signin-social-icons .social-icon {
+    width: 28px;
+    height: 28px;
+    font-size: 1em;
+  }
+}
+

src/app/sign-in/sign-in.component.html

@@ -0,0 +1,172 @@
+<section class="signin-popup ai-bg-animate">
+  <div class="ai-particle-bg"></div>
+  <!-- Added brand logo top-left -->
+  <div class="signin-brand-logo" role="banner">
+    <a routerLink="/" aria-label="Pykara Home" class="brand-link">
+      <img [src]="brand.logo" alt="Pykara Logo" class="brand-logo-img" />
+
+
+    </a>
+  </div>
+
+  <!-- Social Media Icons Top-Right -->
+  <div class="social-icons signin-social-icons">
+    <a href="https://www.linkedin.com/in/pykara-technologies" target="_blank" class="social-icon linkedin" aria-label="LinkedIn">
+      <i class="fab fa-linkedin-in"></i>
+    </a>
+    <a href="https://www.youtube.com/@PykaraTechnologies" target="_blank" class="social-icon youtube" aria-label="YouTube">
+      <i class="fab fa-youtube"></i>
+    </a>
+    <a href="https://www.facebook.com/people/Pykara/100087653675803/" target="_blank" class="social-icon facebook" aria-label="Facebook">
+      <i class="fab fa-facebook-f"></i>
+    </a>
+    <a href="https://www.instagram.com/pykaratechnologie/" target="_blank" class="social-icon instagram" aria-label="Instagram">
+      <i class="fab fa-instagram"></i>
+    </a>
+    <a href="https://pykara.ai/" target="_blank" class="social-icon website" aria-label="Website">
+      <i class="fas fa-globe"></i>
+    </a>
+  </div>
+
+  <div class="signin-header">
+  </div>
+
+  <div class="auth-card" [class.flipped]="isFlipped">
+    <div class="card-inner">
+      <!-- FRONT: sign-in on main panel, image side on left -->
+      <div class="card-front">
+        <div class="card-content">
+          <div class="side-panel side-left">
+            <!-- Decorative background shapes -->
+            <img class="side-img" src="assets/images/login/lion.png" alt="Lion" />
+            <!-- Overlay text and button -->
+            <div class="side-welcome-overlay">
+
+              <div class="welcome-back-desc">First time here? Create your account to get started.</div>
+              <button class="action-btn" type="button" (click)="flipToSignUp()">Sign Up</button>
+            </div>
+            <!-- Replace /assets/side-placeholder-left.jpg with your chosen image -->
+          </div>
+
+          <div class="main-panel">
+            <!-- brand header above login -->
+            <div class="logo-header">
+              <span class="py-learn-text">{{ brand.name }}</span>
+              <div class="self-learning-system">(A Self-Learning System)</div>
+            </div>
+            <!-- existing sign-in form -->
+            <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
+            <h2 class="signin-title">
+
+              <span class="login-text">Login</span>
+              <span [innerHTML]="typingTitle"></span>
+            </h2>
+
+            <form [formGroup]="form" (ngSubmit)="signIn()" novalidate>
+              <div class="signin-row">
+                <div class="signin-field">
+                  <label for="email">Email or Username</label>
+                  <input id="email" type="email" placeholder="you@example.com" formControlName="email" [class.invalid]="submitted && form.get('email')?.invalid" [attr.aria-invalid]="form.get('email')?.invalid && form.get('email')?.touched" />
+                  <small *ngIf="submitted && form.get('email')?.errors?.['required']" class="error">Email or Username is required.</small>
+                </div>
+              </div>
+              <div class="signin-row">
+                <div class="signin-field">
+                  <label for="password">Password</label>
+                  <div class="input-with-icon">
+                    <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" [class.invalid]="submitted && form.get('password')?.invalid" [attr.aria-invalid]="form.get('password')?.invalid && form.get('password')?.touched" />
+                    <button type="button"
+                            class="eye-toggle"
+                            (click)="togglePasswordVisibility()"
+                            tabindex="-1"
+                            [attr.aria-pressed]="showPassword"
+                            aria-label="Show/Hide password">
+                      {{ showPassword ? '🙈' : '👁️' }}
+                    </button>
+                  </div>
+                  <small *ngIf="submitted && form.get('password')?.errors?.['required']" class="error">Password is required.</small>
+                  <div *ngIf="errorMessage" class="signin-error-toast">{{ errorMessage }}</div>
+                </div>
+              </div>
+              <div class="signin-row signin-options-row">
+                <div class="remember-me">
+                  <label class="switch">
+                    <input id="rememberMe" type="checkbox" />
+                    <span class="slider"></span>
+                  </label>
+                  <span>Remember me</span>
+                </div>
+                <div class="forgot-password">
+                  <a href="#" class="forgot-link" (click)="openForgotModal($event)">Forgot password?</a>
+                </div>
+              </div>
+              <!--<div class="signin-hint">Press Enter to Sign In</div>-->
+              <button class="signin-btn ai-pulse" type="submit" [disabled]="loading">
+                <ng-container *ngIf="!loading; else loggingIn">
+                  Login
+                </ng-container>
+                <ng-template #loggingIn>
+                  <span class="spinner"></span> Logging in...
+                </ng-template>
+              </button>
+
+              <!-- Divider with 'or' -->
+              <div class="signin-divider-row">
+                <div class="divider"></div>
+                <span class="divider-or">or</span>
+                <div class="divider"></div>
+              </div>
+
+              <!-- Custom Google Sign-In button -->
+              <button class="google-btn" type="button" (click)="onGoogleSignIn()">
+                <img src="assets/images/google-logo.svg" alt="Google logo" class="google-logo" />
+                <span>Log in with Google</span>
+              </button>
+
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <!-- BACK: sign-up on main panel, image side on right -->
+      <div class="card-back">
+        <div class="card-content card-content-reverse">
+          <div class="main-panel">
+            <div class="panel-right-embed">
+
+              <app-sign-up [embedded]="true" (switchToSignIn)="flipToSignIn()"></app-sign-up>
+            </div>
+            <div class="signin-footer">
+              <a href="#" (click)="flipToSignIn(); $event.preventDefault()">Back to Sign In</a>
+            </div>
+          </div>
+
+          <!-- Right side: lion image + requested minimal text/buttons -->
+          <div class="side-panel side-right">
+            <div class="side-info-box">
+              <div class="welcome-back-title">Learn Smarter.</div>
+              <div class="welcome-back-title">Practice Better.</div>
+              <div class="welcome-back-desc">Existing user? Log in to your account.</div>
+              <button class="action-btn" type="button" (click)="goToLogin()">Sign In</button>
+            </div>
+            <img class="side-img" src="assets/images/login/lion.png" alt="Lion" />
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div *ngIf="showForgotModal" class="forgot-modal-bg">
+    <div class="forgot-modal">
+      <h3>Forgot Password</h3>
+      <p>Enter your email to receive password reset instructions.</p>
+      <input type="email" [(ngModel)]="forgotEmail" placeholder="Your email" />
+      <button class="signin-btn" (click)="sendForgotEmail()">Send Reset Link</button>
+      <button class="modal-close" (click)="closeForgotModal()">Close</button>
+    </div>
+  </div>
+  <!-- Added bottom-right watermark -->
+  <!--<div class="signin-watermark" aria-hidden="true">© {{ brand.name }} 2025</div>-->
+  <a class="signin-watermark" href="https://pykara.ai" target="_blank">www.pykara.ai</a>
+</section>

src/app/sign-in/sign-in.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignInComponent } from './sign-in.component';
+
+describe('SignInComponent', () => {
+  let component: SignInComponent;
+  let fixture: ComponentFixture<SignInComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SignInComponent]
+    });
+    fixture = TestBed.createComponent(SignInComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/sign-in/sign-in.component.ts

@@ -0,0 +1,291 @@
+// sign-in.component.ts
+import { Component, ChangeDetectionStrategy, Output, EventEmitter, ViewChild, ElementRef, HostListener, ChangeDetectorRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators, FormGroup, NgModel } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { SignUpComponent } from '../sign-up/sign-up.component';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { AuthService } from '../auth/auth.service';
+import { BrandService } from '../shared/brand.service';
+
+declare const google: any;
+
+@Component({
+  selector: 'app-sign-in',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule, RouterLink, SignUpComponent],
+  templateUrl: './sign-in.component.html',
+  styleUrls: ['./sign-in.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('600ms', style({ opacity: 1 }))
+      ]),
+      transition(':leave', [
+        animate('600ms', style({ opacity: 0 }))
+      ])
+    ])
+  ]
+})
+export class SignInComponent implements AfterViewInit, OnDestroy {
+  @Output() switchToSignUp = new EventEmitter<void>();
+  @Output() close = new EventEmitter<void>();
+  form: FormGroup;
+  loading = false;
+  errorMessage = '';
+  showForgotModal = false;
+  forgotEmail = '';
+  typingTitle = '';
+  private fullTitle = 'Log In';
+  private typingIndex = 0;
+  private typingInterval: any;
+  showPassword = false;
+  googleButtonRendered = false;
+  submitted = false;
+
+  // Slide state (false = show front/sign-in, true = show back/sign-up)
+  isFlipped = false;
+
+  @ViewChild('cardRoot', { static: true }) cardRoot!: ElementRef<HTMLElement>;
+
+  facts: string[] = [
+    '🎯 Practice grammar with adaptive quizzes.',
+    '📖 Improve reading with AI-generated passages.',
+    '🗣️ Train listening and pronunciation effectively.'
+  ];
+  currentFact: string = this.facts[0];
+  private factIndex = 0;
+  private factInterval: any;
+
+  constructor(
+    private fb: FormBuilder,
+    private router: Router,
+    private authService: AuthService,
+    public brand: BrandService,
+    private cdr: ChangeDetectorRef // Added for change detection
+  ) {
+    this.form = this.fb.group({
+      // accept username or email -> only require a non-empty value
+      email: ['', [Validators.required]],
+      password: ['', [Validators.required]]
+    });
+  }
+
+  ngAfterViewInit() {
+    // ensure initial aria states
+    this.updateAriaStates();
+    // load Google Identity Services button
+    this.loadGoogleScript();
+    this.startFactRotation();
+  }
+
+  ngOnDestroy() {
+    if (this.factInterval) {
+      clearInterval(this.factInterval);
+    }
+  }
+
+  startTypingAnimation() {
+    this.typingTitle = '';
+    this.typingIndex = 0;
+    this.fullTitle = 'Verifying Identity …';
+    this.typingInterval = setInterval(() => {
+      if (this.typingIndex < this.fullTitle.length) {
+        this.typingTitle += this.fullTitle[this.typingIndex++];
+      } else {
+        clearInterval(this.typingInterval);
+        setTimeout(() => {
+          this.typingTitle = 'Log In';
+        }, 1200);
+      }
+    }, 60);
+  }
+
+  loadGoogleScript() {
+    if (!document.getElementById('google-identity')) {
+      const script = document.createElement('script');
+      script.src = 'https://accounts.google.com/gsi/client';
+      script.async = true;
+      script.id = 'google-identity';
+      script.onload = () => {
+        this.renderGoogleButton();
+      };
+      document.body.appendChild(script);
+    } else {
+      this.renderGoogleButton();
+    }
+  }
+
+  renderGoogleButton() {
+    if (this.googleButtonRendered) return;
+    const clientId = 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com'; // Replace with your client ID
+    const googleBtnDiv = document.getElementById('google-btn-div');
+    if (googleBtnDiv && typeof google !== 'undefined' && google.accounts && google.accounts.id) {
+      google.accounts.id.initialize({
+        client_id: clientId,
+        callback: (response: any) => this.handleGoogleCredential(response)
+      });
+      google.accounts.id.renderButton(googleBtnDiv, {
+        theme: 'outline', // or 'filled_blue' for blue
+        size: 'large',
+        text: 'continue_with',
+        shape: 'pill',
+        width: '100%'
+      });
+      this.googleButtonRendered = true;
+    }
+  }
+
+  signIn() {
+    this.submitted = true;
+    this.form.markAllAsTouched();
+
+    if (this.form.invalid) {
+      // focus first invalid control for accessibility
+      setTimeout(() => {
+        const firstInvalid = document.querySelector('.main-panel [formControlName].ng-invalid') as HTMLElement | null;
+        if (firstInvalid) firstInvalid.focus();
+      });
+      this.errorMessage = '';
+      this.cdr.markForCheck();
+      return;
+    }
+
+    this.loading = true;
+    this.errorMessage = '';
+
+    const username = this.form.get('email')?.value; // can be username or email
+    const password = this.form.get('password')?.value;
+
+    this.authService.login(username, password).subscribe(
+      (response) => {
+        this.loading = false;
+        this.authService.setLoggedIn(true);
+        this.authService.startAutoRefresh();
+        localStorage.setItem('username', username);
+
+        const redirectUrl = localStorage.getItem('redirectAfterLogin') || '/home';
+        localStorage.removeItem('redirectAfterLogin');
+        this.router.navigate([redirectUrl]);
+      },
+      (error) => {
+        this.loading = false;
+        console.log('Sign-in error:', error);
+        this.errorMessage = 'Invalid username or password';
+        this.cdr.markForCheck();
+        setTimeout(() => {
+          this.errorMessage = '';
+          this.cdr.markForCheck();
+        }, 3000);
+      }
+    );
+  }
+
+  handleGoogleCredential(response: any) {
+    if (response.credential) {
+      // TODO: Send credential to backend and handle login
+      this.router.navigate(['/home']);
+    } else {
+      this.errorMessage = 'Google sign-in failed.';
+      setTimeout(() => { this.errorMessage = ''; }, 3000);
+    }
+  }
+
+  openForgotModal(event: Event) {
+    event.preventDefault();
+    this.showForgotModal = true;
+  }
+  closeForgotModal() {
+    this.showForgotModal = false;
+    this.forgotEmail = '';
+  }
+  sendForgotEmail() {
+    // Simulate sending email
+    this.closeForgotModal();
+    alert('Password reset link sent to your email.');
+  }
+
+  @HostListener('document:keydown.enter', ['$event'])
+  handleEnterKey(event: KeyboardEvent) {
+    if (!this.showForgotModal && !this.loading) {
+      this.signIn();
+    }
+  }
+
+  // Slide controls
+  flipToSignUp() {
+    this.isFlipped = true;
+    this.updateAriaStates();
+    setTimeout(() => {
+      const el = document.querySelector('.card-back .main-panel input');
+      if (el) (el as HTMLElement).focus();
+    }, 700);
+  }
+  flipToSignIn() {
+    this.isFlipped = false;
+    this.updateAriaStates();
+    setTimeout(() => {
+      const el = document.querySelector('.card-front .main-panel input');
+      if (el) (el as HTMLElement).focus();
+    }, 700);
+  }
+
+  updateAriaStates() {
+    const front = document.querySelector('.card-front');
+    const back = document.querySelector('.card-back');
+    if (!front || !back) return;
+    if (this.isFlipped) {
+      front.setAttribute('aria-hidden', 'true');
+      back.setAttribute('aria-hidden', 'false');
+    } else {
+      front.setAttribute('aria-hidden', 'false');
+      back.setAttribute('aria-hidden', 'true');
+    }
+  }
+
+  goToSignUp() {
+    this.flipToSignUp();
+  }
+  goToSignUpPage() {
+    this.router.navigate(['/sign-up']);
+  }
+
+  closePopup() {
+    // Navigate to home when closing the popup
+    this.router.navigate(['/home']);
+
+    this.close.emit();
+    try {
+      const modal = document.querySelector('.modal');
+      if (modal && modal.parentElement) modal.parentElement.removeChild(modal);
+      const backdrop = document.querySelector('.modal-backdrop');
+      if (backdrop && backdrop.parentElement) backdrop.parentElement.removeChild(backdrop);
+    } catch (e) {
+      console.warn('Failed to remove modal/backdrop DOM elements', e);
+    }
+    this.cdr.markForCheck();
+  }
+
+  togglePasswordVisibility() {
+    this.showPassword = !this.showPassword;
+  }
+
+  goToLogin() {
+    this.flipToSignIn();
+  }
+
+  onGoogleSignIn() {
+    console.log('Google sign-in clicked');
+  }
+
+  startFactRotation() {
+    this.factInterval = setInterval(() => {
+      this.factIndex = (this.factIndex + 1) % this.facts.length;
+      this.currentFact = this.facts[this.factIndex];
+      this.cdr.markForCheck();
+    }, 5000);
+  }
+}

src/app/sign-in/sign-in.service.spec.ts

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

src/app/sign-in/sign-in.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SignInService {
+
+  constructor(private http: HttpClient) { }
+
+  signIn(payload: any): Observable<any> {
+    return this.http.post('http://127.0.0.1:5000/sign-in', payload).pipe(
+      catchError((error) => {
+        return throwError(() => error);
+      })
+    );
+  }
+}

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

@@ -0,0 +1,671 @@
+:host {
+  display: block;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.signup-bg {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f7fafd;
+}
+
+.signup-container {
+  display: flex;
+  width: 100vw;
+  max-width: 1200px;
+  min-height: 600px;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+}
+
+.signup-panel-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0;
+}
+
+.signup-panel-right {
+  flex: 1 1 0;
+  background: #f7fafd;
+}
+
+.create-card {
+  background: #fff;
+  width: 90%;
+  max-width: 540px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 38px 38px 28px 38px;
+  border-radius: 18px;
+  box-shadow: 0 12px 48px rgba(2, 6, 23, 0.18), 0 0 0 2px rgba(56, 189, 248, 0.08);
+  margin: 0 auto;
+}
+
+.create-title {
+  font-size: 2.1rem;
+  font-weight: 900;
+  text-align: center;
+  margin-bottom: 28px;
+  letter-spacing: 0.6px;
+  color: #23395d;
+}
+
+.signup-title.center-title {
+  text-align: center;
+  margin-bottom: 32px;
+  width: 100%;
+  font-size: 2.1rem;
+  font-weight: 800;
+  letter-spacing: 1px;
+  color: #23395d;
+  text-shadow: 0 2px 8px #0008;
+  animation: logoGlow 3.5s ease-in-out infinite alternate;
+}
+
+@keyframes logoGlow {
+  0% {
+    text-shadow: 0 2px 8px #0008, 0 0 12px #38bdf8, 0 0 6px #13bfa6;
+  }
+
+  100% {
+    text-shadow: 0 2px 8px #0008, 0 0 32px #38bdf8, 0 0 18px #13bfa6;
+  }
+}
+
+.create-form {
+  width: 100%;
+  max-width: 510px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 15px;
+  align-items: start;
+  margin-bottom: 14px;
+}
+
+.terms-info {
+  color: #137ec4;
+  font-size: 1.08rem;
+  font-weight: 600;
+  text-align: left;
+  margin: 12px 0 0 0;
+  letter-spacing: 0.5px;
+  display: block;
+}
+
+.form-row {
+  display: contents;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+  .form-field label {
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: #23395d;
+  }
+
+  .form-field input,
+  .form-field select {
+    background: #fff;
+    color: #23395d;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 14px;
+    font-size: 1rem;
+    margin-bottom: 2px;
+    box-shadow: 0 1px 4px #0002;
+    transition: border 0.2s, box-shadow 0.2s;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    height: 46px;
+    box-sizing: border-box;
+  }
+
+    .form-field input:focus,
+    .form-field select:focus {
+      outline: 2px solid #1de9b6;
+      border-color: #1de9b6;
+      box-shadow: 0 0 6px rgba(56, 189, 248, 0.5), 0 0 0 2px #1de9b688;
+    }
+
+    .form-field input::placeholder {
+      color: #b0b8c1;
+      opacity: 1;
+    }
+
+.form-checkbox {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  color: #2b5160;
+  margin-top: 8px;
+}
+
+  .form-checkbox input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    accent-color: #38bdf8;
+  }
+
+.create-btn {
+  grid-column: 1 / -1;
+  width: 100%;
+  background: #23395d;
+  color: #fff;
+  padding: 14px 18px;
+  border-radius: 10px;
+  font-weight: 800;
+  border: none;
+  box-shadow: 0 10px 30px rgba(3, 20, 36, 0.32);
+  cursor: pointer;
+  font-size: 1.15rem;
+  margin-top: 10px;
+}
+
+  .create-btn:hover {
+    background: #38bdf8;
+    color: #fff;
+  }
+
+.create-login-link {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #137ec4;
+  margin-top: 0px;
+}
+
+  .create-login-link a {
+    color: #137ec4;
+    font-weight: 700;
+  }
+
+.create-footer {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #010207;
+  font-size: 0.9rem;
+  margin-top: 4vw;
+}
+
+.form-field .error {
+  color: #ff5252;
+  font-size: 0.85rem;
+  margin-top: 0px;
+}
+
+.welcome-info-box {
+  position: absolute;
+  top: 32px;
+  left: 0;
+  width: 100%;
+  padding: 0 32px;
+  z-index: 2;
+  text-align: left;
+}
+
+.welcome-info-title {
+  font-size: 1.35rem;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 6px;
+  letter-spacing: 0.5px;
+}
+
+.welcome-info-desc {
+  font-size: 1.08rem;
+  color: #e0f7fa;
+  margin-bottom: 8px;
+}
+
+.welcome-info-link {
+  color: #fff;
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+  .welcome-info-link:hover {
+    color: #23395d;
+  }
+
+/* Extra whitespace and centering for small screens */
+@media (max-width: 900px) {
+  .signup-container {
+    flex-direction: column;
+    width: 98vw;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .signup-panel-right {
+    padding: 18px 6vw;
+  }
+
+  .create-card {
+    padding: 18px 6vw;
+    margin: 0 auto;
+  }
+
+  .create-form {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+
+  .create-btn {
+    width: 100%;
+  }
+}
+
+@media (max-width: 600px) {
+  .create-card {
+    padding: 10px 2vw;
+  }
+
+  .signup-panel-right {
+    padding: 10px 2vw;
+  }
+}
+
+.signin-close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 38px;
+  height: 38px;
+  border: none;
+  background: #14263c;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px #0005;
+}
+
+  .signin-close:hover {
+    background: #38bdf8;
+    color: #18314a;
+  }
+
+/* Eye toggle inside password fields: match sign-in positioning */
+.form-field .eye-toggle {
+  position: absolute;
+  right: 12px;
+  top: 38px;
+  background: none;
+  border: none;
+  font-size: 1.3em;
+  color: #888;
+  cursor: pointer;
+  z-index: 2;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.9;
+  transition: color 0.2s, opacity 0.2s;
+}
+
+  .form-field .eye-toggle:hover {
+    color: #555;
+    opacity: 1;
+  }
+
+  .form-field .eye-toggle:focus {
+    outline: none;
+  }
+
+  /* Ensure button SVG scales nicely */
+  .form-field .eye-toggle svg {
+    width: 22px;
+    height: 22px;
+  }
+
+/* Small screen tweak: move eye toggle slightly up if spacing differs */
+@media (max-width: 700px) {
+  .form-field .eye-toggle {
+    top: 28px;
+  }
+}
+
+.fact-rotator {
+  font-size: 1.18rem;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 18px;
+  min-height: 32px;
+  text-align: center;
+  transition: opacity 0.6s;
+  letter-spacing: 0.5px;
+  animation: fadeFact 0.6s;
+}
+
+@keyframes fadeFact {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.side-panel.side-right {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #38bdf8 0%, #7b2ff2 100%);
+  min-height: 100%;
+}
+
+.side-panel.side-left {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+ 
+  min-height: 100%;
+}
+
+.wave-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.wave-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #38bdf8 0%, #7b2ff2 100%);
+  opacity: 0.85;
+}
+
+.circle1 {
+  width: 90px;
+  height: 90px;
+  top: 80px;
+  left: 60px;
+  box-shadow: 0 0 32px #7b2ff2aa;
+}
+
+.circle2 {
+  width: 60px;
+  height: 60px;
+  top: 220px;
+  left: 220px;
+  box-shadow: 0 0 24px #38bdf8aa;
+}
+
+.circle3 {
+  width: 120px;
+  height: 120px;
+  bottom: 40px;
+  left: 120px;
+  box-shadow: 0 0 48px #7b2ff2aa;
+}
+
+.circle4 {
+  width: 36px;
+  height: 36px;
+  bottom: 80px;
+  right: 60px;
+  box-shadow: 0 0 12px #38bdf8aa;
+}
+
+.welcome-content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 80px;
+}
+
+.welcome-title {
+  font-size: 2.2rem;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 18px;
+  text-shadow: 0 2px 16px #0006;
+}
+
+.welcome-subtitle {
+  font-size: 1.08rem;
+  color: #e0e7ef;
+  margin-bottom: 32px;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 8px #0004;
+}
+
+.welcome-footer {
+  font-size: 1.05rem;
+  color: #fff;
+  opacity: 0.7;
+  margin-top: 120px;
+  letter-spacing: 2px;
+}
+
+/* Glossy info popup for role info */
+.role-info-popup-bg {
+  position: fixed;
+  inset: 0;
+  background: rgba(30, 41, 59, 0.55);
+  backdrop-filter: blur(1px);
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 48px 56px 48px 24px;
+  animation: fadeInModalBg 0.3s;
+}
+
+@keyframes fadeInModalBg {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popupOpen {
+  0% {
+    opacity: 0;
+    transform: scale(0.92) translateY(24px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.role-info-popup {
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 4px;
+  box-shadow: 0 8px 32px #38bdf844 0 24px #1e293b88;
+  padding: 22px 28px 18px 28px;
+  min-width: 220px;
+  max-width: 90vw;
+  text-align: left;
+  z-index: 3001;
+  font-size: 0.98em;
+  color: #23395d;
+  letter-spacing: 0.2px;
+  line-height: 1.5;
+  position: relative;
+  font-family: inherit;
+  opacity: 1;
+  animation: popupOpen 1.2s cubic-bezier(.22, .9, .32, 1) both;
+}
+
+  .role-info-popup .close-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: #14263c;
+    color: #fff;
+    border-radius: 50%;
+    font-size: 1.1rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: background 0.2s, color 0.2s;
+    box-shadow: 0 2px 8px #0005;
+  }
+
+    .role-info-popup .close-btn:hover {
+      background: #38bdf8;
+      color: #18314a;
+    }
+
+.role-info-btn {
+  background: none;
+  border: none;
+  color: #38bdf8;
+  font-size: 1.15em;
+  cursor: pointer;
+  margin-left: 6px;
+  vertical-align: middle;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s;
+}
+
+  .role-info-btn:hover {
+    color: #137ec4;
+  }
+
+/* Spinner for loading state on buttons */
+.spinner {
+ display: inline-block;
+ width:18px;
+ height:18px;
+ border:3px solid #fff;
+ border-top:3px solid #38bdf8;
+ border-radius:50%;
+ animation: spin0.7s linear infinite;
+ vertical-align: middle;
+ margin-right:8px;
+}
+@keyframes spin {
+0% { transform: rotate(0deg);}
+100% { transform: rotate(360deg);}
+}
+
+/* Info button and floating info popup styles */
+.info-btn {
+ background: #38bdf8;
+ color: #fff;
+ border: none;
+ border-radius:50%;
+ width:28px;
+ height:28px;
+ font-size:1.1rem;
+ font-weight: bold;
+ cursor: pointer;
+ margin-left:8px;
+}
+
+.info-popup-bg {
+ position: fixed;
+ inset:0;
+ background: rgba(30,41,59,0.45);
+ backdrop-filter: blur(2px);
+ z-index:;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.info-popup {
+  background: rgba(255,255,255,0.85);
+  border-radius: 16px;
+  box-shadow: 08px 32px #38bdf844,0024px #1e293b88;
+  padding: 24px 28px 18px 28px;
+  min-width: 320px;
+  max-width: 90vw;
+  text-align: left;
+  font-size: 0.98rem;
+  color: #23395d;
+  position: relative;
+  font-family: inherit;
+  left: 840px;
+}
+
+.info-title {
+ font-size:1.08rem;
+ font-weight:700;
+ margin-bottom:8px;
+ color: #38bdf8;
+ letter-spacing:0.5px;
+}
+
+.info-text {
+ font-size:0.95rem;
+ color: #23395d;
+ opacity:0.95;
+}
+
+.info-close {
+ position: absolute;
+ top:8px;
+ right:12px;
+ background: none;
+ border: none;
+ font-size:1.5rem;
+ color: #38bdf8;
+ cursor: pointer;
+ font-weight: bold;
+ opacity:0.7;
+ transition: opacity 0.2s;
+}
+.info-close:hover {
+ opacity:1;
+}

src/app/sign-up/sign-up.component.html

@@ -0,0 +1,155 @@
+<section class="signup-popup ai-bg-animate">
+  <div class="ai-particle-bg"></div>
+  <div class="signup-header">
+    <div class="signup-logo">
+      
+    </div>
+  </div>
+
+  <div class="auth-card">
+    <div class="card-inner">
+      <!-- FRONT: sign-up on main panel, image side on left -->
+      <div class="card-front">
+        <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
+
+        <div class="card-content">
+          <div class="side-panel side-left">
+            <div class="signup-panel-left">
+
+            </div>
+            <div class="main-panel">
+              <h2 class="signup-title center-title">Create An Account</h2>
+
+              <form [formGroup]="form" (ngSubmit)="submit()" class="create-form" novalidate>
+                <div class="form-row">
+                  <div class="form-field">
+                    <label for="firstName">First Name</label>
+                    <input id="firstName" type="text" placeholder="First Name" formControlName="name" [attr.aria-invalid]="controlHasError('name')" />
+                    <small *ngIf="controlHasError('name','required') && form.get('name')?.touched" class="error">First name is required.</small>
+                    <small *ngIf="controlHasError('name','minlength') && form.get('name')?.touched" class="error">Enter at least 2 characters.</small>
+                    <small *ngIf="controlHasError('name','invalidName') && form.get('name')?.touched" class="error">Only alphabets and spaces allowed.</small>
+                  </div>
+                  <div class="form-field">
+                    <label for="lastName">Last Name</label>
+                    <input id="lastName" type="text" placeholder="Last Name" formControlName="lastName" [attr.aria-invalid]="controlHasError('lastName')" />
+                    <small *ngIf="controlHasError('lastName','required') && form.get('lastName')?.touched" class="error">Last name is required.</small>
+                    <small *ngIf="controlHasError('lastName','minlength') && form.get('lastName')?.touched" class="error">Enter at least 2 characters.</small>
+                    <small *ngIf="controlHasError('lastName','invalidName') && form.get('lastName')?.touched" class="error">Only alphabets and spaces allowed.</small>
+                  </div>
+                </div>
+                <div class="form-row">
+                  <div class="form-field">
+                    <label for="email">Email</label>
+                    <input id="email" type="text" placeholder="email@gmail.com" formControlName="email" [attr.aria-invalid]="controlHasError('email')" />
+                    <small *ngIf="controlHasError('email','required') && form.get('email')?.touched" class="error">Email is required.</small>
+                    <small *ngIf="controlHasError('email','pattern') && form.get('email')?.touched" class="error">Enter a valid email/phone.</small>
+                  </div>
+                  <div class="form-field role-field-wrapper">
+                    <label for="role">
+                      Role
+                      <button class="info-btn" type="button" (click)="showInfo = true">i</button>
+                    </label>
+                    <select id="role" formControlName="role" [attr.aria-invalid]="controlHasError('role')">
+                      <option value="">-- Select Role --</option>
+                      <option value="admin">Admin</option>
+                      <option value="teachers">Teachers</option>
+                      <option value="student">Student</option>
+                     <!-- <option value="investigators">Investigators</option>-->
+                      <option value="others">Others</option>
+                    </select>
+                    <small *ngIf="controlHasError('role','required') && form.get('role')?.touched" class="error">Role is required.</small>
+                  </div>
+                </div>
+                <div class="form-row">
+                  <div class="form-field" style="position:relative;">
+                    <label for="password">Create Password</label>
+                    <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="controlHasError('password')" />
+                    <button type="button" class="eye-toggle" (click)="toggleConfirmPasswordVisibility()" tabindex="-1" aria-label="Show/Hide confirm password">
+                    </button>
+                    <small *ngIf="controlHasError('password','required') && form.get('password')?.touched" class="error">Password is required.</small>
+                    <small *ngIf="controlHasError('password','minlength') && form.get('password')?.touched" class="error">Use at least 8 characters.</small>
+                    <small *ngIf="form.get('password')?.hasError('passwordPolicy') && form.get('password')?.touched" class="policy-info">
+                      Create a strong password with at least 8 characters using letters, numbers, and special symbols.
+                    </small>
+                  </div>
+
+                  <div class="form-field" style="position:relative;">
+                    <label for="confirmPassword">Confirm Password</label>
+                    <input id="confirmPassword" [type]="showConfirmPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="confirmPassword" [attr.aria-invalid]="showPwdMismatch()" />
+                    <button type="button" class="eye-toggle" (click)="toggleConfirmPasswordVisibility()" tabindex="-1" aria-label="Show/Hide confirm password">
+                    </button>
+                    <small *ngIf="controlHasError('confirmPassword','required') && form.get('confirmPassword')?.touched" class="error">Confirm password is required.</small>
+                    <small *ngIf="showPwdMismatch() && form.get('confirmPassword')?.touched" class="error">Passwords do not match.</small>
+                  </div>
+                </div>
+                <div class="form-checkbox">
+                  <input type="checkbox" id="terms" formControlName="terms" />
+                  <label for="terms">Creating your account and you accepting <a href="#">Terms & Conditions.</a></label>
+                </div>
+                <div *ngIf="submitted && !form.get('terms')?.value" class="terms-info">
+                  Please accept Terms &amp; Conditions.
+                </div>
+                <button class="create-btn ai-pulse" type="submit" [disabled]="loading">
+                  <ng-container *ngIf="!loading; else creatingAccount">
+                    Create Account
+                  </ng-container>
+                  <ng-template #creatingAccount>
+                    <span class="spinner"></span> Creating Account...
+                  </ng-template>
+                </button>
+
+
+                <!-- Google Sign-In button -->
+                <div class="google-signup-row">
+                  <div id="google-signup-btn-div">
+                    <div class="g-signin2" data-width="240" data-height="50" data-longtitle="true"></div>
+                  </div>
+                </div>
+
+                <div class="create-footer"><b>© Pykara Technologies, 2025. All rights reserved.</b></div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+  <!-- Detached overlay/modal so layout doesn't shift -->
+  <!--<div class="role-help-overlay" *ngIf="showRoleInfo" (click)="hideRoleInfo()">
+    <div class="role-help-modal" role="dialog" aria-label="Role descriptions" (click)="$event.stopPropagation()">
+      <button type="button" class="role-help-close" aria-label="Close role info" (click)="hideRoleInfo()">×</button>
+      <h3 class="role-help-title">Choose the right role</h3>
+      <ul class="role-help-list">
+        <li><strong>Admin:</strong> Full control: users, roles, system settings.</li>
+        <li><strong>Teachers:</strong> Run assessments / training evaluations.</li>
+        <li><strong>Student:</strong> Access learning modules, exercises.</li>-->
+
+        <!--<li><strong>Lawyers:</strong> Review analytics for case & witness prep.</li>
+        <li><strong>Investigators:</strong> Conduct interviews and capture signals.</li>-->
+        <!--<li><strong>Others:</strong> General or limited access usage.</li>
+      </ul>
+      <p class="role-help-tip">Not sure? Select Others; an Admin can upgrade your role later.</p>
+    </div>
+  </div>-->
+
+  <!-- Floating Info Popup -->
+  <div *ngIf="showInfo" class="info-popup-bg">
+    <div class="info-popup">
+      <button class="info-close" type="button" (click)="showInfo = false">&times;</button>
+      <div class="info-title">Role Information</div>
+      <div class="info-text">
+        <ul>
+          <li><strong>Admin:</strong> Full control: users, roles, system settings.</li>
+          <li><strong>Teachers:</strong> Run assessments / training evaluations.</li>
+          <li><strong>Student:</strong> Access learning modules, exercises.</li>
+         
+          <li><strong>Others:</strong> General or limited access usage.</li>
+        </ul>
+        <p>Not sure? Select Others; an Admin can upgrade your role later.</p>
+      </div>
+    </div>
+  </div>
+
+
+
+
+

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignUpComponent } from './sign-up.component';
+
+describe('SignUpComponent', () => {
+  let component: SignUpComponent;
+  let fixture: ComponentFixture<SignUpComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SignUpComponent]
+    });
+    fixture = TestBed.createComponent(SignUpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,270 @@
+import { Component, Output, EventEmitter, ChangeDetectorRef, Input, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { SignUpService } from './sign-up.service';  // Import the SignUpService
+import { trigger, transition, style, animate } from '@angular/animations';
+
+export function nameValidator(control: AbstractControl): ValidationErrors | null {
+  const value = control.value || '';
+  // Only allow alphabets and spaces, min2 chars
+  if (!/^[A-Za-z ]{2,}$/.test(value)) {
+    return { invalidName: true };
+  }
+  return null;
+}
+
+@Component({
+  selector: 'app-sign-up',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  templateUrl: './sign-up.component.html',
+  styleUrls: ['./sign-up.component.css'],
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity:0 }),
+        animate('600ms', style({ opacity:1 }))
+      ]),
+      transition(':leave', [
+        animate('600ms', style({ opacity:0 }))
+      ])
+    ])
+  ]
+})
+export class SignUpComponent implements OnInit, OnDestroy {
+  @Input() embedded = false; // when true, render only inner panel (for embedding in auth-card)
+  @Output() switchToSignIn = new EventEmitter<void>();
+  form: FormGroup;
+  private isSubmitting = false;
+
+  // Added: state & handlers for role info popover used in template
+  showRoleInfo = false;
+  toggleRoleInfo(ev?: Event) { ev?.stopPropagation(); this.showRoleInfo = !this.showRoleInfo; }
+  hideRoleInfo() { this.showRoleInfo = false; }
+
+  @Output() close = new EventEmitter<void>();
+
+  showPassword = false;
+  showConfirmPassword = false;
+  errorMessage = '';
+
+  isSignUpActive = true; // ← Added state for sign-up panel activation
+  public loading = false; // Used to disable the button during sign-up
+  submitted = false; // Track form submission status
+
+  // Added: terms & conditions error handling
+  termsError: string = '';
+
+  facts: string[] = [
+    '🎯 Master grammar with adaptive quizzes.',
+    '📖 Build comprehension with AI reading practice.',
+    '🗣️ Improve listening and pronunciation with feedback.'
+  ];
+  currentFact: string = this.facts[0];
+  private factIndex =0;
+  private factInterval: any;
+
+  showInfo = false;
+
+  constructor(
+    private fb: FormBuilder,
+    private router: Router,
+    private signUpService: SignUpService,
+    private cdr: ChangeDetectorRef
+  ) {
+    this.form = this.fb.group({
+      name: ['', [Validators.required, Validators.minLength(2), nameValidator]],
+      lastName: ['', [Validators.required, Validators.minLength(2), nameValidator]],
+      email: ['', [
+        Validators.required,
+        Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)
+      ]],
+      password: ['', [Validators.required, Validators.minLength(8), passwordPolicyValidator]],
+      confirmPassword: ['', [Validators.required]],
+      role: ['', [Validators.required]],
+      terms: [false, Validators.requiredTrue] // Added terms control with requiredTrue validator
+    }, { validators: [this.passwordsMatchValidator] });
+
+    // Close popover when clicking anywhere in document (capture phase not needed here)
+    document.addEventListener('click', () => this.hideRoleInfo());
+  }
+
+  ngOnInit() {
+    this.startFactRotation();
+  }
+
+  ngOnDestroy() {
+    if (this.factInterval) {
+      clearInterval(this.factInterval);
+    }
+  }
+
+  startFactRotation() {
+    this.factInterval = setInterval(() => {
+      this.factIndex = (this.factIndex +1) % this.facts.length;
+      this.currentFact = this.facts[this.factIndex];
+    },5000);
+  }
+
+  control(path: string): AbstractControl | null { return this.form.get(path); }
+
+  controlHasError(path: string, error?: string): boolean {
+    const c = this.control(path);
+    if (!c) return false;
+    return error ? !!(c.touched && c.errors?.[error]) : !!(c.touched && c.invalid);
+  }
+
+  showPwdMismatch(): boolean {
+    const pw = this.control('password');
+    const cpw = this.control('confirmPassword');
+    const groupMismatch = this.form.errors?.['passwordMismatch'];
+    return !!(pw && cpw && (cpw.touched || pw.touched) && groupMismatch);
+  }
+
+  passwordsMatchValidator(group: AbstractControl) {
+    const pw = group.get('password')?.value;
+    const cpw = group.get('confirmPassword')?.value;
+    return pw && cpw && pw === cpw ? null : { passwordMismatch: true };
+  }
+
+  togglePasswordVisibility() {
+    this.showPassword = !this.showPassword;
+  }
+  toggleConfirmPasswordVisibility() {
+    this.showConfirmPassword = !this.showConfirmPassword;
+  }
+
+  submit() {
+    // Confirm button click
+    alert("Sign-Up button clicked!");
+    console.log("Sign-Up button clicked!");
+
+    this.submitted = true; // Track the form submission attempt
+
+    // Mark all form controls as touched to trigger validation
+    this.form.markAllAsTouched();
+
+    // Check if the form is invalid
+    if (this.form.invalid) {
+      console.log("Form is invalid:");
+
+      // Log individual control states for debugging
+      Object.keys(this.form.controls).forEach(controlName => {
+        const control = this.form.get(controlName);
+        if (control?.invalid) {
+          console.log(`${controlName} is invalid. Errors:`, control?.errors);
+        }
+      });
+      return;
+    }
+
+    // Check terms & conditions acceptance
+    if (!this.form.get('terms')?.value) {
+      this.termsError = 'Please accept Terms & Conditions.';
+      return;
+    }
+    this.termsError = '';
+
+    this.loading = true; // Set loading to true when starting submission
+    try {
+      // Prepare the payload to send to the backend
+      const payload = {
+        name: this.control('name')?.value,
+        lastName: this.control('lastName')?.value,
+        email: this.control('email')?.value,
+        password: this.control('password')?.value,
+        role: this.control('role')?.value
+      };
+
+      console.log("Form data before submission:", this.form.value);
+      console.log("Payload to send:", payload);
+
+      // Make the HTTP request
+      this.signUpService.signUp(payload).subscribe(
+        (response) => {
+          this.errorMessage = '';
+          console.log("Sign-up request sent successfully!");
+          this.loading = false; // Reset loading on success
+          // On success: if embedded inside SignIn card, flip back to sign-in; else go to /login
+          if (this.embedded) {
+            this.switchToSignIn.emit();
+          } else {
+            this.router.navigate(['/login']);
+          }
+        },
+        (error) => {
+          if (error && error.status === 400) {
+            this.errorMessage = 'This email or username is already registered.';
+          } else {
+            this.errorMessage = 'An error occurred. Please try again.';
+          }
+          this.loading = false; // Reset loading on error
+          this.cdr.markForCheck();
+          setTimeout(() => {
+            this.errorMessage = '';
+            this.cdr.markForCheck();
+          }, 3000);
+        }
+      );
+    } catch (error) {
+      console.error("Error occurred during sign-up:", error); // Log any errors from the API call
+      this.loading = false; // Reset loading on exception
+    }
+  }
+
+  navigateHome() { this.router.navigateByUrl('/'); }
+
+  goToLogin() {
+    this.switchToSignIn.emit(); // ← Emit event instead of router navigation
+  }
+
+  closePopup() {
+    try {
+      // dispatch a global event so parent or other listeners always can close modals
+      window.dispatchEvent(new CustomEvent('auth-close'));
+    } catch (e) {
+      // ignore
+    }
+
+    this.close.emit();
+    // Defensive: remove modal/backdrop if parent didn't hide them
+    try {
+      const modal = document.querySelector('.modal');
+      if (modal && modal.parentElement) modal.parentElement.removeChild(modal);
+      const backdrop = document.querySelector('.modal-backdrop');
+      if (backdrop && backdrop.parentElement) backdrop.parentElement.removeChild(backdrop);
+    } catch (e) {
+      console.warn('Failed to remove modal/backdrop DOM elements', e);
+    }
+    // Ensure change detection updates
+    this.cdr.markForCheck();
+
+    // Navigate to home after closing
+    this.router.navigate(['/home']);
+  }
+
+  tr(key: string): string {
+    const map: Record<string, string> = { title: 'Create your account', subtitle: 'Join to continue' };
+    return map[key] || '';
+  }
+
+  goToSignIn() {
+    // Emit to parent when embedded so the card can slide back
+    this.switchToSignIn.emit();
+  }
+
+  goToSignUp() {
+    // no-op when embedded
+  }
+}
+
+function passwordPolicyValidator(control: AbstractControl): ValidationErrors | null {
+  const value = control.value || '';
+  // Policy: min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special char
+  const policy = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]).{8,}$/;
+  if (!policy.test(value)) {
+    return { passwordPolicy: true };
+  }
+  return null;
+}

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

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

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

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';  // Import HttpClient for API calls
+import { Observable } from 'rxjs';  // Import Observable for async handling
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SignUpService {
+  private apiUrl = 'http://127.0.0.1:5000';  // The base URL for your Flask backend
+  constructor(private http: HttpClient) { }
+
+  // Method to sign up a user
+  signUp(payload: any): Observable<any> {
+    return this.http.post(`${this.apiUrl}/sign-up`, payload);
+  }
+}

src/app/voice/voice.component.html

@@ -0,0 +1,8 @@
+<app-header [title]="'Voice'"></app-header>
+
+<img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
+
+<div class="voice-container" style="padding: 2rem; color: #fff;">
+  <!-- TODO: implement voice module UI -->
+  <p>Voice module coming soon.</p>
+</div>

src/styles.css

@@ -1,10 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-/*@import '~@fortawesome/fontawesome-free/css/all.min.css';*/
-
-
+/* =========================================================
+   Global Stylesheet (styles.css)
+   - Aligned formatting and added section comments
+   - No functional changes to selectors or declarations
+   ========================================================= */
 
+/* -------------------- Custom Fonts -------------------- */
 @font-face {
   font-family: 'Super Cartoon';
   src: url('assets/font/Super Cartoon.ttf') format('truetype');
@@ -13,15 +13,6 @@
   font-display: swap;
 }
 
-
-h1 {
-  font-size: 3vw;
-  color: white;
-  font-family: Super Cartoon;
-}
-
-
-
 @font-face {
   font-family: 'Raleway';
   src: url('assets/font/Raleway.woff2') format('woff2'), url('assets/font/Raleway.ttf') format('truetype');
@@ -30,7 +21,6 @@ h1 {
   font-display: swap;
 }
 
-
 @font-face {
   font-family: 'Amonk_Outline';
   src: url('assets/font/Amonk_Outline.ttf') format('truetype');
@@ -47,51 +37,107 @@ h1 {
   font-display: swap;
 }
 
-body, html {
+/* -------------------- Typography -------------------- */
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+h1 {
+  font-size: 3vw;
+  color: white;
+  font-family: 'Super Cartoon';
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 0.6em;
+  line-height: 1.2;
+}
+
+p {
+  line-height: 1.6;
+  margin: 0 0 1em;
+}
+
+li {
+  line-height: 1.6;
+}
+
+/* -------------------- Document / Body -------------------- */
+body,
+html {
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
   height: 100%;
   display: flex;
   flex-direction: column;
-  font-family: Raleway;
+  font-family: Raleway, Roboto, "Helvetica Neue", sans-serif;
   background-color: rgb(35 34 32 / 43%);
-  /*overflow: hidden;*/
- 
+}
+
+html,
+body {
+  overflow-x: hidden;
+}
+
+
+.imgbgcontainter {
+  background-image: url(/assets/images/grammar-bg.png);
+  background-size: auto;
+  background-position: center;
+  background-attachment: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+.grammar-bg {
+  position: absolute;
+  top: 10%;
+  left: 0;
+  width: 100%;
+  height: auto;
+  max-height: calc(100vh - 100px);
+  object-fit: fill;
+  z-index: -1;
+  opacity: 0.2;
 }
 
 
 
-/*Py-Learn text near Logo css*/
 
-/*Py-learn text*/
-/* Keep logo and text in one row */
 .logo {
   display: flex;
   align-items: center;
   gap: 1vw;
 }
 
-/* Make the anchor wrap both image and name */
+
 .brand-link {
   display: flex;
   align-items: center;
-  gap: 0.6vw; /* space between logo and text */
+  gap: 0.6vw; 
   text-decoration: none;
 }
 
-/* “PY-Learn” text next to the logo */
 .product-name {
   color: #fff;
-  font-size: 2vw; /* slightly smaller than the 3vw title */
-  /*font-weight: 700;*/
+  font-size: 2vw; 
   letter-spacing: 0.5px;
-  /*font-family: 'Super Cartoon', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
+  
   font-family: Amonk_Outline;
   line-height: 1;
 }
 
 .brand-link:hover .product-name {
-  opacity: 0.9; /* subtle hover */
+  opacity: 0.9;
 }
-