<!DOCTYPE html><html lang="en" data-sso-state="anonymous" data-zevid-api="https://auth.zevop.com" data-dashboard-url="https://console.zevcloud.net" data-dashboard-probe="https://api.zevcloud.net/v1/auth/me" data-dashboard-cookie="zev_dashboard" data-continue-url="https://console.zevcloud.net"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/png" href="https://cdn.zevop.com/zevop/zev-icon-dark.png"><meta name="generator" content="Astro v5.18.1"><!-- Dark-mode init — runs synchronously before first paint to
         prevent the light-flash you'd otherwise see on a dark-mode
         user's first navigation. Reads the stored preference from
         localStorage (`light` | `dark` | `system`) and falls back
         to the OS preference. The matching toggle component listens
         for `prefers-color-scheme` changes when in `system` mode. --><script>
      (function () {
        try {
          var stored = localStorage.getItem('zev-theme');
          var pref = stored === 'light' || stored === 'dark' ? stored : 'system';
          var isDark =
            pref === 'dark' ||
            (pref === 'system' &&
              window.matchMedia('(prefers-color-scheme: dark)').matches);
          var root = document.documentElement;
          root.classList.toggle('dark', isDark);
          root.style.colorScheme = isDark ? 'dark' : 'light';
          // Cache the resolved preference on the element so the
          // toggle component can read it without re-doing the work.
          root.dataset.themePref = pref;
        } catch (_) {
          /* localStorage may be blocked (incognito Safari, etc.) —
             we fall back to the OS preference via the @custom-variant
             default above, which still works without JS. */
        }
      })();
    </script><!-- Critical inline CSS. `is:inline` keeps Astro from bundling
         this into the external sheet, so it applies before the
         Tailwind bundle arrives. On slow mobile connections this
         stops the page from painting with all three SSO state
         blocks visible at once or with the desktop nav rendering
         inline on a phone. The external sheet layers on top once
         it loads. --><style>
      [data-sso-state] [data-sso-show] { display: none !important; }
      [data-sso-state="anonymous"] [data-sso-show="anonymous"],
      [data-sso-state="zevid-only"] [data-sso-show="zevid-only"],
      [data-sso-state="dashboard"] [data-sso-show="dashboard"] { display: revert-layer !important; }
      @media (max-width: 767.98px) {
        [data-mobile-hide] { display: none !important; }
      }
    </style><title>ZevCloud | Deploy without borders. Build. Own. Scale.</title><meta name="description" content="Apps, databases, WordPress, static sites, storage, and domains on one platform. Pay per deployment, never per teammate. Billed in Naira or USD."><link rel="canonical" href="https://zevcloud.net/"><meta name="keywords" content="deploy without borders, no per-seat cloud, pay per deployment, ZevCloud, cloud platform Africa, Nigerian cloud hosting, .ng domains, NiRA accredited registrar, ZevPay, Naira billing, managed Postgres, WordPress hosting"><meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"><!-- Theme + brand --><meta name="theme-color" content="#005782" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#09090b" media="(prefers-color-scheme: dark)"><meta name="application-name" content="ZevCloud"><meta name="apple-mobile-web-app-title" content="ZevCloud"><link rel="apple-touch-icon" href="https://cdn.zevop.com/zevop/zev-icon-dark.png"><meta name="format-detection" content="telephone=no"><!-- OpenGraph --><meta property="og:type" content="website"><meta property="og:title" content="ZevCloud | Deploy without borders. Build. Own. Scale."><meta property="og:description" content="Apps, databases, WordPress, static sites, storage, and domains on one platform. Pay per deployment, never per teammate. Billed in Naira or USD."><meta property="og:url" content="https://zevcloud.net/"><meta property="og:image" content="https://zevcloud.net/assets/og-image.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt" content="ZevCloud. Apps, databases, WordPress, static sites, storage, and domains on one platform. Pay per deployment, never per teammate. Billed in Naira or USD."><meta property="og:site_name" content="ZevCloud"><meta property="og:locale" content="en_NG"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="ZevCloud | Deploy without borders. Build. Own. Scale."><meta name="twitter:description" content="Apps, databases, WordPress, static sites, storage, and domains on one platform. Pay per deployment, never per teammate. Billed in Naira or USD."><meta name="twitter:image" content="https://zevcloud.net/assets/og-image.png"><meta name="twitter:image:alt" content="ZevCloud. Apps, databases, WordPress, static sites, storage, and domains on one platform. Pay per deployment, never per teammate. Billed in Naira or USD."><meta name="twitter:site" content="@zevcloud"><!-- Sitemap pointer (search-engine convention; sitemap-index lives
         at the apex via @astrojs/sitemap). --><link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap-index.xml"><!-- Structured data (JSON-LD). One <script> per schema entry so
         each can be parsed independently by crawlers. --><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"ZevCloud","url":"https://zevcloud.net","logo":"https://cdn.zevop.com/zevop/zev-icon-dark.png","description":"Deploy without borders. Build. Own. Scale.","sameAs":["https://x.com/zevcloud","https://github.com/zevop"],"parentOrganization":{"@type":"Organization","name":"ZevOP Technologies","url":"https://zevop.com"},"contactPoint":{"@type":"ContactPoint","contactType":"customer support","email":"support@zevcloud.net","areaServed":["NG","Africa","Worldwide"],"availableLanguage":["en"]}}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"ZevCloud","url":"https://zevcloud.net","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://console.zevcloud.net/domains?q={search_term_string}"},"query-input":"required name=search_term_string"}}</script><!-- Inter via Google Fonts. Variable axis covers all weights so
         we don't pay for multiple files. --><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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><!-- Live chat widget (Zev Workspace). Deferred so it doesn't
         block first paint; the loader injects the actual chat UI
         after the page is interactive. --><script src="https://widget.zevworkspace.com/v1/loader.js" data-zev-key="pk_live_zevcloud_pRvNMeja4C_fc9-n-0Nc" defer></script><link rel="stylesheet" href="/_astro/apps.Csxodtjy.css"></head> <body class="min-h-screen flex flex-col bg-white text-ink-900 dark:bg-ink-950 dark:text-ink-100"> <header class="sticky top-0 z-40 border-b border-ink-200/70 dark:border-ink-800/70 bg-white/85 dark:bg-ink-950/85 backdrop-blur-md"> <div class="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-5 sm:px-8"> <a href="/" class="inline-flex items-center gap-2 font-semibold tracking-tight text-ink-900 dark:text-ink-50 " style="font-size:14.399999999999999px"> <span class="relative inline-block rounded-md" style="width:24px;height:24px"> <img src="https://cdn.zevop.com/zevop/zev-icon-dark.png" alt="ZevCloud" width="24" height="24" class="absolute inset-0 rounded-md dark:hidden"> <img src="https://cdn.zevop.com/zevop/zev-icon-light.png" alt="" aria-hidden="true" width="24" height="24" class="absolute inset-0 rounded-md hidden dark:block"> </span> <span>ZevCloud</span> </a> <!-- Desktop nav. Products opens the mega menu below; everything
         else is a flat link. `data-mobile-hide` lets the critical
         inline CSS in Layout.astro hide this on mobile even before
         the external Tailwind bundle finishes downloading, which
         prevents a FOUC where the desktop nav renders inline on a
         phone. --> <nav data-mobile-hide class="hidden md:flex items-center gap-1 text-[14px]"> <!-- Products mega menu — pure-CSS hover dropdown. The wrapping
           `group/products` is the hover surface; the panel is its
           absolutely-positioned child. We use a transparent `pt-2`
           buffer above the visible panel so the cursor never leaves
           the hover zone while transitioning from trigger to panel
           (closing the menu unintentionally was the old failure mode).
           Keyboard users get the same surface via `focus-within`.
           No JS needed — `<details>` was unreliable here. --> <div class="group/products relative"> <button type="button" aria-haspopup="true" class="cursor-pointer flex items-center gap-1 px-3 h-9 rounded-md text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100 hover:bg-ink-100/70 dark:hover:bg-ink-800/70 select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500">
Products
<svg width="12" height="12" viewBox="0 0 12 12" class="opacity-60 transition-transform group-hover/products:rotate-180 group-focus-within/products:rotate-180"> <path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> <!-- Hover-buffered panel container. The outer `pt-2` IS the
             visible 8px gap, but it's part of the hit-test box so
             the cursor can travel from trigger to panel without the
             menu collapsing. Visibility transitions via opacity +
             translate so it feels like a soft drop, not a snap. --> <div class="invisible opacity-0 translate-y-1 group-hover/products:visible group-hover/products:opacity-100 group-hover/products:translate-y-0 group-focus-within/products:visible group-focus-within/products:opacity-100 group-focus-within/products:translate-y-0 transition-[opacity,transform] duration-150 ease-out absolute left-1/2 -translate-x-1/2 top-full pt-2 z-50"> <div class="w-[760px] rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 shadow-xl dark:shadow-black/40 p-5 grid grid-cols-3 gap-5" role="menu"> <div class="col-span-2"> <p class="px-2 mb-2 text-[11px] uppercase tracking-wider text-ink-500 dark:text-ink-400 font-semibold">
