Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NovaPay | Modern Global Payroll Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(90deg, #0ea5e9 0%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .smooth-scroll { | |
| scroll-behavior: smooth; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #0ea5e9; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .compliance-table { | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .compliance-table th { | |
| background-color: #f3f4f6; | |
| } | |
| .compliance-table td, .compliance-table th { | |
| padding: 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| .compliance-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .region-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .region-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| border-left-color: #0ea5e9; | |
| } | |
| </style> | |
| </head> | |
| <body class="smooth-scroll font-sans antialiased text-gray-800 bg-white"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-sm z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-circle-notch text-primary-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">NovaPay</span> | |
| </div> | |
| <div class="hidden md:ml-10 md:flex md:space-x-8"> | |
| <a href="#features" class="nav-link inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-900">Features</a> | |
| <a href="#crypto" class="nav-link inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-900">Crypto Payroll</a> | |
| <a href="#compliance-overview" class="nav-link inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-900">Compliance</a> | |
| <a href="#privacy-compliance" class="nav-link inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-900">Privacy</a> | |
| <a href="#integrations" class="nav-link inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-900">Integrations</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <a href="#demo" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200">Request Demo</a> | |
| <a href="#signup" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700">Get Started</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#features" class="block pl-3 pr-4 py-2 border-l-4 border-primary-500 text-base font-medium text-primary-700 bg-primary-50">Features</a> | |
| <a href="#crypto" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Crypto Payroll</a> | |
| <a href="#compliance-overview" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Compliance</a> | |
| <a href="#privacy-compliance" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Privacy</a> | |
| <a href="#integrations" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Integrations</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-200"> | |
| <div class="mt-3 space-y-1"> | |
| <a href="#demo" class="block w-full pl-3 pr-4 py-2 text-left text-base font-medium text-primary-700 hover:text-primary-800 hover:bg-primary-100">Request Demo</a> | |
| <a href="#signup" class="block w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative bg-white overflow-hidden pt-16"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | |
| <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> | |
| <span class="block">Borderless Payroll for</span> | |
| <span class="block gradient-text">Modern Money</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| NovaPay is the global payroll platform that pays employees and contractors anywhere in the world using traditional rails and cryptocurrencies, with enterprise-grade compliance and security. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#signup" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 md:py-4 md:text-lg md:px-10"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#demo" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 md:py-4 md:text-lg md:px-10"> | |
| Request Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | |
| <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="Global team collaborating"> | |
| </div> | |
| </div> | |
| <!-- Logo Cloud --> | |
| <div class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide"> | |
| Trusted by forward-thinking companies worldwide | |
| </p> | |
| <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5"> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Transistor"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg" alt="Workcation"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-600 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Everything you need for modern payroll | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| From traditional payroll to crypto payments, NovaPay has you covered with a comprehensive suite of features. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <!-- Payroll Features --> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> | |
| <i class="fas fa-money-bill-wave text-xl"></i> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Payroll Processing</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Full payroll processing for employees and contractors with automatic tax calculations, deductions, and filings. | |
| </p> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">One-click hire and termination</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Automatic W-2 and 1099 generation</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Multi-currency support</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Time Tracking --> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> | |
| <i class="fas fa-clock text-xl"></i> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Time Tracking</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Built-in timesheets and clock-in/clock-out functionality with optional screenshot monitoring for contractors. | |
| </p> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Configurable monitoring (opt-in only)</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Activity level reporting</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Project-based tracking</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- PTO Management --> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> | |
| <i class="fas fa-umbrella-beach text-xl"></i> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">PTO Management</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Comprehensive PTO tracking with accrual management, approval workflows, and calendar integration. | |
| </p> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Custom accrual policies</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Rollover and payout options</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Team visibility</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Payments --> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> | |
| <i class="fas fa-exchange-alt text-xl"></i> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Flexible Payments</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Pay employees and contractors via ACH, wire, check, or cryptocurrency with full audit trails. | |
| </p> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Multiple payment methods per employee</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Scheduled and on-demand payments</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-500">Payment verification</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Crypto Payroll Section --> | |
| <div id="crypto" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-600 font-semibold tracking-wide uppercase">Crypto Payroll</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Pay in crypto with full compliance | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| NovaPay supports major stablecoins and privacy coins while maintaining full regulatory compliance. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <!-- Stablecoins --> | |
| <div class="relative feature-card bg-white p-6 rounded-lg shadow transition-all duration-300"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-coins text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Stablecoin Payments</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| Pay employees in USD-pegged stablecoins (USDC, USDT) with automatic conversion reporting for tax purposes. | |
| </p> | |
| <div class="mt-6 flex space-x-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <span class="text-blue-800 font-bold">USDC</span> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">USD Coin</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <span class="text-green-800 font-bold">USDT</span> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Tether</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Privacy Coins --> | |
| <div class="relative feature-card bg-white p-6 rounded-lg shadow transition-all duration-300"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-user-shield text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Privacy Coin Options</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| For employees who value financial privacy, we offer optional Monero (XMR) and Zcash payments with full compliance reporting. | |
| </p> | |
| <div class="mt-6 flex space-x-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-orange-100 flex items-center justify-center"> | |
| <span class="text-orange-800 font-bold">XMR</span> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Monero</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <span class="text-purple-800 font-bold">ZEC</span> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Zcash</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 bg-white p-6 rounded-lg shadow"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="flex-1 min-w-0"> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">Compliance First Approach</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| All crypto payments are processed with the same compliance standards as traditional payroll, including: | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3"> | |
| <div class="bg-gray-50 overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-100 rounded-md p-2"> | |
| <i class="fas fa-file-invoice-dollar text-primary-600"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate"> | |
| Tax Reporting | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <p class="text-sm text-gray-500"> | |
| Automatic conversion reporting for all crypto payments | |
| </p> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-100 rounded-md p-2"> | |
| <i class="fas fa-shield-alt text-primary-600"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate"> | |
| KYC/AML | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <p class="text-sm text-gray-500"> | |
| Full identity verification for all recipients | |
| </p> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-100 rounded-md p-2"> | |
| <i class="fas fa-clipboard-check text-primary-600"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate"> | |
| Audit Trails | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <p class="text-sm text-gray-500"> | |
| Complete records of all transactions | |
| </p> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Regional Compliance Overview Section --> | |
| <div id="compliance-overview" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-600 font-semibold tracking-wide uppercase">Compliance</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Global Payroll, Local Rules | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| NovaPay automatically adapts to regional payroll, tax, and reporting requirements based on worker location. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- United States --> | |
| <div class="region-card bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center"> | |
| <i class="fas fa-flag-usa text-primary-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">United States</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600 space-y-2"> | |
| <p>• US employees require full identity verification and payroll tax withholding</p> | |
| <p>• US contractors require identity and IRS reporting (1099-NEC)</p> | |
| <p>• Cryptocurrency payout methods do not change employer tax obligations</p> | |
| <p>• All required W-2, 1099, and payroll tax forms are generated automatically</p> | |
| </div> | |
| </div> | |
| <!-- European Union --> | |
| <div class="region-card bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center"> | |
| <i class="fas fa-flag-eu text-primary-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">European Union (EU/EEA)</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600 space-y-2"> | |
| <p>• Identity handling and data processing comply with GDPR principles</p> | |
| <p>• Contractor payments follow local tax residency declarations</p> | |
| <p>• Privacy-preserving payment methods don't override reporting obligations</p> | |
| <p>• Personal data is stored and processed in compliance with EU standards</p> | |
| </div> | |
| </div> | |
| <!-- United Kingdom --> | |
| <div class="region-card bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center"> | |
| <i class="fas fa-pound-sign text-primary-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">United Kingdom</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600 space-y-2"> | |
| <p>• UK payroll follows HMRC requirements where applicable</p> | |
| <p>• Contractors treated according to engagement structure</p> | |
| <p>• Crypto payouts are supported but don't alter statutory reporting</p> | |
| <p>• PAYE and NI contributions calculated automatically for employees</p> | |
| </div> | |
| </div> | |
| <!-- Canada --> | |
| <div class="region-card bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center"> | |
| <i class="fas fa-maple-leaf text-primary-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Canada</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600 space-y-2"> | |
| <p>• Canadian worker classification and reporting requirements respected</p> | |
| <p>• Identity and tax reporting depend on residency and engagement type</p> | |
| <p>• Crypto payouts treated as compensation at fair market value</p> | |
| <p>• T4 and other tax forms generated automatically</p> | |
| </div> | |
| </div> | |
| <!-- Latin America --> | |
| <div class="region-card bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center"> | |
| <i class="fas fa-globe-americas text-primary-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Latin America</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600 space-y-2"> | |
| <p>• Contractor payments supported on cross-border basis</p> | |
| <p>• Local tax compliance obligations remain with contractor</p> | |
| <p>• Platform minimizes unnecessary data collection</p> | |
| <p>• Supports local payment methods where required</p> | |
| </div> | |
| </div> | |
| <!-- Asia-Pacific --> | |
| <div class="region-card bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center"> | |
| <i class="fas fa-globe-asia text-primary-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Asia-Pacific</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600 space-y-2"> | |
| <p>• Supports international contractor payments across APAC</p> | |
| <p>• Identity requirements adapt to local regulations</p> | |
| <p>• Privacy-preserving payment options where permitted</p> | |
| <p>• Supports local banking integrations where available</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 bg-primary-50 p-6 rounded-lg border border-primary-100"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-primary-600 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-700"> | |
| Payroll, tax, and reporting requirements vary by jurisdiction. This platform is designed to support compliant payroll workflows, but does not replace professional legal or tax advice. Our compliance team continuously updates regional requirements as regulations evolve. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Privacy & Compliance Section --> | |
| <div id="privacy-compliance" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-600 font-semibold tracking-wide uppercase">Privacy & Compliance</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Privacy Where It Matters. Compliance Where It's Required. | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| NovaPay enables privacy-preserving global payroll without sacrificing legal compliance or auditability. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="md:flex md:items-center"> | |
| <div class="md:flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> | |
| <i class="fas fa-balance-scale text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:ml-6"> | |
| <h3 class="text-lg font-medium text-gray-900">How It Works</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| NovaPay handles payroll accounting and tax reporting in a compliant off-chain system of record. Cryptocurrencies (including stablecoins and privacy coins) are used strictly as payment rails, not as accounting systems. Identity disclosure requirements depend on worker type and jurisdiction, not on the payment method. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 grid gap-10 md:grid-cols-2"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-eye-slash text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Privacy-Preserving Payments</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-600"> | |
| Privacy-focused cryptocurrencies (Monero, Zcash) are offered as an opt-in payout method. They protect on-chain transaction visibility while maintaining lawful employer record-keeping. NovaPay implements selective disclosure mechanisms and maintains audit-ready records internally. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-600">On-chain privacy without compromising compliance</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mt-2"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-600">Worker-optional privacy features</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mt-2"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-600">Full records maintained for authorized parties</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-shield-alt text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Compliance & Trust</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-600"> | |
| NovaPay meets the highest standards for financial compliance and data protection, ensuring your payroll operations are audit-ready and regulator-approved. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-600">SOC 2 Type II certified infrastructure</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mt-2"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-600">Immutable audit trails for all transactions</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mt-2"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-600">Automatic tax form generation (W-2, 1099, etc.)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mt-2"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-600">Enterprise accounting integrations</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Compliance Section --> | |
| <div id="compliance" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-600 font-semibold tracking-wide uppercase">Security</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Enterprise-grade security you can trust | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| NovaPay meets the highest standards for data protection and financial compliance. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> | |
| <div class="relative feature-card bg-gray-50 p-6 rounded-lg shadow transition-all duration-300"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-shield-alt text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">SOC 2 Type II Certified</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| Our systems and processes have been independently audited for security, availability, processing integrity, confidentiality, and privacy. | |
| </p> | |
| </div> | |
| <div class="relative feature-card bg-gray-50 p-6 rounded-lg shadow transition-all duration-300"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-lock text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Bank-Level Encryption</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| All data is encrypted in transit and at rest with AES-256 encryption, the same standard used by financial institutions. | |
| </p> | |
| </div> | |
| <div class="relative feature-card bg-gray-50 p-6 rounded-lg shadow transition-all duration-300"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-history text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Immutable Audit Trails</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| Every action in NovaPay is logged with cryptographic signatures to ensure non-repudiation and auditability. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-10 bg-primary-50 p-6 rounded-lg border border-primary-100"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-primary-600 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-primary-800"> | |
| Compliance Configurability | |
| </h3> | |
| <div class="mt-2 text-sm text-primary-700"> | |
| <p> | |
| NovaPay allows you to configure compliance settings based on your jurisdiction and risk tolerance. Set approval workflows, payment limits, and reporting requirements to match your organization's needs. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integrations Section --> | |
| <div id="integrations" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-600 font-semibold tracking-wide uppercase">Integrations</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Works with your existing stack | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| NovaPay integrates seamlessly with the tools you already use. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-3"> | |
| <div class="col-span-1 flex justify-center py-8 px-8 bg-white rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calculator text-4xl text-blue-600 mr-4"></i> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">QuickBooks</h3> | |
| <p class="mt-1 text-sm text-gray-500">Sync payroll data with your accounting</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-span-1 flex justify-center py-8 px-8 bg-white rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-project-diagram text-4xl text-green-600 mr-4"></i> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">NetSuite</h3> | |
| <p class="mt-1 text-sm text-gray-500">ERP integration for enterprises</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-span-1 flex justify-center py-8 px-8 bg-white rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-database text-4xl text-orange-600 mr-4"></i> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">SAP</h3> | |
| <p class="mt-1 text-sm text-gray-500">Enterprise resource planning</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <p class="text-base text-gray-500"> | |
| Don't see your favorite tool? Our API makes it easy to build custom integrations. | |
| </p> | |
| <div class="mt-5"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700"> | |
| Explore API Docs | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Who It's For Section --> | |
| <div id="customers" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-600 font-semibold tracking-wide uppercase">Who It's For</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Designed for modern organizations | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| NovaPay serves a wide range of organizations with global, distributed teams. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <div class="relative bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-rocket text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Startups & Scaleups</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| Quickly onboard team members anywhere in the world without worrying about compliance headaches. Perfect for fast-growing teams with international talent. | |
| </p> | |
| </div> | |
| <div class="relative bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-globe text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Global Enterprises</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| Manage payroll across multiple countries with a single platform. Our enterprise-grade security and compliance meet the needs of large organizations. | |
| </p> | |
| </div> | |
| <div class="relative bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-code-branch text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">DAOs & Web3 Teams</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| Pay contributors in crypto with full tax reporting. Our platform understands the needs of decentralized organizations and crypto-native teams. | |
| </p> | |
| </div> | |
| <div class="relative bg-gray-50 p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i class="fas fa-user-tie text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Contractors & Freelancers</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| Get paid how you want, when you want. Choose between traditional payment methods or cryptocurrency with automatic tax documentation. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-primary-700 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-200 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Trusted by forward-thinking teams | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Sarah Johnson"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Sarah Johnson</h3> | |
| <p class="text-sm text-gray-500">CFO, TechScale Inc.</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| "NovaPay has transformed how we manage our global team. The ability to pay in both fiat and crypto while maintaining full compliance has been a game-changer for our international hires." | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Michael Chen"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Michael Chen</h3> | |
| <p class="text-sm text-gray-500">Operations Lead, Web3DAO</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500"> | |
| "As a DAO, we needed a payroll solution that understood crypto-native workflows without sacrificing compliance. NovaPay was the only platform that checked all our boxes." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div id="signup" class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary-600 font-semibold tracking-wide uppercase">Ready to get started?</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Modern payroll for modern teams | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Join thousands of companies using NovaPay to streamline their global payroll operations. | |
| </p> | |
| </div> | |
| <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700"> | |
| Get Started | |
| </a> | |
| <a href="#" id="demo" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200"> | |
| Request Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-50"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">NovaPay</h3> | |
| <p class="mt-4 text-sm text-gray-500"> | |
| The global payroll platform for modern teams. Pay employees and contractors anywhere with traditional rails or cryptocurrencies. | |
| </p> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Features</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Pricing</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">API</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Integrations</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Documentation</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Guides</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Support</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Privacy</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Terms</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Compliance</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Security</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-200 pt-8"> | |
| <p class="text-base text-gray-400 text-center"> | |
| © 2023 NovaPay, Inc. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| if (menu.classList.contains('hidden')) { | |
| menu.classList.remove('hidden'); | |
| } else { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Add shadow to navbar on scroll | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 10) { | |
| nav.classList.add('shadow-md'); | |
| } else { | |
| nav.classList.remove('shadow-md'); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alphonse86/novapay" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alphonse86/novapay" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |