go2ismail/blazor-hrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
go2ismail
2026-07-21 14:08:10 +07:00
commit f7cf118326
533 changed files with 41762 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Features/Root/Pages/LandingPage.cshtml
+334
View File
@@ -0,0 +1,334 @@
@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">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
.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: 9999px; transition: all 0.2s; cursor: pointer; border: none; }
.btn-primary:hover { background: #F3F1FF; 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: 9999px; 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: 1rem; transition: all 0.25s; cursor: default; }
.tech-card:hover { border-color: #D4CFF7; box-shadow: 0 4px 20px rgba(89,74,226,0.08); transform: translateY(-2px); }
.tech-card .ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #F3F1FF; 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: 9999px; background: #F3F1FF; 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: #4738C5; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(89,74,226,0.35); }
#fab-top svg { width: 1.25rem; height: 1.25rem; }
</style>
</head>
<body x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">
<!-- ===== STYLE 4: Violet rounded menu ===== -->
<!-- NAV -->
<nav class="sticky top-4 z-50 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" x-data="{ mobileOpen: false }">
<div class="bg-[#594AE2] rounded-2xl shadow-lg shadow-[#594AE2]/20 px-4 sm: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="/home">Sign In</a>
<a href="https://indotalent.com" target="_blank" class="btn-primary no-underline">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-[#7B6FE8] rounded-lg" href="#home">Overview</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-[#7B6FE8] rounded-lg" href="#tech">Features</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-[#7B6FE8] rounded-lg" href="#arch">Why HRM?</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-[#7B6FE8] rounded-lg" href="#frontend">Tech Stack</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-[#7B6FE8] rounded-lg" href="#cta">Demo</a>
<a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-[#7B6FE8] rounded-lg" href="/home">Sign In</a>
<a href="https://indotalent.com" target="_blank" class="btn-primary w-full justify-center mt-2 no-underline inline-flex items-center gap-2">Get Source Code</a>
</div>
</div>
</nav>
<!-- HERO -->
<section id="home" class="relative overflow-hidden pt-8">
<div class="absolute inset-0 bg-gradient-to-b from-[#F3F1FF]/40 to-transparent pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24 md:pt-24 md:pb-32">
<div class="text-center max-w-4xl mx-auto">
<div class="hero-badge violet-themed mx-auto mb-6" style="background:#F3F1FF;border-color:#D4CFF7;color:#594AE2;">
<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="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>
Production-Ready Source Code
</div>
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 leading-tight tracking-tight">
Human Resource Management<br/>
<span class="text-[#594AE2]">That Actually Works</span>
</h1>
<p class="mt-6 text-lg md:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
Stop burning AI tokens on code that won't compile. Get a complete, battle-tested HRM system built with ASP.NET Core Blazor & .NET 10 — fully functional end-to-end, right out of the box.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="/home" class="btn-primary text-base px-8 py-3.5" style="background:#594AE2;color:#fff;border-radius:9999px;text-decoration:none;">
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 href="https://indotalent.com" target="_blank" class="btn-outline text-base px-8 py-3.5 no-underline" style="color:#594AE2;border-color:#D4CFF7;border-radius:9999px;">
<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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
Get Source Code
</a>
</div>
<div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-gray-400">
<span class="font-medium text-gray-500">Trusted by</span>
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-[#7B6FE8]" 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> 100% Source Code</span>
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-[#7B6FE8]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> Ready to Run</span>
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-[#7B6FE8]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg> Beautiful UI</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-4 py-1.5 bg-[#F3F1FF] text-[#594AE2] text-xs font-semibold rounded-full border border-[#D4CFF7]">BUSINESS FEATURES</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 — 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">Personal & Avatar</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 Mgmt</div><div class="text-xs text-gray-400 mt-0.5">Request & Balance</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.5M9 7.5l3-3 3 3"/></svg></div><div class="font-semibold text-gray-900 text-sm">Performance</div><div class="text-xs text-gray-400 mt-0.5">Review & Appraisal</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="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21-3.75 0 0112 2.25 2.25 0 00-2.25 0"/></svg></div><div class="font-semibold text-gray-900 text-sm">Organization</div><div class="text-xs text-gray-400 mt-0.5">Branches & Dept.</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">Salary & Deduction</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.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">System Logs</div><div class="text-xs text-gray-400 mt-0.5">DB & File Audit</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">Users & Currency</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="M11.42 15.17l-1.255 2.51m-1.255-2.51l1.255 2.51m-1.255-2.51a3.003 3.003 0 00-3.509 2.51m3.509-2.51l1.255 2.51m3.764-7.53l-1.254 2.51m-1.255-2.51l1.255 2.51m-1.255-2.51a3.003 3.003 0 00-3.509 2.51m3.509-2.51l1.255 2.51M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">System Config</div><div class="text-xs text-gray-400 mt-0.5">Full Inspection</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="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><div class="font-semibold text-gray-900 text-sm">Multitenant</div><div class="text-xs text-gray-400 mt-0.5">Isolated Data</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="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg></div><div class="font-semibold text-gray-900 text-sm">SSO Auth</div><div class="text-xs text-gray-400 mt-0.5">Firebase & Keycloak</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 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Session Mgmt</div><div class="text-xs text-gray-400 mt-0.5">Active Sessions</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="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">Promotion</div><div class="text-xs text-gray-400 mt-0.5">Transfer & Promote</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-4 py-1.5 bg-[#F3F1FF] text-[#594AE2] text-xs font-semibold rounded-full border border-[#D4CFF7]">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-2xl border border-gray-100 hover:shadow-lg 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</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">No more debugging AI-generated hallucinations. HRM compiles, runs, and deploys on day one. Every feature has been tested and proven in production environments.</p>
</div>
<div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg 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 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.41a2.25 2.25 0 013.182 0l2.909 2.91m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900">Beautiful by Default</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">A real-world showcase of what Blazor + MudBlazor can achieve. Stunning, responsive UI that proves .NET can deliver gorgeous enterprise interfaces — not just functional ones.</p>
</div>
<div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg 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-2xl border border-gray-100 hover:shadow-lg 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 — commands, queries, handlers, and validation — making the codebase intuitive to navigate and extend.</p>
</div>
<div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg 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 — 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-2xl border border-gray-100 hover:shadow-lg 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>
</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-4 py-1.5 bg-[#F3F1FF] text-[#594AE2] text-xs font-semibold rounded-full border border-[#D4CFF7]">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 — 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-full bg-[#F3F1FF] flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-[#594AE2]" 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-full bg-[#F3F1FF] flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-[#594AE2]" 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-full bg-[#F3F1FF] flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-[#594AE2]" 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-full bg-[#F3F1FF] flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-[#594AE2]" 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-2xl border border-gray-100"><div class="text-2xl font-bold text-[#594AE2]">.NET 10</div><div class="text-xs text-gray-400 mt-1">Runtime</div></div>
<div class="p-5 bg-gray-50 rounded-2xl border border-gray-100"><div class="text-2xl font-bold text-[#594AE2]">Blazor</div><div class="text-xs text-gray-400 mt-1">Web UI</div></div>
<div class="p-5 bg-gray-50 rounded-2xl border border-gray-100"><div class="text-2xl font-bold text-[#594AE2]">MudBlazor</div><div class="text-xs text-gray-400 mt-1">Components</div></div>
<div class="p-5 bg-gray-50 rounded-2xl border border-gray-100"><div class="text-2xl font-bold text-[#594AE2]">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-4 py-1.5 bg-[#F3F1FF] text-[#594AE2] text-xs font-semibold rounded-full border border-[#D4CFF7]">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 — no installation required.</p>
</div>
<div class="max-w-2xl mx-auto">
<div class="p-8 bg-white rounded-2xl border border-gray-100 shadow-sm">
<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="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<span class="text-sm text-gray-500">URL</span>
<a href="https://blazor-hrm.csharpasp.net/" target="_blank" class="text-sm font-medium text-[#594AE2] hover:text-[#4738C5]">blazor-hrm.csharpasp.net</a>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<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="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<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-hrm.csharpasp.net/" target="_blank" class="btn-primary text-base px-8 py-3.5 no-underline" style="background:#594AE2;color:#fff;border-radius:9999px;">
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>
<!-- 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-[#7B6FE8]" 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-[#7B6FE8] 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-[#7B6FE8] 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-[#7B6FE8] uppercase tracking-wider mb-4">Resources</h4>
<div class="space-y-2"><a class="footer-link block" href="https://blazor-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>