go2ismail/blazor-saas-hrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2d7959f2027c92fdd89e940408778c6ca99b2f20
blazor-saas-hrm/Features/Root/Pages/LandingPage.cshtml
T
go2ismail 2d7959f202 initial commit
2026-07-21 14:22:06 +07:00

474 lines
44 KiB
Plaintext
Raw Blame History

@page "/"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HRM - Human Resource Management</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
50: '#EEECFA',
100: '#D5D0F5',
200: '#BDB8F0',
300: '#A9A0F2',
400: '#8B82F0',
500: '#7B6FE8',
600: '#594AE2',
700: '#4235B8',
800: '#3228A0',
900: '#241C80',
}
}
}
}
}
</script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
/* === Landing Page Styles (from landing3.css) === */
.nav-link { position: relative; color: rgba(255,255,255,0.85); font-size: 0.875rem; font-weight: 500; transition: all 0.2s; cursor: pointer; text-decoration: none; }
.nav-link:hover { color: #ffffff; }
.nav-link.active { color: #ffffff; font-weight: 600; }
.nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.6); border-radius: 1px; }
.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #ffffff; color: #594AE2; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; }
.btn-primary:hover { background: #EEECFA; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: transparent; color: #ffffff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; border: 1.5px solid rgba(255,255,255,0.3); transition: all 0.2s; cursor: pointer; }
.btn-outline:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); }
.tech-card { padding: 1.5rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.75rem; transition: all 0.25s; cursor: default; }
.tech-card:hover { border-color: #BDB8F0; box-shadow: 0 4px 16px rgba(89,74,226,0.06); transform: translateY(-2px); }
.tech-card .ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: #EEECFA; color: #7B6FE8; margin-bottom: 0.75rem; }
.tech-card .ico svg { width: 1.25rem; height: 1.25rem; }
.feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: #EEECFA; color: #7B6FE8; flex-shrink: 0; }
.feature-icon svg { width: 1.5rem; height: 1.5rem; }
.footer-link { color: #94a3b8; font-size: 0.8125rem; transition: color 0.2s; cursor: pointer; text-decoration: none; }
.footer-link:hover { color: #ffffff; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); border-radius: 9999px; font-size: 0.8125rem; color: rgba(255,255,255,0.9); font-weight: 500; }
#fab-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #594AE2; color: #fff; border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 12px rgba(89,74,226,0.3); transition: all 0.25s; opacity: 0; visibility: hidden; transform: translateY(10px); }
#fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#fab-top:hover { background: #4235B8; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(89,74,226,0.35); }
#fab-top svg { width: 1.25rem; height: 1.25rem; }
.demo-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.demo-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: #f9fafb; border-radius: 0.5rem; }
/* === Auth/General Styles (from auth3.css) === */
.input-field { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem; font-size: 0.875rem; color: #1e293b; background: #fff; transition: border-color 0.2s; outline: none; font-family: "Poppins", sans-serif; }
.input-field:focus { border-color: #594AE2; box-shadow: 0 0 0 3px rgba(89,74,226,0.1); }
.input-field::placeholder { color: #94a3b8; }
.input-field.error { border-color: #ef4444; }
.input-field.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; }
.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.divider span { font-size: 0.75rem; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.auth-link { color: #594AE2; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; }
.auth-link:hover { color: #4235B8; text-decoration: underline; }
.text-link { color: #64748b; font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s; }
.text-link:hover { color: #594AE2; text-decoration: underline; }
.checkbox-custom { width: 1rem; height: 1rem; border: 1.5px solid #cbd5e1; border-radius: 0.25rem; cursor: pointer; accent-color: #594AE2; }
.bg-card-glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); }
.bg-card-glass:hover { border-color: rgba(255,255,255,0.25); }
.check-icon { background: rgba(255,255,255,0.15); }
.tenant-card { cursor: pointer; transition: all 0.2s; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
.tenant-card:hover { border-color: #594AE2; box-shadow: 0 4px 12px rgba(89,74,226,0.1); transform: translateY(-2px); }
.tenant-card.selected { border-color: #594AE2; background: #EEECFA; }
.fade-in { animation: fadeIn 0.3s ease-out; }
@@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }
.btn-primary-inverse { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #ffffff; color: #594AE2; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; text-decoration: none; }
.btn-primary-inverse:hover { background: #f8fafc; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }
/* === Overrides for brand gradient background pages === */
.bg-gradient-to-br .form-label {
display: block; font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 0.375rem;
}
.bg-gradient-to-br .auth-link {
color: #A9A0F2; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s;
}
.bg-gradient-to-br .auth-link:hover {
color: #ffffff; text-decoration: underline;
}
.bg-gradient-to-br .text-link {
color: rgba(255,255,255,0.6); font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s;
}
.bg-gradient-to-br .text-link:hover {
color: #ffffff; text-decoration: underline;
}
.bg-gradient-to-br .btn-primary {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #ffffff; color: #594AE2; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; width: 100%;
}
.bg-gradient-to-br .btn-primary:hover {
background: #f8fafc; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.bg-gradient-to-br .btn-primary:disabled {
opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none;
}
.bg-gradient-to-br .btn-outline {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: #ffffff; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: 1.5px solid rgba(255,255,255,0.3); transition: all 0.2s; cursor: pointer; width: 100%;
}
.bg-gradient-to-br .btn-outline:hover {
border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1);
}
.bg-gradient-to-br .input-field {
width: 100%; padding: 0.75rem 1rem; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 0.5rem; font-size: 0.875rem; color: #ffffff; background: rgba(255,255,255,0.1); transition: border-color 0.2s; outline: none; backdrop-filter: blur(4px);
}
.bg-gradient-to-br .input-field:focus {
border-color: rgba(255,255,255,0.5); box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.bg-gradient-to-br .input-field::placeholder {
color: rgba(255,255,255,0.5);
}
.bg-gradient-to-br .input-field.error {
border-color: #fca5a5;
}
.bg-gradient-to-br .input-field.error:focus {
box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
}
.bg-gradient-to-br .checkbox-custom {
width: 1rem; height: 1rem; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 0.25rem; cursor: pointer; accent-color: #A9A0F2;
}
</style>
</head>
<body x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">
<!-- ===== HRM Landing Page ===== -->
<!-- NAV -->
<nav class="sticky top-0 z-50 bg-brand-600" x-data="{ mobileOpen: false }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center gap-10">
<a class="flex items-center gap-2 text-white font-bold text-lg no-underline" href="#">
<svg class="w-7 h-7 text-white/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
<span>HRM</span>
</a>
<div class="hidden md:flex items-center gap-8">
<a class="nav-link active" href="#home">Overview</a>
<a class="nav-link" href="#tech">Features</a>
<a class="nav-link" href="#arch">Why HRM?</a>
<a class="nav-link" href="#frontend">Tech Stack</a>
<a class="nav-link" href="#cta">Demo</a>
</div>
</div>
<div class="hidden md:flex items-center gap-3">
<a class="nav-link" href="/account/tenant-selection">Sign In</a>
<a class="btn-primary" href="https://indotalent.com" target="_blank">Get Source Code</a>
</div>
<button class="md:hidden p-2 text-white/80 hover:text-white" @@click="mobileOpen = !mobileOpen">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
<div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-2">
<a class="block px-3 py-2 text-sm text-white bg-brand-500 rounded-md" href="#home">Overview</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-brand-500 rounded-md" href="#tech">Features</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-brand-500 rounded-md" href="#arch">Why HRM?</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-brand-500 rounded-md" href="#frontend">Tech Stack</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-brand-500 rounded-md" href="#cta">Demo</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-brand-500 rounded-md" href="/account/tenant-selection">Sign In</a>
<a class="btn-primary w-full justify-center mt-2" href="https://indotalent.com" target="_blank">Get Source Code</a>
</div>
</div>
</nav>
<!-- HERO -->
<section id="home" class="relative bg-brand-600 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-brand-800 via-brand-600 to-brand-500 pointer-events-none"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32">
<div class="text-center max-w-4xl mx-auto">
<div class="hero-badge mx-auto mb-6">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
Blazor HRM &mdash; SaaS &middot; Multitenant
</div>
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white leading-tight tracking-tight">
The Next-Gen<br/>
<span class="text-brand-300">People Engine</span>
</h1>
<p class="mt-6 text-lg md:text-xl text-brand-100 max-w-2xl mx-auto leading-relaxed">
Built for scale, engineered for excellence. A production-ready Blazor Server HRM source code
that works end-to-end &mdash; no more burning AI tokens building from scratch.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
<a class="btn-primary text-base px-8 py-3.5" href="/account/tenant-selection">
Sign In
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
<a class="btn-outline text-base px-8 py-3.5" href="https://indotalent.com" target="_blank">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Get Source Code
</a>
</div>
<div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-brand-300">
<span class="font-medium text-brand-100">Powered by</span>
<span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg> .NET 10 Ready</span>
<span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg> SaaS Multitenant</span>
<span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> Production Ready</span>
</div>
</div>
</div>
</section>
<!-- BUSINESS FEATURES -->
<section id="tech" class="py-20 md:py-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="inline-flex items-center gap-1.5 px-3 py-1 bg-brand-50 text-brand-600 text-xs font-semibold rounded-full border border-brand-200">COMPREHENSIVE HR PLATFORM</span>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Everything HR, Ready to Deploy</h2>
<p class="mt-4 text-gray-500 max-w-2xl mx-auto">From employee profiles to payroll processing &mdash; a complete HR ecosystem that covers your entire people operations.</p>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Profile</div><div class="text-xs text-gray-400 mt-0.5">Employee</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">Leave</div><div class="text-xs text-gray-400 mt-0.5">Management</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">Performance</div><div class="text-xs text-gray-400 mt-0.5">Evaluation</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Organization</div><div class="text-xs text-gray-400 mt-0.5">Structure</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Payroll</div><div class="text-xs text-gray-400 mt-0.5">Process</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></div><div class="font-semibold text-gray-900 text-sm">System Logs</div><div class="text-xs text-gray-400 mt-0.5">Audit Trail</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">App Settings</div><div class="text-xs text-gray-400 mt-0.5">Configuration</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">System Settings</div><div class="text-xs text-gray-400 mt-0.5">Inspection Mode</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">MudBlazor 9</div><div class="text-xs text-gray-400 mt-0.5">UI Library</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">VSA</div><div class="text-xs text-gray-400 mt-0.5">Architecture</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zm0 9.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zm0 9.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Monolithic</div><div class="text-xs text-gray-400 mt-0.5">Single Project</div></div>
<div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div><div class="font-semibold text-gray-900 text-sm">LINQ</div><div class="text-xs text-gray-400 mt-0.5">Query Language</div></div>
</div>
</div>
</section>
<!-- WHY HRM / PAIN POINTS SECTION -->
<section id="arch" class="py-20 md:py-28 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="inline-flex items-center gap-1.5 px-3 py-1 bg-brand-50 text-brand-600 text-xs font-semibold rounded-full border border-brand-200">WHY HRM?</span>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Stop Prompting. Start Shipping.</h2>
<p class="mt-4 text-gray-500 max-w-2xl mx-auto">AI can generate code snippets, but building a fully functional, end-to-end application is a different challenge entirely. HRM solves the real problems behind enterprise software delivery.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
<div class="feature-icon mb-4">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900">Guaranteed to Run & Beautiful</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">No AI hallucinations, no broken compiles. HRM runs on day one &mdash; and looks stunning doing it. A real-world showcase of Blazor + MudBlazor 9 proving .NET can deliver gorgeous enterprise UIs that actually work.</p>
</div>
<div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
<div class="feature-icon mb-4">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900">Save Weeks of Development</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">Even with AI assistance, building a complete HRM from scratch takes weeks of prompting, fixing, and refactoring. Get the finished product now and focus on what makes your business unique.</p>
</div>
<div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
<div class="feature-icon mb-4">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 7.5l3-3 3 3"/></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900">Vertical Slice Architecture</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">Feature-first organization. Each business capability is an independent slice &mdash; commands, queries, handlers, and validation &mdash; making the codebase intuitive to navigate and extend.</p>
</div>
<div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
<div class="feature-icon mb-4">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900">Single Project Monolith</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">No microservice complexity. No multi-project juggling. One solution, one project &mdash; open in Visual Studio 2026, hit F5, and you're running. Perfect for teams that value simplicity.</p>
</div>
<div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
<div class="feature-icon mb-4">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900">Clean, Modern C# Codebase</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">CQRS with MediatR, LINQ, and best-practice patterns throughout. Learn from production code that follows Microsoft's latest conventions for .NET 10 and ASP.NET Core.</p>
</div>
<div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
<div class="feature-icon mb-4">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"/></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900">Multi-Tenant Ready</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">Serve multiple organizations from a single deployment. Built-in tenant isolation ensures complete data separation &mdash; each tenant sees only their own employees, leaves, and payroll data.</p>
</div>
</div>
</div>
</section>
<!-- TECH STACK SECTION -->
<section id="frontend" class="py-20 md:py-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<span class="inline-flex items-center gap-1.5 px-3 py-1 bg-brand-50 text-brand-600 text-xs font-semibold rounded-full border border-brand-200">TECH STACK</span>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Powered by .NET 10 & Blazor</h2>
<p class="mt-4 text-gray-500 leading-relaxed">Built on Microsoft's latest stack. Blazor Server for real-time UI, MudBlazor for polished components, and MS SQL for rock-solid data persistence &mdash; all in one cohesive solution.</p>
<div class="mt-8 space-y-4">
<div class="flex items-start gap-3">
<div class="w-5 h-5 rounded bg-brand-200 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
<div><span class="font-semibold text-gray-900 text-sm">ASP.NET Core 10 & Blazor Server</span><p class="text-xs text-gray-400 mt-0.5">Real-time, component-based web UI with C#</p></div>
</div>
<div class="flex items-start gap-3">
<div class="w-5 h-5 rounded bg-brand-200 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
<div><span class="font-semibold text-gray-900 text-sm">MudBlazor 9</span><p class="text-xs text-gray-400 mt-0.5">Material Design component library for Blazor</p></div>
</div>
<div class="flex items-start gap-3">
<div class="w-5 h-5 rounded bg-brand-200 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
<div><span class="font-semibold text-gray-900 text-sm">MediatR + CQRS + VSA</span><p class="text-xs text-gray-400 mt-0.5">Clean command/query separation with feature slices</p></div>
</div>
<div class="flex items-start gap-3">
<div class="w-5 h-5 rounded bg-brand-200 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
<div><span class="font-semibold text-gray-900 text-sm">MS SQL + EF Core</span><p class="text-xs text-gray-400 mt-0.5">Reliable data layer with full migration support</p></div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-brand-600">.NET 10</div><div class="text-xs text-gray-400 mt-1">Runtime</div></div>
<div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-brand-600">Blazor</div><div class="text-xs text-gray-400 mt-1">Web UI</div></div>
<div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-brand-600">MudBlazor</div><div class="text-xs text-gray-400 mt-1">Components</div></div>
<div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-brand-600">MS SQL</div><div class="text-xs text-gray-400 mt-1">Database</div></div>
</div>
</div>
</div>
</section>
<!-- DEMO SECTION -->
<section id="cta" class="py-20 md:py-28 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="inline-flex items-center gap-1.5 px-3 py-1 bg-brand-50 text-brand-600 text-xs font-semibold rounded-full border border-brand-200">SEE IT IN ACTION</span>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Try the Live Demo</h2>
<p class="mt-4 text-gray-500 max-w-2xl mx-auto">Don't take our word for it. Explore every feature in the live demo &mdash; no installation required.</p>
</div>
<div class="max-w-2xl mx-auto">
<div class="demo-box p-8">
<div class="text-center mb-6">
<div class="feature-icon mx-auto mb-4">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"/></svg>
</div>
<h3 class="text-xl font-semibold text-gray-900">Demo Credentials</h3>
<p class="mt-2 text-sm text-gray-500">Use these credentials to sign in and explore the full application:</p>
</div>
<div class="space-y-3">
<div class="demo-row">
<span class="text-sm text-gray-500">URL</span>
<a href="https://blazor-saas-hrm.csharpasp.net/" target="_blank" class="text-sm font-medium text-brand-600 hover:text-brand-700">blazor-saas-hrm.csharpasp.net</a>
</div>
<div class="demo-row">
<span class="text-sm text-gray-500">Email</span>
<span class="text-sm font-medium text-gray-900">admin@root.com</span>
</div>
<div class="demo-row">
<span class="text-sm text-gray-500">Password</span>
<span class="text-sm font-medium text-gray-900">123456</span>
</div>
</div>
<div class="mt-6 text-center">
<a href="https://blazor-saas-hrm.csharpasp.net/" target="_blank" class="inline-flex items-center gap-2 px-8 py-3.5 bg-brand-600 text-white font-semibold rounded-lg hover:bg-brand-700 transition text-sm no-underline">
Open Live Demo
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 md:py-28 bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl sm:text-4xl font-bold">Stop Burning AI Tokens. Start Building.</h2>
<p class="mt-4 text-gray-400 max-w-xl mx-auto">AI can scaffold a page. It can't guarantee a working payroll engine. HRM gives you the real deal &mdash; a complete, battle-tested HR platform with full source code.</p>
<div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
<a class="inline-flex items-center gap-2 px-6 py-3 bg-brand-600 text-white font-semibold rounded-lg hover:bg-brand-700 transition text-sm no-underline" href="https://indotalent.com" target="_blank">Get the Source Code</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-gray-900 border-t border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center gap-2 text-white font-bold text-lg mb-4">
<svg class="w-6 h-6 text-brand-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
HRM
</div>
<p class="text-sm text-gray-500 leading-relaxed">The ultimate bridge between your business and your customers. A complete HRM source code solution built on .NET 10 & Blazor.</p>
</div>
<div>
<h4 class="text-xs font-semibold text-brand-400 uppercase tracking-wider mb-4">Business Features</h4>
<div class="space-y-2"><a class="footer-link block">Employee Profiles</a><a class="footer-link block">Leave Management</a><a class="footer-link block">Performance Reviews</a><a class="footer-link block">Payroll Processing</a></div>
</div>
<div>
<h4 class="text-xs font-semibold text-brand-400 uppercase tracking-wider mb-4">Technical</h4>
<div class="space-y-2"><a class="footer-link block">.NET 10 + Blazor</a><a class="footer-link block">MudBlazor 9</a><a class="footer-link block">MS SQL + EF Core</a><a class="footer-link block">VSA + CQRS</a></div>
</div>
<div>
<h4 class="text-xs font-semibold text-brand-400 uppercase tracking-wider mb-4">Resources</h4>
<div class="space-y-2"><a class="footer-link block" href="https://blazor-saas-hrm.csharpasp.net/" target="_blank">Live Demo</a></div>
</div>
</div>
<div class="mt-10 pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-xs text-gray-600">&copy; 2026 HRM. All rights reserved.</p>
<div class="flex gap-4">
<a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Privacy</a>
<a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Terms</a>
<a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Cookies</a>
</div>
</div>
</div>
</footer>
<!-- FAB Back to Top -->
<button id="fab-top" :class="atTop ? '' : 'show'" @@click="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
</button>
<script>
function initScrollSpy() {
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(e) {
if (e.isIntersecting) {
document.querySelectorAll('.nav-link').forEach(function(l) { l.classList.remove('active'); });
var el = document.querySelector('.nav-link[href="#'+e.target.id+'"]');
if (el) el.classList.add('active');
}
});
}, { rootMargin: '-80px 0px -50% 0px' });
document.querySelectorAll('section[id]').forEach(function(s) { observer.observe(s); });
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink