@page "/"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blazor CRM - Complete Source Code Solution</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }

        /* === BUTTONS === */
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1.75rem;
            background: #6366F1;
            color: #ffffff;
            font-size: 0.875rem;
            font-weight: 600;
            border-radius: 0.5rem;
            transition: all 0.2s;
            cursor: pointer;
            border: none;
        }
        .btn-primary:hover {
            background: #4f46e5;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99,102,241,0.25);
        }
        .btn-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.625rem 1rem;
            background: transparent;
            color: #6366F1;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 0.5rem;
            border: 1.5px solid #c7d2fe;
            transition: all 0.2s;
            cursor: pointer;
        }
        .btn-outline:hover {
            border-color: #818cf8;
            background: #e0e7ff;
        }

        /* === DARK SECTION BUTTON OVERRIDES === */
        .section-dark .btn-primary {
            background: #ffffff;
            color: #6366F1;
        }
        .section-dark .btn-primary:hover {
            background: #f8fafc;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .section-dark .btn-outline {
            color: #ffffff;
            border-color: rgba(255,255,255,0.3);
        }
        .section-dark .btn-outline:hover {
            border-color: rgba(255,255,255,0.6);
            background: rgba(255,255,255,0.1);
        }

        /* === NAV LINKS === */
        .nav-link {
            color: rgba(255,255,255,0.8);
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
            transition: color 0.2s;
            cursor: pointer;
        }
        .nav-link:hover {
            color: #ffffff;
        }
        .nav-link.active {
            color: #ffffff;
            font-weight: 600;
        }

        /* === HERO BADGE === */
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 1rem;
            background: rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.9);
            font-size: 0.8125rem;
            font-weight: 500;
            border-radius: 9999px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        /* === TECH CARDS === */
        .tech-card {
            padding: 1.25rem;
            background: #ffffff;
            border-radius: 0.75rem;
            border: 1px solid #f1f5f9;
            text-align: center;
            transition: all 0.2s;
            cursor: pointer;
        }
        .tech-card:hover {
            border-color: #c7d2fe;
            box-shadow: 0 4px 12px rgba(99,102,241,0.1);
            transform: translateY(-2px);
        }
        .tech-card .ico {
            width: 2.5rem;
            height: 2.5rem;
            margin: 0 auto 0.75rem;
            background: #e0e7ff;
            border-radius: 0.625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6366F1;
        }
        .tech-card .ico svg {
            width: 1.25rem;
            height: 1.25rem;
        }

        /* === FEATURE ICON === */
        .feature-icon {
            width: 2.5rem;
            height: 2.5rem;
            background: #e0e7ff;
            border-radius: 0.625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6366F1;
        }
        .feature-icon svg {
            width: 1.25rem;
            height: 1.25rem;
        }

        /* === FOOTER LINK === */
        .footer-link {
            color: #6b7280;
            font-size: 0.8125rem;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.2s;
        }
        .footer-link:hover {
            color: #a5b4fc;
        }

        /* === FAB BACK TO TOP === */
        #fab-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 2.75rem;
            height: 2.75rem;
            background: #6366F1;
            color: #ffffff;
            border: none;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 50;
            box-shadow: 0 4px 12px rgba(99,102,241,0.3);
        }
        #fab-top svg {
            width: 1.25rem;
            height: 1.25rem;
        }
        #fab-top:hover {
            background: #4f46e5;
            transform: translateY(-2px);
        }
        #fab-top.show {
            opacity: 1;
            visibility: visible;
        }

        /* === ALPINE CLOAK === */
        [x-cloak] { display: none !important; }
    </style>
</head>
<body x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">

