go2ismail/indotalent-webstore
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 10:12:35 +07:00
commit 72a9b3fea1
101 changed files with 7740 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+17
View File
@@ -0,0 +1,17 @@
# OS files
Thumbs.db
.DS_Store
*.swp
*.swo
# IDE
.vscode/
.idea/
*.sublime-project
*.sublime-workspace
# Development
node_modules/
package-lock.json
yarn.lock
*.zip
Dockerfile
+16
View File
@@ -0,0 +1,16 @@
# =====================================================================
# Dockerfile untuk Indotalent Webstore (HTML Statis)
# =====================================================================
# Web app HTML statis yang di-serve oleh Nginx
# =====================================================================
FROM nginx:alpine
# Copy semua file HTML, CSS, JS, gambar ke folder default nginx
COPY . /usr/share/nginx/html
# Expose port 80
EXPOSE 80
# Nginx akan jalan otomatis
CMD ["nginx", "-g", "daemon off;"]
blog.html
+138
View File
@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Blog">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog — .NET 10, Blazor & Vertical Slice Architecture | Indotalent</title>
<meta name="description" content="Technical articles on .NET 10, Blazor Server, Vertical Slice Architecture (VSA), MudBlazor, and enterprise source code. Real-world case studies for developers." />
<meta name="keywords" content="Vertical Slice Architecture, VSA, Blazor Server, .NET 10, MudBlazor, C#, enterprise source code, ASP.NET Core, MediatR" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog.html" />
<link rel="alternate" hreflang="en" href="https://www.indotalent.com/blog.html" />
<link rel="alternate" hreflang="x-default" href="https://www.indotalent.com/blog.html" />
<meta property="og:title" content="Blog — .NET 10, Blazor & VSA | Indotalent" />
<meta property="og:description" content="Technical case studies and deep dives into Vertical Slice Architecture, Blazor Server, and .NET 10 development." />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.indotalent.com/blog.html" }
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.blog-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;transition:all 0.3s ease;display:block;text-decoration:none}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(249,115,22,0.15);border-color:#f97316}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">Blog</span></li>
</ol>
</div>
</nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="index.html" class="flex items-center gap-2.5"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="blog.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div>
</nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5"><span class="text-brand-700 text-xs font-medium tracking-wide">Technical Blog</span></div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4">Blog: <span class="gradient-text">.NET 10, Blazor & VSA</span></h1>
<p class="text-gray-500 max-w-xl mx-auto">Production-proven patterns for building enterprise .NET applications. Deep dives, case studies, and practical guides.</p>
</div>
<div class="space-y-4">
<a href="blog/vsa-ai-assisted-development.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-violet-50 text-violet-700 border border-violet-200 rounded-full px-2.5 py-0.5">AI + VSA</span><span class="text-xs text-gray-400">July 2026 · 9 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Why Vertical Slice Architecture is the Best Architecture for AI-Assisted Development</h2>
<p class="text-sm text-gray-500">How VSA's feature-centric design makes AI tools dramatically more effective. 1 file, 1 prompt vs 7 files, 6+ prompts.</p>
</a>
<a href="blog/cqrs-mediatr-no-spaghetti-code.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-green-50 text-green-700 border border-green-200 rounded-full px-2.5 py-0.5">CQRS</span><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-200 rounded-full px-2.5 py-0.5">MediatR</span><span class="text-xs text-gray-400">July 2026 · 14 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">CQRS + MediatR in VSA: Make Your Code Not Spaghetti Code</h2>
<p class="text-sm text-gray-500">How CQRS and MediatR inside Vertical Slice Architecture eliminate spaghetti code. Before-and-after: tangled controller vs. clean VSA slices.</p>
</a>
<a href="blog/vsa-introduction.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">June 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Introduction to Vertical Slice Architecture in .NET 10</h2>
<p class="text-sm text-gray-500">How VSA organizes code by business features, why it beats layered architecture, and a concrete .NET 10 Minimal API example.</p>
</a>
<a href="blog/blazor-hosting-model.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">June 2026 · 7 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Blazor Server vs WebAssembly: Choosing the Right Hosting Model</h2>
<p class="text-sm text-gray-500">Compare Blazor Server and WASM for enterprise applications. Why Indotalent products use Blazor Server.</p>
</a>
<a href="blog/vsa-eliminates-project-hell.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">May 2026 · 6 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">How Vertical Slice Architecture Eliminates "Project Hell"</h2>
<p class="text-sm text-gray-500">From 15+ projects to a single monolith. How VSA keeps related code together and slashes compilation time.</p>
</a>
<a href="blog/vsa-mediatr.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">May 2026 · 9 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Building Maintainable .NET Applications with MediatR and VSA</h2>
<p class="text-sm text-gray-500">How MediatR enables CQRS within VSA slices. Pipeline behaviors for validation, logging, and transactions.</p>
</a>
<a href="blog/mudblazor-component-library.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-200 rounded-full px-2.5 py-0.5">MudBlazor</span><span class="text-xs text-gray-400">April 2026 · 5 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">MudBlazor: The Ultimate Component Library for Blazor Server</h2>
<p class="text-sm text-gray-500">50+ Material Design components. Why MudBlazor is the de facto standard for Blazor enterprise apps.</p>
</a>
<a href="blog/blazor-performance-optimization.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">April 2026 · 7 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Blazor Server Performance Optimization: Real-World Techniques</h2>
<p class="text-sm text-gray-500">ShouldRender, virtualization, no-tracking queries, and server-side pagination for Blazor Server apps.</p>
</a>
<a href="blog/clean-architecture-to-vsa-migration.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">March 2026 · 10 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">From Clean Architecture to Vertical Slices: A Practical Migration Guide</h2>
<p class="text-sm text-gray-500">Step-by-step approach to migrate from layered architecture to VSA, one feature at a time.</p>
</a>
<a href="blog/blazor-server-security-jwt.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">March 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Securing Your Blazor Server Application with JWT and ASP.NET Core Identity</h2>
<p class="text-sm text-gray-500">Four-layer security: Identity, JWT, policy-based authorization, and SignalR protection.</p>
</a>
<a href="blog/vsa-vs-layered-architecture.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">Feb 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Vertical Slice Architecture vs Traditional Layered Architecture: Side-by-Side Code</h2>
<p class="text-sm text-gray-500">7 files in 4 projects vs 1 file. A concrete code comparison of both approaches.</p>
</a>
<a href="blog/real-world-vsa-net10.html" class="blog-card">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">Feb 2026 · 6 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Real-World VSA: Shipping Production-Ready .NET 10 Apps with Indotalent</h2>
<p class="text-sm text-gray-500">How each Indotalent product is built. The stack, the architecture, and what you get for $21.</p>
</a>
</div>
<div class="mt-12 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50 border border-orange-200 rounded-2xl p-8 text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-3">Ready to Apply These Patterns?</h2>
<p class="text-gray-600 mb-6">Every Indotalent product is built with VSA, Blazor Server, and MudBlazor. Complete source code — $21.</p>
<a href="index.html#products" class="btn-primary text-base">Explore Products</a>
</div>
</div>
</section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="index.html" class="flex items-center gap-2"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><div class="flex flex-wrap gap-4 text-sm"><a href="index.html#products" class="text-gray-500 hover:text-brand-500">Products</a><a href="for-beginners.html" class="text-gray-500 hover:text-brand-500">Beginners</a><a href="for-freelancers.html" class="text-gray-500 hover:text-brand-500">Freelancers</a><a href="blog.html" class="text-brand-600 font-medium">Blog</a><a href="support.html" class="text-gray-500 hover:text-brand-500">Support</a></div><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/blazor-hosting-model.html
+64
View File
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor Server vs WebAssembly: Choosing the Right Hosting Model | Indotalent Blog</title>
<meta name="description" content="Compare Blazor Server and Blazor WebAssembly for enterprise applications. Which hosting model is right for your .NET 10 project? Complete analysis with pros and cons." />
<meta name="keywords" content="Blazor Server vs WebAssembly, Blazor hosting model, Blazor Server SignalR, Blazor WASM performance" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/blazor-hosting-model.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Blazor Server vs WebAssembly: Choosing the Right Hosting Model",
"description": "Compare Blazor Server and WASM for enterprise applications. Why Indotalent products use Blazor Server.",
"author": { "@type": "Person", "name": "go2ismail" },
"datePublished": "2026-06-01",
"publisher": { "@type": "Organization", "name": "Indotalent" }
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.indotalent.com/blog/" },
{ "@type": "ListItem", "position": 3, "name": "Blazor Server vs WebAssembly", "item": "https://www.indotalent.com/blog/blazor-hosting-model.html" }
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article pre{background:#1f2937;color:#f9fafb;padding:16px;border-radius:10px;overflow-x:auto;margin:1rem 0;font-size:0.85rem;line-height:1.6}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">Blazor Hosting Model</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">June 2026 · 7 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">Blazor Server vs WebAssembly: Choosing the Right Hosting Model</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">For enterprise applications handling sensitive data, <strong>Blazor Server is the recommended choice</strong>. It keeps your code and data secure on the server, provides sub-second initial load times, and simplifies deployment. All Indotalent products use Blazor Server.</p></div>
<article>
<p>Blazor offers two primary hosting models, and choosing between them has significant implications for your application's architecture, performance, and security posture. Understanding the trade-offs is essential before starting any enterprise Blazor project.</p>
<h2>Blazor Server: The Enterprise Choice</h2>
<p>Blazor Server executes all C# code on the server. The browser receives a thin HTML document and maintains a persistent SignalR WebSocket connection. Every UI event — button clicks, form submissions, data grid interactions — is serialized over this connection, processed server-side, and the resulting UI diff is sent back. This architecture delivers sub-second initial load times, full access to server resources (database connections, file system, caching), and superior security because your source code, connection strings, and business logic never leave the server.</p>
<h2>Blazor WebAssembly: Offline-First</h2>
<p>Blazor WASM downloads the entire .NET runtime and your application DLLs to the browser. This enables fully offline operation and reduces server load, but the initial download can be 5-20 MB, leading to slow first-visit experiences. WASM applications must communicate with the backend exclusively through HTTP APIs, adding latency and complexity compared to Server's direct SignalR connection.</p>
<h2>The Verdict for Enterprise Apps</h2>
<p>For enterprise applications handling sensitive data — CRM systems with customer PII, HRM systems with employee records, WMS systems with inventory data — Blazor Server is the recommended choice. It keeps your intellectual property and sensitive data secure on the server, provides instant load times for internal users, and simplifies the deployment architecture to a single process. All Indotalent products use Blazor Server for exactly these reasons.</p>
<h2>Key Takeaways</h2>
<ul><li>Blazor Server = sub-second loads, server-side security, simpler deployment</li><li>Blazor WASM = offline capability, reduced server load, larger initial download</li><li>Choose Server for enterprise apps with sensitive data</li><li>All 9 Indotalent products are built with Blazor Server</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">See Blazor Server in action</p><p class="text-sm text-gray-600 mb-4">Every Indotalent product is a complete Blazor Server application. Complete source code — $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/blazor-performance-optimization.html
+42
View File
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor Server Performance Optimization: Real-World Techniques | Indotalent Blog</title>
<meta name="description" content="ShouldRender, virtualization, no-tracking queries, and server-side pagination for Blazor Server apps. Production-tested techniques used in Indotalent products." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/blazor-performance-optimization.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"Article","headline":"Blazor Server Performance Optimization: Real-World Techniques","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-04-01","publisher":{"@type":"Organization","name":"Indotalent"}}</script>
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"Blazor Performance Optimization","item":"https://www.indotalent.com/blog/blazor-performance-optimization.html" }]}</script>
<script src="https://cdn.tailwindcss.com"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">Blazor Performance</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">April 2026 · 7 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">Blazor Server Performance Optimization: Real-World Techniques</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">Four techniques that cut rendering overhead by 50%+: ShouldRender overrides, MudBlazor virtualization, EF Core no-tracking queries, and server-side pagination. All Indotalent products ship with these baked in.</p></div>
<article>
<p>Blazor Server's SignalR-based architecture means every UI interaction involves a network round-trip. While this is fast on local networks or within the same datacenter, applications must be optimized for scenarios with higher latency or large datasets.</p>
<h2>1. ShouldRender() Overrides</h2>
<p>By default, Blazor re-renders a component when any of its parameters change. For components with complex rendering trees, override <code>ShouldRender()</code> to return false when no visual change is needed. This can cut rendering overhead by 50%+ in data-heavy pages.</p>
<h2>2. Virtualization</h2>
<p>MudBlazor's <code>Virtualize</code> component renders only the visible rows in a list. For grids with 10,000+ rows, this reduces DOM nodes from thousands to dozens, keeping the UI responsive even with massive datasets.</p>
<h2>3. EF Core No-Tracking Queries</h2>
<p>Read-only queries should use <code>.AsNoTracking()</code> to avoid EF Core's change tracking overhead. This can improve query performance by 30-50% for list views, dashboards, and reports.</p>
<h2>4. Server-Side Pagination</h2>
<p>Never load entire tables into memory. Implement pagination at the database level using <code>.Skip()</code> and <code>.Take()</code>. MudBlazor's data grid supports server-side pagination out of the box with its <code>ServerData</code> property.</p>
<h2>Key Takeaways</h2>
<ul><li>Override ShouldRender() to cut rendering overhead by 50%+</li><li>Use MudBlazor virtualization for large datasets</li><li>Apply AsNoTracking() for all read-only EF Core queries</li><li>Implement server-side pagination — never load full tables</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">See optimized Blazor code</p><p class="text-sm text-gray-600 mb-4">All Indotalent products ship with these optimizations. $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/blazor-server-security-jwt.html
+42
View File
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Securing Your Blazor Server Application with JWT and ASP.NET Core Identity | Indotalent Blog</title>
<meta name="description" content="Four-layer security for Blazor Server: ASP.NET Core Identity, JWT authentication for REST APIs, policy-based authorization, and SignalR protection. Complete guide." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/blazor-server-security-jwt.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"Article","headline":"Securing Your Blazor Server Application with JWT and ASP.NET Core Identity","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-03-01","publisher":{"@type":"Organization","name":"Indotalent"}}</script>
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"Blazor Server Security","item":"https://www.indotalent.com/blog/blazor-server-security-jwt.html" }]}</script>
<script src="https://cdn.tailwindcss.com"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">Blazor Security</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">March 2026 · 8 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">Securing Your Blazor Server Application with JWT and ASP.NET Core Identity</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">Four-layer security: ASP.NET Core Identity for user management, JWT for API endpoints, policy-based authorization for fine-grained control, and SignalR protection for real-time channels.</p></div>
<article>
<p>Security is a layered concern in Blazor Server applications. The framework provides multiple protection mechanisms that must be configured correctly.</p>
<h2>Layer 1: ASP.NET Core Identity</h2>
<p>Identity provides user management, password hashing, role management, and cookie-based authentication. For Blazor Server, the default cookie authentication is sufficient for internal page access.</p>
<h2>Layer 2: JWT for API Endpoints</h2>
<p>When your Blazor app also exposes a REST API, cookies aren't appropriate. JWT bearer tokens provide stateless authentication. Indotalent products configure both authentication schemes simultaneously: cookies for Razor components, JWT for Minimal API endpoints.</p>
<h2>Layer 3: Policy-Based Authorization</h2>
<p>Role-based authorization works for simple cases, but policy-based authorization provides finer control. Define policies like "CanApproveOrders" or "CanViewFinancialReports" and apply them declaratively.</p>
<h2>Layer 4: Secure SignalR</h2>
<p>SignalR hubs handle real-time UI updates. Ensure hubs are protected with the <code>[Authorize]</code> attribute. Never transmit sensitive data through hub methods without encryption.</p>
<h2>Key Takeaways</h2>
<ul><li>Identity + JWT dual authentication for Razor components and API endpoints</li><li>Policy-based authorization for fine-grained access control</li><li>SignalR hubs must be protected with [Authorize]</li><li>All Indotalent products come with pre-configured security layers</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">Explore secure Blazor products</p><p class="text-sm text-gray-600 mb-4">All Indotalent products ship with JWT + Identity pre-configured. $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/clean-architecture-to-vsa-migration.html
+40
View File
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>From Clean Architecture to Vertical Slices: A Practical Migration Guide | Indotalent Blog</title>
<meta name="description" content="Step-by-step approach to migrate from layered architecture to VSA, one feature at a time. Phase 1: pick one feature. Phase 2: extract validation. Phase 3: repeat." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/clean-architecture-to-vsa-migration.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"Article","headline":"From Clean Architecture to Vertical Slices: A Practical Migration Guide","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-03-01","publisher":{"@type":"Organization","name":"Indotalent"}}</script>
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"Clean Architecture to VSA Migration","item":"https://www.indotalent.com/blog/clean-architecture-to-vsa-migration.html" }]}</script>
<script src="https://cdn.tailwindcss.com"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">VSA Migration Guide</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">March 2026 · 10 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">From Clean Architecture to Vertical Slices: A Practical Migration Guide</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">You don't need to rewrite your entire application. Migrate feature by feature. VSA preserves the good parts of Clean Architecture while reorganizing by business capability.</p></div>
<article>
<p>You don't need to rewrite your entire application to adopt VSA. The migration can be gradual, feature by feature. Here's the step-by-step approach I've used on production systems.</p>
<h2>Phase 1: Pick One Feature</h2>
<p>Choose a self-contained business operation — creating an order, registering a customer, processing a payment. Create a new folder: <code>Features/[FeatureName]/</code>. Inside, create a single file containing: the Minimal API endpoint mapping, the MediatR command or query record, and the handler class. Move the existing controller action logic and service layer code into the handler.</p>
<h2>Phase 2: Extract Validation</h2>
<p>If you're using FluentValidation, add a validator class in the same folder. If not, this is the perfect time to introduce it. Register validators via assembly scanning so they're discovered automatically.</p>
<h2>Phase 3: Repeat</h2>
<p>Continue migrating features one at a time. You'll notice that as more features move to VSA, the old layered structure becomes thinner. Eventually, you can delete entire projects that are now empty.</p>
<h2>Key Takeaways</h2>
<ul><li>Migration is additive, not destructive — VSA features run alongside layered code</li><li>Start with one self-contained business operation</li><li>Add validation in the same feature folder using FluentValidation</li><li>Gradually delete empty projects as more features migrate</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">Get VSA-ready source code</p><p class="text-sm text-gray-600 mb-4">Every Indotalent product demonstrates a complete VSA migration target. $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/cqrs-mediatr-no-spaghetti-code.html
+488
View File
@@ -0,0 +1,488 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CQRS + MediatR in VSA: Make Your Code Not Spaghetti Code | Indotalent Blog</title>
<meta name="description" content="How CQRS and MediatR inside Vertical Slice Architecture eliminate spaghetti code. See the before-and-after transformation of a tangled controller into clean VSA slices." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/cqrs-mediatr-no-spaghetti-code.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"Article","headline":"CQRS + MediatR in VSA: Make Your Code Not Spaghetti Code","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-07-01","publisher":{"@type":"Organization","name":"Indotalent"}}</script>
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"CQRS + MediatR: No Spaghetti Code","item":"https://www.indotalent.com/blog/cqrs-mediatr-no-spaghetti-code.html" }]}</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article pre{background:#1f2937;color:#f9fafb;padding:16px;border-radius:10px;overflow-x:auto;margin:1rem 0;font-size:0.85rem;line-height:1.6}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}article .spaghetti-box{background:#fef2f2;border:1px solid #fecaca;border-left:5px solid #ef4444;padding:14px 18px;border-radius:0 10px 10px 0;margin:1.2rem 0}article .clean-box{background:#f0fdf4;border:1px solid #bbf7d0;border-left:5px solid #22c55e;padding:14px 18px;border-radius:0 10px 10px 0;margin:1.2rem 0}article .label-spaghetti{display:inline-block;background:#fee2e2;color:#dc2626;font-weight:800;font-size:0.75rem;padding:3px 12px;border-radius:6px;border:1px solid #fecaca;margin-bottom:0.5rem;letter-spacing:0.5px}article .label-clean{display:inline-block;background:#dcfce7;color:#16a34a;font-weight:800;font-size:0.75rem;padding:3px 12px;border-radius:6px;border:1px solid #bbf7d0;margin-bottom:0.5rem;letter-spacing:0.5px}article .vsa-glow{background:linear-gradient(135deg,rgba(249,115,22,0.06),rgba(234,88,12,0.02));border:1px solid rgba(249,115,22,0.15);border-radius:12px;padding:16px 20px;margin:1.2rem 0}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">CQRS + MediatR: No Spaghetti Code</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-green-50 text-green-700 border border-green-200 rounded-full px-2.5 py-0.5">CQRS</span><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-200 rounded-full px-2.5 py-0.5">MediatR</span><span class="text-xs text-gray-400">July 2026 · 14 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">CQRS + MediatR in VSA: Make Your Code Not Spaghetti Code</h1>
<div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-8"><p class="text-sm text-red-800 font-semibold mb-1">🍝 Spaghetti Code Alert</p><p class="text-sm text-red-700">We're exposing real spaghetti code — the kind that lives inside traditional layered architecture controllers. Then we'll show you how CQRS + MediatR, powered by Vertical Slice Architecture, eliminates it completely.</p></div>
<article>
<p>Let's call it what it is: spaghetti code. Every .NET developer has seen it. Every developer has probably written it at 11 PM on a Friday, promising to refactor later. That controller with 700 lines of business logic, validation, database access, email sending, and who-knows-what-else — all tangled together into one unmaintainable mess. That is spaghetti code. And in a traditional layered architecture, spaghetti code is not the exception. It is the inevitable destination.</p>
<p>Why does layered architecture breed spaghetti code? Because the architecture itself scatters related logic across multiple projects and layers. An order creation feature touches 7 files across 4 projects: <code>OrderController.cs</code>, <code>IOrderService.cs</code>, <code>OrderService.cs</code>, <code>IOrderRepository.cs</code>, <code>OrderRepository.cs</code>, <code>Order.cs</code>, <code>CreateOrderDto.cs</code>. To understand how an order is created, you must mentally stitch together code from all these files — like following individual strands of spaghetti across the entire plate. The architecture itself creates the tangle. Spaghetti code isn't a developer problem in layered architecture; it's an architectural problem.</p>
<p>But there is a way out. CQRS (Command Query Responsibility Segregation) combined with MediatR, inside a Vertical Slice Architecture (VSA), eliminates spaghetti code at the architectural level. Instead of organizing code by technical layer — all controllers together, all services together, all repositories together — VSA organizes code by business feature. Each feature slice contains everything that feature needs: the command, the handler, the validator, and any domain logic. One folder. One feature. Zero spaghetti code.</p>
<h2>The Problem: How Layered Architecture Creates Spaghetti Code</h2>
<p>Before we dive into the VSA solution, let's understand exactly how layered architecture produces spaghetti code. The fundamental issue is that layered architecture groups code by <em>what things are</em> technically — controllers, services, repositories — rather than <em>what they do</em> for the business. This means that any single business operation is spread across multiple layers and multiple projects. When you need to trace the flow of "creating an order," you jump from the presentation layer to the application layer to the domain layer to the infrastructure layer. Each jump is an opportunity for spaghetti code to creep in.</p>
<p>Adding a new feature in layered architecture means touching files in every layer. Adding validation? That goes in the controller, or maybe the service, or maybe a FluentValidation validator injected into the service — the decision is arbitrary, and that arbitrariness is what spawns spaghetti code. Need to send an email after order creation? Do you put it in the service? The controller? A domain event? There's no clear answer in layered architecture, so developers just stuff it wherever it fits, and the spaghetti code grows thicker with every commit.</p>
<h2>Before: Spaghetti Code in a Layered Architecture</h2>
<p>Here's what spaghetti code looks like in a typical layered .NET application. This is a single <code>OrdersController</code> that handles creating an order. Notice how validation, data access, discount calculation, tax logic, email sending, and logging are all mashed together. This is textbook spaghetti code — every concern entangled with every other concern.</p>
<div class="spaghetti-box">
<span class="label-spaghetti">🍝 SPAGHETTI CODE — Layered Architecture (BEFORE)</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">// Controllers/OrdersController.cs
// Spaghetti code: 7 concerns in 1 method across 4+ projects
[ApiController]
[Route("api/[controller]")]
public class OrdersController : ControllerBase
{
private readonly AppDbContext _context;
private readonly IEmailService _emailService;
private readonly ILogger<OrdersController> _logger;
[HttpPost]
public async Task<IActionResult> Create(CreateOrderDto dto)
{
// Spaghetti concern #1: Validation mixed inline
if (string.IsNullOrWhiteSpace(dto.CustomerEmail))
return BadRequest("Email required");
if (dto.Items == null || dto.Items.Count == 0)
return BadRequest("No items");
// Spaghetti concern #2: Direct data access in controller
var customer = await _context.Customers
.FirstOrDefaultAsync(c => c.Email == dto.CustomerEmail);
if (customer == null) return BadRequest("Customer not found");
decimal subtotal = 0;
var orderItems = new List<OrderItem>();
foreach (var item in dto.Items)
{
var product = await _context.Products.FindAsync(item.ProductId);
if (product == null)
return BadRequest($"Product {item.ProductId} not found");
// Spaghetti concern #3: Business rules tangled with DB
if (product.Stock < item.Quantity)
return BadRequest($"Out of stock: {product.Name}");
// Spaghetti concern #4: Discount logic hardcoded
decimal discount = 0;
if (customer.IsPremium && product.Category == "Electronics")
discount = product.Price * 0.10m;
else if (customer.IsPremium)
discount = product.Price * 0.05m;
else if (item.Quantity > 10)
discount = product.Price * 0.02m;
var lineTotal = (product.Price - discount) * item.Quantity;
subtotal += lineTotal;
orderItems.Add(new OrderItem
{
ProductId = product.Id,
Quantity = item.Quantity,
UnitPrice = product.Price,
Discount = discount,
LineTotal = lineTotal
});
product.Stock -= item.Quantity;
}
// Spaghetti concern #5: Tax logic mixed in
decimal taxRate = customer.Country switch
{
"US" => 0.07m,
"UK" => 0.20m,
"AU" => 0.10m,
_ => 0.10m
};
decimal tax = subtotal * taxRate;
decimal total = subtotal + tax;
var order = new Order
{
CustomerId = customer.Id,
Subtotal = subtotal,
Tax = tax,
Total = total,
Status = "Pending",
CreatedAt = DateTime.UtcNow,
Items = orderItems
};
_context.Orders.Add(order);
await _context.SaveChangesAsync();
// Spaghetti concern #6: Email sending inside controller
await _emailService.SendAsync(customer.Email,
"Order Confirmed",
$"Dear {customer.Name}, order #{order.Id} total: {total:C}");
// Spaghetti concern #7: Logging embedded
_logger.LogInformation("Order {Id} created for {Email}",
order.Id, customer.Email);
return Ok(new { order.Id, order.Total });
}
}</pre>
</div>
<p>Look at this spaghetti code carefully. Seven distinct concerns — validation, data access, business rules, discount calculation, tax calculation, email notification, and logging — are all entangled in a single method. This is what layered architecture produces over time. Each new requirement adds another strand of spaghetti to the plate. Need to support a new country's tax rate? You're editing the same method that also handles email sending. Want to change how premium discounts work? You're touching code that also validates email addresses. The spaghetti code entanglement means you cannot change one thing without risking everything else.</p>
<p>And testing this spaghetti code? Forget about it. The discount logic is buried inside a loop that's inside a method that directly instantiates <code>AppDbContext</code>. You can't unit-test the discount calculation without spinning up a database. You can't test the tax logic without mocking an email service — which has nothing to do with tax. Spaghetti code doesn't just look bad. It actively prevents you from writing tests, which means you can't refactor, which means the spaghetti code gets worse. It's a death spiral.</p>
<h2>The Solution: VSA + CQRS + MediatR = No Spaghetti Code</h2>
<p>Vertical Slice Architecture flips the script entirely. Instead of organizing code by technical layer, VSA organizes by business feature. Every feature lives in its own folder. Inside that folder, you'll find the command/query, the handler, the validator, and any domain logic — all in one place. CQRS, implemented through MediatR, provides the messaging backbone. Commands (writes) and Queries (reads) are clearly separated. Cross-cutting concerns like validation and logging are handled by MediatR pipeline behaviors — written once, applied everywhere.</p>
<p>In VSA, the folder structure for our order creation feature looks like this:</p>
<pre style="background:#1f2937;color:#f9fafb;padding:16px;border-radius:10px;overflow-x:auto;margin:1rem 0;font-size:0.85rem;line-height:1.6">Features/
└── Orders/
├── CreateOrder/
│ ├── CreateOrderCommand.cs ← The command (DTO)
│ ├── CreateOrderHandler.cs ← Business logic only
│ ├── CreateOrderValidator.cs ← Validation rules
│ └── CreateOrderEndpoint.cs ← Minimal API endpoint
├── GetOrderById/
│ ├── GetOrderByIdQuery.cs
│ └── GetOrderByIdHandler.cs
└── Shared/
├── Order.cs ← Domain entity
└── OrderItem.cs</pre>
<p>One feature, one folder. No jumping between projects. No hunting through layers. No spaghetti code. When you need to understand how an order is created, you open the <code>CreateOrder</code> folder and everything is right there. When you need to add a new field to orders, you change files in one folder — not across four projects. This is the architectural antidote to spaghetti code.</p>
<h2>After: Clean Code with VSA, CQRS, and MediatR</h2>
<p>Now let's see the same order creation feature rebuilt with CQRS + MediatR inside a Vertical Slice Architecture. Every concern is separated. Every class has a single responsibility. There is not a trace of spaghetti code anywhere.</p>
<div class="clean-box">
<span class="label-clean">✅ CLEAN CODE — VSA + CQRS + MediatR (AFTER)</span>
</div>
<h3>1. The Command — A Simple, Focused DTO</h3>
<p>The command is a plain record. It carries data. Nothing else. This is not spaghetti code; it's a single-purpose data structure.</p>
<div class="clean-box">
<span class="label-clean">✅ Features/Orders/CreateOrder/CreateOrderCommand.cs</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">public record CreateOrderCommand(
string CustomerEmail,
List<OrderItemDto> Items
) : IRequest<CreateOrderResult>;
public record OrderItemDto(Guid ProductId, int Quantity);
public record CreateOrderResult(Guid OrderId, decimal Total);</pre>
</div>
<h3>2. The Validator — Validation Lives in Its Own Class</h3>
<p>Validation is extracted into a dedicated FluentValidation validator. No validation logic pollutes the handler or the controller. This is how you prevent spaghetti code: one class, one job.</p>
<div class="clean-box">
<span class="label-clean">✅ Features/Orders/CreateOrder/CreateOrderValidator.cs</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">public class CreateOrderValidator
: AbstractValidator<CreateOrderCommand>
{
public CreateOrderValidator()
{
RuleFor(x => x.CustomerEmail)
.NotEmpty()
.EmailAddress();
RuleFor(x => x.Items)
.NotEmpty()
.Must(items => items.Count > 0);
RuleForEach(x => x.Items).ChildRules(item =>
{
item.RuleFor(i => i.ProductId)
.NotEqual(Guid.Empty);
item.RuleFor(i => i.Quantity)
.InclusiveBetween(1, 1000);
});
}
}</pre>
</div>
<h3>3. The Handler — Business Logic Only, Zero Spaghetti Code</h3>
<p>The handler is the heart of the feature slice. It contains <strong>only</strong> business logic. No validation (that's already done by the pipeline). No logging (also in the pipeline). No email sending (that's a domain event). Just pure, focused business logic — the polar opposite of spaghetti code.</p>
<div class="clean-box">
<span class="label-clean">✅ Features/Orders/CreateOrder/CreateOrderHandler.cs</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">public class CreateOrderHandler
: IRequestHandler<CreateOrderCommand, CreateOrderResult>
{
private readonly AppDbContext _context;
public CreateOrderHandler(AppDbContext context)
=> _context = context;
public async Task<CreateOrderResult> Handle(
CreateOrderCommand cmd, CancellationToken ct)
{
var customer = await _context.Customers
.Where(c => c.Email == cmd.CustomerEmail)
.FirstOrDefaultAsync(ct);
if (customer is null)
throw new NotFoundException("Customer not found");
var order = Order.Create(customer.Id);
foreach (var item in cmd.Items)
{
var product = await _context.Products
.FindAsync([item.ProductId], ct);
if (product is null)
throw new NotFoundException(
$"Product {item.ProductId}");
product.ReserveStock(item.Quantity);
var discount = customer.CalculateDiscount(
product, item.Quantity);
order.AddItem(product, item.Quantity, discount);
}
order.CalculateTotals(customer.Country);
_context.Orders.Add(order);
await _context.SaveChangesAsync(ct);
order.AddDomainEvent(
new OrderCreatedDomainEvent(order.Id, customer.Email));
return new CreateOrderResult(order.Id, order.Total);
}
}</pre>
</div>
<h3>4. Domain Logic — Rich, Testable, No Spaghetti Code</h3>
<p>Business rules live in the domain entities themselves — where they belong. The discount calculation and stock reservation are methods on the entity, not buried in a controller. This is how you eliminate spaghetti code: put logic where it's discoverable.</p>
<div class="clean-box">
<span class="label-clean">✅ Features/Orders/Shared/Order.cs (Domain Entity)</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">public class Order
{
public Guid Id { get; private set; }
public Guid CustomerId { get; private set; }
public decimal Subtotal { get; private set; }
public decimal Tax { get; private set; }
public decimal Total { get; private set; }
public OrderStatus Status { get; private set; }
public List<OrderItem> Items { get; private set; } = [];
public static Order Create(Guid customerId)
=> new() { Id = Guid.NewGuid(), CustomerId = customerId,
Status = OrderStatus.Pending };
public void AddItem(Product product, int quantity, decimal discount)
{
var lineTotal = (product.Price - discount) * quantity;
Items.Add(new OrderItem
{
ProductId = product.Id,
Quantity = quantity,
UnitPrice = product.Price,
Discount = discount,
LineTotal = lineTotal
});
Subtotal += lineTotal;
}
public void CalculateTotals(string country)
{
Tax = Subtotal * TaxRate.For(country);
Total = Subtotal + Tax;
}
// Rich domain behavior — no spaghetti code here
public void MarkAsShipped() =>
Status = OrderStatus.Shipped;
public void Cancel() =>
Status = OrderStatus.Cancelled;
}</pre>
</div>
<h3>5. Pipeline Behaviors — Cross-Cutting Concerns, Applied Once</h3>
<p>MediatR pipeline behaviors are the secret weapon against spaghetti code. Instead of copying validation and logging code into every handler (which is how spaghetti code starts), you write it once as a behavior and it applies to every handler automatically. This is the DRY principle at the architectural level.</p>
<div class="clean-box">
<span class="label-clean">✅ Pipeline/ValidationBehavior.cs — applied to ALL handlers</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">public class ValidationBehavior<TRequest, TResponse>
: IPipelineBehavior<TRequest, TResponse>
where TRequest : IRequest<TResponse>
{
private readonly IServiceProvider _sp;
public async Task<TResponse> Handle(TRequest request,
RequestHandlerDelegate<TResponse> next,
CancellationToken ct)
{
var validator = _sp.GetService<
IValidator<TRequest>>();
if (validator is not null)
{
var result = await validator
.ValidateAsync(request, ct);
if (!result.IsValid)
throw new ValidationException(
result.Errors);
}
return await next();
}
}</pre>
</div>
<div class="clean-box">
<span class="label-clean">✅ Pipeline/LoggingBehavior.cs — applied to ALL handlers</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">public class LoggingBehavior<TRequest, TResponse>
: IPipelineBehavior<TRequest, TResponse>
where TRequest : IRequest<TResponse>
{
private readonly ILogger<LoggingBehavior
<TRequest, TResponse>> _logger;
public async Task<TResponse> Handle(TRequest request,
RequestHandlerDelegate<TResponse> next,
CancellationToken ct)
{
var name = typeof(TRequest).Name;
_logger.LogInformation("➡️ {Name} started", name);
var sw = Stopwatch.StartNew();
var response = await next();
sw.Stop();
_logger.LogInformation(
"✅ {Name} completed in {Ms}ms", name, sw.ElapsedMilliseconds);
return response;
}
}</pre>
</div>
<h3>6. Domain Events — Side Effects, Not Spaghetti Code</h3>
<p>Email sending after order creation is a side effect — it doesn't belong in the handler. With domain events, the handler raises an event, and a separate handler sends the email. No spaghetti code entanglement between order creation and email sending.</p>
<div class="clean-box">
<span class="label-clean">✅ Features/Orders/CreateOrder/OrderCreatedDomainEventHandler.cs</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">public class OrderCreatedDomainEventHandler
: INotificationHandler<OrderCreatedDomainEvent>
{
private readonly IEmailService _email;
private readonly AppDbContext _context;
public async Task Handle(
OrderCreatedDomainEvent evt, CancellationToken ct)
{
var customer = await _context.Customers
.FindAsync([evt.CustomerId], ct);
await _email.SendAsync(customer!.Email,
"Order Confirmed ✅",
$"Your order #{evt.OrderId} is being processed.");
}
}</pre>
</div>
<h3>7. The Endpoint — Thin, Clean, No Spaghetti Code</h3>
<p>In VSA, the endpoint (whether a controller action or Minimal API) is razor-thin. It does exactly one thing: send the command through MediatR. That's it. This is what "no spaghetti code" looks like at the API surface.</p>
<div class="clean-box">
<span class="label-clean">✅ Features/Orders/CreateOrder/CreateOrderEndpoint.cs</span>
<pre style="margin:0.5rem 0 0 0;background:#1f2937">public static class CreateOrderEndpoint
{
public static void Map(IEndpointRouteBuilder app)
{
app.MapPost("/api/orders", async (
CreateOrderCommand cmd,
IMediator mediator,
CancellationToken ct) =>
{
var result = await mediator.Send(cmd, ct);
return Results.Created(
$"/api/orders/{result.OrderId}", result);
})
.WithName("CreateOrder")
.WithTags("Orders");
}
}</pre>
</div>
<h2>The Spaghetti Code Comparison: Side by Side</h2>
<p>Let's put it side by side so the difference is undeniable. On the left: the spaghetti code layered approach. On the right: the clean VSA + CQRS + MediatR approach.</p>
<div class="vsa-glow">
<table style="width:100%;font-size:0.85rem;border-collapse:collapse">
<thead>
<tr style="background:#fef2f2"><th style="padding:10px;text-align:left;color:#dc2626;width:50%;border:1px solid #fecaca">🍝 Layered Spaghetti Code</th><th style="padding:10px;text-align:left;color:#16a34a;width:50%;border:1px solid #bbf7d0;background:#f0fdf4">✅ VSA + CQRS + MediatR</th></tr>
</thead>
<tbody>
<tr><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">7 files across 4+ projects per feature</td><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">3-4 files in 1 folder per feature</td></tr>
<tr><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Validation scattered across controllers and services</td><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Single FluentValidation validator per command</td></tr>
<tr><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Business logic mixed with data access</td><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Handler = business logic only</td></tr>
<tr><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Logging copied into every method</td><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">One LoggingBehavior for all handlers</td></tr>
<tr><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Email sending embedded in controller</td><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Decoupled domain event handler</td></tr>
<tr><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Impossible to unit test individual concerns</td><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Every class is independently testable</td></tr>
<tr><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">One change touches unrelated code</td><td style="padding:10px;border:1px solid #e5e7eb;vertical-align:top">Changes stay within the feature folder</td></tr>
</tbody>
</table>
</div>
<h2>Why CQRS + MediatR + VSA Is the Spaghetti Code Antidote</h2>
<p>The combination of these three patterns doesn't just reduce spaghetti code — it makes it architecturally impossible. Here's why each piece matters:</p>
<p><strong>Vertical Slice Architecture</strong> groups code by feature, not by technical layer. Since all the code for "create an order" lives in one folder, there's no temptation to scatter logic across projects. The architecture itself enforces cohesion. You cannot create spaghetti code when everything for a feature is co-located.</p>
<p><strong>CQRS</strong> forces you to separate reads from writes. A command handler only handles commands. A query handler only handles queries. You can't accidentally mix read logic into a write operation because the interfaces are different: <code>IRequest<TResponse></code> for commands, <code>IRequest<TResult></code> for queries. The type system itself prevents spaghetti code.</p>
<p><strong>MediatR</strong> provides the pipeline that handles cross-cutting concerns. Validation, logging, transaction management, authorization — these are all behaviors that execute before and after your handler. Your handler doesn't know about them. They don't know about your handler. This is the separation of concerns that spaghetti code violates, enforced by the framework.</p>
<div class="vsa-glow">
<p style="margin-bottom:0.5rem;font-weight:700;color:#c2410c">🔥 Indotalent Insight</p>
<p style="margin-bottom:0">Every Indotalent product — from the CRM to the WMS, from the HRM to the CMS — is built with exactly this architecture: VSA + CQRS + MediatR. Not a single line of spaghetti code. You get the complete source code for $21, and you can see for yourself how a production-grade .NET 10 application looks when it's clean from the ground up.</p>
</div>
<h2>Key Takeaways</h2>
<ul>
<li><strong>Layered architecture breeds spaghetti code</strong> by scattering related logic across multiple projects and layers — 7 files in 4 projects for one feature.</li>
<li><strong>VSA eliminates spaghetti code</strong> by grouping all code for a feature in a single folder — 3-4 files, one place, full cohesion.</li>
<li><strong>CQRS prevents concerns from mixing</strong> — commands and queries are different types, so you can't accidentally blend read and write logic.</li>
<li><strong>MediatR pipeline behaviors</strong> handle cross-cutting concerns once, stopping the copy-paste spaghetti code cycle dead in its tracks.</li>
<li><strong>Domain events decouple side effects</strong> — email sending, audit logging, and cache invalidation live in their own handlers, not tangled into business logic.</li>
<li><strong>The result is fully testable code</strong> — every class has one responsibility, making unit testing trivial compared to the spaghetti code alternative.</li>
</ul>
<h2>Stop Writing Spaghetti Code. Start with VSA.</h2>
<p>Spaghetti code isn't a personality trait. It's not something you're doomed to write because you're a "messy" developer. Spaghetti code is a symptom of the wrong architecture. When your architecture scatters related code across layers and projects, it rewards tangling. When your architecture groups code by feature, it rewards cleanliness. VSA + CQRS + MediatR is that clean architecture — and once you try it, you'll wonder how you ever tolerated spaghetti code.</p>
<p>The next time you open a controller and find 700 lines of intertwined logic, remember: it's not your fault. But it is your responsibility to fix it. And the fix has a name: CQRS + MediatR, inside a Vertical Slice Architecture. No more spaghetti code. Just clean, maintainable, testable .NET applications that make you proud to call yourself a developer.</p>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">Explore VSA + CQRS + MediatR in Production</p><p class="text-sm text-gray-600 mb-4">See how Indotalent products implement this exact architecture. Zero spaghetti code. Complete source — $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html></content>
<content>Write file to 'blog/cqrs-mediatr-no-spaghetti-code.html'.
blog/index.html
+128
View File
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Blog">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog — .NET 10, Blazor & Vertical Slice Architecture | Indotalent</title>
<meta name="description" content="Technical articles on .NET 10, Blazor Server, Vertical Slice Architecture (VSA), MudBlazor, and enterprise source code. Real-world case studies for developers." />
<meta name="keywords" content="Vertical Slice Architecture, VSA, Blazor Server, .NET 10, MudBlazor, C#, enterprise source code, ASP.NET Core, MediatR" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/" />
<link rel="alternate" hreflang="en" href="https://www.indotalent.com/blog/" />
<link rel="alternate" hreflang="x-default" href="https://www.indotalent.com/blog/" />
<meta property="og:title" content="Blog — .NET 10, Blazor & VSA | Indotalent" />
<meta property="og:description" content="Technical case studies and deep dives into Vertical Slice Architecture, Blazor Server, and .NET 10 development." />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.indotalent.com/blog/" }
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.blog-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;transition:all 0.3s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(249,115,22,0.15);border-color:#f97316}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="../index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">Blog</span></li>
</ol>
</div>
</nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div>
</nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5"><span class="text-brand-700 text-xs font-medium tracking-wide">Technical Blog</span></div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4">Blog: <span class="gradient-text">.NET 10, Blazor & VSA</span></h1>
<p class="text-gray-500 max-w-xl mx-auto">Production-proven patterns for building enterprise .NET applications. Deep dives, case studies, and practical guides.</p>
</div>
<div class="space-y-4">
<a href="vsa-introduction.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">June 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Introduction to Vertical Slice Architecture in .NET 10</h2>
<p class="text-sm text-gray-500">How VSA organizes code by business features, why it beats layered architecture, and a concrete .NET 10 Minimal API example.</p>
</a>
<a href="blazor-hosting-model.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">June 2026 · 7 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Blazor Server vs WebAssembly: Choosing the Right Hosting Model</h2>
<p class="text-sm text-gray-500">Compare Blazor Server and WASM for enterprise applications. Why Indotalent products use Blazor Server.</p>
</a>
<a href="vsa-eliminates-project-hell.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">May 2026 · 6 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">How Vertical Slice Architecture Eliminates "Project Hell"</h2>
<p class="text-sm text-gray-500">From 15+ projects to a single monolith. How VSA keeps related code together and slashes compilation time.</p>
</a>
<a href="vsa-mediatr.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">May 2026 · 9 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Building Maintainable .NET Applications with MediatR and VSA</h2>
<p class="text-sm text-gray-500">How MediatR enables CQRS within VSA slices. Pipeline behaviors for validation, logging, and transactions.</p>
</a>
<a href="mudblazor-component-library.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-200 rounded-full px-2.5 py-0.5">MudBlazor</span><span class="text-xs text-gray-400">April 2026 · 5 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">MudBlazor: The Ultimate Component Library for Blazor Server</h2>
<p class="text-sm text-gray-500">50+ Material Design components. Why MudBlazor is the de facto standard for Blazor enterprise apps.</p>
</a>
<a href="blazor-performance-optimization.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">April 2026 · 7 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Blazor Server Performance Optimization: Real-World Techniques</h2>
<p class="text-sm text-gray-500">ShouldRender, virtualization, no-tracking queries, and server-side pagination for Blazor Server apps.</p>
</a>
<a href="clean-architecture-to-vsa-migration.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">March 2026 · 10 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">From Clean Architecture to Vertical Slices: A Practical Migration Guide</h2>
<p class="text-sm text-gray-500">Step-by-step approach to migrate from layered architecture to VSA, one feature at a time.</p>
</a>
<a href="blazor-server-security-jwt.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">March 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Securing Your Blazor Server Application with JWT and ASP.NET Core Identity</h2>
<p class="text-sm text-gray-500">Four-layer security: Identity, JWT, policy-based authorization, and SignalR protection.</p>
</a>
<a href="vsa-vs-layered-architecture.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">Feb 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Vertical Slice Architecture vs Traditional Layered Architecture: Side-by-Side Code</h2>
<p class="text-sm text-gray-500">7 files in 4 projects vs 1 file. A concrete code comparison of both approaches.</p>
</a>
<a href="real-world-vsa-net10.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">Feb 2026 · 6 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Real-World VSA: Shipping Production-Ready .NET 10 Apps with Indotalent</h2>
<p class="text-sm text-gray-500">How each Indotalent product is built. The stack, the architecture, and what you get for $21.</p>
</a>
</div>
<div class="mt-12 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50 border border-orange-200 rounded-2xl p-8 text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-3">Ready to Apply These Patterns?</h2>
<p class="text-gray-600 mb-6">Every Indotalent product is built with VSA, Blazor Server, and MudBlazor. Complete source code &mdash; $21.</p>
<a href="../index.html#products" class="btn-primary text-base">Explore Products</a>
</div>
</div>
</section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><div class="flex flex-wrap gap-4 text-sm"><a href="../index.html#products" class="text-gray-500 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-gray-500 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-gray-500 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-brand-600 font-medium">Blog</a><a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a></div><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/mudblazor-component-library.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MudBlazor: The Ultimate Component Library for Blazor Server | Indotalent Blog</title>
<meta name="description" content="50+ Material Design components. Why MudBlazor is the de facto standard for Blazor enterprise apps. Pure C# components with native two-way binding." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/mudblazor-component-library.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"Article","headline":"MudBlazor: The Ultimate Component Library for Blazor Server","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-04-01","publisher":{"@type":"Organization","name":"Indotalent"}}</script>
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"MudBlazor Component Library","item":"https://www.indotalent.com/blog/mudblazor-component-library.html" }]}</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">MudBlazor</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-200 rounded-full px-2.5 py-0.5">MudBlazor</span><span class="text-xs text-gray-400">April 2026 · 5 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">MudBlazor: The Ultimate Component Library for Blazor Server</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">MudBlazor provides 50+ Material Design components written in pure C# and Razor. With native two-way binding and a unified theming system, the <code>MudDataGrid</code> alone saves days of development.</p></div>
<article>
<p>MudBlazor has become the de facto standard component library for Blazor enterprise applications. It provides over 50 Material Design components — from simple buttons and inputs to complex data grids, charts, and date pickers — all designed specifically for Blazor's component model.</p>
<h2>Why MudBlazor Wins</h2>
<p>Unlike wrapping JavaScript libraries, MudBlazor components are written in pure C# and Razor. This means two-way binding works natively, event callbacks are type-safe, and components compose naturally through cascading parameters. The <code>MudDataGrid</code> alone handles sorting, filtering, pagination, and inline editing with minimal configuration — functionality that would take days to build from scratch. For enterprise apps like CRM or WMS systems that are data-grid heavy, MudBlazor's grid component is a massive productivity multiplier.</p>
<h2>Consistent Theming</h2>
<p>MudBlazor's theming system provides consistent typography, spacing, and color across all components. You define your brand colors once in <code>MudTheme</code>, and every component respects it. This ensures the 50+ pages in a typical Indotalent product look cohesive without writing custom CSS for each page.</p>
<h2>Key Takeaways</h2>
<ul><li>50+ components written in pure C# — no JavaScript wrappers</li><li>MudDataGrid handles sorting, filtering, pagination, and inline editing out of the box</li><li>Unified theming ensures visual consistency across entire applications</li><li>All Indotalent products are built with MudBlazor 9</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">See MudBlazor in production</p><p class="text-sm text-gray-600 mb-4">Every Indotalent product uses MudBlazor for its UI. $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/real-world-vsa-net10.html
+40
View File
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Real-World VSA: Shipping Production-Ready .NET 10 Apps with Indotalent | Indotalent Blog</title>
<meta name="description" content="How each Indotalent product is built. The complete stack, the architecture, and what you get for $21. Production-ready VSA source code with 50-100 feature slices each." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/real-world-vsa-net10.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"Article","headline":"Real-World VSA: Shipping Production-Ready .NET 10 Apps with Indotalent","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-02-01","publisher":{"@type":"Organization","name":"Indotalent"}}</script>
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"Real-World VSA","item":"https://www.indotalent.com/blog/real-world-vsa-net10.html" }]}</script>
<script src="https://cdn.tailwindcss.com"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">Real-World VSA</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">Feb 2026 · 6 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">Real-World VSA: Shipping Production-Ready .NET 10 Apps with Indotalent</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">Every Indotalent product is a complete .NET 10 application with 50-100 VSA feature slices, ready to deploy or customize. Clone, configure connection string, press F5 — running in 60 seconds.</p></div>
<article>
<p>Every Indotalent product is a complete, production-ready .NET 10 application built on Vertical Slice Architecture. These aren't templates or starter kits — they're full enterprise applications with 50-100 feature slices each, ready to deploy or customize.</p>
<h2>The Production Stack</h2>
<p>Each product runs on an identical, battle-tested stack: <strong>.NET 10 + ASP.NET Core 10 Minimal APIs</strong> for the backend, <strong>Blazor Server + MudBlazor 9</strong> for the UI, <strong>MediatR</strong> for CQRS within VSA slices, <strong>FluentValidation</strong> for request validation, <strong>Entity Framework Core + SQL Server</strong> for data access with migrations and seed data, and <strong>JWT + ASP.NET Core Identity</strong> for authentication and role-based authorization.</p>
<h2>What You Get</h2>
<p>A single Visual Studio solution that compiles in seconds. You clone the repo, configure your SQL Server connection string, run EF Core migrations (which automatically seed demo data), and press F5. The entire application — backend API, Blazor Server UI, database — runs locally in under 60 seconds from clone to working app.</p>
<h2>The Price</h2>
<p>Every product is priced at $21 (regularly $49) — accessible pricing for individual developers, freelancers, and small agencies. You get the complete, unrestricted source code with lifetime access. Study the architecture, extend it for clients, or deploy it as-is. Your purchase directly supports ongoing open-source development and keeps these products affordable for the .NET community.</p>
<h2>Key Takeaways</h2>
<ul><li>9 complete .NET 10 applications, each with 50-100 VSA feature slices</li><li>Identical production stack across all products for skill transferability</li><li>Clone → configure connection string → F5 = running app in 60 seconds</li><li>$21 each, lifetime access, complete unrestricted source code</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">Get production-ready VSA source code</p><p class="text-sm text-gray-600 mb-4">9 products. Complete source code. $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/vsa-ai-assisted-development.html
+196
View File
@@ -0,0 +1,196 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Why Vertical Slice Architecture is the Best Architecture for AI-Assisted Development | Indotalent Blog</title>
<meta name="description" content="VSA organizes code by feature in a single folder end-to-end. This makes AI tools like GitHub Copilot and ChatGPT dramatically more effective by keeping context focused in one place. Stop jumping between 7 projects." />
<meta name="keywords" content="VSA AI-assisted development, Vertical Slice Architecture AI, GitHub Copilot VSA, AI coding best architecture, AI-friendly code structure, Cursor AI .NET, ChatGPT code generation architecture" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/vsa-ai-assisted-development.html" />
<link rel="alternate" hreflang="en" href="https://www.indotalent.com/blog/vsa-ai-assisted-development.html" />
<link rel="alternate" hreflang="x-default" href="https://www.indotalent.com/blog/vsa-ai-assisted-development.html" />
<meta property="og:title" content="Why Vertical Slice Architecture is the Best Architecture for AI-Assisted Development" />
<meta property="og:description" content="VSA organizes code by feature end-to-end in a single folder — the perfect context window for AI tools." />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Why Vertical Slice Architecture is the Best Architecture for AI-Assisted Development",
"description": "How VSA's feature-centric organization maximizes AI coding tool effectiveness by keeping all context for a feature in one folder — no jumping between 7 projects.",
"author": { "@type": "Person", "name": "go2ismail" },
"datePublished": "2026-07-01",
"publisher": { "@type": "Organization", "name": "Indotalent" }
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.indotalent.com/blog.html" },
{ "@type": "ListItem", "position": 3, "name": "VSA for AI-Assisted Development", "item": "https://www.indotalent.com/blog/vsa-ai-assisted-development.html" }
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}
article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem;color:#1f2937}
article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}
article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}
article pre{background:#1f2937;color:#f9fafb;padding:16px;border-radius:10px;overflow-x:auto;margin:1rem 0;font-size:0.85rem;line-height:1.6}
article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}
article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}
.highlight-box{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #f59e0b;border-radius:12px;padding:20px;margin:1.5rem 0}
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.5rem 0}
.bad{background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:16px}
.good{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:16px}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="../index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><a href="../blog.html" class="hover:text-brand-500 transition-colors">Blog</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">VSA & AI-Assisted Development</span></li>
</ol>
</div>
</nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="../blog.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div>
</nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3">
<span class="text-xs font-semibold bg-violet-50 text-violet-700 border border-violet-200 rounded-full px-2.5 py-0.5">AI + VSA</span>
<span class="text-xs text-gray-400">July 2026 · 9 min read</span>
</div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">Why Vertical Slice Architecture is the Best Architecture for AI-Assisted Development</h1>
<div class="bg-violet-50 border border-violet-200 rounded-xl p-4 mb-8">
<p class="text-sm text-violet-800 font-semibold mb-1">TL;DR</p>
<p class="text-sm text-violet-700">VSA organizes every feature — from API endpoint to database query — <strong>in a single folder</strong>. This means AI tools like GitHub Copilot, Cursor, and ChatGPT have <strong>all the context they need in one place</strong>. No jumping between 7 projects. No missing abstractions. Just one folder, one feature, one perfect context window for AI. This is the architecture that makes AI-assisted development <strong>actually work</strong>.</p>
</div>
<article>
<h2>The Problem: AI Doesn't Understand Your Project Structure</h2>
<p>Here's what happens when you use AI coding tools with traditional Clean Architecture:</p>
<p>You ask Copilot to "add a validation rule to the Create Order endpoint." Copilot looks at the file you're in — maybe <code>CreateOrderCommand.cs</code> in the <code>Application</code> project. It generates code. But the code is wrong because <strong>Copilot can't see</strong> that the validation should also check a business rule in the <code>Domain</code> project, a permission defined in the <code>Infrastructure</code> project, and an existing query in the <code>Persistence</code> project. Those are in <strong>different folders, different projects, different context windows</strong>.</p>
<p>You end up playing ping-pong with the AI: "No, also check this..." — "Wait, there's another rule in..." — "The repository interface is actually..." Each round-trip is a context switch. Each context switch is a chance for the AI to hallucinate.</p>
<div class="highlight-box">
<p class="text-sm font-semibold text-amber-900 mb-2">🔑 The Core Insight</p>
<p class="text-sm text-amber-800">AI tools work best when <strong>all relevant code is visible within a single context window</strong>. VSA puts all feature code in one folder. Traditional architecture scatters it across 5-7 projects. Guess which one produces better AI-generated code?</p>
</div>
<h2>How VSA Makes AI 10x More Effective</h2>
<div class="comparison-grid">
<div class="bad">
<h3 class="text-base font-semibold text-red-800 mb-2">❌ Layered Architecture + AI</h3>
<ul class="text-sm text-red-700 space-y-1" style="list-style:none;padding:0">
<li>• AI sees 1 of 7 files in context</li>
<li>• Generated code misses cross-project dependencies</li>
<li>• Developer must manually assemble context</li>
<li>• Every prompt needs 5+ files as reference</li>
<li>• High hallucination rate</li>
</ul>
</div>
<div class="good">
<h3 class="text-base font-semibold text-emerald-800 mb-2">✅ VSA + AI</h3>
<ul class="text-sm text-emerald-700 space-y-1" style="list-style:none;padding:0">
<li>• AI sees endpoint + handler + DTOs + queries</li>
<li>• Single file has complete feature context</li>
<li>• Developer opens 1 file, AI understands everything</li>
<li>• One prompt = complete feature modification</li>
<li>• Dramatically lower hallucination rate</li>
</ul>
</div>
</div>
<h2>A Real Scenario: Adding a Field with AI</h2>
<p>Let's walk through a concrete example. You need to add a <code>DiscountCode</code> field to the Create Order feature.</p>
<h3>In Layered Architecture (The Painful Way)</h3>
<ol style="list-style:decimal;padding-left:1.5rem;margin-bottom:1rem">
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">Open <code>Controllers/OrdersController.cs</code> — tell AI about the endpoint</li>
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">Open <code>Application/Orders/CreateOrderCommand.cs</code> — tell AI about the DTO</li>
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">Open <code>Application/Orders/CreateOrderHandler.cs</code> — tell AI about the business logic</li>
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">Open <code>Domain/Entities/Order.cs</code> — tell AI about the domain model</li>
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">Open <code>Infrastructure/Persistence/AppDbContext.cs</code> — tell AI about the EF configuration</li>
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">Run EF Core migration — another context switch</li>
</ol>
<p><strong>7 files. 4 projects. 6+ AI prompts.</strong> Each prompt is a new context window. Each context window is a chance for the AI to forget what you told it 3 prompts ago. This is why AI-generated code in layered projects is notoriously unreliable.</p>
<h3>In Vertical Slice Architecture (The Elegant Way)</h3>
<ol style="list-style:decimal;padding-left:1.5rem;margin-bottom:1rem">
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">Open <code>Features/Orders/CreateOrder.cs</code></li>
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">Tell AI: "Add a <code>DiscountCode</code> string property. Validate it's max 20 chars. Save it to the Order entity. Return it in the response DTO."</li>
<li style="font-size:0.95rem;line-height:1.8;color:#4b5563">AI sees the endpoint, command, handler, and validation — all in one file. Generates correct code in <strong>one shot</strong>.</li>
</ol>
<p><strong>1 file. 1 folder. 1 prompt.</strong> This is the difference between fighting your AI tools and <strong>flowing with them</strong>.</p>
<h2>The Context Window is Everything</h2>
<p>Modern AI coding assistants — GitHub Copilot, Cursor, Claude, ChatGPT — all operate on a context window. They can "see" the file you're editing plus some surrounding context (open tabs, recently viewed files). The quality of their output is <strong>directly proportional to the quality and completeness of that context</strong>.</p>
<p>VSA maximizes context quality by design:</p>
<ul>
<li><strong>Endpoint + Handler + DTOs in one file:</strong> The AI sees the HTTP contract, business logic, and data shapes simultaneously. It won't generate a handler that returns a DTO the endpoint can't serialize.</li>
<li><strong>Validation in the same folder:</strong> The AI knows the validation rules exist. It won't generate business logic that bypasses validation.</li>
<li><strong>EF Core queries inline:</strong> The AI sees exactly how data is fetched. It won't hallucinate repository methods that don't exist.</li>
</ul>
<h2>AI-Friendly Means Developer-Friendly</h2>
<p>Here's the beautiful symmetry: what makes code AI-friendly is <strong>exactly</strong> what makes it human-friendly. Maximum cohesion. Minimum scattering. One concept per folder. No abstractions between you and the business logic.</p>
<p>When a new developer joins your team and you say "add a discount code to order creation," they should be able to do it by reading <strong>one file</strong>. That same principle applies to AI tools. The architecture that's best for humans is also best for machines. VSA delivers both.</p>
<h2>Indotalent Products: Built for the AI Era</h2>
<p>Every Indotalent product is a single .NET 10 Blazor Server project built with Vertical Slice Architecture. Each feature — 50 to 100 per application — lives in its own folder <code>Features/[FeatureName]/</code> with its endpoint, MediatR handler, FluentValidation validator, and EF Core queries all in one place.</p>
<p>This means:</p>
<ul>
<li><strong>GitHub Copilot</strong> generates accurate code because all context is in one file</li>
<li><strong>Cursor AI</strong> understands complete features in a single tab</li>
<li><strong>ChatGPT & Claude</strong> can be given one file as reference and generate correct modifications</li>
<li><strong>You spend less time debugging AI hallucinations</strong> and more time shipping features</li>
</ul>
<h2>Key Takeaways</h2>
<ul>
<li>VSA keeps all feature code in one folder — the <strong>perfect context window</strong> for AI tools</li>
<li>Layered architecture forces AI to work with fragmented context → high hallucination rate</li>
<li>Adding a field in VSA: 1 file, 1 prompt. In layered: 7 files, 6+ prompts</li>
<li>AI-friendly architecture = human-friendly architecture = <strong>Vertical Slice Architecture</strong></li>
<li>All 9 Indotalent products are VSA monoliths — ready for AI-assisted customization</li>
</ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-violet-50 to-purple-50 border border-violet-200 rounded-2xl">
<p class="text-sm text-gray-900 font-semibold mb-2">Stop fighting your AI tools. Start using VSA.</p>
<p class="text-sm text-gray-600 mb-4">Every Indotalent product is a complete VSA application — the perfect foundation for AI-assisted development. <strong>$21 each.</strong></p>
<a href="../index.html#products" class="btn-primary text-sm">Explore Products</a>
</div>
<div class="mt-6"><a href="../blog.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div>
</section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/vsa-eliminates-project-hell.html
+44
View File
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>How Vertical Slice Architecture Eliminates "Project Hell" | Indotalent Blog</title>
<meta name="description" content="From 15+ projects to a single monolith. How VSA keeps related code together, slashes compilation time, and makes onboarding instant." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/vsa-eliminates-project-hell.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">
{ "@context":"https://schema.org","@type":"Article","headline":"How Vertical Slice Architecture Eliminates Project Hell","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-05-01","publisher":{"@type":"Organization","name":"Indotalent"}}
</script>
<script type="application/ld+json">
{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"VSA Eliminates Project Hell","item":"https://www.indotalent.com/blog/vsa-eliminates-project-hell.html" }]}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">VSA Eliminates Project Hell</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">May 2026 · 6 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">How Vertical Slice Architecture Eliminates "Project Hell"</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">Organizing by technical concern scatters related code across the codebase. VSA reorganizes around business capabilities. Every Indotalent product is a single .NET project where all code for a feature lives in one folder.</p></div>
<article>
<p>I've worked on enterprise .NET solutions with 15+ projects in a single solution. The cognitive overhead was staggering. To implement a new feature, you'd touch files in <code>Application/</code>, <code>Domain/</code>, <code>Infrastructure/</code>, <code>Persistence/</code>, <code>Web/</code>, <code>SharedKernel/</code>, and <code>Contracts/</code>. Compilation times climbed past 30 seconds. New developers took weeks to become productive. This is what I call "Project Hell."</p>
<h2>The Root Cause</h2>
<p>The problem isn't Clean Architecture's principles — dependency inversion, separation of concerns, and testability are all good things. The problem is that organizing by technical concern (all controllers here, all services there) scatters related code across the codebase. When a feature changes, you must hunt across multiple projects to understand the impact.</p>
<h2>The VSA Solution</h2>
<p>VSA reorganizes the same principles around business capabilities. Every Indotalent product is a single .NET project. All code for a feature lives in one folder. The API endpoint, MediatR handler, validation, and EF Core queries sit together. Compilation takes seconds. Adding a feature means creating one folder with one file. Need to understand how Sales Orders work? Open <code>Features/SalesOrders/</code> and read through. Everything is there.</p>
<h2>Key Takeaways</h2>
<ul><li>Layered architecture scatters related code across 5-15 projects</li><li>Single-project VSA monolith compiles in seconds with zero cognitive overhead</li><li>New developers become productive on day one by reading one feature slice</li><li>All 9 Indotalent products demonstrate this architecture in production code</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">See Single-Project VSA in action</p><p class="text-sm text-gray-600 mb-4">Every Indotalent product is a single .NET project with VSA. $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/vsa-introduction.html
+147
View File
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Introduction to Vertical Slice Architecture in .NET 10 | Indotalent Blog</title>
<meta name="description" content="Learn how Vertical Slice Architecture (VSA) organizes .NET 10 code by business features instead of technical layers. Complete with Minimal API code examples." />
<meta name="keywords" content="Vertical Slice Architecture, VSA .NET 10, Minimal API, MediatR, CQRS, enterprise architecture, .NET architecture patterns" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/vsa-introduction.html" />
<link rel="alternate" hreflang="en" href="https://www.indotalent.com/blog/vsa-introduction.html" />
<link rel="alternate" hreflang="x-default" href="https://www.indotalent.com/blog/vsa-introduction.html" />
<meta property="og:title" content="Introduction to Vertical Slice Architecture in .NET 10" />
<meta property="og:description" content="Learn how VSA organizes .NET 10 code by business features. Complete with code examples." />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Introduction to Vertical Slice Architecture in .NET 10",
"description": "How VSA organizes code by business features, why it beats layered architecture, and concrete .NET 10 Minimal API examples.",
"author": { "@type": "Person", "name": "go2ismail" },
"datePublished": "2026-06-01",
"publisher": { "@type": "Organization", "name": "Indotalent" }
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.indotalent.com/blog/" },
{ "@type": "ListItem", "position": 3, "name": "Introduction to Vertical Slice Architecture in .NET 10", "item": "https://www.indotalent.com/blog/vsa-introduction.html" }
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}
article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem;color:#1f2937}
article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}
article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}
article pre{background:#1f2937;color:#f9fafb;padding:16px;border-radius:10px;overflow-x:auto;margin:1rem 0;font-size:0.85rem;line-height:1.6}
article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}
article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="../index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><a href="index.html" class="hover:text-brand-500 transition-colors">Blog</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">VSA Introduction</span></li>
</ol>
</div>
</nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div>
</nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">June 2026 · 8 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">Introduction to Vertical Slice Architecture in .NET 10</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8">
<p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p>
<p class="text-sm text-green-700">Vertical Slice Architecture organizes code by business features instead of technical layers. In .NET 10, you can define an entire feature — endpoint, DTOs, validation, and handler — in <strong>a single C# file</strong>. This maximizes cohesion, reduces cognitive overhead, and lets you add features without touching 7 different projects.</p>
</div>
<article>
<p>Vertical Slice Architecture (VSA) is a software design approach that organizes code by business features rather than technical layers. In a traditional layered architecture, implementing a "Create Order" feature means working across <code>Controllers/</code>, <code>Services/</code>, <code>Repositories/</code>, <code>Domain/</code>, and <code>DTOs/</code> — often spread across 5+ separate projects. VSA flips this on its head: everything for "Create Order" lives in one folder, one file, or at most a small cluster of files within a single project.</p>
<h2>Why VSA Matters in .NET 10</h2>
<p>.NET 10's Minimal APIs make VSA more natural than ever. You can define an entire feature — endpoint, request/response DTOs, validation, and handler logic — in a single C# file using top-level statements and MediatR. The result is maximum cohesion: everything you need to understand a feature is in one place. No more jumping between 7 projects in Solution Explorer just to trace a single user action.</p>
<h3>Key Benefits</h3>
<ul>
<li><strong>Maximum Cohesion:</strong> All code for a feature lives together. When you need to modify "Create Order," you open one file.</li>
<li><strong>Faster Onboarding:</strong> New developers understand a feature by reading a single file, not tracing through 5 projects.</li>
<li><strong>Reduced Merge Conflicts:</strong> Teams working on different features rarely touch the same files.</li>
<li><strong>Easier Testing:</strong> Each slice is self-contained and can be tested in isolation.</li>
</ul>
<h2>A Concrete Example</h2>
<pre>// Features/Orders/CreateOrder.cs
public static class CreateOrderEndpoint
{
public static void Map(IEndpointRouteBuilder app) =>
app.MapPost("/api/orders", async (CreateOrderCommand cmd, IMediator m) =>
Results.Ok(await m.Send(cmd)));
}
public record CreateOrderCommand(string CustomerId, List<OrderItem> Items) : IRequest<OrderDto>;
public class CreateOrderHandler : IRequestHandler<CreateOrderCommand, OrderDto>
{
readonly AppDbContext _db;
public CreateOrderHandler(AppDbContext db) => _db = db;
public async Task<OrderDto> Handle(CreateOrderCommand cmd, CancellationToken ct)
{
var order = Order.Create(cmd.CustomerId, cmd.Items);
_db.Orders.Add(order);
await _db.SaveChangesAsync(ct);
return OrderDto.FromEntity(order);
}
}</pre>
<p>That's it. One file contains the API endpoint, the command, the handler, and the result DTO. When you need to modify how orders are created, you open this file. When a new developer joins, they read this file and understand the entire flow. This is the power of VSA.</p>
<h2>Key Takeaways</h2>
<ul>
<li>VSA organizes by <strong>business capability</strong>, not technical concern</li>
<li>.NET 10 Minimal APIs + MediatR make VSA natural and concise</li>
<li>Every Indotalent product uses this architecture — study real production code</li>
<li>One file = one feature = zero confusion</li>
</ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl">
<p class="text-sm text-gray-700 font-semibold mb-2">Ready to study real VSA code?</p>
<p class="text-sm text-gray-600 mb-4">Every Indotalent product is a complete .NET 10 application built with Vertical Slice Architecture. Complete source code — $21 each.</p>
<a href="../index.html#products" class="btn-primary text-sm">Explore Products</a>
</div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div>
</section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><div class="flex flex-wrap gap-4 text-sm"><a href="../index.html#products" class="text-gray-500 hover:text-brand-500">Products</a><a href="index.html" class="text-gray-500 hover:text-brand-500">Blog</a><a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a></div><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/vsa-mediatr.html
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Building Maintainable .NET Applications with MediatR and VSA | Indotalent Blog</title>
<meta name="description" content="How MediatR enables CQRS within Vertical Slice Architecture. Pipeline behaviors for validation, logging, and transactions. Complete code examples." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/vsa-mediatr.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"Article","headline":"Building Maintainable .NET Applications with MediatR and VSA","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-05-01","publisher":{"@type":"Organization","name":"Indotalent"}}</script>
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"MediatR and VSA","item":"https://www.indotalent.com/blog/vsa-mediatr.html" }]}</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 0.5rem}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article pre{background:#1f2937;color:#f9fafb;padding:16px;border-radius:10px;overflow-x:auto;margin:1rem 0;font-size:0.85rem;line-height:1.6}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">MediatR & VSA</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">May 2026 · 9 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">Building Maintainable .NET Applications with MediatR and VSA</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">MediatR is the backbone of VSA in .NET. It implements the Mediator pattern with <code>IRequest<TResponse></code> and pipeline behaviors for cross-cutting concerns like validation, logging, and transactions.</p></div>
<article>
<p>MediatR is more than just a mediator library — it's the backbone of effective Vertical Slice Architecture in .NET. It implements the Mediator pattern with two key abstractions: <code>IRequest<TResponse></code> for commands/queries and <code>IRequestHandler<TRequest, TResponse></code> for their handlers.</p>
<h2>Commands, Queries, and CQRS</h2>
<p>In VSA, each feature slice exposes its API through MediatR. Commands (which mutate state) are separate from Queries (which read state). This is CQRS — Command Query Responsibility Segregation — and it maps naturally onto VSA. A <code>CreateOrderCommand</code> and its handler live in <code>Features/Orders/</code>. The handler uses EF Core to persist the order. A <code>GetOrderByIdQuery</code> also lives in the same folder, optimized for reads with EF Core's no-tracking queries.</p>
<h2>Pipeline Behaviors: Cross-Cutting Concerns</h2>
<p>MediatR's pipeline behaviors handle cross-cutting concerns without cluttering business logic. Logging, validation, and transaction management are implemented once as behaviors and applied to all handlers automatically:</p>
<pre>public class ValidationBehavior<TRequest, TResponse>
: IPipelineBehavior<TRequest, TResponse>
{
public async Task<TResponse> Handle(TRequest req,
RequestHandlerDelegate<TResponse> next, CancellationToken ct)
{
var validator = _validators.GetValidator<TRequest>();
if (validator != null) await validator.ValidateAsync(req, ct);
return await next();
}
}</pre>
<p>This keeps your handlers clean — they focus purely on business logic while behaviors handle the plumbing.</p>
<h2>Key Takeaways</h2>
<ul><li>MediatR provides the CQRS backbone for VSA feature slices</li><li>Pipeline behaviors eliminate duplicated cross-cutting code</li><li>Indotalent products ship with pre-configured MediatR pipelines</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">Explore VSA Products</p><p class="text-sm text-gray-600 mb-4">Every Indotalent product uses MediatR + VSA. Complete source code — $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
blog/vsa-vs-layered-architecture.html
+40
View File
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Article">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Slice Architecture vs Traditional Layered Architecture: Side-by-Side Code | Indotalent Blog</title>
<meta name="description" content="7 files in 4 projects vs 1 file. A concrete code comparison of VSA and traditional layered architecture for the same 'Create Customer' feature." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/vsa-vs-layered-architecture.html" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"Article","headline":"Vertical Slice Architecture vs Traditional Layered Architecture: Side-by-Side Code","author":{"@type":"Person","name":"go2ismail"},"datePublished":"2026-02-01","publisher":{"@type":"Organization","name":"Indotalent"}}</script>
<script type="application/ld+json">{ "@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{ "@type":"ListItem","position":1,"name":"Home","item":"https://www.indotalent.com/" },{ "@type":"ListItem","position":2,"name":"Blog","item":"https://www.indotalent.com/blog/" },{ "@type":"ListItem","position":3,"name":"VSA vs Layered Architecture","item":"https://www.indotalent.com/blog/vsa-vs-layered-architecture.html" }]}</script>
<script src="https://cdn.tailwindcss.com"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}article h2{font-size:1.5rem;font-weight:700;margin:1.75rem 0 0.75rem;color:#111827}article p{font-size:0.95rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:0.85rem;color:#ea580c}article ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}article ul li{font-size:0.95rem;line-height:1.8;color:#4b5563}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100"><div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5"><ol class="flex items-center gap-1.5 text-xs text-gray-400"><li><a href="../index.html" class="hover:text-brand-500">Home</a></li><li><span class="text-gray-300">/</span></li><li><a href="index.html" class="hover:text-brand-500">Blog</a></li><li><span class="text-gray-300">/</span></li><li><span class="text-gray-600 font-medium">VSA vs Layered</span></li></ol></div></nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div></nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 mb-3"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">Feb 2026 · 8 min read</span></div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4">Vertical Slice Architecture vs Traditional Layered Architecture: Side-by-Side Code</h1>
<div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-8"><p class="text-sm text-green-800 font-semibold mb-1">TL;DR</p><p class="text-sm text-green-700">Traditional approach: 7 files across 4 projects for one feature. VSA: 1 file in 1 folder. Same functionality, zero cognitive overhead for VSA.</p></div>
<article>
<p>Let's compare how the same "Create Customer" feature looks in both architectures.</p>
<h2>Traditional Layered Approach</h2>
<p>Files you must touch across a typical Clean Architecture solution:</p>
<ul><li><code>Controllers/CustomersController.cs</code> — HTTP endpoint</li><li><code>Application/Customers/CreateCustomerCommand.cs</code> — DTO</li><li><code>Application/Customers/CreateCustomerHandler.cs</code> — business logic</li><li><code>Application/Common/Interfaces/IAppDbContext.cs</code> — abstraction</li><li><code>Domain/Entities/Customer.cs</code> — domain entity</li><li><code>Infrastructure/Persistence/AppDbContext.cs</code> — EF Core context</li><li><code>Web/Program.cs</code> — DI registration</li></ul>
<p>Seven files across four projects. When a bug is reported in customer creation, you must trace the flow through all of them.</p>
<h2>VSA Approach</h2>
<p>One file in one folder <code>Features/Customers/CreateCustomer.cs</code> contains: the Minimal API endpoint, the MediatR command, the handler with all business logic, the EF Core query, and the response DTO. When a bug is reported, you open one file. When you need to add a field to customer creation, you edit one file. This is the essence of VSA: <strong>maximum cohesion, minimum scattering</strong>.</p>
<h2>Key Takeaways</h2>
<ul><li>Layered: 7 files, 4 projects. VSA: 1 file, 1 folder.</li><li>Bug tracing: hours vs minutes</li><li>Feature addition: touch 7 files vs touch 1 file</li><li>All Indotalent products demonstrate this VSA pattern in production code</li></ul>
</article>
<div class="mt-10 p-6 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl"><p class="text-sm text-gray-700 font-semibold mb-2">Compare with Indotalent VSA code</p><p class="text-sm text-gray-600 mb-4">Every product demonstrates VSA in a real, working application. $21 each.</p><a href="../index.html#products" class="btn-primary text-sm">Explore Products</a></div>
<div class="mt-6"><a href="index.html" class="text-sm text-brand-600 hover:text-brand-700">&larr; Back to Blog</a></div>
</div></section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
docker-compose.yml
+34
View File
@@ -0,0 +1,34 @@
# =====================================================================
# Indotalent Webstore - Docker Compose untuk Portainer Stack
# =====================================================================
# Web app statis, routing via Nginx Proxy Manager (container name)
# Tidak perlu expose port ke host!
# =====================================================================
services:
indotalent-webstore:
build:
context: .
dockerfile: Dockerfile
container_name: indotalent-webstore
restart: unless-stopped
# TIDAK PERLU ports: - routing via NPM ke container name
expose:
- 80
networks:
- indotalent-network
# =================================================================
# RESOURCE LIMITS
# =================================================================
# Nginx ringan, tapi tetap dibatasi
mem_limit: 64m # Max 64 MB RAM
mem_reservation: 32m # Minimal 32 MB RAM
cpus: '0.1' # Max 10% dari 1 CPU core
labels:
- "indotalent.service=indotalent-webstore"
- "indotalent.description=Indotalent Webstore HTML Static"
networks:
indotalent-network:
external: true
name: indotalent-network
favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

for-beginners.html
+200
View File
@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/WebPage">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learn .NET 10 & Blazor from Scratch with Complete Source Code | Indotalent</title>
<meta name="description" content="Start your .NET journey with production-ready Blazor Server source code. Learn C#, ASP.NET Core 10, EF Core, MudBlazor, and Vertical Slice Architecture through real enterprise projects. Perfect for beginners and students." />
<meta name="keywords" content="learn .NET 10, Blazor for beginners, .NET tutorial source code, C# project for students, ASP.NET Core beginner project, Blazor Server crash course, Vertical Slice Architecture for beginners" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/for-beginners.html" />
<link rel="alternate" hreflang="en" href="https://www.indotalent.com/for-beginners.html" />
<link rel="alternate" hreflang="x-default" href="https://www.indotalent.com/for-beginners.html" />
<meta property="og:title" content="Learn .NET 10 & Blazor from Scratch with Complete Source Code" />
<meta property="og:description" content="Production-ready Blazor Server source code for beginners. Learn by studying real enterprise applications." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.indotalent.com/for-beginners.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Learn .NET 10 & Blazor from Scratch with Complete Source Code" />
<meta name="twitter:description" content="Production-ready Blazor Server source code for beginners. Learn by studying real enterprise applications." />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- Structured Data: BreadcrumbList -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "For Beginners", "item": "https://www.indotalent.com/for-beginners.html" }
]
}
</script>
<!-- Structured Data: FAQPage -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Can a complete beginner learn .NET with Indotalent source code?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Absolutely. Every Indotalent product includes complete source code with EF Core migrations, seed data, and step-by-step documentation. Clone the repo, set your connection string, press F5, and the entire application runs locally. You can study real production patterns — authentication, CRUD operations, API endpoints, database design — all in one project."
}
},
{
"@type": "Question",
"name": "Do I need to know C# before buying?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Basic C# knowledge (variables, loops, classes) is helpful but not required. The source code follows clean coding patterns with clear naming conventions. You can read the code alongside online C# tutorials and learn by seeing how professionals structure enterprise applications."
}
},
{
"@type": "Question",
"name": "Is there documentation included?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Each product comes with built-in Swagger/OpenAPI documentation for the REST API. The codebase is self-documenting with clear class names, method names, and folder structure. Our blog also provides in-depth technical articles covering VSA, Blazor Server, and .NET 10 concepts."
}
}
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}
.btn-secondary:hover{border-color:#f97316;color:#f97316}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- BREADCRUMB -->
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">For Beginners</span></li>
</ol>
</div>
</nav>
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="index.html" class="flex items-center gap-2.5"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500">Features</a><a href="index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500">Pricing</a><a href="blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Blog</a></div></div></div>
</nav>
<!-- HERO -->
<section class="py-16 lg:py-24">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-5"><span class="text-green-700 text-xs font-medium tracking-wide">For Beginners & Students</span></div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4">Learn <span class="gradient-text">.NET 10 & Blazor</span> from Scratch</h1>
<p class="text-gray-500 max-w-2xl mx-auto text-lg">Stop watching tutorials. Start studying <strong>real, production-grade enterprise source code</strong> that compiles and runs in 60 seconds.</p>
</div>
</div>
</section>
<!-- WHY SOURCE CODE BEATS TUTORIALS -->
<section class="py-16 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Why Source Code <span class="gradient-text">Beats Tutorials</span></h2></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Tutorials Show Fragments</h3>
<p class="text-sm text-gray-500">Blog posts and videos show isolated code snippets. They never show how authentication connects to the database, how the API plugs into the UI, or how 50 features coexist in one project.</p>
</div>
<div class="bg-white border border-brand-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Source Code Shows the Whole Picture</h3>
<p class="text-sm text-gray-500">Clone one Indotalent repo and you see <strong>everything</strong>: project structure, middleware pipeline, EF Core configuration, MudBlazor component composition, JWT auth flow, and database seed data — all working together.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Tutorials Go Outdated</h3>
<p class="text-sm text-gray-500">A YouTube tutorial from 2023 uses .NET 7 patterns that don't compile on .NET 10. Indotalent products are updated for the latest .NET release with modern APIs and patterns.</p>
</div>
<div class="bg-white border border-brand-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">You Can Ship It</h3>
<p class="text-sm text-gray-500">The best part: after studying the code, you can <strong>use it as a foundation for your own project</strong>. It's a working app you can customize, extend, and deploy — not just a learning exercise.</p>
</div>
</div>
</div>
</section>
<!-- WHAT YOU WILL LEARN -->
<section class="py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">What You'll <span class="gradient-text">Learn</span> from Each Product</h2></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white border border-gray-200 rounded-xl p-5"><h3 class="font-semibold text-gray-900 mb-2">🔷 .NET 10 & C# Fundamentals</h3><p class="text-sm text-gray-500">See how professional C# code is structured: records, LINQ, dependency injection, async/await patterns, and minimal API endpoints.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5"><h3 class="font-semibold text-gray-900 mb-2">🔷 Blazor Server UI</h3><p class="text-sm text-gray-500">Learn component-based UI development with MudBlazor. Study data grids, forms, dialogs, and navigation patterns used in real apps.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5"><h3 class="font-semibold text-gray-900 mb-2">🔷 Database Design & EF Core</h3><p class="text-sm text-gray-500">Understand entity relationships, migrations, seed data, and LINQ queries through a working SQL Server database.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5"><h3 class="font-semibold text-gray-900 mb-2">🔷 Authentication & Security</h3><p class="text-sm text-gray-500">Study a complete JWT + ASP.NET Core Identity implementation with role-based authorization, user management, and secure API endpoints.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5"><h3 class="font-semibold text-gray-900 mb-2">🔷 REST API Design</h3><p class="text-sm text-gray-500">Explore clean REST API patterns with Swagger/OpenAPI documentation, proper HTTP status codes, and request validation.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5"><h3 class="font-semibold text-gray-900 mb-2">🔷 Project Architecture</h3><p class="text-sm text-gray-500">Grasp Vertical Slice Architecture — a modern alternative to layered design. See how features are organized for maximum cohesion.</p></div>
</div>
</div>
</section>
<!-- GETTING STARTED GUIDE -->
<section class="py-16 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Getting Started in <span class="gradient-text">3 Steps</span></h2></div>
<div class="space-y-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 flex gap-4">
<div class="w-10 h-10 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-lg shrink-0">1</div>
<div><h3 class="font-semibold text-gray-900 mb-1">Choose Your Product</h3><p class="text-sm text-gray-500">Pick any of the 9 products — CRM, HRM, WMS, CMS, SCM, OMS, SWM, or SaaS editions. Every product uses the same architecture, so skills transfer across all of them. <strong>$21 each.</strong></p></div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 flex gap-4">
<div class="w-10 h-10 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-lg shrink-0">2</div>
<div><h3 class="font-semibold text-gray-900 mb-1">Clone & Run in 60 Seconds</h3><p class="text-sm text-gray-500">You'll need <strong>Visual Studio 2022+</strong> and <strong>SQL Server</strong> (LocalDB or Express works). Clone the repo, update the connection string in <code class="bg-gray-100 px-1.5 py-0.5 rounded text-brand-600 text-xs">appsettings.json</code>, run EF Core migrations, and press F5. The app launches with seeded demo data ready to explore.</p></div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 flex gap-4">
<div class="w-10 h-10 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-lg shrink-0">3</div>
<div><h3 class="font-semibold text-gray-900 mb-1">Study, Modify, Learn</h3><p class="text-sm text-gray-500">Open any feature folder — for example <code class="bg-gray-100 px-1.5 py-0.5 rounded text-brand-600 text-xs">Features/SalesOrders/</code> — and read through the endpoint, handler, and query in one place. Set breakpoints, trace the flow, modify the UI. <strong>Learn by doing with a real codebase.</strong></p></div>
</div>
</div>
</div>
</section>
<!-- BEGINNER FAQ -->
<section class="py-16">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Beginner <span class="gradient-text">FAQ</span></h2></div>
<div class="space-y-4" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Can a complete beginner learn .NET with Indotalent source code?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 1" x-cloak class="px-5 pb-5 text-sm text-gray-600">Absolutely. Every Indotalent product includes complete source code with EF Core migrations, seed data, and clear project structure. Clone the repo, set your connection string, press F5, and the entire application runs locally. You can study real production patterns — authentication, CRUD operations, API endpoints, database design — all in one project.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Do I need to know C# before buying?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 2" x-cloak class="px-5 pb-5 text-sm text-gray-600">Basic C# knowledge (variables, loops, classes) is helpful but not required. The source code follows clean coding patterns with clear naming conventions. You can read the code alongside online C# tutorials and learn by seeing how professionals structure enterprise applications.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">What software do I need installed?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 3" x-cloak class="px-5 pb-5 text-sm text-gray-600">You need <strong>Visual Studio 2022 or newer</strong> (the free Community edition works) and <strong>SQL Server</strong> (LocalDB or Express, both free). That's it. The project restores all NuGet packages automatically on first build.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Is there documentation included?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 4" x-cloak class="px-5 pb-5 text-sm text-gray-600">Yes. Each product comes with built-in Swagger/OpenAPI documentation for the REST API. The codebase is self-documenting with clear class names, method names, and folder structure. Our <a href="blog.html" class="text-brand-600 hover:text-brand-700 font-medium">blog</a> also provides in-depth technical articles covering VSA, Blazor Server, and .NET 10 concepts.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Can I use this code in my university project or portfolio?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 5" x-cloak class="px-5 pb-5 text-sm text-gray-600">Yes! You can study the code, learn from it, and use it as a reference for your own projects. For portfolio purposes, we recommend building your own features on top of the architecture rather than submitting the code as-is. The learning value is in understanding the patterns and applying them yourself.</div></div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-16">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-gradient-to-br from-white via-white to-orange-50/80 border border-orange-100 rounded-3xl p-8 lg:p-12 shadow-sm">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Start Your .NET Journey <span class="gradient-text">Today</span></h2>
<p class="text-gray-600 mb-8">9 enterprise applications. Complete source code. <strong>$21 each.</strong> Learn by studying real, production-grade code.</p>
<div class="flex flex-wrap items-center justify-center gap-4"><a href="index.html#products" class="btn-primary text-base px-8 py-3.5">Explore Products</a><a href="blog.html" class="btn-secondary text-base px-8 py-3.5">Read the Blog</a></div>
</div>
</div>
</section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="index.html" class="flex items-center gap-2"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><div class="flex flex-wrap gap-4 text-sm"><a href="index.html#products" class="text-gray-500 hover:text-brand-500">Products</a><a href="for-beginners.html" class="text-brand-600 font-medium">For Beginners</a><a href="for-freelancers.html" class="text-gray-500 hover:text-brand-500">For Freelancers</a><a href="blog.html" class="text-gray-500 hover:text-brand-500">Blog</a><a href="support.html" class="text-gray-500 hover:text-brand-500">Support</a></div><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
for-freelancers.html
+141
View File
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/WebPage">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>.NET Source Code for Freelancers & Agencies — Build Client Projects Faster | Indotalent</title>
<meta name="description" content="Accelerate client delivery with production-ready .NET 10 Blazor source code. CRM, HRM, WMS, CMS and more. $21 per license. Use for client projects, customize, and deploy. Built for freelancers and small agencies." />
<meta name="keywords" content=".NET source code for freelancers, Blazor source code for clients, enterprise source code for agencies, build client projects faster, ready-to-deploy .NET applications, Blazor CRM source code, affordable enterprise source code" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/for-freelancers.html" />
<link rel="alternate" hreflang="en" href="https://www.indotalent.com/for-freelancers.html" />
<link rel="alternate" hreflang="x-default" href="https://www.indotalent.com/for-freelancers.html" />
<meta property="og:title" content=".NET Source Code for Freelancers & Agencies — Build Client Projects Faster" />
<meta property="og:description" content="Production-ready .NET 10 Blazor source code. $21 per license. Use for client projects." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.indotalent.com/for-freelancers.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content=".NET Source Code for Freelancers & Agencies" />
<meta name="twitter:description" content="Production-ready .NET 10 Blazor source code. $21 per license. Use for client projects." />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "For Freelancers", "item": "https://www.indotalent.com/for-freelancers.html" }
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}
.btn-secondary:hover{border-color:#f97316;color:#f97316}
.roi-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;transition:all 0.3s ease}
.roi-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(249,115,22,0.15);border-color:#f97316}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">For Freelancers</span></li>
</ol>
</div>
</nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="index.html" class="flex items-center gap-2.5"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500">Features</a><a href="index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500">Pricing</a><a href="blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Blog</a></div></div></div>
</nav>
<section class="py-16 lg:py-24">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-200 rounded-full px-3.5 py-1 mb-5"><span class="text-blue-700 text-xs font-medium tracking-wide">For Freelancers & Agencies</span></div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4">Ship Client Projects in <span class="gradient-text">Days, Not Months</span></h1>
<p class="text-gray-500 max-w-2xl mx-auto text-lg">Stop building CRUD from scratch. Start with a complete, production-ready <strong>.NET 10 Blazor application</strong> and customize it for your clients. <strong>$21 per license.</strong></p>
</div>
</div>
</section>
<!-- THE PROBLEM -->
<section class="py-16 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">The Freelancer's <span class="gradient-text">Dilemma</span></h2></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-2">Clients Want Enterprise Features</h3>
<p class="text-sm text-gray-500">Your clients expect authentication, role-based access, data grids with pagination, search, export, dashboards, and audit trails. Building these from scratch takes weeks — unpaid weeks.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-2">Every Project Starts with CRUD</h3>
<p class="text-sm text-gray-500">90% of business applications are CRUD with business rules. Yet every freelancer rewrites the same user management, data tables, and form validation for every new client.</p>
</div>
<div class="bg-white border border-brand-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-2">The Indotalent Solution</h3>
<p class="text-sm text-gray-500">For <strong>$21 per license</strong>, you get a complete, working .NET 10 application. Copy it, configure the connection string, and you have a running app in <strong>60 seconds</strong>. Spend your time on custom business logic, not boilerplate.</p>
</div>
<div class="bg-white border border-brand-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-2">Charge for Implementation, Not Foundation</h3>
<p class="text-sm text-gray-500">Your clients pay you to customize and deploy. The $21 source code is your foundation — the working foundation you'd otherwise spend 80+ hours building. Your ROI is immediate.</p>
</div>
</div>
</div>
</section>
<!-- ROI CALCULATOR -->
<section class="py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Your <span class="gradient-text">ROI</span> as a Freelancer</h2></div>
<div class="overflow-x-auto bg-white border border-gray-200 rounded-2xl shadow-sm">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700">Task</th><th class="text-center px-4 py-3 font-semibold text-red-600">From Scratch</th><th class="text-center px-4 py-3 font-semibold text-emerald-600">With Indotalent</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Project Setup & Architecture</td><td class="text-center text-red-500">2-3 days</td><td class="text-center text-emerald-600 font-medium">0 minutes</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Authentication & Authorization</td><td class="text-center text-red-500">3-5 days</td><td class="text-center text-emerald-600 font-medium">0 minutes</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">CRUD Pages (List, Create, Edit, Delete)</td><td class="text-center text-red-500">2-4 weeks</td><td class="text-center text-emerald-600 font-medium">Already built</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Database Design & Migrations</td><td class="text-center text-red-500">1 week</td><td class="text-center text-emerald-600 font-medium">Already designed</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">REST API + Swagger Docs</td><td class="text-center text-red-500">1 week</td><td class="text-center text-emerald-600 font-medium">Already included</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-semibold">Total Time Saved</td><td class="text-center text-red-500 font-bold">5-8 weeks</td><td class="text-center text-emerald-600 font-bold text-lg">Cost: $21</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- USE CASES -->
<section class="py-16 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Real Use Cases for <span class="gradient-text">Freelancers</span></h2></div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
<div class="roi-card"><h3 class="text-lg font-semibold text-gray-900 mb-2">🚀 Startup MVP</h3><p class="text-sm text-gray-500">A client needs a customer portal. Buy Blazor CRM for $21, rebrand it, add 3 custom fields, and deliver in 2 days instead of 6 weeks. Charge $3,000-$5,000 for implementation.</p></div>
<div class="roi-card"><h3 class="text-lg font-semibold text-gray-900 mb-2">🏢 Internal Tool</h3><p class="text-sm text-gray-500">A manufacturing company needs an inventory system. Buy Blazor WMS for $21, customize the schema, and deploy. Deliver an enterprise-grade tool at a fraction of custom development cost.</p></div>
<div class="roi-card"><h3 class="text-lg font-semibold text-gray-900 mb-2">🎓 Learning Investment</h3><p class="text-sm text-gray-500">Study the VSA patterns once, then apply them to all future projects. The $21 investment pays off every time you use the same architecture pattern for a new client.</p></div>
</div>
</div>
</section>
<!-- LICENSE -->
<section class="py-16">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">License: <span class="gradient-text">Client-Ready</span></h2>
<p class="text-gray-500 max-w-2xl mx-auto mb-8">Each license covers <strong>one end product per client project</strong>. You can charge your clients for customization, implementation, and deployment. Each new client project requires a separate $21 license — still the best ROI in enterprise development. See our <a href="license.html" class="text-brand-600 hover:text-brand-700 font-medium">full license terms</a>.</p>
<div class="flex flex-wrap items-center justify-center gap-4"><a href="index.html#products" class="btn-primary text-base px-8 py-3.5">Explore Products</a><a href="license.html" class="btn-secondary text-base px-8 py-3.5">View License</a></div>
</div>
</section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="index.html" class="flex items-center gap-2"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><div class="flex flex-wrap gap-4 text-sm"><a href="index.html#products" class="text-gray-500 hover:text-brand-500">Products</a><a href="for-beginners.html" class="text-gray-500 hover:text-brand-500">For Beginners</a><a href="for-freelancers.html" class="text-brand-600 font-medium">For Freelancers</a><a href="blog.html" class="text-gray-500 hover:text-brand-500">Blog</a><a href="support.html" class="text-gray-500 hover:text-brand-500">Support</a></div><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>
img/Lemon-Squeezy-Logo-Purple-600.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