Products
</p> <div class="grid grid-cols-2 gap-1"> <a href="/products/apps" class="flex items-start gap-3 rounded-lg p-3 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="mt-0.5 h-9 w-9 rounded-md bg-teal-50 dark:bg-teal-500/10 text-teal-700 dark:text-teal-300 flex items-center justify-center ring-1 ring-teal-500/20 dark:ring-teal-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M4 4h16v6H4zM4 14h16v6H4zM7 7h.01M7 17h.01" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[13px] font-semibold text-ink-900 dark:text-ink-100">Apps</span> <span class="block text-[12px] text-ink-500 dark:text-ink-400 mt-0.5 leading-snug">Deploy apps from GitHub</span> </span> </a><a href="/products/databases" class="flex items-start gap-3 rounded-lg p-3 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="mt-0.5 h-9 w-9 rounded-md bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 flex items-center justify-center ring-1 ring-indigo-500/20 dark:ring-indigo-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M4 7c0-1.66 3.58-3 8-3s8 1.34 8 3-3.58 3-8 3-8-1.34-8-3zM4 7v10c0 1.66 3.58 3 8 3s8-1.34 8-3V7M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[13px] font-semibold text-ink-900 dark:text-ink-100">Databases</span> <span class="block text-[12px] text-ink-500 dark:text-ink-400 mt-0.5 leading-snug">Managed Postgres, MySQL &amp; Redis</span> </span> </a><a href="/products/wordpress" class="flex items-start gap-3 rounded-lg p-3 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="mt-0.5 h-9 w-9 rounded-md bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300 flex items-center justify-center ring-1 ring-amber-500/20 dark:ring-amber-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M3.42 12c0-1.243.267-2.422.745-3.487L8.2 19.81C5.354 18.428 3.42 15.448 3.42 12zm14.318-.43c0 .766-.294 1.66-.679 2.92l-.886 2.957-3.213-9.555s.535-.04 1.016-.094c.48-.054.43-.764-.05-.737 0 0-1.448.117-2.382.117-.873 0-2.348-.117-2.348-.117-.481-.03-.534.71-.054.737 0 0 .456.054.892.094l1.293 3.546-1.815 5.45-3.022-9.001s.535-.027 1.013-.054c.481-.054.43-.764-.054-.737 0 0-1.444.117-2.382.117-.165 0-.367-.005-.582-.012C7.082 4.18 9.394 3 12 3c1.948 0 3.722.741 5.06 1.961-.034 0-.061-.005-.094-.005-.873 0-1.498.764-1.498 1.587 0 .737.428 1.36.879 2.097.34.595.733 1.36.733 2.46zM12 20.594c-.726 0-1.43-.108-2.094-.302l2.224-6.467 2.282 6.255c.014.039.034.077.051.111-.787.281-1.616.403-2.463.403zm8.532-3.054c.737-1.337 1.155-2.879 1.155-4.54 0-1.554-.366-3.022-1.011-4.323.004.037.005.075.005.116 0 1.069-.402 2.275-1.012 3.892l-2.45 7.045c2.39-1.395 4.085-3.953 4.085-7.13zM12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0zm0 23.4C5.715 23.4.6 18.285.6 12S5.715.6 12 .6 23.4 5.715 23.4 12 18.285 23.4 12 23.4z" stroke="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[13px] font-semibold text-ink-900 dark:text-ink-100">WordPress</span> <span class="block text-[12px] text-ink-500 dark:text-ink-400 mt-0.5 leading-snug">Managed WordPress hosting</span> </span> </a><a href="/products/sites" class="flex items-start gap-3 rounded-lg p-3 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="mt-0.5 h-9 w-9 rounded-md bg-violet-50 dark:bg-violet-500/10 text-violet-700 dark:text-violet-300 flex items-center justify-center ring-1 ring-violet-500/20 dark:ring-violet-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M3 7l9-4 9 4-9 4-9-4zM3 12l9 4 9-4M3 17l9 4 9-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[13px] font-semibold text-ink-900 dark:text-ink-100">Sites</span> <span class="block text-[12px] text-ink-500 dark:text-ink-400 mt-0.5 leading-snug">Static &amp; file hosting</span> </span> </a><a href="/products/storage" class="flex items-start gap-3 rounded-lg p-3 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="mt-0.5 h-9 w-9 rounded-md bg-sky-50 dark:bg-sky-500/10 text-sky-700 dark:text-sky-300 flex items-center justify-center ring-1 ring-sky-500/20 dark:ring-sky-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M21 8H3v13h18V8zM1 3h22v5H1V3zM10 12h4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[13px] font-semibold text-ink-900 dark:text-ink-100">Storage</span> <span class="block text-[12px] text-ink-500 dark:text-ink-400 mt-0.5 leading-snug">S3-compatible object storage</span> </span> </a><a href="/products/domains" class="flex items-start gap-3 rounded-lg p-3 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="mt-0.5 h-9 w-9 rounded-md bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 flex items-center justify-center ring-1 ring-emerald-500/20 dark:ring-emerald-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[13px] font-semibold text-ink-900 dark:text-ink-100">Domains</span> <span class="block text-[12px] text-ink-500 dark:text-ink-400 mt-0.5 leading-snug">Domain registration &amp; DNS</span> </span> </a> </div> </div> <div class="border-l border-ink-200 dark:border-ink-800 pl-5"> <p class="px-2 mb-2 text-[11px] uppercase tracking-wider text-ink-500 dark:text-ink-400 font-semibold">
Resources
</p> <div class="space-y-0.5"> <a href="/pricing" class="block rounded-md px-3 py-2 text-[13px] text-ink-700 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-800/50 hover:text-ink-900 dark:hover:text-ink-100"> <span class="font-medium block">Pricing</span> <span class="text-[11px] text-ink-500 dark:text-ink-400">Plans + free tiers</span> </a> <a href="https://docs.zevcloud.net" class="block rounded-md px-3 py-2 text-[13px] text-ink-700 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-800/50 hover:text-ink-900 dark:hover:text-ink-100" rel="noopener"> <span class="font-medium block">Documentation</span> <span class="text-[11px] text-ink-500 dark:text-ink-400">Guides + API reference</span> </a> <a href="https://blog.zevcloud.net" class="block rounded-md px-3 py-2 text-[13px] text-ink-700 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-800/50 hover:text-ink-900 dark:hover:text-ink-100" rel="noopener"> <span class="font-medium block">Blog</span> <span class="text-[11px] text-ink-500 dark:text-ink-400">Product news + tutorials</span> </a> <a href="https://status.zevop.com" class="block rounded-md px-3 py-2 text-[13px] text-ink-700 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-800/50 hover:text-ink-900 dark:hover:text-ink-100" target="_blank" rel="noopener"> <span class="font-medium block">System status</span> <span class="text-[11px] text-ink-500 dark:text-ink-400">Uptime + incidents</span> </a> </div> <a href="/products/storage" class="mt-4 block rounded-lg bg-gradient-to-br from-brand-50 to-brand-100/40 dark:from-brand-500/10 dark:to-brand-500/5 ring-1 ring-brand-500/20 dark:ring-brand-400/30 p-3"> <span class="inline-flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-brand-700 dark:text-brand-300 mb-1.5"> <span class="h-1.5 w-1.5 rounded-full bg-brand-500 animate-pulse"></span>
New
</span> <p class="text-[13px] font-semibold text-ink-900 dark:text-ink-100">ZevCloud Storage is live.</p> <p class="text-[11px] text-ink-600 dark:text-ink-400 mt-0.5 leading-snug">
S3-compatible buckets. Egress included on every plan.
</p> </a> </div> </div> </div> </div> <a href="/pricing" class="px-3 h-9 inline-flex items-center rounded-md text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100 hover:bg-ink-100/70 dark:hover:bg-ink-800/70">Pricing</a> <a href="https://docs.zevcloud.net" class="px-3 h-9 inline-flex items-center rounded-md text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100 hover:bg-ink-100/70 dark:hover:bg-ink-800/70" rel="noopener">Docs</a> <a href="https://status.zevop.com" class="px-3 h-9 inline-flex items-center rounded-md text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100 hover:bg-ink-100/70 dark:hover:bg-ink-800/70" target="_blank" rel="noopener">Status</a> </nav> <!-- Auth slot. Three pre-rendered trees toggled by zevid-sso.ts.
         Visibility is driven by `data-sso-show` + the CSS rules in
         global.css, so the static HTML works with JS off (anonymous
         default wins). --> <div class="flex items-center gap-2 text-[14px]"> <div class="inline-flex items-center rounded-full border border-ink-200 dark:border-ink-800 bg-ink-50 dark:bg-ink-900 p-0.5 hidden md:inline-flex" role="group" aria-label="Theme" data-theme-toggle data-mobile-hide data-astro-cid-x3pjskd3> <button type="button" data-theme-set="light" aria-label="Light theme" title="Light" class="theme-btn h-7 w-7 rounded-full inline-flex items-center justify-center text-ink-500 hover:text-ink-900 dark:hover:text-ink-100 transition-colors" data-astro-cid-x3pjskd3> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-x3pjskd3> <circle cx="12" cy="12" r="4" data-astro-cid-x3pjskd3></circle> <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" data-astro-cid-x3pjskd3></path> </svg> </button> <button type="button" data-theme-set="system" aria-label="System theme" title="System" class="theme-btn h-7 w-7 rounded-full inline-flex items-center justify-center text-ink-500 hover:text-ink-900 dark:hover:text-ink-100 transition-colors" data-astro-cid-x3pjskd3> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-x3pjskd3> <rect x="3" y="4" width="18" height="13" rx="2" data-astro-cid-x3pjskd3></rect> <path d="M8 21h8M12 17v4" data-astro-cid-x3pjskd3></path> </svg> </button> <button type="button" data-theme-set="dark" aria-label="Dark theme" title="Dark" class="theme-btn h-7 w-7 rounded-full inline-flex items-center justify-center text-ink-500 hover:text-ink-900 dark:hover:text-ink-100 transition-colors" data-astro-cid-x3pjskd3> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-x3pjskd3> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" data-astro-cid-x3pjskd3></path> </svg> </button> </div>  <script type="module">const o="zev-theme",a=document.documentElement,l=()=>{const e=localStorage.getItem(o);return e==="light"||e==="dark"?e:"system"},r=e=>{const s=e==="dark"||e==="system"&&window.matchMedia("(prefers-color-scheme: dark)").matches;a.classList.toggle("dark",s),a.style.colorScheme=s?"dark":"light",a.dataset.themePref=e,document.querySelectorAll("[data-theme-toggle]").forEach(t=>{t.querySelectorAll("[data-theme-set]").forEach(c=>{c.dataset.active=c.dataset.themeSet===e?"true":"false"})})};r(l());document.addEventListener("click",e=>{const s=e.target.closest("[data-theme-set]");if(!s)return;const t=s.dataset.themeSet;t!=="light"&&t!=="dark"&&t!=="system"||(t==="system"?localStorage.removeItem(o):localStorage.setItem(o,t),r(t))});const m=window.matchMedia("(prefers-color-scheme: dark)");m.addEventListener("change",()=>{l()==="system"&&r("system")});</script> <!-- ANONYMOUS — both buttons land on the dashboard. The
           dashboard's own login handles SSO with a proper challenge
           code; the marketing site does not call ZevID directly
           because that surface won't bounce users back without one. --> <div class="flex items-center gap-2" data-sso-show="anonymous"> <a href="https://console.zevcloud.net" data-mobile-hide class="hidden sm:inline-flex h-9 items-center px-3 rounded-md text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100 hover:bg-ink-100/70 dark:hover:bg-ink-800/70">
Sign in
</a> <a href="https://console.zevcloud.net" data-mobile-hide class="hidden sm:inline-flex h-9 items-center px-4 rounded-md bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium shadow-sm">
Get started
</a> </div> <!-- ZEVID-ONLY — ZevID session detected, but no confirmed
           dashboard session. Single CTA: "Continue as <name>" with
           the user's avatar baked in so identity confirmation feels
           personal, not generic. The link bounces through the
           dashboard's own SSO (the script rewrites the href to
           the configured continueUrl). --> <div class="flex items-center gap-2" data-sso-show="zevid-only"> <a href="https://console.zevcloud.net" data-sso-dashboard data-mobile-hide class="hidden sm:inline-flex pl-1.5 pr-4 gap-2 h-9 items-center px-4 rounded-md bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium shadow-sm"> <span class="relative h-6 w-6 rounded-full bg-white/10 dark:bg-ink-900/40 ring-1 ring-white/20 dark:ring-ink-700 inline-flex items-center justify-center overflow-hidden"> <img data-sso-avatar src="" alt="" class="h-full w-full object-cover" hidden> <span data-sso-avatar-fallback class="text-[10px] font-semibold"></span> </span>
Continue as <span data-sso-name class="font-semibold">there</span> </a> </div> <!-- DASHBOARD — full dashboard session confirmed. Profile
           pill on the left + Open dashboard CTA. No "Continue as"
           since they're already in. --> <div class="flex items-center gap-2" data-sso-show="dashboard"> <a href="https://console.zevcloud.net" data-sso-dashboard data-mobile-hide class="hidden sm:inline-flex items-center gap-2 h-9 pl-1.5 pr-3 rounded-full border border-ink-200 dark:border-ink-800 hover:bg-ink-50 dark:hover:bg-ink-800/50" aria-label="Profile"> <span class="relative h-6 w-6 rounded-full bg-brand-100 dark:bg-brand-500/20 text-brand-700 dark:text-brand-300 inline-flex items-center justify-center overflow-hidden"> <img data-sso-avatar src="" alt="" class="h-full w-full object-cover" hidden> <span data-sso-avatar-fallback class="text-[10px] font-semibold"></span> </span> <span data-sso-name class="text-[13px] font-medium text-ink-900 dark:text-ink-100">
