src/app/homepage/homepage.component.html

<div class="homepage-root">
<!-- 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>
 <!-- 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 Behaviour and Truth Analysis</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
       </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>
     </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>
   <span class="nav-sep">|</span>
   <!-- Language dropdown placed like About -->
   <div class="dropdown lang-dropdown">
     <a class="nav-link dropdown-toggle" href="#" (click)="$event.preventDefault()">
       <i class="fas fa-globe-americas nav-icon" aria-hidden="true"></i> Language ▾
     </a>
     <div class="dropdown-menu" role="menu" aria-label="Choose language">
       <a class="dropdown-item" href="#" (click)="onLanguageChange('en-GB'); $event.preventDefault()">English (UK)</a>
       <a class="dropdown-item" href="#" (click)="onLanguageChange('en-US'); $event.preventDefault()">English (US)</a>
       <a class="dropdown-item" href="#" (click)="onLanguageChange('sv'); $event.preventDefault()">Swedish</a>
       <a class="dropdown-item" href="#" (click)="onLanguageChange('es'); $event.preventDefault()">Spanish</a>
       <a class="dropdown-item" href="#" (click)="onLanguageChange('hi'); $event.preventDefault()">Hindi</a>
     </div>
   </div>
 </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, investigators, and security professionals to identify behavioural indicators, analyse responses, reduce risk, and support decisions.
 </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 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, legal professionals, and security organisations identify behaviour more confidently, reduce decision-making risk, and improve the overall quality of investigations through structured behavioural insights.
   </p>
 </div>
 <div class="mission-right">
   <p>
     Through advanced behavioural analysis, response-pattern processing, and body-language evaluation, the system provides consistent insights into credibility, stress indicators, and potential inconsistencies.
     These insights support teams across a wide range of situations and help strengthen organisational accuracy.
   </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 verbal and visual analysis techniques examine spoken responses, facial cues, emotional signals, and body language to highlight behavioural patterns and inconsistencies more accurately.
 </p>
 </div>

 <!-- Card2 -->
 <div class="card">
 <i class="fas fa-bullseye icon"></i>
 <h3>Consistent Insights</h3>
 <p>
   Trained using diverse scenarios and real-world situations, the system delivers structured and reliable response patterns that help support investigative 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 maintaining scalability for enterprise and government environments.
 </p>
 </div>
 </div>
 </section>
</div>

<!-- How to Use Section -->
<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. Case Setup by Admin</h3>
 <p>
   The admin inputs case information, uploads relevant notes, assigns investigators, and prepares the environment.
 </p>
 </div>

 <!-- Step2 -->
 <div class="use-card">
 <i class="fas fa-user-check icon"></i>
 <h3>2. Investigator Assignment</h3>
 <p>
   The assigned user logs in, views the case, reviews the details, and prepares for the session.
 </p>
 </div>

 <!-- Step3 -->
 <div class="use-card">
 <i class="fas fa-video icon"></i>
 <h3>
   3. Interview & Recording</h3>
 <p>
   The system presents structured questions. Responses are recorded with audio and video for behaviour monitoring.
 </p>
 </div>

 <!-- Step4 -->
 <div class="use-card">
 <i class="fas fa-brain icon"></i>
 <h3>4. Behavioural Analysis</h3>
 <p>
   The system examines speech patterns, facial cues, micro-expressions, tone changes, emotional indicators, and other behavioural signals.
 </p>
 </div>

 <!-- Step5 -->
 <div class="use-card">
 <i class="fas fa-file-alt icon"></i>
 <h3>5. Insight Report & Review</h3>
 <p>
   Structured summaries highlight behavioural indicators, inconsistencies, and risk factors to support case decisions.
 </p>
 </div>
 </div>
</section>