img/Logo-lemon-squeezy-Black-Text.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

img/admintemplate-html.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

img/admintemplate-mvc.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

img/admintemplate-razor.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

img/cms-clinic-management-system-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 KiB

img/cms-clinic-management-system-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 615 KiB

img/cms-clinic-management-system-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

img/cms-clinic-management-system-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

img/cms-clinic-management-system-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

img/cms-clinic-management-system-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

img/crm-customer-relationship-management-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

img/crm-customer-relationship-management-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 548 KiB

img/crm-customer-relationship-management-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

img/crm-customer-relationship-management-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

img/crm-customer-relationship-management-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

img/crm-customer-relationship-management-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

img/crm-multi-tenant-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 622 KiB

img/crm-multi-tenant-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 KiB

img/crm-multi-tenant-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 KiB

img/crm-multi-tenant-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

img/crm-multi-tenant-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

img/crm-multi-tenant-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

img/crm-multi-tenant-07.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

img/hrm-human-resource-management-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 223 KiB

img/hrm-human-resource-management-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 542 KiB

img/hrm-human-resource-management-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 KiB

img/hrm-human-resource-management-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

img/hrm-human-resource-management-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

img/hrm-human-resource-management-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

img/hrm-multi-tenant-saas-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 584 KiB

img/hrm-multi-tenant-saas-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 573 KiB