you
</span> </a> <a href="https://console.zevcloud.net" data-sso-dashboard data-mobile-hide class="hidden sm:inline-flex h-9 items-center px-4 rounded-md bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium shadow-sm">
Open dashboard
</a> </div> <!-- Mobile hamburger — opens the slide-in drawer below. --> <button type="button" id="open-mobile-menu" aria-label="Open menu" class="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-md text-ink-800 dark:text-ink-200 hover:bg-ink-100/70 dark:hover:bg-ink-800/70"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"> <path d="M3 6h14M3 10h14M3 14h14"></path> </svg> </button> </div> </div> <!-- Mobile drawer — native <dialog> for backdrop + escape support,
       slides in from the LEFT. Body scroll-lock + close handlers
       wired in the inline <script> at the bottom of this file.
       Easing: a longer 280ms with a soft cubic-bezier so the panel
       glides instead of snapping; the previous ease-out felt
       abrupt, especially with the short 200ms duration. --> <dialog id="mobile-menu" class="md:hidden fixed inset-0 m-0 max-w-none max-h-none w-full h-[100dvh] p-0 bg-transparent backdrop:bg-ink-950/40 backdrop:backdrop-blur-sm"> <div class="flex h-full justify-start"> <div id="mobile-menu-panel" class="h-full w-[88%] max-w-[360px] bg-white dark:bg-ink-950 shadow-2xl flex flex-col -translate-x-full transition-transform duration-[280ms] ease-[cubic-bezier(0.32,0.72,0,1)]"> <div class="flex items-center justify-between px-5 h-16 border-b border-ink-200 dark:border-ink-800 shrink-0"> <a href="/" class="inline-flex items-center gap-2 font-semibold tracking-tight text-ink-900 dark:text-ink-50 " style="font-size:14.399999999999999px"> <span class="relative inline-block rounded-md" style="width:24px;height:24px"> <img src="https://cdn.zevop.com/zevop/zev-icon-dark.png" alt="ZevCloud" width="24" height="24" class="absolute inset-0 rounded-md dark:hidden"> <img src="https://cdn.zevop.com/zevop/zev-icon-light.png" alt="" aria-hidden="true" width="24" height="24" class="absolute inset-0 rounded-md hidden dark:block"> </span> <span>ZevCloud</span> </a> <button type="button" id="close-mobile-menu" aria-label="Close menu" class="inline-flex h-9 w-9 items-center justify-center rounded-md text-ink-700 dark:text-ink-300 hover:bg-ink-100/70 dark:hover:bg-ink-800/70"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"> <path d="M4 4l10 10M14 4L4 14"></path> </svg> </button> </div> <nav class="flex-1 overflow-y-auto px-3 py-4"> <p class="px-2 pb-1 text-[11px] uppercase tracking-wider text-ink-500 dark:text-ink-400 font-semibold">Products</p> <div class="space-y-0.5"> <a href="/products/apps" class="flex items-center gap-3 rounded-lg px-2.5 py-2.5 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="h-9 w-9 rounded-md bg-teal-50 dark:bg-teal-500/10 text-teal-700 dark:text-teal-300 flex items-center justify-center ring-1 ring-teal-500/20 dark:ring-teal-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M4 4h16v6H4zM4 14h16v6H4zM7 7h.01M7 17h.01" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[14px] font-semibold text-ink-900 dark:text-ink-100"> Apps </span> <span class="block text-[11px] text-ink-500 dark:text-ink-400 leading-snug">Deploy apps from GitHub</span> </span> </a><a href="/products/databases" class="flex items-center gap-3 rounded-lg px-2.5 py-2.5 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="h-9 w-9 rounded-md bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 flex items-center justify-center ring-1 ring-indigo-500/20 dark:ring-indigo-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M4 7c0-1.66 3.58-3 8-3s8 1.34 8 3-3.58 3-8 3-8-1.34-8-3zM4 7v10c0 1.66 3.58 3 8 3s8-1.34 8-3V7M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[14px] font-semibold text-ink-900 dark:text-ink-100"> Databases </span> <span class="block text-[11px] text-ink-500 dark:text-ink-400 leading-snug">Managed Postgres, MySQL &amp; Redis</span> </span> </a><a href="/products/wordpress" class="flex items-center gap-3 rounded-lg px-2.5 py-2.5 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="h-9 w-9 rounded-md bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300 flex items-center justify-center ring-1 ring-amber-500/20 dark:ring-amber-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M3.42 12c0-1.243.267-2.422.745-3.487L8.2 19.81C5.354 18.428 3.42 15.448 3.42 12zm14.318-.43c0 .766-.294 1.66-.679 2.92l-.886 2.957-3.213-9.555s.535-.04 1.016-.094c.48-.054.43-.764-.05-.737 0 0-1.448.117-2.382.117-.873 0-2.348-.117-2.348-.117-.481-.03-.534.71-.054.737 0 0 .456.054.892.094l1.293 3.546-1.815 5.45-3.022-9.001s.535-.027 1.013-.054c.481-.054.43-.764-.054-.737 0 0-1.444.117-2.382.117-.165 0-.367-.005-.582-.012C7.082 4.18 9.394 3 12 3c1.948 0 3.722.741 5.06 1.961-.034 0-.061-.005-.094-.005-.873 0-1.498.764-1.498 1.587 0 .737.428 1.36.879 2.097.34.595.733 1.36.733 2.46zM12 20.594c-.726 0-1.43-.108-2.094-.302l2.224-6.467 2.282 6.255c.014.039.034.077.051.111-.787.281-1.616.403-2.463.403zm8.532-3.054c.737-1.337 1.155-2.879 1.155-4.54 0-1.554-.366-3.022-1.011-4.323.004.037.005.075.005.116 0 1.069-.402 2.275-1.012 3.892l-2.45 7.045c2.39-1.395 4.085-3.953 4.085-7.13zM12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0zm0 23.4C5.715 23.4.6 18.285.6 12S5.715.6 12 .6 23.4 5.715 23.4 12 18.285 23.4 12 23.4z" stroke="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[14px] font-semibold text-ink-900 dark:text-ink-100"> WordPress </span> <span class="block text-[11px] text-ink-500 dark:text-ink-400 leading-snug">Managed WordPress hosting</span> </span> </a><a href="/products/sites" class="flex items-center gap-3 rounded-lg px-2.5 py-2.5 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="h-9 w-9 rounded-md bg-violet-50 dark:bg-violet-500/10 text-violet-700 dark:text-violet-300 flex items-center justify-center ring-1 ring-violet-500/20 dark:ring-violet-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M3 7l9-4 9 4-9 4-9-4zM3 12l9 4 9-4M3 17l9 4 9-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[14px] font-semibold text-ink-900 dark:text-ink-100"> Sites </span> <span class="block text-[11px] text-ink-500 dark:text-ink-400 leading-snug">Static &amp; file hosting</span> </span> </a><a href="/products/storage" class="flex items-center gap-3 rounded-lg px-2.5 py-2.5 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="h-9 w-9 rounded-md bg-sky-50 dark:bg-sky-500/10 text-sky-700 dark:text-sky-300 flex items-center justify-center ring-1 ring-sky-500/20 dark:ring-sky-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M21 8H3v13h18V8zM1 3h22v5H1V3zM10 12h4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[14px] font-semibold text-ink-900 dark:text-ink-100"> Storage </span> <span class="block text-[11px] text-ink-500 dark:text-ink-400 leading-snug">S3-compatible object storage</span> </span> </a><a href="/products/domains" class="flex items-center gap-3 rounded-lg px-2.5 py-2.5 hover:bg-ink-50 dark:hover:bg-ink-800/50"> <span class="h-9 w-9 rounded-md bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 flex items-center justify-center ring-1 ring-emerald-500/20 dark:ring-emerald-400/30 shrink-0"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="min-w-0"> <span class="block text-[14px] font-semibold text-ink-900 dark:text-ink-100"> Domains </span> <span class="block text-[11px] text-ink-500 dark:text-ink-400 leading-snug">Domain registration &amp; DNS</span> </span> </a> </div> <p class="px-2 pt-5 pb-1 text-[11px] uppercase tracking-wider text-ink-500 dark:text-ink-400 font-semibold">Resources</p> <div class="space-y-0.5 text-[14px]"> <a href="/pricing" class="block rounded-md px-3 py-2 hover:bg-ink-50 dark:hover:bg-ink-800/50 text-ink-800 dark:text-ink-200">Pricing</a> <a href="https://docs.zevcloud.net" class="block rounded-md px-3 py-2 hover:bg-ink-50 dark:hover:bg-ink-800/50 text-ink-800 dark:text-ink-200" rel="noopener">Docs</a> <a href="https://blog.zevcloud.net" class="block rounded-md px-3 py-2 hover:bg-ink-50 dark:hover:bg-ink-800/50 text-ink-800 dark:text-ink-200" rel="noopener">Blog</a> <a href="https://status.zevop.com" class="block rounded-md px-3 py-2 hover:bg-ink-50 dark:hover:bg-ink-800/50 text-ink-800 dark:text-ink-200" target="_blank" rel="noopener">Status</a> </div> <p class="px-2 pt-5 pb-2 text-[11px] uppercase tracking-wider text-ink-500 dark:text-ink-400 font-semibold">Theme</p> <div class="inline-flex items-center rounded-full border border-ink-200 dark:border-ink-800 bg-ink-50 dark:bg-ink-900 p-0.5 ml-2" role="group" aria-label="Theme" data-theme-toggle data-astro-cid-x3pjskd3> <button type="button" data-theme-set="light" aria-label="Light theme" title="Light" class="theme-btn h-7 w-7 rounded-full inline-flex items-center justify-center text-ink-500 hover:text-ink-900 dark:hover:text-ink-100 transition-colors" data-astro-cid-x3pjskd3> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-x3pjskd3> <circle cx="12" cy="12" r="4" data-astro-cid-x3pjskd3></circle> <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" data-astro-cid-x3pjskd3></path> </svg> </button> <button type="button" data-theme-set="system" aria-label="System theme" title="System" class="theme-btn h-7 w-7 rounded-full inline-flex items-center justify-center text-ink-500 hover:text-ink-900 dark:hover:text-ink-100 transition-colors" data-astro-cid-x3pjskd3> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-x3pjskd3> <rect x="3" y="4" width="18" height="13" rx="2" data-astro-cid-x3pjskd3></rect> <path d="M8 21h8M12 17v4" data-astro-cid-x3pjskd3></path> </svg> </button> <button type="button" data-theme-set="dark" aria-label="Dark theme" title="Dark" class="theme-btn h-7 w-7 rounded-full inline-flex items-center justify-center text-ink-500 hover:text-ink-900 dark:hover:text-ink-100 transition-colors" data-astro-cid-x3pjskd3> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-x3pjskd3> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" data-astro-cid-x3pjskd3></path> </svg> </button> </div>   </nav> <!-- Sticky CTA footer in the drawer. Mirrors the top-bar
             auth split so the personalised pill works here too. --> <div class="border-t border-ink-200 dark:border-ink-800 p-4 space-y-2 shrink-0"> <div data-sso-show="anonymous" class="space-y-2"> <a href="https://console.zevcloud.net" class="flex items-center justify-center h-10 rounded-md bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium text-[14px] shadow-sm">
Get started
</a> <a href="https://console.zevcloud.net" class="flex items-center justify-center h-10 rounded-md border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 text-ink-800 dark:text-ink-200 hover:bg-ink-50 dark:hover:bg-ink-800/50 font-medium text-[14px]">
Sign in
</a> </div> <div data-sso-show="zevid-only" class="space-y-2"> <a href="https://console.zevcloud.net" data-sso-dashboard class="flex items-center justify-center gap-2 h-10 rounded-md bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium text-[14px] shadow-sm"> <span class="relative h-6 w-6 rounded-full bg-white/15 dark:bg-ink-900/40 ring-1 ring-white/25 dark:ring-ink-700 inline-flex items-center justify-center overflow-hidden"> <img data-sso-avatar src="" alt="" class="h-full w-full object-cover" hidden> <span data-sso-avatar-fallback class="text-[10px] font-semibold"></span> </span>
Continue as <span data-sso-name class="font-semibold">there</span> </a> </div> <div data-sso-show="dashboard" class="space-y-2"> <a href="https://console.zevcloud.net" data-sso-dashboard class="flex items-center justify-center h-10 rounded-md bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium text-[14px] shadow-sm">
Open dashboard
</a> </div> </div> </div> </div> </dialog> <script type="module">const n=document.getElementById("mobile-menu"),t=document.getElementById("mobile-menu-panel"),d=document.getElementById("open-mobile-menu"),l=document.getElementById("close-mobile-menu");if(n&&t&&d&&l){const s=()=>{n.showModal(),document.body.style.overflow="hidden",requestAnimationFrame(()=>t.classList.remove("-translate-x-full"))},o=()=>{t.classList.add("-translate-x-full");const e=()=>{n.close(),document.body.style.overflow="",t.removeEventListener("transitionend",e)};t.addEventListener("transitionend",e)};d.addEventListener("click",s),l.addEventListener("click",o),n.addEventListener("click",e=>{e.target===n&&o()}),n.addEventListener("cancel",e=>{e.preventDefault(),o()}),window.matchMedia("(min-width: 768px)").addEventListener("change",e=>{e.matches&&n.open&&o()})}</script> </header> <main class="flex-1">  <section class="relative isolate overflow-hidden"> <!-- Soft brand gradient behind the hero. Pure CSS, no asset cost.
       The dark variant fades from a deep brand wash into the page bg
       so the hero still feels distinct from the sections below. --> <div aria-hidden="true" class="absolute inset-0 -z-10 bg-gradient-to-b from-brand-50/70 via-white to-white dark:from-brand-900/30 dark:via-ink-950 dark:to-ink-950"></div> <div aria-hidden="true" class="absolute inset-0 -z-10 dot-bg opacity-40"></div> <div class="mx-auto max-w-7xl px-5 sm:px-8 pt-20 sm:pt-24 pb-14 sm:pb-20"> <div class="grid lg:grid-cols-[minmax(0,1fr)_minmax(0,580px)] gap-10 lg:gap-14 items-center"> <!-- Copy column. --> <div> <a href="/products/storage" class="inline-flex items-center gap-2 rounded-full border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 px-3 py-1 text-[12px] font-medium text-ink-700 dark:text-ink-300 hover:border-ink-300 dark:hover:border-ink-700 shadow-sm dark:shadow-black/40"> <span class="rounded-full bg-brand-500/15 text-brand-700 dark:text-brand-300 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider">
