TenX PM
507 lines
21 KiB
HTML
507 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HR Portal — The HR Platform Your Team Will Actually Use</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: 'Inter', sans-serif; background: #FFFFFF; color: #111827; }
|
|
|
|
/* NAVBAR */
|
|
.navbar {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 48px; height: 64px;
|
|
background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
|
|
}
|
|
.navbar-logo {
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-size: 20px; font-weight: 700; color: #111827;
|
|
}
|
|
.navbar-logo .logo-icon {
|
|
width: 32px; height: 32px; background: #4F46E5; border-radius: 8px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.navbar-logo .logo-icon svg { width: 18px; height: 18px; }
|
|
.navbar-actions { display: flex; align-items: center; gap: 12px; }
|
|
.btn-outline {
|
|
padding: 8px 20px; border: 1.5px solid #4F46E5; border-radius: 6px;
|
|
color: #4F46E5; font-size: 14px; font-weight: 500;
|
|
background: transparent; cursor: pointer; text-decoration: none;
|
|
transition: all 0.15s;
|
|
}
|
|
.btn-outline:hover { background: #EEF2FF; }
|
|
.btn-primary {
|
|
padding: 8px 20px; border: none; border-radius: 6px;
|
|
background: #4F46E5; color: #FFFFFF; font-size: 14px; font-weight: 500;
|
|
cursor: pointer; text-decoration: none; transition: all 0.15s;
|
|
}
|
|
.btn-primary:hover { background: #4338CA; }
|
|
|
|
/* HERO */
|
|
.hero {
|
|
padding: 140px 48px 80px;
|
|
display: flex; align-items: center; gap: 64px;
|
|
max-width: 1200px; margin: 0 auto;
|
|
}
|
|
.hero-content { flex: 1; }
|
|
.hero-badge {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
background: #EEF2FF; color: #4F46E5; font-size: 13px; font-weight: 500;
|
|
padding: 4px 12px; border-radius: 20px; margin-bottom: 24px;
|
|
}
|
|
.hero-badge svg { width: 14px; height: 14px; }
|
|
.hero-title {
|
|
font-size: 52px; font-weight: 800; line-height: 1.15;
|
|
color: #111827; margin-bottom: 20px;
|
|
letter-spacing: -1px;
|
|
}
|
|
.hero-title span { color: #4F46E5; }
|
|
.hero-subtitle {
|
|
font-size: 18px; color: #6B7280; line-height: 1.6;
|
|
margin-bottom: 36px; max-width: 480px;
|
|
}
|
|
.hero-ctas { display: flex; align-items: center; gap: 16px; }
|
|
.btn-hero-primary {
|
|
padding: 14px 28px; background: #4F46E5; color: #FFF;
|
|
border: none; border-radius: 8px; font-size: 16px; font-weight: 600;
|
|
cursor: pointer; text-decoration: none; transition: all 0.15s;
|
|
}
|
|
.btn-hero-primary:hover { background: #4338CA; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,0.3); }
|
|
.btn-hero-secondary {
|
|
padding: 14px 28px; background: transparent; color: #374151;
|
|
border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 16px; font-weight: 500;
|
|
cursor: pointer; text-decoration: none; transition: all 0.15s;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.btn-hero-secondary:hover { border-color: #9CA3AF; background: #F9FAFB; }
|
|
.hero-meta { margin-top: 32px; display: flex; align-items: center; gap: 24px; }
|
|
.hero-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
|
|
.hero-meta-item svg { width: 16px; height: 16px; color: #10B981; }
|
|
|
|
/* HERO ILLUSTRATION */
|
|
.hero-visual { flex: 1; max-width: 520px; }
|
|
.dashboard-mock {
|
|
background: #FFFFFF; border-radius: 12px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
|
|
overflow: hidden; border: 1px solid #E5E7EB;
|
|
}
|
|
.mock-topbar {
|
|
height: 36px; background: #F9FAFB; border-bottom: 1px solid #E5E7EB;
|
|
display: flex; align-items: center; gap: 6px; padding: 0 12px;
|
|
}
|
|
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
.mock-dot.red { background: #EF4444; }
|
|
.mock-dot.yellow { background: #F59E0B; }
|
|
.mock-dot.green { background: #10B981; }
|
|
.mock-body { display: flex; height: 320px; }
|
|
.mock-sidebar {
|
|
width: 64px; background: #FFFFFF; border-right: 1px solid #E5E7EB;
|
|
padding: 12px 8px;
|
|
}
|
|
.mock-sidebar-item {
|
|
width: 48px; height: 8px; background: #E5E7EB; border-radius: 4px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.mock-sidebar-item.active { background: #4F46E5; }
|
|
.mock-content { flex: 1; padding: 16px; background: #FAFAFA; }
|
|
.mock-stat-row { display: flex; gap: 8px; margin-bottom: 12px; }
|
|
.mock-stat {
|
|
flex: 1; background: #FFFFFF; border-radius: 6px; padding: 10px;
|
|
border: 1px solid #E5E7EB;
|
|
}
|
|
.mock-stat-num { width: 32px; height: 12px; background: #4F46E5; border-radius: 3px; margin-bottom: 4px; }
|
|
.mock-stat-label { width: 48px; height: 6px; background: #E5E7EB; border-radius: 3px; }
|
|
.mock-chart-row { display: flex; gap: 8px; }
|
|
.mock-chart {
|
|
flex: 3; background: #FFFFFF; border-radius: 6px; padding: 10px;
|
|
border: 1px solid #E5E7EB;
|
|
}
|
|
.mock-chart-title { width: 80px; height: 8px; background: #111827; border-radius: 3px; margin-bottom: 12px; }
|
|
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
|
|
.mock-bar { flex: 1; background: #4F46E5; border-radius: 3px 3px 0 0; opacity: 0.15; }
|
|
.mock-bar:nth-child(1) { height: 40%; opacity: 0.4; }
|
|
.mock-bar:nth-child(2) { height: 65%; opacity: 0.6; }
|
|
.mock-bar:nth-child(3) { height: 50%; opacity: 0.5; }
|
|
.mock-bar:nth-child(4) { height: 80%; opacity: 0.8; }
|
|
.mock-bar:nth-child(5) { height: 60%; opacity: 0.6; }
|
|
.mock-bar:nth-child(6) { height: 90%; background: #4F46E5; opacity: 1; }
|
|
.mock-list { flex: 2; background: #FFFFFF; border-radius: 6px; padding: 10px; border: 1px solid #E5E7EB; }
|
|
.mock-list-item { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
|
|
.mock-avatar { width: 20px; height: 20px; border-radius: 50%; background: #4F46E5; opacity: 0.2; }
|
|
.mock-avatar:nth-child(1) { opacity: 0.8; }
|
|
.mock-text { flex: 1; }
|
|
.mock-text-line { height: 6px; background: #E5E7EB; border-radius: 3px; margin-bottom: 3px; }
|
|
.mock-text-line.short { width: 60%; }
|
|
|
|
/* FEATURES */
|
|
.features-section {
|
|
background: #FAFAFA; padding: 80px 48px;
|
|
}
|
|
.section-header { text-align: center; margin-bottom: 48px; }
|
|
.section-tag {
|
|
display: inline-block; background: #EEF2FF; color: #4F46E5;
|
|
font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
|
|
margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;
|
|
}
|
|
.section-title { font-size: 36px; font-weight: 700; color: #111827; margin-bottom: 12px; }
|
|
.section-subtitle { font-size: 16px; color: #6B7280; }
|
|
.features-grid {
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
|
max-width: 1100px; margin: 0 auto;
|
|
}
|
|
.feature-card {
|
|
background: #FFFFFF; border-radius: 12px; padding: 32px;
|
|
border: 1px solid #E5E7EB;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
transition: all 0.2s;
|
|
}
|
|
.feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
|
|
.feature-icon {
|
|
width: 48px; height: 48px; background: #EEF2FF; border-radius: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.feature-icon svg { width: 24px; height: 24px; color: #4F46E5; }
|
|
.feature-title { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 8px; }
|
|
.feature-desc { font-size: 14px; color: #6B7280; line-height: 1.6; margin-bottom: 16px; }
|
|
.feature-list { list-style: none; }
|
|
.feature-list li {
|
|
font-size: 13px; color: #6B7280; padding: 4px 0;
|
|
display: flex; align-items: center; gap: 6px;
|
|
}
|
|
.feature-list li::before {
|
|
content: ''; width: 6px; height: 6px; background: #10B981;
|
|
border-radius: 50%; flex-shrink: 0;
|
|
}
|
|
|
|
/* STATS */
|
|
.stats-section {
|
|
background: #4F46E5; padding: 64px 48px;
|
|
}
|
|
.stats-grid {
|
|
display: grid; grid-template-columns: repeat(3, 1fr);
|
|
gap: 48px; max-width: 900px; margin: 0 auto; text-align: center;
|
|
}
|
|
.stat-item {}
|
|
.stat-number { font-size: 48px; font-weight: 800; color: #FFFFFF; margin-bottom: 8px; }
|
|
.stat-label { font-size: 16px; color: #A5B4FC; }
|
|
|
|
/* TESTIMONIALS */
|
|
.testimonials-section { padding: 80px 48px; background: #FFFFFF; }
|
|
.testimonials-grid {
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
|
max-width: 1100px; margin: 0 auto;
|
|
}
|
|
.testimonial-card {
|
|
background: #F9FAFB; border-radius: 12px; padding: 28px;
|
|
border: 1px solid #E5E7EB;
|
|
}
|
|
.testimonial-quote { font-size: 15px; color: #374151; line-height: 1.6; margin-bottom: 20px; font-style: italic; }
|
|
.testimonial-author { display: flex; align-items: center; gap: 12px; }
|
|
.testimonial-avatar {
|
|
width: 40px; height: 40px; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; font-weight: 600; color: #FFFFFF;
|
|
}
|
|
.testimonial-name { font-size: 14px; font-weight: 600; color: #111827; }
|
|
.testimonial-role { font-size: 12px; color: #9CA3AF; }
|
|
|
|
/* FOOTER */
|
|
.footer {
|
|
background: #111827; padding: 48px; text-align: center;
|
|
color: #9CA3AF; font-size: 14px;
|
|
}
|
|
.footer-logo { font-size: 20px; font-weight: 700; color: #FFFFFF; margin-bottom: 16px; }
|
|
.footer-links { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; }
|
|
.footer-links a { color: #9CA3AF; text-decoration: none; transition: color 0.15s; }
|
|
.footer-links a:hover { color: #FFFFFF; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAVBAR -->
|
|
<nav class="navbar">
|
|
<div class="navbar-logo">
|
|
<div class="logo-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
</div>
|
|
HR Portal
|
|
</div>
|
|
<div style="display:flex;gap:32px;align-items:center;">
|
|
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">Features</a>
|
|
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">Pricing</a>
|
|
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">About</a>
|
|
</div>
|
|
<div class="navbar-actions">
|
|
<a href="02-login.html" class="btn-outline">Sign In</a>
|
|
<a href="03-register.html" class="btn-primary">Get Started</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section style="padding-top:64px;">
|
|
<div class="hero">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
|
</svg>
|
|
Trusted by 500+ companies worldwide
|
|
</div>
|
|
<h1 class="hero-title">The HR platform your team will <span>actually use</span></h1>
|
|
<p class="hero-subtitle">Streamline employee management, automate leave approvals, run payroll, and get insights — all in one beautifully simple platform.</p>
|
|
<div class="hero-ctas">
|
|
<a href="03-register.html" class="btn-hero-primary">Start Free Trial</a>
|
|
<a href="#" class="btn-hero-secondary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>
|
|
</svg>
|
|
Watch Demo
|
|
</a>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<div class="hero-meta-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
No credit card required
|
|
</div>
|
|
<div class="hero-meta-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
14-day free trial
|
|
</div>
|
|
<div class="hero-meta-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
Setup in minutes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="dashboard-mock">
|
|
<div class="mock-topbar">
|
|
<div class="mock-dot red"></div>
|
|
<div class="mock-dot yellow"></div>
|
|
<div class="mock-dot green"></div>
|
|
<div style="margin-left:12px;width:120px;height:8px;background:#E5E7EB;border-radius:4px;"></div>
|
|
</div>
|
|
<div class="mock-body">
|
|
<div class="mock-sidebar">
|
|
<div style="width:36px;height:36px;background:#EEF2FF;border-radius:6px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;">
|
|
<div style="width:20px;height:20px;background:#4F46E5;border-radius:4px;"></div>
|
|
</div>
|
|
<div class="mock-sidebar-item active"></div>
|
|
<div class="mock-sidebar-item"></div>
|
|
<div class="mock-sidebar-item"></div>
|
|
<div class="mock-sidebar-item"></div>
|
|
<div class="mock-sidebar-item"></div>
|
|
<div class="mock-sidebar-item"></div>
|
|
</div>
|
|
<div class="mock-content">
|
|
<div style="width:120px;height:10px;background:#111827;border-radius:4px;margin-bottom:4px;"></div>
|
|
<div style="width:80px;height:7px;background:#9CA3AF;border-radius:4px;margin-bottom:14px;"></div>
|
|
<div class="mock-stat-row">
|
|
<div class="mock-stat"><div class="mock-stat-num"></div><div class="mock-stat-label"></div></div>
|
|
<div class="mock-stat"><div class="mock-stat-num" style="background:#10B981;width:28px;"></div><div class="mock-stat-label"></div></div>
|
|
<div class="mock-stat"><div class="mock-stat-num" style="background:#F59E0B;width:24px;"></div><div class="mock-stat-label"></div></div>
|
|
<div class="mock-stat"><div class="mock-stat-num" style="background:#3B82F6;width:36px;"></div><div class="mock-stat-label"></div></div>
|
|
</div>
|
|
<div class="mock-chart-row">
|
|
<div class="mock-chart">
|
|
<div class="mock-chart-title"></div>
|
|
<div class="mock-bars">
|
|
<div class="mock-bar"></div>
|
|
<div class="mock-bar"></div>
|
|
<div class="mock-bar"></div>
|
|
<div class="mock-bar"></div>
|
|
<div class="mock-bar"></div>
|
|
<div class="mock-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mock-list">
|
|
<div style="width:60px;height:7px;background:#111827;border-radius:3px;margin-bottom:10px;"></div>
|
|
<div class="mock-list-item">
|
|
<div class="mock-avatar" style="background:#4F46E5;opacity:0.7;"></div>
|
|
<div class="mock-text">
|
|
<div class="mock-text-line"></div>
|
|
<div class="mock-text-line short"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mock-list-item">
|
|
<div class="mock-avatar" style="background:#10B981;opacity:0.7;"></div>
|
|
<div class="mock-text">
|
|
<div class="mock-text-line"></div>
|
|
<div class="mock-text-line short"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mock-list-item">
|
|
<div class="mock-avatar" style="background:#F59E0B;opacity:0.7;"></div>
|
|
<div class="mock-text">
|
|
<div class="mock-text-line"></div>
|
|
<div class="mock-text-line short"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mock-list-item">
|
|
<div class="mock-avatar" style="background:#EF4444;opacity:0.7;"></div>
|
|
<div class="mock-text">
|
|
<div class="mock-text-line"></div>
|
|
<div class="mock-text-line short"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section class="features-section">
|
|
<div class="section-header">
|
|
<div class="section-tag">Everything you need</div>
|
|
<h2 class="section-title">Built for modern HR teams</h2>
|
|
<p class="section-subtitle">From hire to retire, manage your entire workforce in one place.</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="feature-title">Employee Management</h3>
|
|
<p class="feature-desc">Centralize all employee data, track documents, and manage the full employee lifecycle with ease.</p>
|
|
<ul class="feature-list">
|
|
<li>Employee directory and profiles</li>
|
|
<li>Document management</li>
|
|
<li>Org chart visualization</li>
|
|
<li>Department management</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background:#ECFDF5;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
|
<line x1="16" y1="2" x2="16" y2="6"/>
|
|
<line x1="8" y1="2" x2="8" y2="6"/>
|
|
<line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="feature-title">Leave & Attendance</h3>
|
|
<p class="feature-desc">Automate leave approvals, track attendance in real-time, and give employees visibility into their balances.</p>
|
|
<ul class="feature-list">
|
|
<li>Multi-type leave policies</li>
|
|
<li>Automated approval workflows</li>
|
|
<li>Real-time attendance tracking</li>
|
|
<li>Holiday calendar management</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background:#FFF7ED;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
|
|
<line x1="12" y1="1" x2="12" y2="23"/>
|
|
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="feature-title">Payroll & Insights</h3>
|
|
<p class="feature-desc">Run accurate payroll, manage salary structures, and get powerful analytics to make data-driven HR decisions.</p>
|
|
<ul class="feature-list">
|
|
<li>Automated payroll processing</li>
|
|
<li>Custom salary structures</li>
|
|
<li>Expense claim management</li>
|
|
<li>Analytics and reporting</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- STATS -->
|
|
<section class="stats-section">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-number">500+</div>
|
|
<div class="stat-label">Companies trust HR Portal</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">50,000+</div>
|
|
<div class="stat-label">Employees managed daily</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">99.9%</div>
|
|
<div class="stat-label">Uptime guaranteed</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TESTIMONIALS -->
|
|
<section class="testimonials-section">
|
|
<div class="section-header">
|
|
<div class="section-tag">Customer Stories</div>
|
|
<h2 class="section-title">Loved by HR teams everywhere</h2>
|
|
</div>
|
|
<div class="testimonials-grid">
|
|
<div class="testimonial-card">
|
|
<p class="testimonial-quote">"HR Portal cut our payroll processing time by 70%. What used to take two days now takes two hours. It's transformed how we manage our team."</p>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar" style="background:#4F46E5;">SC</div>
|
|
<div>
|
|
<div class="testimonial-name">Sarah Chen</div>
|
|
<div class="testimonial-role">HR Director, TechFlow Inc.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testimonial-card">
|
|
<p class="testimonial-quote">"The leave management system alone is worth it. Employees can see their balances, managers get instant notifications. No more email chains."</p>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar" style="background:#10B981;">MR</div>
|
|
<div>
|
|
<div class="testimonial-name">Michael Rodriguez</div>
|
|
<div class="testimonial-role">COO, Nexus Dynamics</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testimonial-card">
|
|
<p class="testimonial-quote">"We scaled from 50 to 300 employees without adding a single HR person. The automation handles everything that used to require manual work."</p>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar" style="background:#F59E0B;">PP</div>
|
|
<div>
|
|
<div class="testimonial-name">Priya Patel</div>
|
|
<div class="testimonial-role">CEO, GrowthBase</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<div class="footer-logo">HR Portal</div>
|
|
<div class="footer-links">
|
|
<a href="#">Privacy Policy</a>
|
|
<a href="#">Terms of Service</a>
|
|
<a href="#">Support</a>
|
|
<a href="#">Blog</a>
|
|
<a href="#">Contact</a>
|
|
</div>
|
|
<p>© 2026 HR Portal. All rights reserved.</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|