CLASSROOMIO-T-45: Basic Landing Page for subdomains

Co-authored-by: Rotimi Best <[email protected]>

Merge-request: CLASSROOMIO-MR-10
Merged-by: Digdippa Team <[email protected]>

src/components/Courses/components/Card/index.svelte

@@ -4,9 +4,11 @@
   import { ROLE } from '../../../../utils/constants/roles';
   import getCurrencyFormatter from '../../../../utils/functions/getCurrencyFormatter';
   import OverflowMenuHorizontal24 from 'carbon-icons-svelte/lib/OverflowMenuHorizontal24';
+  import ArrowRight from 'carbon-icons-svelte/lib/ArrowRight24';
 
   export let bannerImage: string | undefined;
   export let id = '';
+  export let slug = '';
   export let title = '';
   export let description = '';
   export let role_id = ROLE.STUDENT;
@@ -14,6 +16,7 @@
   export let cost = 0;
   export let totalLessons = 0;
   export let currency = 'NGN';
+  export let isOnLandingPage = false;
 
   let formatter = getCurrencyFormatter(currency);
 
@@ -42,25 +45,31 @@
   }
 </script>
 
-<a rel="prefetch" href="/courses/{id}" class=" text-black">
+<a
+  rel="prefetch"
+  href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
+  class=" text-black"
+>
   <div
-    class="root w-72 border bg-gray-100 dark:bg-gray-700 mr-4 mb-4 rounded-md transition ease-in-out relative"
+    class="root w-80 border bg-gray-100 dark:bg-gray-700 sm:mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
   >