New
</span>
S3-compatible object storage, now live
<svg width="12" height="12" viewBox="0 0 12 12" class="opacity-60"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> <h1 class="mt-6 text-[36px] sm:text-[52px] lg:text-[58px] leading-[1.05] font-semibold tracking-tight text-ink-950 dark:text-ink-50"> <!-- Three pre-rendered headlines toggled by `data-sso-show`.
               JS-off visitors see the anonymous one (the marketing
               default). Authenticated users see context-appropriate
               greeting copy. --> <span data-sso-show="anonymous">
Deploy
<span class="bg-gradient-to-r from-brand-600 to-brand-400 bg-clip-text text-transparent">
without borders.
</span> </span> <span data-sso-show="zevid-only">
Hi <span data-sso-name class="bg-gradient-to-r from-brand-600 to-brand-400 bg-clip-text text-transparent">there</span>,
<span class="block text-ink-700 dark:text-ink-300 text-[28px] sm:text-[40px] mt-2 font-semibold">
ready to ship something today?
</span> </span> <span data-sso-show="dashboard">
Welcome back, <span data-sso-name class="bg-gradient-to-r from-brand-600 to-brand-400 bg-clip-text text-transparent">there</span>.
<span class="block text-ink-700 dark:text-ink-300 text-[28px] sm:text-[40px] mt-2 font-semibold">
Pick up where you left off.
</span> </span> </h1> <p data-sso-show="anonymous" class="mt-4 text-[13px] font-semibold uppercase tracking-[0.2em] text-brand-700 dark:text-brand-300">
Build. Own. Scale.
</p> <p class="mt-5 max-w-xl text-[16px] sm:text-[18px] leading-relaxed text-ink-600 dark:text-ink-400"> <span data-sso-show="anonymous">
Apps, databases, WordPress, static sites, storage, and domains
            on a single platform. Pay only for what you deploy, invite the
            whole team for free, and ship from anywhere in the world.
</span> <span data-sso-show="zevid-only">
You're already signed in with ZevID. One click takes you
            straight into your team workspace.
</span> <span data-sso-show="dashboard">
Your team workspace, services, and invoices are one click away.
</span> </p> <div class="mt-8 flex flex-wrap items-center gap-3"> <!-- ANONYMOUS — Get started CTA. Single-line, brand-shadow,
               whitespace-nowrap so it never wraps regardless of font
               or zoom. The "free tier" message lives in the
               microcopy below; jamming it into the button itself
               crowded the layout. --> <!--
            Dashboard, not the ZevID sign-up URL. ZevID won't bounce
            users back without a proper challenge code; the
            dashboard's own login page handles SSO end-to-end. If
            the user is already signed in, they land on the
            dashboard directly.
          --> <a href="https://console.zevcloud.net" data-sso-show="anonymous" class="inline-flex h-12 items-center justify-center px-6 gap-2.5 whitespace-nowrap rounded-lg bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium ring-1 ring-ink-900/5 dark:ring-white/10 transition-colors leading-none">
Get started
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M3 8h9m-4-3.5L12.5 8 8 11.5" stroke="currentColor" stroke-width="1.75" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> <!-- ZEVID-ONLY — "Continue as <name>" with avatar baked in
               so the identity confirmation feels personal. The href
               is rewritten by zevid-sso.ts at runtime to the
               configured continueUrl so the click bounces through
               dashboard SSO instead of showing a sign-in form. --> <a href="https://console.zevcloud.net" data-sso-dashboard data-sso-show="zevid-only" class="inline-flex h-12 items-center pl-1.5 pr-5 gap-2.5 rounded-lg bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium ring-1 ring-ink-900/5 dark:ring-white/10 transition-colors"> <span class="relative h-8 w-8 rounded-full bg-white/15 dark:bg-ink-900/40 ring-1 ring-white/25 dark:ring-ink-700 inline-flex items-center justify-center overflow-hidden"> <img data-sso-avatar src="" alt="" class="h-full w-full object-cover" hidden> <span data-sso-avatar-fallback class="text-[12px] font-semibold"></span> </span>
Continue as <span data-sso-name class="font-semibold">there</span> <svg width="14" height="14" viewBox="0 0 14 14" class="-ml-0.5"> <path d="M3 7h8m-3-3l3 3-3 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> <!-- DASHBOARD — direct "Open your dashboard". --> <a href="https://console.zevcloud.net" data-sso-dashboard data-sso-show="dashboard" class="inline-flex h-12 items-center px-5 gap-2 rounded-lg bg-ink-900 dark:bg-white text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-ink-100 font-medium ring-1 ring-ink-900/5 dark:ring-white/10 transition-colors">
Open your dashboard
<svg width="16" height="16" viewBox="0 0 16 16"> <path d="M3 8h9m-4-3.5L12.5 8 8 11.5" stroke="currentColor" stroke-width="1.75" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> <a href="/pricing" class="inline-flex h-12 items-center px-5 rounded-lg border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 text-ink-800 dark:text-ink-200 hover:bg-ink-50 dark:hover:bg-ink-800/50 font-medium transition-colors">
See pricing
</a> </div> <p class="mt-4 text-[12px] text-ink-500 dark:text-ink-400"> <span data-sso-show="anonymous">No credit card required. Pay per deployment, never per teammate.</span> <span data-sso-show="zevid-only">Signed in via ZevID. We'll hand you off without re-asking for a password.</span> <span data-sso-show="dashboard">Signed in via ZevID. Switch account in the dashboard.</span> </p> </div> <!-- Visual column — pure-CSS dashboard preview. Sells the "one
           dashboard, every product" pitch without commissioning art
           or shipping image bytes. Hidden under lg to keep mobile
           tight; the trust strip below carries those viewports.
           Wrapper is `relative` so the floating pill anchors inside
           it instead of escaping to the section (which has
           overflow-hidden and would clip it). --> <div class="hidden lg:block relative"> <div class="relative rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 shadow-2xl shadow-brand-900/10 dark:shadow-brand-900/40 overflow-hidden halo" style="--halo-color: var(--color-brand-400)"> <!-- Browser chrome --> <div class="flex items-center gap-1.5 px-4 py-3 border-b border-ink-200 dark:border-ink-800 bg-ink-50/60 dark:bg-ink-900/80"> <span class="h-2.5 w-2.5 rounded-full bg-red-400/70"></span> <span class="h-2.5 w-2.5 rounded-full bg-yellow-400/70"></span> <span class="h-2.5 w-2.5 rounded-full bg-green-400/70"></span> <div class="ml-3 flex-1 h-6 rounded bg-white dark:bg-ink-950 border border-ink-200 dark:border-ink-800 px-2.5 flex items-center text-[10px] font-mono text-ink-400 dark:text-ink-500 truncate"> console.zevcloud.net/dashboard
</div> </div> <!-- Dashboard body --> <div class="p-5 grid grid-cols-2 gap-3 bg-gradient-to-b from-white to-ink-50/40 dark:from-ink-900 dark:to-ink-950"> <div class="col-span-2 flex items-center justify-between mb-1"> <p class="text-[12px] font-semibold text-ink-900 dark:text-ink-100">Your services</p> <span class="text-[10px] text-ink-500 dark:text-ink-400">5 active &middot; ₦12,400/mo</span> </div> <!-- Mini product cards. Hard-coded so the preview is
                 deterministic — these are the same five products
                 we sell, rendered as if the user already has one
                 of each running. --> <div class="rounded-lg border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-3"> <div class="flex items-center gap-2 mb-1.5"> <span class="h-6 w-6 rounded bg-teal-50 text-teal-700 ring-1 ring-teal-500/20 flex items-center justify-center"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M4 4h16v6H4zM4 14h16v6H4zM7 7h.01M7 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg> </span> <p class="text-[11px] font-medium text-ink-900 dark:text-ink-100">storefront</p> </div> <div class="flex items-center gap-1.5 text-[10px] text-emerald-600"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
Live · 12ms p95
</div> </div> <div class="rounded-lg border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-3"> <div class="flex items-center gap-2 mb-1.5"> <span class="h-6 w-6 rounded bg-indigo-50 text-indigo-700 ring-1 ring-indigo-500/20 flex items-center justify-center"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M4 7c0-1.66 3.58-3 8-3s8 1.34 8 3-3.58 3-8 3-8-1.34-8-3zM4 7v10c0 1.66 3.58 3 8 3s8-1.34 8-3V7" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg> </span> <p class="text-[11px] font-medium text-ink-900 dark:text-ink-100">orders-db</p> </div> <div class="flex items-center gap-1.5 text-[10px] text-emerald-600"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
Healthy · 24 conns
</div> </div> <div class="rounded-lg border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-3"> <div class="flex items-center gap-2 mb-1.5"> <span class="h-6 w-6 rounded bg-amber-50 text-amber-700 ring-1 ring-amber-500/20 flex items-center justify-center"> <!-- Real WordPress mark — same path used on the
                       product card and watermark, just at 12px. --> <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"> <path d="M3.42 12c0-1.243.267-2.422.745-3.487L8.2 19.81C5.354 18.428 3.42 15.448 3.42 12zm14.318-.43c0 .766-.294 1.66-.679 2.92l-.886 2.957-3.213-9.555s.535-.04 1.016-.094c.48-.054.43-.764-.05-.737 0 0-1.448.117-2.382.117-.873 0-2.348-.117-2.348-.117-.481-.03-.534.71-.054.737 0 0 .456.054.892.094l1.293 3.546-1.815 5.45-3.022-9.001s.535-.027 1.013-.054c.481-.054.43-.764-.054-.737 0 0-1.444.117-2.382.117-.165 0-.367-.005-.582-.012C7.082 4.18 9.394 3 12 3c1.948 0 3.722.741 5.06 1.961-.034 0-.061-.005-.094-.005-.873 0-1.498.764-1.498 1.587 0 .737.428 1.36.879 2.097.34.595.733 1.36.733 2.46zM12 20.594c-.726 0-1.43-.108-2.094-.302l2.224-6.467 2.282 6.255c.014.039.034.077.051.111-.787.281-1.616.403-2.463.403zm8.532-3.054c.737-1.337 1.155-2.879 1.155-4.54 0-1.554-.366-3.022-1.011-4.323.004.037.005.075.005.116 0 1.069-.402 2.275-1.012 3.892l-2.45 7.045c2.39-1.395 4.085-3.953 4.085-7.13zM12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm0-23.4C5.715.6.6 5.715.6 12S5.715 23.4 12 23.4 23.4 18.285 23.4 12 18.285.6 12 .6z"></path> </svg> </span> <p class="text-[11px] font-medium text-ink-900 dark:text-ink-100">acme-blog</p> </div> <div class="flex items-center gap-1.5 text-[10px] text-emerald-600"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
