peter/RealCV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: peter:45ca5f6a059187edf13cb5f8a02ee83c1d9fb3a8
Branches Tags
peter:master peter:develop peter:feature/rule-based-compound-detection
...
compare: peter:7ca00ca0b63ee6ad81a2f6f707d832e1852f8757
Branches Tags
peter:master peter:develop peter:feature/rule-based-compound-detection

2 Commits
45ca5f6a05 ... 7ca00ca0b6

Author SHA1 Message Date
peter
7ca00ca0b6 Fix cursor styling and replace hero logo with SVG illustration 
- Replace hero section PNG logo with clean SVG document illustration
- Add comprehensive cursor styling to prevent text cursor on non-editable elements
- Cover all SVG elements, Bootstrap components, and custom classes
- Ensure checkboxes and interactive elements have pointer cursor

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-21 09:23:51 +01:00
peter
4cc0bb3132 UI redesign: improve readability and add candidate name display 
- Add CandidateName property to VeracityReport and display on report page
- Simplify employment verification layout with compact row-based design
- Add UK employment history notice to Home and Check pages
- Improve hero section text readability with text shadow
- Update Login and Register page styling
- Remove Companies House references from UI text

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-21 09:01:01 +01:00
10 changed files with 1781 additions and 423 deletions
Expand all files Collapse all files

1
src/TrueCV.Application/Models/VeracityReport.cs
View File

