<?php

declare(strict_types=1);

require dirname(__DIR__) . '/src/bootstrap.php';

use WlVpn\Core\Env;

$panelUrl = Env::get('PANEL_URL', 'https://app.wl-vpn.com');
$registerUrl = $panelUrl . '/login.php?mode=register';

// 24px grid, 1.5px stroke, Frost line with a single Pulse detail (brand/BRAND.md → Graphics).
$icons = [
    'globe' => ['<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3z"/>', '<circle cx="12" cy="12" r="1.75" fill="#2BF5C8" stroke="none"/>'],
    'tag' => ['<path d="M3 12V4a1 1 0 011-1h8l9 9-9 9-9-9z"/>', '<circle cx="7.5" cy="7.5" r="1.75" fill="#2BF5C8" stroke="none"/>'],
    'terminal' => ['<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3"/>', '<path d="M13 15h4" stroke="#2BF5C8"/>'],
    'card' => ['<rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18"/>', '<path d="M7 14.5h4" stroke="#2BF5C8"/>'],
    'bag' => ['<path d="M5 8h14l-1 12H6L5 8z"/>', '<path d="M9 8V6a3 3 0 016 0v2" stroke="#2BF5C8"/>'],
    'network' => ['<circle cx="5" cy="6" r="2"/><circle cx="5" cy="18" r="2"/><path d="M7 6h4v12H7"/>', '<path d="M11 12h6" stroke="#2BF5C8"/><circle cx="19" cy="12" r="2" fill="#2BF5C8" stroke="none"/>'],
];
function featureIcon(array $icons, string $name): string
{
    [$line, $accent] = $icons[$name];
    return '<svg aria-hidden="true" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="#EEF2F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' . $line . $accent . '</svg>';
}
?>
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Label VPN &amp; VPN Reseller Platform | WL-VPN</title>
<meta name="description" content="Launch your own white label VPN with WireGuard, OpenVPN, a reseller panel and API. Standard one-month accounts cost £2. Custom app design priced separately.">
<link rel="canonical" href="https://wl-vpn.com/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="WL-VPN">
<meta property="og:title" content="White Label VPN &amp; VPN Reseller Platform | WL-VPN">
<meta property="og:description" content="Launch your own white label VPN with WireGuard, OpenVPN, a reseller panel and API. Standard one-month accounts cost £2. Custom app design priced separately.">
<meta property="og:url" content="https://wl-vpn.com/">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "https://wl-vpn.com/#organization",
  "name": "WL-VPN",
  "legalName": "WL-VPN LTD",
  "identifier": "13176476",
  "sameAs": ["https://find-and-update.company-information.service.gov.uk/company/13176476"],
  "url": "https://wl-vpn.com/",
  "logo": "https://wl-vpn.com/brand/logo/wl-vpn-horizontal-on-dark.svg"
}
</script>
<?php require __DIR__ . '/_head.php'; ?>
</head>
<body class="bg-void font-sans text-body text-fog antialiased">

<?php require __DIR__ . '/_nav.php'; ?>