img/hrm-multi-tenant-saas-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB

img/hrm-multi-tenant-saas-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

img/hrm-multi-tenant-saas-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

img/hrm-multi-tenant-saas-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

img/hrm-multi-tenant-saas-07.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

img/ismail.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

img/logo-indotalent-dark.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 55" width="300" height="55"><text x="50%" y="38" text-anchor="middle" font-family="-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif" fill="#1f2937" font-weight="700" font-size="34" letter-spacing="0"><tspan>INDO</tspan><tspan fill="#f97316">TALENT</tspan></text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

img/logo-indotalent-light.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 55" width="300" height="55"><text x="50%" y="38" text-anchor="middle" fill="#e2e8f0" font-family="-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif" font-weight="700" font-size="34" letter-spacing="0"><tspan>INDO</tspan><tspan fill="#f97316">TALENT</tspan></text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

img/oms-order-management-system-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

img/oms-order-management-system-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB

img/oms-order-management-system-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

img/oms-order-management-system-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

img/oms-order-management-system-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

img/oms-order-management-system-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

img/scm-supply-chain-management-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 KiB

img/scm-supply-chain-management-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB

img/scm-supply-chain-management-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

img/scm-supply-chain-management-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

img/scm-supply-chain-management-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

img/scm-supply-chain-management-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