<!-- ===== NAV ===== -->
<nav class="section-dark sticky top-0 z-50" style="background-color: #6366F1;" x-data="{ mobileOpen: false }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center gap-10">
                <a class="flex items-center gap-2 text-white font-bold text-lg no-underline" href="#">
                    <svg class="w-7 h-7 text-white/80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    <span>Blazor CRM</span>
                </a>
                <div class="hidden md:flex items-center gap-8">
                    <a class="nav-link active" href="#home">Home</a>
                    <a class="nav-link" href="#tech">Tech Stack</a>
                    <a class="nav-link" href="#arch">Why Blazor CRM</a>
                    <a class="nav-link" href="#frontend">Modules</a>
                    <a class="nav-link" href="#cta">Live Demo</a>
                </div>
            </div>
            <div class="hidden md:flex items-center gap-3">
                <a class="nav-link" href="/account/tenant-selection">Sign In</a>
                <button class="btn-primary" onclick="window.open('https://indotalent.com/','_blank')">Get Source Code</button>
            </div>
            <button class="md:hidden p-2 text-white/80 hover:text-white" @@click="mobileOpen = !mobileOpen">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
        </div>
        <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-2">
            <a class="block px-3 py-2 text-sm text-white bg-indigo-400 rounded-md" href="#home">Home</a>
            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-indigo-400 rounded-md" href="#tech">Tech Stack</a>
            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-indigo-400 rounded-md" href="#arch">Why Blazor CRM</a>
            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-indigo-400 rounded-md" href="#frontend">Modules</a>
            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-indigo-400 rounded-md" href="#cta">Live Demo</a>
            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-indigo-400 rounded-md" href="/account/tenant-selection">Sign In</a>
            <button class="btn-primary w-full justify-center mt-2" onclick="window.open('https://indotalent.com/','_blank')">Get Source Code</button>
        </div>
    </div>
</nav>