-    <Dropdown
-      options={getOptions()}
-      classNames="absolute top-4 right-4"
-      isIcon={true}
-    >
-      <div class="p-1 rounded-full bg-white dark:bg-gray-600">
-        <OverflowMenuHorizontal24 class="carbon-icon" />
-      </div>
-    </Dropdown>
+    {#if !isOnLandingPage}
+      <Dropdown
+        options={getOptions()}
+        classNames="absolute top-4 right-4"
+        isIcon={true}
+      >
+        <div class="p-1 rounded-full bg-white dark:bg-gray-600">
+          <OverflowMenuHorizontal24 class="carbon-icon" />
+        </div>
+      </Dropdown>
+    {/if}
     <img
       class="h-2/5 w-full rounded-tl rounded-tr"
       src={bannerImage ?? '/images/classroomio-course-img-template.jpg'}
       alt="Course Logo"
     />
-    <div class="p-3 pb-0">
+    <div class="px-3 py-5">
       <h4 class="dark:text-white title text-md font-bold">
         {title}
       </h4>
@@ -72,13 +81,18 @@
       </p>
       <div class="flex justify-between">
         <p class="dark:text-white">{totalLessons} lessons</p>
-        <div class="rounded bg-{isPublished ? 'green' : 'red'}-200 py-1 px-2">
-          {#if isPublished}
-            Published
-          {:else}
-            Unpublished
-          {/if}
-        </div>
+
+        {#if isOnLandingPage}
+          <ArrowRight class="carbon-class" />
+        {:else}
+          <div class="rounded bg-{isPublished ? 'green' : 'red'}-200 py-1 px-2">
+            {#if isPublished}
+              Published
+            {:else}
+              Unpublished
+            {/if}
+          </div>
+        {/if}
       </div>
       <p class="dark:text-white text-gray-500 text-xs mt-1">
         {!cost ? 'free' : formatter.format(cost)}
@@ -92,7 +106,8 @@
     min-height: 370px;
   }
 
-  a {
+  a,
+  a:hover {
     text-decoration: none;
   }
   .title,

src/components/Navigation/index.svelte

@@ -28,7 +28,7 @@
     </div>
 
     {#if $user.isLoggedIn}
-      <li class="">
+      <li class="hidden">
         <a
           class="block"
           aria-current={segment === undefined || segment === 'dashboard'
@@ -40,7 +40,7 @@
         </a>
       </li>
 
-      <li>
+      <li class="hidden">
         <a
           class="block"
           aria-current={segment === 'courses' ? 'page' : undefined}

src/components/Org/LandingPage/index.svelte

@@ -1,4 +1,163 @@
 <script>
+  import { onMount } from 'svelte';
+  import { Search } from 'carbon-components-svelte';
+  import LogoFacebook from 'carbon-icons-svelte/lib/LogoFacebook24';
+  import LogoTwitter from 'carbon-icons-svelte/lib/LogoTwitter24';
+  import LogoLinkedin from 'carbon-icons-svelte/lib/LogoLinkedin24';
 
+  import Navigation from '../../Navigation/index.svelte';
+  import Box from '../../Box/index.svelte';
+  import Card from '../../Courses/components/Card/index.svelte';
+  import CardLoader from '../../Courses/components/Card/Loader.svelte';
+  import CoursesEmptyIcon from '../../Icons/CoursesEmptyIcon.svelte';
+  import { courses, courseMetaDeta } from '../../Courses/store';
+  import { getCourseBySiteName } from '../../../utils/services/org';
+  import { appStore } from '../../../utils/store/app';
+
+  export let segment;
+
+  let searchValue = '';
+
+  onMount(async () => {
+    console.log('sitename', $appStore.siteNameFromDomain);
+    $courseMetaDeta.isLoading = true;
+    const coursesResult = await getCourseBySiteName(
+      $appStore.siteNameFromDomain
+    );
+    courses.set(coursesResult);
+    $courseMetaDeta.isLoading = false;
+  });
 </script>
 
+<main>
+  <Navigation {segment} />
+
+  <!-- Header Section -->
+  <header class="banner w-full flex items-center justify-center p-">
+    <div
+      class="w-full flex items-center justify-center flex-col-reverse md:flex-row"
+    >
+      <!-- Course Description -->
+      <div class="course-descr w-11/12 py-10">
+        <h1
+          class="dark:text-white text-5xl text-white text-center my-4 font-bold"
+        >
+          Explore courses
+        </h1>
+        <p class="dark:text-white text-md text-white mb-6 text-center">
+          Find courses you will love from best teachers all over the world🌎.
+        </p>
+
+        <Search placeholder="Find a course..." bind:value={searchValue} />
+      </div>
+    </div>
+  </header>
+
+  <section class="my-10 mx-auto max-w-6xl w-full">
+    <div class="flex items-center justify-evenly flex-wrap my-4 m-auto">
+      {#if $courseMetaDeta.isLoading}
+        <CardLoader />
+        <CardLoader />
+        <CardLoader />
+      {:else}
+        {#each $courses as courseData}
+          <Card
+            id={courseData.id}
+            slug={courseData.slug}
+            logo={courseData.logo}
+            bannerImage={courseData.banner_image}
+            title={courseData.title}
+            description={courseData.description}
+            role_id={courseData.role_id}
+            isPublished={courseData.is_published}
+            cost={courseData.cost}
+            currency={courseData.currency}
+            totalLessons={courseData.total_lessons}
+            isOnLandingPage={true}
+          />
+        {:else}
+          <Box>
+            <CoursesEmptyIcon />
+            <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
+            <p class="dark:text-white w-1/3 text-center">
+              We've got great courses coming your way, stay tuned!!!
+            </p>
+          </Box>
+        {/each}
+      {/if}
+    </div>
+  </section>
+
+  <footer
+    class="flex justify-center mt-10 w-full px-5 py-5 sm:py-10 border-b-0 border-r-0 border-t border-l-0 border-gray-300"
+  >
+    <ul class="flex w-11/12 items-center flex-col sm:flex-row">
+      <div class="logo">
+        <a
+          href="/"
+          title="Go to ClassroomIO Home"
+          id="logo"
+          data-hveid="8"
+          class="flex items-center"
+        >
+          <img
+            src="/logo-192.png"
+            alt="ClassroomIO logo"
+            class="rounded h-10 w-10 inline-block mx-auto"
+            data-atf="1"
+          />
+          <h3 class="text-black ml-3">Classroomio</h3>
+        </a>
+      </div>
+
+      <span class="flex-grow" />
+
+      <div class="flex mt-5 sm:mt-0">
+        <li class="mx-2">
+          <a
+            href="facebook.com"
+            target="_blank"
+            title="Facebook"
+            id="logo-fb"
+            data-hveid="8"
+          >
+            <LogoFacebook />
+          </a>
+        </li>
+        <li class="mx-2">
+          <a
+            href="twitter.com"
+            target="_blank"
+            title="Twitter"
+            id="logo-tw"
+            data-hveid="8"
+          >
+            <LogoTwitter />
+          </a>
+        </li>
+        <li class="mx-2">
+          <a
+            href="linkedin.com"
+            target="_blank"
+            title="Linkedin"
+            id="logo-ln"
+            data-hveid="8"
+          >
+            <LogoLinkedin />
+          </a>
+        </li>
+      </div>
+    </ul>
+  </footer>
+</main>
+
+<style lang="scss">
+  .banner {
+    background-color: #040f2d;
+    min-height: 337px;
+  }
+
+  .course-descr {
+    max-width: 400px;
+  }
+</style>