WordPress 6.8
</div> </div> <div class="rounded-lg border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-3"> <div class="flex items-center gap-2 mb-1.5"> <span class="h-6 w-6 rounded bg-violet-50 text-violet-700 ring-1 ring-violet-500/20 flex items-center justify-center"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M3 7l9-4 9 4-9 4-9-4z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> </span> <p class="text-[11px] font-medium text-ink-900 dark:text-ink-100">marketing-site</p> </div> <div class="flex items-center gap-1.5 text-[10px] text-ink-500 dark:text-ink-400"> <span class="h-1.5 w-1.5 rounded-full bg-ink-300 dark:bg-ink-600"></span>
Static · 4.2 GB/mo
</div> </div> <!-- Domains row spans the full width to feel different --> <div class="col-span-2 rounded-lg border border-brand-300/60 dark:border-brand-500/30 bg-gradient-to-br from-brand-50/80 to-white dark:from-brand-500/10 dark:to-ink-900/60 p-3"> <div class="flex items-center justify-between gap-2"> <div class="flex items-center gap-2 min-w-0"> <span class="h-6 w-6 rounded bg-brand-100 dark:bg-brand-500/20 text-brand-700 dark:text-brand-300 ring-1 ring-brand-500/30 dark:ring-brand-400/40 flex items-center justify-center shrink-0"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"></circle><path d="M2 12h20" stroke="currentColor" stroke-width="2"></path></svg> </span> <p class="text-[11px] font-mono text-ink-900 dark:text-ink-100 truncate">acme.com.ng</p> </div> <span class="shrink-0 inline-flex items-center gap-1 text-[10px] font-medium text-brand-700 dark:text-brand-300 bg-brand-100 dark:bg-brand-500/20 px-1.5 py-0.5 rounded"> <svg width="10" height="10" viewBox="0 0 12 12"><path d="M3 6l2 2 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Renews 2026
</span> </div> </div> </div> </div> <!-- Floating "live activity" chip — pinned to the dashboard
             card's bottom-right corner so it reads as a notification
             toast, not a stranded UI element. We bleed it ~12px
             outside the card on the bottom for a "just landed"
             feel; the wrapper is relative so the section's
             overflow-hidden never clips it. --> <div class="hidden xl:flex absolute right-4 -bottom-3 items-center gap-2 px-3.5 py-2 rounded-full bg-ink-900 text-white text-[11px] shadow-xl ring-1 ring-ink-800/80"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
Deploy succeeded · 3s ago
</div> </div> </div> <!-- Trust strip — replace logos as we land design partners. --> <div class="mt-14 sm:mt-20 flex flex-col gap-4"> <p class="text-[11px] uppercase tracking-wider text-ink-500 dark:text-ink-400 font-medium">
Powering teams shipping across borders
</p> <div class="flex flex-wrap items-center gap-x-10 gap-y-4 opacity-60 grayscale"> <span class="text-ink-700 dark:text-ink-300 font-semibold">Modern Day Jangs</span> <!-- <span class="text-ink-700 dark:text-ink-300 font-semibold">intechcommerce</span>
        <span class="text-ink-700 dark:text-ink-300 font-semibold">ZevPay</span> --> <span class="text-ink-700 dark:text-ink-300 font-semibold">Music Distro Global</span> <span class="text-ink-700 dark:text-ink-300 font-semibold">+ 240 teams</span> </div> </div> </div> </section> <section class="border-y border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-950"> <div class="mx-auto max-w-7xl px-5 sm:px-8 py-12"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div> <p class="text-[28px] sm:text-[32px] font-semibold tracking-tight text-ink-950 dark:text-ink-50"> 0 </p> <p class="mt-1 text-[12px] text-ink-500 dark:text-ink-400">Per-seat fees. Invite the whole team free</p> </div><div> <p class="text-[28px] sm:text-[32px] font-semibold tracking-tight text-ink-950 dark:text-ink-50"> 99.99% </p> <p class="mt-1 text-[12px] text-ink-500 dark:text-ink-400">Platform uptime over the last 90 days</p> </div><div> <p class="text-[28px] sm:text-[32px] font-semibold tracking-tight text-ink-950 dark:text-ink-50"> 5 min </p> <p class="mt-1 text-[12px] text-ink-500 dark:text-ink-400">Median time from signup to first deploy</p> </div><div> <p class="text-[28px] sm:text-[32px] font-semibold tracking-tight text-ink-950 dark:text-ink-50"> 460+ </p> <p class="mt-1 text-[12px] text-ink-500 dark:text-ink-400">TLDs available for registration</p> </div> </div> <div class="mt-8 pt-8 border-t border-ink-200 dark:border-ink-800 flex flex-wrap items-center gap-3"> <p class="text-[11px] uppercase tracking-wider text-ink-500 dark:text-ink-400 font-semibold mr-2">
Accredited by
</p> <a href="https://nira.org.ng" rel="noopener nofollow" aria-label="View NiRA accreditation" class="inline-flex items-center gap-2 rounded-full border border-emerald-200 dark:border-emerald-500/30 bg-emerald-50/70 dark:bg-emerald-500/10 pl-1 pr-3 py-1 hover:border-emerald-300 dark:hover:border-emerald-400/50 "><span class="relative inline-block h-7 w-7 shrink-0"><img src="/assets/ng-accredition.png" alt=".ng Accredited Registrar. National Internet Registry of Nigeria" width="28" height="28" class="absolute inset-0 h-full w-full select-none dark:hidden" loading="lazy" decoding="async"><img src="/assets/ng-accredition-white.png" alt="" width="28" height="28" class="absolute inset-0 h-full w-full select-none hidden dark:block" loading="lazy" decoding="async" aria-hidden="true"></span><span class="text-[12px] text-emerald-900 dark:text-emerald-200 font-medium"><span class="font-mono">.ng</span> Accredited Registrar
</span></a> </div> </div> </section> <section id="products" class="relative"> <div class="mx-auto max-w-7xl px-5 sm:px-8 py-20 sm:py-28"> <div class="max-w-2xl"> <p class="text-[12px] font-semibold uppercase tracking-wider text-brand-600 dark:text-brand-400">
Products
</p> <h2 class="mt-2 text-[32px] sm:text-[40px] leading-tight font-semibold tracking-tight text-ink-950 dark:text-ink-50">
Everything you need to ship.
</h2> <p class="mt-3 text-[16px] text-ink-600 dark:text-ink-400">
Six products, one dashboard, one invoice. Invite the whole team
        for free. Add what you need as you grow.
</p> </div> <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5"> <a href="/products/apps" class="group relative flex flex-col rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-6 hover:shadow-lg dark:hover:shadow-black/40 hover:-translate-y-0.5 transition-all"> <div class="h-10 w-10 rounded-lg bg-teal-50 dark:bg-teal-500/10 text-teal-700 dark:text-teal-300 flex items-center justify-center mb-4 ring-1 ring-teal-500/20 dark:ring-teal-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <path d="M4 4h16v6H4zM4 14h16v6H4zM7 7h.01M7 17h.01" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <h3 class="text-[17px] font-semibold text-ink-950 dark:text-ink-50">ZevCloud Apps</h3> <p class="mt-1 text-[13px] text-ink-500 dark:text-ink-400">Deploy apps from GitHub</p> <p class="mt-3 text-[14px] leading-relaxed text-ink-700 dark:text-ink-300 flex-1"> Push to GitHub, get a live URL. Auto-build, auto-deploy, auto-scale. Zero infrastructure to wrangle. </p> <span class="mt-4 inline-flex items-center gap-1 text-[13px] font-medium text-ink-900 dark:text-ink-100">
Learn more
<svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a><a href="/products/databases" class="group relative flex flex-col rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-6 hover:shadow-lg dark:hover:shadow-black/40 hover:-translate-y-0.5 transition-all"> <div class="h-10 w-10 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 flex items-center justify-center mb-4 ring-1 ring-indigo-500/20 dark:ring-indigo-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <path d="M4 7c0-1.66 3.58-3 8-3s8 1.34 8 3-3.58 3-8 3-8-1.34-8-3zM4 7v10c0 1.66 3.58 3 8 3s8-1.34 8-3V7M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <h3 class="text-[17px] font-semibold text-ink-950 dark:text-ink-50">ZevCloud Databases</h3> <p class="mt-1 text-[13px] text-ink-500 dark:text-ink-400">Managed Postgres, MySQL &amp; Redis</p> <p class="mt-3 text-[14px] leading-relaxed text-ink-700 dark:text-ink-300 flex-1"> Production-grade databases provisioned in seconds. Daily backups, connection pooling, and point-in-time recovery. Pay only for what you use. </p> <span class="mt-4 inline-flex items-center gap-1 text-[13px] font-medium text-ink-900 dark:text-ink-100">
Learn more
<svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a><a href="/products/wordpress" class="group relative flex flex-col rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-6 hover:shadow-lg dark:hover:shadow-black/40 hover:-translate-y-0.5 transition-all"> <div class="h-10 w-10 rounded-lg bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300 flex items-center justify-center mb-4 ring-1 ring-amber-500/20 dark:ring-amber-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M3.42 12c0-1.243.267-2.422.745-3.487L8.2 19.81C5.354 18.428 3.42 15.448 3.42 12zm14.318-.43c0 .766-.294 1.66-.679 2.92l-.886 2.957-3.213-9.555s.535-.04 1.016-.094c.48-.054.43-.764-.05-.737 0 0-1.448.117-2.382.117-.873 0-2.348-.117-2.348-.117-.481-.03-.534.71-.054.737 0 0 .456.054.892.094l1.293 3.546-1.815 5.45-3.022-9.001s.535-.027 1.013-.054c.481-.054.43-.764-.054-.737 0 0-1.444.117-2.382.117-.165 0-.367-.005-.582-.012C7.082 4.18 9.394 3 12 3c1.948 0 3.722.741 5.06 1.961-.034 0-.061-.005-.094-.005-.873 0-1.498.764-1.498 1.587 0 .737.428 1.36.879 2.097.34.595.733 1.36.733 2.46zM12 20.594c-.726 0-1.43-.108-2.094-.302l2.224-6.467 2.282 6.255c.014.039.034.077.051.111-.787.281-1.616.403-2.463.403zm8.532-3.054c.737-1.337 1.155-2.879 1.155-4.54 0-1.554-.366-3.022-1.011-4.323.004.037.005.075.005.116 0 1.069-.402 2.275-1.012 3.892l-2.45 7.045c2.39-1.395 4.085-3.953 4.085-7.13zM12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0zm0 23.4C5.715 23.4.6 18.285.6 12S5.715.6 12 .6 23.4 5.715 23.4 12 18.285 23.4 12 23.4z" stroke="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <h3 class="text-[17px] font-semibold text-ink-950 dark:text-ink-50">ZevCloud WordPress</h3> <p class="mt-1 text-[13px] text-ink-500 dark:text-ink-400">Managed WordPress hosting</p> <p class="mt-3 text-[14px] leading-relaxed text-ink-700 dark:text-ink-300 flex-1"> WordPress without the babysitting. We handle the LEMP stack, updates, caching, and backups. You focus on the content. </p> <span class="mt-4 inline-flex items-center gap-1 text-[13px] font-medium text-ink-900 dark:text-ink-100">
Learn more
<svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a><a href="/products/sites" class="group relative flex flex-col rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-6 hover:shadow-lg dark:hover:shadow-black/40 hover:-translate-y-0.5 transition-all"> <div class="h-10 w-10 rounded-lg bg-violet-50 dark:bg-violet-500/10 text-violet-700 dark:text-violet-300 flex items-center justify-center mb-4 ring-1 ring-violet-500/20 dark:ring-violet-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <path d="M3 7l9-4 9 4-9 4-9-4zM3 12l9 4 9-4M3 17l9 4 9-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <h3 class="text-[17px] font-semibold text-ink-950 dark:text-ink-50">ZevCloud Sites</h3> <p class="mt-1 text-[13px] text-ink-500 dark:text-ink-400">Static &amp; file hosting</p> <p class="mt-3 text-[14px] leading-relaxed text-ink-700 dark:text-ink-300 flex-1"> Drag a zip, get a URL. Or upload a folder. Or point us at a build artifact. Static hosting that doesn&#39;t require a build pipeline. </p> <span class="mt-4 inline-flex items-center gap-1 text-[13px] font-medium text-ink-900 dark:text-ink-100">
Learn more
<svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a><a href="/products/storage" class="group relative flex flex-col rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-6 hover:shadow-lg dark:hover:shadow-black/40 hover:-translate-y-0.5 transition-all"> <div class="h-10 w-10 rounded-lg bg-sky-50 dark:bg-sky-500/10 text-sky-700 dark:text-sky-300 flex items-center justify-center mb-4 ring-1 ring-sky-500/20 dark:ring-sky-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <path d="M21 8H3v13h18V8zM1 3h22v5H1V3zM10 12h4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <h3 class="text-[17px] font-semibold text-ink-950 dark:text-ink-50">ZevCloud Storage</h3> <p class="mt-1 text-[13px] text-ink-500 dark:text-ink-400">S3-compatible object storage</p> <p class="mt-3 text-[14px] leading-relaxed text-ink-700 dark:text-ink-300 flex-1"> Pay-per-plan object storage with an S3-compatible API. Upload from any SDK, host static assets, back up your apps. Naira-priced, egress included. </p> <span class="mt-4 inline-flex items-center gap-1 text-[13px] font-medium text-ink-900 dark:text-ink-100">
Learn more
<svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a><a href="/products/domains" class="group relative flex flex-col rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-6 hover:shadow-lg dark:hover:shadow-black/40 hover:-translate-y-0.5 transition-all"> <div class="h-10 w-10 rounded-lg bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 flex items-center justify-center mb-4 ring-1 ring-emerald-500/20 dark:ring-emerald-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <h3 class="text-[17px] font-semibold text-ink-950 dark:text-ink-50">ZevCloud Domains</h3> <p class="mt-1 text-[13px] text-ink-500 dark:text-ink-400">Domain registration &amp; DNS</p> <p class="mt-3 text-[14px] leading-relaxed text-ink-700 dark:text-ink-300 flex-1"> Register .com.ng, .ng, .com, .io, and 460+ TLDs. Free DNS, free WHOIS privacy on most TLDs, and one-click email forwarding. </p> <span class="mt-4 inline-flex items-center gap-1 text-[13px] font-medium text-ink-900 dark:text-ink-100">
Learn more
<svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a> </div> </div> </section> <section class="bg-ink-950 text-ink-100 relative overflow-hidden"> <div aria-hidden="true" class="absolute inset-0 opacity-30 dot-bg" style="background-image: radial-gradient(rgb(63 63 70) 1px, transparent 1px);"></div> <div class="relative mx-auto max-w-7xl px-5 sm:px-8 py-20 sm:py-28 grid lg:grid-cols-2 gap-12 lg:items-center"> <div> <p class="text-[12px] font-semibold uppercase tracking-wider text-brand-300">
Built for developers
</p> <h2 class="mt-2 text-[32px] sm:text-[40px] leading-tight font-semibold tracking-tight">
Push code. We do the rest.
</h2> <p class="mt-3 text-[16px] text-ink-400 leading-relaxed">
Connect a GitHub repo, pick a branch, and your app deploys on
        every push. Buildpacks auto-detect Node, Bun, Python, Go, Ruby,
        and PHP. Logs, metrics, and rollbacks are one click away. The
        whole team can ship, with no per-seat fee gating access.
