diff --git a/apps/course-app/package.json b/apps/course-app/package.json
index bc39628e..cd68979e 100644
--- a/apps/course-app/package.json
+++ b/apps/course-app/package.json
@@ -41,6 +41,7 @@
"@tailwindcss/typography": "^0.5.15",
"lucide-svelte": "^0.468.0",
"svelte-inview": "^4.0.4",
- "svelte-motion": "^0.12.2"
+ "svelte-motion": "^0.12.2",
+ "svelte-radix": "^2.0.1"
}
}
diff --git a/apps/course-app/src/lib/components/animation/border-beam/border-beam.svelte b/apps/course-app/src/lib/components/animation/border-beam/border-beam.svelte
new file mode 100644
index 00000000..34a5c339
--- /dev/null
+++ b/apps/course-app/src/lib/components/animation/border-beam/border-beam.svelte
@@ -0,0 +1,35 @@
+
+
+
diff --git a/apps/course-app/src/lib/components/animation/border-beam/index.ts b/apps/course-app/src/lib/components/animation/border-beam/index.ts
new file mode 100644
index 00000000..6b6ff352
--- /dev/null
+++ b/apps/course-app/src/lib/components/animation/border-beam/index.ts
@@ -0,0 +1 @@
+export { default as BorderBeam } from './border-beam.svelte';
diff --git a/apps/course-app/src/lib/components/animation/dot-pattern/dot-pattern.svelte b/apps/course-app/src/lib/components/animation/dot-pattern/dot-pattern.svelte
new file mode 100644
index 00000000..b92fca39
--- /dev/null
+++ b/apps/course-app/src/lib/components/animation/dot-pattern/dot-pattern.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/course-app/src/lib/components/animation/dot-pattern/index.ts b/apps/course-app/src/lib/components/animation/dot-pattern/index.ts
new file mode 100644
index 00000000..e9ecaa8f
--- /dev/null
+++ b/apps/course-app/src/lib/components/animation/dot-pattern/index.ts
@@ -0,0 +1 @@
+export { default as DotPattern } from './dot-pattern.svelte';
diff --git a/apps/course-app/src/lib/components/animation/hero-video-dialog/hero-video-dialog.svelte b/apps/course-app/src/lib/components/animation/hero-video-dialog/hero-video-dialog.svelte
new file mode 100644
index 00000000..782c0981
--- /dev/null
+++ b/apps/course-app/src/lib/components/animation/hero-video-dialog/hero-video-dialog.svelte
@@ -0,0 +1,193 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if item.key}
+
+
+
+
+
+
+ isCloseHovered.set(true)}
+ on:mouseleave={() => isCloseHovered.set(false)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/if}
+
+
+
+
diff --git a/apps/course-app/src/lib/components/animation/hero-video-dialog/index.ts b/apps/course-app/src/lib/components/animation/hero-video-dialog/index.ts
new file mode 100644
index 00000000..647c4bb1
--- /dev/null
+++ b/apps/course-app/src/lib/components/animation/hero-video-dialog/index.ts
@@ -0,0 +1 @@
+export { default as HeroVideoDialog } from './hero-video-dialog.svelte';
diff --git a/apps/course-app/src/lib/components/buy-template/buy-template.svelte b/apps/course-app/src/lib/components/buy-template/buy-template.svelte
new file mode 100644
index 00000000..91d80775
--- /dev/null
+++ b/apps/course-app/src/lib/components/buy-template/buy-template.svelte
@@ -0,0 +1,63 @@
+
+
+
+
+
+ {ctaLabel}
+
+
+
+
+ Buy A Custom Template
+
+ Place an order for a custom template and we will ship it in 48 hours.
+
+
+
+
What you get:
+
+ {#each whatYouGet as item}
+
+
+ {item}
+
+ {/each}
+
+
+
+
+
+ Buy
+
+
+
+
+
diff --git a/apps/course-app/src/lib/components/buy-template/index.ts b/apps/course-app/src/lib/components/buy-template/index.ts
new file mode 100644
index 00000000..274b27a6
--- /dev/null
+++ b/apps/course-app/src/lib/components/buy-template/index.ts
@@ -0,0 +1 @@
+export { default as BuyTemplate } from './buy-template.svelte';
diff --git a/apps/course-app/src/lib/components/install/index.ts b/apps/course-app/src/lib/components/install/index.ts
new file mode 100644
index 00000000..500dbf1b
--- /dev/null
+++ b/apps/course-app/src/lib/components/install/index.ts
@@ -0,0 +1 @@
+export { default as Install } from './install.svelte';
diff --git a/apps/course-app/src/lib/components/install/install.svelte b/apps/course-app/src/lib/components/install/install.svelte
new file mode 100644
index 00000000..13a82afb
--- /dev/null
+++ b/apps/course-app/src/lib/components/install/install.svelte
@@ -0,0 +1,26 @@
+
+
+ {
+ navigator.clipboard.writeText(command);
+ toast('Copied to clipboard 😉');
+ }}
+ class={cn(
+ 'group z-10 mt-5 rounded-full border border-white/50 bg-neutral-700 transition-all ease-in hover:cursor-pointer hover:bg-neutral-700 hover:text-white'
+ )}
+>
+
+ {command}
+
+
+
+
diff --git a/apps/course-app/src/lib/components/navigation/navigation.svelte b/apps/course-app/src/lib/components/navigation/navigation.svelte
index 881d7389..6cecff54 100644
--- a/apps/course-app/src/lib/components/navigation/navigation.svelte
+++ b/apps/course-app/src/lib/components/navigation/navigation.svelte
@@ -16,7 +16,7 @@
brought to you by
classroomio.com
diff --git a/apps/course-app/src/lib/components/template-card/custom-template.svelte b/apps/course-app/src/lib/components/template-card/custom-template.svelte
new file mode 100644
index 00000000..ebd1f5ba
--- /dev/null
+++ b/apps/course-app/src/lib/components/template-card/custom-template.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
Buy A Custom Template
+
+
+
diff --git a/apps/course-app/src/lib/components/template-card/index.ts b/apps/course-app/src/lib/components/template-card/index.ts
index 93ba23f5..07c593d9 100644
--- a/apps/course-app/src/lib/components/template-card/index.ts
+++ b/apps/course-app/src/lib/components/template-card/index.ts
@@ -1 +1,2 @@
export { default as TemplateCard } from './template-card.svelte';
+export { default as CustomTemplate } from './custom-template.svelte';
diff --git a/apps/course-app/src/lib/components/template-card/santa.svg b/apps/course-app/src/lib/components/template-card/santa.svg
new file mode 100644
index 00000000..dc90b7b5
--- /dev/null
+++ b/apps/course-app/src/lib/components/template-card/santa.svg
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/course-app/src/lib/components/ui/dialog/dialog-content.svelte b/apps/course-app/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 00000000..0bc61b37
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+ Close
+
+
+
diff --git a/apps/course-app/src/lib/components/ui/dialog/dialog-description.svelte b/apps/course-app/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 00000000..8bc70cca
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/apps/course-app/src/lib/components/ui/dialog/dialog-footer.svelte b/apps/course-app/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 00000000..a235d1f8
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/apps/course-app/src/lib/components/ui/dialog/dialog-header.svelte b/apps/course-app/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 00000000..6b4448c7
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/apps/course-app/src/lib/components/ui/dialog/dialog-overlay.svelte b/apps/course-app/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 00000000..9da95c55
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,21 @@
+
+
+
diff --git a/apps/course-app/src/lib/components/ui/dialog/dialog-portal.svelte b/apps/course-app/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 00000000..400e62bf
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/apps/course-app/src/lib/components/ui/dialog/dialog-title.svelte b/apps/course-app/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 00000000..06574f3e
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/apps/course-app/src/lib/components/ui/dialog/index.ts b/apps/course-app/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 00000000..b17ba5e6
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+
+export {
+ Root,
+ Title,
+ Portal,
+ Footer,
+ Header,
+ Trigger,
+ Overlay,
+ Content,
+ Description,
+ Close,
+ //
+ Root as Dialog,
+ Title as DialogTitle,
+ Portal as DialogPortal,
+ Footer as DialogFooter,
+ Header as DialogHeader,
+ Trigger as DialogTrigger,
+ Overlay as DialogOverlay,
+ Content as DialogContent,
+ Description as DialogDescription,
+ Close as DialogClose,
+};
diff --git a/apps/course-app/src/lib/components/ui/input/index.ts b/apps/course-app/src/lib/components/ui/input/index.ts
new file mode 100644
index 00000000..75e3bc25
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent = T & {
+ currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+ blur: FormInputEvent;
+ change: FormInputEvent;
+ click: FormInputEvent;
+ focus: FormInputEvent;
+ focusin: FormInputEvent;
+ focusout: FormInputEvent;
+ keydown: FormInputEvent;
+ keypress: FormInputEvent;
+ keyup: FormInputEvent;
+ mouseover: FormInputEvent;
+ mouseenter: FormInputEvent;
+ mouseleave: FormInputEvent;
+ mousemove: FormInputEvent;
+ paste: FormInputEvent;
+ input: FormInputEvent;
+ wheel: FormInputEvent;
+};
+
+export {
+ Root,
+ //
+ Root as Input,
+};
diff --git a/apps/course-app/src/lib/components/ui/input/input.svelte b/apps/course-app/src/lib/components/ui/input/input.svelte
new file mode 100644
index 00000000..ada0a221
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+
+
+
diff --git a/apps/course-app/src/lib/components/ui/label/index.ts b/apps/course-app/src/lib/components/ui/label/index.ts
new file mode 100644
index 00000000..8bfca0b3
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+ Root,
+ //
+ Root as Label,
+};
diff --git a/apps/course-app/src/lib/components/ui/label/label.svelte b/apps/course-app/src/lib/components/ui/label/label.svelte
new file mode 100644
index 00000000..0ae7acc1
--- /dev/null
+++ b/apps/course-app/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/apps/course-app/src/routes/+page.svelte b/apps/course-app/src/routes/+page.svelte
index 9fb78852..807e1f67 100644
--- a/apps/course-app/src/routes/+page.svelte
+++ b/apps/course-app/src/routes/+page.svelte
@@ -1,18 +1,16 @@