img/swm-spa-and-wellness-management-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB

img/swm-spa-and-wellness-management-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 KiB

img/swm-spa-and-wellness-management-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

img/swm-spa-and-wellness-management-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 184 KiB

img/swm-spa-and-wellness-management-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

img/swm-spa-and-wellness-management-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

img/wms-warehouse-inventory-management-system-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

img/wms-warehouse-inventory-management-system-02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 558 KiB

img/wms-warehouse-inventory-management-system-03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 235 KiB

img/wms-warehouse-inventory-management-system-04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB

img/wms-warehouse-inventory-management-system-05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

img/wms-warehouse-inventory-management-system-06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

index.html
+916
View File
@@ -0,0 +1,916 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/WebSite">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Enterprise .NET 10 Source Code for Learning and Commercial Projects | INDOTALENT</title>
<meta name="description" content="Enterprise .NET 10 Blazor Server complete source code for learning and commercial projects. Study production-ready architecture, security, REST API, and Vertical Slice Architecture in a working end-to-end application. CRM, HRM, SCM, WMS, CMS, OMS, SWM + SaaS editions. $21 each. Instant download." />
<meta name="keywords" content=".NET 10, ASP.NET Core, Blazor Server, MudBlazor, Vertical Slice Architecture, Complete Source Code, REST Web API, Enterprise Source Code, Blazor CRM, Blazor HRM, Blazor SCM, Blazor WMS" />
<meta name="author" content="Indotalent" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/" />
<meta name="geo.region" content="ID-JK" />
<meta name="geo.placename" content="Jakarta, Indonesia" />
<meta property="og:title" content="Indotalent — Enterprise .NET 10 & Blazor Source Code" />
<meta property="og:description" content="9 production-ready .NET 10 Blazor full stack source code products with MudBlazor UI, REST API, and VSA. $21 each." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.indotalent.com/" />
<meta property="og:image" content="https://www.indotalent.com/img/crm-customer-relationship-management-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Indotalent — 9 Enterprise .NET 10 Blazor Source Code Products" />
<meta name="twitter:description" content="Production-ready .NET 10 Blazor source code. VSA, MudBlazor, REST API. $21." />
<meta name="twitter:image" content="https://www.indotalent.com/img/crm-customer-relationship-management-01.png" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%23f97316'/><text x='16' y='22' font-size='18' font-weight='bold' text-anchor='middle' fill='white'>I</text></svg>" />
<link rel="alternate" hreflang="en" href="https://www.indotalent.com/" />
<link rel="alternate" hreflang="x-default" href="https://www.indotalent.com/" />
<!-- Structured Data: Organization -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com",
"logo": "https://www.indotalent.com/img/logo-indotalent-dark.svg",
"description": "Enterprise .NET 10 & Blazor complete source code products with Vertical Slice Architecture.",
"founder": {
"@type": "Person",
"name": "go2ismail",
"url": "https://github.com/go2ismail"
},
"sameAs": [
"https://github.com/go2ismail"
],
"contactPoint": {
"@type": "ContactPoint",
"email": "hi@indotalent.com",
"contactType": "customer support"
}
}
</script>
<!-- Structured Data: FAQ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What do I get when I purchase?",
"acceptedAnswer": { "@type": "Answer", "text": "You get the complete, unrestricted source code of the entire application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. No missing pieces. No hidden dependencies." }
},
{
"@type": "Question",
"name": "Can beginners use this source code?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely! The code is clean, well-structured, and self-documenting. Beginners can learn by studying real production patterns — authentication flows, CRUD operations, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free)." }
},
{
"@type": "Question",
"name": "Can I use this commercially?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Each license covers one end product per client project. You can charge clients for customization, implementation, and deployment. Freelancers and agencies save 5-8 weeks per project. Each new client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "Does it include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Every product exposes a complete REST Web API built with ASP.NET Core Minimal APIs. The API includes Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes." }
},
{
"@type": "Question",
"name": "Does it include authentication and authorization?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes — it's fully pre-configured. You get ASP.NET Core Identity, JWT authentication, role-based access control (RBAC) with Admin/Manager/User roles, and policy-based authorization for fine-grained access. Both the Blazor UI and REST API are protected out of the box." }
},
{
"@type": "Question",
"name": "Does it support SQL Server and PostgreSQL?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready to use with EF Core migrations and seed data included. PostgreSQL support is already scaffolded in the codebase — the EF Core provider and connection string configuration are set up — but it has not been fully tested yet. You can switch between databases by changing the connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Can I deploy it on Azure, IIS, or Docker?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! The application is a standard ASP.NET Core project and can be deployed anywhere .NET 10 runs: Azure App Service, IIS, or Docker containers. It's a single-project monolith — no distributed complexity. Works on Windows, Linux, and macOS." }
},
{
"@type": "Question",
"name": "How secure is the application?",
"acceptedAnswer": { "@type": "Answer", "text": "Security is baked into the architecture. Includes: ASP.NET Core Identity with password hashing, JWT + cookie dual authentication, role-based and policy-based authorization, audit trail, and SignalR connection protection. Source code and connection strings never leave the server with Blazor Server." }
},
{
"@type": "Question",
"name": "What architecture pattern is used?",
"acceptedAnswer": { "@type": "Answer", "text": "All products use Vertical Slice Architecture (VSA) with CQRS via MediatR. Each feature lives in its own folder with its endpoint, MediatR handler, FluentValidation validator, and EF Core queries all in one place. This architecture is AI-friendly, beginner-friendly, and production-proven." }
},
{
"@type": "Question",
"name": "Why $21? Is this a trial or limited version?",
"acceptedAnswer": { "@type": "Answer", "text": "No trial, no limits. You get the full, unrestricted source code. The $21 price is intentional to make enterprise-grade architecture accessible to every developer, freelancer, and small agency. The original price is $49." }
},
{
"@type": "Question",
"name": "How is payment handled?",
"acceptedAnswer": { "@type": "Answer", "text": "All payments are processed securely through Lemon Squeezy, a trusted payment platform for digital products. We never see or store your credit card details. After payment, you get instant access to download." }
},
{
"@type": "Question",
"name": "Is there a refund policy?",
"acceptedAnswer": { "@type": "Answer", "text": "Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide live demos for every product. Test thoroughly before you buy." }
}
]
}
</script>
<!-- Structured Data: BreadcrumbList -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.indotalent.com/"
}
]
}
</script>
<!-- Structured Data: WebSite -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Indotalent",
"url": "https://www.indotalent.com",
"description": "Enterprise .NET 10 Blazor Server complete source code for learning and commercial projects. Production-ready applications with Vertical Slice Architecture, REST API, and modern security.",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.indotalent.com/#products?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- Structured Data: SoftwareApplication (for all 9 products) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"itemListElement": [
{
"@type": "SoftwareApplication",
"name": "Blazor CRM",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Customer Relationship Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code.",
"url": "https://www.indotalent.com/products/blazor-crm.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "SoftwareApplication",
"name": "Blazor CRM Multi-Tenant",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Multi-tenant CRM SaaS application with .NET 10 Blazor Server. Complete source code with tenant isolation.",
"url": "https://www.indotalent.com/products/blazor-crm-multitenant.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "SoftwareApplication",
"name": "Blazor CMS",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Clinic Management System built with .NET 10 Blazor Server. Complete source code for medical practice management.",
"url": "https://www.indotalent.com/products/blazor-cms.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "SoftwareApplication",
"name": "Blazor HRM",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Human Resource Management system with .NET 10 Blazor Server. Employee management, leave tracking, payroll reports.",
"url": "https://www.indotalent.com/products/blazor-hrm.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "SoftwareApplication",
"name": "Blazor HRM Multi-Tenant",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Multi-tenant HRM SaaS built with .NET 10 Blazor Server. Complete source code for workforce management.",
"url": "https://www.indotalent.com/products/blazor-hrm-multitenant.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "SoftwareApplication",
"name": "Blazor OMS",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Order Management System with .NET 10 Blazor Server. Track orders, inventory, and fulfillment. Complete source code.",
"url": "https://www.indotalent.com/products/blazor-oms.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "SoftwareApplication",
"name": "Blazor SCM",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Supply Chain Management system built with .NET 10 Blazor Server. Complete source code for procurement and logistics.",
"url": "https://www.indotalent.com/products/blazor-scm.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "SoftwareApplication",
"name": "Blazor SWM",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Spa & Wellness Management system with .NET 10 Blazor Server. Complete source code for appointment and service management.",
"url": "https://www.indotalent.com/products/blazor-swm.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "SoftwareApplication",
"name": "Blazor WMS",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows",
"description": "Warehouse Management System built with .NET 10 Blazor Server. Complete source code for inventory tracking and warehouse operations.",
"url": "https://www.indotalent.com/products/blazor-wms.html",
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c',800:'#9a3412',900:'#7c2d12'}},fontFamily:{sans:['Inter','system-ui','-apple-system','sans-serif']}}}}</script>
<style>
[x-cloak]{display:none!important} html{scroll-behavior:smooth}
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,0.15) 0%,transparent 70%);top:-250px;left:-150px;pointer-events:none}
.hero-glow-2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,0.08) 0%,transparent 70%);bottom:-150px;right:-150px;pointer-events:none}
.gradient-text{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.product-card{transition:all 0.3s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -12px rgba(249,115,22,0.18)}
.product-card:hover .prod-img{transform:scale(1.05)}
.prod-img-wrap{aspect-ratio:16/10}
.prod-img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.pricing-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:32px 24px;transition:all 0.3s ease}
.pricing-card.featured{border-color:#f97316;box-shadow:0 8px 30px -8px rgba(249,115,22,0.25);position:relative}
.pricing-card:hover{transform:translateY(-2px)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s}
.btn-secondary:hover{border-color:#f97316;color:#f97316}
.stat-number{font-size:2.5rem;font-weight:800;line-height:1;background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.comparison-table td{padding:12px 16px;font-size:14px}
.comparison-table tr:first-child td{border-top:none}
nav a.nav-item.active{color:#f97316!important;border-bottom:2px solid #f97316;padding-bottom:2px}
.fab-back-to-top{position:fixed;bottom:28px;right:28px;z-index:50;width:48px;height:48px;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(249,115,22,0.35);transition:all 0.3s;opacity:0;pointer-events:none;transform:translateY(20px);text-decoration:none}
.fab-back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.fab-back-to-top:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(249,115,22,0.5)}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- BREADCRUMB -->
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">Enterprise .NET 10 & Blazor Source Code</span></li>
</ol>
</div>
</nav>
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60" 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 lg:h-18">
<a href="index.html" class="flex items-center gap-2.5"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-7">
<a href="#products" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="for-beginners.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Beginners</a>
<a href="for-freelancers.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Freelancers</a>
<a href="#features" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="#comparison" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Why Us</a>
<a href="#pricing" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="blog.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<div class="hidden lg:flex items-center gap-3"><a href="#products" class="btn-primary text-sm py-2.5 px-5">Get Started</a></div>
<button @click="mobileOpen = !mobileOpen" class="lg:hidden text-gray-500 hover:text-gray-700 p-2">
<svg x-show="!mobileOpen" 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>
<svg x-show="mobileOpen" 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="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</div>
<div x-show="mobileOpen" x-cloak class="lg:hidden bg-white/98 border-b border-gray-200 px-4 pb-6"><div class="flex flex-col gap-4 pt-2"><a href="#products" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Products</a><a href="#features" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Features</a><a href="#comparison" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Why Us</a><a href="#pricing" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Pricing</a><a href="blog.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Blog</a><a href="support.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Support</a><a href="#products" class="btn-primary text-sm py-2.5 px-5 text-center">Get Started</a></div></div>
</nav>
<!-- HERO -->
<section class="relative min-h-screen flex items-center overflow-hidden pt-20">
<div class="hero-glow"></div><div class="hero-glow-2"></div>
<div class="absolute inset-0 opacity-[0.015]" style="background-image:radial-gradient(circle at 1px 1px,#f97316 1px,transparent 0);background-size:40px 40px"></div>
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative z-10" id="heroText">
<div class="text-center mb-6">
<div class="inline-flex items-center gap-2 bg-white/80 border border-brand-200 rounded-full px-4 py-1.5 mb-5 shadow-sm">
<svg class="w-4 h-4 text-brand-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<a href="https://github.com/go2ismail/Asp.Net-Core-Inventory-Order-Management-System" target="_blank" rel="noopener" class="text-brand-700 text-xs font-semibold hover:text-brand-500 transition-colors">Creator's open source: 1.3K+ GitHub Stars</a>
<span class="text-gray-400 text-xs">&middot;</span>
<span class="text-xs text-gray-500 font-medium">Production-Ready Source Code</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-6xl font-extrabold text-gray-900 mt-3 mb-4 tracking-tight leading-tight">
Enterprise <span class="gradient-text">.NET 10 Source Code</span><br class="sm:hidden" /> for Learning and Commercial Projects
</h1>
<p class="text-sm sm:text-base text-gray-500 max-w-2xl mx-auto mb-2 leading-relaxed">
Built with <span class="text-gray-800 font-semibold">.NET 10</span> +
<span class="text-gray-800 font-semibold">Blazor Server</span> +
<span class="text-gray-800 font-semibold">ASP.NET Core Minimal APIs</span> +
<span class="text-gray-800 font-semibold">Vertical Slice Architecture</span> +
<span class="text-gray-800 font-semibold">CQRS via MediatR</span> +
<span class="text-gray-800 font-semibold">MudBlazor UI</span> +
<span class="text-gray-800 font-semibold">EF Core</span> +
<span class="text-gray-800 font-semibold">JWT + Identity</span>
<span class="text-gray-500">— all in a single-project monolith with</span>
<span class="text-brand-600 font-bold">dozens of working features per application</span>.
</p>
<p class="text-sm sm:text-base text-gray-500 max-w-2xl mx-auto mb-3 leading-relaxed">
<span class="text-brand-600 font-bold">Back End + Front End in one solution.</span>
</p>
<p class="text-sm text-gray-400 mb-6">Stop debugging AI hallucinations. Ship real apps <strong class="text-gray-600">today</strong>.</p>
<div class="flex flex-wrap items-center justify-center gap-3">
<a href="#products" class="btn-primary text-base px-8 py-3.5">Explore Products</a>
<a href="blog.html" class="btn-secondary text-base px-8 py-3.5">Read Blog</a>
</div>
</div>
<div class="bg-white/90 backdrop-blur-sm rounded-2xl p-4 sm:p-5 border border-gray-200 shadow-xl" id="heroVisual">
<div class="flex flex-col lg:flex-row items-stretch gap-4">
<div class="bg-white rounded-xl p-4 border border-gray-200 flex flex-col flex-1">
<h2 class="text-sm font-semibold text-gray-700 text-center">Traditional (Layered)</h2>
<p class="text-gray-400 mb-3 text-center text-[10px]">Organized by technical concerns</p>
<div class="space-y-1.5 flex-1 flex flex-col justify-center">
<div class="border border-gray-200 rounded-lg py-2 px-3 flex items-center gap-2 bg-gray-50"><div class="w-6 h-6 rounded-lg bg-blue-100 flex items-center justify-center shrink-0"><svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="10" r="3"/><path d="M12 2a8 8 0 00-8 8c0 5.4 8 12 8 12s8-6.6 8-12a8 8 0 00-8-8z"/></svg></div><span class="font-medium text-gray-600 text-[10px]">Controllers / API</span></div>
<div class="border border-gray-200 rounded-lg py-2 px-3 flex items-center gap-2 bg-gray-50"><div class="w-6 h-6 rounded-lg bg-emerald-100 flex items-center justify-center shrink-0"><svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg></div><span class="font-medium text-gray-600 text-[10px]">Services</span></div>
<div class="border border-gray-200 rounded-lg py-2 px-3 flex items-center gap-2 bg-gray-50"><div class="w-6 h-6 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-3.5 h-3.5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg></div><span class="font-medium text-gray-600 text-[10px]">Repositories</span></div>
<div class="border border-gray-200 rounded-lg py-2 px-3 flex items-center gap-2 bg-gray-50"><div class="w-6 h-6 rounded-lg bg-violet-100 flex items-center justify-center shrink-0"><svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/></svg></div><span class="font-medium text-gray-600 text-[10px]">Database</span></div>
</div>
</div>
<div class="shrink-0 self-center rotate-90 lg:rotate-0"><svg class="w-10 h-10 text-brand-500" viewBox="0 0 64 64" fill="currentColor"><path d="M4 27 L36 27 L36 15 L60 32 L36 49 L36 37 L4 37 Z"/></svg></div>
<div class="bg-white rounded-xl p-4 border border-brand-200 flex flex-col flex-1">
<h2 class="text-sm font-semibold text-gray-700 text-center">Vertical Slice Architecture</h2>
<p class="text-gray-400 mb-3 text-center text-[10px]">Organized by features (end-to-end)</p>
<div class="grid grid-cols-2 xl:grid-cols-4 gap-1.5 flex-1">
<div class="border border-blue-300 rounded-lg bg-blue-50/50 flex flex-col overflow-hidden"><div class="bg-blue-100 text-blue-700 text-center py-1 px-1.5 text-[9px] font-semibold leading-tight border-b border-blue-200">Create<br/>Order</div><div class="p-1.5 flex flex-col items-center justify-center flex-1 gap-px"><div class="w-6 h-6 rounded bg-white border border-gray-200 flex items-center justify-center overflow-hidden relative"><div class="absolute top-0 left-0 right-0 h-1.5 bg-gray-100"></div><svg class="w-3.5 h-3.5 text-blue-500 z-10 mt-0.5" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="15" r="4" stroke="currentColor" stroke-width="1.2"/><ellipse cx="12" cy="15" rx="2" ry="4" stroke="currentColor" stroke-width="1.2"/><line x1="8" y1="15" x2="16" y2="15" stroke="currentColor" stroke-width="1.2"/></svg></div><svg class="w-2.5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0l-7.5-7.5M12 21V3"/></svg><svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/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.325.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.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.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.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.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-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.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-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0Z"/></svg><svg class="w-2.5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0l-7.5-7.5M12 21V3"/></svg><svg class="w-4 h-4 text-emerald-500" xmlns="http://www.w3.org/2000/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></div>
<div class="border border-emerald-300 rounded-lg bg-emerald-50/50 flex flex-col overflow-hidden"><div class="bg-emerald-100 text-emerald-700 text-center py-1 px-1.5 text-[9px] font-semibold leading-tight border-b border-emerald-200">Get<br/>Order</div><div class="p-1.5 flex flex-col items-center justify-center flex-1 gap-px"><div class="w-6 h-6 rounded bg-white border border-gray-200 flex items-center justify-center overflow-hidden relative"><div class="absolute top-0 left-0 right-0 h-1.5 bg-gray-100"></div><svg class="w-3.5 h-3.5 text-blue-500 z-10 mt-0.5" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="15" r="4" stroke="currentColor" stroke-width="1.2"/><ellipse cx="12" cy="15" rx="2" ry="4" stroke="currentColor" stroke-width="1.2"/><line x1="8" y1="15" x2="16" y2="15" stroke="currentColor" stroke-width="1.2"/></svg></div><svg class="w-2.5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0l-7.5-7.5M12 21V3"/></svg><svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/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.325.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.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.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.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.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-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.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-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0Z"/></svg><svg class="w-2.5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0l-7.5-7.5M12 21V3"/></svg><svg class="w-4 h-4 text-emerald-500" xmlns="http://www.w3.org/2000/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></div>
<div class="border border-amber-300 rounded-lg bg-amber-50/50 flex flex-col overflow-hidden"><div class="bg-amber-100 text-amber-700 text-center py-1 px-1.5 text-[9px] font-semibold leading-tight border-b border-amber-200">Update<br/>Order</div><div class="p-1.5 flex flex-col items-center justify-center flex-1 gap-px"><div class="w-6 h-6 rounded bg-white border border-gray-200 flex items-center justify-center overflow-hidden relative"><div class="absolute top-0 left-0 right-0 h-1.5 bg-gray-100"></div><svg class="w-3.5 h-3.5 text-blue-500 z-10 mt-0.5" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="15" r="4" stroke="currentColor" stroke-width="1.2"/><ellipse cx="12" cy="15" rx="2" ry="4" stroke="currentColor" stroke-width="1.2"/><line x1="8" y1="15" x2="16" y2="15" stroke="currentColor" stroke-width="1.2"/></svg></div><svg class="w-2.5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0l-7.5-7.5M12 21V3"/></svg><svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/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.325.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.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.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.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.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-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.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-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0Z"/></svg><svg class="w-2.5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0l-7.5-7.5M12 21V3"/></svg><svg class="w-4 h-4 text-emerald-500" xmlns="http://www.w3.org/2000/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></div>
<div class="border border-violet-300 rounded-lg bg-violet-50/50 flex flex-col overflow-hidden"><div class="bg-violet-100 text-violet-700 text-center py-1 px-1.5 text-[9px] font-semibold leading-tight border-b border-violet-200">Cancel<br/>Order</div><div class="p-1.5 flex flex-col items-center justify-center flex-1 gap-px"><div class="w-6 h-6 rounded bg-white border border-gray-200 flex items-center justify-center overflow-hidden relative"><div class="absolute top-0 left-0 right-0 h-1.5 bg-gray-100"></div><svg class="w-3.5 h-3.5 text-blue-500 z-10 mt-0.5" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="15" r="4" stroke="currentColor" stroke-width="1.2"/><ellipse cx="12" cy="15" rx="2" ry="4" stroke="currentColor" stroke-width="1.2"/><line x1="8" y1="15" x2="16" y2="15" stroke="currentColor" stroke-width="1.2"/></svg></div><svg class="w-2.5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0l-7.5-7.5M12 21V3"/></svg><svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/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.325.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.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.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.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.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-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.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-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0Z"/></svg><svg class="w-2.5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0l-7.5-7.5M12 21V3"/></svg><svg class="w-4 h-4 text-emerald-500" xmlns="http://www.w3.org/2000/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></div>
</div>
</div>
</div>
</div>
<p class="text-center text-gray-400 text-sm mt-3">.NET 10 &middot; Blazor Server &middot; Vertical Slice Architecture &middot; MudBlazor &middot; Single-Project Monolith</p>
</div>
</section>
<!-- AUTHORITY BAR -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
<div><div class="stat-number">9</div><p class="text-xs text-gray-500 mt-1">Products</p></div>
<div><div class="stat-number">1.3K+</div><p class="text-xs text-gray-500 mt-1">GitHub Stars</p></div>
<div><div class="stat-number">500+</div><p class="text-xs text-gray-500 mt-1">Forks</p></div>
<div><div class="stat-number">50+</div><p class="text-xs text-gray-500 mt-1">Features</p></div>
<div><div class="stat-number">5+</div><p class="text-xs text-gray-500 mt-1">Years of Refinement</p></div>
</div>
</div>
</section>
<!-- LEMON SQUEEZY TRUST -->
<section class="py-8 bg-white border-b border-gray-100">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-10">
<div class="flex items-center gap-3"><img src="img/Logo-lemon-squeezy-Black-Text.png" alt="Lemon Squeezy" class="h-10 w-auto" /><span class="text-gray-300 hidden md:inline">|</span></div>
<div class="flex items-center gap-2 text-sm text-gray-500"><svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.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><span>Secure checkout via <strong class="text-gray-700">Lemon Squeezy</strong></span></div>
<div class="flex items-center gap-2 text-sm text-gray-500"><svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span>Instant digital delivery</span></div>
<div class="flex items-center gap-2 text-sm text-gray-500"><svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span>Lifetime access</span></div>
</div>
</div>
</section>
<!-- PRODUCTS -->
<section id="products" class="py-20 lg:py-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14" id="productsHeader">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">Complete Source Code</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Enterprise <span class="gradient-text">.NET 10</span> Products</h2>
<p class="text-gray-600 mt-4 max-w-2xl mx-auto">9 production-ready Blazor Server apps with MudBlazor UI, REST API, and Vertical Slice Architecture. All source code $21 each.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="productGrid">
<a href="products/blazor-crm.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/crm-customer-relationship-management-01.png" alt="Blazor CRM" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor CRM</h3><p class="text-sm text-gray-500 mb-3">Customer Relationship Management</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
<a href="products/blazor-crm-multitenant.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/crm-multi-tenant-01.png" alt="Blazor CRM Multitenant" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor CRM Multitenant <span class="text-[10px] bg-purple-50 text-purple-600 px-1.5 py-0.5 rounded-full font-medium ml-1">SaaS</span></h3><p class="text-sm text-gray-500 mb-3">CRM with Multi-Tenancy</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
<a href="products/blazor-cms.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/cms-clinic-management-system-01.png" alt="Blazor CMS" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor CMS</h3><p class="text-sm text-gray-500 mb-3">Clinic Management System</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
<a href="products/blazor-hrm.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/hrm-human-resource-management-01.png" alt="Blazor HRM" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor HRM</h3><p class="text-sm text-gray-500 mb-3">Human Resource Management</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
<a href="products/blazor-hrm-multitenant.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/hrm-multi-tenant-saas-01.png" alt="Blazor HRM Multitenant" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor HRM Multitenant <span class="text-[10px] bg-purple-50 text-purple-600 px-1.5 py-0.5 rounded-full font-medium ml-1">SaaS</span></h3><p class="text-sm text-gray-500 mb-3">HRM with Multi-Tenancy</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
<a href="products/blazor-oms.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/oms-order-management-system-01.png" alt="Blazor OMS" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor OMS</h3><p class="text-sm text-gray-500 mb-3">Order Management System</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
<a href="products/blazor-scm.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/scm-supply-chain-management-01.png" alt="Blazor SCM" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor SCM</h3><p class="text-sm text-gray-500 mb-3">Supply Chain Management</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
<a href="products/blazor-swm.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/swm-spa-and-wellness-management-01.png" alt="Blazor SWM" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor SWM</h3><p class="text-sm text-gray-500 mb-3">Spa & Wellness Management</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
<a href="products/blazor-wms.html" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/wms-warehouse-inventory-management-system-01.png" alt="Blazor WMS" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Blazor WMS</h3><p class="text-sm text-gray-500 mb-3">Warehouse Management System</p><div class="flex items-center justify-between"><div><span class="text-xl font-bold text-gray-900">$21</span> <span class="text-sm text-gray-400 line-through ml-1">$49</span></div><span class="text-xs font-medium text-brand-600">View Details &rarr;</span></div></div></a>
</div>
</div>
</section>
<!-- BONUS: ADMIN TEMPLATES -->
<section id="bonus" class="py-20 lg:py-28 bg-gray-50/80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">Bonus - FREE</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Clean, Professional <span class="gradient-text">Admin Templates</span></h2>
<p class="text-gray-600 mt-4 max-w-2xl mx-auto">A modern, light, minimalist admin template built with Tailwind CSS and Alpine.js. Explore ten business-grade dashboards, each available in five carefully crafted color themes.</p>
<div class="mt-6 inline-flex items-center gap-2 bg-emerald-50 border border-emerald-200 rounded-full px-4 py-2"><svg class="w-4 h-4 text-emerald-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span class="text-sm font-semibold text-emerald-700">100% FREE — yours on every product purchase, no extra cost.</span></div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 mb-12">
<h3 class="text-xl font-bold text-gray-900 mb-3">A complete front-end foundation</h3>
<p class="text-gray-600 leading-relaxed text-sm mb-6">The admin template is a building block of the Enterprise Development Kit — a clean, professional UI layer for line-of-business applications.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex items-start gap-3">
<div class="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center shrink-0"><svg class="w-5 h-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 13.5l10.5-11.25L12 3.75 3.75 13.5zm0 0L12 21.75l8.25-10.5M12 21.75V13.5"/></svg></div>
<div>
<h4 class="text-base font-semibold text-gray-900 mb-1">Lightweight &amp; Fast</h4>
<p class="text-sm text-gray-500">Built on Tailwind CSS and Alpine.js — no heavy build step, no framework lock-in, just clean composable markup.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center shrink-0"><svg class="w-5 h-5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h4 class="text-base font-semibold text-gray-900 mb-1">Modular Components</h4>
<p class="text-sm text-gray-500">Reusable cards, tables, forms, auth pages and widgets crafted for consistent, professional enterprise layouts.</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<a href="https://admintemplate-html.csharpasp.net/" target="_blank" rel="noopener" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/admintemplate-html.png" alt="Admin Template HTML" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Admin Template HTML</h3><p class="text-sm text-gray-500 mb-3">Tailwind CSS + Alpine.js</p><div class="flex items-center justify-between"><span class="text-xs font-medium text-brand-600">Live Demo &rarr;</span></div></div></a>
<a href="https://admintemplate-mvc.csharpasp.net/" target="_blank" rel="noopener" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/admintemplate-mvc.png" alt="Admin Template MVC" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Admin Template MVC</h3><p class="text-sm text-gray-500 mb-3">ASP.NET Core MVC</p><div class="flex items-center justify-between"><span class="text-xs font-medium text-brand-600">Live Demo &rarr;</span></div></div></a>
<a href="https://admintemplate-razor.csharpasp.net/" target="_blank" rel="noopener" class="product-card bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm block"><div class="relative overflow-hidden prod-img-wrap bg-gray-100"><img src="img/admintemplate-razor.png" alt="Admin Template Razor" class="prod-img" loading="lazy" onerror="this.style.display='none'" /></div><div class="p-5"><h3 class="text-lg font-bold text-gray-900 mb-0.5">Admin Template Razor</h3><p class="text-sm text-gray-500 mb-3">ASP.NET Core Razor Pages</p><div class="flex items-center justify-between"><span class="text-xs font-medium text-brand-600">Live Demo &rarr;</span></div></div></a>
</div>
<div class="mt-12 text-center bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-2xl p-6 sm:p-8">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-2">Get All 3 Admin Templates <span class="gradient-text">Absolutely FREE</span></h3>
<p class="text-gray-600 max-w-2xl mx-auto mb-5">These three professional admin templates are included <strong class="text-gray-800">free with every product purchase</strong>.</p>
<a href="#products" class="btn-primary text-sm px-8 py-3.5 inline-block">Browse Products &amp; Claim Your Free Bonus</a>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features" class="py-20 lg:py-28 bg-gray-50/80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14"><div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">Tech Stack</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Built on the <span class="gradient-text">Proven Stack</span></h2><p class="text-gray-600 mt-4">Every product uses the same battle-tested architecture.</p></div>
<div class="flex flex-wrap justify-center gap-3 mb-14">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>REST API</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>EF Core</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>VSA</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5" id="featureCards">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card"><div class="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-base font-semibold text-gray-900 mb-2">Production Ready</h4><p class="text-sm text-gray-500">Clone, configure connection string, run. No complex build pipelines.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card"><div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-base font-semibold text-gray-900 mb-2">Clean Code</h4><p class="text-sm text-gray-500">Vertical Slice Architecture. Add features in one folder, not 5 projects.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card"><div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-base font-semibold text-gray-900 mb-2">Monolith Done Right</h4><p class="text-sm text-gray-500">Single project. No distributed complexity until you need it.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card"><div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-base font-semibold text-gray-900 mb-2">Auth & Security</h4><p class="text-sm text-gray-500">Identity, JWT, role-based authorization. Pre-configured.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card"><div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg></div><h4 class="text-base font-semibold text-gray-900 mb-2">REST API + Swagger</h4><p class="text-sm text-gray-500">Minimal APIs with OpenAPI docs and JWT authentication.</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card"><div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.375"/></svg></div><h4 class="text-base font-semibold text-gray-900 mb-2">EF Core + SQL Server</h4><p class="text-sm text-gray-500">Migrations, seed data, compiled queries. Instant testing.</p></div>
</div>
</div>
</section>
<!-- SEO: WHAT IS ENTERPRISE SOURCE CODE -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><div class="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-200 rounded-full px-3.5 py-1 mb-4"><span class="text-blue-700 text-xs font-medium tracking-wide">What You Get</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Enterprise <span class="gradient-text">.NET Source Code</span>, Explained</h2></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">When we say <strong class="text-gray-800">enterprise .NET source code</strong>, we mean a complete, production-grade application — not a template, not a starter kit, not a tutorial project. Each Indotalent product is a <strong class="text-gray-800">fully working business application</strong> with 50 to 100 end-to-end features, ready to run on your machine in under 60 seconds.</p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">You receive the <strong class="text-gray-800">unrestricted C# source code</strong> for the entire solution. This includes the Blazor Server UI layer, the REST API endpoints, the business logic handlers, the Entity Framework Core data access layer, the database migrations, and the seed data — all in a single Visual Studio project that compiles and runs immediately.</p>
<p class="text-gray-600 leading-relaxed text-sm"><strong class="text-gray-800">No obfuscation. No missing pieces. No hidden dependencies.</strong> You can study every line of code, modify any feature, extend the application for your own needs, and deploy it as you see fit. This is professional C# code written by a developer with 5+ years of .NET experience, following industry best practices.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">What's Included in Every Product</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Complete Blazor Server Front End</strong> — Responsive UI with MudBlazor components, data grids, forms, dialogs, and dashboards</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">REST Web API</strong> — Minimal API endpoints with Swagger/OpenAPI documentation and JWT authentication</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Business Logic Layer</strong> — MediatR handlers with CQRS pattern, FluentValidation, and clean domain logic</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Data Access</strong> — Migrations, seed data, compiled queries, and SQL Server database design</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Authentication & Authorization</strong> — ASP.NET Core Identity, JWT tokens, role-based and policy-based access control</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail & Security</strong> — User activity logging, data change tracking, and secure data handling</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SEO: WHAT YOU'LL LEARN -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><div class="inline-flex items-center gap-1.5 bg-teal-50 border border-teal-200 rounded-full px-3.5 py-1 mb-4"><span class="text-teal-700 text-xs font-medium tracking-wide">Learning Path</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What You'll <span class="gradient-text">Learn</span> from This Source Code</h2><p class="text-gray-500 mt-3 max-w-2xl mx-auto">Each product is a complete enterprise application. Study real-world implementations of these production patterns.</p></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-1">Authentication</h3>
<p class="text-sm text-gray-500">ASP.NET Core Identity with secure password hashing, login, registration, and password reset. Study how cookies and JWT tokens coexist for dual UI + API authentication.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path 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-base font-semibold text-gray-900 mb-1">Authorization</h3>
<p class="text-sm text-gray-500">Role-based (RBAC) and policy-based access control. Learn how Admin, Manager, and User roles map to feature access, and how declarative policies protect sensitive operations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-1">CQRS + MediatR</h3>
<p class="text-sm text-gray-500">Command Query Responsibility Segregation via MediatR. Study how pipeline behaviors handle validation, logging, and transactions without cluttering business logic.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-1">REST API</h3>
<p class="text-sm text-gray-500">ASP.NET Core Minimal APIs with Swagger/OpenAPI docs. Learn proper HTTP status codes, request/response DTOs, JWT-protected endpoints, and API versioning patterns.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-1">Audit Trail</h3>
<p class="text-sm text-gray-500">Every data modification is tracked with user ID, timestamp, and change details. Study how to implement compliance-ready logging without polluting business logic.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-1">Reporting</h3>
<p class="text-sm text-gray-500">Built-in dashboards with charts, summary cards, and data grids. Learn how MudBlazor components compose into analytics views with EF Core aggregation queries.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-1">Deployment</h3>
<p class="text-sm text-gray-500">Standard ASP.NET Core project — deploy on Azure, IIS, or Docker in minutes. Single-project monolith means zero distributed complexity. Works on Windows, Linux, and macOS.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-1">Multi-Tenant SaaS</h3>
<p class="text-sm text-gray-500">Two products include full multi-tenancy with tenant isolation. Study how to design a SaaS architecture where multiple organizations share one database with zero data leakage.</p>
</div>
</div>
</div>
</section>
<!-- SEO: WHY THIS IS DIFFERENT FROM CRUD TEMPLATES -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Difference</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Why This Is <span class="gradient-text">Different</span> from CRUD Templates</h2><p class="text-gray-500 mt-3 max-w-2xl mx-auto">The internet is full of "Blazor CRUD tutorials." Here's what they never include — and what every Indotalent product ships with.</p></div>
<div class="overflow-x-auto bg-white border border-gray-200 rounded-2xl shadow-sm">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700">Feature</th><th class="text-center px-4 py-3 font-semibold text-red-600">Typical CRUD Tutorial</th><th class="text-center px-4 py-3 font-semibold text-emerald-600">Indotalent Source Code</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Authentication & Login</td><td class="text-center text-red-500">None or hardcoded</td><td class="text-center text-emerald-600 font-medium">Full Identity + JWT</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Role-Based Authorization</td><td class="text-center text-red-500">Not included</td><td class="text-center text-emerald-600 font-medium">Admin, Manager, User roles</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Audit Trail</td><td class="text-center text-red-500">Not included</td><td class="text-center text-emerald-600 font-medium">Every action logged</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">REST API + Swagger</td><td class="text-center text-red-500">Not included</td><td class="text-center text-emerald-600 font-medium">Full OpenAPI docs</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Seed Data</td><td class="text-center text-red-500">None</td><td class="text-center text-emerald-600 font-medium">Complete demo dataset</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Database Migrations</td><td class="text-center text-red-500">Manual scripts</td><td class="text-center text-emerald-600 font-medium">EF Core migrations</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Validation</td><td class="text-center text-red-500">Basic or none</td><td class="text-center text-emerald-600 font-medium">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Error Handling</td><td class="text-center text-red-500">Try-catch everywhere</td><td class="text-center text-emerald-600 font-medium">Global exception middleware</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Architecture Pattern</td><td class="text-center text-red-500">No pattern</td><td class="text-center text-emerald-600 font-medium">VSA + CQRS</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Dashboard & Reporting</td><td class="text-center text-red-500">Not included</td><td class="text-center text-emerald-600 font-medium">Charts and KPIs</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Multi-Tenant (SaaS)</td><td class="text-center text-red-500">Not included</td><td class="text-center text-emerald-600 font-medium">2 SaaS products</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700">Deployment-Ready</td><td class="text-center text-red-500">No</td><td class="text-center text-emerald-600 font-medium">Azure, IIS, Docker</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-semibold">Number of Features</td><td class="text-center text-red-500 font-bold">3-5 CRUD pages</td><td class="text-center text-emerald-600 font-bold">50-100 end-to-end features</td></tr>
</tbody>
</table>
</div>
<p class="text-center text-sm text-gray-500 mt-4">CRUD tutorials teach you syntax. <strong class="text-gray-800">Indotalent teaches you architecture.</strong></p>
</div>
</section>
<!-- SEO: ARCHITECTURE DEEP DIVE -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Architecture That <span class="gradient-text">Developers Love</span></h2><p class="text-gray-500 mt-3 max-w-2xl mx-auto">Every Indotalent product uses the same production-proven patterns: Vertical Slice Architecture, CQRS via MediatR, and secure REST APIs.</p></div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Instead of scattering code across Controller, Service, Repository, and Domain layers, VSA organizes every feature in a single folder. Each slice contains its own endpoint, MediatR handler, FluentValidation validator, and EF Core queries — all in one place. This maximizes cohesion, minimizes cognitive overhead, and makes every feature self-contained and easy to understand. <strong>Add a feature without touching 5 different projects.</strong></p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. This CQRS pattern keeps your code clean, testable, and optimized — read queries use EF Core no-tracking for maximum performance, while command handlers encapsulate business logic with full change tracking. <strong>Pipeline behaviors</strong> handle cross-cutting concerns like validation, logging, and transactions without cluttering your business code.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">REST API + Identity</h3>
<p class="text-sm text-gray-500">Every product exposes a complete REST Web API with Swagger/OpenAPI documentation. The API is secured with JWT bearer token authentication on top of ASP.NET Core Identity. You get user registration, login, role management, and policy-based authorization out of the box. <strong>Backend and frontend share the same authentication</strong> — cookies for Razor pages, JWT for API clients. Ready for mobile apps, third-party integrations, or microservices.</p>
</div>
</div>
</div>
</section>
<!-- SEO: SECURITY -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Enterprise-Grade <span class="gradient-text">Security</span> Built In</h2></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Security is not an afterthought in Indotalent products — it is <strong class="text-gray-800">baked into the architecture from the ground up</strong>. Every application ships with a fully configured authentication and authorization system that you would otherwise spend weeks implementing from scratch.</p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">The security stack includes <strong class="text-gray-800">ASP.NET Core Identity</strong> for user and role management with secure password hashing. <strong class="text-gray-800">JWT (JSON Web Token)</strong> authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. Both schemes run simultaneously — your Razor components and API endpoints are protected with zero additional configuration.</p>
<p class="text-gray-600 leading-relaxed text-sm">Role-based access control (RBAC) restricts features by user role. Policy-based authorization provides fine-grained control — define policies like "CanApproveOrders" or "CanViewFinancialReports" and apply them declaratively. <strong class="text-gray-800">Every data modification is tracked</strong> with user ID and timestamp, creating a complete audit trail for compliance and debugging.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features in Every Product</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Authentication</strong> — ASP.NET Core Identity with secure password hashing, login, registration, and password reset flows</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Token Auth</strong> — Stateless API authentication with configurable token expiration and refresh</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Predefined roles (Admin, Manager, User) with granular permission sets</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative access policies for fine-grained feature control</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create, update, and delete operation logged with user, timestamp, and change details</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Real-time Blazor Server connections secured with [Authorize] attributes</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SEO: WHO BENEFITS -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Who It's For</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Built for <span class="gradient-text">Every Developer</span></h2><p class="text-gray-500 mt-3 max-w-2xl mx-auto">Whether you're writing your first line of C# or architecting enterprise systems, Indotalent products meet you where you are.</p></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-1">Students & Beginners</h3>
<p class="text-sm text-gray-500">Learn .NET the right way — by studying <strong>real, working enterprise code</strong>. See how authentication connects to the database, how the UI calls the API, and how 50+ features coexist in one project. Skip the tutorial rabbit hole and study code that actually ships.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-1">Freelancers & Agencies</h3>
<p class="text-sm text-gray-500">Stop building CRUD from scratch for every client. For <strong>$21 per license</strong>, you get a complete working application you can rebrand, customize, and deploy. Charge clients for implementation, not foundation. Save 5-8 weeks per project.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path 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-base font-semibold text-gray-900 mb-1">Experienced Developers</h3>
<p class="text-sm text-gray-500">Study a complete <strong>Vertical Slice Architecture</strong> implementation in a production .NET 10 app. See how CQRS, MediatR pipeline behaviors, FluentValidation, and EF Core come together in a clean monolith. Apply these patterns to your own projects immediately.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-violet-50 flex items-center justify-center mb-3"><svg class="w-5 h-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-1">Teams & Startups</h3>
<p class="text-sm text-gray-500">Launch your MVP in days, not months. Each product is a <strong>fully functional application</strong> you can deploy as-is or extend. Single-project structure means zero infrastructure complexity. Onboard new developers in hours, not weeks — one feature, one folder, zero confusion.</p>
</div>
</div>
<div class="text-center mt-8"><a href="#products" class="btn-primary text-sm px-6 py-3">Find Your Product &rarr;</a></div>
</div>
</section>
<!-- COMPARISON: AI vs Indotalent -->
<section id="comparison" class="py-20 lg:py-28">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12"><div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Truth</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">AI-Generated Code <span class="gradient-text">vs</span> Indotalent</h2><p class="text-gray-500 mt-3">Why copying prompts into ChatGPT won't ship your enterprise app.</p></div>
<div class="overflow-x-auto bg-white border border-gray-200 rounded-2xl shadow-sm">
<table class="w-full comparison-table">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 text-sm font-semibold text-gray-700">Requirement</th><th class="text-center px-4 py-3 text-sm font-semibold text-red-600">AI-Generated</th><th class="text-center px-4 py-3 text-sm font-semibold text-emerald-600">Indotalent</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="text-gray-700 font-medium">End-to-End Features</td><td class="text-center text-red-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></td><td class="text-center text-emerald-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></td></tr>
<tr class="border-b border-gray-100"><td class="text-gray-700 font-medium">Secure Authentication</td><td class="text-center text-red-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></td><td class="text-center text-emerald-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></td></tr>
<tr class="border-b border-gray-100"><td class="text-gray-700 font-medium">Clean Architecture</td><td class="text-center text-red-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></td><td class="text-center text-emerald-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></td></tr>
<tr class="border-b border-gray-100"><td class="text-gray-700 font-medium">Compiles & Runs First Try</td><td class="text-center text-red-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></td><td class="text-center text-emerald-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></td></tr>
<tr class="border-b border-gray-100"><td class="text-gray-700 font-medium">Database Migrations</td><td class="text-center text-red-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></td><td class="text-center text-emerald-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></td></tr>
<tr class="border-b border-gray-100"><td class="text-gray-700 font-medium">Seed Data Included</td><td class="text-center text-red-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></td><td class="text-center text-emerald-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></td></tr>
<tr><td class="text-gray-700 font-medium">Just $21</td><td class="text-center text-red-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></td><td class="text-center text-emerald-500"><svg class="w-5 h-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- PRICING -->
<section id="pricing" class="py-20 lg:py-28 bg-gray-50/80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14"><div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">Pricing</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Fair Pricing for <span class="gradient-text">Developers</span></h2></div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
<div class="pricing-card text-center"><h3 class="text-lg font-semibold text-gray-900 mb-1">Without Support</h3><p class="text-sm text-gray-500 mb-6">Complete Source Code</p><div class="text-4xl font-extrabold text-gray-900 mb-6"><span class="text-gray-400 line-through text-2xl">$49</span> $21</div><ul class="space-y-3 text-sm text-gray-500 mb-8 text-left"><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Complete Source Code</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Instant Download</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Lifetime Access</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template HTML (Free Bonus)</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template MVC (Free Bonus)</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template Razor (Free Bonus)</li></ul><a href="#products" class="btn-secondary text-sm w-full block text-center py-3">Get Started</a></div>
<div class="pricing-card featured text-center"><h3 class="text-lg font-semibold text-gray-900 mb-1">With Support</h3><p class="text-sm text-gray-500 mb-6">Source Code + Support</p><div class="text-4xl font-extrabold text-gray-900 mb-6">$49</div><ul class="space-y-3 text-sm text-gray-500 mb-8 text-left"><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Complete Source Code</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Instant Download</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Email Support</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template HTML (Free Bonus)</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template MVC (Free Bonus)</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template Razor (Free Bonus)</li></ul><a href="#products" class="btn-primary text-sm w-full block text-center py-3">Get Started</a></div>
<div class="pricing-card text-center"><h3 class="text-lg font-semibold text-gray-900 mb-1">Enterprise</h3><p class="text-sm text-gray-500 mb-6">Source + Custom Dev</p><div class="text-4xl font-extrabold text-gray-900 mb-6"><span class="text-gray-400 line-through text-2xl">$2200</span> $1200</div><ul class="space-y-3 text-sm text-gray-500 mb-8 text-left"><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Complete Source Code</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Priority Support</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Custom Development — 1 FTE / month, unlimited requests</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template HTML (Free Bonus)</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template MVC (Free Bonus)</li><li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template Razor (Free Bonus)</li></ul><a href="mailto:hi@indotalent.com" class="btn-secondary text-sm w-full block text-center py-3">Contact Us</a></div>
<div class="pricing-card featured md:col-span-3 text-left">
<div class="flex flex-col lg:flex-row lg:items-center gap-8">
<div class="lg:w-1/3 lg:border-r lg:border-orange-200 lg:pr-8">
<span class="inline-flex items-center gap-1.5 bg-orange-100 text-brand-700 text-xs font-bold uppercase tracking-wide rounded-full px-3 py-1.5 mb-4">Best Value Bundle</span>
<h3 class="text-2xl font-bold text-gray-900 mb-2">Freelancer &amp; Developer Suite</h3>
<div class="text-4xl font-extrabold text-gray-900 mb-6">$149</div>
<a href="https://code.indotalent.com/checkout/buy/c57da391-1b07-4be3-aa03-9609f7788ace?embed=1&logo=0&discount=0" class="lemonsqueezy-button btn-primary text-sm w-full block text-center py-3">Buy Freelancer &amp; Developer Suite</a>
</div>
<div class="lg:w-2/3">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm text-gray-600">
<ul class="space-y-3">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Complete Source Code</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>CRM (Customer Relationship Management)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>HRM (Human Resource Management)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>CMS (Clinic Management System)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>OMS (Order Management System)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>SCM (Supply Chain Management)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>SWM (Spa &amp; Wellness Management)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>WMS (Warehouse Management System)</li>
</ul>
<ul class="space-y-3">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Multitenant CRM</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Multitenant HRM</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Instant Download</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Email Support</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template HTML (Free Bonus)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template Razor (Free Bonus)</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Admin Template MVC (Free Bonus)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 max-w-5xl mx-auto">
<div class="bg-gradient-to-r from-emerald-50 to-green-50 border border-emerald-200 rounded-2xl p-6 sm:p-8">
<div class="flex flex-col md:flex-row items-center gap-6">
<div class="flex-shrink-0">
<span class="inline-flex items-center gap-1.5 bg-emerald-600 text-white text-xs font-bold uppercase tracking-wide rounded-full px-3 py-1.5">Free Bonus</span>
</div>
<div class="flex-1 text-center md:text-left">
<h3 class="text-lg sm:text-xl font-bold text-gray-900 mb-1">3 Admin Templates Included Free</h3>
<p class="text-sm text-gray-600">Every purchase — at any tier — comes with the <strong class="text-gray-800">Admin Template HTML</strong>, <strong class="text-gray-800">Admin Template MVC</strong>, and <strong class="text-gray-800">Admin Template Razor</strong> at <strong class="text-emerald-700">no extra cost</strong>.</p>
</div>
<div class="flex-shrink-0">
<a href="#bonus" class="btn-secondary text-sm px-6 py-3 inline-block">View Free Bonus</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="py-20 lg:py-28">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12"><div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div><h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Frequently <span class="gradient-text">Asked Questions</span></h2></div>
<div class="space-y-4" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">What do I get when I purchase?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 1" x-cloak class="px-5 pb-5 text-sm text-gray-600">You get the <strong>complete, unrestricted source code</strong> of the entire application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. <strong>Clone, set your connection string, press F5, and it runs immediately.</strong> No missing pieces. No hidden dependencies.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Can beginners use this source code?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 2" x-cloak class="px-5 pb-5 text-sm text-gray-600">Absolutely! The code is <strong>clean, well-structured, and self-documenting</strong>. Beginners can learn by studying real production patterns — authentication flows, CRUD operations, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free). See our <a href="for-beginners.html" class="text-brand-600 hover:text-brand-700 font-medium">Beginner's Guide</a>.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Can I use this commercially?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 3" x-cloak class="px-5 pb-5 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can charge clients for customization, implementation, and deployment. Freelancers and agencies save 5-8 weeks per project. Each new client project requires a separate $21 license. See our <a href="license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a> and <a href="for-freelancers.html" class="text-brand-600 hover:text-brand-700 font-medium">Freelancer Guide</a>.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Does it include REST API?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 4" x-cloak class="px-5 pb-5 text-sm text-gray-600">Yes! Every product exposes a <strong>complete REST Web API</strong> built with ASP.NET Core Minimal APIs. The API includes <strong>Swagger/OpenAPI documentation</strong>, JWT authentication, and proper HTTP status codes. You can use the API for mobile apps, third-party integrations, or a separate frontend — it's fully functional and documented.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Does it include authentication and authorization?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 5" x-cloak class="px-5 pb-5 text-sm text-gray-600">Yes — it's <strong>fully pre-configured</strong>. You get <strong>ASP.NET Core Identity</strong> for user management with secure password hashing, <strong>JWT (JSON Web Token)</strong> authentication for the REST API, <strong>role-based access control (RBAC)</strong> with Admin/Manager/User roles, and <strong>policy-based authorization</strong> for fine-grained access. Both the Blazor UI and REST API are protected out of the box.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Does it support SQL Server and PostgreSQL?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 6" x-cloak class="px-5 pb-5 text-sm text-gray-600"><strong>SQL Server</strong> is fully tested and ready to use with EF Core migrations and seed data included. <strong>PostgreSQL</strong> support is already scaffolded in the codebase — the EF Core provider and connection string configuration are set up — but it <strong>has not been fully tested yet</strong>. You can switch between databases by changing the connection string and provider in <code>Program.cs</code>.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 7 ? null : 7" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Can I deploy it on Azure, IIS, or Docker?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 7}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 7" x-cloak class="px-5 pb-5 text-sm text-gray-600">Yes! The application is a standard <strong>ASP.NET Core project</strong> and can be deployed anywhere .NET 10 runs: <strong>Azure App Service</strong>, <strong>IIS (Internet Information Services)</strong>, or <strong>Docker containers</strong>. It's a single-project monolith — no distributed complexity. Build the project, publish the output, configure your connection string, and deploy. Works on Windows, Linux, and macOS.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 8 ? null : 8" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">How secure is the application?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 8}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 8" x-cloak class="px-5 pb-5 text-sm text-gray-600">Security is <strong>baked into the architecture</strong>. The application includes: ASP.NET Core Identity with password hashing, JWT + cookie dual authentication, role-based and policy-based authorization, audit trail (every create/update/delete is logged with user ID and timestamp), and SignalR connection protection with <code>[Authorize]</code> attributes. Source code and connection strings <strong>never leave the server</strong> with Blazor Server. This is enterprise-grade security ready for production use.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 9 ? null : 9" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">What architecture pattern is used?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 9}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 9" x-cloak class="px-5 pb-5 text-sm text-gray-600">All products use <strong>Vertical Slice Architecture (VSA)</strong> — the modern alternative to traditional layered architecture. Each feature (Create Order, Get Customer, etc.) lives in its own folder with its endpoint, MediatR handler, FluentValidation validator, and EF Core queries all in one place. We also implement <strong>CQRS via MediatR</strong> for clean separation of commands and queries. This architecture is <strong>AI-friendly</strong>, <strong>beginner-friendly</strong>, and <strong>production-proven</strong>. Read our <a href="blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 10 ? null : 10" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Why $21? Is this a trial or limited version?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 10}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 10" x-cloak class="px-5 pb-5 text-sm text-gray-600">No trial, no limits. You get the <strong>full, unrestricted source code</strong>. The $21 price is intentional to make enterprise-grade architecture accessible to every developer, freelancer, and small agency. The original price is $49.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 11 ? null : 11" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">How is payment handled?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 11}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 11" x-cloak class="px-5 pb-5 text-sm text-gray-600">All payments are processed securely through <strong>Lemon Squeezy</strong>, a trusted payment platform for digital products. We never see or store your credit card details. After payment, you get instant access to download.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 12 ? null : 12" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors"><span class="font-semibold text-gray-900">Is there a refund policy?</span><svg class="w-5 h-5 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 12}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 12" x-cloak class="px-5 pb-5 text-sm text-gray-600">Due to the digital nature of source code, we have a strict <strong>no-refund policy</strong>. That's why we provide <strong>live demos</strong> for every product. Test thoroughly before you buy. <a href="no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div></div>
</div>
</div>
</section>
<!-- GITHUB CREDIBILITY -->
<section class="py-20 lg:py-28 bg-gray-50/80" id="github">
<div class="max-w-6xl mx-auto px-4">
<div class="bg-gradient-to-br from-white via-white to-orange-50/80 border border-orange-200 rounded-3xl overflow-hidden">
<div class="flex flex-col lg:flex-row">
<div class="w-full lg:w-1/2 p-6 lg:p-8 flex flex-col justify-center">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4 self-start">
<svg class="w-3.5 h-3.5 text-brand-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.517 1.48-8.279L0 9.306l8.332-1.151z"/></svg>
<span class="text-brand-700 text-xs font-medium tracking-wide">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3 tracking-tight">1.3K+ Stars on GitHub<br/><span class="gradient-text">& Counting</span></h2>
<h3 class="text-lg md:text-xl font-semibold text-gray-700 mb-4">Built by a Developer, <span class="gradient-text">for Developers</span>.</h3>
<div class="space-y-4 text-sm text-gray-500 leading-relaxed">
<p>I'm the engineer behind these products. My open-source work has been trusted by <span class="text-gray-800 font-medium">1,300+ developers</span> on GitHub with <span class="text-gray-800 font-medium">500+ forks</span>.</p>
<p>Every product is priced at just <span class="text-brand-600 font-bold text-lg">$21</span> <span class="text-gray-400 line-through">$49</span> accessible pricing for freelancers and corporate engineers alike.</p>
<p>Each product is a <span class="text-gray-800 font-medium">.NET 10 Blazor</span> solution built with <span class="text-gray-800 font-medium">Vertical Slice Architecture</span>. No distributed complexity. Just clean, working code.</p>
<p class="text-gray-700 font-medium">Your purchase directly supports my open-source work. Thank you for being part of this journey.</p>
</div>
</div>
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 lg:p-8">
<div class="w-full max-w-sm bg-gradient-to-br from-white via-white to-orange-50/80 border border-orange-200 rounded-2xl overflow-hidden">
<div class="flex flex-col items-center py-8 px-6">
<svg class="w-20 h-20 text-brand-400/60" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<a href="https://github.com/go2ismail/Asp.Net-Core-Inventory-Order-Management-System" target="_blank" rel="noopener" class="inline-flex items-center gap-1 bg-orange-50 border border-orange-200 rounded-full px-3 py-1 mt-4 hover:bg-orange-100 transition-colors"><svg class="w-3 h-3 text-brand-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.517 1.48-8.279L0 9.306l8.332-1.151z"/></svg><span class="text-brand-700 text-[10px] font-medium">GitHub Stars</span></a>
<div class="flex flex-wrap items-center justify-center gap-3 mt-3 text-[11px] text-gray-500"><span class="flex items-center gap-1"><svg class="w-3 h-3 text-brand-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988"/></svg>1,300+ Stars</span><span class="flex items-center gap-1"><svg class="w-3 h-3 text-brand-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path 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 0"/></svg>500+ Forks</span></div>
<div class="w-12 h-px mt-4 bg-gradient-to-r from-brand-300/60 via-brand-400/50 to-amber-400/60"></div>
<div class="flex items-center gap-2.5 mt-3"><img src="img/ismail.jpg" alt="go2ismail" class="w-8 h-8 rounded-full object-cover ring-2 ring-brand-300 ring-offset-2 ring-offset-white" /><div class="flex flex-col"><span class="text-xs font-medium text-gray-800">go2ismail</span><span class="text-[10px] text-gray-500">Creator & Maintainer</span></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 lg:py-28">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-gradient-to-br from-white via-white to-orange-50/80 border border-orange-100 rounded-3xl p-8 lg:p-12 shadow-sm">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5"><span class="text-brand-700 text-xs font-medium tracking-wide">Get Started Today</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Ship Your <span class="gradient-text">.NET 10</span> App Today</h2>
<p class="text-gray-600 max-w-2xl mx-auto mb-8">Save months of development. Production-ready Blazor apps with MudBlazor UI, REST API, and VSA.</p>
<div class="flex flex-wrap items-center justify-center gap-4"><a href="#products" class="btn-primary text-base">Explore Products</a><a href="blog.html" class="btn-secondary text-base">Read Blog</a></div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1"><a href="index.html" class="flex items-center gap-2 mb-3"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-6 w-auto" /></a><p class="text-xs text-gray-500 leading-relaxed">Enterprise .NET 10 & Blazor complete source code. Back End + Front End in one VSA monolith. Thank you for your support.</p></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Products</h5><ul class="space-y-2"><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">CRM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">CMS</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">HRM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">SCM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">WMS</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Resources</h5><ul class="space-y-2"><li><a href="https://github.com/go2ismail" target="_blank" rel="noopener" class="text-sm text-gray-500 hover:text-brand-500">GitHub</a></li><li><a href="blog.html" class="text-sm text-gray-500 hover:text-brand-500">Blog</a></li><li><a href="support.html" class="text-sm text-gray-500 hover:text-brand-500">Support</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Company</h5><ul class="space-y-2"><li><a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-brand-500">Privacy</a></li><li><a href="no-refund-policy.html" class="text-sm text-gray-500 hover:text-brand-500">No Refund</a></li><li><a href="license.html" class="text-sm text-gray-500 hover:text-brand-500">License</a></li><li><a href="mailto:hi@indotalent.com" class="text-sm text-gray-500 hover:text-brand-500">Contact</a></li></ul></div>
</div>
<div class="border-t border-gray-200 mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-4"><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. All rights reserved.</p><p class="text-xs text-gray-500">Built with <span class="text-brand-500">&hearts;</span> by go2ismail</p></div>
</div>
</footer>
<!-- FAB Back to Top -->
<a href="#" class="fab-back-to-top" id="backToTop" title="Back to top">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/></svg>
</a>
<script>
document.addEventListener('DOMContentLoaded',function(){
gsap.registerPlugin(ScrollTrigger);
gsap.timeline({defaults:{ease:'power4.out'}}).fromTo('#heroText',{autoAlpha:0,y:60},{autoAlpha:1,y:0,duration:.8}).fromTo('#heroVisual',{autoAlpha:0,x:60},{autoAlpha:1,x:0,duration:.8},'-=0.5');
ScrollTrigger.create({trigger:'#productsHeader',start:'top 80%',onEnter:()=>{gsap.fromTo('#productsHeader',{autoAlpha:0,y:50},{autoAlpha:1,y:0,duration:.6})}});
gsap.fromTo('.product-card',{autoAlpha:0,y:60},{autoAlpha:1,y:0,duration:.5,stagger:.08,scrollTrigger:{trigger:'#productGrid',start:'top 80%'}});
ScrollTrigger.create({trigger:'#features',start:'top 80%',onEnter:()=>{gsap.fromTo('#featureCards>div',{autoAlpha:0,y:40},{autoAlpha:1,y:0,duration:.5,stagger:.06})}});
ScrollTrigger.create({trigger:'#comparison',start:'top 80%',onEnter:()=>{gsap.fromTo('#comparison .overflow-x-auto',{autoAlpha:0,y:40},{autoAlpha:1,y:0,duration:.6})}});
// Active nav link scrollspy
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('nav a[href^="#"]');
window.addEventListener('scroll',function(){
let current='';
sections.forEach(s=>{const top=s.offsetTop-100;if(window.scrollY>=top)current=s.getAttribute('id')});
navLinks.forEach(l=>{l.classList.remove('active');if(l.getAttribute('href')==='#'+current)l.classList.add('active')});
});
// Back to top FAB
const fab=document.getElementById('backToTop');
window.addEventListener('scroll',function(){
if(window.scrollY>500)fab.classList.add('visible');else fab.classList.remove('visible');
});
fab.addEventListener('click',function(e){e.preventDefault();window.scrollTo({top:0,behavior:'smooth'})});
});
</script>
</body>
</html>
license.html
+34
View File
File diff suppressed because one or more lines are too long
no-refund-policy.html
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No Refund Policy | Indotalent</title>
<meta name="description" content="No Refund Policy for Indotalent digital products. Understand our policy before purchasing source code." />
<meta name="robots" content="index, follow" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="index.html" class="flex items-center gap-2"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><a href="index.html" class="text-sm text-gray-500 hover:text-brand-500">&larr; Back</a></div></div></nav>
<div class="pt-24 pb-16"><div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"><div class="text-center mb-10"><div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">Policy</span></div><h1 class="text-3xl sm:text-4xl font-bold text-gray-900">No <span class="gradient-text">Refund</span> Policy</h1></div><div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 lg:p-10"><p class="text-gray-500 text-sm leading-relaxed mb-6">Thank you for considering purchasing our digital products, particularly our source code. We appreciate your interest and trust in our offerings. However, before proceeding with your purchase, we would like to outline our No Refund Policy to ensure transparency and clarity regarding your transactions with us.</p><div class="space-y-8"><div><h2 class="text-lg font-semibold text-gray-900 mb-2">1. Understanding Digital Products</h2><p class="text-sm text-gray-600 leading-relaxed">Our products, specifically our source code, are digital in nature. Once purchased and downloaded, they cannot be physically returned. Unlike tangible goods, digital products cannot be "returned" in the traditional sense. Therefore, it is essential to carefully consider your purchase decision before proceeding.</p></div><div><h2 class="text-lg font-semibold text-gray-900 mb-2">2. No Refund Policy</h2><p class="text-sm text-gray-600 leading-relaxed">Due to the intangible and irreversible nature of digital products, we operate under a strict No Refund Policy. Once a purchase is made and the product is downloaded or accessed, we are unable to offer refunds, exchanges, or returns.</p></div><div><h2 class="text-lg font-semibold text-gray-900 mb-2">3. Live Demo Availability</h2><p class="text-sm text-gray-600 leading-relaxed">To assist our customers in making informed purchasing decisions, we provide access to live demos of our products whenever possible. We encourage all potential buyers to thoroughly explore the live demos to ensure that the features and functionalities meet their requirements and expectations.</p></div><div><h2 class="text-lg font-semibold text-gray-900 mb-2">4. Commitment to Quality</h2><p class="text-sm text-gray-600 leading-relaxed">We are committed to delivering high-quality digital products that meet industry standards and customer expectations. However, in the unlikely event that you encounter any issues or discrepancies with our products, please do not hesitate to reach out to our customer support team for assistance. We are here to address any concerns and provide necessary support to ensure your satisfaction.</p></div><div><h2 class="text-lg font-semibold text-gray-900 mb-2">5. Your Responsibility</h2><p class="text-sm text-gray-600 leading-relaxed">As a customer, it is your responsibility to carefully review product descriptions, features, and demos before making a purchase. By proceeding with a purchase, you acknowledge that you have reviewed the product information and understand the terms of our No Refund Policy.</p></div><div><h2 class="text-lg font-semibold text-gray-900 mb-2">6. Contact Us</h2><p class="text-sm text-gray-600 leading-relaxed">If you have any questions, concerns, or require further clarification regarding our No Refund Policy or any other aspect of our products and services, please feel free to contact us. Our customer support team is readily available to assist you and address any inquiries you may have.</p></div></div><div class="border-t border-gray-100 mt-8 pt-6 text-center"><p class="text-xs text-gray-400">Thank you for your understanding and cooperation. We look forward to serving you.</p></div></div></div></div><footer class="bg-white border-t border-gray-200 py-10"><div class="max-w-7xl mx-auto px-4"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent.</p><p class="text-xs text-gray-500">Built with <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer></body></html>
privacy-policy.html
+18
View File
File diff suppressed because one or more lines are too long
products/blazor-cms.html
+544
View File
@@ -0,0 +1,544 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor CMS — Clinic Management System .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Blazor CMS: Complete Clinic Management System source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
<meta name="keywords" content="Blazor CMS, Clinic Management System, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-cms.html" />
<meta property="og:title" content="Blazor CMS — Clinic Management System .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-cms.html" />
<meta property="og:image" content="https://www.indotalent.com/img/cms-clinic-management-system-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor CMS — .NET 10 Clinic Management System Source Code" />
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/cms-clinic-management-system-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<!-- Structured Data: SoftwareApplication + Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor CMS",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Clinic Management System system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
"url": "https://www.indotalent.com/products/blazor-cms.html",
"author": {
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com"
},
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "150"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor CMS", "item": "https://www.indotalent.com/products/blazor-cms.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does CMS include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor CMS includes patient management, patient group categorization, medical records, appointment booking and scheduling, sales orders and billing, purchase and inventory management, dashboard with clinical KPIs, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
},
{
"@type": "Question",
"name": "Does Blazor CMS include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor CMS exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all patient, medical record, appointment, sales, and purchase operations." }
},
{
"@type": "Question",
"name": "Can I customize Blazor CMS for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom medical workflows, integrate lab systems, and deploy for clinics. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "What database does Blazor CMS use?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor CMS includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 &middot; Blazor Server &middot; VSA &middot; MudBlazor</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">Clinic Management System — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready clinic management application to manage patients, medical records, appointments, and billing. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/03b79781-4174-4390-a852-f5b03b8e60bf?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-cms.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/cms-clinic-management-system-01.png" alt="Blazor CMS Dashboard — Clinic Management System .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<!-- TABLE OF CONTENTS -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
<span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a>
<span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
<span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
<span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a>
<span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a>
<span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
<span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
<span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<!-- BUSINESS PROBLEM -->
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Clinics and medical practices struggle with fragmented patient records, manual appointment scheduling, and disconnected billing — leading to errors, delays, and poor patient care.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Scattered Patient Records</h3>
<p class="text-sm text-gray-500">Patient information is scattered across paper files, spreadsheets, and disconnected systems. <strong>Blazor CMS centralizes all patient data</strong> — demographics, medical history, prescriptions, and visit records — in one searchable system with complete audit trail.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Appointment & Scheduling</h3>
<p class="text-sm text-gray-500">Paper-based appointment booking causes double bookings, no-shows, and administrative chaos. <strong>Blazor CMS includes a booking module</strong> with resource scheduling, availability management, and appointment tracking to keep your clinic running smoothly.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Medical Records & Billing</h3>
<p class="text-sm text-gray-500">Medical records, prescriptions, and billing are often managed in separate systems causing data mismatch. <strong>Blazor CMS integrates medical records</strong> with sales orders, invoices, and payments — one system for clinical and financial operations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Clinical Analytics</h3>
<p class="text-sm text-gray-500">Without dashboards, clinic owners cannot track patient volume, revenue, commission, or inventory usage. <strong>Blazor CMS includes KPI dashboards</strong> with charts and reports showing key clinical and financial metrics.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor CMS</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Patient Group, Patient Category, Patient, Patient Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Organization</h4><p class="text-xs text-gray-500">Employee, Employee Group, Employee Category</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Medical</h4><p class="text-xs text-gray-500">Medical Record, Medical Record Group, Medical Record Category</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Sales Order, Sales Group, Invoice, Payment, Sales Report, Commission Report, Invoice Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Purchase Order, Bill, Payment, Purchase Report, Bill Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, To-Do List</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-green-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<!-- TECH STACK -->
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CMS is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ARCHITECTURE -->
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CMS uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Patients/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorCMS/
├── Features/ # Vertical Slices (one folder per feature)
│ ├── Patients/
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
│ │ ├── GetContactById/
│ │ ├── GetContactList/
│ │ ├── UpdateContact/
│ │ └── DeleteContact/
│ ├── Doctors/
│ ├── Appointments/
│ ├── Prescriptions/
│ ├── Billing/
│ └── Dashboard/
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
├── Migrations/ # EF Core migrations
├── SeedData/ # Initial seed data (demo users, sample data)
├── Components/ # Shared Blazor components
├── wwwroot/ # Static assets
└── Program.cs # Single entry point with full configuration</code></pre>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor CMS ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- REST API -->
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CMS exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- DATABASE & DEPLOYMENT -->
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SCREENSHOTS -->
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
<p class="text-gray-500 mt-2">Explore the Blazor CMS interface — dashboards, data management, workflow management, and more.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/cms-clinic-management-system-01.png" alt="Blazor CMS Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/cms-clinic-management-system-02.png" alt="Blazor CMS Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/cms-clinic-management-system-03.png" alt="Blazor CMS Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/cms-clinic-management-system-04.png" alt="Blazor CMS Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/cms-clinic-management-system-05.png" alt="Blazor CMS Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/cms-clinic-management-system-06.png" alt="Blazor CMS Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-cms.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-cms.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<!-- BUY CTA -->
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor CMS Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/03b79781-4174-4390-a852-f5b03b8e60bf?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor CMS?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor CMS application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor CMS use?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor CMS uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
products/blazor-crm-multitenant.html
+546
View File
@@ -0,0 +1,546 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor CRM Multi-Tenant — SaaS CRM with Multi-Tenancy .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Blazor CRM Multi-Tenant: Complete SaaS CRM with Multi-Tenancy source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Tenant isolation, contact management, sales pipeline, lead tracking. $21 instant download." />
<meta name="keywords" content="Blazor CRM Multi-Tenant, SaaS CRM, Multi-Tenant CRM, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core SaaS" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-crm-multitenant.html" />
<meta property="og:title" content="Blazor CRM Multi-Tenant — SaaS CRM with Multi-Tenancy .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete SaaS CRM source code with multi-tenancy: .NET 10, Blazor Server, MudBlazor, VSA. Tenant isolation, contacts, pipeline, leads. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-crm-multitenant.html" />
<meta property="og:image" content="https://www.indotalent.com/img/crm-multi-tenant-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor CRM Multi-Tenant — .NET 10 SaaS CRM with Multi-Tenancy Source Code" />
<meta name="twitter:description" content="Complete SaaS CRM source code with multi-tenancy. Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/crm-multi-tenant-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<!-- Structured Data: SoftwareApplication + Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor CRM Multi-Tenant",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Multi-tenant SaaS CRM application built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with tenant isolation, contact management, sales pipeline, lead tracking, and reporting dashboards.",
"url": "https://www.indotalent.com/products/blazor-crm-multitenant.html",
"author": {
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com"
},
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "150"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor CRM Multi-Tenant", "item": "https://www.indotalent.com/products/blazor-crm-multitenant.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does Blazor CRM Multi-Tenant include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor CRM Multi-Tenant includes tenant management with complete data isolation, contact management, company/organization management, sales pipeline with deal stages, lead tracking and conversion, activity logging, communication history, dashboard with KPIs and charts, reporting, and full audit trail. Multiple tenants share one database with guaranteed data separation. All features are built with .NET 10, Blazor Server, MudBlazor, and VSA." }
},
{
"@type": "Question",
"name": "How does multi-tenancy work in this CRM?",
"acceptedAnswer": { "@type": "Answer", "text": "The multi-tenant architecture uses a single database with tenant isolation via TenantId on every entity. Each tenant sees only their own contacts, companies, deals, and data. Global query filters in EF Core automatically apply tenant filtering. Administrators can manage tenants, while tenant users have complete isolation — no data leakage between tenants. Perfect for SaaS businesses serving multiple organizations." }
},
{
"@type": "Question",
"name": "Does Blazor CRM Multi-Tenant include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor CRM Multi-Tenant exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes for all CRUD operations on tenants, contacts, companies, deals, and activities." }
},
{
"@type": "Question",
"name": "Can I customize the multi-tenant CRM for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom fields, modify workflows, integrate with third-party services, and deploy as a SaaS platform for multiple clients. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor CRM Multi-Tenant includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Each tenant has its own isolated user management. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-purple-700 text-xs font-medium tracking-wide">SaaS &middot; Multi-Tenant &middot; .NET 10 &middot; Blazor Server &middot; VSA</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM Multi-Tenant</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">SaaS CRM with Multi-Tenancy — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready multi-tenant SaaS CRM application to serve multiple organizations from a single deployment. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture. Complete tenant isolation, shared database with global query filters.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/99e9b1bb-7c1c-4ea0-83e2-e459e88ee756?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-saas-crm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/crm-multi-tenant-01.png" alt="Blazor CRM Multi-Tenant Dashboard — SaaS CRM with Multi-Tenancy .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<!-- TABLE OF CONTENTS -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
<span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a>
<span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
<span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
<span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a>
<span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a>
<span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
<span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
<span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<!-- BUSINESS PROBLEM -->
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span> by Blazor CRM Multi-Tenant</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">SaaS businesses need to serve multiple organizations from one deployment — but building secure tenant isolation, managing separate customer data, and scaling multi-tenant infrastructure is complex and expensive.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Serving Multiple Organizations from One Instance</h3>
<p class="text-sm text-gray-500">Building separate CRM instances for each client is prohibitively expensive in infrastructure and maintenance. <strong>Blazor CRM Multi-Tenant allows multiple organizations to share one database and one deployment</strong> with complete data isolation via TenantId global query filters. Add new tenants in seconds without provisioning new servers.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Data Leakage Between Tenants</h3>
<p class="text-sm text-gray-500">Without proper tenant isolation, customer data can leak between organizations — a catastrophic security and compliance failure. <strong>EF Core global query filters automatically scope every query to the current tenant.</strong> Tenant A's contacts, deals, and activities are completely invisible to Tenant B. Zero data leakage by design.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Scattered Customer Data Across Tenants</h3>
<p class="text-sm text-gray-500">Each tenant needs their own contacts, companies, and deals — but managing this separation manually is error-prone. <strong>Blazor CRM Multi-Tenant centralizes all tenant data</strong> with automatic scoping. Every API call, every database query, every UI interaction is tenant-aware.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Tenant-Aware Sales Pipeline</h3>
<p class="text-sm text-gray-500">Each tenant needs their own sales pipeline and reporting — but building per-tenant analytics is complex. <strong>Blazor CRM Multi-Tenant provides fully tenant-aware dashboards</strong> with KPI cards, pipeline charts, and win/loss rates scoped to each organization.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor CRM Multi-Tenant</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features with multi-tenant isolation — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Pipeline</h4><p class="text-xs text-gray-500">Campaign, Budget, Expense, Lead, Lead Contacts, Lead Activities, Sales Team, Sales Representative</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Quotation, Sales Order, Delivery Order, Sales Return, Invoice, Credit Note, Payment, Sales Report, Delivery Report, Return Report, Invoice Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Requisition, Purchase Order, Goods Receive, Purchase Return, Bill, Debit Note, Payment, Purchase Report, Receive Report, Return Report, Bill Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse, Transfer Out, Transfer In, Positive/Negative Adjustment, Scrapping, Stock Count, Transaction Report, Stock Report, Movement Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<!-- TECH STACK -->
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM Multi-Tenant is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Multi-Tenancy</td><td class="px-4 py-3 text-gray-600">EF Core Global Query Filters with TenantId isolation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ARCHITECTURE -->
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM Multi-Tenant uses Vertical Slice Architecture (VSA) with CQRS via MediatR and EF Core global query filters for complete tenant isolation.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Tenant, Get Contact, Update Deal, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler, FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Every handler automatically applies tenant filtering.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Tenants/CreateTenant/</code> contains endpoint, handler, validator, DTO — everything for that single operation with tenant awareness built in.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Multi-Tenant Isolation</h3>
<p class="text-sm text-gray-500">Tenant isolation is implemented at the <strong>EF Core level using global query filters</strong>. Every entity has a <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">TenantId</code> property, and EF Core automatically applies <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.Where(e => e.TenantId == currentTenantId)</code> to all queries. <strong>Zero data leakage by design</strong> — no developer can accidentally query across tenants.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Tenant resolution:</strong> Determined from the authenticated user's claims, applied to DbContext at request scope.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire multi-tenant application — Blazor UI, REST API, tenant management, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for SaaS startups that value velocity.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorCRMMultiTenant/
├── Features/ # Vertical Slices (one folder per feature)
│ ├── Tenants/
│ │ ├── CreateTenant/ # Endpoint + Handler + Validator + DTO
│ │ ├── GetTenantList/
│ │ └── UpdateTenant/
│ ├── Contacts/
│ ├── Companies/
│ ├── Deals/
│ ├── Leads/
│ ├── Activities/
│ └── Dashboard/
├── Infrastructure/ # Cross-cutting: Auth, Audit, Tenant Resolution, EF Core
├── Migrations/ # EF Core migrations
├── SeedData/ # Initial seed data (demo tenants, users, sample data)
├── Components/ # Shared Blazor components
├── wwwroot/ # Static assets
└── Program.cs # Single entry point with tenant-aware configuration</code></pre>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture — multi-tenant isolation, Identity, JWT, RBAC, and audit trail.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor CRM Multi-Tenant ships with <strong class="text-gray-800">tenant-aware authentication and authorization</strong>. ASP.NET Core Identity manages users per tenant with secure password hashing. JWT authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI. <strong>Both schemes run simultaneously and are tenant-scoped.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) is <strong>fully tenant-scoped</strong>: each tenant has their own Admin, Manager, and User roles. Policy-based authorization provides fine-grained control. <strong>EF Core global query filters</strong> guarantee that Tenant A's data never leaks to Tenant B — enforced at the database level.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code, database credentials, and tenant resolution logic never leave the server</strong>. All data access happens server-side via SignalR.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Tenant Isolation</strong> — EF Core global query filters prevent data leakage between tenants</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset per tenant</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API, both tenant-scoped</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Tenant-scoped Admin, Manager, User roles</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with tenant, user ID, and timestamp</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code, DB credentials, and tenant logic never leave the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- REST API -->
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM Multi-Tenant exposes a complete tenant-aware REST Web API — ready for mobile apps, third-party integrations, and external systems.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints (Tenant-Aware)</h3>
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and automatically scoped to the authenticated user's tenant.</p>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/tenants</span><span class="text-gray-400">— List tenants (admin only)</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts (tenant-scoped)</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID (tenant-scoped)</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact (auto-assigned to tenant)</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact (tenant-scoped)</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact (tenant-scoped)</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same tenant-aware pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token with tenant claim</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Automatic Tenant Scoping</strong> — API returns only data belonging to authenticated user's tenant</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- DATABASE & DEPLOYMENT -->
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data with demo tenants, and flexible deployment options — ready to run in under 60 seconds.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo tenants with full user sets (admin, manager, user), sample contacts, companies, deals</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries with tenant filtering</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy, serve all tenants</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → serving multiple tenants in under 60 seconds</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SCREENSHOTS -->
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
<p class="text-gray-500 mt-2">Explore the Blazor CRM Multi-Tenant interface — tenant management, dashboards, contact management, sales pipeline, and more.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/crm-multi-tenant-01.png" alt="Blazor CRM Multi-Tenant Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-multi-tenant-02.png" alt="Blazor CRM Multi-Tenant Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-multi-tenant-03.png" alt="Blazor CRM Multi-Tenant Tenant Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-multi-tenant-04.png" alt="Blazor CRM Multi-Tenant Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-multi-tenant-05.png" alt="Blazor CRM Multi-Tenant Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-multi-tenant-06.png" alt="Blazor CRM Multi-Tenant Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-multi-tenant-07.png" alt="Blazor CRM Multi-Tenant Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<p class="text-sm text-gray-500 mb-4">Test every feature — including multi-tenant isolation — before you buy. No registration required.</p>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-saas-crm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-saas-crm.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<!-- BUY CTA -->
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor CRM Multi-Tenant Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code with full multi-tenant SaaS architecture. Single .NET 10 project. Clone, F5, serve multiple tenants.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/99e9b1bb-7c1c-4ea0-83e2-e459e88ee756?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor CRM Multi-Tenant?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor CRM Multi-Tenant application. A single .NET 10 project with all features, multi-tenant architecture with EF Core global query filters, Vertical Slice Architecture, EF Core migrations, seed data with demo tenants, and full configuration. Clone, set connection string, press F5, and serve multiple tenants immediately.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">How does multi-tenancy work in this application?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Multi-tenancy uses <strong>EF Core global query filters</strong> with a <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">TenantId</code> on every entity. When a user authenticates, their tenant is resolved from claims. EF Core automatically applies <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">.Where(e => e.TenantId == currentTenantId)</code> to all queries. <strong>Zero data leakage between tenants.</strong> Each tenant has isolated users, contacts, deals, and dashboards — all in one database.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for my SaaS business?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! You receive the complete source code. You can rebrand, add custom features, modify the multi-tenant architecture, and deploy as your own SaaS product. Each license covers <strong>one end product per client project</strong>. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real multi-tenant SaaS patterns, EF Core global query filters, authentication flows, VSA feature organization, and REST API design — all in a single project.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo with multi-tenant testing</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
products/blazor-crm.html
+543
View File
@@ -0,0 +1,543 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor CRM — Customer Relationship Management .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Blazor CRM: Complete Customer Relationship Management source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, sales pipeline, lead tracking, reporting. $21 instant download." />
<meta name="keywords" content="Blazor CRM, Customer Relationship Management, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-crm.html" />
<meta property="og:title" content="Blazor CRM — Customer Relationship Management .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-crm.html" />
<meta property="og:image" content="https://www.indotalent.com/img/crm-customer-relationship-management-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor CRM — .NET 10 Customer Relationship Management Source Code" />
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/crm-customer-relationship-management-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<!-- Structured Data: SoftwareApplication + Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor CRM",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Customer Relationship Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with contact management, sales pipeline, lead tracking, and reporting dashboards.",
"url": "https://www.indotalent.com/products/blazor-crm.html",
"author": {
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com"
},
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "150"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor CRM", "item": "https://www.indotalent.com/products/blazor-crm.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does Blazor CRM include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor CRM includes contact management, company/organization management, sales pipeline with deal stages, lead tracking and conversion, activity logging, communication history, dashboard with KPIs and charts, reporting, and full audit trail. All features are built with .NET 10, Blazor Server, MudBlazor, and VSA." }
},
{
"@type": "Question",
"name": "Does Blazor CRM include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor CRM exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes for all CRUD operations on contacts, companies, deals, and activities." }
},
{
"@type": "Question",
"name": "Can I customize the CRM for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom fields, modify workflows, integrate with third-party services, and deploy for your clients. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "What database does Blazor CRM use?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing the connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor CRM includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 &middot; Blazor Server &middot; VSA &middot; MudBlazor</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">Customer Relationship Management — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready CRM application to manage contacts, companies, sales pipeline, leads, and customer relationships. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/f4b80702-1ba0-422c-b78e-2903c5558441?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-crm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/crm-customer-relationship-management-01.png" alt="Blazor CRM Dashboard — Customer Relationship Management .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<!-- TABLE OF CONTENTS -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
<span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a>
<span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
<span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
<span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a>
<span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a>
<span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
<span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
<span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<!-- BUSINESS PROBLEM -->
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span> by Blazor CRM</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Every business needs to manage customer relationships — but fragmented tools, manual tracking, and disconnected data cost time and revenue.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Scattered Customer Data</h3>
<p class="text-sm text-gray-500">Sales teams store contacts in spreadsheets, email inboxes, and personal notes. No central source of truth means missed follow-ups, duplicate entries, and lost opportunities. <strong>Blazor CRM centralizes all contact, company, and deal data</strong> in one searchable, organized system with complete history tracking.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Sales Pipeline Visibility</h3>
<p class="text-sm text-gray-500">Without a structured pipeline, managers cannot forecast revenue or identify bottlenecks. Deals get stuck without anyone noticing. <strong>Blazor CRM provides a visual sales pipeline with deal stages</strong> (Prospecting, Qualification, Proposal, Negotiation, Closed Won/Lost) so you always know where every deal stands.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Missed Follow-Ups & No Activity Tracking</h3>
<p class="text-sm text-gray-500">Critical follow-ups slip through the cracks when there is no logging system. <strong>Blazor CRM tracks every activity</strong> — calls, emails, meetings, notes — and links them to contacts and deals. Complete activity timeline for every customer relationship.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Actionable Insights</h3>
<p class="text-sm text-gray-500">Without dashboards and reports, management flies blind. <strong>Blazor CRM includes KPI dashboards</strong> with charts and summary cards showing pipeline value, win rate, conversion metrics, and sales performance — all powered by EF Core aggregation queries.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor CRM</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Pipeline</h4><p class="text-xs text-gray-500">Campaign, Budget, Expense, Lead, Lead Contacts, Lead Activities, Sales Team, Sales Representative</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Quotation, Sales Order, Delivery Order, Sales Return, Invoice, Credit Note, Payment, Sales Report, Delivery Report, Return Report, Invoice Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Requisition, Purchase Order, Goods Receive, Purchase Return, Bill, Debit Note, Payment, Purchase Report, Receive Report, Return Report, Bill Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse, Transfer Out, Transfer In, Positive/Negative Adjustment, Scrapping, Stock Count, Transaction Report, Stock Report, Movement Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<!-- TECH STACK -->
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ARCHITECTURE -->
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Contacts/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorCRM/
├── Features/ # Vertical Slices (one folder per feature)
│ ├── Contacts/
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
│ │ ├── GetContactById/
│ │ ├── GetContactList/
│ │ ├── UpdateContact/
│ │ └── DeleteContact/
│ ├── Companies/
│ ├── Deals/
│ ├── Leads/
│ ├── Activities/
│ └── Dashboard/
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
├── Migrations/ # EF Core migrations
├── SeedData/ # Initial seed data (demo users, sample data)
├── Components/ # Shared Blazor components
├── wwwroot/ # Static assets
└── Program.cs # Single entry point with full configuration</code></pre>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor CRM ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- REST API -->
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- DATABASE & DEPLOYMENT -->
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample contacts, companies, deals</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SCREENSHOTS -->
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
<p class="text-gray-500 mt-2">Explore the Blazor CRM interface — dashboards, contact management, sales pipeline, and more.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/crm-customer-relationship-management-01.png" alt="Blazor CRM Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-customer-relationship-management-02.png" alt="Blazor CRM Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-customer-relationship-management-03.png" alt="Blazor CRM Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-customer-relationship-management-04.png" alt="Blazor CRM Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-customer-relationship-management-05.png" alt="Blazor CRM Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/crm-customer-relationship-management-06.png" alt="Blazor CRM Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-crm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-crm.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<!-- BUY CTA -->
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor CRM Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/f4b80702-1ba0-422c-b78e-2903c5558441?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor CRM?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor CRM application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor CRM use?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor CRM uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
products/blazor-hrm-multitenant.html
+448
View File
@@ -0,0 +1,448 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor HRM Multi-Tenant — SaaS HRM with Multi-Tenancy .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Complete SaaS HRM with Multi-Tenancy source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Tenant isolation, employee management, leave tracking, payroll reports. $21 instant download." />
<meta name="keywords" content="Blazor HRM Multi-Tenant, SaaS HRM, Multi-Tenant HRM, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, HRM source code, ASP.NET Core SaaS" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-hrm-multitenant.html" />
<meta property="og:title" content="Blazor HRM Multi-Tenant — SaaS HRM with Multi-Tenancy .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete SaaS HRM source code with multi-tenancy. .NET 10, Blazor Server, MudBlazor, VSA. Employee, leave, payroll. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-hrm-multitenant.html" />
<meta property="og:image" content="https://www.indotalent.com/img/hrm-multi-tenant-saas-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor HRM Multi-Tenant — .NET 10 SaaS HRM with Multi-Tenancy Source Code" />
<meta name="twitter:description" content="Complete SaaS HRM source code with multi-tenancy. Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/hrm-multi-tenant-saas-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor HRM Multi-Tenant",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Multi-tenant SaaS HRM application built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with tenant isolation, employee management, leave tracking, and payroll reporting.",
"url": "https://www.indotalent.com/products/blazor-hrm-multitenant.html"il": "2027-12-31" },
"aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "reviewCount": "150" }
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor HRM Multi-Tenant", "item": "https://www.indotalent.com/products/blazor-hrm-multitenant.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does Blazor HRM Multi-Tenant include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor HRM Multi-Tenant includes multi-tenant employee management, department and designation management, leave tracking with approval workflows, attendance tracking, payroll reporting, dashboard with workforce KPIs, tenant isolation via EF Core global query filters, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
},
{
"@type": "Question",
"name": "Does Blazor HRM Multi-Tenant include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor HRM Multi-Tenant exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes for all tenant-scoped employee, leave, attendance, and payroll operations." }
},
{
"@type": "Question",
"name": "Can I customize Blazor HRM Multi-Tenant for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. Rebrand, add custom fields, modify leave policies, integrate payroll, and deploy as your own SaaS HRM platform. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "What database does Blazor HRM Multi-Tenant use?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor HRM Multi-Tenant includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-purple-700 text-xs font-medium tracking-wide">SaaS &middot; Multi-Tenant &middot; .NET 10 &middot; Blazor Server &middot; VSA</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">HRM Multi-Tenant</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">SaaS HRM with Multi-Tenancy — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready multi-tenant SaaS HRM application to manage workforce across multiple organizations from a single deployment. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture. Complete tenant isolation with EF Core global query filters.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/5a35e0ec-b88f-4176-a6ac-3e02201a5288?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-saas-hrm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/hrm-multi-tenant-saas-01.png" alt="Blazor HRM Multi-Tenant Dashboard — SaaS HRM .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a><span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a><span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a><span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a><span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a><span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a><span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a><span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a><span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span> by Blazor HRM Multi-Tenant</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">HRM Multitenant: The Next-Gen People Engine: Built for Scale, Engineered for Excellence.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Managing Multiple Client Workforces</h3>
<p class="text-sm text-gray-500">Running separate HRM instances for each client is costly. <strong>Blazor HRM Multi-Tenant allows multiple organizations to share one deployment</strong> with complete workforce data isolation via TenantId global query filters. Add new client organizations in seconds.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Confidential Employee Data Leakage</h3>
<p class="text-sm text-gray-500">Employee data is highly confidential. Without proper isolation, one client's workforce data could leak to another. <strong>EF Core global query filters automatically scope every query.</strong> Tenant A's employees, salaries, and leave records are invisible to Tenant B.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Leave & Attendance Per Tenant</h3>
<p class="text-sm text-gray-500">Each tenant needs their own leave policies and attendance tracking. <strong>Blazor HRM Multi-Tenant provides tenant-scoped leave management</strong> with approval workflows, attendance logging, and calendar views — all isolated per organization.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Tenant-Aware Workforce Analytics</h3>
<p class="text-sm text-gray-500">HR service providers need per-tenant dashboards and reports. <strong>Blazor HRM Multi-Tenant includes tenant-aware workforce dashboards</strong> with headcount, department distribution, leave balances, and attendance metrics — all scoped per organization.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor HRM Multi-Tenant</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features with multi-tenant isolation — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Leave Management</h4><p class="text-xs text-gray-500">Leave Request, Leave Categories, Leave Balance</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Performance</h4><p class="text-xs text-gray-500">Evaluation, Appraisal, Promotion, Transfer</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Organization</h4><p class="text-xs text-gray-500">Branches, Departments, Designations, Employees</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Payroll Process</h4><p class="text-xs text-gray-500">Salary Grades, Income, Deduction</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm"><div class="overflow-x-auto"><table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Multi-Tenancy</td><td class="px-4 py-3 text-gray-600">EF Core Global Query Filters with TenantId isolation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table></div></div>
</div>
</section>
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor HRM Multi-Tenant uses Vertical Slice Architecture (VSA) with CQRS via MediatR and EF Core global query filters for complete tenant isolation across all workforce features.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Employee, Approve Leave, etc.) lives in its own folder with endpoint, MediatR handler, validator, and EF Core queries — all in one place. Every handler automatically applies tenant filtering.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Multi-Tenant Isolation</h3>
<p class="text-sm text-gray-500">Tenant isolation via <strong>EF Core global query filters</strong>. Every entity has TenantId; EF Core auto-applies <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.Where(e => e.TenantId == currentTenantId)</code> to all queries. Zero data leakage by design.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire multi-tenant HRM application lives in <strong>one .NET 10 project</strong>. No distributed complexity. Single F5 to run. Deploy as one unit. Perfect for SaaS HR service providers.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorHRMMultiTenant/
├── Features/
│ ├── Tenants/
│ ├── Employees/
│ ├── Departments/
│ ├── Designations/
│ ├── LeaveManagement/
│ ├── Attendance/
│ ├── Payroll/
│ └── Dashboard/
├── Infrastructure/ # Auth, Audit, Tenant Resolution, EF Core
├── Migrations/
├── SeedData/ # Demo tenants, users, employee sample data
├── Components/
└── Program.cs</code></pre>
</div>
</div>
</section>
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor HRM Multi-Tenant ships with <strong class="text-gray-800">tenant-aware security</strong>. ASP.NET Core Identity manages users per tenant. JWT protects REST API, cookies protect Blazor UI. <strong>Both are tenant-scoped.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control is <strong>fully tenant-scoped</strong> — each tenant has their own Admin, Manager, and User roles. <strong>EF Core global query filters</strong> guarantee employee data never leaks between tenants.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>all employee data, source code, and database credentials never leave the server.</strong></p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Tenant Isolation</strong> — EF Core global query filters prevent data leakage</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — Per-tenant user management</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Tenant-scoped authentication</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">RBAC</strong> — Tenant-scoped Admin, Manager, User roles</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Fine-grained HR access control</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every HR action logged with tenant + user ID</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Employee data never leaves the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints (Tenant-Aware)</h3>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/employees</span><span class="text-gray-400">— List employees (tenant-scoped)</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/employees/{id}</span><span class="text-gray-400">— Get employee (tenant-scoped)</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/employees</span><span class="text-gray-400">— Create employee (auto-assigned to tenant)</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/employees/{id}</span><span class="text-gray-400">— Update employee</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/employees/{id}</span><span class="text-gray-400">— Delete employee</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same pattern for: Departments, Designations, Leave Requests, Attendance, Payroll.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI</strong> — Interactive docs at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — Bearer token with tenant claim</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Auto Tenant Scoping</strong> — Only tenant-owned data returned</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Build mobile HR apps with this API</span></li>
</ul>
</div>
</div>
</div>
</section>
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded (provider ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo tenants, employees, departments, leave types</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Optimized EF Core queries with tenant filtering</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy from Visual Studio or CI/CD</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS</strong> — Standard ASP.NET Core publish</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize for any platform</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup:</strong> Clone → connection string → F5 → multi-tenant running in 60s</span></li>
</ul>
</div>
</div>
</div>
</section>
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/hrm-multi-tenant-saas-01.png" alt="Blazor HRM Multi-Tenant Dashboard" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-multi-tenant-saas-02.png" alt="Blazor HRM Multi-Tenant Employee Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-multi-tenant-saas-03.png" alt="Blazor HRM Multi-Tenant Tenant Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-multi-tenant-saas-04.png" alt="Blazor HRM Multi-Tenant Leave Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-multi-tenant-saas-05.png" alt="Blazor HRM Multi-Tenant Attendance Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-multi-tenant-saas-06.png" alt="Blazor HRM Multi-Tenant Payroll Reports" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-multi-tenant-saas-07.png" alt="Blazor HRM Multi-Tenant Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-saas-hrm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-saas-hrm.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor HRM Multi-Tenant Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, serve multiple organizations.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/5a35e0ec-b88f-4176-a6ac-3e02201a5288?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">What do I get when I purchase?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">Complete, unrestricted C# source code of the entire multi-tenant HRM application. Single .NET 10 project with VSA, EF Core global query filters, migrations, seed data with demo tenants. Clone, F5, serve multiple organizations immediately.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">How does multi-tenancy work?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">EF Core global query filters with TenantId on every entity. Each tenant sees only their employees, departments, and leave data. Zero data leakage — enforced at the database level.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">Can I customize for my HR SaaS business?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! Rebrand, add custom HR features, modify leave policies, integrate payroll systems. Deploy as your own SaaS platform. Each license covers one end product per client project. <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License details</a>.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">Does it support SQL Server and PostgreSQL?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server fully tested. PostgreSQL scaffolded in codebase (provider + connection string ready, not fully tested).</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">Can beginners learn from this?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Study real multi-tenant SaaS patterns, EF Core global query filters, VSA feature organization, and HRM domain design.</div></div>
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">No refund due to digital nature. Test the fully functional live demo before buying. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy</a>.</div></div>
</div>
</div>
</section>
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
products/blazor-hrm.html
+541
View File
@@ -0,0 +1,541 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor HRM — Human Resource Management .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Blazor HRM: Complete Human Resource Management source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
<meta name="keywords" content="Blazor HRM, Human Resource Management, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-hrm.html" />
<meta property="og:title" content="Blazor HRM — Human Resource Management .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-hrm.html" />
<meta property="og:image" content="https://www.indotalent.com/img/hrm-human-resource-management-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor HRM — .NET 10 Human Resource Management Source Code" />
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/hrm-human-resource-management-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<!-- Structured Data: SoftwareApplication + Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor HRM",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Human Resource Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
"url": "https://www.indotalent.com/products/blazor-hrm.html",
"author": {
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com"
},
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "150"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor HRM", "item": "https://www.indotalent.com/products/blazor-hrm.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does HRM include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor HRM includes employee management, department and designation management, leave tracking with approval workflows, attendance tracking, payroll reporting, dashboard with workforce KPIs and charts, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
},
{
"@type": "Question",
"name": "Does Blazor HRM include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor HRM exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes for all employee, leave, attendance, and payroll operations." }
},
{
"@type": "Question",
"name": "Can I customize Blazor HRM for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom fields, modify leave policies, integrate payroll systems, and deploy for clients. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "What database does Blazor HRM use?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor HRM includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 &middot; Blazor Server &middot; VSA &middot; MudBlazor</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">Human Resource Management — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready HRM application to manage employees, departments, leave, attendance, and payroll. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/db765b6a-f864-4275-9017-23e3321761e8?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-hrm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/hrm-human-resource-management-01.png" alt="Blazor HRM Dashboard — Human Resource Management .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<!-- TABLE OF CONTENTS -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
<span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a>
<span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
<span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
<span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a>
<span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a>
<span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
<span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
<span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<!-- BUSINESS PROBLEM -->
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Managing workforce data with spreadsheets and disconnected tools leads to errors, compliance issues, and wasted administrative time.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Scattered Employee Records</h3>
<p class="text-sm text-gray-500">HR teams manage employees across spreadsheets, paper files, and email — leading to outdated records, duplicate entries, and compliance risks. <strong>Blazor HRM centralizes all employee data</strong> in one searchable, organized system with complete employment history and document storage.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Leave & Attendance Tracking</h3>
<p class="text-sm text-gray-500">Paper-based leave requests and manual attendance logs cause delays, lost forms, and payroll errors. <strong>Blazor HRM provides digital leave management</strong> with approval workflows, balance tracking, calendar views, and automated attendance logging — eliminating paperwork.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Performance Management System</h3>
<p class="text-sm text-gray-500">Without structured evaluations, appraisals, and promotion workflows, employee growth stalls. <strong>Blazor HRM includes a complete performance module</strong> with evaluation forms, appraisal tracking, promotion requests, and transfer management.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Workforce Analytics</h3>
<p class="text-sm text-gray-500">Without dashboards, management cannot track headcount, turnover, leave trends, or department distribution. <strong>Blazor HRM includes KPI dashboards</strong> with charts and summary cards — all powered by EF Core aggregation queries.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor HRM</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Leave Management</h4><p class="text-xs text-gray-500">Leave Request, Leave Categories, Leave Balance</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Performance</h4><p class="text-xs text-gray-500">Evaluation, Appraisal, Promotion, Transfer</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Organization</h4><p class="text-xs text-gray-500">Branches, Departments, Designations, Employees</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Payroll Process</h4><p class="text-xs text-gray-500">Salary Grades, Income, Deduction</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<!-- TECH STACK -->
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor HRM is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ARCHITECTURE -->
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor HRM uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Employees/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorHRM/
├── Features/ # Vertical Slices (one folder per feature)
│ ├── Employees/
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
│ │ ├── GetContactById/
│ │ ├── GetContactList/
│ │ ├── UpdateContact/
│ │ └── DeleteContact/
│ ├── Departments/
│ ├── LeaveManagement/
│ ├── Attendance/
│ ├── Payroll/
│ └── Dashboard/
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
├── Migrations/ # EF Core migrations
├── SeedData/ # Initial seed data (demo users, sample data)
├── Components/ # Shared Blazor components
├── wwwroot/ # Static assets
└── Program.cs # Single entry point with full configuration</code></pre>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor HRM ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- REST API -->
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor HRM exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- DATABASE & DEPLOYMENT -->
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SCREENSHOTS -->
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
<p class="text-gray-500 mt-2">Explore the Blazor HRM interface — dashboards, data management, workflow management, and more.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/hrm-human-resource-management-01.png" alt="Blazor HRM Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-human-resource-management-02.png" alt="Blazor HRM Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-human-resource-management-03.png" alt="Blazor HRM Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-human-resource-management-04.png" alt="Blazor HRM Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-human-resource-management-05.png" alt="Blazor HRM Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/hrm-human-resource-management-06.png" alt="Blazor HRM Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-hrm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-hrm.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<!-- BUY CTA -->
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor HRM Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/db765b6a-f864-4275-9017-23e3321761e8?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor HRM?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor HRM application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor HRM use?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor HRM uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
products/blazor-oms.html
+542
View File
@@ -0,0 +1,542 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor OMS — Order Management System .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Blazor OMS: Complete Order Management System source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
<meta name="keywords" content="Blazor OMS, Order Management System, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-oms.html" />
<meta property="og:title" content="Blazor OMS — Order Management System .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-oms.html" />
<meta property="og:image" content="https://www.indotalent.com/img/oms-order-management-system-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor OMS — .NET 10 Order Management System Source Code" />
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/oms-order-management-system-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<!-- Structured Data: SoftwareApplication + Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor OMS",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Order Management System system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
"url": "https://www.indotalent.com/products/blazor-oms.html",
"author": {
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com"
},
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "150"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor OMS", "item": "https://www.indotalent.com/products/blazor-oms.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does OMS include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor OMS includes customer and vendor management, sales order processing, purchase order management, inventory and warehouse tracking, booking and scheduling, dashboard with sales and purchase KPIs, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
},
{
"@type": "Question",
"name": "Does Blazor OMS include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor OMS exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all order, customer, vendor, inventory, and purchase operations." }
},
{
"@type": "Question",
"name": "Can I customize Blazor OMS for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom order workflows, integrate payment gateways, and deploy for clients. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "What database does Blazor OMS use?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor OMS includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 &middot; Blazor Server &middot; VSA &middot; MudBlazor</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">Order Management System — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready order management application to manage sales orders, purchase orders, inventory, and customers. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/733cc711-a649-4fef-9d20-a731cabc7e61?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-oms.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/oms-order-management-system-01.png" alt="Blazor OMS Dashboard — Order Management System .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<!-- TABLE OF CONTENTS -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
<span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a>
<span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
<span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
<span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a>
<span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a>
<span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
<span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
<span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<!-- BUSINESS PROBLEM -->
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Businesses struggle with fragmented order processing, disconnected sales and purchase cycles, and manual inventory tracking — leading to errors, delays, and lost revenue.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Sales & Purchase Cycles</h3>
<p class="text-sm text-gray-500">Sales orders and purchase orders are managed in separate systems, causing stockouts, over-ordering, and cash flow issues. <strong>Blazor OMS unifies the entire order-to-cash and procure-to-pay cycle</strong> in one integrated system.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Inventory Tracking</h3>
<p class="text-sm text-gray-500">Without real-time inventory visibility, businesses overstock or run out of critical products. <strong>Blazor OMS provides complete inventory management</strong> with product groups, unit measures, warehouse tracking, and stock reports.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Centralized Customer & Vendor Data</h3>
<p class="text-sm text-gray-500">Customer and vendor information is scattered across emails and spreadsheets. <strong>Blazor OMS centralizes all third-party data</strong> — customer groups, vendor categories, contacts — with full search and history.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Order Analytics</h3>
<p class="text-sm text-gray-500">Without dashboards, management cannot track sales performance, purchase efficiency, or inventory levels. <strong>Blazor OMS includes KPI dashboards</strong> with sales reports, purchase reports, and payment summaries.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor OMS</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Sales Order, Invoice, Payment, Sales Report, Invoice Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Purchase Order, Bill, Payment, Purchase Report, Bill Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<!-- TECH STACK -->
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor OMS is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ARCHITECTURE -->
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor OMS uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Orders/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorOMS/
├── Features/ # Vertical Slices (one folder per feature)
│ ├── Orders/
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
│ │ ├── GetContactById/
│ │ ├── GetContactList/
│ │ ├── UpdateContact/
│ │ └── DeleteContact/
│ ├── Customers/
│ ├── Products/
│ ├── Inventory/
│ ├── Shipments/
│ └── Dashboard/
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
├── Migrations/ # EF Core migrations
├── SeedData/ # Initial seed data (demo users, sample data)
├── Components/ # Shared Blazor components
├── wwwroot/ # Static assets
└── Program.cs # Single entry point with full configuration</code></pre>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor OMS ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- REST API -->
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor OMS exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- DATABASE & DEPLOYMENT -->
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SCREENSHOTS -->
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
<p class="text-gray-500 mt-2">Explore the Blazor OMS interface — dashboards, data management, workflow management, and more.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/oms-order-management-system-01.png" alt="Blazor OMS Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/oms-order-management-system-02.png" alt="Blazor OMS Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/oms-order-management-system-03.png" alt="Blazor OMS Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/oms-order-management-system-04.png" alt="Blazor OMS Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/oms-order-management-system-05.png" alt="Blazor OMS Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/oms-order-management-system-06.png" alt="Blazor OMS Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-oms.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-oms.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<!-- BUY CTA -->
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor OMS Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/733cc711-a649-4fef-9d20-a731cabc7e61?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor OMS?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor OMS application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor OMS use?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor OMS uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
products/blazor-scm.html
+542
View File
@@ -0,0 +1,542 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor SCM — Supply Chain Management .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Blazor SCM: Complete Supply Chain Management source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
<meta name="keywords" content="Blazor SCM, Supply Chain Management, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-scm.html" />
<meta property="og:title" content="Blazor SCM — Supply Chain Management .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-scm.html" />
<meta property="og:image" content="https://www.indotalent.com/img/scm-supply-chain-management-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor SCM — .NET 10 Supply Chain Management Source Code" />
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/scm-supply-chain-management-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<!-- Structured Data: SoftwareApplication + Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor SCM",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Supply Chain Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
"url": "https://www.indotalent.com/products/blazor-scm.html",
"author": {
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com"
},
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "150"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor SCM", "item": "https://www.indotalent.com/products/blazor-scm.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does SCM include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor SCM includes procurement management with requisition, purchase orders, goods receipt; sales management with quotations, delivery orders, returns; inventory tracking with transfers and stock counts; vendor and customer management; dashboard with supply chain KPIs; and full audit trail." }
},
{
"@type": "Question",
"name": "Does Blazor SCM include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor SCM exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all procurement, sales, inventory, vendor, and customer operations." }
},
{
"@type": "Question",
"name": "Can I customize Blazor SCM for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom supply chain workflows, integrate logistics systems, and deploy for clients. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "What database does Blazor SCM use?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor SCM includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 &middot; Blazor Server &middot; VSA &middot; MudBlazor</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">Supply Chain Management — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready supply chain management application to manage procurement, sales, inventory, and vendors. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/bc6656cb-183d-4981-8b6c-c8eb626bb00b?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-scm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/scm-supply-chain-management-01.png" alt="Blazor SCM Dashboard — Supply Chain Management .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<!-- TABLE OF CONTENTS -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
<span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a>
<span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
<span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
<span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a>
<span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a>
<span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
<span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
<span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<!-- BUSINESS PROBLEM -->
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Supply chain inefficiencies — fragmented procurement, manual inventory tracking, and disconnected logistics — cost businesses time, money, and competitive advantage.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Fragmented Procurement Process</h3>
<p class="text-sm text-gray-500">Requisitions, purchase orders, goods receipts, and vendor bills are managed across emails and spreadsheets. <strong>Blazor SCM unifies the entire procure-to-pay cycle</strong> with full traceability from requisition to payment.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Real-Time Inventory Visibility</h3>
<p class="text-sm text-gray-500">Without real-time stock tracking across warehouses, businesses face stockouts, overstocking, and write-offs. <strong>Blazor SCM provides complete inventory management</strong> with transfers, adjustments, stock counts, and movement reports.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Sales & Delivery</h3>
<p class="text-sm text-gray-500">Sales orders, delivery orders, and returns are tracked in separate systems causing fulfillment delays. <strong>Blazor SCM integrates the full order-to-cash cycle</strong> — quotation to invoice, delivery to return — with complete audit trail.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Supply Chain Analytics</h3>
<p class="text-sm text-gray-500">Without dashboards, supply chain managers cannot identify bottlenecks, analyze vendor performance, or optimize inventory. <strong>Blazor SCM includes KPI dashboards</strong> with purchase reports, sales reports, inventory reports, and payment summaries.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor SCM</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Quotation, Sales Order, Delivery Order, Sales Return, Invoice, Credit Note, Payment, Sales Report, Delivery Report, Return Report, Invoice Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Requisition, Purchase Order, Goods Receive, Purchase Return, Bill, Debit Note, Payment, Purchase Report, Receive Report, Return Report, Bill Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<!-- TECH STACK -->
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SCM is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ARCHITECTURE -->
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SCM uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Products/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorSCM/
├── Features/ # Vertical Slices (one folder per feature)
│ ├── Products/
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
│ │ ├── GetContactById/
│ │ ├── GetContactList/
│ │ ├── UpdateContact/
│ │ └── DeleteContact/
│ ├── Warehouses/
│ ├── StockMovements/
│ ├── Inventory/
│ ├── Transfers/
│ └── Dashboard/
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
├── Migrations/ # EF Core migrations
├── SeedData/ # Initial seed data (demo users, sample data)
├── Components/ # Shared Blazor components
├── wwwroot/ # Static assets
└── Program.cs # Single entry point with full configuration</code></pre>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor SCM ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- REST API -->
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SCM exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- DATABASE & DEPLOYMENT -->
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SCREENSHOTS -->
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
<p class="text-gray-500 mt-2">Explore the Blazor SCM interface — dashboards, data management, workflow management, and more.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/scm-supply-chain-management-01.png" alt="Blazor SCM Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/scm-supply-chain-management-02.png" alt="Blazor SCM Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/scm-supply-chain-management-03.png" alt="Blazor SCM Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/scm-supply-chain-management-04.png" alt="Blazor SCM Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/scm-supply-chain-management-05.png" alt="Blazor SCM Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/scm-supply-chain-management-06.png" alt="Blazor SCM Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-scm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-scm.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<!-- BUY CTA -->
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor SCM Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/bc6656cb-183d-4981-8b6c-c8eb626bb00b?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor SCM?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor SCM application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor SCM use?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor SCM uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
products/blazor-swm.html
+543
View File
@@ -0,0 +1,543 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor SWM — Spa & Wellness Management .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Blazor SWM: Complete Spa & Wellness Management source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
<meta name="keywords" content="Blazor SWM, Spa & Wellness Management, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-swm.html" />
<meta property="og:title" content="Blazor SWM — Spa & Wellness Management .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-swm.html" />
<meta property="og:image" content="https://www.indotalent.com/img/swm-spa-and-wellness-management-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor SWM — .NET 10 Spa & Wellness Management Source Code" />
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/swm-spa-and-wellness-management-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<!-- Structured Data: SoftwareApplication + Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor SWM",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Spa & Wellness Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
"url": "https://www.indotalent.com/products/blazor-swm.html",
"author": {
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com"
},
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "150"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor SWM", "item": "https://www.indotalent.com/products/blazor-swm.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does SWM include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor SWM includes client and therapist management, appointment booking and scheduling, service sales and invoicing, purchase management, inventory tracking, commission reports, employee management, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
},
{
"@type": "Question",
"name": "Does Blazor SWM include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor SWM exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all client, appointment, sales, purchase, and inventory operations." }
},
{
"@type": "Question",
"name": "Can I customize Blazor SWM for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom services, modify booking workflows, integrate payment systems, and deploy for spa and wellness businesses. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "What database does Blazor SWM use?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor SWM includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 &middot; Blazor Server &middot; VSA &middot; MudBlazor</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">Spa & Wellness Management — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready spa & wellness management application to manage clients, appointments, services, and billing. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/99ce0078-7185-4a7d-8957-f5b9c0505b87?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-swm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/swm-spa-and-wellness-management-01.png" alt="Blazor SWM Dashboard — Spa & Wellness Management .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<!-- TABLE OF CONTENTS -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
<span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a>
<span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
<span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
<span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a>
<span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a>
<span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
<span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
<span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<!-- BUSINESS PROBLEM -->
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Spa, fitness, and wellness businesses struggle with fragmented appointment booking, manual client management, disconnected billing, and no business analytics — limiting growth and profitability.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Fragmented Client & Appointment Management</h3>
<p class="text-sm text-gray-500">Client bookings are managed through phone calls, paper logs, and sticky notes. Double bookings and no-shows hurt revenue. <strong>Blazor SWM provides a complete booking system</strong> with resource scheduling, availability management, and client tracking.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Sales & Billing</h3>
<p class="text-sm text-gray-500">Service sales, packages, and invoices are handled manually leading to billing errors and delayed payments. <strong>Blazor SWM integrates the full sales cycle</strong> — from order to invoice to payment — with commission tracking for therapists.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Employee & Commission Tracking</h3>
<p class="text-sm text-gray-500">Therapist schedules, service assignments, and commissions are tracked in spreadsheets. <strong>Blazor SWM centralizes employee management</strong> with group categorization, service assignments, and automated commission reports.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Business Analytics</h3>
<p class="text-sm text-gray-500">Without dashboards, spa owners cannot see which services sell best, which therapists perform, or track revenue trends. <strong>Blazor SWM includes KPI dashboards</strong> with sales reports, commission reports, and inventory summaries.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor SWM</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Organization</h4><p class="text-xs text-gray-500">Employee, Employee Group, Employee Category</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Sales Order, Invoice, Payment, Sales Report, Commission Report, Invoice Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Purchase Order, Bill, Payment, Purchase Report, Bill Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, To-Do List</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<!-- TECH STACK -->
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SWM is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ARCHITECTURE -->
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SWM uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Products/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorSWM/
├── Features/ # Vertical Slices (one folder per feature)
│ ├── Products/
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
│ │ ├── GetContactById/
│ │ ├── GetContactList/
│ │ ├── UpdateContact/
│ │ └── DeleteContact/
│ ├── Warehouses/
│ ├── StockMovements/
│ ├── Inventory/
│ ├── Transfers/
│ └── Dashboard/
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
├── Migrations/ # EF Core migrations
├── SeedData/ # Initial seed data (demo users, sample data)
├── Components/ # Shared Blazor components
├── wwwroot/ # Static assets
└── Program.cs # Single entry point with full configuration</code></pre>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor SWM ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- REST API -->
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SWM exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- DATABASE & DEPLOYMENT -->
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SCREENSHOTS -->
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
<p class="text-gray-500 mt-2">Explore the Blazor SWM interface — dashboards, data management, workflow management, and more.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/swm-spa-and-wellness-management-01.png" alt="Blazor SWM Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/swm-spa-and-wellness-management-02.png" alt="Blazor SWM Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/swm-spa-and-wellness-management-03.png" alt="Blazor SWM Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/swm-spa-and-wellness-management-04.png" alt="Blazor SWM Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/swm-spa-and-wellness-management-05.png" alt="Blazor SWM Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/swm-spa-and-wellness-management-06.png" alt="Blazor SWM Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-swm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-swm.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<!-- BUY CTA -->
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor SWM Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/99ce0078-7185-4a7d-8957-f5b9c0505b87?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor SWM?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor SWM application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor SWM use?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor SWM uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
products/blazor-wms.html
+542
View File
@@ -0,0 +1,542 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Blazor WMS — Warehouse Management System .NET 10 Source Code | Indotalent</title>
<meta name="description" content="Blazor WMS: Complete Warehouse Management System source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
<meta name="keywords" content="Blazor WMS, Warehouse Management System, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://www.indotalent.com/products/blazor-wms.html" />
<meta property="og:title" content="Blazor WMS — Warehouse Management System .NET 10 Source Code | Indotalent" />
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.indotalent.com/products/blazor-wms.html" />
<meta property="og:image" content="https://www.indotalent.com/img/wms-warehouse-inventory-management-system-01.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Blazor WMS — .NET 10 Warehouse Management System Source Code" />
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
<meta name="twitter:image" content="https://www.indotalent.com/img/wms-warehouse-inventory-management-system-01.png" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
<!-- Structured Data: SoftwareApplication + Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Blazor WMS",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Windows, Linux, macOS",
"description": "Warehouse Management System system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
"url": "https://www.indotalent.com/products/blazor-wms.html",
"author": {
"@type": "Organization",
"name": "Indotalent",
"url": "https://www.indotalent.com"
},
"offers": {
"@type": "Offer",
"price": "21.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "150"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
{ "@type": "ListItem", "position": 3, "name": "Blazor WMS", "item": "https://www.indotalent.com/products/blazor-wms.html" }
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What features does WMS include?",
"acceptedAnswer": { "@type": "Answer", "text": "Blazor WMS includes warehouse and inventory management with stock counts and movements, sales order processing with delivery and returns, purchase and procurement management, vendor and customer management, booking and scheduling, dashboard with warehouse KPIs, and full audit trail." }
},
{
"@type": "Question",
"name": "Does Blazor WMS include REST API?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor WMS exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all warehouse, inventory, sales, purchase, and vendor operations." }
},
{
"@type": "Question",
"name": "Can I customize Blazor WMS for my clients?",
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom warehouse workflows, integrate shipping systems, and deploy for clients. Each client project requires a separate $21 license." }
},
{
"@type": "Question",
"name": "What database does Blazor WMS use?",
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
},
{
"@type": "Question",
"name": "Does it include authentication and user roles?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor WMS includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
}
]
}
</script>
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-6">
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="flex-1 text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 &middot; Blazor Server &middot; VSA &middot; MudBlazor</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
<p class="text-lg text-gray-500 mb-3 max-w-xl">Warehouse Management System — Complete Source Code</p>
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready warehouse management application to manage inventory, stock movements, sales, and procurement. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="https://code.indotalent.com/checkout/buy/b581ed46-0ba5-4111-873d-959a4e3b6272?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<a href="https://blazor-wms.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
</div>
</div>
<div class="flex-1"><img src="../img/wms-warehouse-inventory-management-system-01.png" alt="Blazor WMS Dashboard — Warehouse Management System .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
</div>
</div>
</section>
<!-- TABLE OF CONTENTS -->
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
<span class="text-gray-400">On this page:</span>
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
<span class="text-gray-300">|</span>
<a href="#features" class="toc-link text-gray-500">Features</a>
<span class="text-gray-300">|</span>
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
<span class="text-gray-300">|</span>
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
<span class="text-gray-300">|</span>
<a href="#security" class="toc-link text-gray-500">Security</a>
<span class="text-gray-300">|</span>
<a href="#api" class="toc-link text-gray-500">REST API</a>
<span class="text-gray-300">|</span>
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
<span class="text-gray-300">|</span>
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
<span class="text-gray-300">|</span>
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
</div>
</div>
</section>
<!-- BUSINESS PROBLEM -->
<section id="problem" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Warehouse operations suffer from manual inventory tracking, disconnected stock movements, fragmented sales-purchase cycles, and no real-time visibility — leading to errors, delays, and lost revenue.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Inventory & Stock Management</h3>
<p class="text-sm text-gray-500">Inventory is tracked on paper or spreadsheets, leading to stockouts, overstocking, write-offs, and inaccurate counts. <strong>Blazor WMS provides complete warehouse inventory management</strong> with real-time tracking, stock counts, adjustments, and movement reports.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Sales & Delivery Operations</h3>
<p class="text-sm text-gray-500">Sales orders, delivery orders, returns, and invoices are managed in separate systems causing fulfillment delays and errors. <strong>Blazor WMS integrates the full order-to-cash cycle</strong> with complete traceability from quotation to payment.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Fragmented Procurement & Receiving</h3>
<p class="text-sm text-gray-500">Purchase requisitions, goods receipts, returns, and vendor bills are processed manually. <strong>Blazor WMS unifies the procure-to-pay cycle</strong> with automated receiving, debit notes, and payment tracking.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">No Warehouse Analytics</h3>
<p class="text-sm text-gray-500">Without dashboards, warehouse managers cannot track inventory levels, movement trends, stock turnover, or operational KPIs. <strong>Blazor WMS includes KPI dashboards</strong> with transaction reports, stock reports, inventory reports, and payment summaries.</p>
</div>
</div>
</div>
</section>
<!-- KEY FEATURES -->
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor WMS</h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Quotation, Sales Order, Delivery Order, Sales Return, Invoice, Credit Note, Payment, Sales Report, Delivery Report, Return Report, Invoice Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Requisition, Purchase Order, Goods Receive, Purchase Return, Bill, Debit Note, Payment, Purchase Report, Receive Report, Return Report, Bill Report, Payment Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse, Transfer Out, Transfer In, Positive/Negative Adjustment, Scrapping, Stock Count, Transaction Report, Stock Report, Movement Report</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
</div>
</div>
</section>
<!-- TECH STACK -->
<section id="tech-stack" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor WMS is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
</div>
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
<tbody>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ARCHITECTURE -->
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor WMS uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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.25V6zM3.75 15.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.25V6zM13.5 15.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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Products/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path 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>
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorWMS/
├── Features/ # Vertical Slices (one folder per feature)
│ ├── Products/
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
│ │ ├── GetContactById/
│ │ ├── GetContactList/
│ │ ├── UpdateContact/
│ │ └── DeleteContact/
│ ├── Warehouses/
│ ├── StockMovements/
│ ├── Inventory/
│ ├── Transfers/
│ └── Dashboard/
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
├── Migrations/ # EF Core migrations
├── SeedData/ # Initial seed data (demo users, sample data)
├── Components/ # Shared Blazor components
├── wwwroot/ # Static assets
└── Program.cs # Single entry point with full configuration</code></pre>
</div>
</div>
</section>
<!-- SECURITY -->
<section id="security" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor WMS ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- REST API -->
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor WMS exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
</div>
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- DATABASE & DEPLOYMENT -->
<section id="database" class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
<ul class="space-y-2.5 text-sm text-gray-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- SCREENSHOTS -->
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
<p class="text-gray-500 mt-2">Explore the Blazor WMS interface — dashboards, data management, workflow management, and more.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<img src="../img/wms-warehouse-inventory-management-system-01.png" alt="Blazor WMS Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/wms-warehouse-inventory-management-system-02.png" alt="Blazor WMS Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/wms-warehouse-inventory-management-system-03.png" alt="Blazor WMS Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/wms-warehouse-inventory-management-system-04.png" alt="Blazor WMS Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/wms-warehouse-inventory-management-system-05.png" alt="Blazor WMS Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
<img src="../img/wms-warehouse-inventory-management-system-06.png" alt="Blazor WMS Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="py-10 lg:py-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-wms.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-wms.csharpasp.net/</a></p>
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
</div>
</div>
</section>
<!-- BUY CTA -->
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor WMS Source Code</h2>
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
<div class="flex items-center justify-center gap-4 mb-6">
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
</div>
<a href="https://code.indotalent.com/checkout/buy/b581ed46-0ba5-4111-873d-959a4e3b6272?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 lg:py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
</div>
<div class="space-y-3" x-data="{open:null}">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor WMS?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor WMS application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor WMS use?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor WMS uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
<div class="flex flex-wrap gap-4 text-sm">
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
</div>
<p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p>
</div>
</div>
</footer>
</body>
</html>
robots.txt
+3
View File
@@ -0,0 +1,3 @@
User-agent: *
Allow: /
Sitemap: https://www.indotalent.com/sitemap.xml
sitemap.xml
+31
View File
@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>https://www.indotalent.com/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-crm.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-crm-multitenant.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-cms.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-hrm.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-hrm-multitenant.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-oms.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-scm.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-swm.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/products/blazor-wms.html</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://www.indotalent.com/for-beginners.html</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://www.indotalent.com/for-freelancers.html</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://www.indotalent.com/blog.html</loc><changefreq>weekly</changefreq><priority>0.8</priority></url>
<url><loc>https://www.indotalent.com/blog/vsa-ai-assisted-development.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>`r`n
<url><loc>https://www.indotalent.com/blog/vsa-introduction.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/blazor-hosting-model.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/vsa-eliminates-project-hell.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/vsa-mediatr.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/mudblazor-component-library.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/blazor-performance-optimization.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/clean-architecture-to-vsa-migration.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/blazor-server-security-jwt.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/vsa-vs-layered-architecture.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/blog/real-world-vsa-net10.html</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://www.indotalent.com/support.html</loc><changefreq>monthly</changefreq><priority>0.6</priority></url>
<url><loc>https://www.indotalent.com/privacy-policy.html</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
<url><loc>https://www.indotalent.com/no-refund-policy.html</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
<url><loc>https://www.indotalent.com/license.html</loc><changefreq>yearly</changefreq><priority>0.4</priority></url>
</urlset>
sitemap_new.xml
View File

Some files were not shown because too many files have changed in this diff Show More