```
@page "/"
@layout PRPro.Shared.Layout.LandingLayout


<RadzenRow class="hero-section" AlignItems="AlignItems.Center" Gap="2rem">
    @* Replaced Container/Row *@
    <RadzenColumn SizeLG="6" SizeMD="12">
        @* Replaced Column, added stacking for medium screens *@
        <div class="hero-content fade-in">
            <h1 class="hero-title mb-4">
                Transform Your
                <span class="highlight">Workforce Management</span>
            </h1>
            <p class="hero-subtitle mb-4">Payroll Pro is a comprehensive Human Resources Management System (HRMS) designed to simplify and optimize your employee management processes. From payroll to performance tracking, Payroll Pro offers a suite of features to empower your HR department and enhance overall organizational efficiency.</p>
            <div class="hero-buttons mb-5">
                @* Replaced Blazorise Button with RadzenButton *@
                <RadzenButton ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Large" Class="get-started-btn me-3" Text="Get Started">
                    <RadzenIcon Icon="rocket" Class="me-2" /> @* Replaced Blazorise Icon with RadzenIcon *@
                </RadzenButton>
                @* Replaced Blazorise Button with RadzenButton *@
                <RadzenButton ButtonStyle="ButtonStyle.Secondary" Variant="Variant.Outlined" Size="ButtonSize.Large" Class="demo-btn" Text="Watch Demo">
                    <RadzenIcon Icon="play" Class="me-2" /> @* Replaced Blazorise Icon with RadzenIcon *@
                </RadzenButton>
            </div>
            <div class="stats-container d-flex justify-content-between p-3 rounded bg-light">
                <div class="stat-item text-center">
                    <span class="stat-number d-block fw-bold">5000+</span>
                    <span class="stat-label text-muted">Companies</span>
                </div>
                <div class="stat-item text-center">
                    <span class="stat-number d-block fw-bold">1M+</span>
                    <span class="stat-label text-muted">Employees</span>
                </div>
                <div class="stat-item text-center">
                    <span class="stat-number d-block fw-bold">99.9%</span>
                    <span class="stat-label text-muted">Uptime</span>
                </div>
            </div>
        </div>
    </RadzenColumn>
    <RadzenColumn SizeLG="6" SizeMD="12">
        @* Replaced Column, added stacking for medium screens *@
        <div class="benefits-content fade-in bg-white p-4 rounded shadow">
            <h2 class="benefits-title mb-3">Benefits of Using Payroll Pro</h2>
            <ul class="benefits-list">
                <li class="mb-2">
                    <span class="benefit-highlight">Increased Efficiency:</span> Automate manual HR tasks, freeing up your HR team to focus on strategic initiatives.
                </li>
                <li class="mb-2">
                    <span class="benefit-highlight">Improved Accuracy:</span> Reduce errors in payroll, leave tracking, and data management with automated systems.
                </li>
                <li class="mb-2">
                    <span class="benefit-highlight">Enhanced Employee Experience:</span> Provide employees with self-service tools for leave requests, timesheets, and accessing payslips.
                </li>
                <li class="mb-2">
                    <span class="benefit-highlight">Data-Driven Decisions:</span> Leverage comprehensive reporting and analytics to gain insights and make informed HR decisions.
                </li>
                <li class="mb-2">
                    <span class="benefit-highlight">Centralized HR Management:</span> Consolidate all HR functions into a single, integrated platform.
                </li>
            </ul>
            <p class="conclusion mt-3">Payroll Pro is the ideal HRMS solution for businesses looking to modernize their HR processes, improve efficiency, and empower their workforce.</p>
        </div>
    </RadzenColumn>
</RadzenRow>

<style>
    /* Animation */
    .fade-in {
        animation: fadeIn 1s ease-in;
    }

    /* Custom hero section class if needed for specific overrides */
    .hero-section {
        /* Add any specific styles for the row itself, e.g., padding, margin */
        padding-top: 3rem;
        padding-bottom: 3rem;
        overflow-x: hidden; /* Prevent horizontal scrollbars from animations */
    }

    /* Typography */
    .hero-title {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1.2;
        color: #343a40; /* Consider using Radzen theme variables if available/desired */
    }

    .highlight {
        color: var(--rz-primary, #0d6efd); /* Use Radzen primary color variable if possible */
        position: relative;
        display: inline-block;
    }

        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 8px;
            /* Use rgba version of primary color */
            background-color: rgba(13, 110, 253, 0.2);
            z-index: -1;
        }

    .hero-subtitle {
        font-size: 1.1rem;
        color: #6c757d; /* Consider Radzen theme variables */
        line-height: 1.6;
        max-width: 90%;
    }

    /* Buttons - Customizations on top of Radzen Button styles */
    .get-started-btn, .demo-btn {
        /* RadzenButton uses padding internally, adjust if needed */
        /* padding: 0.75rem 1.5rem; */
        font-weight: 500;
        transition: all 0.3s ease;
    }

        /* Apply hover effects directly to the Radzen button element */
        .get-started-btn.rz-button:hover {
            transform: translateY(-3px);
            /* Adjust shadow based on Radzen primary color */
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
        }

        /* Hover for outlined secondary button */
        .demo-btn.rz-button.rz-secondary.rz-variant-outlined:hover {
            /* Slightly darken background or adjust border */
            background-color: rgba(108, 117, 125, 0.1);
        }

    /* Stats Container */
    .stats-container {
        margin-top: 2rem;
        border-top: 1px solid #dee2e6; /* Consider Radzen theme variables */
        padding-top: 1.5rem;
    }

    .stat-number {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--rz-primary, #0d6efd); /* Use Radzen primary color variable */
    }

    .stat-label {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Benefits Section */
    .benefits-content {
        height: 100%;
        /* Use Radzen primary color variable */
        border-left: 4px solid var(--rz-primary, #0d6efd);
        /* Add some vertical padding if needed when columns stack */
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .benefits-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #343a40; /* Consider Radzen theme variables */
    }

    .benefits-list {
        list-style-type: none;
        padding-left: 0;
    }

        .benefits-list li {
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 0.75rem; /* Slightly increased margin */
        }

            .benefits-list li:before {
                content: '✓';
                position: absolute;
                left: 0;
                color: var(--rz-primary, #0d6efd); /* Use Radzen primary color variable */
                font-weight: bold;
            }

    .benefit-highlight {
        font-weight: 600;
        color: #343a40; /* Consider Radzen theme variables */
    }

    .conclusion {
        color: #6c757d; /* Consider Radzen theme variables */
    }

    .hero-subtitle {
        max-width: 100%;
        font-size: 1rem;
    }

    .hero-buttons {
        /* Maybe center buttons on small screens */
        /* text-align: center; */
    }

    .get-started-btn, .demo-btn {
        /* Adjust button size/margins if needed */
        margin-bottom: 0.5rem;
    }

    .get-started-btn {
        margin-right: 0.5rem !important;
    }
    /* Reduce gap */


    .stats-container {
        flex-direction: column; /* Stack stats vertically */
        align-items: center;
        gap: 1rem;
    }

    .benefits-content {
        margin-top: 2rem;
        border-left: none;
        /* Use Radzen primary color variable */
        border-top: 4px solid var(--rz-primary, #0d6efd);
        box-shadow: none; /* Optional: remove shadow on mobile */
    }

    }
</style>

@code {

}
```

Reimagine the above, update the UI so that it looks incredible, think hard what you can do to this page to make it as attractive as possible.