feat: add classroomio badge (#239)
* working on the classroomio badge * still working on the classroomio badge * updated the classroomio badge * making some changes * implemented the animation and some other updates * chore: improve styling * increase font weigth --------- Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Em_Dev
@@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import { currentOrg, isFreePlan } from '$lib/utils/store/org';
|
||||
import { ArrowUpRight } from 'carbon-icons-svelte';
|
||||
</script>
|
||||
|
||||
{#if $isFreePlan}
|
||||
<a
|
||||
href={`https://classroomio.com?utm_source=${$currentOrg.siteName}.classroomio.com`}
|
||||
target="_blank"
|
||||
class="group fixed bottom-6 right-9 z-[1000px] hover:no-underline"
|
||||
>
|
||||
<span
|
||||
class="overflow-hidden transition shadow-md duration-500 group-hover:bg-blue-600 group-hover:text-white flex items-center gap-2 dark:text-black bg-white border border-gray-50 group-hover:border-blue-600 rounded-md p-3 text-sm font-normal"
|
||||
>
|
||||
<ArrowUpRight
|
||||
class="
|
||||
absolute group-hover:opacity-100 group-hover:translate-y-0 group-hover:translate-x-0
|
||||
opacity-0 translate-y-full -translate-x-full transition duration-500 text-white"
|
||||
size={24}
|
||||
/>
|
||||
<img src="/logo-192.png" alt="logo" class="group-hover:opacity-0 opacity-100 h-[16px]" />
|
||||
Powered by ClassroomIO
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import get from 'lodash/get';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import PoweredBy from '$lib/components/Upgrade/PoweredBy.svelte';
|
||||
import pluralize from 'pluralize';
|
||||
import { page } from '$app/stores';
|
||||
import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte'; //note
|
||||
@@ -102,6 +103,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !editMode}
|
||||
<PoweredBy />
|
||||
{/if}
|
||||
|
||||
<div class="flex w-full flex-col items-center bg-white dark:bg-black">
|
||||
<!-- Header Section -->
|
||||
<header id="header" class="banner p- flex w-full items-center justify-center">
|
||||
|
||||
@@ -23,11 +23,11 @@
|
||||
import { getSupabase } from '$lib/utils/functions/supabase';
|
||||
import { courses, courseMetaDeta } from '$lib/components/Courses/store';
|
||||
import { getCourseBySiteName } from '$lib/utils/services/org';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { validateEmail } from '$lib/utils/functions/validateEmail';
|
||||
import TextArea from '$lib/components/Form/TextArea.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { landingPageSettings } from '$lib/components/Org/Settings/store';
|
||||
import PoweredBy from '$lib/components/Upgrade/PoweredBy.svelte';
|
||||
|
||||
export let orgSiteName = '';
|
||||
export let org = {};
|
||||
@@ -152,6 +152,8 @@
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<PoweredBy />
|
||||
|
||||
{#if !org.landingpage}
|
||||
<PageLoader />
|
||||
{:else}
|
||||
@@ -494,7 +496,7 @@
|
||||
{#if $landingPageSettings.footer.show}
|
||||
<footer
|
||||
id="footer"
|
||||
class="flex justify-center flex-col mt-10 w-full px-5 py-10 md:py-3 border-b-0 border-r-0 border-t border-l-0 border-gray-300"
|
||||
class="flex justify-center items-center flex-col my-10 w-full px-5 py-10 md:py-3 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">
|
||||
@@ -517,9 +519,9 @@
|
||||
|
||||
<span class="flex-grow" />
|
||||
|
||||
<div class="flex mt-5 sm:mt-0">
|
||||
<div class="flex mt-5 sm:mt-0 gap-2">
|
||||
{#if $landingPageSettings.footer.facebook}
|
||||
<li class="mx-2">
|
||||
<li>
|
||||
<a
|
||||
href={$landingPageSettings.footer.facebook}
|
||||
target="_blank"
|
||||
@@ -532,7 +534,7 @@
|
||||
</li>
|
||||
{/if}
|
||||
{#if $landingPageSettings.footer.twitter}
|
||||
<li class="mx-2">
|
||||
<li>
|
||||
<a
|
||||
href={$landingPageSettings.footer.twitter}
|
||||
target="_blank"
|
||||
@@ -546,7 +548,7 @@
|
||||
{/if}
|
||||
|
||||
{#if $landingPageSettings.footer.linkedin}
|
||||
<li class="mx-2">
|
||||
<li>
|
||||
<a
|
||||
href={$landingPageSettings.footer.linkedin}
|
||||
target="_blank"
|
||||
@@ -560,12 +562,6 @@
|
||||
{/if}
|
||||
</div>
|
||||
</ul>
|
||||
<p class="text-center mt-5">
|
||||
Powered by
|
||||
<a class="text-primary-600 underline" href="https://classroomio.com" target="_blank"
|
||||
>ClassroomIO</a
|
||||
>
|
||||
</p>
|
||||
</footer>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import { currentOrg, isFreePlan } from '$lib/utils/store/org';
|
||||
import { ArrowUpRight } from 'carbon-icons-svelte';
|
||||
</script>
|
||||
|
||||
{#if $isFreePlan}
|
||||
<a
|
||||
href={`https://classroomio.com?utm_source=${$currentOrg.siteName}.classroomio.com`}
|
||||
target="_blank"
|
||||
class="group fixed bottom-6 right-9 z-50 hover:no-underline"
|
||||
>
|
||||
<span
|
||||
class="overflow-hidden transition shadow-md duration-500 group-hover:bg-blue-600 group-hover:text-white flex items-center gap-2 dark:text-black bg-white border border-gray-50 group-hover:border-blue-600 rounded-md p-3 text-sm font-medium"
|
||||
>
|
||||
<ArrowUpRight
|
||||
class="
|
||||
absolute group-hover:opacity-100 group-hover:translate-y-0 group-hover:translate-x-0
|
||||
opacity-0 translate-y-full -translate-x-full transition duration-500 text-white"
|
||||
size={16}
|
||||
/>
|
||||
<img src="/logo-192.png" alt="logo" class="group-hover:opacity-0 opacity-100 h-[16px]" />
|
||||
Powered by ClassroomIO
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
@@ -2,6 +2,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import Community from '$lib/components/Org/Community/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { currentOrgPath } from '$lib/utils/store/org';
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import Add from 'carbon-icons-svelte/lib/Add.svelte';
|
||||
@@ -24,7 +25,11 @@
|
||||
<Add size={24} />
|
||||
</PrimaryButton>
|
||||
{:else}
|
||||
<PrimaryButton label="Ask Community" onClick={askCommunity} />
|
||||
<PrimaryButton
|
||||
label="Ask Community"
|
||||
variant={VARIANTS.CONTAINED_DARK}
|
||||
onClick={askCommunity}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<Community />
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
|
||||
import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { askCommunityValidation } from '$lib/utils/functions/validator';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { snackbar } from '$lib/components/Snackbar/store';
|
||||
@@ -86,7 +87,7 @@
|
||||
</a>
|
||||
<div class="flex items-center gap-12 justify-between">
|
||||
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Ask the community</h1>
|
||||
<PrimaryButton label="Publish" onClick={handleSave} />
|
||||
<PrimaryButton label="Publish" variant={VARIANTS.CONTAINED_DARK} onClick={handleSave} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+4
-4
@@ -121,8 +121,8 @@ Through a carefully crafted curriculum, you''ll learn the core concepts of MVC,
|
||||
--
|
||||
|
||||
INSERT INTO "public"."course" ("title", "description", "overview", "id", "created_at", "updated_at", "group_id", "is_template", "logo", "slug", "metadata", "cost", "currency", "banner_image", "is_published", "is_certificate_downloadable", "certificate_theme", "status") VALUES
|
||||
('Building express apps', 'This shows how to build an express app', 'Welcome to this amazing course 🚀 ', '2e845a61-98a4-4a78-a8db-f140d14f451b', '2023-11-22 10:16:06.854875+00', '2023-11-22 10:16:06.854875+00', 'c0ab7c5b-db2e-46e7-9853-9308c8ccb2cd', true, '', NULL, '{"gols": "", "description": "", "requirements": ""}', 0, 'NGN', NULL, false, false, NULL, 'ACTIVE'),
|
||||
('Data Science with Python and Pandas', 'Unlock the power of data with our "Data Science with Python and Pandas" course. Dive into Python programming fundamentals and then journey into the world of Pandas for efficient data manipulation and analysis. Learn essential data cleaning and preprocessing techniques before venturing into statistical analysis using Pandas. Cap off your exploration with data visualization using Matplotlib and Seaborn. Gain the skills to derive meaningful insights from data and communicate them effectively, positioning yourself as a proficient data scientist in the dynamic field of data analytics.', 'Welcome to this amazing course 🚀 ', 'f0a85d18-aff4-412f-b8e6-3b34ef098dce', '2023-12-16 14:41:15.294951+00', '2023-12-16 14:41:15.294951+00', '0789ced2-b8f3-472c-97ff-bdde1e80dddf', true, 'https://images.unsplash.com/photo-1518186285589-2f7649de83e0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTE1NTV8MHwxfHNlYXJjaHwxOHx8ZGF0YSUyMHNjaWVuY2V8ZW58MHx8fHwxNzA3Nzk5MzMwfDA&ixlib=rb-4.0.3&q=80&w=1080', 'data-science-with-python-and-pandas-1702919269375', '{"gols": "", "grading": true, "description": "", "requirements": "", "lessonDownload": true, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE'),
|
||||
('Building express apps', 'This shows how to build an express app', 'Welcome to this amazing course 🚀 ', '2e845a61-98a4-4a78-a8db-f140d14f451b', '2023-11-22 10:16:06.854875+00', '2023-11-22 10:16:06.854875+00', 'c0ab7c5b-db2e-46e7-9853-9308c8ccb2cd', true, '', 'build-express-apps', '{"goals": "", "description": "", "requirements": ""}', 0, 'NGN', NULL, false, false, NULL, 'ACTIVE'),
|
||||
('Data Science with Python and Pandas', 'Unlock the power of data with our "Data Science with Python and Pandas" course. Dive into Python programming fundamentals and then journey into the world of Pandas for efficient data manipulation and analysis. Learn essential data cleaning and preprocessing techniques before venturing into statistical analysis using Pandas. Cap off your exploration with data visualization using Matplotlib and Seaborn. Gain the skills to derive meaningful insights from data and communicate them effectively, positioning yourself as a proficient data scientist in the dynamic field of data analytics.', 'Welcome to this amazing course 🚀 ', 'f0a85d18-aff4-412f-b8e6-3b34ef098dce', '2023-12-16 14:41:15.294951+00', '2023-12-16 14:41:15.294951+00', '0789ced2-b8f3-472c-97ff-bdde1e80dddf', true, 'https://images.unsplash.com/photo-1518186285589-2f7649de83e0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTE1NTV8MHwxfHNlYXJjaHwxOHx8ZGF0YSUyMHNjaWVuY2V8ZW58MHx8fHwxNzA3Nzk5MzMwfDA&ixlib=rb-4.0.3&q=80&w=1080', 'data-science-with-python-and-pandas-1702919269375', '{"goals": "", "grading": true, "description": "", "requirements": "", "lessonDownload": true, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE'),
|
||||
('Getting started with MVC', 'Embark on a comprehensive journey into the world of Model-View-Controller (MVC) architecture with our course, "Getting Started with MVC." Designed for beginners and aspiring developers, this course provides a solid foundation for understanding the principles and practices behind MVC, a widely adopted design pattern in software development.
|
||||
|
||||
Through a carefully crafted curriculum, you''ll learn the core concepts of MVC, exploring how it enhances the organization, scalability, and maintainability of your code', '<p>"Getting Started with MVC. is designed for beginners and aspiring developers, this course provides a solid foundation for understanding the principles and practices behind MVC, a widely adopted design pattern in software development.</p>
|
||||
@@ -162,8 +162,8 @@ Through a carefully crafted curriculum, you''ll learn the core concepts of MVC,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>', '98e6e798-f0bd-4f9d-a6f5-ce0816a4f97e', '2023-12-16 14:11:16.672983+00', '2023-12-16 14:11:16.672983+00', 'c6b022fd-fff3-4f09-8960-c9cb06819761', true, '', NULL, '{"gols": "", "grading": false, "description": "", "requirements": "", "lessonDownload": false, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE'),
|
||||
('Modern Web Development with React', 'By the end of this course, you''ll be equipped to build interactive and responsive web applications, making you a proficient React developer ready for the demands of today''s web development landscape.', 'Welcome to this amazing course 🚀 ', '16e3bc8d-5d1b-4708-988e-93abae288ccf', '2023-12-16 14:40:15.374067+00', '2023-12-16 14:40:15.374067+00', '04a250f1-bcb9-4e0d-a3d4-a01096e7a105', true, 'https://images.unsplash.com/photo-1565843708714-52ecf69ab81f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTE1NTV8MHwxfHNlYXJjaHwxOHx8cmVhY3QlMjBkZXZ8ZW58MHx8fHwxNzA3Nzk5NDMyfDA&ixlib=rb-4.0.3&q=80&w=1080', NULL, '{"gols": "", "grading": true, "description": "", "requirements": "", "lessonDownload": false, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE');
|
||||
</div>', '98e6e798-f0bd-4f9d-a6f5-ce0816a4f97e', '2023-12-16 14:11:16.672983+00', '2023-12-16 14:11:16.672983+00', 'c6b022fd-fff3-4f09-8960-c9cb06819761', true, '', 'getting-started-with-mvc', '{"goals": "", "grading": false, "description": "", "requirements": "", "lessonDownload": false, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE'),
|
||||
('Modern Web Development with React', 'By the end of this course, you''ll be equipped to build interactive and responsive web applications, making you a proficient React developer ready for the demands of today''s web development landscape.', 'Welcome to this amazing course 🚀 ', '16e3bc8d-5d1b-4708-988e-93abae288ccf', '2023-12-16 14:40:15.374067+00', '2023-12-16 14:40:15.374067+00', '04a250f1-bcb9-4e0d-a3d4-a01096e7a105', true, 'https://images.unsplash.com/photo-1565843708714-52ecf69ab81f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTE1NTV8MHwxfHNlYXJjaHwxOHx8cmVhY3QlMjBkZXZ8ZW58MHx8fHwxNzA3Nzk5NDMyfDA&ixlib=rb-4.0.3&q=80&w=1080', 'modern-web-development, '{"goals": "", "grading": true, "description": "", "requirements": "", "lessonDownload": false, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE');
|
||||
|
||||
|
||||
--
|
||||
|
||||
Reference in New Issue
Block a user