enh: paywall refactor

packages/dashboard/src/routes/(static)/pricing/Paywall.svelte

@@ -1,25 +1,62 @@
 <script lang="ts">
-  import Card from './Card.svelte'
   import Testimonials from '$src/components/Testimonials.svelte'
-  import CtaButton from './CTAButton.svelte'
-  import { features } from './features'
-  import Deals from './Deals.svelte'
   import Features from './Features.svelte'
+  import SignupBox from './SignupBox.svelte'
+  import { userStore } from '$util/stores'
 </script>
 
 <div class="prose ml-auto mr-auto">
-  <p class="text-3xl text-center">PocketHost Access</p>
-  <p class="text-2xl text-center">
-    <span class="text-primary">$5/instance</span> or
-    <span class="text-primary">$25/unlimited</span>
-  </p>
-  <p class="text-xl text-accent text-center">7 Day Free Trial</p>
-  <div class="flex justify-center mt-10 mb-10">
-    <CtaButton />
+  <p class="text-3xl text-center text-white">Affordable Hosting</p>
+  <p class="text-xl text-center">Premium Performance</p>
+  <div class="flex flex-row justify-center mt-10 mb-10 gap-3">
+    <div class="btn btn-neutral btn-xs rounded-xl">Open Source</div>
+    <div class="btn btn-neutral btn-xs rounded-xl">No Limits</div>
+    <div class="btn btn-neutral btn-xs rounded-xl">Priority Support</div>
   </div>
 </div>
 
-<div class="flex justify-center mb-10">
+<div
+  class="grid grid-cols-1 md:grid-cols-3 justify-items-center gap-1 mb-10 mx-auto"
+>
+  <SignupBox
+    price="$5 / month"
+    title="Starter"
+    cta="Pay just $5 per instance for up to 5 instances, get access to all features."
+    features={[
+      '7 day risk-free trial',
+      '35+ regions',
+      'Unlimited bandwidth, storage, and CPU',
+      'FTP Access',
+      'Priority support',
+    ]}
+  />
+  <SignupBox
+    selected
+    price="$25 / month"
+    bestDeal
+    title="Unlimited"
+    cta="Pay just $25 monthly to get access to all features with unlimited instances! "
+    features={['Everything in the Starter plan', 'Unlimited instances']}
+  />
+  <SignupBox
+    buttonText="Become a Flounder"
+    price="$359 once"
+    title="Flounder - Lifetime"
+    cta="The lifetime deal won't last long, so get it while you can!"
+    features={[
+      'Everything in the Unlimited plan',
+      'Lifetime access',
+      'No recurring fees',
+      'Tee shirt',
+      '#onlyflounders private Discord',
+      '-Girlfriend',
+    ]}
+  />
+</div>
+
+<div
+  class="flex justify-center mb-10 bg-neutral rounded-2xl p-10 w-min mx-auto"
+>
   <iframe
     width="560"
     height="315"
@@ -33,11 +70,9 @@
 </div>
 
 <div class="flex flex-col gap-10 items-center">
+  <div class="text-3xl text-center pb-5">Features</div>
+
   <Features />
 </div>
 
-<Deals />
-
 <Testimonials />
-
-<CtaButton fixed />

packages/dashboard/src/routes/(static)/pricing/SignupBox.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { userStore } from '$util/stores'
+  import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
+  import Fa from 'svelte-fa'
+
+  export let selected: boolean = false
+  export let buttonText: string = 'Subscribe Now'
+  export let price: string
+  export let bestDeal: boolean = false
+  export let title: string
+  export let cta: string
+  export let features: string[]
+</script>
+
+<div
+  class="bg-neutral text-neutral-content rounded-xl p-7 pl-5 pr-5 prose w-72 {selected
+    ? 'border-2 border-warning'
+    : ''} transition-all duration-300"
+>
+  <div class="h-40 flex flex-col justify-start">
+    {#if bestDeal}
+      <div class="text-sm text-warning text-center">Best Deal</div>
+    {/if}
+    <div class="text-xl text-white text-center">{title}</div>
+    <div>
+      {cta}
+    </div>
+  </div>
+  <div class="h-40">
+    {#each features as feature}
+      <div class="flex flex-row gap-2">
+        <Fa
+          icon={feature.startsWith('-') ? faXmark : faCheck}
+          class={feature.startsWith('-') ? 'text-error' : 'text-primary'}
+        /><span class="text-white text-sm">{feature.replace('-', '')}</span>
+      </div>
+    {/each}
+  </div>
+  <div class="h-10 flex justify-center items-center">
+    <div class="text-3xl text-white text-center">{price}</div>
+  </div>
+  <div class="h-16 flex justify-center items-end">
+    <a
+      href={`https://store.pockethost.io/buy/d4b2d062-429c-49b4-9cdc-853aaeb17e20?checkout[custom][user_id]=${$userStore?.id}&checkout[email]=${$userStore?.email}`}
+      class="btn {selected
+        ? 'btn-warning'
+        : 'btn-neutral bg-neutral-700 text-white'} rounded-full"
+    >
+      {buttonText}
+    </a>
+  </div>
+</div>