<main id="main-content">
<!-- Hero -->
<section class="relative overflow-hidden border-b border-line pt-32 pb-40 sm:pt-40 sm:pb-44">
  <!-- Signal routes on a 20px grid, kept below the copy; one route lit, travelling left → right -->
  <svg class="pointer-events-none absolute inset-x-0 bottom-0 h-[120px] w-full" viewBox="0 0 1440 120" preserveAspectRatio="xMidYMax slice" fill="none" aria-hidden="true">
    <path d="M0 20 H280 V40 H720 V20 H1440 M0 100 H200 V80 H640 V100 H1440" stroke="#232B38" stroke-width="1.5"/>
    <path d="M0 60 H360 V40 H1000 V60 H1440" stroke="#1E4A42" stroke-width="2"/>
    <path class="wl-route-live" pathLength="100" d="M0 60 H360 V40 H1000 V60 H1440" stroke="#2BF5C8" stroke-width="2.5" stroke-linecap="round"/>
    <circle cx="360" cy="60" r="5" fill="#2BF5C8"/>
    <circle cx="1000" cy="40" r="5" fill="#05070A" stroke="#2BF5C8" stroke-width="1.5"/>
  </svg>

  <div class="relative mx-auto grid max-w-6xl items-center gap-14 px-4 sm:px-6 lg:grid-cols-[1.15fr_1fr]">
    <div class="wl-in">
      <p class="wl-label wl-label-slash">White-label VPN platform</p>
      <h1 class="mt-6 text-[44px] font-semibold leading-none tracking-[-0.05em] text-frost sm:text-display">
        White label VPN.<br>Your brand. Your business.
      </h1>
      <p class="mt-6 max-w-xl text-lg leading-relaxed">
        Launch a VPN service using our WireGuard and OpenVPN network, reseller panel and API.
        You set your prices and support your customers. Start with our example apps or commission custom app design for an additional charge.
      </p>
      <a class="m-protocol-hero" href="#protocols">WireGuard + OpenVPN. Both ready for your brand. <span aria-hidden="true">→</span></a>
      <div class="mt-10 flex flex-wrap items-center gap-3">
        <a href="<?= e($registerUrl) ?>" class="inline-flex h-[46px] items-center rounded-md bg-pulse px-6 font-medium text-void transition duration-150 hover:bg-pulse-hover">Start reselling</a>
        <a href="/pricing/" class="inline-flex h-[46px] items-center rounded-md border border-line bg-obsidian px-6 font-medium text-frost transition duration-150 hover:border-fog">View pricing</a>
      </div>
      <p class="mt-10 font-mono text-xs uppercase tracking-[0.12em] text-fog">Reseller panel · Credit billing · Storefront · REST API</p>
    </div>

    <!-- Product proof: provisioning a user is one API call -->
    <div class="wl-in rounded-lg border border-line bg-obsidian" style="transition-delay:150ms">
      <div class="flex items-center justify-between border-b border-line px-5 py-3">
        <span class="wl-label">API · create user</span>
        <span class="font-mono text-xs text-fog">v1</span>
      </div>
      <pre class="overflow-x-auto px-5 py-5 font-mono text-[13px] leading-relaxed text-frost"><span class="text-pulse">POST</span> /v1/users/create
<span class="text-fog">plan</span>=1_month
<span class="text-fog">label</span>=acme-vpn
<span class="text-fog">email</span>=customer@example.com</pre>
      <div class="border-t border-line px-5 py-5 font-mono text-[13px] leading-relaxed">
        <p class="text-fog">200 OK</p>
        <p class="mt-2 text-frost">username&nbsp;&nbsp;<span class="text-fog">generated</span></p>
        <p class="text-frost">password&nbsp;&nbsp;<span class="text-fog">generated</span></p>
        <p class="text-frost">expiry&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-fog">+1 month</span></p>
      </div>
      <div class="flex items-center gap-4 border-t border-line px-5 py-4">
        <img src="/brand/animations/wl-vpn-connected.svg" alt="" width="72" height="64" class="h-9 w-auto">
        <div>
          <p class="text-sm font-medium text-frost">Ready to connect</p>
          <p class="text-xs text-fog">Use VPN account credentials in your supported client.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="m-home-links m-home-offer" aria-labelledby="offer-title">
  <h2 id="offer-title">What is a white label VPN?</h2>
  <p>A white label VPN lets you sell a VPN service under your own business identity using a provider’s infrastructure. With WL-VPN, you manage your customers and retail offer while we supply the VPN network and the tools to create and renew accounts.</p>
  <div class="m-grid">
    <article class="m-card"><h3>The platform</h3><p>Manage accounts and credits in the reseller panel. Use the API for your own website, or configure a storefront when enabled for your account.</p><a href="/vpn-reseller/">See how the reseller programme works →</a></article>
    <article class="m-card"><h3>Your branded app</h3><p>Standard Android and Windows downloads are available in the panel. Custom app design is a separate paid service, with platforms, scope and delivery agreed before work starts.</p><a href="/white-label-vpn-apps/">Compare app and branding options →</a></article>
    <article class="m-card"><h3>Your customer relationship</h3><p>You manage marketing, retail prices, customer terms and first-line support. WL-VPN provides platform support through the reseller support system.</p><a href="/guides/start-a-vpn-business/">Plan your VPN business launch →</a></article>
  </div>
</section>

