feat: buy a courseapp template

2024-12-18 12:56:10 +01:00
parent 71017133a5
commit 5d1543b1f4
30 changed files with 853 additions and 34 deletions
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { buttonVariants } from '$lib/components/ui/button';
+  import { ShimmerButton } from '$lib/components/animation/shimmerbutton';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { cn } from '$lib/utils';
+  import BadgeCheck from 'lucide-svelte/icons/badge-check';
+
+  const PAYMENT_LINK = 'https://buy.stripe.com/8wM6pF5Sdabhbny28c';
+
+  const whatYouGet = [
+    'A custom template for your SAAS',
+    'A free 101 course on how to use your SAAS',
+    'Deploy to Vercel or Selfhost',
+    'Request 1 free revision',
+    'Get first draft in 48 hours'
+  ];
+
+  let { ctaLabel = 'Learn More', ctaClass = '' } = $props();
+</script>
+
+<Dialog.Root>
+  <!-- <span
+    class="absolute inset-0 z-30 flex items-center justify-center bg-black/50 opacity-0 transition-all duration-500 hover:opacity-80"
+  >
+</span> -->
+  <Dialog.Trigger class={cn(buttonVariants({ variant: 'default' }), `z-20 ${ctaClass}`)}>
+    {ctaLabel}
+  </Dialog.Trigger>
+
+  <Dialog.Content class="sm:max-w-[425px]">
+    <Dialog.Header>
+      <Dialog.Title>Buy A Custom Template</Dialog.Title>
+      <Dialog.Description>
+        Place an order for a custom template and we will ship it in 48 hours.
+      </Dialog.Description>
+    </Dialog.Header>
+    <div class="grid gap-4 py-4">
+      <p>What you get:</p>
+      <ul>
+        {#each whatYouGet as item}
+          <li class="mb-2 flex items-center gap-2">
+            <BadgeCheck class="text-green-700" />
+            {item}
+          </li>
+        {/each}
+      </ul>
+    </div>
+    <Dialog.Footer>
+      <ShimmerButton
+        href={PAYMENT_LINK}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="w-full px-6 shadow-2xl"
+      >
+        <span
+          class="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10"
+        >
+          Buy
+        </span>
+      </ShimmerButton>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>