Add inlets-cloud to website

Signed-off-by: Alex Ellis (OpenFaaS Ltd) <[email protected]>

_includes/cloud/cloud-cta.html

@@ -0,0 +1,17 @@
+
+<div class="bg-indigo-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-12 lg:px-8 lg:flex lg:items-center lg:justify-between">
+      <h2 class="font-bold tracking-tight text-gray-900 md:text-4xl">
+        <span class="block mb-2 text-3xl">Register for access to inlets cloud.</span>
+        <span class="block text-indigo-600 text-2xl">Free during beta.</span>
+      </h2>
+      <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+        <div class="inline-flex rounded-md shadow">
+          <a href="https://cloud.inlets.dev/" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
+              Register now
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+

_includes/cloud/cloud-hero.html

@@ -0,0 +1,118 @@
+<div class="bg-gray-100">
+    <div class="pt-12 sm:pt-16 lg:pt-20">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center">
+          <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl lg:text-5xl">
+            Managed Tunnels with Inlets Cloud
+          </h2>
+          <p class="mt-4 text-xl text-gray-600">
+            Get instant HTTPS or SSH tunnels to your local network, without managing infrastructure.
+          </p>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-8 bg-white pb-5 sm:mt-12 sm:pb-8 lg:pb-12">
+      <div class="relative">
+        <div class="absolute inset-0 h-1/2 bg-gray-100"></div>
+        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="max-w-lg mx-auto rounded-lg shadow-lg overflow-hidden lg:max-w-none lg:flex">
+            <div class="flex-1 bg-white px-6 py-4 lg:p-6">
+              <h3 class="text-2xl font-extrabold text-gray-900 sm:text-3xl">
+               How do managed tunnels work?
+              </h3>
+              <p class="mt-6 text-base leading-7 text-gray-500">
+                Bring your domain, and we'll do the rest. Just copy and paste the command or YAML for the inlets client.
+              </p>
+
+              <div class="mt-8">
+                <div class="flex items-center">
+                  <h4 class="flex-shrink-0 pr-4 bg-white text-sm tracking-wider font-semibold uppercase text-indigo-600">
+                    For self-hosting, sharing work with your team, remote access, and support.
+                  </h4>
+                  <div class="flex-1 border-t-2 border-gray-200"></div>
+                </div>
+                <ul class="mt-8 space-y-3 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-1">
+
+
+                  <li class="flex items-start lg:col-span-1 lg:pb-2">
+                    <div class="flex-shrink-0">
+                      <!-- Heroicon name: check-circle -->
+                      <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                      </svg>
+                    </div>
+                    <p class="ml-3 text-sm text-gray-700">
+                      Expose reverse proxies like: Caddy, Nginx &amp; Traefik
+                    </p>
+                  </li>
+
+                  <li class="flex items-start lg:col-span-1 lg:pb-2">
+                    <div class="flex-shrink-0">
+                      <!-- Heroicon name: check-circle -->
+                      <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                      </svg>
+                    </div>
+                    <p class="ml-3 text-sm text-gray-700">
+                      Bring your own custom domains for your tunnels
+                    </p>
+                  </li>
+
+
+                  <li class="flex items-start lg:col-span-1 lg:pb-2">
+                    <div class="flex-shrink-0">
+                      <!-- Heroicon name: check-circle -->
+                      <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                      </svg>
+                    </div>
+                    <p class="ml-3 text-sm text-gray-700">
+                      Connect Kubernetes Ingress or Istio to the Internet
+                    </p>
+                  </li>
+
+                  <li class="flex items-start lg:col-span-1 lg:pb-2">
+                    <div class="flex-shrink-0">
+                      <!-- Heroicon name: check-circle -->
+                      <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                      </svg>
+                    </div>
+                    <p class="ml-3 text-sm text-gray-700">
+                      Get fast, low-latency connections for EU and US.
+                    </p>
+                  </li>
+
+                  <li class="flex items-start lg:col-span-1 lg:pb-2">
+                    <div class="flex-shrink-0">
+                      <!-- Heroicon name: check-circle -->
+                      <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                      </svg>
+                    </div>
+                    <p class="ml-3 text-sm text-gray-700">
+                      SSH into any host on your network with <a class="underline inlets-blue-900" href="/blog/2024/10/17/ssh-with-inlets-cloud.html">sshmux</a>
+                    </p>
+                  </li>
+
+                  <li class="flex items-start lg:col-span-1 lg:pb-2">
+                    <div class="flex-shrink-0">
+                      <!-- Heroicon name: check-circle -->
+                      <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                      </svg>
+                    </div>
+                    <p class="ml-3 text-sm text-gray-700">
+                      Free support via our Discord community.
+                    </p>
+                  </li>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>

_includes/cloud/cloud-tour.html