<!-- Protocols: supported across the network and example apps. -->
<section id="protocols" class="m-protocols" aria-labelledby="protocols-title">
  <div class="m-protocols-inner">
    <div class="m-protocols-copy">
      <p class="wl-label wl-label-slash">Two protocols. Your VPN service.</p>
      <h2 id="protocols-title"><span>WireGuard.</span><br>Built for speed.</h2>
      <p class="m-protocols-lead">Give your customers WireGuard performance and OpenVPN choice. Our VPN servers and example apps support both.</p>
      <p>WireGuard’s lightweight design can deliver faster speeds than OpenVPN. Actual speeds depend on the device, connection, server load and configuration.</p>
      <a class="m-protocols-link" href="/white-label-vpn-apps/#protocols">Explore apps and protocol support <span aria-hidden="true">→</span></a>
    </div>
    <div class="m-protocols-panel">
      <p class="wl-label">Available across our servers &amp; example apps</p>
      <div class="m-protocol-row"><span class="m-protocol-index" aria-hidden="true">01</span><div><h3>WireGuard</h3><p>A modern, lightweight protocol designed for high performance.</p></div></div>
      <div class="m-protocol-row"><span class="m-protocol-index" aria-hidden="true">02</span><div><h3>OpenVPN</h3><p>An established protocol, available alongside WireGuard.</p></div></div>
      <div class="m-protocol-build"><h3>Your brand. Your app. We handle the design.</h3><p>Want a custom VPN app without building it yourself? We offer custom app design for an additional charge, supporting both WireGuard and OpenVPN.</p><a class="m-protocols-link" href="/white-label-vpn-apps/#custom-design">Explore custom app design <span aria-hidden="true">→</span></a></div>
    </div>
  </div>
</section>

<!-- Features -->
<section id="features" class="mx-auto max-w-6xl px-4 py-24 sm:px-6">
  <div class="wl-in max-w-2xl">
    <p class="wl-label wl-label-slash">Platform</p>
    <h2 class="mt-4 text-[32px] font-semibold leading-tight tracking-[-0.04em] text-frost sm:text-h1">Tools to run your VPN service.</h2>
    <p class="mt-4">Manage subscriptions, credit billing and account provisioning from one platform.</p>
  </div>
  <div class="mt-14 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    <?php
    $features = [
        ['globe', 'Global server fleet', 'Use the WL-VPN server network without maintaining your own VPN infrastructure.'],
        ['tag', 'Custom app design', 'Have us design your branded VPN app for an additional charge, with WireGuard and OpenVPN support. Or start with our example apps.'],
        ['terminal', 'Account provisioning', 'Create VPN accounts in the panel or through the API, then manage renewals from the same platform.'],
        ['card', 'Credit-based billing', 'Top up credits with Stripe and spend them on plans from 24-hour trials to 36 months.'],
        ['bag', 'Built-in storefront', 'Open your own shop page. Customers pay by card and their accounts are created automatically.'],
        ['network', 'Sub-reseller network', 'Grow a team. Sub-resellers get their own logins, balances and customers.'],
    ];
    foreach ($features as $i => [$icon, $title, $body]): ?>
    <div class="wl-in rounded-lg border border-line bg-obsidian p-6 transition-colors duration-300 hover:border-fog/50" style="transition-delay:<?= ($i % 3) * 80 ?>ms">
      <div class="flex h-11 w-11 items-center justify-center rounded-md border border-line bg-graphite"><?= featureIcon($icons, $icon) ?></div>
      <h3 class="mt-5 text-lg font-medium tracking-[-0.02em] text-frost"><?= e($title) ?></h3>
      <p class="mt-2 text-[15px] leading-relaxed"><?= e($body) ?></p>
    </div>
    <?php endforeach; ?>
  </div>
</section>

<!-- Product evidence: real reseller dashboard, synthetic account data. -->
<section id="reseller-panel" class="m-panel-preview" aria-labelledby="panel-preview-title">
  <div class="m-panel-preview-inner">
    <p class="wl-label wl-label-slash">Inside your reseller panel</p>
    <h2 id="panel-preview-title">Your VPN business at a glance.</h2>
    <p class="m-panel-intro">See who’s online, which accounts expire next and how many credits you have available. Manage the customer journey from the first account to the next renewal.</p>
    <figure class="m-dashboard-figure">
      <a href="/assets/reseller-dashboard-demo.png" aria-label="View the demo reseller dashboard at full size"><img src="/assets/reseller-dashboard-demo.png" width="1280" height="720" loading="lazy" decoding="async" alt="WL-VPN reseller dashboard showing user counts, credit balance, customer growth and upcoming expiries using demo data"></a>
      <figcaption>Actual reseller dashboard with illustrative demo data. Names, balances, user counts and the growth chart are examples, not real customer results. Select the image to view it at full size.</figcaption>
    </figure>
    <div class="m-grid m-panel-benefits">
      <article><h3>Keep an overview</h3><p>Check online users, your credit balance and customer growth from the dashboard.</p></article>
      <article><h3>Stay on top of renewals</h3><p>Find expiring accounts, review the credit cost and extend subscriptions while preserving unused time.</p></article>
      <article><h3>Manage customers after the sale</h3><p>Look up shop customers, their order history and associated VPN accounts from the same panel.</p></article>
    </div>
    <a class="m-protocols-link" href="/guides/reseller-panel-walkthrough/">Take the panel walkthrough <span aria-hidden="true">→</span></a>
  </div>