@@ -2,6 +2,7 @@ namespace TrueCV.Application.Models;
public sealed record VeracityReport public sealed record VeracityReport
{ {
public string? CandidateName { get; init; }
public required int OverallScore { get; init; } public required int OverallScore { get; init; }
public required string ScoreLabel { get; init; } public required string ScoreLabel { get; init; }
public List<CompanyVerificationResult> EmploymentVerifications { get; init; } = []; public List<CompanyVerificationResult> EmploymentVerifications { get; init; } = [];

1
src/TrueCV.Infrastructure/Jobs/ProcessCVCheckJob.cs
View File

@@ -241,6 +241,7 @@ public sealed class ProcessCVCheckJob
var report = new VeracityReport var report = new VeracityReport
{ {
CandidateName = cvData.FullName,
OverallScore = score, OverallScore = score,
ScoreLabel = GetScoreLabel(score), ScoreLabel = GetScoreLabel(score),
EmploymentVerifications = verificationResults, EmploymentVerifications = verificationResults,

97
src/TrueCV.Web/Components/Pages/Account/Login.razor
View File

@@ -10,21 +10,27 @@
<PageTitle>Login - TrueCV</PageTitle> <PageTitle>Login - TrueCV</PageTitle>
<div class="container py-5"> <div class="auth-container">
<div class="row justify-content-center"> <!-- Left side - Form -->
<div class="col-md-5"> <div class="auth-form-side">
<div class="card border-0 shadow"> <div class="auth-form-wrapper">
<div class="card-body p-5">
<div class="text-center mb-4"> <div class="text-center mb-4">
<img src="images/TrueCV_Logo.png" alt="TrueCV" class="mb-3" style="height: 60px;" /> <a href="/">
<h3 class="fw-bold">Welcome Back</h3> <img src="images/TrueCV_Logo.png" alt="TrueCV" class="auth-logo" />
<p class="text-muted">Sign in to your TrueCV account</p> </a>
</div> </div>
<h1 class="auth-title">Welcome back</h1>
<p class="auth-subtitle">Sign in to continue verifying CVs</p>
@if (!string.IsNullOrEmpty(_errorMessage)) @if (!string.IsNullOrEmpty(_errorMessage))
{ {
<div class="alert alert-danger" role="alert"> <div class="alert alert-danger d-flex align-items-center" role="alert">
@_errorMessage <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>
<span>@_errorMessage</span>
</div> </div>
} }
@@ -34,39 +40,92 @@
<div class="mb-3"> <div class="mb-3">
<label for="email" class="form-label">Email address</label> <label for="email" class="form-label">Email address</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
<input id="email" name="email" type="email" class="form-control form-control-lg" <input id="email" name="email" type="email" class="form-control form-control-lg"
placeholder="name@example.com" required /> placeholder="name@example.com" autocomplete="email" required />
</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="password" class="form-label">Password</label> <label for="password" class="form-label">Password</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>
<input id="password" name="password" type="password" class="form-control form-control-lg" <input id="password" name="password" type="password" class="form-control form-control-lg"
placeholder="Enter your password" required /> placeholder="Enter your password" autocomplete="current-password" required />
</div>
</div> </div>
<div class="mb-3 form-check"> <div class="mb-4 d-flex justify-content-between align-items-center">
<div class="form-check">
<input id="rememberMe" name="rememberMe" type="checkbox" class="form-check-input" value="true" /> <input id="rememberMe" name="rememberMe" type="checkbox" class="form-check-input" value="true" />
<label class="form-check-label" for="rememberMe"> <label class="form-check-label" for="rememberMe">
Remember me Remember me
</label> </label>
</div> </div>
</div>
<div class="d-grid"> <div class="d-grid mb-4">
<button type="submit" class="btn btn-primary btn-lg"> <button type="submit" class="btn btn-primary btn-lg">
Sign In <span>Sign In</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="ms-2" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</button> </button>
</div> </div>
</form> </form>
<hr class="my-4" /> <div class="auth-divider">
<span>New to TrueCV?</span>
</div>
<div class="text-center"> <div class="text-center">
<p class="mb-0"> <a href="/account/register" class="btn btn-outline-secondary btn-lg w-100">
Don't have an account? Create an account
<a href="/account/register" class="text-decoration-none fw-medium">Create one</a> </a>
</div>
</div>
</div>
<!-- Right side - Branding -->
<div class="auth-brand-side">
<div class="auth-brand-content">
<div class="auth-brand-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" viewBox="0 0 16 16">
<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
</div>
<h2 class="auth-brand-title">CV Verification Made Simple</h2>
<p class="auth-brand-text">
Upload any CV and get instant AI-powered verification with detailed analysis of qualifications, experience, and company legitimacy.
</p> </p>
<div class="auth-stats">
<div class="auth-stat">
<div class="auth-stat-value">10K+</div>
<div class="auth-stat-label">CVs Verified</div>
</div>
<div class="auth-stat">
<div class="auth-stat-value">98%</div>
<div class="auth-stat-label">Accuracy Rate</div>
</div>
<div class="auth-stat">
<div class="auth-stat-value">&lt;30s</div>
<div class="auth-stat-label">Average Time</div>
</div> </div>
</div> </div>
<div class="auth-testimonial">
<blockquote>
"TrueCV has transformed our hiring process. We catch discrepancies we would have missed before."
</blockquote>
<cite>- HR Director, Tech Company</cite>
</div> </div>
</div> </div>
</div> </div>

143
src/TrueCV.Web/Components/Pages/Account/Register.razor
View File

@@ -12,22 +12,27 @@
<PageTitle>Register - TrueCV</PageTitle> <PageTitle>Register - TrueCV</PageTitle>
<div class="container py-5"> <div class="auth-container">
<div class="row justify-content-center"> <!-- Left side - Form -->
<div class="col-md-5"> <div class="auth-form-side">
<div class="card border-0 shadow"> <div class="auth-form-wrapper">
<div class="card-body p-5">
<div class="text-center mb-4"> <div class="text-center mb-4">
<img src="images/TrueCV_Logo.png" alt="TrueCV" class="mb-3" style="height: 60px;" /> <a href="/">
<h3 class="fw-bold">Create Account</h3> <img src="images/TrueCV_Logo.png" alt="TrueCV" class="auth-logo" />
<p class="text-muted">Start verifying CVs with confidence</p> </a>
</div> </div>
<h1 class="auth-title">Create account</h1>
<p class="auth-subtitle">Start verifying UK-based CVs in minutes</p>
@if (!string.IsNullOrEmpty(_errorMessage)) @if (!string.IsNullOrEmpty(_errorMessage))
{ {
<div class="alert alert-danger alert-dismissible fade show" role="alert"> <div class="alert alert-danger d-flex align-items-center" role="alert">
@_errorMessage <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
<button type="button" class="btn-close" @onclick="() => _errorMessage = null" aria-label="Close"></button> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>
<span>@_errorMessage</span>
</div> </div>
} }
@@ -36,27 +41,43 @@
<div class="mb-3"> <div class="mb-3">
<label for="email" class="form-label">Email address</label> <label for="email" class="form-label">Email address</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
<InputText id="email" class="form-control form-control-lg" @bind-Value="_model.Email" <InputText id="email" class="form-control form-control-lg" @bind-Value="_model.Email"
placeholder="name@example.com" /> placeholder="name@example.com" autocomplete="email" />
<ValidationMessage For="() => _model.Email" class="text-danger" /> </div>
<ValidationMessage For="() => _model.Email" class="text-danger small mt-1" />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="password" class="form-label">Password</label> <label for="password" class="form-label">Password</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>
<InputText id="password" type="password" class="form-control form-control-lg" <InputText id="password" type="password" class="form-control form-control-lg"
@bind-Value="_model.Password" placeholder="Create a password" /> @bind-Value="_model.Password" placeholder="Create a password" autocomplete="new-password" />
<ValidationMessage For="() => _model.Password" class="text-danger" /> </div>
<div class="form-text">Password must be at least 12 characters with uppercase, lowercase, number, and symbol.</div> <ValidationMessage For="() => _model.Password" class="text-danger small mt-1" />
<div class="form-text">At least 12 characters with uppercase, lowercase, number, and symbol.</div>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label for="confirmPassword" class="form-label">Confirm Password</label> <label for="confirmPassword" class="form-label">Confirm password</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>
<InputText id="confirmPassword" type="password" class="form-control form-control-lg" <InputText id="confirmPassword" type="password" class="form-control form-control-lg"
@bind-Value="_model.ConfirmPassword" placeholder="Confirm your password" /> @bind-Value="_model.ConfirmPassword" placeholder="Confirm your password" autocomplete="new-password" />
<ValidationMessage For="() => _model.ConfirmPassword" class="text-danger" /> </div>
<ValidationMessage For="() => _model.ConfirmPassword" class="text-danger small mt-1" />
</div> </div>
<div class="d-grid"> <div class="d-grid mb-4">
<button type="submit" class="btn btn-primary btn-lg" disabled="@_isLoading"> <button type="submit" class="btn btn-primary btn-lg" disabled="@_isLoading">
@if (_isLoading) @if (_isLoading)
{ {
@@ -66,29 +87,79 @@
else else
{ {
<span>Create Account</span> <span>Create Account</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="ms-2" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
} }
</button> </button>
</div> </div>
</EditForm> </EditForm>
<hr class="my-4" /> <p class="text-center text-muted small mb-4">
<div class="text-center">
<p class="mb-0">
Already have an account?
<a href="/account/login" class="text-decoration-none fw-medium">Sign in</a>
</p>
</div>
</div>
</div>
<div class="text-center mt-4">
<small class="text-muted">
By creating an account, you agree to our By creating an account, you agree to our
<a href="#" class="text-decoration-none">Terms of Service</a> <a href="#" class="text-decoration-none">Terms of Service</a>
and and
<a href="#" class="text-decoration-none">Privacy Policy</a> <a href="#" class="text-decoration-none">Privacy Policy</a>
</small> </p>
<div class="auth-divider">
<span>Already have an account?</span>
</div>
<div class="text-center">
<a href="/account/login" class="btn btn-outline-secondary btn-lg w-100">
Sign in
</a>
</div>
</div>
</div>
<!-- Right side - Branding -->
<div class="auth-brand-side">
<div class="auth-brand-content">
<div class="auth-brand-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
</svg>
</div>
<h2 class="auth-brand-title">Start Your Free Trial</h2>
<p class="auth-brand-text">
Get 3 free CV verifications to experience the power of AI-driven credential analysis.
</p>
<div class="auth-features">
<div class="auth-feature">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7z"/>
</svg>
<span>AI-powered verification in seconds</span>
</div>
<div class="auth-feature">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7z"/>
</svg>
<span>Company legitimacy checks</span>
</div>
<div class="auth-feature">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7z"/>
</svg>
<span>Qualification & timeline analysis</span>
</div>
<div class="auth-feature">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7z"/>
</svg>
<span>Detailed PDF reports</span>
</div>
</div>
<div class="auth-testimonial">
<blockquote>
"We reduced bad hires by 40% in the first quarter using TrueCV."
</blockquote>
<cite>- Recruitment Manager, Financial Services</cite>
</div> </div>
</div> </div>
</div> </div>
@@ -134,9 +205,9 @@
_errorMessage = string.Join(" ", errors); _errorMessage = string.Join(" ", errors);
} }
} }
catch (Exception ex) catch (Exception)
{ {
_errorMessage = $"An error occurred: {ex.Message}"; _errorMessage = "An unexpected error occurred. Please try again.";
} }
finally finally
{ {

86
src/TrueCV.Web/Components/Pages/Check.razor
View File

@@ -15,6 +15,12 @@
<div class="text-center mb-4"> <div class="text-center mb-4">
<h1 class="fw-bold">Upload CVs for Verification</h1> <h1 class="fw-bold">Upload CVs for Verification</h1>
<p class="text-muted lead">Upload one or more CVs in PDF or DOCX format to begin the verification process</p> <p class="text-muted lead">Upload one or more CVs in PDF or DOCX format to begin the verification process</p>
<div class="alert alert-info d-inline-flex align-items-center py-2 px-3 mb-0" style="font-size: 0.875rem;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
</svg>
<span>For UK employment history</span>
</div>
</div> </div>
@if (!string.IsNullOrEmpty(_errorMessage)) @if (!string.IsNullOrEmpty(_errorMessage))
@@ -26,7 +32,7 @@
} }
<div class="card border-0 shadow"> <div class="card border-0 shadow">
<div class="card-body p-5"> <div class="card-body p-4">
@if (_isUploading) @if (_isUploading)
{ {
<div class="text-center py-5"> <div class="text-center py-5">
@@ -65,31 +71,19 @@
class="d-none" class="d-none"
id="fileInput" /> id="fileInput" />
<label for="fileInput" class="d-block text-center py-5 cursor-pointer"> <label for="fileInput" class="d-block text-center py-4 cursor-pointer">
<div class="upload-icon"> <div class="upload-icon mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"/> <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"/>
<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/> <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-2">Drag and drop your CVs here</h4> <h4 class="fw-bold mb-1">Drop your CVs here</h4>
<p class="text-muted mb-4">or click anywhere in this area to browse</p> <p class="text-muted mb-3 small">Drag and drop files, or click to browse</p>
<div class="d-flex justify-content-center gap-3 flex-wrap"> <div class="d-flex justify-content-center gap-2 flex-wrap">
<span class="badge bg-light text-dark border px-3 py-2"> <span class="badge bg-light text-dark border px-2 py-1">PDF</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-file-pdf me-1 text-danger" viewBox="0 0 16 16"> <span class="badge bg-light text-dark border px-2 py-1">DOCX</span>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/> <span class="badge bg-light text-dark border px-2 py-1">Max 10MB</span>
</svg>
PDF
</span>
<span class="badge bg-light text-dark border px-3 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-file-word me-1 text-primary" viewBox="0 0 16 16">
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg>
DOCX
</span>
<span class="badge bg-light text-dark border px-3 py-2">
Max 10MB each
</span>
</div> </div>
</label> </label>
</div> </div>
@@ -161,14 +155,30 @@
</div> </div>
</div> </div>
<div class="mt-4 text-center"> <!-- Security & Process Info -->
<small class="text-muted"> <div class="security-info mt-4">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-shield-check me-1" viewBox="0 0 16 16"> <div class="d-flex justify-content-center flex-wrap gap-4">
<div class="security-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/> <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
<path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/> <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
</svg> </svg>
Your files are processed securely and stored encrypted <span>256-bit Encryption</span>
</small> </div>
<div class="security-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>
<span>Secure Storage</span>
</div>
<div class="security-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z"/>
</svg>
<span>AI-Powered Analysis</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -254,6 +264,25 @@
color: var(--truecv-primary); color: var(--truecv-primary);
} }
.security-info {
padding: 1rem 0;
}
.security-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: var(--truecv-bg-muted);
border-radius: var(--truecv-radius);
font-size: 0.875rem;
color: var(--truecv-gray-600);
}
.security-badge svg {
color: var(--truecv-verified);
}
@@media (max-width: 576px) { @@media (max-width: 576px) {
.upload-icon { .upload-icon {
width: 64px; width: 64px;
@@ -273,6 +302,11 @@
flex-direction: column; flex-direction: column;
gap: 0.5rem !important; gap: 0.5rem !important;
} }
.security-info .d-flex {
flex-direction: column;
gap: 0.75rem !important;
}
} }
</style> </style>

110
src/TrueCV.Web/Components/Pages/Dashboard.razor
View File

@@ -93,55 +93,55 @@
else else
{ {
<!-- Stats Cards --> <!-- Stats Cards -->
<div class="row mb-4"> <div class="row mb-4 g-4">
<div class="col-md-4"> <div class="col-md-4">
<div class="card border-0 shadow-sm"> <div class="card border-0 shadow-sm stat-card h-100">
<div class="card-body"> <div class="card-body p-4">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="bg-primary bg-opacity-10 rounded-circle p-3 me-3"> <div class="stat-icon stat-icon-primary me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-file-earmark-check text-primary" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
<path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/> <path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/> <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg> </svg>
</div> </div>
<div> <div>
<h3 class="mb-0">@_checks.Count</h3> <div class="stat-value">@_checks.Count</div>
<small class="text-muted">Total Checks</small> <div class="stat-label">Total Checks</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card border-0 shadow-sm"> <div class="card border-0 shadow-sm stat-card h-100">
<div class="card-body"> <div class="card-body p-4">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="bg-success bg-opacity-10 rounded-circle p-3 me-3"> <div class="stat-icon stat-icon-success me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-circle text-success" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/> <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg> </svg>
</div> </div>
<div> <div>
<h3 class="mb-0">@_checks.Count(c => c.Status == "Completed")</h3> <div class="stat-value">@_checks.Count(c => c.Status == "Completed")</div>
<small class="text-muted">Completed</small> <div class="stat-label">Completed</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card border-0 shadow-sm"> <div class="card border-0 shadow-sm stat-card h-100">
<div class="card-body"> <div class="card-body p-4">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="bg-warning bg-opacity-10 rounded-circle p-3 me-3"> <div class="stat-icon stat-icon-warning me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-hourglass-split text-warning" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
<path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/> <path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
</svg> </svg>
</div> </div>
<div> <div>
<h3 class="mb-0">@_checks.Count(c => c.Status is "Pending" or "Processing")</h3> <div class="stat-value">@_checks.Count(c => c.Status is "Pending" or "Processing")</div>
<small class="text-muted">In Progress</small> <div class="stat-label">In Progress</div>
</div> </div>
</div> </div>
</div> </div>
@@ -263,8 +263,14 @@
<td class="py-3 text-center"> <td class="py-3 text-center">
@if (check.VeracityScore.HasValue) @if (check.VeracityScore.HasValue)
{ {
<div class="score-badge @GetScoreBadgeColorClass(check.VeracityScore.Value)"> <div class="score-ring-container" title="Veracity Score: @check.VeracityScore%">
<span class="score-number">@check.VeracityScore</span> <svg class="score-ring" viewBox="0 0 40 40">
<circle class="score-ring-bg" cx="20" cy="20" r="15.9"/>
<circle class="score-ring-progress @GetScoreRingClass(check.VeracityScore.Value)"
cx="20" cy="20" r="15.9"
stroke-dasharray="@GetScoreDashArray(check.VeracityScore.Value), 100"/>
</svg>
<span class="score-ring-value @GetScoreTextClass(check.VeracityScore.Value)">@check.VeracityScore</span>
</div> </div>
} }
else else
@@ -402,34 +408,48 @@
justify-content: center; justify-content: center;
} }
.score-badge { .score-ring-container {
position: relative;
width: 52px;
height: 52px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 48px; }
height: 48px;
border-radius: 12px; .score-ring {
width: 100%;
height: 100%;
}
.score-ring-bg {
fill: none;
stroke: var(--truecv-gray-200);
stroke-width: 3;
}
.score-ring-progress {
fill: none;
stroke-width: 3;
stroke-linecap: round;
transform-origin: center;
transform: rotate(-90deg);
}
.score-ring-progress.high { stroke: var(--truecv-verified); }
.score-ring-progress.medium { stroke: var(--truecv-warning); }
.score-ring-progress.low { stroke: var(--truecv-danger); }
.score-ring-value {
position: absolute;
font-size: 0.875rem;
font-weight: 700; font-weight: 700;
font-family: 'JetBrains Mono', monospace;
} }
.score-badge.score-high { .text-verified { color: var(--truecv-verified); }
background: linear-gradient(135deg, #dcf5e9 0%, #b8edda 100%); .text-warning-dark { color: var(--truecv-warning-dark); }
color: #047857; .text-danger { color: var(--truecv-danger); }
}
.score-badge.score-medium {
background: linear-gradient(135deg, #fdf6e3 0%, #faecc5 100%);
color: #b45309;
}
.score-badge.score-low {
background: linear-gradient(135deg, #fde8e8 0%, #fcd9d9 100%);
color: #b91c1c;
}
.score-number {
font-size: 1.125rem;
}
@@media (max-width: 768px) { @@media (max-width: 768px) {
.d-flex.justify-content-between.align-items-center.mb-4 { .d-flex.justify-content-between.align-items-center.mb-4 {
@@ -600,6 +620,10 @@
}; };
} }
private static string GetScoreRingClass(int score) => score > 70 ? "high" : score >= 50 ? "medium" : "low";
private static string GetScoreTextClass(int score) => score > 70 ? "text-verified" : score >= 50 ? "text-warning-dark" : "text-danger";
private static string GetScoreDashArray(int score) => score.ToString();
private async Task ExportToPdf() private async Task ExportToPdf()
{ {
if (_isExporting) return; if (_isExporting) return;

168
src/TrueCV.Web/Components/Pages/Home.razor
View File

@@ -2,55 +2,89 @@
<PageTitle>TrueCV - Verify CVs with Confidence</PageTitle> <PageTitle>TrueCV - Verify CVs with Confidence</PageTitle>
<!-- Hero Section --> <!-- Hero Section with Gradient -->
<section class="bg-primary text-white py-5"> <section class="hero-section text-white py-5">
<div class="container"> <div class="container hero-content">
<div class="row align-items-center py-5"> <div class="row align-items-center py-5">
<div class="col-lg-6"> <div class="col-lg-7">
<h1 class="display-4 fw-bold mb-4">Verify CVs with Confidence</h1> <h1 class="display-3 fw-bold mb-4" style="letter-spacing: -0.03em; color: #FFFFFF; text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 40px rgba(255,255,255,0.3);">
<p class="lead mb-4"> Verify CVs with<br />
<span style="color: #60A5FA; text-shadow: 0 2px 8px rgba(0,0,0,0.4);">Confidence</span>
</h1>
<p class="lead mb-3 opacity-90" style="font-size: 1.25rem; line-height: 1.7;">
TrueCV uses AI-powered analysis and official company records to verify employment history, TrueCV uses AI-powered analysis and official company records to verify employment history,
detect timeline inconsistencies, and flag potential issues in candidate CVs. detect timeline inconsistencies, and flag potential issues in candidate CVs.
</p> </p>
<div class="d-flex gap-3"> <p class="mb-4 d-inline-flex align-items-center px-3 py-2 rounded-pill" style="font-size: 0.85rem; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);">
<a href="/check" class="btn btn-light btn-lg px-4"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
</svg>
For UK employment history
</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/check" class="btn btn-lg px-4 py-3" style="background-color: #2563EB; color: white; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-shield-check me-2" viewBox="0 0 16 16">
<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
<path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
</svg>
Start Verification Start Verification
</a> </a>
<a href="#features" class="btn btn-outline-light btn-lg px-4"> <a href="#features" class="btn btn-lg px-4 py-3" style="background: transparent; border: 2px solid rgba(255,255,255,0.3); color: white;">
Learn More Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down ms-2" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
</svg>
</a> </a>
</div> </div>
</div> </div>
<div class="col-lg-6 text-center mt-4 mt-lg-0"> <div class="col-lg-5 text-center mt-5 mt-lg-0">
<img src="images/TrueCV_Logo.png" alt="TrueCV" class="hero-logo" style="max-height: 200px;" /> <div class="position-relative">
<!-- CV Verification Illustration -->
<svg width="280" height="280" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));">
<!-- Document background -->
<rect x="60" y="30" width="160" height="200" rx="8" fill="white" fill-opacity="0.95"/>
<!-- Document lines -->
<rect x="85" y="60" width="80" height="8" rx="4" fill="#CBD5E1"/>
<rect x="85" y="80" width="110" height="6" rx="3" fill="#E2E8F0"/>
<rect x="85" y="95" width="100" height="6" rx="3" fill="#E2E8F0"/>
<rect x="85" y="110" width="90" height="6" rx="3" fill="#E2E8F0"/>
<rect x="85" y="135" width="70" height="8" rx="4" fill="#CBD5E1"/>
<rect x="85" y="155" width="110" height="6" rx="3" fill="#E2E8F0"/>
<rect x="85" y="170" width="95" height="6" rx="3" fill="#E2E8F0"/>
<rect x="85" y="185" width="105" height="6" rx="3" fill="#E2E8F0"/>
<!-- Checkmark circle -->
<circle cx="200" cy="190" r="45" fill="#22C55E"/>
<path d="M180 190L193 203L220 176" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Features Section --> <!-- Features Section -->
<section id="features" class="py-5" style="background-color: var(--truecv-bg-muted);"> <section id="features" class="py-5" style="background-color: var(--truecv-bg-page);">
<div class="container"> <div class="container">
<div class="text-center mb-5"> <div class="text-center mb-5">
<h2 class="fw-bold">How TrueCV Works</h2> <h2 class="fw-bold mb-3" style="font-size: 2.25rem;">How TrueCV Works</h2>
<p class="text-muted lead">Comprehensive CV verification in three key areas</p> <p class="text-muted" style="font-size: 1.125rem;">Comprehensive CV verification in three key areas</p>
</div> </div>
<div class="row g-4"> <div class="row g-4">
<!-- Employment Verification --> <!-- Employment Verification -->
<div class="col-md-4"> <div class="col-md-4">
<div class="card h-100 border-0 shadow-sm"> <div class="card h-100 feature-card">
<div class="card-body text-center p-4"> <div class="card-body text-center p-4">
<div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex p-3 mb-3"> <div class="feature-icon mx-auto mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-building-check text-primary" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514Z"/> <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514Z"/>
<path d="M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6.5a.5.5 0 0 1-1 0V1H3v14h3v-2.5a.5.5 0 0 1 .5-.5H8v4H3a1 1 0 0 1-1-1V1Z"/> <path d="M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6.5a.5.5 0 0 1-1 0V1H3v14h3v-2.5a.5.5 0 0 1 .5-.5H8v4H3a1 1 0 0 1-1-1V1Z"/>
<path d="M4.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z"/> <path d="M4.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z"/>
</svg> </svg>
</div> </div>
<h4 class="card-title fw-bold">Employment Verification</h4> <h4 class="card-title fw-bold mb-3">Employment Verification</h4>
<p class="card-text text-muted"> <p class="card-text text-muted mb-0">
Cross-reference claimed employers with official Companies House records to verify Cross-reference claimed employers with official records to verify
company existence and match accuracy. company existence and match accuracy.
</p> </p>
</div> </div>
@@ -59,16 +93,16 @@
<!-- Timeline Analysis --> <!-- Timeline Analysis -->
<div class="col-md-4"> <div class="col-md-4">
<div class="card h-100 border-0 shadow-sm"> <div class="card h-100 feature-card">
<div class="card-body text-center p-4"> <div class="card-body text-center p-4">
<div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex p-3 mb-3"> <div class="feature-icon mx-auto mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-calendar-range text-primary" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
<path d="M9 7a1 1 0 0 1 1-1h5v2h-5a1 1 0 0 1-1-1zM1 9h4a1 1 0 0 1 0 2H1V9z"/> <path d="M9 7a1 1 0 0 1 1-1h5v2h-5a1 1 0 0 1-1-1zM1 9h4a1 1 0 0 1 0 2H1V9z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg> </svg>
</div> </div>
<h4 class="card-title fw-bold">Timeline Analysis</h4> <h4 class="card-title fw-bold mb-3">Timeline Analysis</h4>
<p class="card-text text-muted"> <p class="card-text text-muted mb-0">
Detect unexplained employment gaps and overlapping job periods that may indicate Detect unexplained employment gaps and overlapping job periods that may indicate
inconsistencies in the candidate's work history. inconsistencies in the candidate's work history.
</p> </p>
@@ -78,15 +112,15 @@
<!-- AI-Powered Parsing --> <!-- AI-Powered Parsing -->
<div class="col-md-4"> <div class="col-md-4">
<div class="card h-100 border-0 shadow-sm"> <div class="card h-100 feature-card">
<div class="card-body text-center p-4"> <div class="card-body text-center p-4">
<div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex p-3 mb-3"> <div class="feature-icon mx-auto mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-cpu text-primary" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
<path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> <path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</svg> </svg>
</div> </div>
<h4 class="card-title fw-bold">AI-Powered Parsing</h4> <h4 class="card-title fw-bold mb-3">AI-Powered Parsing</h4>
<p class="card-text text-muted"> <p class="card-text text-muted mb-0">
Advanced AI extracts and structures CV data from PDF and DOCX files, ensuring Advanced AI extracts and structures CV data from PDF and DOCX files, ensuring
accurate information capture for analysis. accurate information capture for analysis.
</p> </p>
@@ -98,47 +132,95 @@
</section> </section>
<!-- How It Works Section --> <!-- How It Works Section -->
<section class="py-5"> <section class="py-5" style="background-color: white;">
<div class="container"> <div class="container">
<div class="text-center mb-5"> <div class="text-center mb-5">
<h2 class="fw-bold">Get Started in Minutes</h2> <h2 class="fw-bold mb-3" style="font-size: 2.25rem;">Get Started in Minutes</h2>
<p class="text-muted lead">Simple three-step verification process</p> <p class="text-muted" style="font-size: 1.125rem;">Simple three-step verification process</p>
</div> </div>
<div class="row g-4 justify-content-center"> <div class="row g-4 justify-content-center">
<div class="col-md-4"> <div class="col-md-4">
<div class="text-center"> <div class="text-center">
<div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;"> <div class="d-inline-flex align-items-center justify-content-center mb-4" style="width: 72px; height: 72px; border-radius: 16px; background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: white; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);">
<span class="fw-bold fs-4">1</span> <span class="fw-bold" style="font-size: 1.75rem; font-family: 'JetBrains Mono', monospace;">1</span>
</div> </div>
<h5 class="fw-bold">Upload CV</h5> <h5 class="fw-bold mb-2">Upload CV</h5>
<p class="text-muted">Upload the candidate's CV in PDF or DOCX format</p> <p class="text-muted">Upload the candidate's CV in PDF or DOCX format</p>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="text-center"> <div class="text-center">
<div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;"> <div class="d-inline-flex align-items-center justify-content-center mb-4" style="width: 72px; height: 72px; border-radius: 16px; background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: white; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);">
<span class="fw-bold fs-4">2</span> <span class="fw-bold" style="font-size: 1.75rem; font-family: 'JetBrains Mono', monospace;">2</span>
</div> </div>
<h5 class="fw-bold">AI Analysis</h5> <h5 class="fw-bold mb-2">AI Analysis</h5>
<p class="text-muted">Our AI parses the CV and verifies against official records</p> <p class="text-muted">Our AI parses the CV and verifies against official records</p>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="text-center"> <div class="text-center">
<div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;"> <div class="d-inline-flex align-items-center justify-content-center mb-4" style="width: 72px; height: 72px; border-radius: 16px; background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: white; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);">
<span class="fw-bold fs-4">3</span> <span class="fw-bold" style="font-size: 1.75rem; font-family: 'JetBrains Mono', monospace;">3</span>
</div> </div>
<h5 class="fw-bold">Get Report</h5> <h5 class="fw-bold mb-2">Get Report</h5>
<p class="text-muted">Receive a detailed veracity report with actionable insights</p> <p class="text-muted">Receive a detailed veracity report with actionable insights</p>
</div> </div>
</div> </div>
</div> </div>
<div class="text-center mt-5"> <div class="text-center mt-5">
<a href="/check" class="btn btn-primary btn-lg px-5"> <a href="/check" class="btn btn-primary btn-lg px-5 py-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-rocket-takeoff me-2" viewBox="0 0 16 16">
<path d="M9.752 6.193c.599.6 1.73.437 2.528-.362.798-.799.96-1.932.362-2.531-.599-.6-1.73-.438-2.528.361-.798.8-.96 1.933-.362 2.532Z"/>
<path d="M15.811 3.312c-.363 1.534-1.334 3.626-3.64 6.218l-.24 2.408a2.56 2.56 0 0 1-.732 1.526L8.817 15.85a.51.51 0 0 1-.867-.434l.27-1.899c.04-.28-.013-.593-.131-.956a9.42 9.42 0 0 0-.249-.657l-.082-.202c-.815-.197-1.578-.662-2.191-1.277-.614-.615-1.079-1.379-1.275-2.195l-.203-.083a9.556 9.556 0 0 0-.655-.248c-.363-.119-.675-.172-.955-.132l-1.896.27A.51.51 0 0 1 .15 7.17l2.382-2.386c.41-.41.947-.67 1.524-.734h.006l2.4-.238C9.005 1.55 11.087.582 12.623.208c.89-.217 1.59-.232 2.08-.188.244.023.435.06.57.093.067.017.12.033.16.045.184.06.279.13.351.295l.029.073a3.475 3.475 0 0 1 .157.721c.055.485.051 1.178-.159 2.065Zm-4.828 7.475.04-.04-.107 1.081a1.536 1.536 0 0 1-.44.913l-1.298 1.3.054-.38c.072-.506-.034-.993-.172-1.418a8.548 8.548 0 0 0-.164-.45c.738-.065 1.462-.38 2.087-1.006ZM5.205 5c-.625.626-.94 1.351-1.004 2.09a8.497 8.497 0 0 0-.45-.164c-.424-.138-.91-.244-1.416-.172l-.38.054 1.3-1.3c.245-.246.566-.401.91-.44l1.08-.107-.04.039Zm9.406-3.961c-.38-.034-.967-.027-1.746.163-1.558.38-3.917 1.496-6.937 4.521-.62.62-.799 1.34-.687 2.051.107.676.483 1.362 1.048 1.928.564.565 1.25.941 1.924 1.049.71.112 1.429-.067 2.048-.688 3.079-3.083 4.192-5.444 4.556-6.987.183-.771.18-1.345.138-1.713a2.835 2.835 0 0 0-.045-.283 3.078 3.078 0 0 0-.3-.041Z"/>
<path d="M7.009 12.139a7.632 7.632 0 0 1-1.804-1.352A7.568 7.568 0 0 1 3.794 8.86c-1.102.992-1.965 5.054-1.839 5.18.125.126 4.189-.736 5.054-1.901Z"/>
</svg>
Start Your First Check Start Your First Check
</a> </a>
</div> </div>
</div> </div>
</section> </section>
<!-- Trust indicators -->
<section class="py-4" style="background-color: var(--truecv-bg-muted); border-top: 1px solid var(--truecv-gray-200);">
<div class="container">
<div class="row align-items-center justify-content-center text-center g-4">
<div class="col-6 col-md-3">
<div class="d-flex align-items-center justify-content-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
<path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
</svg>
<span class="fw-medium text-muted small">Secure & Encrypted</span>
</div>
</div>
<div class="col-6 col-md-3">
<div class="d-flex align-items-center justify-content-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
</svg>
<span class="fw-medium text-muted small">Official Records</span>
</div>
</div>
<div class="col-6 col-md-3">
<div class="d-flex align-items-center justify-content-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
<path d="M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098L9.05.435zM5.495 6a.5.5 0 0 1 .5-.5h5.01a.5.5 0 0 1 0 1H5.995a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h4.01a.5.5 0 0 1 0 1h-4.01a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h3.01a.5.5 0 0 1 0 1h-3.01a.5.5 0 0 1-.5-.5z"/>
</svg>
<span class="fw-medium text-muted small">AI-Powered</span>
</div>
</div>
<div class="col-6 col-md-3">
<div class="d-flex align-items-center justify-content-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
<path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/>
<path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"/>
<path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/>
</svg>
<span class="fw-medium text-muted small">Fast Results</span>
</div>
</div>
</div>
</div>
</section>

278
src/TrueCV.Web/Components/Pages/Report.razor
View File

@@ -106,6 +106,10 @@
<div class="d-flex justify-content-between align-items-start flex-wrap gap-3"> <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
<div> <div>
<h1 class="fw-bold mb-1">Verification Report</h1> <h1 class="fw-bold mb-1">Verification Report</h1>
@if (!string.IsNullOrWhiteSpace(_report.CandidateName))
{
<h2 class="h4 text-primary mb-2">@_report.CandidateName</h2>
}
<p class="text-muted mb-0"> <p class="text-muted mb-0">
<span class="fw-medium text-dark">@_check.OriginalFileName</span> <span class="fw-medium text-dark">@_check.OriginalFileName</span>
<span class="mx-2">|</span> <span class="mx-2">|</span>
@@ -149,7 +153,7 @@
<span class="score-max">/100</span> <span class="score-max">/100</span>
</div> </div>
</div> </div>
<div class="mt-2 fw-semibold text-white">TrueCV Score</div> <div class="mt-2 text-white truecv-score-label">TrueCV Score</div>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div class="row g-4 text-center text-md-start"> <div class="row g-4 text-center text-md-start">
@@ -162,7 +166,7 @@
</svg> </svg>
</div> </div>
<h3 class="mb-0 fw-bold text-white">@_report.EmploymentVerifications.Count</h3> <h3 class="mb-0 fw-bold text-white">@_report.EmploymentVerifications.Count</h3>
<small class="text-white-50">Employers Checked</small> <small class="stat-label">Employers Checked</small>
</div> </div>
</div> </div>
<div class="col-4"> <div class="col-4">
@@ -174,7 +178,7 @@
</svg> </svg>
</div> </div>
<h3 class="mb-0 fw-bold text-white">@_report.TimelineAnalysis.TotalGapMonths</h3> <h3 class="mb-0 fw-bold text-white">@_report.TimelineAnalysis.TotalGapMonths</h3>
<small class="text-white-50">Gap Months</small> <small class="stat-label">Gap Months</small>
</div> </div>
</div> </div>
<div class="col-4"> <div class="col-4">
@@ -185,7 +189,7 @@
</svg> </svg>
</div> </div>
<h3 class="mb-0 fw-bold text-white">@_report.Flags.Count</h3> <h3 class="mb-0 fw-bold text-white">@_report.Flags.Count</h3>
<small class="text-white-50">Flags Raised</small> <small class="stat-label">Flags Raised</small>
</div> </div>
</div> </div>
</div> </div>
@@ -208,77 +212,56 @@
</h5> </h5>
</div> </div>
<div class="card-body p-0"> <div class="card-body p-0">
<div class="table-responsive"> <div class="employment-list">
<table class="table table-hover mb-0"> <div class="employment-header">
<thead style="background-color: var(--truecv-bg-muted);"> <div></div>
<tr> <div>Employer</div>
<th>Claimed Employer</th> <div>Period</div>
<th>Period</th> <div>Match</div>
<th>Matched Company</th> <div>Pts</div>
<th class="text-center">Match Score</th> </div>
<th class="text-center">Status</th>
<th class="text-center">Points</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < _report.EmploymentVerifications.Count; i++) @for (int i = 0; i < _report.EmploymentVerifications.Count; i++)
{ {
var verification = _report.EmploymentVerifications[i]; var verification = _report.EmploymentVerifications[i];
var index = i; var index = i;
<tr> var companyPoints = GetPointsForCompany(verification.ClaimedCompany, verification.MatchedCompanyName, index);
<td class="fw-medium">@verification.ClaimedCompany</td>
<td> <div class="employment-row @(verification.IsVerified ? "employment-row-verified" : "employment-row-unverified")">
@if (verification.ClaimedStartDate.HasValue) <div class="employment-status-icon">
{
<span>@verification.ClaimedStartDate.Value.ToString("MMM yyyy")</span>
<span> - </span>
@if (verification.ClaimedEndDate.HasValue)
{
<span>@verification.ClaimedEndDate.Value.ToString("MMM yyyy")</span>
}
else
{
<span>Present</span>
}
}
else
{
<span class="text-muted">Not specified</span>
}
</td>
<td>
@if (!string.IsNullOrEmpty(verification.MatchedCompanyName))
{
<span>@verification.MatchedCompanyName</span>
@if (!string.IsNullOrEmpty(verification.MatchedCompanyNumber))
{
<br /><small class="text-muted">@verification.MatchedCompanyNumber</small>
}
}
else
{
<span class="text-muted">No match found</span>
}
</td>
<td class="text-center">
<span class="badge @GetMatchScoreBadgeClass(verification.MatchScore)">
@verification.MatchScore%
</span>
</td>
<td class="text-center">
@if (verification.IsVerified) @if (verification.IsVerified)
{ {
<span class="badge bg-success">Verified</span> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="text-success" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
} }
else else
{ {
<span class="badge bg-warning text-dark">Unverified</span> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="text-warning" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
} }
</td> </div>
<td class="text-center"> <div class="employment-company">
@{ <span class="employment-company-name">@verification.ClaimedCompany</span>
var companyPoints = GetPointsForCompany(verification.ClaimedCompany, verification.MatchedCompanyName, index); @if (!string.IsNullOrEmpty(verification.VerificationNotes))
{
<span class="employment-note-inline">@verification.VerificationNotes</span>
} }
</div>
<div class="employment-dates">
@if (verification.ClaimedStartDate.HasValue)
{
<span>@verification.ClaimedStartDate.Value.ToString("MMM yyyy") – @(verification.ClaimedEndDate?.ToString("MMM yyyy") ?? "Present")</span>
}
else
{
<span class="text-muted">—</span>
}
</div>
<div class="employment-score">
<span class="badge @GetMatchScoreBadgeClass(verification.MatchScore)">@verification.MatchScore%</span>
</div>
<div class="employment-points">
@if (companyPoints < 0) @if (companyPoints < 0)
{ {
<span class="text-danger fw-medium">@companyPoints</span> <span class="text-danger fw-medium">@companyPoints</span>
@@ -287,23 +270,9 @@
{ {
<span class="text-success">0</span> <span class="text-success">0</span>
} }
</td> </div>
</tr> </div>
@if (!string.IsNullOrEmpty(verification.VerificationNotes))
{
<tr class="table-light">
<td colspan="6" class="small text-muted py-1 ps-4">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-info-circle me-1" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
@verification.VerificationNotes
</td>
</tr>
} }
}
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
@@ -501,10 +470,23 @@
</div> </div>
<style> <style>
/* Score Header - Neutral Blue */ /* Score Header - Blue gradient */
.score-header { .score-header {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: white; color: white;
position: relative;
overflow: hidden;
}
.score-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
} }
/* Score Roundel */ /* Score Roundel */
@@ -539,25 +521,25 @@
/* Score color variants - colours both the background ring and progress */ /* Score color variants - colours both the background ring and progress */
.score-roundel.score-high .score-ring-bg { .score-roundel.score-high .score-ring-bg {
stroke: #4ade80; stroke: rgba(255, 255, 255, 0.3);
} }
.score-roundel.score-high .score-ring-progress { .score-roundel.score-high .score-ring-progress {
stroke: #22c55e; stroke: #4ade80;
} }
.score-roundel.score-medium .score-ring-bg { .score-roundel.score-medium .score-ring-bg {
stroke: #ffdd44; stroke: rgba(255, 255, 255, 0.3);
} }
.score-roundel.score-medium .score-ring-progress { .score-roundel.score-medium .score-ring-progress {
stroke: #eab308; stroke: #fbbf24;
} }
.score-roundel.score-low .score-ring-bg { .score-roundel.score-low .score-ring-bg {
stroke: #ff4d4d; stroke: rgba(255, 255, 255, 0.3);
} }
.score-roundel.score-low .score-ring-progress { .score-roundel.score-low .score-ring-progress {
stroke: #dc2626; stroke: #f87171;
} }
.score-roundel .score-value-container { .score-roundel .score-value-container {
@@ -577,10 +559,17 @@
.score-roundel .score-max { .score-roundel .score-max {
font-size: 1rem; font-size: 1rem;
opacity: 0.7; opacity: 0.85;
color: white; color: white;
} }
.truecv-score-label {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.025em;
}
/* Stat Items */ /* Stat Items */
.stat-item { .stat-item {
padding: 0.5rem; padding: 0.5rem;
@@ -598,6 +587,11 @@
color: white; color: white;
} }
.stat-label {
color: rgba(255, 255, 255, 0.85);
font-size: 0.875rem;
}
/* Flag Items */ /* Flag Items */
.flag-item { .flag-item {
border-radius: 12px; border-radius: 12px;
@@ -640,6 +634,94 @@
border-radius: 4px; border-radius: 4px;
} }
/* Employment List - Compact Row Layout */
.employment-list {
border-top: 1px solid #e5e7eb;
}
.employment-header {
display: grid;
grid-template-columns: 24px 1fr auto 60px 50px;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background-color: #f8fafc;
border-bottom: 1px solid #e5e7eb;
font-size: 0.6875rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.employment-header div:nth-child(3),
.employment-header div:nth-child(4),
.employment-header div:nth-child(5) {
text-align: center;
}
.employment-row {
display: grid;
grid-template-columns: 24px 1fr auto 60px 50px;
gap: 0.5rem;
align-items: center;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #e5e7eb;
transition: background-color 0.15s ease;
}
.employment-row:hover {
background-color: #f9fafb;
}
.employment-row-verified {
border-left: 3px solid #22c55e;
}
.employment-row-unverified {
border-left: 3px solid #f59e0b;
}
.employment-status-icon {
display: flex;
align-items: center;
justify-content: center;
}
.employment-company {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
.employment-company-name {
font-weight: 600;
font-size: 0.8125rem;
color: #1f2937;
}
.employment-note-inline {
font-size: 0.6875rem;
color: #6b7280;
line-height: 1.2;
}
.employment-dates {
font-size: 0.75rem;
color: #6b7280;
white-space: nowrap;
text-align: right;
}
.employment-score {
text-align: center;
}
.employment-points {
text-align: center;
font-size: 0.8125rem;
}
/* Mobile Responsiveness */ /* Mobile Responsiveness */
@@media (max-width: 768px) { @@media (max-width: 768px) {
.score-header .row { .score-header .row {
@@ -677,6 +759,24 @@
.page-header .btn { .page-header .btn {
width: 100%; width: 100%;
} }
.employment-row {
grid-template-columns: 20px 1fr 50px;
gap: 0.25rem 0.5rem;
padding: 0.5rem;
}
.employment-dates {
display: none;
}
.employment-points {
display: none;
}
.employment-note-inline {
display: none;
}
} }
</style> </style>

1142
src/TrueCV.Web/wwwroot/app.css
View File

File diff suppressed because it is too large Load Diff

BIN
src/TrueCV.Web/wwwroot/images/TrueCV_Logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 89 KiB