<!-- How It Works Section (two-row tiles with blue background) -->
<section id="how-it-works" class="how-it-works">
 <h2 class="section-title how-title">How It Works?</h2>
 <div class="how-wrapper">
 <div class="how-bg"></div>
 <div class="how-tiles">
   <!--1: Context-Aware Questioning (includes intro) -->
   <div class="how-tile">
     <div class="how-illustration"><i class="fas fa-comments"></i></div>
     <h3 class="how-tile-title">Context‑Aware Questioning</h3>
     <div class="how-divider"></div>
     <p class="how-tile-text">
       The system reviews case details and presents structured, relevant questions to help reveal natural responses.
     </p>
   </div>

   <!--2: Voice Pattern Analysis -->
   <div class="how-tile">
     <div class="how-illustration"><i class="fas fa-microphone-alt"></i></div>
     <h3 class="how-tile-title">Voice Pattern Analysis</h3>
     <div class="how-divider"></div>
     <p class="how-tile-text">
       Tone variation, stress markers, hesitation patterns, and pitch changes are examined.
     </p>
   </div>

 <!--3: Facial & Micro‑Expression Tracking -->
   <div class="how-tile">
     <div class="how-illustration"><i class="fas fa-user-secret"></i></div>
     <h3 class="how-tile-title">Facial & Micro‑Expressions</h3>
     <div class="how-divider"></div>
     <p class="how-tile-text">
       Eye movement patterns, gaze behaviour, and emotional indicators such as tension or avoidance are detected.
     </p>
   </div>

 <!--4: Body‑Language Pattern Detection -->
 <div class="how-tile">
 <div class="how-illustration"><i class="fas fa-walking"></i></div>
 <h3 class="how-tile-title">Body‑Language Detection</h3>
 <div class="how-divider"></div>
 <p class="how-tile-text">
   Posture, hand movements, head shifts, and body stiffness are assessed to interpret confidence, engagement, and anxiety levels.
 </p>
 </div>

 <!--5: Combined Insight Summary -->
 <div class="how-tile">
   <div class="how-illustration"><i class="fas fa-clipboard-check"></i></div>
   <h3 class="how-tile-title">Combined Insight Summary</h3>
   <div class="how-divider"></div>
   <p class="how-tile-text">
     Key behavioural indicators and response patterns are merged to highlight areas requiring further review.
   </p>
 </div>

 <!--6: Workflow, Who, Why & Key Features (condensed) -->
 <div class="how-tile">
   <div class="how-illustration"><i class="fas fa-project-diagram"></i></div>
   <h3 class="how-tile-title">Workflow Overview</h3>
   <div class="how-divider"></div>
   <p class="how-tile-text">
     Admins create cases → Investigators conduct sessions → Behavioural indicators generated → Summary provided for review and follow-up.
   </p>
 </div>
 </div>
 </div>
</section>

<!-- Features Section -->
<section id="features" class="features">
 <h2 class="section-title">Industries we support</h2>
 <!-- Crime Investigation -->
 <div class="feature-row">
 <div class="feature-text">
   <h2>Law Enforcement Support</h2>
 <p>
   The system assists investigators by examining responses, facial cues, and body language during interviews to identify patterns, inconsistencies, or behavioural signals that support case evaluation.
 </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 Screening Support</h2>
   <p>
     Helps organisations assess communication clarity, consistency, and confidence during hiring and review processes by highlighting behavioural patterns and underlying indicators.
   </p>
 </div>
 </div>

 <!-- Court Room -->
 <div class="feature-row">
 <div class="feature-text">
   <h2>Courtroom Behaviour Assessment</h2>
   <p>
     Evaluates witness statements, emotional cues, and behavioural consistency to support legal professionals in forming evidence-based assessments.
   </p>
 </div>
 <div class="feature-image">
 <img src="assets/4.JPG" alt="Court Room">
 </div>
 </div>
</section>

<!-- Advisory notice before footer -->
<div class="platform-advisory" style="background: rgba(13,26,43,0.85); color: #e3f6ff; border-left: 4px solid #38bdf8; box-shadow: 0 2px 8px #0d9de3; padding: 12px 18px; margin: 24px auto; max-width: 920px; border-radius: 8px; text-align: center; font-size: 0.98rem;">
 This platform provides behavioural indicators to support investigations. It does not replace professional judgement, legal procedures, or official decision-making.
</div>

<!-- Footer from provided design -->
<footer>
 <p>
 ©2025 Pykara Technologies
 </p>
 <a href="#">Terms</a> |
 <a href="#">Privacy</a> |
 <a href="#">Support</a> |
 <a href="#">Version 1.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>
</div>

<!-- ===== 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>
</div>