</section>

<!-- How it works -->
<section id="how" class="border-y border-line bg-obsidian py-24">
  <div class="mx-auto max-w-6xl px-4 sm:px-6">
    <div class="wl-in max-w-2xl">
      <p class="wl-label wl-label-slash">How it works</p>
      <h2 class="mt-4 text-[32px] font-semibold leading-tight tracking-[-0.04em] text-frost sm:text-h1">How to launch your VPN service.</h2>
    </div>
    <div class="relative mt-14">
      <!-- Route connecting the steps, drawn left → right when it scrolls into view -->
      <svg class="absolute left-0 top-[22px] hidden h-2 w-full md:block" viewBox="0 0 1000 8" preserveAspectRatio="none" fill="none" aria-hidden="true">
        <path d="M20 4 H980" stroke="#232B38" stroke-width="1.5" vector-effect="non-scaling-stroke"/>
        <path class="wl-draw-on-view" pathLength="100" d="M20 4 H980" stroke="#2BF5C8" stroke-width="1.5" vector-effect="non-scaling-stroke"/>
      </svg>
      <ol class="relative grid gap-10 md:grid-cols-3 md:gap-8">
        <?php
        $steps = [
            ['01', 'Create your account', 'Sign up for the reseller panel and top up your first credits.'],
            ['02', 'Create VPN users', 'Use the panel, your shop page or the API. Pick a plan and get credentials.'],
            ['03', 'Test, then start selling', 'Test your chosen apps, payments and renewal process. Set your retail prices and prepare customer support before launch.'],
        ];
        foreach ($steps as $i => [$n, $title, $body]): ?>
        <li class="wl-in" style="transition-delay:<?= $i * 200 ?>ms">
          <span class="relative flex h-11 w-11 items-center justify-center rounded-md border border-line bg-void font-mono text-sm text-pulse"><?= $n ?></span>
          <h3 class="mt-6 text-lg font-medium tracking-[-0.02em] text-frost"><?= e($title) ?></h3>
          <p class="mt-2 max-w-xs text-[15px] leading-relaxed"><?= e($body) ?></p>
        </li>
        <?php endforeach; ?>
      </ol>
    </div>
  </div>
</section>

<!-- Pricing -->
<section id="pricing" class="mx-auto max-w-6xl px-4 py-24 sm:px-6">
  <div class="grid gap-10 rounded-lg border border-line bg-obsidian p-8 sm:p-12 lg:grid-cols-[1.4fr_1fr] lg:items-center">
    <div class="wl-in">
      <p class="wl-label wl-label-slash">Pricing</p>
      <h2 class="mt-4 text-[32px] font-semibold leading-tight tracking-[-0.04em] text-frost sm:text-h1">Simple credit pricing.</h2>
      <p class="mt-4 max-w-xl">
        Standard credits cost £0.50 each: a one-month VPN account uses 4 credits (£2).
        Discounted credit pricing is available for larger customer numbers.
        <a href="/pricing/" class="text-pulse underline">See all plan costs and calculate your margin</a>.
      </p>
      <div class="m-trial-note"><h3>Offer customers a 24-hour trial.</h3><p>Trial accounts use no credits, but your reseller account must have a positive credit balance to create them. Top up first, then create a trial in the panel so customers can test the service.</p></div>
    </div>
    <div class="wl-in flex flex-col gap-3 lg:items-end" style="transition-delay:150ms">
      <a href="<?= e($registerUrl) ?>" class="inline-flex h-[46px] items-center justify-center rounded-md bg-pulse px-6 font-medium text-void transition duration-150 hover:bg-pulse-hover">Create your reseller account</a>
      <p class="font-mono text-xs uppercase tracking-[0.12em] text-fog">Plans from 24 hours to 36 months</p>
    </div>
  </div>
