From 99b26680b6f307984536804fd6f8bea22a77b5c8 Mon Sep 17 00:00:00 2001
From: Jon Staab <jstaab@protonmail.com>
Date: Tue, 28 Apr 2026 14:14:18 -0700
Subject: [PATCH] feat: rework hosting page to 2+1 architecture (#231)

---
 src/routes/spaces/create/+page.svelte | 131 ++++++++++++++------------
 1 file changed, 73 insertions(+), 58 deletions(-)

diff --git a/src/routes/spaces/create/+page.svelte b/src/routes/spaces/create/+page.svelte
index 774688e5..5ac9a33d 100644
--- a/src/routes/spaces/create/+page.svelte
+++ b/src/routes/spaces/create/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import Server from "@assets/icons/server.svg?dataurl"
+  import CloudCheck from "@assets/icons/cloud-check.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -12,78 +14,91 @@
   <PageContent class="flex flex-col items-center gap-2 p-2 pt-4">
     <PageHeader>
       {#snippet title()}
-        <div>Create your own Space</div>
+        <div>Choose your Hosting Plan</div>
       {/snippet}
       {#snippet info()}
-        <p>Get started with one of our trusted partners, or learn how to host your own space.</p>
+        <p>
+          Select how you want to deploy and manage your new Space. You can always migrate later.
+        </p>
       {/snippet}
     </PageHeader>
-    <div class="grid w-full max-w-lg grid-cols-1 gap-2 lg:max-w-4xl lg:grid-cols-2">
-      <div class="card2 bg-alt flex flex-col gap-4">
-        <div class="flex flex-col gap-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-3">
-              <Icon icon={Server} />
-              <h3 class="text-lg font-bold">Self-Host your Space</h3>
+    <div class="flex w-full max-w-lg flex-col gap-4 lg:max-w-4xl">
+      <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
+        <div class="card2 bg-alt flex flex-col gap-5">
+          <div class="flex flex-col gap-3">
+            <div class="bg-primary/20 flex h-10 w-10 items-center justify-center rounded-md">
+              <Icon icon={CloudCheck} class="text-primary" />
             </div>
-            <div class="badge badge-neutral">Recommended</div>
+            <div class="flex flex-col gap-1">
+              <h3 class="text-lg font-bold">Community</h3>
+              <div class="text-xs font-semibold tracking-wider opacity-60">SELF-HOSTED</div>
+            </div>
+            <p class="text-sm opacity-70">
+              For technical users who want full control. Deploy on your own infrastructure and
+              manage your own updates and scaling.
+            </p>
           </div>
-          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li>Unlimited customization and control</li>
-            <li>Free and open source software</li>
-            <li>Full-featured admin dashboards available</li>
-            <li>Requires some technical skills</li>
+          <ul class="flex flex-col gap-2 text-sm">
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="opacity-60" />
+              Open source core
+            </li>
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="opacity-60" />
+              Community support
+            </li>
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="opacity-60" />
+              Bring your own infra
+            </li>
           </ul>
+          <Link
+            external
+            class="btn btn-neutral mt-auto"
+            href="https://gitea.coracle.social/coracle/zooid">
+            Get started
+            <Icon icon={ArrowRight} />
+          </Link>
         </div>
-        <Link external class="btn btn-primary" href="https://github.com/coracle-social/zooid">
-          Get Started
-          <Icon icon={ArrowRight} />
-        </Link>
-      </div>
-      <div class="card2 bg-alt flex flex-col gap-4">
-        <div class="flex flex-col gap-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2">
-              <img alt="Coracle Logo" src="/coracle.png" class="h-7 w-7" />
+        <div class="card2 bg-alt border-primary flex flex-col gap-5 border">
+          <div class="flex flex-col gap-3">
+            <div class="flex items-start justify-between">
+              <img alt="Coracle Logo" src="/coracle.png" class="h-10 w-10" />
+              <div class="badge badge-primary">Recommended</div>
+            </div>
+            <div class="flex flex-col gap-1">
               <h3 class="text-lg font-bold">Coracle Hosting</h3>
+              <div class="text-xs font-semibold tracking-wider opacity-60">FULLY MANAGED</div>
             </div>
-            <div class="badge badge-neutral">Recommended</div>
+            <p class="text-sm opacity-70">
+              The premium experience. We handle the infrastructure, security updates, and scaling so
+              you can focus on your community.
+            </p>
           </div>
-          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li>Simple setup, support included</li>
-            <li>Free and open source software — no vendor lock-in</li>
-            <li>Advanced access controls and relay policies</li>
-            <li>Full-featured admin dashboard</li>
+          <ul class="flex flex-col gap-2 text-sm">
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="text-primary" />
+              One-click deployment
+            </li>
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="text-primary" />
+              Automated backups & scaling
+            </li>
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="text-primary" />
+              Priority support
+            </li>
           </ul>
+          <Link external class="btn btn-primary mt-auto" href="https://hosting.coracle.social">
+            Start for free
+            <Icon icon={ArrowRight} />
+          </Link>
         </div>
-        <Link external class="btn btn-neutral" href="https://hosting.coracle.social">
-          Get Started
-          <Icon icon={ArrowRight} />
-        </Link>
       </div>
-      <div class="card2 bg-alt flex flex-col gap-4">
-        <div class="flex flex-col gap-4">
-          <div class="self-start">
-            <img
-              alt="Relay Tools"
-              src="https://relay.tools/17.svg"
-              class="-my-20 -ml-2 hidden h-48 dark:block"
-              style="filter: contrast(50%)" />
-            <img
-              alt="Relay Tools"
-              src="https://relay.tools/19.svg"
-              class="-my-20 -ml-2 h-48 dark:hidden"
-              style="filter: contrast(50%)" />
-          </div>
-          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li>Independently run</li>
-            <li>Customizable relay policies</li>
-            <li>Simple management dashboard</li>
-            <li>Support available</li>
-          </ul>
-        </div>
-        <Link external class="btn btn-neutral" href="https://relay.tools/signup">
-          Get Started
+      <div class="flex flex-col items-center justify-center gap-2 py-2 text-sm opacity-70">
+        <span>Want to host on other servers?</span>
+        <Link external class="link center gap-1" href="https://relay.tools/signup">
+          Other hosting options
           <Icon icon={ArrowRight} />
         </Link>
       </div>