test

src/app/homepage/homepage.component.css

@@ -59,7 +59,7 @@ body {
 .header-inner {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between; /* space logo cluster and nav */
   padding: 18px 32px 0 32px;
   position: relative;
 }
@@ -207,13 +207,32 @@ body {
 
 .auth-topright {
   position: fixed;
-  top: 28px;
+  top: 22px;
   right: 48px;
   z-index: 200;
   display: flex;
   gap: 18px;
 }
 
+.auth-topright { gap:12px; }
+.lang-select {
+  height: 32px;
+  margin: 0 14px 8px 12px; /* space before auth button */
+  background: rgba(13,26,43,0.9);
+  color: #e3f6ff;
+  border: 1px solid #3aa6d9;
+  border-radius: 8px;
+  padding: 08px;
+  font-size: 0.9rem;
+  box-shadow: 0 2px 10px rgba(2,6,23,0.35);
+  cursor: pointer;
+  margin-top: 18px;
+  margin-right: 350px;
+} 
+
+.lang-select:hover { border-color: #5fc0ee; }
+.lang-select:focus { outline: none; box-shadow:0002px rgba(56,189,248,0.35); }
+
 .auth-btn {
   font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
   font-size: 1.1rem;
@@ -594,24 +613,13 @@ label {
 
 /* Dropdown */
 .dropdown { position: relative; display: inline-block; }
-.dropbtn { background-color: #222; color: #fff; padding: 10px 16px; border: none; cursor: pointer; border-radius: 4px; }
+.dropbtn { background-color: #222; color: #fff; padding: 10px 16px; border: none; display: flex; gap: 6px; align-items: center; }
 .dropdown-content { display: none; position: absolute; right: 0; background: #333; min-width: 180px; box-shadow: 0 8px 16px rgba(0,0,0,.3); border-radius: 4px; z-index: 1; }
 .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; }
 .dropdown-content a:hover { background: #444; }
 .dropdown:hover .dropdown-content { display: block; }
 
-/* Buttons */
-.btn {
-  background: #c62828;
-  color: #fff;
-  border: none;
-  padding: 10px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: bold;
-  text-decoration: none;
-}
-.btn:hover { background: #e53935; }
+
 
 /* Hero */
 .hero {
@@ -632,6 +640,23 @@ label {
   border-radius: 4vw;
 }
 
+/* Subtle gradient overlay behind hero text for readability */
+.hero { position: fixed; /* already set, ensure stacking */ }
+.hero::before {
+ content: '';
+ position: absolute;
+ inset:0;
+ margin: auto;
+ width:100%;
+ height:100%;
+ border-radius:4vw;
+ pointer-events: none;
+ background: linear-gradient(90deg, rgba(0,0,0,0)0%, rgba(1,19,41,0.35)50%, rgba(0,0,0,0)100%);
+}
+
+/* Slightly elevate hero content above overlay */
+.hero > * { position: relative; z-index:1; }
+
 .blue-section, .how-to-use, .features {
   position: relative;
   z-index: 1;
@@ -662,8 +687,13 @@ label {
 .feature-image { flex: 1 1 320px; padding: 20px; }
 .feature-image img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,.2); }
 
-/* Footer */
-footer { background: linear-gradient(to right, #011022, #01030a); color: #fff; text-align: center; padding: 15px 10px; }
+h2.section-title {
+  font-size: 28px;
+  color: #0d9de3;
+  margin-bottom: 10px;
+}
+  /* Footer */
+  footer { background: linear-gradient(to right, #011022, #01030a); color: #fff; text-align: center; padding: 15px 10px; }
 footer a { color: #fff; text-decoration: none; margin: 0 10px; }
 footer .social-icons { margin-top:12px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
 footer .social-icons .si-wrap { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; letter-spacing:.5px; font-family:'Segoe UI', Arial, sans-serif; color:#cfe9f7; }
@@ -843,9 +873,10 @@ footer .social-icons .si.ig:hover { filter:brightness(1.15); color:#fff; box-sha
 
 
   .how-to-use .section-title {
-    font-size: 28px;
-    color: #0d9de3; /* blue highlight */
-    margin-bottom: 10px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
   }
 
   .how-to-use .section-subtitle {
@@ -1045,3 +1076,289 @@ footer .social-icons {
 /* Fallback text hidden when svg present */
 .auth-topright .auth-btn:empty::before { content: 'Login'; color: #fff; }
 
+
+.header-nav {
+ display: flex;
+ align-items: center;
+ gap:48px;
+ color: #e3f6ff;
+ font-weight:700;
+ margin-right: 100px;
+}
+.header-nav .nav-link {
+ color: #e3f6ff;
+ text-decoration: none;
+ font-size:0.95rem;
+}
+.header-nav .nav-link:hover {
+ color: #38bdf8;
+}
+.header-nav .nav-sep {
+ color: #5fa8d4;
+ opacity:0.9;
+}
+.header-nav .nav-icon { font-size:0.95rem; margin-right:6px; vertical-align: -1px; opacity:0.9; }
+.header-nav .dropdown-item .nav-icon { margin-right:8px; }
+
+/* Premium soft hover underline and color fade for header nav */
+.header-nav .nav-link,
+.header-nav .dropdown-toggle,
+.header-nav .dropdown-item {
+ position: relative;
+ transition: color .25s ease;
+}
+.header-nav .nav-link::after,
+.header-nav .dropdown-toggle::after,
+.header-nav .dropdown-item::after {
+ content: '';
+ position: absolute;
+ left:50%;
+ bottom: -6px;
+ height:2px;
+ width:0;
+ border-radius:2px;
+ background: linear-gradient(90deg, rgba(56,189,248,0.0), rgba(56,189,248,0.65), rgba(56,189,248,0.0));
+ transition: width .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1);
+}
+.header-nav .nav-link:hover,
+.header-nav .dropdown-toggle:hover,
+.header-nav .dropdown-item:hover { color: #5fc0ee; }
+.header-nav .nav-link:hover::after,
+.header-nav .dropdown-toggle:hover::after,
+.header-nav .dropdown-item:hover::after {
+ width:64%;
+ left:18%;
+}
+
+@media (max-width:760px) {
+ .header-nav { display: none; }
+}
+
+/* Dropdown styles for About in header nav */
+.header-nav .dropdown { position: relative; display: inline-block; }
+/* Hover bridge to avoid flicker when moving cursor from toggle to menu */
+.header-nav .dropdown::after {
+ content: '';
+ position: absolute;
+ left:0;
+ right:0;
+ top:100%;
+ height:10px; /* small buffer */
+}
+.header-nav .dropdown-toggle { cursor: pointer; }
+.header-nav .dropdown-menu {
+ position: absolute;
+ top:120%;
+ left:0;
+ background: #0b1f36;
+ border:1px solid rgba(56,189,248,0.25);
+ border-radius:8px;
+ box-shadow:0 8px 24px rgba(2,6,23,0.45);
+ padding:8px;
+ min-width:220px;
+ z-index:3000;
+ /* transition-based visibility so there's time to hover into menu */
+ opacity:0;
+ visibility: hidden;
+ transform: translateY(6px);
+ pointer-events: none;
+ transition: opacity .22s ease, transform .22s ease, visibility 0s linear .3s; /*300ms hide delay */
+}
+/* Show menu on hover/focus and keep it open when hovering the menu itself */
+.header-nav .dropdown:hover .dropdown-menu,
+.header-nav .dropdown:focus-within .dropdown-menu,
+.header-nav .dropdown .dropdown-menu:hover {
+ opacity:1;
+ visibility: visible;
+ transform: translateY(0);
+ pointer-events: auto;
+ transition-delay:0s,0s,0s; /* no delay when showing */
+}
+.header-nav .dropdown-item {
+ display: block;
+ color: #e3f6ff;
+ text-decoration: none;
+ padding:8px 12px;
+ border-radius:6px;
+ font-size:0.92rem;
+ white-space: nowrap;
+}
+.header-nav .dropdown-item:hover { background: rgba(56,189,248,0.18); color: #bae6fd; }
+/* Active/selected nav highlight without border */
+.header-nav .nav-link.active,
+.header-nav .dropdown-item.active {
+ box-shadow:0006px rgba(56,189,248,0.12), 0 2px 12px rgba(56,189,248,0.35);
+ background: rgba(56,189,248,0.1);
+ border: none;
+ border-radius:8px;
+}
+
+/* Remove rounded border appearance only for active Home link */
+.header-nav .nav-link:first-of-type.active { border-radius:0; background: transparent; }
+
+
+/* Reduce default outline to subtle glow for accessibility */
+.header-nav .nav-link:focus-visible,
+.header-nav .dropdown-item:focus-visible {
+ outline: none;
+ box-shadow:0003px rgba(56,189,248,0.35);
+ border-radius:8px;
+}
+
+/* Remove click outline/border when using mouse/touch (but keep keyboard :focus-visible) */
+.header-nav .nav-link:focus:not(:focus-visible),
+.header-nav .dropdown-toggle:focus:not(:focus-visible),
+.header-nav .dropdown-item:focus:not(:focus-visible),
+.header-nav .nav-link:active,
+.header-nav .dropdown-toggle:active,
+.header-nav .dropdown-item:active {
+ outline: none !important;
+ box-shadow: none !important;
+ border: none !important;
+}
+
+
+/* Title stack for logo + tagline */
+.title-stack { display:flex; flex-direction: column; align-items:flex-start; gap:2px; }
+.logo-tagline {
+ font-size:0.92rem;
+ font-weight:400;
+ color: #b7d6eb;
+ letter-spacing:0.3px;
+ margin-top: -6px; /* tuck closer under title */
+ opacity:0.9;
+}
+
+/* Remove separate fixed language selector */
+.lang-topright { display:none; }
+
+/* Header inline language selector after nav */
+.header-lang {
+ height:32px;
+ margin: 0 0px 0px 0px; /* space before auth button */
+ background: rgba(13,26,43,0.9);
+ color: #e3f6ff;
+ border:1px solid #3aa6d9;
+ border-radius:8px;
+ padding:08px;
+ font-size:0.9rem;
+ box-shadow:0 2px 10px rgba(2,6,23,0.35);
+ cursor: pointer;
+}
+.header-lang:hover { border-color: #5fc0ee; }
+.header-lang:focus { outline: none; box-shadow:0002px rgba(56,189,248,0.35); }
+
+/* Keep auth button at far top-right */
+.auth-topright { position: fixed; top:22px; right:48px; z-index:200; }
+
+/* Tooltip for profile icon */
+.auth-topright .auth-btn[data-tooltip] { position: relative; }
+.auth-topright .auth-btn[data-tooltip]::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ right:50%;
+ transform: translateX(50%);
+ top: calc(100% +8px);
+ background: rgba(15,23,42,0.96);
+ color: #e3f6ff;
+ border:1px solid rgba(56,189,248,0.35);
+ border-radius:6px;
+ padding:6px 10px;
+ font-size:12px;
+ line-height:1;
+ white-space: nowrap;
+ box-shadow:0 6px 18px rgba(2,6,23,0.45);
+ opacity:0;
+ pointer-events: none;
+ transition: opacity .18s ease, transform .18s ease;
+ z-index:2100;
+}
+.auth-topright .auth-btn[data-tooltip]:hover::after,
+.auth-topright .auth-btn[data-tooltip]:focus-visible::after { opacity:1; transform: translateX(50%) translateY(0); }
+.hero .hero-cta {
+  margin-top: 12px;
+  background: linear-gradient(90deg, #38bdf80%, #23272b100%);
+  color: #18181b;
+  border: none;
+  border-radius: 999px;
+  padding: 10px 22px;
+  font-size: 0.98rem;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  cursor: pointer;
+  box-shadow: 0 2px 12px #38bdf888;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.hero .hero-cta:hover {
+ background: linear-gradient(90deg, #23272b0%, #38bdf8100%);
+ color: #bae6fd;
+ box-shadow:0 2px 24px #bae6fd88;
+}
+
+.features .section-title { text-align: center; margin-left: auto; margin-right: auto; display: block; }
+
+
+
+
+
+/* How It Works section styling */
+.how-it-works {
+ padding:80px 10%;
+ text-align: center;
+ background: #011329; /* solid dark theme background */
+ color: #e3f6ff;
+ position: relative; /* for pseudo-element if present */
+}
+/* If decorative background was present, keep but ensure card sits above */
+.how-it-works::before {
+ content: '';
+ position: absolute;
+ top:50%;
+ left:50%;
+ transform: translate(-50%, -50%);
+ width: min(1000px,92vw);
+ height:380px;
+ border-radius:24px;
+ background: linear-gradient(180deg, rgba(7,16,28,0.95), rgba(5,12,22,0.95)); /* darker decorative layer */
+ box-shadow:0 20px 60px rgba(2,6,23,0.45), inset 0 0 1px rgba(56,189,248,0.15);
+ z-index:0; /* behind card content */
+}
+.how-it-works .section-title,
+.how-it-works p,
+.how-it-works h3 { position: relative; z-index:1; }
+
+/* Scrollable card with solid theme background and light text */
+.how-card {
+ background: #ffffff; /* solid themed background on top of any card */
+ color: #e3f6ff;
+ border-radius:12px;
+ box-shadow:0 4px 16px rgba(2,6,23,0.55);
+ border:1px solid rgba(56,189,248,0.25);
+ padding:24px;
+ max-width:900px;
+ margin:0 auto;
+ max-height:420px; /* make scrollable if content exceeds */
+ overflow: auto;
+ position: relative;
+ z-index:2; /* above background layers */
+}
+.how-card h3 { color: #c92c26; margin-top:12px; }
+.how-card p { font-size:16px; line-height:1.7; color: #333; }
+
+/* Ensure section title uses theme accent */
+.how-it-works .section-title {
+ text-align: center;
+ margin:0 auto 12px auto;
+ display: block;
+ color: #0d9de3;
+}
+
+@media (max-width:768px) {
+ .how-it-works::before { height:320px; border-radius:18px; }
+ .how-card { max-height:360px; }
+}
+
+
+
+
+

src/app/homepage/homepage.component.html

@@ -1,275 +1,415 @@
 <!-- Modern UI header with logo and PyDetect title -->
 <div class="site-header">
-  <div class="header-inner">
-    <div class="logo-cluster">
-      <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
-        <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
-      </span>
-      <div class="py-detect-title-header">
-        <span class="py-letter p">P</span>
-        <span class="py-letter y">Y</span>
-        <span class="py-shape"></span>
-        <span class="py-letter d">D</span>
-        <span class="py-letter e">E</span>
-        <span class="py-letter t">T</span>
-        <span class="py-letter e2">E</span>
-        <span class="py-letter c">C</span>
-        <span class="py-letter t2">T</span>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Top-right auth buttons (unchanged) -->
-<div class="auth-topright">
-  <!-- Inline SVG-based circular login button -->
-  <button class="auth-btn" (click)="openSignIn()" aria-label="Open Sign In">
-    <!-- user-circle icon: outer ring with person silhouette -->
-    <svg class="auth-btn-svg" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
-      <circle cx="32" cy="32" r="30" class="auth-ring" fill="none" stroke-width="2" />
-      <circle cx="32" cy="20" r="8" class="auth-head" />
-      <path class="auth-body" d="M16 48c0-8.8 7.2-16 16-16s16 7.2 16 16" fill="none" stroke-width="6" stroke-linecap="round" />
-    </svg>
-  </button>
+ <div class="header-inner">
+ <div class="logo-cluster">
+ <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
+ <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
+ </span>
+ <!-- Title + Tagline stacked -->
+ <div class="title-stack">
+ <div class="py-detect-title-header">
+ <span class="py-letter p">P</span>
+ <span class="py-letter y">Y</span>
+ <span class="py-shape"></span>
+ <span class="py-letter d">D</span>
+ <span class="py-letter e">E</span>
+ <span class="py-letter t">T</span>
+ <span class="py-letter e2">E</span>
+ <span class="py-letter c">C</span>
+ <span class="py-letter t2">T</span>
+ </div>
+ <div class="logo-tagline">Real-Time Behavioral Intelligence Platform</div>
+ </div>
+ </div>
+ <!-- Right-side minimal navigation -->
+ <nav class="header-nav" aria-label="Primary">
+ <a class="nav-link" [class.active]="selectedNav==='home'" href="#" (click)="navigateHome(); $event.preventDefault()">
+ <i class="fas fa-home nav-icon" aria-hidden="true"></i> Home
+ </a>
+ <span class="nav-sep">|</span>
+ <!-- About dropdown (second) -->
+ <div class="dropdown">
+ <a class="nav-link dropdown-toggle" [class.active]="selectedNav==='mission' || selectedNav==='how-to-use' || selectedNav==='about'" href="#" (click)="markSelected('about'); $event.preventDefault()">
+ <i class="fas fa-info-circle nav-icon" aria-hidden="true"></i> About ▾
+ </a>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" [class.active]="selectedNav==='mission'" href="#mission" (click)="scrollToMission($event)">
+ <i class="fas fa-bullseye nav-icon" aria-hidden="true"></i> Our mission
+ </a>
+ <a class="dropdown-item" [class.active]="selectedNav==='how-to-use'" href="#how-to-use" (click)="scrollToHowToUse($event)">
+ <i class="fas fa-lightbulb nav-icon" aria-hidden="true"></i> How to use Py-Detect
+ </a>
+ <a class="dropdown-item" [class.active]="selectedNav==='how-it-works'" href="#how-it-works" (click)="scrollToHowItWorks($event)">
+ <i class="fas fa-cogs nav-icon" aria-hidden="true"></i> How it works
+ </a>
+ <a class="dropdown-item" href="#" (click)="openInfoDialog(); markSelected('about'); $event.preventDefault()">
+ <i class="fas fa-book-open nav-icon" aria-hidden="true"></i> Know more
+ </a>
+ </div>
+ </div>
+ <span class="nav-sep">|</span>
+ <!-- Features (third) -->
+ <a class="nav-link" [class.active]="selectedNav==='features'" href="#features" (click)="scrollToFeatures($event)">
+ <i class="fas fa-star nav-icon" aria-hidden="true"></i> Features
+ </a>
+ <span class="nav-sep">|</span>
+ <!-- Support (fourth) -->
+ <a class="nav-link" [class.active]="selectedNav==='support'" href="mailto:info@pykara.ai?subject=Py-Detect%20Support%20Request" (click)="markSelected('support')">
+ <i class="fas fa-life-ring nav-icon" aria-hidden="true"></i> Support
+ </a>
+ <!-- Language selector inline, after Support -->
+ <select class="lang-select header-lang" aria-label="Select language" [value]="selectedLanguage" (change)="onLanguageChange($any($event.target).value)">
+ <option value="en">EN</option>
+ <option value="en-IN">IN</option>
+ </select>
+</nav>
+ <!-- Top-right auth button -->
+ <div class="auth-topright">
+   <button class="auth-btn" (click)="openSignIn()" aria-label="Open Sign In"  title="Account">
+     <!-- user-circle icon: outer ring with person silhouette -->
+     <svg class="auth-btn-svg" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+       <circle cx="32" cy="32" r="30" class="auth-ring" fill="none" stroke-width="2" />
+       <circle cx="32" cy="20" r="8" class="auth-head" />
+       <path class="auth-body" d="M16 48c0-8.8 7.2-16 16-16s16 7.2 16 16" fill="none" stroke-width="6" stroke-linecap="round" />
+     </svg>
+   </button>
+ </div>
+ </div>
 </div>
 
 <!-- New Landing Hero + Sections -->
 <div class="landing">
-  <!-- Hero Section -->
-  <div class="hero">
-    <h2>Real-Time Truth & Deception Detection</h2>
-    <p>
-      One intelligent platform for law enforcement, recruiters, and security teams.
-      Analyse verbal responses and body language in real-time to detect deception, assess risks, and build trust.
-    </p>
-    <a href="#" class="btn know-more" (click)="openInfoDialog(); $event.preventDefault()">Know More</a>
-  </div>
+ <!-- Hero Section -->
+ <div class="hero">
+ <h2>Real-Time Truth & Deception Detection</h2>
+ <p>
+ One intelligent platform for law enforcement, recruiters, and security teams.
+ Analyse verbal responses and body language in real-time to detect deception, assess risks, and build trust.
+ </p>
+ <button class="hero-cta" (click)="scrollToSection($event, 'how-it-works')">How It Works</button>
+ </div>
 </div>
 
 
 <!-- Blue Background Wrapper -->
 <div class="blue-section">
-  <section class="specialisations">
-    <!-- Mission Section -->
-    <section class="mission">
-      <h2 class="section-title">OUR MISSION IS SIMPLE & IMPACTFUL</h2>
-      <div class="mission-row">
-        <div class="mission-left">
-          <p>
-            Py-Detect is designed to reduce deception, fraud, and risk by enabling
-            investigators, recruiters, and security professionals to uncover hidden truths
-            with precision and speed. Our goal is to create safer communities, fairer
-            recruitment processes, and stronger organisational security.
-          </p>
-        </div>
-        <div class="mission-right">
-          <p>
-            By combining AI-powered verbal analysis, body language<br> detection, and facial
-            recognition, Py-Detect provides<br> real-time deception scores and behavioural insights.<br>
-            This empowers law enforcement, HR teams, and security<br> officers to make
-            confident, evidence-based decisions that<br> enhance safety, trust, and efficiency.
-          </p>
-        </div>
-      </div>
-    </section>
-
-    <div class="specialisation-cards">
-      <!-- Card 1 -->
-      <div class="card">
-        <i class="fas fa-user-secret icon"></i>
-        <h3>AI-Powered Investigation</h3>
-        <p>
-          Advanced NLP and computer vision analyse verbal and non-verbal cues in real time,
-          supporting law enforcement with reliable truth detection.
-        </p>
-      </div>
-
-      <!-- Card 2 -->
-      <div class="card">
-        <i class="fas fa-bullseye icon"></i>
-        <h3>High Accuracy</h3>
-        <p>
-          Trained on diverse behavioural datasets, Py-Detect delivers strong accuracy across
-          multiple scenarios including crime, recruitment, and security.
-        </p>
-      </div>
-
-      <!-- Card 3 -->
-      <div class="card">
-        <i class="fas fa-shield-alt icon"></i>
-        <h3>Secure & Scalable</h3>
-        <p>
-          Built with data privacy in mind, Py-Detect ensures secure handling of sensitive inputs
-          while scaling for enterprise or government use.
-        </p>
-      </div>
-    </div>
-  </section>
+ <section class="specialisations">
+ <!-- Mission Section -->
+ <section id="mission" class="mission">
+ <h2 class="section-title">OUR MISSION IS SIMPLE & IMPACTFUL</h2>
+ <div class="mission-row">
+ <div class="mission-left">
+   <p>
+     Our mission is to help investigators, recruiters, and security professionals identify truth more confidently, reduce deception, and improve decision-making. We aim to support safer communities, fairer recruitment practices, and stronger organisational security.
+   </p>
+ </div>
+ <div class="mission-right">
+   <p>
+     Through advanced behavioural analysis—examining verbal responses, facial cues, and body language—the platform provides clear insight into consistency, credibility, and potential risks. This enables teams to act with accuracy, clarity, and confidence across a wide range of situations.
+   </p>
+ </div>
+ </div>
+ </section>
+
+ <div class="specialisation-cards">
+ <!-- Card1 -->
+ <div class="card">
+ <i class="fas fa-user-secret icon"></i>
+ <h3>Behavioural Investigation</h3>
+ <p>
+   Advanced NLP and computer vision techniques analyse verbal responses, facial cues, and body language in real time, helping professionals detect inconsistencies and understand behavioural patterns more accurately.
+ </p>
+ </div>
+
+ <!-- Card2 -->
+ <div class="card">
+ <i class="fas fa-bullseye icon"></i>
+ <h3>High Accuracy</h3>
+ <p>
+   Trained using diverse behavioural signals and real-world scenarios, the system delivers consistent and reliable results across investigations, recruitment workflows, screening processes, and security evaluations.
+ </p>
+ </div>
+
+ <!-- Card3 -->
+ <div class="card">
+ <i class="fas fa-shield-alt icon"></i>
+ <h3>Secure & Scalable</h3>
+ <p>
+   Designed with strong data protection standards, the system ensures safe handling of sensitive information while offering seamless scalability for enterprise and government environments.
+ </p>
+ </div>
+ </div>
+ </section>
 </div>
 
 <!-- How to Use Section -->
-<section class="how-to-use">
-  <h2 class="section-title">How to Use Py-Detect?</h2>
-  <p class="section-subtitle">
-    Py-Detect supports both <strong>Admins</strong> (e.g., Inspectors) and <strong>Users</strong> (e.g., Constables)
-    to manage cases, conduct investigations, and analyse suspects with AI.
-  </p>
-
-  <div class="use-cards">
-    <!-- Step 1 -->
-    <div class="use-card">
-      <i class="fas fa-user-tie icon"></i>
-      <h3>1. Admin Creates Case</h3>
-      <p>
-        The Admin (Inspector) logs in, enters case details, and assigns
-        the investigation to specific users.
-      </p>
-    </div>
-
-    <!-- Step 2 -->
-    <div class="use-card">
-      <i class="fas fa-user-check icon"></i>
-      <h3>2. User Views Assignment</h3>
-      <p>
-        Assigned Users (Constables) log in to see their cases,
-        review case details, and prepare for investigation.
-      </p>
-    </div>
-
-    <!-- Step 3 -->
-    <div class="use-card">
-      <i class="fas fa-video icon"></i>
-      <h3>3. Investigation Recording</h3>
-      <p>
-        During interrogation, the system generates AI-based questions.
-        Video and audio responses are recorded in real time.
-      </p>
-    </div>
-
-    <!-- Step 4 -->
-    <div class="use-card">
-      <i class="fas fa-brain icon"></i>
-      <h3>4. AI Analysis</h3>
-      <p>
-        Py-Detect analyses tone, body language, and facial expressions
-        to produce a deception score and behavioural insights.
-      </p>
-    </div>
-
-    <!-- Step 5 -->
-    <div class="use-card">
-      <i class="fas fa-file-alt icon"></i>
-      <h3>5. Report & Decision</h3>
-      <p>
-        A final AI-powered prediction report is generated,
-        helping investigators make evidence-based decisions quickly.
-      </p>
-    </div>
-  </div>
+<section id="how-to-use" class="how-to-use">
+ <h2 class="section-title">How to Use?</h2>
+ <p class="section-subtitle">
+   The system enables Admins and authorised Users to manage cases, record investigation sessions, and review behavioural findings efficiently.
+ </p>
+
+ <div class="use-cards">
+ <!-- Step1 -->
+ <div class="use-card">
+ <i class="fas fa-user-tie icon"></i>
+ <h3>1. Admin Creates Case</h3>
+ <p>
+   The Admin logs in, enters case information, uploads available documents, and assigns the case to the appropriate user.
+ </p>
+ </div>
+
+ <!-- Step2 -->
+ <div class="use-card">
+ <i class="fas fa-user-check icon"></i>
+ <h3>2. User Views Assignment</h3>
+ <p>
+   The assigned user logs in, views the case, reviews the details, and prepares for the investigation session.
+ </p>
+ </div>
+
+ <!-- Step3 -->
+ <div class="use-card">
+ <i class="fas fa-video icon"></i>
+ <h3>3. Investigation Recording</h3>
+ <p>
+   During questioning, the system presents structured, context-aware questions.
+   Verbal responses, facial cues, and body language are recorded in real time.
+ </p>
+ </div>
+
+ <!-- Step4 -->
+ <div class="use-card">
+ <i class="fas fa-brain icon"></i>
+ <h3>4. AI Analysis</h3>
+ <p>
+   The system examines speech patterns, tone, facial expressions, and body movements to highlight behavioural indicators, consistency levels, and potential concerns.
+ </p>
+ </div>
+
+ <!-- Step5 -->
+ <div class="use-card">
+ <i class="fas fa-file-alt icon"></i>
+ <h3>5. Report & Decision</h3>
+ <p>
+   A clear behavioural report is generated, helping professionals interpret the findings and make confident, evidence-supported decisions.
+ </p>
+ </div>
+ </div>
+</section>
+
+<!-- How It Works Section (moved to main page) -->
+<section id="how-it-works" class="how-it-works how-expanded">
+ <h2 class="section-title how-title">How It Works</h2>
+ <div class="how-grid">
+ <!-- Intro card -->
+ <article class="how-card how-anim fade-in-up" role="article" aria-label="Intro">
+ <h3 class="how-heading">Py-Detect – Intelligent Behaviour Analysis Platform</h3>
+ <p class="how-text">
+ Py-Detect is an advanced digital platform designed to support investigations through structured questioning and automated behavioural analysis. It studies voice, face, and body-language patterns, and produces a clear summary that helps investigators make informed decisions.
+ </p>
+ </article>
+
+ <!-- Context-Aware Questioning -->
+ <article class="how-card how-anim fade-in-up" aria-label="Context-Aware Questioning">
+ <h3 class="how-heading">1. Context-Aware Questioning</h3>
+ <p class="how-text">The system generates questions by reading the case information entered by the admin. It adapts each follow-up question based on the accused person’s previous answers to maintain relevance and continuity.</p>
+ </article>
+
+ <!-- Voice Pattern Analysis -->
+ <article class="how-card how-anim fade-in-up" aria-label="Voice Pattern Analysis">
+ <h3 class="how-heading">2. Voice Pattern Analysis</h3>
+ <ul class="how-list">
+ <li>Tone variations</li>
+ <li>Stress or pressure points</li>
+ <li>Pace and hesitation</li>
+ <li>Sudden pitch changes</li>
+ </ul>
+ <p class="how-text">These cues help identify emotional states and potential inconsistency.</p>
+ </article>
+
+ <!-- Facial and Micro-Expression Tracking -->
+ <article class="how-card how-anim fade-in-up" aria-label="Facial and Micro-Expression Tracking">
+ <h3 class="how-heading">3. Facial and Micro-Expression Tracking</h3>
+ <ul class="how-list">
+ <li>Eye shifts</li>
+ <li>Lip compression</li>
+ <li>Brow tension</li>
+ <li>Nervous micro-gestures</li>
+ </ul>
+ <p class="how-text">These signals contribute to behavioural interpretation.</p>
+ </article>
+
+ <!-- Body-Language Pattern Detection -->
+ <article class="how-card how-anim fade-in-up" aria-label="Body-Language Pattern Detection">
+ <h3 class="how-heading">4. Body-Language Pattern Detection</h3>
+ <p class="how-text">Posture, hand movements, head position, and response timing are evaluated to understand engagement, confidence, and anxiety levels.</p>
+ </article>
+
+ <!-- Combined Insight Summary -->
+ <article class="how-card how-anim fade-in-up" aria-label="Combined Insight Summary">
+ <h3 class="how-heading">5. Combined Insight Summary</h3>
+ <ul class="how-list">
+ <li>Structured summary</li>
+ <li>Behavioural indicators</li>
+ <li>Stress markers</li>
+ <li>Consistency score</li>
+ <li>Potential risk highlights</li>
+ </ul>
+ <p class="how-text">It helps investigators review the entire interview at a glance.</p>
+ </article>
+
+ <!-- Who Can Use -->
+ <article class="how-card how-anim fade-in-up" aria-label="Who Can Use">
+ <h3 class="how-heading">Who Can Use Py-Detect?</h3>
+ <ul class="how-list">
+ <li>Law Enforcement &amp; Investigation Teams</li>
+ <li>Legal Professionals</li>
+ <li>HR and Corporate Security</li>
+ <li>Private Investigation Agencies</li>
+ <li>Educational or Counselling Teams</li>
+ </ul>
+ </article>
+
+ <!-- Why Choose -->
+ <article class="how-card how-anim fade-in-up" aria-label="Why Choose">
+ <h3 class="how-heading">Why Choose Py-Detect?</h3>
+ <ul class="how-list">
+ <li>Fast and Efficient</li>
+ <li>Non-Invasive and Comfortable</li>
+ <li>Reliable and Data-Driven</li>
+ <li>Configurable for Different Scenarios</li>
+ <li>Secure and Organised</li>
+ </ul>
+ </article>
+
+ <!-- End-to-End Workflow -->
+ <article class="how-card how-anim fade-in-up" aria-label="End-to-End Workflow">
+ <h3 class="how-heading">End-to-End Workflow</h3>
+ <ol class="how-steps">
+ <li>Admin creates a case.</li>
+ <li>Investigator receives assigned cases.</li>
+ <li>Interview recorded (voice and video).</li>
+ <li>AI analyses behaviour and cues.</li>
+ <li>Final summary with indicators and scores.</li>
+ <li>Dashboards for review.</li>
+ </ol>
+ </article>
+
+ <!-- Key Features -->
+ <article class="how-card how-anim fade-in-up" aria-label="Key Features">
+ <h3 class="how-heading">Key Features</h3>
+ <ul class="how-list">
+ <li>Case Management</li>
+ <li>Automated Question Generation</li>
+ <li>Voice, Video, and Behaviour Analysis</li>
+ <li>Truth Probability Score</li>
+ <li>Investigator Panel</li>
+ <li>Admin Panel</li>
+ </ul>
+ </article>
+ </div>
 </section>
 
 <!-- Features Section -->
 <section id="features" class="features">
-  <!-- Crime Investigation -->
-  <div class="feature-row">
-    <div class="feature-text">
-      <h2>Crime Investigation</h2>
-      <p>
-        Py-Detect assists law enforcement and police by analysing suspects’ verbal responses
-        and body language during interrogations. With AI-driven facial recognition, tone analysis,
-        and micro-expression detection, investigators gain deeper behavioural insights and
-        a real-time deception score to uncover hidden truths.
-      </p>
-    </div>
-    <div class="feature-image">
-      <img src="assets/3.JPG" alt="Crime Investigation">
-    </div>
-  </div>
-
-  <!-- Recruitment Analysis -->
-  <div class="feature-row reverse">
-    <div class="feature-image">
-      <img src="assets/6.JPG" alt="Recruitment Analysis">
-    </div>
-    <div class="feature-text">
-      <h2>Recruitment Analysis</h2>
-      <p>
-        In hiring processes, Py-Detect supports recruiters by evaluating candidates’ speech clarity,
-        consistency, and emotional cues during interviews. AI-based analysis highlights honesty levels
-        and potential stress indicators, enabling smarter, bias-free hiring decisions.
-      </p>
-    </div>
-  </div>
-
-  <!-- Court Room -->
-  <div class="feature-row">
-    <div class="feature-text">
-      <h2>Court Room</h2>
-      <p>
-        Py-Detect strengthens courtroom proceedings by analysing witnesses’ verbal
-        responses, tone, and body language in real time. The system highlights potential
-        stress indicators, inconsistencies, and deception cues, providing judges and
-        legal professionals with deeper behavioural insights.
-        This ensures more reliable evaluations, supports fair trials, and reduces the
-        risks of biased or inaccurate testimony.
-      </p>
-    </div>
-    <div class="feature-image">
-      <img src="assets/4.JPG" alt="Court Room">
-    </div>
-  </div>
+ <h2 class="section-title">Industries we support</h2>
+ <!-- Crime Investigation -->
+ <div class="feature-row">
+ <div class="feature-text">
+ <h2>Crime Investigation</h2>
+ <p>
+   The system supports law enforcement by analysing suspects’ verbal responses, tone, facial cues, and body language during interrogations. By identifying stress patterns, inconsistencies, and subtle behavioural indicators, investigators gain deeper insights that assist in understanding credibility and uncovering hidden details.
+ </p>
+ </div>
+ <div class="feature-image">
+ <img src="assets/3.JPG" alt="Crime Investigation">
+ </div>
+ </div>
+
+ <!-- Recruitment Analysis -->
+ <div class="feature-row reverse">
+ <div class="feature-image">
+ <img src="assets/6.JPG" alt="Recruitment Analysis">
+ </div>
+ <div class="feature-text">
+ <h2>Recruitment Analysis</h2>
+ <p>
+   During hiring and screening processes, the system helps recruiters by evaluating candidates’ speech clarity, consistency, and emotional cues. Behavioural patterns and stress indicators are highlighted, enabling more informed, fair, and unbiased hiring decisions.
+ </p>
+ </div>
+ </div>
+
+ <!-- Court Room -->
+ <div class="feature-row">
+ <div class="feature-text">
+   <h2>Courtroom Evaluation</h2>
+ <p>
+   The system strengthens courtroom proceedings by examining witnesses’ verbal responses, tone, and body movements in real time. By highlighting stress indicators, behavioural inconsistencies, and credibility cues, it supports judges and legal professionals in making clearer, evidence-based assessments.
+ </p>
+ </div>
+ <div class="feature-image">
+ <img src="assets/4.JPG" alt="Court Room">
+ </div>
+ </div>
 </section>
 
 <!-- Footer from provided design -->
 <footer>
-  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
-  <a href="#">Contact</a> |
-  <a href="#">Privacy Policy</a> |
-  <a href="#">Terms & Conditions</a>
-  <div class="social-icons">
-    <a href="#" class="social-icon facebook" aria-label="Facebook">
-      <i class="fab fa-facebook-f"></i>
-    </a>
-    <a href="#" class="social-icon youtube" aria-label="YouTube">
-      <i class="fab fa-youtube"></i>
-    </a>
-    <a href="#" class="social-icon linkedin" aria-label="LinkedIn">
-      <i class="fab fa-linkedin-in"></i>
-    </a>
-    <a href="#" class="social-icon instagram" aria-label="Instagram">
-      <i class="fab fa-instagram"></i>
-    </a>
-  </div>
+ <p>
+ ©2025 Pykara Technologies
+ </p>
+ <a href="#">Terms</a> |
+ <a href="#">Privacy</a> |
+ <a href="#">Support</a> |
+ <a href="#">Version1.0.0</a>
+ <div class="social-icons">
+ <a href="#" class="social-icon facebook" aria-label="Facebook">
+ <i class="fab fa-facebook-f"></i>
+ </a>
+ <a href="#" class="social-icon youtube" aria-label="YouTube">
+ <i class="fab fa-youtube"></i>
+ </a>
+ <a href="#" class="social-icon linkedin" aria-label="LinkedIn">
+ <i class="fab fa-linkedin-in"></i>
+ </a>
+ <a href="#" class="social-icon instagram" aria-label="Instagram">
+ <i class="fab fa-instagram"></i>
+ </a>
+ </div>
 </footer>
 
 <!-- ===== Auth Modals (unchanged) ===== -->
 <div class="modal-backdrop" *ngIf="showSignIn || showSignUp" (click)="closeModal()"></div>
 <div class="modal" *ngIf="showSignIn || showSignUp" role="dialog" aria-modal="true">
-  <ng-container *ngIf="showSignIn">
-    <app-sign-in (switchToSignUp)="openSignUp()" (close)="closeModal()">
-    </app-sign-in>
-  </ng-container>
-  <ng-container *ngIf="showSignUp">
-    <app-sign-up (switchToSignIn)="openSignIn()" (close)="closeModal()">
-    </app-sign-up>
-  </ng-container>
+ <ng-container *ngIf="showSignIn">
+ <app-sign-in (switchToSignUp)="openSignUp()" (close)="closeModal()">
+ </app-sign-in>
+ </ng-container>
+ <ng-container *ngIf="showSignUp">
+ <app-sign-up (switchToSignIn)="openSignIn()" (close)="closeModal()">
+ </app-sign-up>
+ </ng-container>
 </div>
 
 <!-- ===== Info Dialog ===== -->
 <div class="modal-backdrop modal-backdrop--fade" *ngIf="showInfoDialog" (click)="closeInfoDialog()"></div>
 <div class="modal dialog-modal dialog-modal--zoom" *ngIf="showInfoDialog" role="dialog" aria-modal="true" aria-label="About Py-Detect">
-  <div class="dialog-content" (click)="$event.stopPropagation()">
-    <button class="dialog-close" (click)="closeInfoDialog()" aria-label="Close">×</button>
+ <div class="dialog-content" (click)="$event.stopPropagation()">
+ <button class="dialog-close" (click)="closeInfoDialog()" aria-label="Close">×</button>
 
-    <h3>How It Works</h3>
-    <p>Py-Detect asks personalized, context-aware questions and analyzes verbal, facial, and behavioral signals using AI and computer vision. It then produces a concise report with an estimated lie probability.</p>
+ <h3>How It Works</h3>
+ <p>
+ The platform asks context-aware questions and analyses verbal, facial, and behavioral cues using computer vision.
+ It then generates a clear summary with risk indicators and consistency metrics.
+ </p>
 
-    <h3>Who Can Use Py-Detect?</h3>
-    <p>Investigators, law enforcement teams, educators and school administrators, HR professionals, recruiters, and any organization that needs reliable behavioral insights.</p>
+ <h3>Who Can Use Py-Detect?</h3>
+ <p>Investigators, law enforcement teams, legal professionals, HR and security departments, educators, and any organization that needs accurate behavioral insights.</p>
 
-    <h3>Why Py-Detect?</h3>
-    <p>It is fast, non-invasive, configurable for different scenarios, and supports decisions with clear, data-driven evidence.</p>
-  </div>
+ <h3>Why Py-Detect?</h3>
+ <p>It is fast, non-invasive, configurable for different scenarios, and supports decision-making with reliable, data-driven analysis.</p>
+ </div>
 </div>
 
 

src/app/homepage/homepage.component.ts

@@ -18,6 +18,10 @@ export class HomepageComponent implements OnInit, OnDestroy {
   showSignUp = false;
   showTourOverlay = false;
 
+  // Track selected nav for persistent highlight
+  selectedNav: string = '';
+  selectedLanguage = 'en';
+
   // (Optional legacy flags kept intact if used elsewhere)
   selectedInfo: string | null = null;
   showDetails = false;
@@ -33,6 +37,12 @@ export class HomepageComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.renderer.addClass(document.body, 'homepage-bg');
+    // Apply saved language (if any)
+    const savedLang = localStorage.getItem('pydetect_lang');
+    if (savedLang) {
+      this.selectedLanguage = savedLang;
+      document.documentElement.lang = savedLang;
+    }
     // Listen for global auth-close events emitted by sign-in/sign-up components
     window.addEventListener('auth-close', this.authCloseListener as EventListener);
   }
@@ -63,7 +73,104 @@ export class HomepageComponent implements OnInit, OnDestroy {
     this.selectedInfo = (this.selectedInfo === info) ? null : info;
   }
 
+  // Easing function for nicer long scrolls
+  private easeInOutCubic(t: number): number {
+    return t <0.5 ?4 * t * t * t :1 - Math.pow(-2 * t +2,3) /2;
+  }
+
+  // Core smooth scroller with adjustable duration (very slow by default ~1800ms)
+  private smoothScrollTo(targetY: number, duration =1800): void {
+    const startY = window.scrollY || window.pageYOffset;
+    const distance = targetY - startY;
+    const startTime = performance.now();
+    const step = (now: number) => {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration,1);
+      const eased = this.easeInOutCubic(progress);
+      window.scrollTo(0, startY + distance * eased);
+      if (progress <1) requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+  }
+
+  private getYForElement(el: HTMLElement, headerOffset =80): number {
+    const rect = el.getBoundingClientRect();
+    const scrollTop = window.scrollY || window.pageYOffset;
+    return rect.top + scrollTop - headerOffset;
+  }
+
+  // Home: always scroll page to top (slow & smooth); if not on '/', navigate then scroll
   public navigateHome(): void {
-    this.router.navigate(['/']);
+    this.selectedNav = 'home';
+    const performScroll = () => this.smoothScrollTo(0,1800);
+    if (this.router.url === '/' || this.router.url === '') {
+      performScroll();
+    } else {
+      this.router.navigate(['/']).then(() => setTimeout(performScroll,0));
+    }
+  }
+
+  // Smooth scroll helpers for section links (slow & smooth)
+  public scrollToFeatures(event: Event): void {
+    event.preventDefault();
+    this.selectedNav = 'features';
+    const el = document.getElementById('features');
+    if (el) {
+      const y = this.getYForElement(el,80);
+      this.smoothScrollTo(y,1800);
+    }
+  }
+  public scrollToMission(event: Event): void {
+    event.preventDefault();
+    this.selectedNav = 'mission';
+    const el = document.getElementById('mission');
+    if (el) {
+      const y = this.getYForElement(el,80);
+      this.smoothScrollTo(y,1800);
+    }
+  }
+  public scrollToHowToUse(event: Event): void {
+    event.preventDefault();
+    this.selectedNav = 'how-to-use';
+    const el = document.getElementById('how-to-use');
+    if (el) {
+      const y = this.getYForElement(el,80);
+      this.smoothScrollTo(y,1800);
+    }
+  }
+
+  // New: dedicated smooth scroll for How It Works from About link
+  public scrollToHowItWorks(event: Event): void {
+    event.preventDefault();
+    this.selectedNav = 'how-it-works';
+    const el = document.getElementById('how-it-works');
+    if (el) {
+      const y = this.getYForElement(el,80); // account for fixed header height
+      this.smoothScrollTo(y,1800); // slow smooth scroll
+    }
+  }
+
+  // Manual marker for items that don't use dedicated handlers
+  public markSelected(key: string): void {
+    this.selectedNav = key;
+  }
+
+  // Language change with persistence
+  public onLanguageChange(lang: string): void {
+    this.selectedLanguage = lang || 'en';
+    localStorage.setItem('pydetect_lang', this.selectedLanguage);
+    document.documentElement.lang = this.selectedLanguage;
+  }
+
+  // New helper to scroll to an arbitrary section id and mark nav selection
+  public scrollToSection(ev: Event, id: string) {
+    ev.preventDefault();
+    this.markSelected(id);
+    const el = document.getElementById(id);
+    if (el) {
+      // Use offset-aware smooth scroll so header doesn't hide title
+      const y = this.getYForElement(el,80);
+      this.smoothScrollTo(y,1800);
+    }
   }
 }