Add holis to hosting suggestions

src/routes/spaces/create/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Server from "@assets/icons/server.svg?dataurl"
   import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
+  import HandShake from "@assets/icons/hand-shake.svg?dataurl"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
@@ -19,6 +20,27 @@
       {/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>
+            <div class="badge badge-neutral">Recommended</div>
+          </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>
+        </div>
+        <Link 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">
@@ -35,7 +57,25 @@
             <li>Full-featured admin dashboard</li>
           </ul>
         </div>
-        <Link external class="btn btn-primary" href="https://hosting.coracle.social">
+        <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="flex items-center gap-2">
+            <Icon icon={HandShake} />
+            <h3 class="text-lg font-bold">Holis Communities</h3>
+          </div>
+          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
+            <li>Simple self-serve space creation</li>
+            <li>Built-in moderation tools</li>
+            <li>Room-level access controls</li>
+            <li>Membship lists and invite codes</li>
+          </ul>
+        </div>
+        <Link external class="btn btn-neutral" href="https://hol.is">
           Get Started
           <Icon icon={ArrowRight} />
         </Link>
@@ -66,24 +106,6 @@
           <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 gap-3">
-            <Icon icon={Server} />
-            <h3 class="text-lg font-bold">Self-Hosted</h3>
-          </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>Cheapest option</li>
-          </ul>
-        </div>
-        <Link class="btn btn-neutral" href="https://github.com/coracle-social/zooid">
-          Get Started
-          <Icon icon={ArrowRight} />
-        </Link>
-      </div>
     </div>
   </PageContent>
 </Page>