@@ -0,0 +1,63 @@
+<div class="bg-white">
+    <div class="relative mb-3">
+        <h3 class="text-center mb-2 text-xl leading-8 font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
+            Create new tunnels in seconds ⏱️
+        </h3>
+        <p>
+            <img class="relative mx-auto" width="800" src="/images/cloud/welcome.png" alt="The inlets-cloud dashboard">
+        </p>
+        <p class="my-6 max-w-3xl mx-auto text-center text-l leading-7 text-gray-500">
+            From here you can create tunnels, verify new domains and understand your recent usage.
+        </p>
+    </div>
+
+
+    <div class="relative mb-3">
+        <h3 class="text-center mb-2 text-xl leading-8 font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
+            Your tunnel at a glance
+        </h3>
+        <p>
+            <img class="relative mx-auto" width="800" src="/images/cloud/tunnel_stats.png" alt="The inlets-cloud dashboard">
+        </p>
+        <p class="my-6 max-w-3xl mx-auto text-center text-l leading-7 text-gray-500">
+            See how much traffic is passing through your tunnel, and its configuration in one place.
+        </p>
+    </div>
+
+
+    <div class="relative mb-3">
+        <h3 class="text-center mb-2 text-xl leading-8 font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
+            Register custom domains
+        </h3>
+        <p>
+            <img class="relative mx-auto" width="800" src="/images/cloud/domains.png" alt="The inlets-cloud dashboard">
+        </p>
+        <p class="my-6 max-w-3xl mx-auto text-center text-l leading-7 text-gray-500">
+            Once you've verified a domain, you can add as many tunnels as you want under it.
+        </p>
+    </div>
+
+    <div class="relative mb-3">
+        <h3 class="text-center text-2xl leading-8 font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
+            Kubernetes YAML or CLI command?
+        </h3>
+        <p>
+            <img class="relative mx-auto" width="800" src="/images/cloud/connect-yaml.png" alt="The inlets-cloud dashboard">
+        </p>
+        <p class="my-6 max-w-3xl mx-auto text-center text-l leading-7 text-gray-500">
+        Whether you're using Kubernetes, and want some YAML to apply, are using a CLI, or systemd, just hit copy/paste and you're all set.
+        </p>
+    </div>
+
+    <div class="relative mb-3">
+        <h3 class="text-center mb-2 text-2xl leading-8 font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
+            Connect to any device with SSH
+        </h3>
+            <img class="relative mx-auto" width="800" src="http://img.youtube.com/vi/ws3-VlL2884/maxresdefault.jpg" alt="Video demo of SSH tunnels">
+        <p class="my-6 max-w-3xl mx-auto text-center text-l leading-7 text-gray-500">
+        There's no need to install a VPN, and each host gets its own custom sub-domain. IP allow lists combined with key-based logins keep your devices secure.  <a class="underline inlets-blue-900" href="https://www.youtube.com/watch?v=ws3-VlL2884">Demo of SSH with inlets-cloud</a>
+        </p>
+    </div>
+
+
+</div>

_includes/footer.html

@@ -22,8 +22,8 @@
         </div>
         <div class="mt-8 md:mt-0 md:order-1 flex justify-center">
             <div class="text-center text-base leading-6 text-gray-400 ml-3">
-                <p class="text-2xl">Find us on the</p>
-                <img style="max-width: 18em" src="/images/cncf-landscape.png">
+                <p class="text-l">Find us on the</p>
+                <img style="max-width: 10em" src="/images/cncf-landscape.png">
             </div>
         </div>
     </div>

_includes/header.html

@@ -22,6 +22,8 @@
                 <a href="/#top" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">About</a>
                 <a href="/blog/" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Blog</a>
                 <a href="/pricing/" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Pricing</a>
+                <a href="/cloud/" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Inlets Cloud</a>
+
                 <a href="/#comparison" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Comparison</a>
                 <a href="/#features" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Features</a>
                 <a href="/#faq" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">FAQ</a>

_includes/start.html

@@ -1,8 +1,8 @@
 <div class="bg-indigo-50">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 py-12 lg:px-8 lg:flex lg:items-center lg:justify-between">
-    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 md:text-4xl">
-      <span class="block mb-2">Setup your first HTTP or TCP tunnel.</span>
-      <span class="block text-indigo-600">Completely private, self-hosted, no rate-limits.</span>
+    <h2 class="font-bold tracking-tight text-gray-900 md:text-4xl">
+      <span class="block mb-2 text-3xl">Setup your first HTTPS or TCP tunnel today.</span>
+      <span class="block text-indigo-600 text-2xl">It's private, self-hosted with no bandwidth or rate-limits.</span>
     </h2>
     <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
       <div class="inline-flex rounded-md shadow">

cloud/index.html

@@ -0,0 +1,13 @@
+---
+layout: default
+title: Inlets Cloud - managed tunnels
+---
+
+{% include cloud/cloud-hero.html %}
+
+{% include cloud/cloud-tour.html %}
+
+{% include cloud/cloud-cta.html %}
+
+<!-- {% include start.html %} -->
+<div style="padding-bottom: 20px;"></div>