CLASSROOMIO-T-32: Move landing page builder to course route

src/routes/course/[slug].svelte

@@ -6,29 +6,8 @@
 
 <script>
   import CourseLandingPage from '../../components/CourseLandingPage/index.svelte';
-  import Editor from '../../components/CourseLandingPage/components/Editor/index.svelte';
-  import { isMobile } from '../../utils/store/useMobile';
+
+  export let slug;
 </script>
 
-<div class="root">
-  <Editor />
-  <div class="rightBar" class:isMobile={$isMobile}>
-    <CourseLandingPage />
-  </div>
-</div>
-
-<style>
-  .root {
-    display: flex;
-    width: 100%;
-  }
-
-  .rightBar {
-    flex-grow: 1;
-    width: calc(100% - 360px);
-  }
-
-  .rightBar.isMobile {
-    margin-left: 10px;
-  }
-</style>
+<CourseLandingPage {slug} />

src/routes/courses/[id]/landingpage.svelte

@@ -0,0 +1,39 @@
+<script context="module">
+  export async function preload({ params }) {
+    return { courseId: params.id };
+  }
+</script>
+
+<script>
+  import { fly } from 'svelte/transition';
+  import CourseLandingPage from '../../../components/CourseLandingPage/index.svelte';
+  import Editor from '../../../components/CourseLandingPage/components/Editor/index.svelte';
+  import { isMobile } from '../../../utils/store/useMobile';
+
+  export let courseId;
+</script>
+
+<div
+  class="root absolute inset-0 flex justify-center items-center z-50 bg-white"
+  in:fly={{ y: 500, duration: 500 }}
+  out:fly={{ y: 500, duration: 500 }}
+>
+  <Editor {courseId} />
+  <div class="rightBar" class:isMobile={$isMobile}>
+    <CourseLandingPage />
+  </div>
+</div>
+
+<style>
+  .rightBar {
+    flex-grow: 1;
+    width: calc(100% - 360px);
+    overflow: auto;
+    height: 100%;
+    overflow: auto;
+  }
+
+  .rightBar.isMobile {
+    margin-left: 10px;
+  }
+</style>