</p> <ul class="mt-6 space-y-3 text-[14px]"> <li class="flex items-start gap-2.5"> <span class="mt-1 h-1.5 w-1.5 rounded-full bg-brand-400"></span>
Per-branch preview deploys for every PR
</li> <li class="flex items-start gap-2.5"> <span class="mt-1 h-1.5 w-1.5 rounded-full bg-brand-400"></span>
Zero-config HTTPS with automatic certificate renewal
</li> <li class="flex items-start gap-2.5"> <span class="mt-1 h-1.5 w-1.5 rounded-full bg-brand-400"></span>
Private network between apps and databases (no egress fees)
</li> </ul> </div> <!-- Mock terminal — pure HTML, no JS. --> <div class="rounded-xl border border-ink-800 bg-ink-900 shadow-2xl shadow-brand-900/40 overflow-hidden"> <div class="flex items-center gap-1.5 px-4 py-3 border-b border-ink-800"> <span class="h-2.5 w-2.5 rounded-full bg-red-500/70"></span> <span class="h-2.5 w-2.5 rounded-full bg-yellow-500/70"></span> <span class="h-2.5 w-2.5 rounded-full bg-green-500/70"></span> <span class="ml-3 text-[11px] text-ink-500 font-mono">~/projects/storefront</span> </div> <pre class="px-5 py-4 text-[13px] leading-[1.6] font-mono overflow-x-auto"><code><span class="text-ink-500">$</span> <span class="text-ink-100">git push origin main</span>
<span class="text-ink-500">→ Pushed to ZevCloud · acme-storefront</span>

<span class="text-emerald-300">[12:04:01]</span> <span class="text-ink-300">build  </span> <span class="text-ink-500">Detected: Bun (package.json)</span>
<span class="text-emerald-300">[12:04:08]</span> <span class="text-ink-300">build  </span> <span class="text-ink-500">Installing dependencies...</span>
<span class="text-emerald-300">[12:04:32]</span> <span class="text-ink-300">build  </span> <span class="text-ink-500">Running</span> <span class="text-ink-100">bun run build</span>
<span class="text-emerald-300">[12:04:51]</span> <span class="text-ink-300">deploy </span> <span class="text-ink-500">Pushing image to coolify</span>
<span class="text-emerald-300">[12:05:14]</span> <span class="text-ink-300">deploy </span> <span class="text-emerald-400">✓ Live at</span> <span class="text-brand-300">https://storefront.zevcloud.app</span>
<span class="text-emerald-300">[12:05:14]</span> <span class="text-ink-300">cert   </span> <span class="text-emerald-400">✓ Let's Encrypt issued</span>

<span class="text-ink-500">$</span> <span class="text-ink-100">_</span></code></pre> </div> </div> </section> <section class="bg-ink-50/60 dark:bg-ink-900/40 border-y border-ink-200 dark:border-ink-800"> <div class="mx-auto max-w-7xl px-5 sm:px-8 py-20 sm:py-28"> <div class="max-w-2xl"> <p class="text-[12px] font-semibold uppercase tracking-wider text-brand-600 dark:text-brand-400">
Why ZevCloud
</p> <h2 class="mt-2 text-[32px] sm:text-[40px] leading-tight font-semibold tracking-tight text-ink-950 dark:text-ink-50">
A cloud platform you actually own.
</h2> <p class="mt-3 text-[15px] sm:text-[16px] leading-relaxed text-ink-600 dark:text-ink-400">
Same horsepower as Vercel or Railway, with a pricing model that
        doesn't punish you for adding a teammate.
</p> </div> <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="rounded-xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 p-6"> <div class="h-10 w-10 rounded-lg bg-brand-50 dark:bg-brand-500/15 text-brand-700 dark:text-brand-300 flex items-center justify-center mb-4 ring-1 ring-brand-500/20 dark:ring-brand-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <path d="M3 4h7v7H3zM14 4h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-700 dark:text-brand-300"> Build. </p> <h3 class="mt-1.5 text-[17px] font-semibold text-ink-950 dark:text-ink-50">One dashboard. Every service you ship.</h3> <p class="mt-2 text-[14px] leading-relaxed text-ink-600 dark:text-ink-400"> Apps, databases, WordPress, static sites, storage, and domains in a single workspace. Push to GitHub and we handle the build, certs, and rollouts. </p> </div><div class="rounded-xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 p-6"> <div class="h-10 w-10 rounded-lg bg-brand-50 dark:bg-brand-500/15 text-brand-700 dark:text-brand-300 flex items-center justify-center mb-4 ring-1 ring-brand-500/20 dark:ring-brand-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-700 dark:text-brand-300"> Own. </p> <h3 class="mt-1.5 text-[17px] font-semibold text-ink-950 dark:text-ink-50">No per-seat tax. Ever.</h3> <p class="mt-2 text-[14px] leading-relaxed text-ink-600 dark:text-ink-400"> Invite engineers, designers, finance, and contractors at no extra cost. You pay for what you deploy, not for who logs in. </p> </div><div class="rounded-xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 p-6"> <div class="h-10 w-10 rounded-lg bg-brand-50 dark:bg-brand-500/15 text-brand-700 dark:text-brand-300 flex items-center justify-center mb-4 ring-1 ring-brand-500/20 dark:ring-brand-400/30"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-700 dark:text-brand-300"> Scale. </p> <h3 class="mt-1.5 text-[17px] font-semibold text-ink-950 dark:text-ink-50">Deploy from anywhere, billed in your currency.</h3> <p class="mt-2 text-[14px] leading-relaxed text-ink-600 dark:text-ink-400"> Built in Nigeria, available worldwide. Settle invoices in Naira via ZevPay or in USD. Expanding across Africa as we grow. </p> </div> </div> </div> </section> <section class="bg-white dark:bg-ink-950 border-y border-ink-200 dark:border-ink-800"> <div class="mx-auto max-w-7xl px-5 sm:px-8 py-20 sm:py-24"> <div class="max-w-3xl"> <p class="text-[12px] font-semibold uppercase tracking-wider text-brand-600 dark:text-brand-400">
Part of the Zev platform
</p> <h2 class="mt-2 text-[28px] sm:text-[36px] font-semibold tracking-tight text-ink-950 dark:text-ink-50">
One identity. One bill. One platform.
</h2> <p class="mt-3 text-[15px] text-ink-600 dark:text-ink-400 leading-relaxed max-w-2xl">
ZevCloud is one product in the Zev suite. Sign in once with
        ZevID, get billed through ZevPay, and run your whole team on
        infrastructure you actually own. No per-seat fees, no FX
        surprises.
</p> </div> <!-- Lockup. Four product blocks + a "discover more" trailing
         tile, all sharing one bordered surface so the collection
         reads as ONE platform with several roles, not five
         independent products. Mobile stacks 1-col; sm = 2-col;
         lg = 5-col so the whole row fits on a wide laptop. --> <div class="mt-10 rounded-2xl border border-ink-200 dark:border-ink-800 bg-gradient-to-br from-white to-ink-50/40 dark:from-ink-900/60 dark:to-ink-950 overflow-hidden"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 divide-y sm:divide-y-0 sm:divide-x divide-ink-200 dark:divide-ink-800"> <a href="/" class="group relative flex flex-col gap-3 p-6 transition-colors bg-brand-50/40 dark:bg-brand-500/10"> <!-- Top accent bar — only on the active product so
                   the "you are here" signal lands without confusing
                   the rest of the family. --> <span aria-hidden="true" class="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-brand-400 to-brand-600"></span> <div class="flex items-center justify-between gap-2"> <!-- Shared Zev mark, tinted in the product's accent
                     colour. Same path data on every instance — the
                     family resemblance comes from geometry, the
                     differentiation from colour. --> <span class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-ink-50 dark:bg-ink-900/60 ring-1 ring-ink-200/60 dark:ring-ink-800 text-brand-600 dark:text-brand-400"> <svg width="22" height="16" viewBox="0 0 495.23 347" fill="currentColor" aria-hidden="true"> <path d="m311.65,285.54c0-11.55,2.02-22.66,5.73-33.09,2.39-6.72,5.5-13.16,9.23-19.24-12.05,2.08-24.42,4.48-37.06,7.18-33.32,7.13-68.5,16.4-104.56,27.8-40.19,12.7-77.99,26.94-112.23,41.95,27.08-6.67,59.31-10.53,93.91-10.5,50.91.04,96.7,8.48,128.44,21.9,17.08,7.22,30.1,15.88,37.65,25.46-7.77-10.18-13.66-21.6-17.22-33.9-2.55-8.8-3.91-18.03-3.9-27.56Z"></path> <path d="m495.23,194.44v14.04c-.8-.22-1.6-.42-2.42-.62-16.09-3.96-36.23-5.91-59.55-5.88-8.69.01-17.81.31-27.34.87-18.38,1.09-38.24,3.2-59.25,6.32-24.48,3.64-50.52,8.64-77.62,15.02-27.13,6.37-55.31,14.1-84.04,23.18-69.87,22.07-132.52,48.8-181.8,76.16-1.08.6-2.15,1.2-3.21,1.79.83-.63,1.68-1.27,2.53-1.9,49.87-37.17,134.63-82.12,234.39-121.86,6.52-2.61,13.02-5.14,19.47-7.61,42.57-16.33,83.49-30,120.89-40.64l-1.54-1.16-29.66-22.39-8.8-6.64L174.16,0l275.12,127.47,12.54,5.8c-7.34,1.32-14.98,2.82-22.89,4.53,33.82,11.79,56.32,32.75,56.3,56.64Z"></path> </svg> </span> <span class="text-[10px] font-semibold uppercase tracking-wider rounded-full px-2 py-0.5 bg-brand-600 text-white dark:bg-brand-500">