<!-- ===== HERO ===== -->
<section id="home" class="section-dark relative overflow-hidden" style="background-color: #6366F1;">
    <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(135deg, #4f46e5 0%, #6366F1 50%, #818cf8 100%);"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32">
        <div class="text-center max-w-4xl mx-auto">
            <div class="hero-badge mx-auto mb-6">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Complete Source Code · SaaS-Ready · Multitenant
            </div>
            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white leading-tight tracking-tight">
                The Ultimate Bridge<br/>
                <span class="text-indigo-200">Between Your Business and Your Customers</span>
            </h1>
            <p class="mt-6 text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto leading-relaxed">
                A production-ready Blazor CRM source code built with .NET 10 and MudBlazor.
                Skip months of development—deploy a complete, working CRM today.
            </p>
            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
                <a class="btn-primary text-base px-8 py-3.5 no-underline" href="/account/tenant-selection">
                    Sign In
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                </a>
                <a href="https://indotalent.com" target="_blank" class="btn-outline text-base px-8 py-3.5 no-underline">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
                    Get Source Code
                </a>
            </div>
            <div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-indigo-200">
                <span class="font-medium text-indigo-100">Highlights</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg> 100% Source Code</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> Guaranteed Working</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Deploy in Minutes</span>
            </div>
        </div>
    </div>
</section>

<!-- ===== TECH STACK ===== -->
<section id="tech" class="py-20 md:py-28">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-indigo-50 text-indigo-500 text-xs font-semibold rounded-full border border-indigo-200">TECHNOLOGY STACK</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Cutting-Edge .NET 10 Under the Hood</h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Every piece of this CRM is built with the latest Microsoft stack—Blazor Server, MudBlazor, and Vertical Slice Architecture—delivering real-world robustness you can see and touch.</p>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="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><div class="font-semibold text-gray-900 text-sm">.NET 10</div><div class="text-xs text-gray-400 mt-0.5">Runtime</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">Blazor Server</div><div class="text-xs text-gray-400 mt-0.5">Web UI</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">ASP.NET Core 10</div><div class="text-xs text-gray-400 mt-0.5">Framework</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></div><div class="font-semibold text-gray-900 text-sm">MudBlazor 9</div><div class="text-xs text-gray-400 mt-0.5">UI Components</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="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 class="font-semibold text-gray-900 text-sm">MS SQL</div><div class="text-xs text-gray-400 mt-0.5">Database</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">C# / LINQ</div><div class="text-xs text-gray-400 mt-0.5">Language</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">MediatR</div><div class="text-xs text-gray-400 mt-0.5">CQRS Pipeline</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">VSA</div><div class="text-xs text-gray-400 mt-0.5">Architecture</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="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 class="font-semibold text-gray-900 text-sm">EF Core</div><div class="text-xs text-gray-400 mt-0.5">ORM</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Single Project</div><div class="text-xs text-gray-400 mt-0.5">Monolithic</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div><div class="font-semibold text-gray-900 text-sm">VS 2026</div><div class="text-xs text-gray-400 mt-0.5">IDE</div></div>
            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Full Source</div><div class="text-xs text-gray-400 mt-0.5">No Obfuscation</div></div>
        </div>
    </div>
</section>

<!-- ===== ARCHITECTURE SECTION ===== -->
<section id="arch" class="py-20 md:py-28 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-indigo-50 text-indigo-500 text-xs font-semibold rounded-full border border-indigo-200">WHY BLAZOR CRM</span>
            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Stop Gambling with AI Tokens.<br/>Get a Guaranteed Working CRM.</h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">AI can generate code, but a complete, end-to-end working application is a different story. Here's why Blazor CRM is the smarter investment.</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="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-lg font-semibold text-gray-900">AI-Generated Code Looks Easy—Until It Doesn't Work</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Sure, AI can scaffold a UI in seconds. But a full-stack CRM with validation, transactions, reporting, and multitenancy? That takes hundreds of iterations, countless tokens, and no guarantee of success. Don't gamble with your project timeline.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Guaranteed to Compile, Run, and Scale</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">This is not a tutorial or a toy project. It's a battle-tested CRM with 8 complete business modules, deployed and running in production. Open the demo, log in, and see for yourself—no guesswork required.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Real-World .NET 10 & Blazor Showcase</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">A working proof of ASP.NET Core 10 and Blazor Server's capabilities—beautiful MudBlazor UI, fast rendering, clean Vertical Slice Architecture. Perfect as a learning reference or a production jump-start.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Single Project. Zero Microservice Complexity.</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">No juggling between 12 projects, no Docker orchestration, no service mesh headaches. One solution, one project, one deployment—Vertical Slice Architecture keeps it organized without the overhead.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Deploy Today, Customize Tomorrow</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Get the full source code and have a working CRM running in minutes. Then customize it—add modules, tweak workflows, rebrand it. You own the code, no recurring license fees.</p>
            </div>
            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
                <div class="feature-icon mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Multitenant SaaS Architecture Included</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Built-in tenant isolation from day one. Deploy once, serve multiple clients. Each tenant gets separate data, settings, and users with zero leakage—ready for your SaaS business model.</p>
            </div>
        </div>
    </div>
</section>

<!-- ===== FRONTEND SECTION ===== -->
<section id="frontend" class="py-20 md:py-28">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-indigo-50 text-indigo-500 text-xs font-semibold rounded-full border border-indigo-200">BUSINESS MODULES</span>
                <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Everything You Need. All In One Place.</h2>
                <p class="mt-4 text-gray-500 leading-relaxed">Eight complete business modules, ready to use. From lead management to financial reporting—no missing pieces, no half-built features.</p>
                <div class="mt-8 space-y-4">
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">Pipeline</span><p class="text-xs text-gray-400 mt-0.5">Campaigns, Budgets, Expenses, Leads, Contacts, Activities & Sales Team</p></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">Third Party</span><p class="text-xs text-gray-400 mt-0.5">Customer & Vendor Groups, Categories, Contacts</p></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">Sales</span><p class="text-xs text-gray-400 mt-0.5">Quotations, Orders, Deliveries, Returns, Invoices, Credit Notes & Payments</p></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">Purchase</span><p class="text-xs text-gray-400 mt-0.5">Requisitions, Orders, Goods Receive, Returns, Bills, Debit Notes & Payments</p></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">Inventory</span><p class="text-xs text-gray-400 mt-0.5">Products, Warehouses, Transfers, Adjustments, Scrapping & Stock Count</p></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
                        <div><span class="font-semibold text-gray-900 text-sm">Utilities</span><p class="text-xs text-gray-400 mt-0.5">Booking Groups, Resources, Scheduler, Program Manager & To-Do List</p></div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-indigo-500">Profile</div><div class="text-xs text-gray-400 mt-1">Personal Info & Sessions</div></div>
                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-indigo-500">System Logs</div><div class="text-xs text-gray-400 mt-1">Database & File Audit</div></div>
                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-indigo-500">App Settings</div><div class="text-xs text-gray-400 mt-1">Users & Currencies</div></div>
                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-indigo-500">System Config</div><div class="text-xs text-gray-400 mt-1">appsettings.json</div></div>
            </div>
        </div>
    </div>
</section>

<!-- ===== CTA ===== -->
<section id="cta" class="section-dark py-20 md:py-28" style="background-color: #111827;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-bold text-white">See It In Action</h2>
        <p class="mt-4 text-gray-400 max-w-xl mx-auto">A live demo is worth a thousand promises. Log in and explore every module—no sign-up, no strings attached.</p>
        <div class="mt-8 max-w-lg mx-auto">
            <div class="p-6 bg-white/5 rounded-xl border border-white/10">
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                        <span class="text-sm text-gray-400">URL</span>
                        <a href="https://blazor-saas-crm.csharpasp.net/" target="_blank" class="text-sm font-medium text-indigo-400 hover:text-indigo-300 no-underline">blazor-saas-crm.csharpasp.net</a>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                        <span class="text-sm text-gray-400">Email</span>
                        <span class="text-sm font-medium text-white">admin@root.com</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                        <span class="text-sm text-gray-400">Password</span>
                        <span class="text-sm font-medium text-white">123456</span>
                    </div>
                </div>
                <div class="mt-6">
                    <button class="btn-primary" onclick="window.open('https://blazor-saas-crm.csharpasp.net/','_blank')">Launch Live Demo</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ===== FOOTER ===== -->
<footer class="section-dark" style="background-color: #111827; border-top: 1px solid #1f2937;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center gap-2 text-white font-bold text-lg mb-4">
                    <svg class="w-6 h-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    Blazor CRM
                </div>
                <p class="text-sm text-gray-500 leading-relaxed">Complete CRM source code built on .NET 10 & Blazor Server. Production-ready, multitenant, and fully customizable.</p>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-4">Tech Stack</h4>
                <div class="space-y-2"><a class="footer-link block">.NET 10</a><a class="footer-link block">Blazor Server</a><a class="footer-link block">MudBlazor 9</a><a class="footer-link block">MS SQL</a></div>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-4">Modules</h4>
                <div class="space-y-2"><a class="footer-link block">Pipeline & Sales</a><a class="footer-link block">Purchase & Inventory</a><a class="footer-link block">Third Party</a><a class="footer-link block">Utilities</a></div>
            </div>
            <div>
                <h4 class="text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-4">Resources</h4>
                <div class="space-y-2"><a class="footer-link block" onclick="window.open('https://blazor-saas-crm.csharpasp.net/','_blank')">Live Demo</a></div>
            </div>
        </div>
        <div class="mt-10 pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
            <p class="text-xs text-gray-600">&copy; 2026 Blazor CRM. All rights reserved.</p>
            <div class="flex gap-4">
                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Privacy</a>
                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Terms</a>
                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Cookies</a>
            </div>
        </div>
    </div>
</footer>

<!-- ===== FAB Back to Top ===== -->
<button id="fab-top" :class="atTop ? '' : 'show'" @@click="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">
    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
</button>

<script>
function initScrollSpy() {
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(e) {
      if (e.isIntersecting) {
        document.querySelectorAll('.nav-link').forEach(function(l) { l.classList.remove('active'); });
        var el = document.querySelector('.nav-link[href="#'+e.target.id+'"]');
        if (el) el.classList.add('active');
      }
    });
  }, { rootMargin: '-80px 0px -50% 0px' });
  document.querySelectorAll('section[id]').forEach(function(s) { observer.observe(s); });
}
</script>
</body>
</html>