enh: more pricing cosmetics

packages/dashboard/src/components/Testimonials.svelte

@@ -48,32 +48,30 @@
   ]
 </script>
 
-<div class="flex-1 p-5 flex flex-col">
+<div class="flex-1 sm:p-5 flex flex-col">
   <div class="text-3xl text-center pb-5">Testimonials</div>
-  <div class="flex flex-wrap gap-6 justify-center">
-    <div class="flex flex-wrap justify-center gap-4">
-      {#each testimonials as testimonial}
-        <div class="card bg-neutral shadow-xl w-96">
-          <div class="card-body">
-            <div class="flex mb-2">
-              <Fa icon={faStar} class="text-warning" />
-              <Fa icon={faStar} class="text-warning" />
-              <Fa icon={faStar} class="text-warning" />
-              <Fa icon={faStar} class="text-warning" />
-              <Fa icon={faStar} class="text-warning" />
-            </div>
-            <p class="mb-4">{testimonial.quote}</p>
-            <div class="card-actions">
-              <div>
-                <p class="font-bold">{testimonial.name}</p>
-                {#if testimonial.title}
-                  <p class="text-sm opacity-75">{testimonial.title}</p>
-                {/if}
-              </div>
+  <div class="flex flex-wrap justify-center gap-4">
+    {#each testimonials as testimonial}
+      <div class="card bg-neutral shadow-xl sm:max-w-96 w-full">
+        <div class="card-body">
+          <div class="flex mb-2">
+            <Fa icon={faStar} class="text-warning" />
+            <Fa icon={faStar} class="text-warning" />
+            <Fa icon={faStar} class="text-warning" />
+            <Fa icon={faStar} class="text-warning" />
+            <Fa icon={faStar} class="text-warning" />
+          </div>
+          <p class="mb-4">{testimonial.quote}</p>
+          <div class="card-actions">
+            <div>
+              <p class="font-bold">{testimonial.name}</p>
+              {#if testimonial.title}
+                <p class="text-sm opacity-75">{testimonial.title}</p>
+              {/if}
             </div>
           </div>
         </div>
-      {/each}
-    </div>
+      </div>
+    {/each}
   </div>
 </div>

packages/dashboard/src/env.ts

@@ -74,4 +74,4 @@ export const FTP_URL = (email: string) => {
   return `"${email}"@ftp.${PUBLIC_APEX_DOMAIN}:21`
 }
 
-export const DISCORD_URL = `https://discord.gg/HsSjcuPRWX`
+export const DISCORD_URL = `https://discord.gg/nVTxCMEcGT`

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

@@ -8,13 +8,18 @@
 <div
   class="flex flex-col items-center prose bg-neutral text-neutral-content rounded-lg relative w-full"
 >
-  <div class="text-2xl text-white pt-2">
+  <div class="text-2xl text-white pt-2 mb-5">
     {feature.title}
   </div>
   {#if feature.img}
-    <enhanced:img src={feature.img} class="pl-5 pr-5" />
+    <div class="flex justify-center mr-5 ml-5 mb-5 not-prose">
+      <enhanced:img
+        src={feature.img}
+        class="rounded border border-1 border-gray-500 w-fit"
+      />
+    </div>
   {/if}
-  <div class="text-xl p-5">{@html feature.description}</div>
+  <div class="text-xl p-5 pt-0">{@html feature.description}</div>
   <div
     class="absolute top-0 left-0 text-primary-content text-2xl bg-primary p-2 rounded-br-lg rounded-tl-lg"
   >

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

@@ -1,7 +1,10 @@
 <script lang="ts">
   import Testimonials from '$src/components/Testimonials.svelte'
+  import Fa from 'svelte-fa'
   import Features from './Features.svelte'
   import SignupBox from './SignupBox.svelte'
+  import { faPlay } from '@fortawesome/free-solid-svg-icons'
+  import thumb from './011.jpg?enhanced'
 </script>
 
 <div class="prose ml-auto mr-auto">
@@ -14,9 +17,7 @@
   </div>
 </div>
 
-<div
-  class="grid grid-cols-1 md:grid-cols-3 justify-items-center gap-1 mb-10 mx-auto"
->
+<div class="grid grid-cols-1 md:grid-cols-3 justify-items-center gap-1 mx-auto">
   <SignupBox
     price="$5 / month"
     title="Starter"
@@ -54,21 +55,25 @@
 </div>
 
 <div
-  class="flex justify-center mb-10 bg-neutral rounded-2xl p-10 w-min mx-auto"
+  class="relative flex flex-col items-center mb-10 p-2 bg-neutral rounded-2xl w-fit mx-auto max-w-96"
 >
-  <iframe
-    width="560"
-    height="315"
-    src="https://www.youtube.com/embed/Xe0FrGzlcVM?si=XTJJ7pmp9cwjBOMY"
-    title="YouTube video player"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    referrerpolicy="strict-origin-when-cross-origin"
-    allowfullscreen
-  ></iframe>
+  <a
+    href="https://www.youtube.com/watch?v=Xe0FrGzlcVM"
+    target="_blank"
+    class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-neutral rounded-2xl p-5"
+  >
+    <Fa icon={faPlay} class="text-white text-4xl" />
+  </a>
+  <a
+    href="https://www.youtube.com/watch?v=Xe0FrGzlcVM"
+    target="_blank"
+    aria-label="PocketHost Demo"
+  >
+    <enhanced:img src={thumb} alt="PocketHost Demo" class="rounded" />
+  </a>
 </div>
 
-<div class="flex flex-col gap-10 items-center">
+<div class="flex flex-col gap-10 items-center mb-10">
   <div class="text-3xl text-center pb-5">Features</div>
 
   <Features />

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

@@ -13,7 +13,7 @@
 </script>
 
 <div
-  class="bg-neutral text-neutral-content rounded-xl p-7 pl-5 pr-5 prose w-72 {selected
+  class="bg-neutral text-neutral-content rounded-xl p-7 pl-5 pr-5 prose w-72 mb-10 {selected
     ? 'border-2 border-warning'
     : ''} transition-all duration-300"
 >

packages/dashboard/src/routes/(static)/pricing/features.ts

@@ -1,3 +1,4 @@
+import { DISCORD_URL } from '$src/env'
 import regions from './regions.png?enhanced'
 
 export const features = [
@@ -17,9 +18,9 @@ export const features = [
     description: `Get started for just $5 per instance. After 5 instances, it's free.`,
   },
   {
-    title: 'Unlimited Bandwidth, Storage, and CPU',
+    title: 'Unmetered',
     description:
-      'Access to unlimited bandwidth, storage, and computational resources under our <a href="/docs/pricing-ethos" class="link">fair use policy</a>.',
+      'Enjoy unmetered bandwidth, storage, and computational resources under our <a href="/docs/pricing-ethos" class="link">fair use policy</a>.',
   },
 
   {
@@ -27,56 +28,54 @@ export const features = [
     description: 'Easily access your data from any FTP client.',
   },
   {
-    title: 'Run every version of PocketBase',
+    title: 'PocketBase Versions',
     description: `We support the latest patch of every minor release of PocketBase.`,
   },
   {
-    title: 'Enterprise-Grade Security',
+    title: 'Secure',
     description:
       'Infrastructure secured with RSA-2048 encryption and industry-standard security protocols.',
   },
 
   {
-    title: 'Community Support',
-    description:
-      'Access to our community Discord platform with over 1,000 developers and technical support resources.',
+    title: 'Community',
+    description: `Access to <a href="${DISCORD_URL}" class="link">Discord</a> with over 1,500 developers and technical resources.`,
   },
   {
-    title: 'Priority Support Channel',
-    description:
-      'Subscribers receive access to dedicated support channels via Discord.',
+    title: 'Priority Support',
+    description: `Access to private support channels on <a href="${DISCORD_URL}" class="link">Discord</a>.`,
   },
   {
-    title: 'Domain Customization',
+    title: 'Custom Domains',
     description:
       'Seamless custom domain integration for your PocketHost instances.',
   },
   {
-    title: 'Lifetime Access Option',
+    title: 'Lifetime Option',
     description:
       'Limited-time opportunity for lifetime Pro tier access (up to 250 instances) with a single payment.',
   },
   {
-    title: 'Early Access to New Tech',
+    title: 'Early Access',
     description: `Get your hands on our experimental <a href="/blog/announcing-pocker" class="link">Pocker</a> tech before anyone else. Help us push the boundaries of what's possible.`,
   },
   {
-    title: 'Enterprise Reliability',
+    title: 'Reliable',
     description:
       'Industry-leading 99.95% uptime guarantee ensures consistent application availability.',
   },
   {
-    title: 'Managed Infrastructure',
+    title: 'Managed',
     description:
       'Comprehensive infrastructure management including scaling, backups, and maintenance operations.',
   },
   {
-    title: 'Hack More, Pay Less',
+    title: 'Affordable',
     description:
       'Why waste time managing servers? Put your resources into building the next big thing. Your wallet (and your future app) will thank you.',
   },
   {
-    title: 'Open Source Support',
+    title: 'Open Source',
     description:
       'Your subscription directly supports the development of open-source PocketBase and PocketHost projects.',
   },

packages/dashboard/src/routes/(static)/support/+page.svelte

@@ -1,3 +1,7 @@
+<script>
+  import { DISCORD_URL } from '$src/env'
+</script>
+
 <div class="container mx-auto py-8 px-4">
   <h1 class="font-bold text-4xl mb-6">Support</h1>
 
@@ -12,9 +16,8 @@
 
   <h2 class="font-bold text-2xl mb-4 mt-10">Discord</h2>
   <p>
-    We also have a <a class="link" href="https://discord.gg/nVTxCMEcGT"
-      >Discord server</a
-    > with over 1,000 community members ready to help.
+    We also have a <a class="link" href={DISCORD_URL}>Discord server</a> with over
+    1,500 community members ready to help.
   </p>
 
   <h2 class="font-bold text-2xl mb-4 mt-10">Email Support</h2>