added footer and logo

src/app/app.component.ts

@@ -1,19 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { AuthService } from './auth/auth.service';
+import { BrandService } from './shared/brand.service';
+import { Title } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
-export class AppComponent {
-  constructor(private authService: AuthService) { }
+export class AppComponent implements OnInit {
+  constructor(
+    private authService: AuthService,
+    public brandService: BrandService,
+    private titleService: Title,
+    @Inject(DOCUMENT) private document: Document
+  ) { }
   title = 'Py-Learn';
 
   ngOnInit(): void {
+    // Set dynamic title
+    this.titleService.setTitle(this.brandService.name);
+
+    // Set dynamic favicon
+    const favicon: HTMLLinkElement | null = this.document.querySelector("link[rel*='icon']");
+    if (favicon) {
+      favicon.href = this.brandService.name === 'Py-Learn'
+        ? 'assets/favicon.png'
+        : 'assets/majema-favicon.png'; // Make sure this file exists for MJ-Learn
+    }
+
     this.authService.checkSession().subscribe((status) => {
       if (status) {
-        this.authService.startAutoRefresh();  // ✅ Start auto-refresh once app loads and session is valid
+        this.authService.startAutoRefresh();
       }
     });
   }

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { RootRedirectComponent } from './root-redirect/root-redirect.component';
 import { HeaderComponent } from './shared/header/header.component';
 import { SignInComponent } from './sign-in/sign-in.component';
 import { PronunciationComponent } from './pronunciation/pronunciation.component';
+import { FooterComponent } from './footer/footer.component';
 
 @NgModule({
   declarations: [
@@ -40,7 +41,8 @@ import { PronunciationComponent } from './pronunciation/pronunciation.component'
     AuthenticationComponent,
     AuthComponent,
     RootRedirectComponent,
-   PronunciationComponent
+    PronunciationComponent,
+    FooterComponent
 
   ],
   imports: [

src/app/chat/chat.component.css

@@ -1,50 +1,3 @@
-/* Header Container */
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0vw 1vw;
-  background-color: #009688;
-  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
-
-.logo img {
-  max-width: 5vw;
-  height: auto;
-  background: #e5e7eb;
-  border-radius: 1vw;
-  margin: 0.5vw;
-}
-
-.home-btn img {
-  width: 5vw;
-}
-
-  .home-btn img:hover {
-    transform: scale(1.1);
-  }
-
-h1 {
-  font-size: 3vw;
-  color: white;
-  font-family: Super Cartoon;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@font-face {
-  font-family: 'Super Cartoon';
-  src: url('../../assets/font/Super Cartoon.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
 
 /* Layout */
 .chat-container {
@@ -55,16 +8,6 @@ h1 {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-.chat-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: fill;
-  z-index: -1;
-  opacity: 0.2;
-}
 
 .chat-box {
   display: flex;
@@ -511,8 +454,7 @@ h1 {
   gap: 10px;
   align-items: center;
   margin-right: 15px;
-  position: relative;
-  right: -16vw;
+  
 }
 
 /* Disabled state for toggle buttons */
@@ -575,8 +517,7 @@ h1 {
   gap: 18px;
   align-items: center;
   margin-right: 15px;
-  position: relative;
-  right: -16vw;
+ 
 }
 
 .toggle-btn.modern {

src/app/chat/chat.component.html

@@ -1,18 +1,8 @@
 <!-- Full chat.component.html matching chat.component.ts -->
 <div class="chat-container">
-  <div class="header-container">
-    <div class="logo">
-      <a (click)="goToHome()" routerLink="/home" class="brand-link">
-        <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
-      </a>
-      <span class="product-name">Py-Learn.</span>
-    </div>
-
-    <div class="header-title">
-      <h1>Grammar Chat</h1>
-    </div>
+  <app-header [title]="'Grammar Chat'">
+    <div class="toggle-buttons-container modern-toggle" header-right>
 
-    <div class="toggle-buttons-container modern-toggle">
       <button class="toggle-btn modern"
               [class.active]="isVoiceEnabled"
               [class.muted]="!isVoiceEnabled"
@@ -49,16 +39,11 @@
         <img src="assets/images/chat/info.png" alt="User Guide" class="toggle-icon" />
       </button>
     </div>
+  </app-header>
+  <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
 
-    <div class="home-btn">
-      <a (click)="goToHome()" routerLink="/home">
-        <img src="assets/images/home.png" alt="Home" class="home-icon" />
-      </a>
-    </div>
-  </div>
 
   <div class="chat-box" #chatBox>
-    <img src="assets/images/chat/chatbg.png" alt="Chat Background" class="chat-bg" />
 
     <div *ngFor="let message of messages; let i = index">
       <!-- User message -->
@@ -73,110 +58,110 @@
       </div>
 
       <!-- AI message -->
-      
+
       <div *ngIf="message.from === 'ai'" class="message-wrapper ai">
-          <div class="profile-pic">
-            <img src="assets/images/chat/natasha.png" alt="AI" />
+        <div class="profile-pic">
+          <img src="assets/images/chat/natasha.png" alt="AI" />
+        </div>
+
+        <div class="message structured-response">
+          <div [innerHTML]="formatStructuredResponse(message.text)"></div>
+
+          <!-- Follow-ups -->
+          <div class="followups" *ngIf="message.suggestions?.length">
+            <div class="followups-title">Follow-up suggestions</div>
+            <button class="followup-chip"
+                    *ngFor="let s of message.suggestions"
+                    (click)="selectHardcodedQuestion(s)"
+                    title="Ask this next">
+              {{ s }}
+            </button>
           </div>
 
-          <div class="message structured-response">
-            <div [innerHTML]="formatStructuredResponse(message.text)"></div>
-
-            <!-- Follow-ups -->
-            <div class="followups" *ngIf="message.suggestions?.length">
-              <div class="followups-title">Follow-up suggestions</div>
-              <button class="followup-chip"
-                      *ngFor="let s of message.suggestions"
-                      (click)="selectHardcodedQuestion(s)"
-                      title="Ask this next">
-                {{ s }}
-              </button>
-            </div>
-
-            <div class="message-timestamp">
-              {{ message.timestamp }}
-
-              <!-- Copy -->
-              <button class="icon-btn" (click)="copyToClipboard(message.text, i)"
-                      [attr.aria-label]="copySuccessIndex === i ? 'Copied' : 'Copy message'"
-                      title="Copy message">
-                <ng-container *ngIf="copySuccessIndex === i; else showCopy">
-                  <span class="copy-tick">&#10003;</span>
-                </ng-container>
-                <ng-template #showCopy>
-                  <img src="assets/images/chat/copy.png" alt="Copy" class="meta-icon" />
-                </ng-template>
-              </button>
-
-              <!-- Audio: play / stop -->
-              <button class="icon-btn"
-                      *ngIf="message.audioUrl && isReadingIndex !== i"
-                      (click)="playServerAudioForMessage(i)"
-                      aria-label="Play audio" title="Play audio">
-                <img src="assets/images/chat/speaker.png" alt="Play audio" class="meta-icon" />
-              </button>
-
-              <button class="icon-btn"
-                      *ngIf="message.audioUrl && isReadingIndex === i"
-                      (click)="stopReadAloud()"
-                      aria-label="Stop audio" title="Stop audio">
-                <img src="assets/images/chat/stop-button.png" alt="Stop audio" class="meta-icon" />
-              </button>
-
-              <!-- Generate audio on demand -->
-              <button class="icon-btn"
-                      *ngIf="!message.audioUrl"
-                      (click)="synthesizeAudioAndPlay(i)"
-                      [disabled]="message.isSynthesizing"
-                      aria-label="Generate audio"
-                      title="Generate audio">
-                <ng-container *ngIf="!message.isSynthesizing; else audioSpinner">
-                  <img src="assets/images/chat/speaker.png" alt="Generate audio" class="meta-icon" />
-                </ng-container>
-                <ng-template #audioSpinner>
-                  <img src="assets/images/chat/loading-spinner.gif" alt="Generating audio" class="meta-icon" />
-                </ng-template>
-              </button>
-
-              <!-- Video: generate, play, stop -->
-              <!-- Show Generate when no cached video -->
-              <button class="icon-btn"
-                      *ngIf="!message.videoUrl && !message.isVideoSynthesizing"
-                      (click)="synthesizeVideoAndPlay(i)"
-                      aria-label="Generate video"
-                      title="Generate video">
-                <img src="assets/images/chat/video.png" alt="Generate video" class="meta-icon" />
-              </button>
-
-              <!-- Spinner while generating video -->
-              <button class="icon-btn" *ngIf="!message.videoUrl && message.isVideoSynthesizing" disabled>
-                <img src="assets/images/chat/loading-spinner.gif" alt="Generating video" class="meta-icon" />
-              </button>
-
-              <!-- Toggle inline video (single button). Show video.png initially, switches to no-video.png when enabled -->
-              <button class="icon-btn"
-                      *ngIf="message.videoUrl"
-                      (click)="toggleMessageVideo(i)"
-                      [class.active]="isVideoEnabledIndex[i]"
-                      aria-label="Toggle video"
-                      title="Toggle video">
-                <img [src]="isVideoEnabledIndex[i] ? 'assets/images/chat/no-video.png' : 'assets/images/chat/video.png'"
-                     alt="Video" class="meta-icon" />
-              </button>
-
-            </div>
-
-            <!-- Inline video player -->
-            <video *ngIf="isVideoEnabledIndex[i] && message.playingVideoUrl"
-                   id="inline-video-{{i}}"
-                   class="tutor-video"
-                   [src]="message.playingVideoUrl"
-                   (ended)="onMessageVideoEnded(i)"
-                   controls autoplay>
-            </video>
+          <div class="message-timestamp">
+            {{ message.timestamp }}
+
+            <!-- Copy -->
+            <button class="icon-btn" (click)="copyToClipboard(message.text, i)"
+                    [attr.aria-label]="copySuccessIndex === i ? 'Copied' : 'Copy message'"
+                    title="Copy message">
+              <ng-container *ngIf="copySuccessIndex === i; else showCopy">
+                <span class="copy-tick">&#10003;</span>
+              </ng-container>
+              <ng-template #showCopy>
+                <img src="assets/images/chat/copy.png" alt="Copy" class="meta-icon" />
+              </ng-template>
+            </button>
+
+            <!-- Audio: play / stop -->
+            <button class="icon-btn"
+                    *ngIf="message.audioUrl && isReadingIndex !== i"
+                    (click)="playServerAudioForMessage(i)"
+                    aria-label="Play audio" title="Play audio">
+              <img src="assets/images/chat/speaker.png" alt="Play audio" class="meta-icon" />
+            </button>
+
+            <button class="icon-btn"
+                    *ngIf="message.audioUrl && isReadingIndex === i"
+                    (click)="stopReadAloud()"
+                    aria-label="Stop audio" title="Stop audio">
+              <img src="assets/images/chat/stop-button.png" alt="Stop audio" class="meta-icon" />
+            </button>
+
+            <!-- Generate audio on demand -->
+            <button class="icon-btn"
+                    *ngIf="!message.audioUrl"
+                    (click)="synthesizeAudioAndPlay(i)"
+                    [disabled]="message.isSynthesizing"
+                    aria-label="Generate audio"
+                    title="Generate audio">
+              <ng-container *ngIf="!message.isSynthesizing; else audioSpinner">
+                <img src="assets/images/chat/speaker.png" alt="Generate audio" class="meta-icon" />
+              </ng-container>
+              <ng-template #audioSpinner>
+                <img src="assets/images/chat/loading-spinner.gif" alt="Generating audio" class="meta-icon" />
+              </ng-template>
+            </button>
+
+            <!-- Video: generate, play, stop -->
+            <!-- Show Generate when no cached video -->
+            <button class="icon-btn"
+                    *ngIf="!message.videoUrl && !message.isVideoSynthesizing"
+                    (click)="synthesizeVideoAndPlay(i)"
+                    aria-label="Generate video"
+                    title="Generate video">
+              <img src="assets/images/chat/video.png" alt="Generate video" class="meta-icon" />
+            </button>
+
+            <!-- Spinner while generating video -->
+            <button class="icon-btn" *ngIf="!message.videoUrl && message.isVideoSynthesizing" disabled>
+              <img src="assets/images/chat/loading-spinner.gif" alt="Generating video" class="meta-icon" />
+            </button>
+
+            <!-- Toggle inline video (single button). Show video.png initially, switches to no-video.png when enabled -->
+            <button class="icon-btn"
+                    *ngIf="message.videoUrl"
+                    (click)="toggleMessageVideo(i)"
+                    [class.active]="isVideoEnabledIndex[i]"
+                    aria-label="Toggle video"
+                    title="Toggle video">
+              <img [src]="isVideoEnabledIndex[i] ? 'assets/images/chat/no-video.png' : 'assets/images/chat/video.png'"
+                   alt="Video" class="meta-icon" />
+            </button>
+
           </div>
+
+          <!-- Inline video player -->
+          <video *ngIf="isVideoEnabledIndex[i] && message.playingVideoUrl"
+                 id="inline-video-{{i}}"
+                 class="tutor-video"
+                 [src]="message.playingVideoUrl"
+                 (ended)="onMessageVideoEnded(i)"
+                 controls autoplay>
+          </video>
         </div>
       </div>
+    </div>
 
     <!-- Typing indicator -->
     <div *ngIf="isTyping" class="typing-indicator" aria-live="polite">

src/app/chat/chat.component.ts

@@ -7,13 +7,14 @@ import { Subscription } from 'rxjs';
 import { finalize } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
+import { HeaderComponent } from '../shared/header/header.component';
 
 type Grade = 'lowergrade' | 'midgrade' | 'highergrade';
 
 @Component({
   selector: 'app-chat',
   standalone: true,
-  imports: [FormsModule, CommonModule, RouterModule],
+  imports: [FormsModule, CommonModule, RouterModule, HeaderComponent],
   templateUrl: './chat.component.html',
   styleUrls: ['./chat.component.css']
 })

src/app/footer/footer.component.css

@@ -0,0 +1,208 @@
+
+
+.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;
+  font-weight: lighter;
+}
+
+  .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;
+  }
+
+.user-guide-modal a {
+  color: #137ec4;
+  text-decoration: underline;
+  font-weight: 600;
+}
+
+.user-guide-modal a:hover {
+  color: #009688;
+  text-decoration: underline;
+}
+
+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;
+}
+
+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;
+  }
+}

src/app/footer/footer.component.html

@@ -0,0 +1,372 @@
+<footer *ngIf="brandService.showFooter">
+  <ng-container [ngSwitch]="brandService.name">
+    <ng-container *ngSwitchCase="'Py-Learn'">
+      <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]="brandService.socialLinksCurrent.linkedin" target="_blank" class="social-icon linkedin" aria-label="LinkedIn">
+          <i class="fab fa-linkedin-in"></i>
+        </a>
+        <a [href]="brandService.socialLinksCurrent.youtube" target="_blank" class="social-icon youtube" aria-label="YouTube">
+          <i class="fab fa-youtube"></i>
+        </a>
+        <a [href]="brandService.socialLinksCurrent.facebook" target="_blank" class="social-icon facebook" aria-label="Facebook">
+          <i class="fab fa-facebook-f"></i>
+        </a>
+        <a [href]="brandService.socialLinksCurrent.instagram" target="_blank" class="social-icon instagram" aria-label="Instagram">
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a [href]="brandService.socialLinksCurrent.website" target="_blank" class="social-icon website" aria-label="Website">
+          <i class="fas fa-globe"></i>
+        </a>
+      </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>
+    </ng-container>
+    <!-- MJ-Learn Footer -->
+    <ng-container *ngSwitchCase="'MJ-Learn'">
+      <p>© 2025 Majema Company. All rights reserved.</p>
+      <a href="mailto:kundtjanst@majema.se" 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]="brandService.socialLinksCurrent.linkedin" target="_blank" class="social-icon linkedin" aria-label="LinkedIn">
+          <i class="fab fa-linkedin-in"></i>
+        </a>
+        <a [href]="brandService.socialLinksCurrent.youtube" target="_blank" class="social-icon youtube" aria-label="YouTube">
+          <i class="fab fa-youtube"></i>
+        </a>
+        <a [href]="brandService.socialLinksCurrent.facebook" target="_blank" class="social-icon facebook" aria-label="Facebook">
+          <i class="fab fa-facebook-f"></i>
+        </a>
+        <a [href]="brandService.socialLinksCurrent.instagram" target="_blank" class="social-icon instagram" aria-label="Instagram">
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a [href]="brandService.socialLinksCurrent.website" target="_blank" class="social-icon website" aria-label="Website">
+          <i class="fas fa-globe"></i>
+        </a>
+      </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;">
+            <li id="privacyTitle">
+              <b>Privacy Policy — Majema</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li><b>What personal data is collected?</b><br>Majemaförlaget AB processes personal data that you provide to us. Personal data that will be processed includes, for example, name, social security number, school affiliation, role, interests related to teaching, address, e-mail address and telephone number. You provide the personal data yourself in connection with ordering, expressions of interest, by telephone or when visiting teaching material exhibitions, school visits and teacher meetings. On our website we use cookies and save your IP address.</li>
+                <li>It is voluntary to provide your personal data, but in some cases we cannot provide you with the service and/or product you have ordered if you do not provide your personal data.</li>
+                <li>We do not collect any personal information from third-party companies. Advertising may occur on external websites and then we can obtain statistics that are not personal through cookies.</li>
+                <li><b>Purposes of personal data processing</b><br>Your personal data will be processed in order for us to fulfill our commitments to you. We may also process your data for the purposes below as well as for our market and customer analyses and statistics in order to provide you with a better offer and better service. We may, unless you have objected to direct marketing in writing, also use your personal data to provide various offers of services and/or products from us. You may unsubscribe from receiving such offers at any time with each marketing message. If we process data for other purposes, we will inform you of this.</li>
+                <li><b>Storage of personal data</b><br>We may transfer your data to IT service providers and other service providers who then process the data on our behalf. If we transfer your data outside the EU, we ensure that we have a legal basis for such transfer. This can be done through the EU Commission's standard contractual clauses. Majema takes the greatest possible security measures to protect your personal data. All identifiable personal data is subject to access restrictions to prevent unauthorized access, alteration or misuse. We will store your data for as long as necessary to fulfill our obligations to you.</li>
+                <li><b>Our legal basis</b><br>We process your data based on our legitimate interest or to enable us to fulfill our obligations to you.</li>
+                <li><b>Cookies – Information collected via www.majema.se</b><br>www.majema.se is managed by Majemaförlaget AB. Majema's website uses cookies to give you access to additional functions, such as previous orders and to simplify logging into your account. You can refuse the use of cookies through your browser settings. Majema uses analysis tools to get a picture of how visitors use our websites, in order to improve the content, navigation and structure of the websites. The analysis tools use JavaScript and cookies and the information generated by these through your use of the website (including your IP address) will be forwarded to the analysis tools' service providers and may be stored on servers outside the EU. The service providers may also transfer this information to third parties if required by law or in cases where a third party processes the information on their behalf. By using Majema's websites without declining third-party cookies, you agree that the service providers process your data in the manner and for the purposes described above. If you do not want your visits to Majema's website to be included in the service providers' statistics, there is an add-on that you can install in your browser.</li>
+                <li><b>Your rights</b><br>According to applicable data protection legislation, you have the right to request that incorrect personal data be corrected, blocked, restricted or deleted. In addition, you can also object to processing or request that your data be transferred to another data controller, so-called data portability. You also have the right to request written information, a so-called register extract, about the personal data we process about you once a year, free of charge, by sending a written signed application to our address below. Mark the application with "Request for register extract". If you are dissatisfied with our processing, you have the right to file a complaint with the Swedish Data Protection Authority.</li>
+                <li><b>Contact information</b><br>Majemaförlaget AB, 556414-9135, is the data controller for the processing of your personal data that you provide when filling out contact forms on the website. Address: Majemaförlaget AB, Box 4016, 131 04 Nacka</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;">
+            <li id="termsTitle">
+              <b>Terms & Conditions — Majema</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>By using Majema, you agree to these Terms and our Privacy Policy.</li>
+              </ul>
+            </li>
+            <li><b>System requirements</b><br>
+              <ul style="list-style: unset; margin-left: 1.25rem;">
+                <li>Majema's digital learning materials work on computers, tablets and interactive whiteboards. Our digital learning materials are based on HTML5 and JavaScript. This means that older versions of browsers are not always fully supported. We recommend using an updated version of the Chrome browser to best experience our digital learning materials.</li>
+                <li>Here you can download <a href="https://www.google.com/chrome/" target="_blank">Google Chrome for free</a>.</li>
+                <li>For the best user experience, you should make sure these four points are met:
+                  <ol style="margin-left: 1.5rem;">
+                    <li>Make sure your browser is set to 100% zoom. This is important for the content to look correct on the screen.</li>
+                    <li>Update your browser.</li>
+                    <li>Clear your cache. Select: settings, privacy and security, clear browsing data. (If clearing the cache isn't enough, you can open a new incognito window in Chrome and log in from there.)</li>
+                    <li>If you are using a tablet – update your operating system. This is done under settings.</li>
+                  </ol>
+                </li>
+                <li><b>Web browser</b><br>
+                  We recommend that you always update your browser to the latest version.<br>
+                  We test our digital learning materials against the following browsers: Chrome, Edge, Safari and Firefox.
+                </li>
+                <li><b>License management</b><br>
+                  All of our websites are licensed to apply to one teacher and class for one year from the date of activation.<br>
+                  If there is a student website, it is activated at the same time as you activate the teacher website.<br>
+                  To extend a license, you need to make a new purchase, in the webshop, through a retailer or with our customer service.<br>
+                  Should a license need to be transferred from one teacher to another, please contact our customer service and we will help you with this.<br>
+                  You can change your account details yourself under the My Account tab when you are logged in.
+                </li>
+                <li><b>Operating system</b><br>
+                  We recommend that you always update your operating system to the latest version.<br>
+                  <ul style="list-style: disc; margin-left: 1.5rem;">
+                    <li>Windows 7, 8, 10, 11</li>
+                    <li>Chrome OS (Chromebook)</li>
+                    <li>Mac OS (11 and later)</li>
+                    <li>Android tablet 11 or later (with Chrome browser)</li>
+                    <li>iOS 14 and later (iPad operating system)</li>
+                  </ul>
+                  Majema does not guarantee support for devices and operating systems that are no longer updated by the manufacturer.
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </ng-container>
+  </ng-container>
+</footer>
+

src/app/footer/footer.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { BrandService } from '../shared/brand.service';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent {
+  showPrivacyPopup = false;
+  showTermsPopup = false;
+
+  constructor(public brandService: BrandService) {}
+
+  openPrivacyPopup(event: Event): void {
+    event.preventDefault();
+    this.showPrivacyPopup = true;
+  }
+
+  closePrivacyPopup(): void {
+    this.showPrivacyPopup = false;
+  }
+
+  openTermsPopup(event: Event): void {
+    event.preventDefault();
+    this.showTermsPopup = true;
+  }
+
+  closeTermsPopup(): void {
+    this.showTermsPopup = false;
+  }
+}

src/app/home/home.component.css

@@ -356,100 +356,6 @@ h1 {
     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;
-}
-
-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 {

src/app/home/home.component.html

@@ -96,32 +96,7 @@
         </div>
       </div>
     </div>
-  </section>
-
-  <!-- ================= 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.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>
+  </section> 
 
   <!-- ================= GUIDE POPUP ================= -->
   <div *ngIf="showGuidePopup">
@@ -1287,250 +1262,4 @@
   </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>
+<app-footer></app-footer>

src/app/shared/brand.service.ts

@@ -1,17 +1,89 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
+// Add type for brand names
+export type BrandName = 'Py-Learn' | 'MJ-Learn';
+
 @Injectable({ providedIn: 'root' })
 export class BrandService {
-  private nameSubject = new BehaviorSubject<string>('Py-Learn');
-  private logoSubject = new BehaviorSubject<string>('assets/images/pykara-logo.png');
+  private nameSubject: BehaviorSubject<BrandName>;
+  private logoSubject: BehaviorSubject<string>;
+
+  readonly name$;
+  readonly logo$;
+
+  // Show/hide footer based on brand
+  public showFooter: boolean = true;
+
+  // Social links for each brand
+  public socialLinks: Record<BrandName, {
+    website: string;
+    linkedin: string;
+    youtube: string;
+    facebook: string;
+    instagram: string;
+  }> = {
+      'Py-Learn': {
+        website: 'https://pykara.ai/',
+        linkedin: 'https://www.linkedin.com/in/pykara-technologies',
+        youtube: 'https://www.youtube.com/@PykaraTechnologies',
+        facebook: 'https://www.facebook.com/people/Pykara/100087653675803/',
+        instagram: 'https://www.instagram.com/pykaratechnologie/'
+      },
+      'MJ-Learn': {
+        website: 'https://www.majema.se/',
+        linkedin: 'https://www.linkedin.com/company/majemaforlaget',
+        youtube: 'https://www.youtube.com/@majemaforlaget3014',
+        facebook: 'https://www.facebook.com/majemaforlaget',
+        instagram: 'https://www.instagram.com/majemaforlaget/'
+      }
+    };
+
+  constructor() {
+    // Detect brand by URL and port
+    const url = window.location.href;
+    const port = window.location.port;
+    let brandName: BrandName = 'Py-Learn'; // default to Py-Learn for type safety
+    let logoPath = 'assets/images/pykara-logo.png';
 
-  readonly name$ = this.nameSubject.asObservable();
-  readonly logo$ = this.logoSubject.asObservable();
+    if (url.includes('pykara-py-learn')) {
+      brandName = 'Py-Learn';
+      logoPath = 'assets/images/pykara-logo.png';
+      this.showFooter = true;
+    } else if (url.includes('majemaai-mj-learn')) {
+      brandName = 'MJ-Learn';
+      logoPath = 'assets/images/majema-logo.png';
+      this.showFooter = false;
+    }
+     //else if (url.includes('localhost')) {
+     //  if (port === '4300') {
+     //    brandName = 'Py-Learn';
+     //    logoPath = 'assets/images/pykara-logo.png';
+     //    this.showFooter = true;
+     //  } else if (port === '4200') {
+     //    brandName = 'MJ-Learn';
+     //    logoPath = 'assets/images/Majema.png';
+     //    this.showFooter = false;
+     //  }
+     //}
 
-  get name(): string { return this.nameSubject.value; }
-  get logo(): string { return this.logoSubject.value; } 
 
-  setName(name: string) { this.nameSubject.next(name); }
+    this.nameSubject = new BehaviorSubject<BrandName>(brandName);
+    this.logoSubject = new BehaviorSubject<string>(logoPath);
+    this.name$ = this.nameSubject.asObservable();
+    this.logo$ = this.logoSubject.asObservable();
+  }
+
+  get name(): BrandName { return this.nameSubject.value; }
+  get logo(): string { return this.logoSubject.value; }
+
+  setName(name: BrandName) { this.nameSubject.next(name); }
   setLogo(path: string) { this.logoSubject.next(path); }
+
+  get socialLinksCurrent() {
+    // Use 'as BrandName' to ensure type safety
+    return this.socialLinks[this.name as BrandName];
+  }
 }
+
+

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

@@ -3,27 +3,28 @@
   <!-- 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" />
+      <img [src]="brand.logo" [alt]="brand.name + ' 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">
+    <a [href]="socialLinks.linkedin" 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">
+    <a [href]="socialLinks.youtube" 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">
+    <a [href]="socialLinks.facebook" 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">
+    <a [href]="socialLinks.instagram" 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">
+    <a [href]="socialLinks.website" target="_blank" class="social-icon website" aria-label="Website">
       <i class="fas fa-globe"></i>
     </a>
   </div>
@@ -166,7 +167,7 @@
       <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>
+  <a class="signin-watermark" [href]="socialLinks.website" target="_blank">
+    {{ websiteDisplay }}
+  </a>
 </section>

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

@@ -288,4 +288,17 @@ export class SignInComponent implements AfterViewInit, OnDestroy {
       this.cdr.markForCheck();
     }, 5000);
   }
+
+  // In SignInComponent
+  get socialLinks() {
+    return this.brand.socialLinksCurrent;
+  }
+
+  get websiteDisplay(): string {
+    // Remove protocol and any leading www.
+    return 'www.' + this.socialLinks.website.replace(/^https?:\/\/(www\.)?/, '');
+  }
+
+
+
 }

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

@@ -106,30 +106,18 @@
                   </div>
                 </div>
 
-                <div class="create-footer"><b>© Pykara Technologies, 2025. All rights reserved.</b></div>
+                <div class="create-footer">
+                  <b>
+                    © {{ brand.name === 'Py-Learn' ? 'Pykara Technologies' : 'Majema Company' }}, 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">

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

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup, ReactiveFormsModule, Validators, AbstractContro
 import { Router, RouterLink } from '@angular/router';
 import { SignUpService } from './sign-up.service';  // Import the SignUpService
 import { trigger, transition, style, animate } from '@angular/animations';
+import { BrandService } from '../shared/brand.service'; // <-- Add this import
 
 export function nameValidator(control: AbstractControl): ValidationErrors | null {
   const value = control.value || '';
@@ -71,7 +72,8 @@ export class SignUpComponent implements OnInit, OnDestroy {
     private fb: FormBuilder,
     private router: Router,
     private signUpService: SignUpService,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    public brand: BrandService
   ) {
     this.form = this.fb.group({
       name: ['', [Validators.required, Validators.minLength(2), nameValidator]],