You are here
</span> </div> <p class="text-[10px] font-mono uppercase tracking-[0.18em] text-brand-600 dark:text-brand-400"> Platform </p> <h3 class="text-[22px] sm:text-[24px] font-semibold tracking-tight text-ink-950 dark:text-ink-50 leading-none"> ZevCloud </h3> <p class="text-[12.5px] text-ink-600 dark:text-ink-400 leading-relaxed"> Apps, databases, WordPress, static sites, and domains. The developer surface of the suite. </p> <span class="mt-auto inline-flex items-center gap-1 text-[12px] font-medium text-ink-700 dark:text-ink-300 group-hover:text-brand-700 dark:group-hover:text-brand-300"> Browse products <svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5" aria-hidden="true"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a><a href="https://accounts.zevop.com" rel="noopener" class="group relative flex flex-col gap-3 p-6 transition-colors hover:bg-violet-50/40 dark:hover:bg-violet-500/5"> <!-- Top accent bar — only on the active product so
                   the "you are here" signal lands without confusing
                   the rest of the family. -->  <div class="flex items-center justify-between gap-2"> <!-- Shared Zev mark, tinted in the product's accent
                     colour. Same path data on every instance — the
                     family resemblance comes from geometry, the
                     differentiation from colour. --> <span class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-ink-50 dark:bg-ink-900/60 ring-1 ring-ink-200/60 dark:ring-ink-800 text-violet-600 dark:text-violet-400"> <svg width="22" height="16" viewBox="0 0 495.23 347" fill="currentColor" aria-hidden="true"> <path d="m311.65,285.54c0-11.55,2.02-22.66,5.73-33.09,2.39-6.72,5.5-13.16,9.23-19.24-12.05,2.08-24.42,4.48-37.06,7.18-33.32,7.13-68.5,16.4-104.56,27.8-40.19,12.7-77.99,26.94-112.23,41.95,27.08-6.67,59.31-10.53,93.91-10.5,50.91.04,96.7,8.48,128.44,21.9,17.08,7.22,30.1,15.88,37.65,25.46-7.77-10.18-13.66-21.6-17.22-33.9-2.55-8.8-3.91-18.03-3.9-27.56Z"></path> <path d="m495.23,194.44v14.04c-.8-.22-1.6-.42-2.42-.62-16.09-3.96-36.23-5.91-59.55-5.88-8.69.01-17.81.31-27.34.87-18.38,1.09-38.24,3.2-59.25,6.32-24.48,3.64-50.52,8.64-77.62,15.02-27.13,6.37-55.31,14.1-84.04,23.18-69.87,22.07-132.52,48.8-181.8,76.16-1.08.6-2.15,1.2-3.21,1.79.83-.63,1.68-1.27,2.53-1.9,49.87-37.17,134.63-82.12,234.39-121.86,6.52-2.61,13.02-5.14,19.47-7.61,42.57-16.33,83.49-30,120.89-40.64l-1.54-1.16-29.66-22.39-8.8-6.64L174.16,0l275.12,127.47,12.54,5.8c-7.34,1.32-14.98,2.82-22.89,4.53,33.82,11.79,56.32,32.75,56.3,56.64Z"></path> </svg> </span> <svg width="14" height="14" viewBox="0 0 14 14" class="text-ink-400 dark:text-ink-500 transition-transform group-hover:translate-x-0.5" aria-hidden="true"> <path d="M3 7h8m-3-3l3 3-3 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <p class="text-[10px] font-mono uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400"> Identity </p> <h3 class="text-[22px] sm:text-[24px] font-semibold tracking-tight text-ink-950 dark:text-ink-50 leading-none"> ZevID </h3> <p class="text-[12.5px] text-ink-600 dark:text-ink-400 leading-relaxed"> One sign-on shared across every Zev product. Your team and credentials follow you. </p> <span class="mt-auto inline-flex items-center gap-1 text-[12px] font-medium text-ink-700 dark:text-ink-300 group-hover:text-violet-700 dark:group-hover:text-violet-300"> Visit ZevID <svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5" aria-hidden="true"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a><a href="https://zevpay.ng" rel="noopener" class="group relative flex flex-col gap-3 p-6 transition-colors hover:bg-teal-50/40 dark:hover:bg-teal-500/5"> <!-- Top accent bar — only on the active product so
                   the "you are here" signal lands without confusing
                   the rest of the family. -->  <div class="flex items-center justify-between gap-2"> <!-- Shared Zev mark, tinted in the product's accent
                     colour. Same path data on every instance — the
                     family resemblance comes from geometry, the
                     differentiation from colour. --> <span class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-ink-50 dark:bg-ink-900/60 ring-1 ring-ink-200/60 dark:ring-ink-800 text-teal-600 dark:text-teal-400"> <svg width="22" height="16" viewBox="0 0 495.23 347" fill="currentColor" aria-hidden="true"> <path d="m311.65,285.54c0-11.55,2.02-22.66,5.73-33.09,2.39-6.72,5.5-13.16,9.23-19.24-12.05,2.08-24.42,4.48-37.06,7.18-33.32,7.13-68.5,16.4-104.56,27.8-40.19,12.7-77.99,26.94-112.23,41.95,27.08-6.67,59.31-10.53,93.91-10.5,50.91.04,96.7,8.48,128.44,21.9,17.08,7.22,30.1,15.88,37.65,25.46-7.77-10.18-13.66-21.6-17.22-33.9-2.55-8.8-3.91-18.03-3.9-27.56Z"></path> <path d="m495.23,194.44v14.04c-.8-.22-1.6-.42-2.42-.62-16.09-3.96-36.23-5.91-59.55-5.88-8.69.01-17.81.31-27.34.87-18.38,1.09-38.24,3.2-59.25,6.32-24.48,3.64-50.52,8.64-77.62,15.02-27.13,6.37-55.31,14.1-84.04,23.18-69.87,22.07-132.52,48.8-181.8,76.16-1.08.6-2.15,1.2-3.21,1.79.83-.63,1.68-1.27,2.53-1.9,49.87-37.17,134.63-82.12,234.39-121.86,6.52-2.61,13.02-5.14,19.47-7.61,42.57-16.33,83.49-30,120.89-40.64l-1.54-1.16-29.66-22.39-8.8-6.64L174.16,0l275.12,127.47,12.54,5.8c-7.34,1.32-14.98,2.82-22.89,4.53,33.82,11.79,56.32,32.75,56.3,56.64Z"></path> </svg> </span> <svg width="14" height="14" viewBox="0 0 14 14" class="text-ink-400 dark:text-ink-500 transition-transform group-hover:translate-x-0.5" aria-hidden="true"> <path d="M3 7h8m-3-3l3 3-3 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <p class="text-[10px] font-mono uppercase tracking-[0.18em] text-teal-600 dark:text-teal-400"> Payments </p> <h3 class="text-[22px] sm:text-[24px] font-semibold tracking-tight text-ink-950 dark:text-ink-50 leading-none"> ZevPay </h3> <p class="text-[12.5px] text-ink-600 dark:text-ink-400 leading-relaxed"> Naira-first invoices, recurring billing, and credit balances. The engine behind every Zev charge. </p> <span class="mt-auto inline-flex items-center gap-1 text-[12px] font-medium text-ink-700 dark:text-ink-300 group-hover:text-teal-700 dark:group-hover:text-teal-300"> Visit ZevPay <svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5" aria-hidden="true"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a><a href="https://zevcommerce.com" rel="noopener" class="group relative flex flex-col gap-3 p-6 transition-colors hover:bg-rose-50/40 dark:hover:bg-rose-500/5"> <!-- Top accent bar — only on the active product so
                   the "you are here" signal lands without confusing
                   the rest of the family. -->  <div class="flex items-center justify-between gap-2"> <!-- Shared Zev mark, tinted in the product's accent
                     colour. Same path data on every instance — the
                     family resemblance comes from geometry, the
                     differentiation from colour. --> <span class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-ink-50 dark:bg-ink-900/60 ring-1 ring-ink-200/60 dark:ring-ink-800 text-rose-600 dark:text-rose-400"> <svg width="22" height="16" viewBox="0 0 495.23 347" fill="currentColor" aria-hidden="true"> <path d="m311.65,285.54c0-11.55,2.02-22.66,5.73-33.09,2.39-6.72,5.5-13.16,9.23-19.24-12.05,2.08-24.42,4.48-37.06,7.18-33.32,7.13-68.5,16.4-104.56,27.8-40.19,12.7-77.99,26.94-112.23,41.95,27.08-6.67,59.31-10.53,93.91-10.5,50.91.04,96.7,8.48,128.44,21.9,17.08,7.22,30.1,15.88,37.65,25.46-7.77-10.18-13.66-21.6-17.22-33.9-2.55-8.8-3.91-18.03-3.9-27.56Z"></path> <path d="m495.23,194.44v14.04c-.8-.22-1.6-.42-2.42-.62-16.09-3.96-36.23-5.91-59.55-5.88-8.69.01-17.81.31-27.34.87-18.38,1.09-38.24,3.2-59.25,6.32-24.48,3.64-50.52,8.64-77.62,15.02-27.13,6.37-55.31,14.1-84.04,23.18-69.87,22.07-132.52,48.8-181.8,76.16-1.08.6-2.15,1.2-3.21,1.79.83-.63,1.68-1.27,2.53-1.9,49.87-37.17,134.63-82.12,234.39-121.86,6.52-2.61,13.02-5.14,19.47-7.61,42.57-16.33,83.49-30,120.89-40.64l-1.54-1.16-29.66-22.39-8.8-6.64L174.16,0l275.12,127.47,12.54,5.8c-7.34,1.32-14.98,2.82-22.89,4.53,33.82,11.79,56.32,32.75,56.3,56.64Z"></path> </svg> </span> <svg width="14" height="14" viewBox="0 0 14 14" class="text-ink-400 dark:text-ink-500 transition-transform group-hover:translate-x-0.5" aria-hidden="true"> <path d="M3 7h8m-3-3l3 3-3 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <p class="text-[10px] font-mono uppercase tracking-[0.18em] text-rose-600 dark:text-rose-400"> Commerce </p> <h3 class="text-[22px] sm:text-[24px] font-semibold tracking-tight text-ink-950 dark:text-ink-50 leading-none"> ZevCommerce </h3> <p class="text-[12.5px] text-ink-600 dark:text-ink-400 leading-relaxed"> Storefronts, checkout, and inventory for African merchants, built on top of ZevPay. </p> <span class="mt-auto inline-flex items-center gap-1 text-[12px] font-medium text-ink-700 dark:text-ink-300 group-hover:text-rose-700 dark:group-hover:text-rose-300"> Visit ZevCommerce <svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5" aria-hidden="true"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a> <!-- Trailing "discover more" tile — softer surface, no
             accent bar. Hints that the suite has more we haven't
             listed (or will ship soon) without committing to specific
             names. Hidden on sm-only viewports because 2 + 1 odd
             columns looks cramped — re-appears at lg+. --> <a href="https://zevop.com" rel="noopener" class="group relative hidden lg:flex flex-col gap-3 p-6 bg-ink-50/40 dark:bg-ink-900/40 hover:bg-ink-100/50 dark:hover:bg-ink-800/50 transition-colors"> <span class="inline-flex items-center justify-center h-8 w-8 rounded-md bg-white dark:bg-ink-900 ring-1 ring-ink-200 dark:ring-ink-700 text-ink-500 dark:text-ink-400"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"> <path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <p class="text-[10px] font-mono uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
