From 9c1b0bb9c02eca4aa8250bf643186ce522902ef6 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 1 Jun 2025 04:45:16 +0100
Subject: [PATCH] feat: enable fonts by theme(courseapp)

---
 apps/course-app/src/routes/+page.svelte       |  7 ++--
 packages/course-app/lib/scaffoldTemplate.ts   | 20 +++++-----
 packages/course-app/package.json              |  2 +-
 packages/course-app/src/template/package.json |  1 +
 packages/course-app/src/template/src/app.css  |  4 +-
 .../lib/components/bootcamp/CourseCard.svelte |  2 +-
 .../bootcamp/TestimonialCard.svelte           |  2 +-
 .../src/lib/components/bootcamp/index.ts      |  8 +++-
 .../components/bootcamp/pages/Course.svelte   | 10 ++---
 .../lib/components/bootcamp/pages/Home.svelte | 16 ++++----
 .../template/src/lib/components/cal/index.ts  |  8 +++-
 .../src/lib/components/cal/pages/Home.svelte  |  2 +-
 .../src/lib/components/classic/index.ts       |  9 ++++-
 .../lib/components/classic/pages/Home.svelte  | 10 +++--
 .../lib/components/examprep/CourseCard.svelte |  2 +-
 .../src/lib/components/examprep/index.ts      |  9 ++++-
 .../components/examprep/pages/Course.svelte   |  8 ++--
 .../lib/components/examprep/pages/Home.svelte | 12 +++---
 .../src/template/src/lib/components/index.ts  | 39 ++++++++++++++-----
 .../src/lib/components/minimal/index.ts       |  9 ++++-
 .../lib/components/minimal/pages/Home.svelte  |  2 +-
 .../src/lib/components/posthog/index.ts       |  8 +++-
 .../lib/components/posthog/pages/Home.svelte  | 13 ++++---
 .../src/lib/components/webflow/index.ts       |  9 ++++-
 .../src/template/src/routes/+layout.svelte    |  8 +++-
 .../course-app/src/template/svelte.config.js  | 16 +++++---
 .../src/template/tailwind.config.ts           | 26 ++++++++++++-
 packages/course-app/templates.json            |  4 ++
 packages/course-app/utils/copyFolder.ts       |  3 +-
 29 files changed, 179 insertions(+), 90 deletions(-)

diff --git a/apps/course-app/src/routes/+page.svelte b/apps/course-app/src/routes/+page.svelte
index 93c86703..8d1be1bf 100644
--- a/apps/course-app/src/routes/+page.svelte
+++ b/apps/course-app/src/routes/+page.svelte
@@ -95,15 +95,14 @@
         <BlurIn
           class="pointer-events-none flex max-w-2xl flex-col items-center whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-2xl font-semibold leading-none tracking-tighter text-transparent md:mb-4 md:block md:text-4xl lg:text-6xl"
         >
-          Create an <span class="font-mono italic text-blue-700">Academy</span>
-          <span>Site for your SAAS in</span>
+          Create a <span class="font-mono italic text-blue-700">Course</span>
+          <span>Site for your Product in</span>
           <span class="ml-1 font-mono italic text-blue-700">MINUTES</span>
         </BlurIn>
 
         <BlurFade delay={0.25}>
           <p class="text-md max-w-[500px] text-center">
-            With our prebuilt templates, you can setup a fully functional customer educational
-            website for your product & idea in minutes.<br />
+            With our prebuilt templates, you can setup a fully functional course website for your product & idea in minutes.<br />
             <span>
               Similar to the likes of
 
diff --git a/packages/course-app/lib/scaffoldTemplate.ts b/packages/course-app/lib/scaffoldTemplate.ts
index c11cd0e2..09241f78 100644
--- a/packages/course-app/lib/scaffoldTemplate.ts
+++ b/packages/course-app/lib/scaffoldTemplate.ts
@@ -1,10 +1,10 @@
 import chalk from 'chalk';
-import ora from 'ora';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
 import { copyCoursesFolder } from '../utils/copyCoursesFolder';
 import { copyFolderSync } from '../utils/copyFolder';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+import ora from 'ora';