</section>
<section class="m-home-links" aria-labelledby="owners-title">
  <h2 id="owners-title">From resellers to owners.</h2>
  <div class="m-card">
    <p>Before we owned WL-VPN, we were customers of its reseller programme. As two friends building our own reseller businesses, we saw the potential first-hand. We also felt the limits: a narrow feature set, legacy technology, basic apps and no WireGuard support. We wanted more from the platform we relied on.</p>
    <p>That experience is why we chose to acquire WL-VPN. We knew the service, understood the day-to-day work of reselling and saw an opportunity to build the platform we had wanted to use ourselves.</p>
    <h3>Rebuilt around performance.</h3>
    <p>Since taking over, we have rebuilt the system from the ground up, with connection speed as a central engineering priority. WireGuard support, modern apps and better reseller tools are part of that work. Our ambition is straightforward: fast connections backed by solid, resilient infrastructure that resellers can feel proud to put their name to.</p>
    <h3>More insight. Better customer service.</h3>
    <p>As resellers, we lacked the analytics we needed to understand how customers were using the service. Today, visibility into account activity and upcoming renewals helps resellers spot customers who may need help, investigate problems and make more informed follow-up decisions. Those signals help you decide where a personal check-in or extra support could make a difference.</p>
    <p>We want resellers to build their businesses with confidence in the service behind their brand. Our own experience continues to shape what we improve next.</p>
    <a href="/guides/reseller-panel-walkthrough/">Explore the reseller platform →</a>
  </div>
</section>
<section class="m-home-links m-home-faq" aria-labelledby="questions-title">
  <h2 id="questions-title">Before you launch your white label VPN.</h2>
  <details><summary>How much does it cost?</summary><p>Standard credits cost £0.50 each. A one-month VPN account uses 4 credits (£2). You choose your retail price; payment processing, marketing and other business expenses affect your final profit. Custom app design is priced separately. <a href="/pricing/">Compare subscription costs and resale examples</a>.</p></details>
  <details><summary>Do I need servers or a developer?</summary><p>You do not need to run VPN servers. Create and renew accounts through the reseller panel, or have your developer connect your own software to the <a href="/vpn-reseller-api/">VPN reseller API</a>. Custom app development and integrations need their own agreed scope.</p></details>
  <details><summary>Which apps can my customers use?</summary><p>The panel provides standard Android and Windows downloads. Our example apps support WireGuard and OpenVPN. For branded apps, agree the supported platforms, design, distribution and additional cost before launch. Contact us to confirm iOS and other platform availability. <a href="/white-label-vpn-apps/">Review the app options</a>.</p></details>
  <details><summary>Can customers try the service first?</summary><p>You can create 24-hour trial accounts without spending credits, provided your reseller account has a positive credit balance. Top up first, then test the apps and connections your customers will use. <a href="/guides/reseller-panel-walkthrough/">See the panel walkthrough</a>.</p></details>
  <details><summary>Who supports my customers?</summary><p>You handle first-line customer support, payments, refunds and your customer-facing terms. WL-VPN provides the underlying platform and reseller support. <a href="/vpn-reseller/">See who handles each part of the service</a>.</p></details>
</section>
<section class="m-home-links" aria-labelledby="explore-title">
  <h2 id="explore-title">Plan your VPN business.</h2>
  <div class="m-grid">
    <article class="m-card"><h3>How reselling works</h3><p>Understand the platform, your role and how to manage your customers.</p><a href="/vpn-reseller/">Explore the reseller programme →</a></article>
    <article class="m-card"><h3>Build a launch plan</h3><p>Work through business models, panel setup, payments and customer support.</p><a href="/guides/">Explore the reseller guides →</a></article>
    <article class="m-card"><h3>Automate account creation</h3><p>Connect your own website or billing process to the reseller API.</p><a href="/vpn-reseller-api/">See the API workflow →</a></article>
  </div>
</section>
</main>

<?php require __DIR__ . '/_footer.php'; ?>

<script>
// Reveal content once as it scrolls into view (CSS keeps it visible under reduced motion).
(() => {
  const els = document.querySelectorAll('.wl-in, .wl-draw-on-view');
  if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('is-in')); return; }
  const io = new IntersectionObserver(entries => entries.forEach(entry => {
    if (entry.isIntersecting) { entry.target.classList.add('is-in'); io.unobserve(entry.target); }
  }), { rootMargin: '0px 0px -10% 0px' });
  els.forEach(el => io.observe(el));
})();
</script>
</body>
</html>
