feat: rework hosting page to 2+1 architecture (#231)
This commit is contained in:
Jon Staab
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user