+import path from 'path';
 
 // Define the interface for function parameters
 interface ScaffoldTemplateParams {
@@ -20,11 +20,9 @@ const __dirname = path.dirname(__filename);
 const packageRoot = path.join(__dirname, '..');
 const spinner = ora();
 
-async function rewriteComponentsFile(filePath: string, template: string): Promise<void> {
-  const newContent = `export { components } from './${template}';`;
-
+async function rewriteComponentsFile(filePath: string, content: string): Promise<void> {
   try {
-    fs.writeFileSync(filePath, newContent);
+    fs.writeFileSync(filePath, content);
   } catch (error) {
     console.error(`Error writing to file: ${error}`);
   }
@@ -80,7 +78,11 @@ export async function scaffoldTemplate({
 
   // Update root import of components to reflect only selected template
   const componentsIndex = path.join(projectPath, 'src', 'lib', 'components', 'index.ts');
-  await rewriteComponentsFile(componentsIndex, template);
+  await rewriteComponentsFile(
+    componentsIndex,
+    `export { components, utils } from './${template}';`
+  );
+  await rewriteComponentsFile(path.join(projectPath, '.env'), `VITE_TEMPLATE=${template}`);
 
   // If the user wants demo courses, copy the courses folder
   spinner.text = chalk.yellow('Setting up courses folder...');
diff --git a/packages/course-app/package.json b/packages/course-app/package.json
index 707fb2eb..8e9efac9 100644
--- a/packages/course-app/package.json
+++ b/packages/course-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@classroomio/course-app",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": false,
   "main": "dist/create-template.js",
   "scripts": {
diff --git a/packages/course-app/src/template/package.json b/packages/course-app/src/template/package.json
index f1ebbc88..afadc5c1 100644
--- a/packages/course-app/src/template/package.json
+++ b/packages/course-app/src/template/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "carbon-icons-svelte": "^12.13.0",
+    "dotenv": "^16.5.0",
     "rehype-slug": "^6.0.0",
     "rehype-unwrap-images": "^1.0.0",
     "remark-toc": "^9.0.0",
diff --git a/packages/course-app/src/template/src/app.css b/packages/course-app/src/template/src/app.css
index d4da8d85..2e5fec42 100644
--- a/packages/course-app/src/template/src/app.css
+++ b/packages/course-app/src/template/src/app.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -92,7 +90,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-app;
   }
 }
 
diff --git a/packages/course-app/src/template/src/lib/components/bootcamp/CourseCard.svelte b/packages/course-app/src/template/src/lib/components/bootcamp/CourseCard.svelte
index 9b4c18e9..9cf08bce 100644
--- a/packages/course-app/src/template/src/lib/components/bootcamp/CourseCard.svelte
+++ b/packages/course-app/src/template/src/lib/components/bootcamp/CourseCard.svelte
@@ -18,7 +18,7 @@
 <div class="h-fit min-w-[250px] max-w-[350px] space-y-4 md:w-[300px] md:min-w-[300px]">
   <div class="space-y-4 rounded-sm border border-gray-100 p-4 {className} w-full bg-gray-50">
     <div class="flex items-center justify-between">
-      <p class="font-slab line-clamp-2 w-full text-lg font-normal capitalize">{title}</p>
+      <p class="line-clamp-2 w-full text-lg font-normal capitalize">{title}</p>
     </div>
 
     <div class="overflow-hidden rounded-sm">
diff --git a/packages/course-app/src/template/src/lib/components/bootcamp/TestimonialCard.svelte b/packages/course-app/src/template/src/lib/components/bootcamp/TestimonialCard.svelte
index aea0e086..a21ff3df 100644
--- a/packages/course-app/src/template/src/lib/components/bootcamp/TestimonialCard.svelte
+++ b/packages/course-app/src/template/src/lib/components/bootcamp/TestimonialCard.svelte
@@ -20,7 +20,7 @@
 
   <!-- Card Content -->
   <div
-    class={`font-roboto bubble-card relative h-[150px] max-h-[200px] flex-1 rounded-lg border border-gray-300 bg-white p-4 shadow-lg ${
+    class={`bubble-card relative h-[150px] max-h-[200px] flex-1 rounded-lg border border-gray-300 bg-white p-4 shadow-lg ${
       index % 2 === 0 ? 'left-pointer md:ml-4' : 'right-pointer md:mr-4'
     }`}
   >
diff --git a/packages/course-app/src/template/src/lib/components/bootcamp/index.ts b/packages/course-app/src/template/src/lib/components/bootcamp/index.ts
index d4cf35ed..2491edfb 100644
--- a/packages/course-app/src/template/src/lib/components/bootcamp/index.ts
+++ b/packages/course-app/src/template/src/lib/components/bootcamp/index.ts
@@ -1,9 +1,9 @@
+import Button from './PrimaryButton.svelte';
 import type { Component } from 'svelte';
 import CoursesPage from './pages/Course.svelte';
+import Footer from './Footer.svelte';
 import HomePage from './pages/Home.svelte';
 import Navigation from './Navigation.svelte';
-import Footer from './Footer.svelte';
-import Button from './PrimaryButton.svelte';
 import type { TemplateComponents } from '$lib/utils/types/template';
 
 export const components: TemplateComponents = {
@@ -13,3 +13,7 @@ export const components: TemplateComponents = {
   coursespage: CoursesPage as unknown as Component,
   homepage: HomePage as unknown as Component
 };
+
+export const utils = {
+  fontLink: 'https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap'
+};
diff --git a/packages/course-app/src/template/src/lib/components/bootcamp/pages/Course.svelte b/packages/course-app/src/template/src/lib/components/bootcamp/pages/Course.svelte
index 4430da78..d53a06a7 100644
--- a/packages/course-app/src/template/src/lib/components/bootcamp/pages/Course.svelte
+++ b/packages/course-app/src/template/src/lib/components/bootcamp/pages/Course.svelte
@@ -74,7 +74,7 @@
             {section.header.settings.title}
           </p>
 
-          <p class="font-roboto mx-auto w-full font-normal md:w-[70%]">
+          <p class="mx-auto w-full font-normal md:w-[70%]">
             {section.header.settings.subtitle}
           </p>
         </div>
@@ -95,10 +95,10 @@
     <div class="bg-white px-2 py-10 md:px-8">
       <div class="mb-4 flex flex-col items-center justify-between md:flex-row">
         <span class="mx-auto mb-4 space-y-2 text-center lg:mb-0">
-          <p class="font-slab mx-auto w-full text-2xl md:w-[60%] lg:text-3xl">
+          <p class="mx-auto w-full text-2xl md:w-[60%] lg:text-3xl">
             {section.courses.settings.title}
           </p>
-          <p class="font-roboto text-xs text-gray-400 lg:text-sm">
+          <p class="text-xs text-gray-400 lg:text-sm">
             {section.courses.settings.subtitle}
           </p>
         </span>
@@ -107,7 +107,7 @@
         {#if $courses.length > 0}
           <div class="w-full items-start gap-6 lg:ml-[5%] lg:flex">
             <div class="hidden w-fit lg:block">
-              <p class="font-slab mb-2 font-medium">Filter by</p>
+              <p class="mb-2 font-medium">Filter by</p>
               <div class="flex w-fit flex-col space-y-2">
                 {#each filter as item}
                   <label
@@ -144,7 +144,7 @@
             <div class="my-5 flex w-full items-center justify-center">
               <PrimaryButton
                 label="VIEW MORE"
-                class="font-roboto rounded-none  text-lg"
+                class="rounded-none  text-lg"
                 onClick={() => (viewAll = !viewAll)}
               />
             </div>
diff --git a/packages/course-app/src/template/src/lib/components/bootcamp/pages/Home.svelte b/packages/course-app/src/template/src/lib/components/bootcamp/pages/Home.svelte
index 865c63c7..6b32d6f8 100644
--- a/packages/course-app/src/template/src/lib/components/bootcamp/pages/Home.svelte
+++ b/packages/course-app/src/template/src/lib/components/bootcamp/pages/Home.svelte
@@ -26,11 +26,11 @@
       <section class="flex min-h-full items-center justify-center bg-black/90 px-10 py-10 md:px-14">
         <div class="mx-auto flex max-w-6xl flex-col items-center gap-10 text-center">
           <div class="w-full space-y-6 text-white">
-            <p class="font-slab mx-auto w-full text-3xl font-normal md:w-[60%] md:text-4xl">
+            <p class="mx-auto w-full text-3xl font-normal md:w-[60%] md:text-4xl">
               {content.settings.title}
             </p>
 
-            <p class="font-roboto mx-auto w-full font-normal md:w-[70%] md:text-lg">
+            <p class="mx-auto w-full font-normal md:w-[70%] md:text-lg">
               {content.settings.subtitle}
             </p>
           </div>
@@ -61,15 +61,15 @@
         class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 md:flex-row md:items-start"
       >
         <div class="mb-5 w-full md:mr-5 md:w-[60%] lg:mb-0 lg:w-[50%]">
-          <p class="font-slab mb-8 w-full text-2xl font-normal md:w-[90%] md:text-3xl lg:text-4xl">
+          <p class="mb-8 w-full text-2xl font-normal md:w-[90%] md:text-3xl lg:text-4xl">
             {aboutSection.settings.title}
           </p>
           <div class="space-y-3">
             {#each aboutSection.settings.benefits.list as items}
               <div class="max-w-[579px] rounded-md border border-gray-100 bg-gray-50 p-8">
-                <p class="font-slab mb-2 line-clamp-2 w-[90%] text-xl md:text-2xl">{items.title}</p>
+                <p class="mb-2 line-clamp-2 w-[90%] text-xl md:text-2xl">{items.title}</p>
                 <p
-                  class="font-roboto mb-4 line-clamp-5 w-[90%] text-sm text-gray-600 lg:line-clamp-4 lg:text-base"
+                  class="mb-4 line-clamp-5 w-[90%] text-sm text-gray-600 lg:line-clamp-4 lg:text-base"
                 >
                   {items.subtitle}
                 </p>
@@ -94,7 +94,7 @@
     <section id="course" class="h-full bg-white p-4 lg:p-20">
       <div class="mx-4 mb-4">
         <span class="mb-4 space-y-2 lg:mb-0">
-          <p class="font-slab text-2xl lg:text-3xl">{coursesSection.settings.title}</p>
+          <p class="text-2xl lg:text-3xl">{coursesSection.settings.title}</p>
           <p class="w-[80%] text-gray-600">{coursesSection.settings.subtitle}</p>
         </span>
       </div>
@@ -113,7 +113,7 @@
           <div class="my-5 flex w-full items-center justify-center">
             <PrimaryButton
               label="VIEW MORE"
-              class="font-roboto bg-bootcamp rounded-none text-lg"
+              class="bg-bootcamp rounded-none text-lg"
               onClick={() => (viewAll = !viewAll)}
             />
           </div>
@@ -149,7 +149,7 @@
   {#if ctaSection?.show}
     <section class="bg-bootcamp flex flex-col items-center justify-between px-6 py-20 lg:px-10">
       <div class="flex w-full items-center justify-center">
-        <p class="font-slab w-full text-center text-4xl font-bold capitalize text-white lg:w-[70%]">
+        <p class="w-full text-center text-4xl font-bold capitalize text-white lg:w-[70%]">
           {ctaSection.settings.title}
         </p>
       </div>
diff --git a/packages/course-app/src/template/src/lib/components/cal/index.ts b/packages/course-app/src/template/src/lib/components/cal/index.ts
index 702c9c26..4081846e 100644
--- a/packages/course-app/src/template/src/lib/components/cal/index.ts
+++ b/packages/course-app/src/template/src/lib/components/cal/index.ts
@@ -1,9 +1,9 @@
+import Button from './PrimaryButton.svelte';
 import type { Component } from 'svelte';
 import CoursesPage from './pages/Courses.svelte';
+import Footer from './Footer.svelte';
 import HomePage from './pages/Home.svelte';
 import Navigation from './Navigation.svelte';
-import Footer from './Footer.svelte';
-import Button from './PrimaryButton.svelte';
 import type { TemplateComponents } from '$lib/utils/types/template';
 
 export const components: TemplateComponents = {
@@ -13,3 +13,7 @@ export const components: TemplateComponents = {
   coursespage: CoursesPage as unknown as Component,
   homepage: HomePage as unknown as Component
 };
+
+export const utils = {
+  fontLink: 'https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap'
+};
diff --git a/packages/course-app/src/template/src/lib/components/cal/pages/Home.svelte b/packages/course-app/src/template/src/lib/components/cal/pages/Home.svelte
index 7c326b3d..9109613d 100644
--- a/packages/course-app/src/template/src/lib/components/cal/pages/Home.svelte
+++ b/packages/course-app/src/template/src/lib/components/cal/pages/Home.svelte
@@ -46,7 +46,7 @@
   {@const content = getPageSection($homePage, SECTION.HERO)}
   {#if content?.show}
     <section
-      class="font-matter flex h-full items-start justify-center bg-[#F4F4F4] px-5 py-10 md:items-center lg:px-20 lg:py-20"
+      class="flex h-full items-start justify-center bg-[#F4F4F4] px-5 py-10 md:items-center lg:px-20 lg:py-20"
     >
       <section
         class="flex flex-col-reverse items-center justify-center lg:flex-row lg:justify-between"
diff --git a/packages/course-app/src/template/src/lib/components/classic/index.ts b/packages/course-app/src/template/src/lib/components/classic/index.ts
index 702c9c26..048c3f88 100644
--- a/packages/course-app/src/template/src/lib/components/classic/index.ts
+++ b/packages/course-app/src/template/src/lib/components/classic/index.ts
@@ -1,9 +1,9 @@
+import Button from './PrimaryButton.svelte';
 import type { Component } from 'svelte';
 import CoursesPage from './pages/Courses.svelte';
+import Footer from './Footer.svelte';
 import HomePage from './pages/Home.svelte';
 import Navigation from './Navigation.svelte';
-import Footer from './Footer.svelte';
-import Button from './PrimaryButton.svelte';
 import type { TemplateComponents } from '$lib/utils/types/template';
 
 export const components: TemplateComponents = {
@@ -13,3 +13,8 @@ export const components: TemplateComponents = {
   coursespage: CoursesPage as unknown as Component,
   homepage: HomePage as unknown as Component
 };
+
+export const utils = {
+  fontLink:
+    'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
+};
diff --git a/packages/course-app/src/template/src/lib/components/classic/pages/Home.svelte b/packages/course-app/src/template/src/lib/components/classic/pages/Home.svelte
index 95b36eaa..eda4066e 100644
--- a/packages/course-app/src/template/src/lib/components/classic/pages/Home.svelte
+++ b/packages/course-app/src/template/src/lib/components/classic/pages/Home.svelte
@@ -31,13 +31,13 @@
       <section class="flex h-full items-start justify-center px-6 pb-20 md:px-14">
         <section class="flex flex-col-reverse items-center gap-10 md:flex-row md:justify-between">
           <div class="flex h-full w-full flex-col gap-4 pt-4">
-            <p class="w-full text-4xl font-bold xl:w-[90%] xl:text-6xl">
-              {content.settings.title}
-              <span class="text-[#CE02CE]">
+            <p class="w-full max-w-[600px] text-4xl font-bold lg:text-5xl">
+              <span>{content.settings.title}</span><br />
+              <span class=" italic text-[#CE02CE]">
                 {content.settings.titleHighlight}
               </span>
             </p>
-            <p class="w-full text-[#878787] lg:w-[70%] xl:text-lg">
+            <p class="w-full max-w-[600px] text-[#878787] xl:text-lg">
               {content.settings.subtitle}
             </p>
             <PrimaryButton
@@ -58,6 +58,8 @@
           </div>
         </section>
       </section>
+
+      <hr class="border-classic-border mb-10 mt-5" />
     {/if}
   {/if}
 
diff --git a/packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte b/packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte
index 06bea53e..74095f61 100644
--- a/packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte
+++ b/packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte
@@ -9,7 +9,7 @@
 >
   <div class="flex h-full w-full flex-col justify-between gap-4 rounded-lg">
     <div class="flex-1 space-y-2">
-      <p class="text-examprep line-clamp-2 font-serif text-xl font-semibold uppercase">{title}</p>
+      <p class="text-examprep line-clamp-2 text-xl font-semibold uppercase">{title}</p>
       <p class="font-inter line-clamp-4 text-gray-600">
         {description}
       </p>
diff --git a/packages/course-app/src/template/src/lib/components/examprep/index.ts b/packages/course-app/src/template/src/lib/components/examprep/index.ts
index d4cf35ed..50244c05 100644
--- a/packages/course-app/src/template/src/lib/components/examprep/index.ts
+++ b/packages/course-app/src/template/src/lib/components/examprep/index.ts
@@ -1,9 +1,9 @@
+import Button from './PrimaryButton.svelte';
 import type { Component } from 'svelte';
 import CoursesPage from './pages/Course.svelte';
+import Footer from './Footer.svelte';
 import HomePage from './pages/Home.svelte';
 import Navigation from './Navigation.svelte';
-import Footer from './Footer.svelte';
-import Button from './PrimaryButton.svelte';
 import type { TemplateComponents } from '$lib/utils/types/template';
 
 export const components: TemplateComponents = {
@@ -13,3 +13,8 @@ export const components: TemplateComponents = {
   coursespage: CoursesPage as unknown as Component,
   homepage: HomePage as unknown as Component
 };
+
+export const utils = {
+  fontLink:
+    'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap'
+};
diff --git a/packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte b/packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte
index f331c5af..c66ec046 100644
--- a/packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte
+++ b/packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte
@@ -66,12 +66,10 @@
 
 <main class="overflow-x-hidden">
   {#if section.header?.show}
-    <section class="flex h-[50vh] items-center justify-center py-20">
+    <section class="flex h-[50vh] items-center justify-center bg-slate-100 py-20">
       <section class="flex flex-col items-start gap-10 p-4 text-center md:items-center">
         <div class="w-full space-y-6">
-          <p
-            class="mx-auto w-full font-serif text-3xl font-medium text-gray-800 md:w-[60%] md:text-4xl"
-          >
+          <p class="mx-auto w-full text-3xl font-medium text-gray-800 md:w-[60%] md:text-4xl">
             {section.header.settings.title}
           </p>
 
@@ -86,7 +84,7 @@
     <div class="border-b bg-white px-2 py-10 md:px-10 lg:px-20">
       <div class="mb-4 flex flex-col items-start justify-between md:flex-row md:items-center">
         <span class="mb-4 space-y-2 px-4 text-start lg:mb-0">
-          <p class="mb-4 font-serif text-2xl md:text-3xl">{section.courses.settings.title}</p>
+          <p class="mb-4 text-2xl md:text-3xl">{section.courses.settings.title}</p>
           <p class="w-full text-sm font-medium text-gray-500 md:w-[80%]">
             {section.courses.settings.subtitle}
           </p>
diff --git a/packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte b/packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte
index 0d9b0f36..3a2f9d05 100644
--- a/packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte
+++ b/packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte
@@ -140,7 +140,7 @@
   <!-- Courses -->
   {#if coursesSection?.show}
     <section id="course" class="h-full bg-white px-4 py-20 md:px-20">
-      <h1 class="text-center font-serif text-3xl">{coursesSection.settings.title}</h1>
+      <h1 class="text-center text-3xl">{coursesSection.settings.title}</h1>
       <p class="font-inter mx-auto mb-8 w-full text-center font-medium md:w-[50%]">
         {coursesSection.settings.subtitle}
       </p>
@@ -175,7 +175,7 @@
   <!-- About -->
   {#if aboutSection?.show}
     <section id="course" class="h-full bg-white px-4 pb-20 pt-4 md:px-10">
-      <h1 class="mx-auto w-full text-center font-serif text-3xl text-gray-800 md:w-[50%]">
+      <h1 class="mx-auto w-full text-center text-3xl text-gray-800 md:w-[50%]">
         {aboutSection.settings.title}
       </h1>
       <p class="text-inter mx-auto mb-8 w-[60%] text-center font-medium text-gray-500">
@@ -189,7 +189,7 @@
           >
             <span class="flex items-center gap-2">
               <CheckmarkFilled size={24} class="fill-blue-800" />
-              <p class="font-serif text-xl">{item.title}</p>
+              <p class="text-xl">{item.title}</p>
             </span>
             <p class="font-inter text-base text-gray-400">{item.subtitle}</p>
           </div>
@@ -204,7 +204,7 @@
   <!-- faq -->
   {#if faqSection?.show}
     <section class="h-full space-y-5 bg-slate-100 px-4 pb-20 pt-8">
-      <h1 class="text-center font-serif text-3xl text-gray-700">{faqSection.settings.title}</h1>
+      <h1 class="text-center text-3xl text-gray-700">{faqSection.settings.title}</h1>
       <section class="mx-auto w-full space-y-10 p-4 md:w-[80%]">
         {#each faqSection.settings.questions as faq}
           <Accordion title={faq.title} content={faq.content} />
@@ -219,9 +219,7 @@
       class="flex flex-col items-center justify-between space-y-4 bg-blue-800 px-6 py-20 lg:px-10"
     >
       <div class="flex w-full items-center justify-center">
-        <p
-          class="w-full text-center font-serif text-4xl font-bold capitalize text-white lg:w-[70%]"
-        >
+        <p class="w-full text-center text-4xl font-bold capitalize text-white lg:w-[70%]">
           {ctaSection.settings.title}
         </p>
       </div>
diff --git a/packages/course-app/src/template/src/lib/components/index.ts b/packages/course-app/src/template/src/lib/components/index.ts
index d9a13537..4f289c52 100644
--- a/packages/course-app/src/template/src/lib/components/index.ts
+++ b/packages/course-app/src/template/src/lib/components/index.ts
@@ -1,10 +1,10 @@
-import { components as CalComponents } from './cal';
-import { components as PosthogComponents } from './posthog';
-import { components as ClassicComponents } from './classic';
-import { components as MinimalComponents } from './minimal';
-import { components as ExamprepComponents } from './examprep';
-import { components as WebflowComponents } from './webflow';
-import { components as BootcampComponents } from './bootcamp';
+import { components as BootcampComponents, utils as BootcampUtils } from './bootcamp';
+import { components as CalComponents, utils as CalUtils } from './cal';
+import { components as ClassicComponents, utils as ClassicUtils } from './classic';
+import { components as ExamprepComponents, utils as ExamprepUtils } from './examprep';
+import { components as MinimalComponents, utils as MinimalUtils } from './minimal';
+import { components as PosthogComponents, utils as PosthogUtils } from './posthog';
+import { components as WebflowComponents, utils as WebflowUtils } from './webflow';
 
 function getComponents() {
   switch (import.meta.env.VITE_TEMPLATE) {
@@ -25,6 +25,25 @@ function getComponents() {
   }
 }
 
-export const components = {
-  ...getComponents()
-};
+export const components = getComponents();
+
+function getUtils() {
+  switch (import.meta.env.VITE_TEMPLATE) {
+    case 'posthog':
+      return PosthogUtils;
+    case 'classic':
+      return ClassicUtils;
+    case 'minimal':
+      return MinimalUtils;
+    case 'examprep':
+      return ExamprepUtils;
+    case 'webflow':
+      return WebflowUtils;
+    case 'bootcamp':
+      return BootcampUtils;
+    default:
+      return CalUtils;
+  }
+}
+
+export const utils = getUtils();
diff --git a/packages/course-app/src/template/src/lib/components/minimal/index.ts b/packages/course-app/src/template/src/lib/components/minimal/index.ts
index 702c9c26..a50cd4fe 100644
--- a/packages/course-app/src/template/src/lib/components/minimal/index.ts
+++ b/packages/course-app/src/template/src/lib/components/minimal/index.ts
@@ -1,9 +1,9 @@
+import Button from './PrimaryButton.svelte';
 import type { Component } from 'svelte';
 import CoursesPage from './pages/Courses.svelte';
+import Footer from './Footer.svelte';
 import HomePage from './pages/Home.svelte';
 import Navigation from './Navigation.svelte';
-import Footer from './Footer.svelte';
-import Button from './PrimaryButton.svelte';
 import type { TemplateComponents } from '$lib/utils/types/template';
 
 export const components: TemplateComponents = {
@@ -13,3 +13,8 @@ export const components: TemplateComponents = {
   coursespage: CoursesPage as unknown as Component,
   homepage: HomePage as unknown as Component
 };
+
+export const utils = {
+  fontLink:
+    'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap'
+};
diff --git a/packages/course-app/src/template/src/lib/components/minimal/pages/Home.svelte b/packages/course-app/src/template/src/lib/components/minimal/pages/Home.svelte
index fd8e3884..fb67b6c7 100644
--- a/packages/course-app/src/template/src/lib/components/minimal/pages/Home.svelte
+++ b/packages/course-app/src/template/src/lib/components/minimal/pages/Home.svelte
@@ -30,7 +30,7 @@
         class="flex max-h-full items-center justify-center px-5 py-5 md:h-[60vh] md:px-14 md:py-14"
       >
         <section class="mx-auto flex max-w-6xl items-center justify-between gap-4">
-          <div class="w-full max-w-[50%] space-y-6 text-white">
+          <div class="w-full space-y-6 p-5 text-white lg:max-w-[50%]">
             <div class="w-fit rounded-sm bg-white px-3 py-1 md:border">
               <p class="text-minimal text-center text-sm font-bold uppercase">
                 {content.settings?.title}
diff --git a/packages/course-app/src/template/src/lib/components/posthog/index.ts b/packages/course-app/src/template/src/lib/components/posthog/index.ts
index 702c9c26..feaff29f 100644
--- a/packages/course-app/src/template/src/lib/components/posthog/index.ts
+++ b/packages/course-app/src/template/src/lib/components/posthog/index.ts
@@ -1,9 +1,9 @@
+import Button from './PrimaryButton.svelte';
 import type { Component } from 'svelte';
 import CoursesPage from './pages/Courses.svelte';
+import Footer from './Footer.svelte';
 import HomePage from './pages/Home.svelte';
 import Navigation from './Navigation.svelte';
-import Footer from './Footer.svelte';
-import Button from './PrimaryButton.svelte';
 import type { TemplateComponents } from '$lib/utils/types/template';
 
 export const components: TemplateComponents = {
@@ -13,3 +13,7 @@ export const components: TemplateComponents = {
   coursespage: CoursesPage as unknown as Component,
   homepage: HomePage as unknown as Component
 };
+
+export const utils = {
+  fontLink: ''
+};
diff --git a/packages/course-app/src/template/src/lib/components/posthog/pages/Home.svelte b/packages/course-app/src/template/src/lib/components/posthog/pages/Home.svelte
index 2e15c770..3b43325e 100644
--- a/packages/course-app/src/template/src/lib/components/posthog/pages/Home.svelte
+++ b/packages/course-app/src/template/src/lib/components/posthog/pages/Home.svelte
@@ -30,7 +30,7 @@
     {@const content = getPageSection($homePage, SECTION.HERO)}
     {#if content?.show}
       <section
-        class="font-matter flex min-h-full items-center justify-center overflow-hidden px-10 py-14 md:px-14"
+        class="flex min-h-full items-center justify-center overflow-hidden px-10 pt-24 md:px-14"
       >
         <section
           class="flex flex-col-reverse items-center justify-center gap-5 text-center md:flex-col"
@@ -51,18 +51,18 @@
             />
           </div>
 
-          <div class="relative flex w-full rounded-lg md:w-[800px] md:max-w-[80vw] lg:max-w-[80%]">
+          <div class="relative flex w-full rounded-lg md:max-w-[80vw] lg:max-w-[80%]">
             <span class="absolute -top-14 left-3 h-2 w-2 rounded-full bg-red-500"></span>
             <span class="absolute -left-10 top-10 h-2 w-2 rounded-full bg-white"></span>
             <span class="absolute -right-3 -top-10 h-2 w-2 rounded-full bg-yellow-500"></span>
             <span class="absolute -right-10 top-14 h-2 w-2 rounded-full bg-blue-800"></span>
 
-            <div class="flex h-full w-full items-center justify-center">
-              <img alt="Hero Banner" src={analytics} class="w-full rounded-lg object-cover" />
-            </div>
+            <img alt="Hero Banner" src={analytics} class="w-full rounded-lg object-cover" />
           </div>
         </section>
       </section>
+
+      <hr class="border-posthog-border mb-10 mt-5" />
     {/if}
   {/if}
 
@@ -101,6 +101,7 @@
         </div>
       {/if}
     </section>
+    <hr class="border-posthog-border mb-10" />
   {/if}
 
   <!-- about -->
@@ -130,6 +131,7 @@
         </section>
       </div>
     </section>
+    <hr class="border-posthog-border mb-10" />
   {/if}
 
   <!-- faq -->
@@ -142,6 +144,7 @@
         {/each}
       </div>
     </div>
+    <hr class="border-posthog-border my-10" />
   {/if}
 
   <!-- cta -->
diff --git a/packages/course-app/src/template/src/lib/components/webflow/index.ts b/packages/course-app/src/template/src/lib/components/webflow/index.ts
index 702c9c26..8d0f3bf7 100644
--- a/packages/course-app/src/template/src/lib/components/webflow/index.ts
+++ b/packages/course-app/src/template/src/lib/components/webflow/index.ts
@@ -1,9 +1,9 @@
+import Button from './PrimaryButton.svelte';
 import type { Component } from 'svelte';
 import CoursesPage from './pages/Courses.svelte';
+import Footer from './Footer.svelte';
 import HomePage from './pages/Home.svelte';
 import Navigation from './Navigation.svelte';
-import Footer from './Footer.svelte';
-import Button from './PrimaryButton.svelte';
 import type { TemplateComponents } from '$lib/utils/types/template';
 
 export const components: TemplateComponents = {
@@ -13,3 +13,8 @@ export const components: TemplateComponents = {
   coursespage: CoursesPage as unknown as Component,
   homepage: HomePage as unknown as Component
 };
+
+export const utils = {
+  fontLink:
+    'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'
+};
diff --git a/packages/course-app/src/template/src/routes/+layout.svelte b/packages/course-app/src/template/src/routes/+layout.svelte
index 0bb28d26..63aa36ee 100644
--- a/packages/course-app/src/template/src/routes/+layout.svelte
+++ b/packages/course-app/src/template/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
   import { homePage, sharedPage } from '$lib/utils/stores/pages';
   import { courses } from '$lib/utils/stores/course';
   import { getPageSection } from '$lib/utils/helpers/page';
-  import { components } from '$lib/components';
+  import { components, utils } from '$lib/components';
   import Transition from '$lib/components/ui/_custom/Transition.svelte';
   import type { Page, Section } from '$lib/utils/types/page';
   import type { Course } from '$lib/utils/types/course';
@@ -34,10 +34,14 @@
 <svelte:head>
   <title>{seo?.settings.title}</title>
   <meta name="description" content={seo?.settings.description} />
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+  <link rel="stylesheet" href={utils.fontLink} />
 </svelte:head>
 
 {#if $homePage.id}
-  <main>
+  <main class="font-{import.meta.env.VITE_TEMPLATE}">
     <Transition>
       {#if !$page.url.pathname.includes('course/')}
         <components.navigation />
diff --git a/packages/course-app/src/template/svelte.config.js b/packages/course-app/src/template/svelte.config.js
index d8ffc284..237376d7 100644
--- a/packages/course-app/src/template/svelte.config.js
+++ b/packages/course-app/src/template/svelte.config.js
@@ -1,10 +1,11 @@
-import { mdsvex, escapeSvelte } from 'mdsvex';
+import { escapeSvelte, mdsvex } from 'mdsvex';
+
+import adapter from '@sveltejs/adapter-auto';
+import { createHighlighter } from 'shiki';
+import rehypeSlug from 'rehype-slug';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
 import remarkToc from 'remark-toc';
-import rehypeSlug from 'rehype-slug';
-import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { createHighlighter } from 'shiki';
 
 /** @type {import('mdsvex').MdsvexOptions} */
 const mdsvexOptions = {
@@ -26,7 +27,12 @@ const mdsvexOptions = {
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
+  preprocess: [
+    vitePreprocess({
+      script: true
+    }),
+    mdsvex(mdsvexOptions)
+  ],
 
   kit: {
     // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
diff --git a/packages/course-app/src/template/tailwind.config.ts b/packages/course-app/src/template/tailwind.config.ts
index 76d57310..ffa2ceb7 100644
--- a/packages/course-app/src/template/tailwind.config.ts
+++ b/packages/course-app/src/template/tailwind.config.ts
@@ -1,7 +1,28 @@
-import { fontFamily } from 'tailwindcss/defaultTheme';
+import 'dotenv/config';
+
 import type { Config } from 'tailwindcss';
+import { fontFamily } from 'tailwindcss/defaultTheme';
 import tailwindcssAnimate from 'tailwindcss-animate';
 
+const getFont = (): string => {
+  switch (process.env.VITE_TEMPLATE) {
+    case 'posthog':
+      return 'Matter, sans-serif';
+    case 'classic':
+      return 'Inter, sans-serif';
+    case 'minimal':
+      return 'Inter, sans-serif';
+    case 'examprep':
+      return 'Playfair Display, serif';
+    case 'webflow':
+      return 'Lato, sans-serif';
+    case 'bootcamp':
+      return 'Roboto Slab, serif';
+    default:
+      return 'Cal Sans, sans-serif';
+  }
+};
+
 const config: Config = {
   darkMode: ['class'],
   content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -118,6 +139,9 @@ const config: Config = {
         'accordion-up': 'accordion-up 0.2s ease-out',
         'caret-blink': 'caret-blink 1.25s ease-out infinite'
       }
+    },
+    fontFamily: {
+      app: getFont()
     }
   },
   plugins: [tailwindcssAnimate]
diff --git a/packages/course-app/templates.json b/packages/course-app/templates.json
index 9f956c3b..48ed74e8 100644
--- a/packages/course-app/templates.json
+++ b/packages/course-app/templates.json
@@ -7,6 +7,10 @@
     "name": "classic",
     "description": "Classic template"
   },
+  {
+    "name": "examprep",
+    "description": "Exam prep template"
+  },
   {
     "name": "minimal",
     "description": "Minimal template"
diff --git a/packages/course-app/utils/copyFolder.ts b/packages/course-app/utils/copyFolder.ts
index a5a65b3c..5a6251cd 100644
--- a/packages/course-app/utils/copyFolder.ts
+++ b/packages/course-app/utils/copyFolder.ts
@@ -1,7 +1,6 @@
-import chalk from 'chalk';
+import { CopyFolderParams } from './types';
 import fs from 'fs';
 import path from 'path';
-import { CopyFolderParams } from './types';
 
 export async function copyFolderSync({
   from,