Suite
</p> <h3 class="text-[18px] font-semibold tracking-tight text-ink-950 dark:text-ink-50 leading-tight">
More from Zev
</h3> <p class="text-[12.5px] text-ink-600 dark:text-ink-400 leading-relaxed">
Discover the full Zev suite and what we're building next on  <span class="font-mono">zevop.com</span>.
</p> <span class="mt-auto inline-flex items-center gap-1 text-[12px] font-medium text-ink-700 dark:text-ink-300 group-hover:text-ink-900 dark:group-hover:text-ink-100">
Visit ZevOP
<svg width="12" height="12" viewBox="0 0 12 12" class="transition-transform group-hover:translate-x-0.5" aria-hidden="true"> <path d="M4 3l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </a> </div> <!-- Connector strip tying the family together. Hue order
           matches the column order — brand → violet → amber → rose
           — so each product's accent bleeds into the strip below
           it. Intentionally green-free; ZevCloud's identity is
           ink + brand teal, never green. --> <div aria-hidden="true" class="h-1 bg-gradient-to-r from-brand-500/60 via-violet-500/50 via-amber-500/50 to-rose-500/60"></div> </div> <p class="mt-6 text-[12px] text-ink-500 dark:text-ink-400 flex flex-wrap items-center gap-2"> <span>A ZevOP Technologies platform</span> <span aria-hidden="true">·</span> <a href="https://zevop.com" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100 underline underline-offset-2" rel="noopener"> zevop.com </a> </p> </div> </section> <section class="relative"> <div class="mx-auto max-w-7xl px-5 sm:px-8 py-20 sm:py-28"> <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-700 via-brand-600 to-brand-800 px-6 sm:px-12 py-16 sm:py-20 text-center text-white"> <div aria-hidden="true" class="absolute inset-0 opacity-30" style="background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px); background-size: 28px 28px;"></div> <div class="relative"> <h2 class="text-[32px] sm:text-[44px] font-semibold tracking-tight leading-tight"> Deploy without borders. </h2> <p class="mt-3 max-w-xl mx-auto text-[16px] sm:text-[17px] text-white/85"> <span data-sso-show="anonymous">Build, own, and scale on a platform that bills you for what you ship, never for who logs in. Free to start, five minutes to your first deploy.</span> <span data-sso-show="zevid-only">Pick up where you left off. Your services and team are one click away.</span> <span data-sso-show="dashboard">Pick up where you left off. Your services and team are one click away.</span> </p> <div class="mt-8 flex flex-wrap items-center justify-center gap-3"> <!-- Anonymous — link directly to the dashboard. ZevID's
               sign-up URL won't bounce users back without a proper
               challenge code, so we let the dashboard's own login
               handle SSO end-to-end (and skip the round-trip if
               the user is already signed in). --> <a href="https://console.zevcloud.net" data-sso-show="anonymous" class="inline-flex h-11 items-center px-5 rounded-md bg-white text-brand-700 hover:bg-brand-50 font-semibold shadow-sm">
Get started, free
</a> <!-- ZevID-only — "Continue as <name>" with avatar. The href
               is rewritten by zevid-sso.ts at runtime so it bounces
               through dashboard SSO instead of the sign-in form. --> <a href="https://console.zevcloud.net" data-sso-dashboard data-sso-show="zevid-only" class="inline-flex h-11 items-center pl-1.5 pr-5 gap-2.5 rounded-md bg-white text-brand-700 hover:bg-brand-50 font-semibold shadow-sm"> <span class="relative h-7 w-7 rounded-full bg-brand-100 ring-1 ring-brand-700/15 inline-flex items-center justify-center overflow-hidden"> <img data-sso-avatar src="" alt="" class="h-full w-full object-cover" hidden> <span data-sso-avatar-fallback class="text-[10px] font-semibold text-brand-700"></span> </span>
Continue as <span data-sso-name class="font-bold">there</span> </a> <!-- Dashboard — direct entry. --> <a href="https://console.zevcloud.net" data-sso-dashboard data-sso-show="dashboard" class="inline-flex h-11 items-center px-5 rounded-md bg-white text-brand-700 hover:bg-brand-50 font-semibold shadow-sm">
Open your dashboard
</a> <a href="https://docs.zevcloud.net" class="inline-flex h-11 items-center px-5 rounded-md border border-white/30 text-white hover:bg-white/10 font-medium" rel="noopener">
Read the docs
</a> </div> </div> </div> </div> </section>  </main> <footer class="border-t border-ink-200 dark:border-ink-800 bg-ink-50/50 dark:bg-ink-900/40 mt-20"> <div class="mx-auto max-w-7xl px-5 sm:px-8 py-14"> <div class="grid grid-cols-2 md:grid-cols-5 gap-8 md:gap-6"> <!-- Brand column — spans 2 cols on mobile so the wordmark
           gets room to breathe; collapses to 1 on desktop. --> <div class="col-span-2 md:col-span-2"> <a href="/" class="inline-flex items-center gap-2 font-semibold tracking-tight text-ink-900 dark:text-ink-50 " style="font-size:16.8px"> <span class="relative inline-block rounded-md" style="width:28px;height:28px"> <img src="https://cdn.zevop.com/zevop/zev-icon-dark.png" alt="ZevCloud" width="28" height="28" class="absolute inset-0 rounded-md dark:hidden"> <img src="https://cdn.zevop.com/zevop/zev-icon-light.png" alt="" aria-hidden="true" width="28" height="28" class="absolute inset-0 rounded-md hidden dark:block"> </span> <span>ZevCloud</span> </a> <p class="mt-4 text-[14px] leading-relaxed text-ink-600 dark:text-ink-400 max-w-sm"> Deploy without borders. Build. Own. Scale. Apps, databases, WordPress, static sites,
          storage, and domains on one platform. Billed in Naira or USD
          through ZevPay.
</p> <div class="mt-5"> <a href="https://nira.org.ng" rel="noopener nofollow" aria-label="View NiRA accreditation" class="inline-flex items-center gap-2 text-[11px] text-ink-500 dark:text-ink-400 hover:text-ink-700 dark:hover:text-ink-200 "><span class="relative inline-block h-5 w-5 shrink-0 opacity-90"><img src="/assets/ng-accredition.png" alt=".ng Accredited Registrar. National Internet Registry of Nigeria" width="20" height="20" class="absolute inset-0 h-full w-full select-none dark:hidden" loading="lazy" decoding="async"><img src="/assets/ng-accredition-white.png" alt="" width="20" height="20" class="absolute inset-0 h-full w-full select-none hidden dark:block" loading="lazy" decoding="async" aria-hidden="true"></span>
NiRA Accredited Registrar
</a> </div> </div> <div> <h4 class="text-[12px] font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400 mb-3">
Products
</h4> <ul class="space-y-2 text-[13px]"> <li> <a href="/products/apps" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100"> Apps </a> </li><li> <a href="/products/databases" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100"> Databases </a> </li><li> <a href="/products/wordpress" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100"> WordPress </a> </li><li> <a href="/products/sites" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100"> Sites </a> </li><li> <a href="/products/storage" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100"> Storage </a> </li><li> <a href="/products/domains" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100"> Domains </a> </li> </ul> </div> <div> <h4 class="text-[12px] font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400 mb-3">
Resources
</h4> <ul class="space-y-2 text-[13px]"> <li><a href="/pricing" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100">Pricing</a></li> <li><a href="https://docs.zevcloud.net" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100" rel="noopener">Documentation</a></li> <li><a href="https://status.zevop.com" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100" target="_blank" rel="noopener">System status</a></li> <li><a href="https://blog.zevcloud.net" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100" rel="noopener">Blog</a></li> </ul> </div> <div> <h4 class="text-[12px] font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400 mb-3">
Company
</h4> <ul class="space-y-2 text-[13px]"> <li><a href="https://zevop.com" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100" rel="noopener">ZevOP Technologies</a></li> <li><a href="/legal/terms" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100">Terms</a></li> <li><a href="/legal/privacy" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100">Privacy</a></li> <li><a href="/legal/aup" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100">Acceptable use</a></li> <li><a href="/contact" class="text-ink-700 dark:text-ink-300 hover:text-ink-900 dark:hover:text-ink-100">Contact</a></li> </ul> </div> </div> <div class="mt-12 pt-6 border-t border-ink-200 dark:border-ink-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3"> <p class="text-[12px] text-ink-500 dark:text-ink-400">
© 2026 ZevOP Technologies. All rights reserved.
</p> <div class="flex items-center gap-3 text-ink-500 dark:text-ink-400"> <a href="https://x.com/zevcloud" class="hover:text-ink-900 dark:hover:text-ink-100" rel="noopener" aria-label="Twitter"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg> </a> <a href="https://github.com/zevop" class="hover:text-ink-900 dark:hover:text-ink-100" rel="noopener" aria-label="GitHub"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"></path></svg> </a> </div> </div> </div> </footer> <!-- ZevID SSO context — hydrates the nav (and any [data-sso-*]
         element on the page) when the user is already logged in
         elsewhere in the ZevOP suite. Astro processes <script> with
         TS/path aliases at build time and emits a hashed bundle. --> <script type="module">const i=document.documentElement,d=i.dataset.zevidApi||"",u=i.dataset.dashboardUrl||"",l=i.dataset.dashboardProbe||"",c=i.dataset.dashboardCookie||"",m=i.dataset.continueUrl||u||"";i.dataset.ssoState||(i.dataset.ssoState="anonymous");c&&f(c)&&r("dashboard");d&&h();function h(){const e=new URL(d).origin;if(y())return;const t=o=>{o.origin===e&&(!o.data||typeof o.data.authenticated!="boolean"||(s(),p(o.data)))};window.addEventListener("message",t);const n=document.createElement("iframe");n.src=`${d}/v1/auth/session-check?origin=${encodeURIComponent(window.location.origin)}`,n.style.display="none",n.setAttribute("aria-hidden","true"),n.id="zevid-session-check",document.body.appendChild(n);const a=window.setTimeout(s,3e3);function s(){window.removeEventListener("message",t),window.clearTimeout(a);const o=document.getElementById("zevid-session-check");o&&o.remove()}}async function p(e){if(!(!e.authenticated||!e.activeAccount)){if(window.__zevidSession=e,w(e),r("zevid-only"),c&&f(c)){r("dashboard");return}if(l)try{(await fetch(l,{credentials:"include",cache:"no-store",headers:{Accept:"application/json"}})).ok&&r("dashboard")}catch{}}}function f(e){const t=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return new RegExp(`(?:^|; )${t}=([^;]+)`).test(document.cookie)}function y(){const e=navigator.userAgent;return/Safari/.test(e)&&!/Chrome/.test(e)&&!/Chromium/.test(e)}function b(e){return e.firstName?e.firstName.trim().split(/\s+/)[0]:e.email.split("@")[0]}function r(e){window.__ssoState=e,i.dataset.ssoState=e;const t=e==="dashboard"?u:m;document.querySelectorAll("a[data-sso-dashboard]").forEach(n=>{t&&(n.href=t)})}function w(e){const t=e.activeAccount,n=b(t);document.querySelectorAll("[data-sso-name]").forEach(a=>{a.textContent=n}),document.querySelectorAll("[data-sso-email]").forEach(a=>{a.textContent=t.email}),document.querySelectorAll("img[data-sso-avatar]").forEach(a=>{if(t.displayPicture){a.src=t.displayPicture,a.alt=n,a.hidden=!1;const s=a.parentElement?.querySelector("[data-sso-avatar-fallback]");s&&(s.hidden=!0)}else{const s=(n.match(/\b[A-Za-z]/g)||[]).slice(0,2).join("").toUpperCase()||"·",o=a.parentElement?.querySelector("[data-sso-avatar-fallback]");o&&(o.textContent=s,o.hidden=!1,a.hidden=!0)}})}</script> </body> </html>