fix: add price of template & adaptive style

apps/course-app/src/lib/components/buy-template/buy-template.svelte

@@ -35,7 +35,7 @@
       </Dialog.Description>
     </Dialog.Header>
     <div class="grid gap-4 py-4">
-      <p>What you get:</p>
+      <p>What you get for <strong>ONLY $20</strong>:</p>
       <ul>
         {#each whatYouGet as item}
           <li class="mb-2 flex items-center gap-2">
@@ -55,7 +55,7 @@
         <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
+          Buy ($20)
         </span>
       </ShimmerButton>
     </Dialog.Footer>

apps/course-app/src/lib/components/template-card/custom-template.svelte

@@ -7,12 +7,14 @@
 
 <div
   id="custom-template-card"
-  class="group relative mb-5 flex h-full w-full max-w-[340px] flex-col items-center justify-center rounded-md border px-4 py-2 shadow-2xl transition-all duration-500"
+  class="group relative mb-5 flex h-full w-4/5 max-w-[340px] flex-col items-center justify-center rounded-md border px-4 py-2 shadow-2xl transition-all duration-500"
 >
   <BorderBeam />
   <DotPattern />
   <img src={Santa} alt="Santa" class="z-20 h-28 w-28" />
-  <h3 class="z-20 mb-6 text-center font-sans text-5xl font-bold">Buy A Custom Template</h3>
+  <h3 class="z-20 mb-6 text-center font-sans text-3xl font-bold md:text-5xl">
+    Buy A Custom Template
+  </h3>
 
   <BuyTemplate ctaLabel="Learn More" />
 </div>

apps/course-app/src/lib/components/template-card/template-card.svelte

@@ -13,7 +13,7 @@
   let { template }: Props = $props();
 </script>
 
-<div class="mb-5 w-full max-w-[340px]">
+<div class="mb-5 w-[95%] max-w-[340px]">
   <Button
     href={template.url}
     variant="link"