ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lint codebase and run precommit hook

Browse Source
This commit is contained in:
Rotimi Best
2025-12-25 09:01:51 +00:00
parent 334c67f22a
commit b31ccf3037
214 changed files with 6191 additions and 2880 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/src/lib/components/blog-list-item.svelte
+6 -14
View File
@@ -13,7 +13,7 @@
</script>
{#if !isRecommended}
<div class="mb-5 flex md:flex-row flex-col md:items-center gap-2">
<div class="mb-5 flex flex-col gap-2 md:flex-row md:items-center">
<!-- Date -->
<p class="text-sm text-slate-500">{formatDate(post.date)}</p>
@@ -29,24 +29,16 @@
{/if}
<a href="/blog/{post.slug}" class="group">
<img
loading="lazy"
src={post.imageUrl}
alt={post.title}
class="w-70 h-48 object-cover rounded-md"
/>
<p
class="font-bold text-lg py-2 {isRecommended &&
'h-[60px]'} line-clamp-2 group-hover:text-slate-500"
>
<img loading="lazy" src={post.imageUrl} alt={post.title} class="w-70 h-48 rounded-md object-cover" />
<p class="py-2 text-lg font-bold {isRecommended && 'h-[60px]'} line-clamp-2 group-hover:text-slate-500">
{@html post.title}
</p>
<p class="text-slate-500 pt-2 mb-4 line-clamp-3">{post.description}</p>
<p class="mb-4 line-clamp-3 pt-2 text-slate-500">{post.description}</p>
</a>
<div class="flex items-center justify-start gap-4 my-2">
<img loading="lazy" src={post.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
<div class="my-2 flex items-center justify-start gap-4">
<img loading="lazy" src={post.avatar} alt="avatar" class="h-10 w-10 rounded-full" />
<span>
<p class="font-semibold">{post.author}</p>
<p class="text-slate-500">{post.role}</p>
apps/website/src/lib/components/core-feature-section.svelte
+9 -9
View File
@@ -26,14 +26,14 @@
} = $props();
</script>
<section {id} class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
<section {id} class="w-full border-x-0 border-b border-t-0 border-gray-200 py-32">
<div
class="w-4/5 mx-auto flex flex-col {rightToLeft
class="mx-auto flex w-4/5 flex-col {rightToLeft
? 'lg:flex-row-reverse'
: 'lg:flex-row'} items-center justify-between gap-8 lg:gap-28"
>
<div class="w-[80vw] flex flex-col">
<div class="my-2 lg:my-4 ml-1 flex gap-2 items-center">
<div class="flex w-[80vw] flex-col">
<div class="my-2 ml-1 flex items-center gap-2 lg:my-4">
{#if taglineIcon === 'simplified'}
<img width="27" height="27" loading="lazy" src={thumbsUp} alt="" class="w-7" />
{:else if taglineIcon === 'flexible'}
@@ -46,16 +46,16 @@
{:else if taglineIcon === 'productivity'}
<img width="27" height="27" loading="lazy" src={robotArm} alt="" class="w-7" />
{/if}
<p class="font-medium text-base">{tagline}</p>
<p class="text-base font-medium">{tagline}</p>
</div>
<h2 class="text-3xl mb-3 lg:mb-6">{title}</h2>
<p class="leading-8 text-lg text-gray-500">
<h2 class="mb-3 text-3xl lg:mb-6">{title}</h2>
<p class="text-lg leading-8 text-gray-500">
{description}
</p>
{#if more}
<br />
<p class="leading-8 text-lg text-gray-500">
<p class="text-lg leading-8 text-gray-500">
{@render more?.()}
</p>
{/if}
@@ -64,7 +64,7 @@
<video
width="100%"
height="100%"
class="w-full h-auto lg:max-h-[80%] rounded-md shadow-xl"
class="h-auto w-full rounded-md shadow-xl lg:max-h-[80%]"
autoplay
loop
muted
apps/website/src/lib/components/core-features.svelte
+14 -25
View File
@@ -3,8 +3,8 @@
import { PUBLIC_ENABLE_STATS } from '$env/static/public';
</script>
<section class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
<div class="justify-center flex text-center flex-wrap gap-x-12 gap-y-16">
<section class="w-full border-x-0 border-b border-t-0 border-gray-200 py-32">
<div class="flex flex-wrap justify-center gap-x-12 gap-y-16 text-center">
<div class="w-full min-w-0" style="max-width: 1000px; flex: 1 1 550px;">
<div class="mx-auto flex max-w-lg flex-col items-center gap-2">
<div class="flex-none">
@@ -19,19 +19,16 @@
/>
</div>
</div>
<div class="text-base leading-snug text-center">
<span class="font-bold opacity-50 text-4xl">“</span>
<div class="text-center text-base leading-snug">
<span class="text-4xl font-bold opacity-50">“</span>
<span class="text-gray-800" style="font-size: 17px;"
>ClassroomIO really helped me bootstrap my program. The dashboard is extremely
intuitive. I could navigate most of it without any help / support. Coming from framer, I
can honestly say that I am extremely greatful that I found ClassroomIO.</span
> <span class="font-bold opacity-50 inline-block text-4xl">”</span>
>ClassroomIO really helped me bootstrap my program. The dashboard is extremely intuitive. I could navigate
most of it without any help / support. Coming from framer, I can honestly say that I am extremely greatful
that I found ClassroomIO.</span
> <span class="inline-block text-4xl font-bold opacity-50">”</span>
</div>
<div class="mx-auto flex items-center gap-2 justify-center">
<div
class="flex max-w-[200px] flex-none flex-col overflow-hidden text-left"
style="color: var(--clr-text);"
>
<div class="mx-auto flex items-center justify-center gap-2">
<div class="flex max-w-[200px] flex-none flex-col overflow-hidden text-left" style="color: var(--clr-text);">
<div class="text-center text-sm font-medium opacity-90">
Pranav Singhal <div class="block text-xs font-medium opacity-70 hover:opacity-50">
Founder at <a href="https://www.dblocked.io/" target="_blank">DBlockEd</a>
@@ -80,26 +77,18 @@
<!-- body section 5 -->
{#if PUBLIC_ENABLE_STATS}
<div
class="flex justify-between flex-row flex-wrap lg:flex-nowrap items-center text-center px-[10%] py-[7%] border-b-[1px] gap-y-20 gap-x-20 mx-0 lg:mx-[12%]"
class="mx-0 flex flex-row flex-wrap items-center justify-between gap-x-20 gap-y-20 border-b-[1px] px-[10%] py-[7%] text-center lg:mx-[12%] lg:flex-nowrap"
>
<div class="w-full">
<h2
class="w-full order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
>
1 thousand
</h2>
<h2 class="order-first w-full text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">1 thousand</h2>
<p class="text-base leading-7 text-gray-600">Feedback collected</p>
</div>
<div class="w-full">
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
5 thousand
</h2>
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">5 thousand</h2>
<p class="text-base leading-7 text-gray-600">Documents processed</p>
</div>
<div class="w-full">
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
1 million
</h2>
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">1 million</h2>
<p class="text-base leading-7 text-gray-600">Page views recorded</p>
</div>
</div>
apps/website/src/lib/components/custom-img.svelte
+1 -6
View File
@@ -8,10 +8,5 @@
</script>
<figure>
<img
{src}
{alt}
loading="lazy"
class="max-w-full w-full h-full md:min-h-[400px] object-cover my-2 rounded-lg"
/>
<img {src} {alt} loading="lazy" class="my-2 h-full w-full max-w-full rounded-lg object-cover md:min-h-[400px]" />
</figure>
apps/website/src/lib/components/faq.svelte
+5 -7
View File
@@ -6,19 +6,17 @@
<div class="mb-20 mt-10 flex flex-col items-center justify-center">
<header class="text-center">
<h1 class="mt-2 text-xl md:text-4xl">
Questions & Answers
</h1>
<h1 class="mt-2 text-xl md:text-4xl">Questions & Answers</h1>
<p
class="mt-4 text-sm md:text-lg font-normal tracking-normal ui:text-muted-foreground lg:px-[20%] lg:text-xl lg:tracking-wide"
class="ui:text-muted-foreground mt-4 text-sm font-normal tracking-normal md:text-lg lg:px-[20%] lg:text-xl lg:tracking-wide"
>
Can't find the answer you're looking for?
<a class="font-semibold text-blue-700" href="mailto:help@classroomio.com" target="_blank"
>Shoot us an email</a> and we'll get back to you ASAP.
<a class="font-semibold text-blue-700" href="mailto:help@classroomio.com" target="_blank">Shoot us an email</a> and
we'll get back to you ASAP.
</p>
</header>
<div class="mt-[20%] lg:m-0 max-w-3xl w-full mx-auto px-2">
<div class="mx-auto mt-[20%] w-full max-w-3xl px-2 lg:m-0">
<Accordion.Root type="single" class="w-full">
{#each faqs as faq, index}
<Accordion.Item value="faq-{index}">
apps/website/src/lib/components/footer.svelte
+8 -11
View File
@@ -26,17 +26,16 @@
/></a
> -->
<div class="mt-5 flex items-center gap-3 lg:mt-10 lg:gap-7">
<Button href="https://www.facebook.com/classroomiohq" target="_blank" variant="ghost" aria-label="Facebook Link">
<Button
href="https://www.facebook.com/classroomiohq"
target="_blank"
variant="ghost"
aria-label="Facebook Link"
>
<Facebook />
</Button>
<Button href="https://twitter.com/classroomio" target="_blank" variant="ghost" aria-label="Twitter Link">
<img
width="20"
height="20"
loading="lazy"
src="/twitter.svg"
alt=""
/>
<img width="20" height="20" loading="lazy" src="/twitter.svg" alt="" />
</Button>
<Button href="https://www.youtube.com/@ClassroomIO" target="_blank" variant="ghost" aria-label="Youtube Link">
<Youtube />
@@ -130,9 +129,7 @@
</div>
</nav>
</div>
<footer
class="border-t py-3 text-center text-xs font-light leading-5 text-gray-500 lg:text-left lg:text-base"
>
<footer class="border-t py-3 text-center text-xs font-light leading-5 text-gray-500 lg:text-left lg:text-base">
<p>All rights reserved.</p>
<p class="flex items-center justify-center">
ClassroomIO © {new Date().getFullYear()} by
apps/website/src/lib/components/hero.svelte
+6 -13
View File
@@ -114,9 +114,9 @@
<span>from one Platform</span>
</div>
<p class="mx-auto mt-10 px-4 ui:text-muted-foreground md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
ClassroomIO is an open source learning management system for companies. We give you a suite
of tools to help you achieve your training, onboarding and certification goals.
<p class="ui:text-muted-foreground mx-auto mt-10 px-4 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
ClassroomIO is an open source learning management system for companies. We give you a suite of tools to help you
achieve your training, onboarding and certification goals.
</p>
</div>
@@ -169,12 +169,8 @@
</div>
<div class="my-10 flex flex-col items-center justify-center gap-4 md:flex-row">
<Button variant="outline" href="/demo" target="_blank" rel="noopener noreferrer nofollow">
Book a demo
</Button>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
Sign Up for Free
</Button>
<Button variant="outline" href="/demo" target="_blank" rel="noopener noreferrer nofollow">Book a demo</Button>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Sign Up for Free</Button>
<!-- <a
class="font-medium lg:font-semibold text-sm md:text-base w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
href="/github"
@@ -195,10 +191,7 @@
/>
</div> -->
<div
style="position: relative; padding-bottom: calc(50% + 42px);"
class="mx-auto w-[85%] lg:w-[70%]"
>
<div style="position: relative; padding-bottom: calc(50% + 42px);" class="mx-auto w-[85%] lg:w-[70%]">
<iframe
title="ClassroomIO Live Demo"
src="https://app.supademo.com/embed/cluw8chyy06nhq2s9m697a680"
apps/website/src/lib/components/modal.svelte
+2 -4
View File
@@ -13,10 +13,8 @@
{#if open}
<div class="relative flex items-center justify-center">
<!-- black background -->
<div class="fixed z-[3000] top-0 left-0 w-full h-full bg-black opacity-[0.7]"></div>
<div
class="fixed z-[3001] {className} w-full md:w-[30%] md:min-w-[500px] bg-white rounded-md mx-auto py-6 px-7"
>
<div class="fixed left-0 top-0 z-[3000] h-full w-full bg-black opacity-[0.7]"></div>
<div class="fixed z-[3001] {className} mx-auto w-full rounded-md bg-white px-7 py-6 md:w-[30%] md:min-w-[500px]">
{@render children?.()}
</div>
</div>
apps/website/src/lib/components/more-features.svelte
+14 -32
View File
@@ -11,15 +11,13 @@
{
icon: globe,
title: 'Customizable Landing Page',
description:
'A minimalistic landing page template out of the box to share your courses with the world',
description: 'A minimalistic landing page template out of the box to share your courses with the world',
image: '/landing-page-builder.webp'
},
{
icon: team,
title: 'Team management',
description:
'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
description: 'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
image: '/team-management.png'
},
// {
@@ -49,39 +47,28 @@
</script>
<!-- More Features -->
<section id="morefeatures" class="py-[10%] px-3 lg:px-0 bg-gray-50">
<section id="morefeatures" class="bg-gray-50 px-3 py-[10%] lg:px-0">
<div class="mx-0 lg:mx-[12%]">
<div class="w-full lg:w-4/5 mx-4 lg:mx-0 mb-14">
<h2 class="mt-2 text-3xl tracking-tight">
There is More...
</h2>
<p class="mt-4 text-lg text-gray-500 w-[94%] lg:w-4/5">
<div class="mx-4 mb-14 w-full lg:mx-0 lg:w-4/5">
<h2 class="mt-2 text-3xl tracking-tight">There is More...</h2>
<p class="mt-4 w-[94%] text-lg text-gray-500 lg:w-4/5">
ClassroomIO is packed with useful features while we try to make it easy to use.
</p>
</div>
<div class="flex flex-col-reverse lg:flex-row gap-3 md:gap-10" id="image-container">
<div
class="w-[95%] p-3 mt-5 overflow-auto lg:overflow-hidden lg:mt-0 lg:w-[45%] flex lg:block"
>
<div class="flex flex-col-reverse gap-3 md:gap-10 lg:flex-row" id="image-container">
<div class="mt-5 flex w-[95%] overflow-auto p-3 lg:mt-0 lg:block lg:w-[45%] lg:overflow-hidden">
{#each moreFeatures as moreFeature, i}
<button
class="p-4 rounded-md {i === selected &&
'selected'} mb-3 text-start min-w-[75vw] lg:min-w-[unset] cursor-pointer"
class="rounded-md p-4 {i === selected &&
'selected'} mb-3 min-w-[75vw] cursor-pointer text-start lg:min-w-[unset]"
onclick={() => {
selected = i;
clearInterval(interval);
}}
>
<div class="flex gap-1 items-center">
<img
loading="lazy"
width="32"
height="32"
src={moreFeature.icon}
alt=""
class="w-8"
/>
<div class="flex items-center gap-1">
<img loading="lazy" width="32" height="32" src={moreFeature.icon} alt="" class="w-8" />
<p class="text-lg">
{moreFeature.title}
</p>
@@ -100,7 +87,7 @@
loading="lazy"
id="image"
in:fly={{ x: 100, duration: 800 }}
class="w-full flex flex-col items-center"
class="flex w-full flex-col items-center"
src={moreFeatures[selected].image}
alt={moreFeatures[selected].title}
/>
@@ -112,11 +99,6 @@
<style>
#morefeatures .selected {
background-image: linear-gradient(
45deg,
rgb(253, 239, 132),
rgb(247, 198, 169),
rgb(21, 186, 196)
);
background-image: linear-gradient(45deg, rgb(253, 239, 132), rgb(247, 198, 169), rgb(21, 186, 196));
}
</style>
apps/website/src/lib/components/navigation.svelte
+12 -10
View File
@@ -16,7 +16,6 @@
import LibraryBigIcon from '@lucide/svelte/icons/library-big';
import { cn } from '@cio/ui/tools';
let { stars }: { stars: number } = $props();
type ListItemProps = HTMLAttributes<HTMLAnchorElement> & {
@@ -126,7 +125,7 @@
<p class="text-sm">
{title}
</p>
<p class="mt-1 text-xs ui:text-muted-foreground">
<p class="ui:text-muted-foreground mt-1 text-xs">
{subtitle}
</p>
</div>
@@ -136,8 +135,8 @@
</li>
{/snippet}
<section class="z-50 fixed top-0 w-full bg-white border-b">
<div class="mx-auto flex w-full items-center justify-between gap-20 py-1 lg:w-[90%] lg:px-0 px-4">
<section class="fixed top-0 z-50 w-full border-b bg-white">
<div class="mx-auto flex w-full items-center justify-between gap-20 px-4 py-1 lg:w-[90%] lg:px-0">
<a href="/" class="w-[10%]">
<div class="flex w-full items-center">
<img loading="lazy" width="28" height="28" src="/logo-512.png" alt="classroomio logo" class="w-6 md:w-7" />
@@ -151,7 +150,7 @@
<NavigationMenu.Item>
<NavigationMenu.Trigger
class={cn(
"flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100",
'flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100',
isSolutionsActive && 'bg-gray-100!'
)}
>
@@ -173,7 +172,10 @@
<NavigationMenu.Item>
<NavigationMenu.Trigger
class={cn("flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100", activeLink.startsWith('/tools') && 'bg-gray-100!')}
class={cn(
'flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100',
activeLink.startsWith('/tools') && 'bg-gray-100!'
)}
>
<a href="/tools" class="no-underline"> Free Tools </a>
</NavigationMenu.Trigger>
@@ -278,7 +280,7 @@
<li class="w-full cursor-pointer text-sm font-semibold text-gray-800 md:text-lg">
<button
class={cn(
"flex w-full items-center justify-between rounded-lg px-4 py-3 transition-all duration-200 hover:bg-gray-100",
'flex w-full items-center justify-between rounded-lg px-4 py-3 transition-all duration-200 hover:bg-gray-100',
isSolutionsActive && 'bg-gray-100'
)}
onclick={handleShowDrawer}
@@ -313,7 +315,7 @@
</a>
<a
class={cn(
"w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
'w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
activeLink.startsWith('/morefeatures') && 'bg-gray-100'
)}
onclick={() => {
@@ -325,7 +327,7 @@
</a>
<a
class={cn(
"w-full cursor-pointer rounded-xl px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
'w-full cursor-pointer rounded-xl px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
activeLink.startsWith('/pricing') && 'bg-gray-100'
)}
onclick={() => {
@@ -337,7 +339,7 @@
</a>
<a
class={cn(
"w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
'w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
activeHash.includes('morefeatures') && 'bg-gray-100'
)}
onclick={() => {
apps/website/src/lib/components/not-found.svelte
+7 -12
View File
@@ -22,18 +22,13 @@
}
</script>
<div class="{className} min-h-[80vh] w-screen flex items-center justify-center">
<div class="{className} flex min-h-[80vh] w-screen items-center justify-center">
<Empty
title={isOrg ? 'Organization doesn\'t exist!' : 'Page not found'}
description="The page you are looking for doesn't exist or has been moved. Please go back to the homepage."
icon={SearchXIcon}
variant="page"
>
<Button
onclick={handleClick}
>
Go Home
</Button>
title={isOrg ? "Organization doesn't exist!" : 'Page not found'}
description="The page you are looking for doesn't exist or has been moved. Please go back to the homepage."
icon={SearchXIcon}
variant="page"
>
<Button onclick={handleClick}>Go Home</Button>
</Empty>
</div>
apps/website/src/lib/components/page-signup-cta.svelte
+4 -11
View File
@@ -13,26 +13,19 @@
</script>
<div
class="floating grad relative mx-auto my-5 flex h-[61vh] w-full flex-col items-center justify-center px-6 py-12 text-center shadow-2xl lg:h-[50vh] lg:w-[70%] lg:rounded-3xl max-w-4xl space-y-8"
class="floating grad relative mx-auto my-5 flex h-[61vh] w-full max-w-4xl flex-col items-center justify-center space-y-8 px-6 py-12 text-center shadow-2xl lg:h-[50vh] lg:w-[70%] lg:rounded-3xl"
>
<div>
<h3
class="font-display mt-3 text-xl tracking-tight text-white lg:mt-2 lg:text-4xl max-w-2xl"
>
<h3 class="font-display mt-3 max-w-2xl text-xl tracking-tight text-white lg:mt-2 lg:text-4xl">
{header}
</h3>
<p class="mt-6 text-md text-gray-300">
<p class="text-md mt-6 text-gray-300">
{subText}
</p>
</div>
{#if demo}
<Button
variant="ghost"
data-cal-config="'layout':'month_view'"
data-cal-link="classroomio/demo"
class="bg-white!"
>
<Button variant="ghost" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo" class="bg-white!">
{btnLabel}
</Button>
{:else}
apps/website/src/lib/components/student-dashboard.svelte
+7 -11
View File
@@ -2,24 +2,20 @@
import { Badge } from '@cio/ui/base/badge';
</script>
<section id="student-dashboard" class="text-center text-white py-[10%] px-3 lg:px-0 bg-black">
<Badge class="py-2! px-4! underline text-sm!">yourorg.classroomio.com</Badge>
<h1
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
>
<section id="student-dashboard" class="bg-black px-3 py-[10%] text-center text-white lg:px-0">
<Badge class="py-2! px-4! text-sm! underline">yourorg.classroomio.com</Badge>
<h1 class="mx-auto flex flex-col items-center gap-4 text-3xl font-normal leading-[1.5] md:text-4xl lg:text-6xl">
Your Student Dashboard
</h1>
<p
class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-base tracking-wide leading-6 text-gray-400 lg:w-2/4"
>
Once you create an account, you get a dedicated dashboard where your students can access all
their courses, assignments, and more.
<p class="mx-auto mt-10 px-4 text-base leading-6 tracking-wide text-gray-400 lg:mt-6 lg:w-2/4 lg:p-0">
Once you create an account, you get a dedicated dashboard where your students can access all their courses,
assignments, and more.
</p>
<div class="relative my-5 md:my-10">
<video
class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg"
class="floating mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
autoplay
loop
muted
apps/website/src/lib/components/success.svelte
+5 -6
View File
@@ -5,13 +5,12 @@
</script>
<div
class="relative overflow-hidden mt-10 flex space-y-3 flex-col text-center items-center border border-[#D9E0F5] justify-center w-full rounded-md min-h-[300px] p-4 bg-[#F5F8FE]"
class="relative mt-10 flex min-h-[300px] w-full flex-col items-center justify-center space-y-3 overflow-hidden rounded-md border border-[#D9E0F5] bg-[#F5F8FE] p-4 text-center"
>
<div class="absolute w-20 h-20 bg-[#0233BD] -top-14 -left-9 rotate-[50deg]"></div>
<h1 class="font-bold text-3xl">Your message has been sent 🎉</h1>
<p class="w-[70%] font-normal text-sm">
We'll get back to you as soon as possible. In the meantime, Explore and enjoy features on our
website
<div class="absolute -left-9 -top-14 h-20 w-20 rotate-[50deg] bg-[#0233BD]"></div>
<h1 class="text-3xl font-bold">Your message has been sent 🎉</h1>
<p class="w-[70%] text-sm font-normal">
We'll get back to you as soon as possible. In the meantime, Explore and enjoy features on our website
</p>
<Button class="px-10 md:px-20" onclick={() => goto('/')}>Go to Home</Button>
</div>
apps/website/src/lib/components/testimonial.svelte
+5 -15
View File
@@ -3,27 +3,17 @@
import { Button } from '@cio/ui/base/button';
</script>
<section id="testimonial" class="flex flex-col items-center py-[5%] px-3 lg:px-0 space-y-2">
<h1
class="mx-auto text-3xl md:text-4xl lg:text-5xl font-normal leading-normal flex flex-col items-center gap-4 my-0"
>
<section id="testimonial" class="flex flex-col items-center space-y-2 px-3 py-[5%] lg:px-0">
<h1 class="mx-auto my-0 flex flex-col items-center gap-4 text-3xl font-normal leading-normal md:text-4xl lg:text-5xl">
Hear from Happy ClassroomIO Users
</h1>
<p
class="mx-auto text-center px-4 lg:p-0 text-base tracking-wide leading-6 ui:text-muted-foreground lg:w-2/4"
>
<p class="ui:text-muted-foreground mx-auto px-4 text-center text-base leading-6 tracking-wide lg:w-2/4 lg:p-0">
See what excites them about building and managing bootcamps with ClassroomIO.
</p>
<Button
href="/signup"
target="_blank"
rel="noopener noreferrer nofollow"
>
Sign Up for Free
</Button>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Sign Up for Free</Button>
<div class="relative my-5 md:my-10 w-[85%] lg:w-[70%]">
<div class="relative my-5 w-[85%] md:my-10 lg:w-[70%]">
<SenjaEmbed id="3e847d7a-13d3-483e-8a71-5b35273dcc6c" />
</div>
</section>
apps/website/src/lib/components/timeline.svelte
+11 -11
View File
@@ -1,29 +1,29 @@
<script lang="ts">
interface Props {
items?: {
title: string;
desc: string;
}[];
title: string;
desc: string;
}[];
}
let { items = [] }: Props = $props();
</script>
<div class="relative w-fit flex justify-center space-x-8 md:space-x-10">
<div class="relative flex w-fit justify-center space-x-8 md:space-x-10">
<div
class="w-[3px] md:w-[2px] bg-blue-600 mt-10 before:bg-linear-to-t before:from-white before:to-transparent before:w-[4px] before:h-36 before:absolute before:bottom-0"
></div>
class="before:bg-linear-to-t mt-10 w-[3px] bg-blue-600 before:absolute before:bottom-0 before:h-36 before:w-[4px] before:from-white before:to-transparent md:w-[2px]"
></div>
<div class="space-y-8">
{#each items as card, index}
<div class="md:w-140 w-full border-2 rounded-lg px-4 py-8 space-y-4 bg-white">
<div class="md:w-140 w-full space-y-4 rounded-lg border-2 bg-white px-4 py-8">
<div class="flex items-center">
<div
class={`z-50 absolute -left-3 ${
class={`absolute -left-3 z-50 ${
index > 0 &&
'before:bg-linear-to-t before:from-white before:to-transparent before:w-[4px] before:h-36 before:absolute before:-top-36'
} flex items-center justify-center w-7 h-7 bg-blue-100 rounded-full`}
'before:bg-linear-to-t before:absolute before:-top-36 before:h-36 before:w-[4px] before:from-white before:to-transparent'
} flex h-7 w-7 items-center justify-center rounded-full bg-blue-100`}
>
<div class="w-4 h-4 bg-blue-800 rounded-full z-50"></div>
<div class="z-50 h-4 w-4 rounded-full bg-blue-800"></div>
</div>
<h1 class="text-2xl font-bold text-blue-800">{card.title}</h1>
</div>
apps/website/src/lib/components/upload-widget.svelte
+2 -9
View File
@@ -10,12 +10,7 @@
labelClassName?: string;
}
let {
imageURL = $bindable(''),
label = '',
isRequired = false,
labelClassName = ''
}: Props = $props();
let { imageURL = $bindable(''), label = '', isRequired = false, labelClassName = '' }: Props = $props();
let isUploading = false;
let fileInput: HTMLInputElement = $state();
@@ -98,9 +93,7 @@
{:else}
<div class="space-y-4">
<Copy size={24} class="mx-auto" />
<p class="text-center text-sm text-gray-500 my-2">
Max file size: 2MB, accepted: JPEG, PNG, GIF, WebP only
</p>
<p class="my-2 text-center text-sm text-gray-500">Max file size: 2MB, accepted: JPEG, PNG, GIF, WebP only</p>
</div>
{/if}
</div>
apps/website/src/lib/features/contact/feedback-form.svelte
+3 -9
View File
@@ -49,9 +49,9 @@
{#if sent}
<Success />
{:else}
<div class="w-full my-10 space-y-5">
<div class="my-10 w-full space-y-5">
<Field.Group>
<div class="flex flex-col md:flex-row gap-10">
<div class="flex flex-col gap-10 md:flex-row">
<Field.Field class="w-full">
<Field.Label for="feedback-name">Your Name</Field.Label>
<Input id="feedback-name" bind:value={name} required />
@@ -75,13 +75,7 @@
</Field.Field>
{/if}
</Field.Group>
<Button
onclick={handleClick}
disabled={isLoading}
loading={isLoading}
>
Submit Feedback
</Button>
<Button onclick={handleClick} disabled={isLoading} loading={isLoading}>Submit Feedback</Button>
</div>
{/if}
</div>
apps/website/src/lib/features/contact/help-form.svelte
+3 -9
View File
@@ -49,9 +49,9 @@
{#if sent}
<Success />
{:else}
<div class="w-full my-10 space-y-5">
<div class="my-10 w-full space-y-5">
<Field.Group>
<div class="flex flex-col md:flex-row gap-10">
<div class="flex flex-col gap-10 md:flex-row">
<Field.Field class="w-full">
<Field.Label for="help-name">Your Name</Field.Label>
<Input id="help-name" bind:value={name} required />
@@ -75,13 +75,7 @@
</Field.Field>
{/if}
</Field.Group>
<Button
onclick={handleClick}
disabled={isLoading}
loading={isLoading}
>
Submit Request
</Button>
<Button onclick={handleClick} disabled={isLoading} loading={isLoading}>Submit Request</Button>
</div>
{/if}
</div>
apps/website/src/lib/features/tools/progress/avatar.svelte
+4 -8
View File
@@ -45,7 +45,7 @@
</Dialog.Header>
<!-- map for each avatar -->
<div class="flex flex-wrap justify-evenly gap-y-3 mt-3">
<div class="mt-3 flex flex-wrap justify-evenly gap-y-3">
{#each avatars as avatar, index}
<button
onclick={() => {
@@ -59,21 +59,17 @@
hoveredIndex = null;
isAddIcon = false;
}}
class="relative w-[17%] flex justify-center items-center shadow-sm rounded-full hover:scale-110 transition-all duration-300"
class="relative flex w-[17%] items-center justify-center rounded-full shadow-sm transition-all duration-300 hover:scale-110"
>
<!-- + icon overlay -->
{#if isAddIcon && hoveredIndex === index}
<div
class="w-full h-full flex justify-center items-center bg-white border absolute rounded-full opacity-[0.7] blur-md"
class="absolute flex h-full w-full items-center justify-center rounded-full border bg-white opacity-[0.7] blur-md"
></div>
<img src="/free-tools/progress-report/hover-plus-icon.svg" alt="" class="absolute" />
{/if}
<!-- avatar -->
<img
src="https://assets.cdn.clsrio.com/progress-report/avatar/{avatar.src}.svg"
alt=""
class="w-full"
/>
<img src="https://assets.cdn.clsrio.com/progress-report/avatar/{avatar.src}.svg" alt="" class="w-full" />
</button>
{/each}
</div>
apps/website/src/lib/features/tools/progress/background.svelte
+3 -9
View File
@@ -58,21 +58,15 @@
</Dialog.Header>
<!-- -->
<div
class="flex flex-wrap justify-between gap-y-3 mt-3 overflow-y-auto overflow-x-hidden h-[85%]"
>
<div class="mt-3 flex h-[85%] flex-wrap justify-between gap-y-3 overflow-y-auto overflow-x-hidden">
{#each backgrounds as background}
<button
onclick={() => {
selectBackground(background);
}}
class="flex w-[30%] items-center shadow-sm hover:scale-110 transition-all duration-300"
class="flex w-[30%] items-center shadow-sm transition-all duration-300 hover:scale-110"
>
<img
src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp"
alt=""
class=""
/>
<img src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp" alt="" class="" />
</button>
{/each}
</div>
apps/website/src/lib/features/tools/progress/mood.svelte
+3 -3
View File
@@ -72,15 +72,15 @@
</Dialog.Header>
<!-- mapping -->
<div class="flex flex-wrap justify-between gap-y-3 mt-3">
<div class="mt-3 flex flex-wrap justify-between gap-y-3">
{#each moods as mood}
<button
onclick={() => {
selectMood(mood);
}}
class="flex gap-3 items-center shadow-sm rounded-full px-4 py-1 bg-[#F1F6FF] hover:bg-[#0233BD] hover:text-white transition-all duration-700"
class="flex items-center gap-3 rounded-full bg-[#F1F6FF] px-4 py-1 shadow-sm transition-all duration-700 hover:bg-[#0233BD] hover:text-white"
>
<p class="text-xs md:text-sm font-semibold">{mood.text}</p>
<p class="text-xs font-semibold md:text-sm">{mood.text}</p>
<img
src="https://assets.cdn.clsrio.com/progress-report/emojis/{mood.iconSrc}.png"
alt={mood.text}
apps/website/src/lib/features/tools/progress/report.svelte
+24 -25
View File
@@ -30,13 +30,15 @@
nodeStore.set(node);
});
let rootBgImage = $derived(`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
$htmlBody.background || 'blue_tetiary_background'
}.webp`);
let rootBgImage = $derived(
`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
$htmlBody.background || 'blue_tetiary_background'
}.webp`
);
</script>
<div
class="h-full min-h-[500px] max-h-[500px] md:h-[60vh] w-full border relative flex items-center justify-center"
class="relative flex h-full max-h-[500px] min-h-[500px] w-full items-center justify-center border md:h-[60vh]"
style={`font-family: "Space Grotesk", sans-serif; background-image: url('${rootBgImage}'); background-size: cover; background-repeat: no-repeat`}
bind:this={node}
>
@@ -46,7 +48,7 @@
<button
type="button"
onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
class="absolute top-4 right-4 p-1.5 rounded-full hover:scale-90 transition-all duration-300 bg-white"
class="absolute right-4 top-4 rounded-full bg-white p-1.5 transition-all duration-300 hover:scale-90"
>
<img src="/free-tools/progress-report/close-icon.svg" alt="" class="" />
</button>
@@ -54,7 +56,7 @@
<button
type="button"
onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
class="absolute top-4 right-4 w-7 hover:scale-90 transition-all duration-300"
class="absolute right-4 top-4 w-7 transition-all duration-300 hover:scale-90"
>
<img src="/free-tools/progress-report/full-screen-icon.svg" alt="" class="" />
</button>
@@ -64,34 +66,31 @@
<div class="mt-20">
<!-- using both md & lg for the width here because the lib doesn't consider md to be medium screens and above, using md alone will make the output break on desktop so i had to also specify for large screens -->
<div
class="rounded-lg shadow-md bg-white border-4 border-gray-100 z-20 mx-auto flex justify-center items-center w-[16rem] h-[16rem]"
class="z-20 mx-auto flex h-[16rem] w-[16rem] items-center justify-center rounded-lg border-4 border-gray-100 bg-white shadow-md"
>
<div class="relative w-full h-full flex flex-col justify-center gap-3 items-center px-2">
<div class="relative flex h-full w-full flex-col items-center justify-center gap-3 px-2">
<!-- avatar -->
<img
src={`https://assets.cdn.clsrio.com/progress-report/avatar/${
$htmlBody.avatar || 'avatar_a'
}.svg`}
src={`https://assets.cdn.clsrio.com/progress-report/avatar/${$htmlBody.avatar || 'avatar_a'}.svg`}
alt=""
class="absolute top-0 w-[25%] h-[25%] ml-2 -mt-[2.2rem]"
class="absolute top-0 -mt-[2.2rem] ml-2 h-[25%] w-[25%]"
/>
<!-- mood -->
{#if $htmlBody.name || $htmlBody.mood.text}
<div
style="background-color: {$backgroundColor}; color: white; display: flex;"
class="px-3 py-0.5 border border-[#EDEDED] rounded-2xl mt-6 md:mt-3 font-semibold text-[10px] md:text-[0.7rem] flex items-center justify-between"
class="mt-6 flex items-center justify-between rounded-2xl border border-[#EDEDED] px-3 py-0.5 text-[10px] font-semibold md:mt-3 md:text-[0.7rem]"
>
<span class="mr-0.5">{$htmlBody.name}</span>
{#if $htmlBody.mood.text}
<span class="flex gap-1 items-center">
<p class="font-semibold text-[10px] md:text-[0.7rem]">
<span class="flex items-center gap-1">
<p class="text-[10px] font-semibold md:text-[0.7rem]">
is {$htmlBody.mood.text}
</p>
<img
src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood
.iconSrc}.png"
src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood.iconSrc}.png"
alt={$htmlBody.mood.text}
class="w-3"
/>
@@ -101,7 +100,7 @@
{:else}
<p
style="background-color: {$backgroundColor}"
class="px-3 py-0.5 border border-[#EDEDED] text-white rounded-2xl mt-3 font-medium text-[9px]"
class="mt-3 rounded-2xl border border-[#EDEDED] px-3 py-0.5 text-[9px] font-medium text-white"
>
Add your name
</p>
@@ -109,27 +108,27 @@
<!-- learning -->
<span
class="w-full md:my-2 p-1 overflow-hidden text-[0.7rem] md:text-[0.8rem] font-normal text-center outline-none h-[10vh] md:h-[12vh]"
class="h-[10vh] w-full overflow-hidden p-1 text-center text-[0.7rem] font-normal outline-none md:my-2 md:h-[12vh] md:text-[0.8rem]"
>
{$htmlBody.learning}
</span>
<!-- progress -->
<div class="flex flex-col justify-center items-center mb-2 md:mb-0">
<div class="border border-[#d9e0f5] w-full h-4 rounded-full p-0.5 bg-[#f1f6ff]">
<div class="mb-2 flex flex-col items-center justify-center md:mb-0">
<div class="h-4 w-full rounded-full border border-[#d9e0f5] bg-[#f1f6ff] p-0.5">
<div
class="progress-range rounded-full w-full h-full"
class="progress-range h-full w-full rounded-full"
style="background: {$backgroundColor}; width: {$htmlBody.progress}%"
></div>
></div>
</div>
<p class="text-[12px] font-semibold mt-1">Progress Achieved: {$htmlBody.progress}%</p>
<p class="mt-1 text-[12px] font-semibold">Progress Achieved: {$htmlBody.progress}%</p>
</div>
</div>
</div>
<div
style="display: flex;"
class="border mt-20 bottom-5 w-[50%] mx-auto flex gap-1 items-center justify-center bg-white rounded-md px-2 py-1"
class="bottom-5 mx-auto mt-20 flex w-[50%] items-center justify-center gap-1 rounded-md border bg-white px-2 py-1"
>
<img src="/logo-192.png" alt="classroomio logo" class="w-4" />
<p class="text-[10px] font-bold">ClassroomIO.com</p>
apps/website/src/lib/features/tools/stopwatch/timer.svelte
+6 -9
View File
@@ -29,29 +29,26 @@
<div transition:fly={{ y: 100, delay: 0, easing: sineInOut }}>
<div class="px-6 pt-8 text-center">
<button
type="button"
onclick={resetTimer}
class="text-[10px] text-[#656565] font-semibold uppercase underline"
<button type="button" onclick={resetTimer} class="text-[10px] font-semibold uppercase text-[#656565] underline"
>set timer for another activity</button
>
<button
class="border mx-auto mt-7 mb-3 px-2 py-0.5 rounded-full flex items-center gap-1 text-sm text-[#656565] font-semibold border-[#C2D2FF] bg-[#DCE5FF]"
class="mx-auto mb-3 mt-7 flex items-center gap-1 rounded-full border border-[#C2D2FF] bg-[#DCE5FF] px-2 py-0.5 text-sm font-semibold text-[#656565]"
>
{activityName}:
<span class="text-[#0233BD]">{formattedTime}</span>
</button>
<!-- countdown -->
<h1 class="text-[#040F2D] mb-14 text-6xl font-bold">{displayTime}</h1>
<h1 class="mb-14 text-6xl font-bold text-[#040F2D]">{displayTime}</h1>
</div>
<div class="flex">
<button
type="button"
onclick={toggleSound}
class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-bl-md hover:bg-[#F1F6FF] transition-all duration-500"
class="flex w-[34%] flex-col items-center gap-1 rounded-bl-md bg-[#F7F7F7] py-5 text-[10px] uppercase transition-all duration-500 hover:bg-[#F1F6FF] md:py-10"
>
{#if soundOn}
<img src="/free-tools/stopwatch/speaker-icon.svg" alt="" class="w-7 md:w-12" />
@@ -63,7 +60,7 @@
<button
type="button"
onclick={toggleTimer}
class="bg-[#0F62FE] text-white w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10"
class="flex w-[34%] flex-col items-center gap-1 bg-[#0F62FE] py-5 text-[10px] uppercase text-white md:py-10"
>
{#if isPaused}
<img src="/free-tools/stopwatch/play-icon.svg" alt="" class="w-7 md:w-12" />
@@ -75,7 +72,7 @@
<button
type="button"
onclick={restartTimer}
class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-br-md hover:bg-[#F1F6FF] transition-all duration-500"
class="flex w-[34%] flex-col items-center gap-1 rounded-br-md bg-[#F7F7F7] py-5 text-[10px] uppercase transition-all duration-500 hover:bg-[#F1F6FF] md:py-10"
>
<img src="/free-tools/stopwatch/reset-icon.svg" alt="" class="w-7 md:w-12" />
restart</button
apps/website/src/lib/features/tools/tic-tac-toe/board.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
<tr>
{#each row as column, columnIndex}
<td
class="cursor-pointer text-center h-25 w-[1.5em] border-r-10 border-b-10 border-white last:border-r-0"
class="h-25 border-r-10 border-b-10 w-[1.5em] cursor-pointer border-white text-center last:border-r-0"
onclick={() => {
game = game.click(rowIndex, columnIndex);
}}
apps/website/src/lib/features/tools/tic-tac-toe/board.ts
+1 -5
View File
@@ -79,11 +79,7 @@ function getWinner(board: string[][]) {
// check columns
for (let column = 0; column < 3; column++) {
if (
board[0][column] === board[1][column] &&
board[0][column] === board[2][column] &&
board[0][column]
) {
if (board[0][column] === board[1][column] && board[0][column] === board[2][column] && board[0][column]) {
return { symbol: board[0][column], direction: 'vertical', column };
}
}
apps/website/src/lib/features/tools/tic-tac-toe/winning-line.svelte
+3 -5
View File
@@ -29,13 +29,11 @@
{#if winner}
<div
transition:fade={{ delay: 500, duration: 2 }}
class="winning-line absolute bg-[#ffc300] z-[100]"
class="winning-line absolute z-[100] bg-[#ffc300]"
class:horizontal-line={winner.direction === 'horizontal'}
class:vertical-line={winner.direction === 'vertical'}
class:diagonal-line-1={winner.direction === 'diagonal' &&
winner.diagonal === 'top-left-to-bottom-right'}
class:diagonal-line-2={winner.direction === 'diagonal' &&
winner.diagonal === 'top-right-to-bottom-left'}
class:diagonal-line-1={winner.direction === 'diagonal' && winner.diagonal === 'top-left-to-bottom-right'}
class:diagonal-line-2={winner.direction === 'diagonal' && winner.diagonal === 'top-right-to-bottom-left'}
></div>
{/if}
apps/website/src/lib/utils/constants/tools.ts
+2 -4
View File
@@ -45,8 +45,7 @@ export const tools: Tool[] = [
{
src: '/free-tools/tic-tac.svg',
title: 'Tic tac toe game',
subText:
"More than just a game; it's an educational tool that teaches pattern recognition, and decision-making.",
subText: "More than just a game; it's an educational tool that teaches pattern recognition, and decision-making.",
slug: 'tic-tac-toe',
show: true,
showFeature: true
@@ -62,8 +61,7 @@ export const tools: Tool[] = [
{
src: '/free-tools/jamb.svg',
title: 'JAMB Practice tool',
subText:
'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
subText: 'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
slug: 'jamb',
show: false,
showFeature: false
apps/website/src/mdsvex.svelte
+5 -5
View File
@@ -1,3 +1,8 @@
<script lang="ts" module>
import { CustomImg as img } from '$lib/components';
export { img };
</script>
<script>
/**
* @typedef {Object} Props
@@ -8,9 +13,4 @@
let { children } = $props();
</script>
<script lang="ts" module>
import { CustomImg as img } from '$lib/components';
export { img };
</script>
{@render children?.()}
apps/website/src/routes/(marketing)/bootcamps/+page.svelte
+36 -58
View File
@@ -74,73 +74,62 @@
<title>Bootcamps | ClassroomIO</title>
</svelte:head>
<section class="flex flex-col justify-center items-center">
<section class="flex flex-col items-center justify-center">
<PageHeader
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
>
<Badge class="py-2! px-4!" variant="outline">Solution for Bootcamps</Badge>
<div
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
>
<div
class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
>
<h1 class="mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
The platform for fast
<span class="text-blue-700 relative"> growing bootcamps</span>
<span class="relative text-blue-700"> growing bootcamps</span>
</h1>
<p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
From AI powered course creation to student collaboration tools, ClassroomIO provides
everything you need to run a cutting-edge, high-impact bootcamp.
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
From AI powered course creation to student collaboration tools, ClassroomIO provides everything you need to
run a cutting-edge, high-impact bootcamp.
</p>
</div>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
Get Started for Free 🚀
</Button>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Get Started for Free 🚀</Button>
</div>
</PageHeader>
<section
class="w-full lg:py-24 py-16 lg:px-28 md:px-16 px-6 flex flex-col lg:items-center lg:justify-between justify-center gap-y-12"
class="flex w-full flex-col justify-center gap-y-12 px-6 py-16 md:px-16 lg:items-center lg:justify-between lg:px-28 lg:py-24"
>
<div
class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
>
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<Badge class="py-2! px-4!" variant="outline">Our benefits</Badge>
<div
class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
>
<h1 class="text-3xl">Inspire Student Success</h1>
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
Scale your bootcamp with ClassroomIO's comprehensive toolkit. Create engaging content,
foster community, and drive student achievement.
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
Scale your bootcamp with ClassroomIO's comprehensive toolkit. Create engaging content, foster community, and
drive student achievement.
</p>
</div>
</div>
<div
class="w-full max-w-7xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
class="flex w-full max-w-7xl flex-col items-start justify-start gap-6 lg:flex-row lg:items-center lg:justify-between"
>
{#each benefitDetails as benefits}
<div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
<div class="flex w-full flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6">
<img
class="w-[48px] h-[48px]"
class="h-[48px] w-[48px]"
src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.icon}"
alt="brain"
/>
<div class="w-full flex flex-col justify-start align-start gap-y-2">
<div class="align-start flex w-full flex-col justify-start gap-y-2">
<h1 class="text-md">{benefits.title}</h1>
{#each benefits.points as point}
<div class="flex flex-row justify-start items-start gap-x-3">
<img
src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.checkMark}"
alt="check mark"
/>
<p class="leading-8 text-gray-500 font-[#656565] font-light">
<div class="flex flex-row items-start justify-start gap-x-3">
<img src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.checkMark}" alt="check mark" />
<p class="font-[#656565] font-light leading-8 text-gray-500">
{point}
</p>
</div>
@@ -152,43 +141,36 @@
</section>
<section
class="w-full bg-[#F1F6FF] flex flex-col items-center justify-center gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
class="flex w-full flex-col items-center justify-center gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
>
<div
class="w-full max-w-7xl gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
>
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<Badge class="py-2! px-4!" variant="outline">Explore our features</Badge>
<div
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
>
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<h1 class="text-3xl">Why We're the Perfect Fit</h1>
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
Discover why we’re the ideal partner for your bootcamp training needs. Experience
innovative solutions designed to elevate student engagement and maximize learning
outcomes.
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
Discover why we’re the ideal partner for your bootcamp training needs. Experience innovative solutions
designed to elevate student engagement and maximize learning outcomes.
</p>
</div>
</div>
<div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16">
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-y-16 lg:gap-y-24">
{#each featureDetails as feature, i}
<div
class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
class="flex w-full lg:w-[70%] lg:flex-row {i % 2 !== 0
? 'lg:flex-row-reverse'
: ''} flex-col lg:justify-between justify-between lg:items-center items-start gap-10"
: ''} flex-col items-start justify-between gap-10 lg:items-center lg:justify-between"
>
<div
class="w-full max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
>
<div class="flex w-full max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
<img
class="w-[48px] h-[48px]"
class="h-[48px] w-[48px]"
src="https://assets.cdn.clsrio.com/www/bootcamps/{feature.icon}"
alt="team icon"
/>
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
<h1 class="text-2xl">{feature.title}</h1>
<p class="leading-8 text-lg text-gray-500">
<p class="text-lg leading-8 text-gray-500">
{feature.description}
</p>
</div>
@@ -198,11 +180,7 @@
{feature.ctaLabel}
</Button>
{:else}
<Button
variant="outline"
data-cal-config="'layout':'month_view'"
data-cal-link="classroomio/demo"
>
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
Book a Demo
</Button>
{/if}
apps/website/src/routes/(marketing)/customer-education/+page.svelte
+38 -63
View File
@@ -17,8 +17,7 @@
{
icon: 'simplified.svg',
title: 'Simplified Management',
description:
'Centralize and easily manage, share, and distribute all customer education materials.'
description: 'Centralize and easily manage, share, and distribute all customer education materials.'
}
];
@@ -34,8 +33,7 @@
icon: 'link.svg',
img: 'domain.svg',
title: 'Custom domains',
description:
'Use your own domain to link to our landing page instead of using our free subdomain'
description: 'Use your own domain to link to our landing page instead of using our free subdomain'
},
{
icon: 'globe.svg',
@@ -58,68 +56,58 @@
<title>Customer Education | ClassroomIO</title>
</svelte:head>
<section class="flex flex-col justify-center items-center">
<section class="flex flex-col items-center justify-center">
<PageHeader
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
>
<Badge class="py-2! px-4!" variant="outline">Solution for Customer Education</Badge>
<div
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
>
<div
class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
>
<h1 class="w-[95%] mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<h1 class="m-0 mx-auto w-[95%] text-4xl text-slate-900 md:text-6xl lg:text-center">
Drive retention and revenue with
<span class="text-blue-700 relative">Customer Education</span>
<span class="relative text-blue-700">Customer Education</span>
</h1>
<p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
Yes you are making lots of sales however you keep experiencing churn and customers leaving
you. Without a proper customer education strategy you are leaving a lot of money on the
table.
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
Yes you are making lots of sales however you keep experiencing churn and customers leaving you. Without a
proper customer education strategy you are leaving a lot of money on the table.
</p>
</div>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
Get Started for Free 🚀
</Button>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Get Started for Free 🚀</Button>
</div>
</PageHeader>
<section
class="w-full lg:py-24 py-16 lg:px-28 md:px-16 px-8 flex flex-col lg:items-center lg:justify-between justify-center gap-y-12"
class="flex w-full flex-col justify-center gap-y-12 px-8 py-16 md:px-16 lg:items-center lg:justify-between lg:px-28 lg:py-24"
>
<div
class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
>
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<Badge class="py-1! px-4!" variant="outline">Our benefits</Badge>
<div
class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
>
<h1 class="text-3xl">The customer education toolkit</h1>
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
Create beautiful, branded landing pages to showcase your courses and get customers up to
speed quickly
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
Create beautiful, branded landing pages to showcase your courses and get customers up to speed quickly
</p>
</div>
</div>
<div
class="w-full max-w-7xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
class="flex w-full max-w-7xl flex-col items-start justify-start gap-6 lg:flex-row lg:items-center lg:justify-between"
>
{#each benefitDetails as benefits}
<div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
<div class="flex w-full flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6">
<img
class="w-[48px] h-[48px]"
class="h-[48px] w-[48px]"
src="https://assets.cdn.clsrio.com/www/customer-education/{benefits.icon}"
alt="icon"
/>
<div class="w-full flex flex-col justify-start align-start gap-y-2">
<div class="align-start flex w-full flex-col justify-start gap-y-2">
<p class="text-lg">{benefits.title}</p>
<div class="flex flex-row justify-start items-start gap-x-3">
<p class="leading-8 text-gray-500 font-[#656565] font-light">
<div class="flex flex-row items-start justify-start gap-x-3">
<p class="font-[#656565] font-light leading-8 text-gray-500">
{benefits.description}
</p>
</div>
@@ -130,52 +118,39 @@
</section>
<section
class="w-full bg-[#F1F6FF] flex flex-col items-center justify-center gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
class="flex w-full flex-col items-center justify-center gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
>
<div
class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
>
<div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
<p class="text-sm text-[#4B5563] text-center">
Explore our features
</p>
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<div class="w-fit rounded-full border-2 border-[#C2D2FF] px-4 py-2 text-center">
<p class="text-center text-sm text-[#4B5563]">Explore our features</p>
</div>
<div
class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
>
<h1 class="text-3xl">Why Choose Us For Education Needs</h1>
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
Discover how our innovative solutions can reduce stress, enhance productivity, and achieve
your training goals.
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
Discover how our innovative solutions can reduce stress, enhance productivity, and achieve your training
goals.
</p>
</div>
</div>
<div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16">
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-y-16 lg:gap-y-24">
{#each featureDetails as feature, i}
<div
class="w-full flex lg:flex-row {i % 2 !== 0
class="flex w-full lg:flex-row {i % 2 !== 0
? 'lg:flex-row-reverse'
: ''} flex-col lg:justify-evenly justify-start lg:items-center items-start gap-10"
: ''} flex-col items-start justify-start gap-10 lg:items-center lg:justify-evenly"
>
<div
class="w-full max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
>
<img
src="https://assets.cdn.clsrio.com/www/customer-education/{feature.icon}"
alt="team icon"
/>
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
<div class="flex w-full max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
<img src="https://assets.cdn.clsrio.com/www/customer-education/{feature.icon}" alt="team icon" />
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
<h1 class="text-2xl">{feature.title}</h1>
<p class="leading-8 text-lg text-gray-500">
<p class="text-lg leading-8 text-gray-500">
{feature.description}
</p>
</div>
<Button
variant="outline"
data-cal-config="'layout':'month_view'"
data-cal-link="classroomio/demo"
>
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
Book a Demo
</Button>
</div>
apps/website/src/routes/(marketing)/employee-training/+page.svelte
+37 -53
View File
@@ -31,8 +31,7 @@
icon: 'team-mgnt.svg',
img: 'team-mgnt2.svg',
title: 'Team management',
description:
'You can invite managers and employees to create and take trainings at scale in your organization.'
description: 'You can invite managers and employees to create and take trainings at scale in your organization.'
},
{
icon: 'colour-pallete.svg',
@@ -54,25 +53,20 @@
<title>Employee Training | ClassroomIO</title>
</svelte:head>
<section class="flex flex-col justify-center items-center">
<section class="flex flex-col items-center justify-center">
<PageHeader
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
>
<Badge class="py-2! px-4!" variant="outline">Unlock your team's potential</Badge>
<div
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
>
<div
class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
>
<h1 class="mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
Employee training software for
<br /><span class="text-blue-700 relative">modern teams</span>
<br /><span class="relative text-blue-700">modern teams</span>
</h1>
<p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
With ClassroomIO, you can keep your teams in sync with company standards as they change
quickly.
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
With ClassroomIO, you can keep your teams in sync with company standards as they change quickly.
</p>
</div>
<Button href="/signup" target="_blank">Get Started for Free 🚀</Button>
@@ -80,34 +74,34 @@
</PageHeader>
<section
class="w-full max-w-7xl lg:py-24 py-16 lg:px-28 md:px-16 px-8 flex lg:flex-row flex-col lg:items-center lg:justify-between justify-center gap-x-6 gap-y-8"
class="flex w-full max-w-7xl flex-col justify-center gap-x-6 gap-y-8 px-8 py-16 md:px-16 lg:flex-row lg:items-center lg:justify-between lg:px-28 lg:py-24"
>
<div class="w-full lg:w-[35%] gap-y-4 flex flex-col items-start justify-start">
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[35%]">
<Badge variant="outline">Amazing benefits</Badge>
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
<h1 class="text-3xl">Unlock your team's potential</h1>
<p class="leading-8 text-lg text-gray-500">
<p class="text-lg leading-8 text-gray-500">
Modern teams require solutions that are easy to use and allows them move quickly.
</p>
</div>
</div>
<div
class="lg:w-[60%] lg:min-w-[450px] w-full flex flex-col lg:flex-wrap lg:flex-row justify-start items-center gap-6"
class="flex w-full flex-col items-center justify-start gap-6 lg:w-[60%] lg:min-w-[450px] lg:flex-row lg:flex-wrap"
>
{#each benefitDetails as benefits}
<div
class="w-full lg:w-[47%] min-w-[220px] md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col grow gap-y-6"
class="flex w-full min-w-[220px] grow flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6 lg:w-[47%]"
>
<img
class="w-[48px] h-[48px]"
class="h-[48px] w-[48px]"
src="https://assets.cdn.clsrio.com/www/employee-training/{benefits.icon}"
alt="light-bulb"
/>
<div class="w-full flex flex-col justify-start align-start gap-y-2">
<div class="align-start flex w-full flex-col justify-start gap-y-2">
<h1 class="text-lg">{benefits.title}</h1>
<p class="text-base leading-8 text-gray-500 font-[#656565] font-light">
<p class="font-[#656565] text-base font-light leading-8 text-gray-500">
{benefits.description}
</p>
</div>
@@ -117,50 +111,42 @@
</section>
<section
class="w-full bg-[#F1F6FF] flex flex-col items-center justify-start gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
>
<div
class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
>
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
<Badge class="py-2! px-4!" variant="outline">Explore our features</Badge>
<div
class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
>
<h1 class="text-3xl">What makes us the right choice</h1>
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
Discover why we’re the perfect partner for your employee training needs. Experience
innovative solutions designed to reduce stress and enhance productivity.
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
Discover why we’re the perfect partner for your employee training needs. Experience innovative solutions
designed to reduce stress and enhance productivity.
</p>
</div>
</div>
<div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-16 p-2">
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-16 p-2 lg:gap-y-24">
{#each featureDetails as feature, i}
<div
class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
class="flex w-full lg:w-[70%] lg:flex-row {i % 2 !== 0
? 'lg:flex-row-reverse'
: ''} flex-col justify-between lg:items-center items-start gap-10"
: ''} flex-col items-start justify-between gap-10 lg:items-center"
>
<div
class="w-fit max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
>
<div class="flex w-fit max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
<img
class="w-[48px] h-[48px]"
class="h-[48px] w-[48px]"
src="https://assets.cdn.clsrio.com/www/employee-training/{feature.icon}"
alt="team icon"
/>
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
<h1 class="text-2xl">{feature.title}</h1>
<p class="leading-8 text-lg text-gray-500">
<p class="text-lg leading-8 text-gray-500">
{feature.description}
</p>
</div>
<Button
variant="outline"
data-cal-config="'layout':'month_view'"
data-cal-link="classroomio/demo"
>
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
Book a Demo
</Button>
</div>
@@ -178,17 +164,15 @@
</section>
<section
class="w-full bg-[#040F2D] flex flex-col items-center justify-start gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#040F2D] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
>
<div
class="w-full max-w-7xl flex lg:flex-row-reverse flex-col-reverse lg:justify-between justify-start lg:items-center items-start gap-y-8"
class="flex w-full max-w-7xl flex-col-reverse items-start justify-start gap-y-8 lg:flex-row-reverse lg:items-center lg:justify-between"
>
<div class="w-full lg:w-[40%] gap-y-4 flex flex-col items-start justify-start">
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
<h1 class="text-2xl text-white">
Did you know you can request for custom features?
</h1>
<p class="leading-8 text-[#DEDEDE] text-base">
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[40%]">
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
<h1 class="text-2xl text-white">Did you know you can request for custom features?</h1>
<p class="text-base leading-8 text-[#DEDEDE]">
Companies get the opportunity to request custom features from us.
</p>
</div>
apps/website/src/routes/(redirects)/devanddesign/+page.server.ts
+1 -4
View File
@@ -1,8 +1,5 @@
import { redirect } from '@sveltejs/kit';
export const load = async () => {
redirect(
307,
'https://docs.google.com/presentation/d/1eqvNPNk167ZcP21gZGVAatdDpWAFL9lfmWJHHrzsVFc'
);
redirect(307, 'https://docs.google.com/presentation/d/1eqvNPNk167ZcP21gZGVAatdDpWAFL9lfmWJHHrzsVFc');
};
apps/website/src/routes/api/blog/+server.ts
+1 -3
View File
@@ -17,9 +17,7 @@ async function getBlogPosts() {
}
}
blogPosts = blogPosts.sort(
(first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
);
blogPosts = blogPosts.sort((first, second) => new Date(second.date).getTime() - new Date(first.date).getTime());
return blogPosts;
}
apps/website/src/routes/api/contact/+server.ts
+25 -26
View File
@@ -1,33 +1,32 @@
import { PUBLIC_SERVER_URL } from '$env/static/public';
const sendEmail =
(sFetch: typeof fetch) => async (subject: string, content: string, replyTo?: string) => {
try {
const response = await sFetch(`${PUBLIC_SERVER_URL}/sendEmail`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify([
{
from: `"ClassroomIO Support" <notify@mail.classroomio.com>`,
to: 'help@classroomio.com',
subject,
content,
replyTo
}
])
});
const sendEmail = (sFetch: typeof fetch) => async (subject: string, content: string, replyTo?: string) => {
try {
const response = await sFetch(`${PUBLIC_SERVER_URL}/sendEmail`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify([
{
from: `"ClassroomIO Support" <notify@mail.classroomio.com>`,
to: 'help@classroomio.com',
subject,
content,
replyTo
}
])
});
const responseData = await response.json();
console.log('Emails sent successfully:', responseData);
const responseData = await response.json();
console.log('Emails sent successfully:', responseData);
return 'sent';
} catch (error) {
console.error('Error sending email', error);
return 'failed';
}
};
return 'sent';
} catch (error) {
console.error('Error sending email', error);
return 'failed';
}
};
export async function POST({ request, fetch }) {
try {
apps/website/src/routes/blog/+page.svelte
+6 -6
View File
@@ -10,18 +10,18 @@
<section>
<PageHeader className="flex flex-col items-center justify-center text-center">
<h1 class="mx-auto text-4xl md:text-6xl text-slate-900 flex flex-col items-center">
<h1 class="mx-auto flex flex-col items-center text-4xl text-slate-900 md:text-6xl">
<span>What's new on</span>
<span class="text-blue-700 relative">ClassroomIO?</span>
<span class="relative text-blue-700">ClassroomIO?</span>
</h1>
<p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
<p class="mt-10 w-[90%] text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
Get the latest news from ClassroomIO, including product updates, team announcements and more!
</p>
</PageHeader>
<div class="w-full flex items-center justify-center">
<ul class="flex flex-col items-start justify-start gap-2 w-[90%] md:w-[50%]">
<div class="flex w-full items-center justify-center">
<ul class="flex w-[90%] flex-col items-start justify-start gap-2 md:w-[50%]">
{#each data.posts as post}
<li class="py-10 w-full border-b border-gray-200">
<li class="w-full border-b border-gray-200 py-10">
<BlogListItem {post} />
</li>
{/each}
apps/website/src/routes/contact/+page.svelte
+4 -8
View File
@@ -57,19 +57,15 @@
<h1 class="mx-auto flex flex-col items-center text-4xl text-slate-900 md:text-6xl">
<span>Get in touch with <span class="text-blue-700">Us</span></span>
</h1>
<p
class="mt-10 w-[90%] max-w-3xl text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7"
>
Report any bugs you encounter, request new features you'd like to see, or ask any questions
you have about ClassroomIO
<p class="mt-10 w-[90%] max-w-3xl text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
Report any bugs you encounter, request new features you'd like to see, or ask any questions you have about
ClassroomIO
</p>
</PageHeader>
<div class="mx-auto my-20">
<!-- Content here -->
<div
class="mx-auto grid w-[90%] grid-cols-1 place-items-center gap-10 md:grid-cols-2 lg:w-[60%]"
>
<div class="mx-auto grid w-[90%] grid-cols-1 place-items-center gap-10 md:grid-cols-2 lg:w-[60%]">
{#each formList as list}
<button
onclick={() => onChange(list.id, list.to)}
apps/website/src/routes/oss-friends/+page.svelte
+9 -20
View File
@@ -11,39 +11,28 @@
<section>
<PageHeader className="flex flex-col items-center justify-center text-center">
<h1
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 items-center"
>
<h1 class="mx-auto items-center text-3xl font-normal leading-[1.5] text-slate-900 md:text-4xl lg:text-6xl">
Our <span class="text-blue-700">Open-source</span> Friends
</h1>
<p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
In ClassroomIO, we are committed to building a commercial open source company and here are
some of our friends on the same mission.
<p class="mt-10 w-[90%] text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
In ClassroomIO, we are committed to building a commercial open source company and here are some of our friends on
the same mission.
</p>
</PageHeader>
<ul role="list" class="m-4 mt-12 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
{#each data.friends as friend}
<li
class="overflow-hidden rounded-md border border-gray-200 flex flex-col justify-between py-6"
>
<li class="flex flex-col justify-between overflow-hidden rounded-md border border-gray-200 py-6">
<div>
<div class="text-xl font-medium leading-6 text-gray-900 pb-1 px-6">
<div class="px-6 pb-1 text-xl font-medium leading-6 text-gray-900">
{friend.name}
</div>
<p class="px-6 mt-2 text-gray-600 text-sm">
<p class="mt-2 px-6 text-sm text-gray-600">
{friend.description}
</p>
</div>
<div class="text-left px-6 mt-3">
<Button
href={friend.href}
target="_blank"
rel="noopener noreferrer"
variant="outline"
>
Learn more
</Button>
<div class="mt-3 px-6 text-left">
<Button href={friend.href} target="_blank" rel="noopener noreferrer" variant="outline">Learn more</Button>
</div>
</li>
{/each}
apps/website/src/routes/oss-friends/+page.ts
+2 -4
View File
@@ -15,8 +15,7 @@ export async function load() {
},
{
name: 'Cal.com',
description:
'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
description: 'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
href: 'https://cal.com'
},
{
@@ -74,8 +73,7 @@ export async function load() {
},
{
name: 'Papermark',
description:
'Open-Source Docsend Alternative to securely share documents with real-time analytics.',
description: 'Open-Source Docsend Alternative to securely share documents with real-time analytics.',
href: 'https://papermark.io'
},
{
apps/website/src/routes/pricing/+page.svelte
+4 -13
View File
@@ -28,16 +28,12 @@
</p>
<div class="relative mt-10 flex items-center rounded-[30px] border-2 p-[2px] lg:scale-100">
<button
style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan
? '#5e636b'
: '#fff'}"
style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan ? '#5e636b' : '#fff'}"
class="rounded-[30px] bg-blue-700 px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
onclick={toggleIsYearlyPlan}>Monthly</button
>
<button
style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan
? '#fff'
: '#5e636b'}"
style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan ? '#fff' : '#5e636b'}"
class="rounded-[30px] px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
onclick={toggleIsYearlyPlan}>Annually</button
>
@@ -108,10 +104,7 @@
</p>
{#key isYearlyPlan}
<p
class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium text-white lg:text-4xl"
in:fade
>
<p class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium text-white lg:text-4xl" in:fade>
${isYearlyPlan ? PLANS.EARLY_ADOPTER.PRICE.YEARLY : PLANS.EARLY_ADOPTER.PRICE.MONTHLY}
</p>
<span class="text-base text-white" in:fade>
@@ -144,9 +137,7 @@
<p class="mt-4 text-sm font-light leading-6 text-gray-500 lg:text-base lg:leading-6">
{PLANS.ENTERPRISE.DESCRIPTION}
</p>
<p class="mt-6 flex items-baseline gap-x-1 text-xl font-medium lg:mt-6 lg:text-xl">
Request Pricing
</p>
<p class="mt-6 flex items-baseline gap-x-1 text-xl font-medium lg:mt-6 lg:text-xl">Request Pricing</p>
<button
class="mt-10 w-full rounded-md bg-slate-900 py-3 text-base font-medium text-white hover:bg-slate-700 lg:rounded-md lg:py-3 lg:text-lg lg:font-semibold"
data-cal-config={"{'layout':'month_view'}"}
apps/website/src/routes/roadmap/+page.svelte
+8 -8
View File
@@ -65,18 +65,18 @@
</svelte:head>
<PageHeader className="flex flex-col items-center justify-center text-center">
<h1 class="text-start md:text-center text-4xl md:text-6xl text-slate-900">Product Roadmap</h1>
<p class="text-start md:text-center w-[80%] md:w-[40%] text-slate-700 mt-10">
This is a live document, and will be updated regularly. To submit an idea, or to view a list of
feature requests and ideas that we're considering, check out our <a
<h1 class="text-start text-4xl text-slate-900 md:text-center md:text-6xl">Product Roadmap</h1>
<p class="mt-10 w-[80%] text-start text-slate-700 md:w-[40%] md:text-center">
This is a live document, and will be updated regularly. To submit an idea, or to view a list of feature requests and
ideas that we're considering, check out our <a
href="https://github.com/classroomio/classroomio/discussion"
class="underline">GitHub Discussions</a
>
</p>
</PageHeader>
<section class="relative flex flex-col items-center w-full px-4 py-20 border-b-2">
<img src="/roadmap-one.svg" alt="" class="w-60 lg:w-96 absolute bottom-0 right-0" />
<img src="/roadmap-two.svg" alt="" class="hidden lg:block absolute top-0 left-0" />
<section class="relative flex w-full flex-col items-center border-b-2 px-4 py-20">
<img src="/roadmap-one.svg" alt="" class="absolute bottom-0 right-0 w-60 lg:w-96" />
<img src="/roadmap-two.svg" alt="" class="absolute left-0 top-0 hidden lg:block" />
<div class="flex flex-col items-start space-y-10 px-4">
<div>
<h1 class="text-3xl">Latest Features</h1>
@@ -86,7 +86,7 @@
</div>
</section>
<section class="flex flex-col items-center w-full px-4 py-20 border-b-2">
<section class="flex w-full flex-col items-center border-b-2 px-4 py-20">
<div class="flex flex-col items-start space-y-10 px-4">
<div>
<h1 class="text-3xl">Upcoming Features</h1>
apps/website/src/routes/teach/+page.svelte
+3 -16
View File
@@ -89,12 +89,7 @@
With ClassroomIO, you can make side income while teaching the subject you love
</p>
<Button
href="/teach/register"
target="_blank"
>
Register
</Button>
<Button href="/teach/register" target="_blank">Register</Button>
</div>
<div class=" ">
@@ -144,20 +139,12 @@
{/each}
</div>
<div class="mt-3 flex justify-center px-[5%]">
<Button
href="/teach/register"
target="_blank"
rel="noopener noreferrer nofollow"
>
Get Started
</Button>
<Button href="/teach/register" target="_blank" rel="noopener noreferrer nofollow">Get Started</Button>
</div>
</div>
<div class="my-10 h-[75%] bg-[#F5F8FE] px-2 py-12 lg:h-[80%] lg:px-[12%]">
<h1 class="flex items-center justify-center gap-3 text-center text-2xl">
Word from our fufilled facilitators
</h1>
<h1 class="flex items-center justify-center gap-3 text-center text-2xl">Word from our fufilled facilitators</h1>
<div
class="relative mx-auto mt-10 w-full rounded-md border bg-white py-6 text-center shadow-sm before:absolute before:left-0 before:top-0 before:h-full before:w-[4.5%] before:rounded-bl-md before:rounded-tl-md before:bg-[#0233BD] md:w-2/4"
apps/website/src/routes/tools/+layout.svelte
+2 -10
View File
@@ -11,22 +11,14 @@
<svelte:head>
<title>Free Tools | ClassroomIO</title>
<meta
property="og:image"
itemprop="image"
content="https://brand.cdn.clsrio.com/og/free-tools.png"
/>
<meta property="og:image" itemprop="image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
<meta property="og:title" content="ClassroomIO Free Tools" />
<meta
property="og:description"
content="At ClassroomIO, we have built a suit of tools for anyone to use freely while collaborating with students"
/>
<meta
property="og:image:secure_url"
itemprop="image"
content="https://brand.cdn.clsrio.com/og/free-tools.png"
/>
<meta property="og:image:secure_url" itemprop="image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
<meta name="twitter:title" content="ClassroomIO Free Tools" />
<meta
apps/website/src/routes/tools/+page.svelte
+14 -14
View File
@@ -8,43 +8,43 @@
<section>
<PageHeader>
<!-- added bg-white to keep the background white on devices that are on darkmode -->
<div class="bg-white text-left md:text-center md:w-2/4 px-7 md:p-0 mx-auto">
<div class="mx-auto bg-white px-7 text-left md:w-2/4 md:p-0 md:text-center">
<h1 class="text-3xl md:text-5xl">
Explore our free <span class="text-blue-700">tools</span>
</h1>
<p class="my-4 md:my-8">
Innovative tools to help you aid you example preparation, as well as making learning more
fun for students and educator looking for engaging resources.
Innovative tools to help you aid you example preparation, as well as making learning more fun for students and
educator looking for engaging resources.
</p>
<div class="flex relative w-[90%] md:w-[50%] my-3 md:mt-10 mx-auto bg-white">
<div class="relative mx-auto my-3 flex w-[90%] bg-white md:mt-10 md:w-[50%]">
<!-- <img
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-0 z-0"
src="/free-tools/waec.svg"
alt="Waec logo"
/> -->
<img
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[55px] z-10"
class="absolute left-[55px] z-10 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
src="/free-tools/progress-report.svg"
alt="Progress Report"
/>
<img
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[100px] z-20"
class="absolute left-[100px] z-20 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
src="/free-tools/activity-stopwatch.svg"
alt="Activity Stopwatch logo"
/>
<img
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[150px] z-30"
class="absolute left-[150px] z-30 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
src="/free-tools/name-picker.svg"
alt="Name picker logo"
/>
<img
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[200px] z-40"
class="absolute left-[200px] z-40 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
src="/free-tools/tic-tac.svg"
alt="Tic tac logo"
/>
<img
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[250px] z-50 bg-white"
class="absolute left-[250px] z-50 w-[18%] rounded-full border bg-white transition-all hover:z-50 hover:scale-110"
src="/free-tools/pomodoro.svg"
alt="Pomodoro Timer logo"
/>
@@ -57,19 +57,19 @@
</div>
</PageHeader>
<div class="p-10 px-2 md:px-0 bg-white">
<div class="bg-white p-10 px-2 md:px-0">
<h1 class="text-center text-2xl">Featured Tools</h1>
<div class="flex justify-evenly gap-y-8 flex-wrap w-full md:w-[70%] mt-10 mx-auto bg-white">
<div class="mx-auto mt-10 flex w-full flex-wrap justify-evenly gap-y-8 bg-white md:w-[70%]">
{#each freeTools as tool}
<a
href="/tools/{tool.slug}"
class="w-full flex md:max-w-[370px] border rounded-md shadow-sm hover:scale-95 transition-all ease-in-out"
class="flex w-full rounded-md border shadow-sm transition-all ease-in-out hover:scale-95 md:max-w-[370px]"
>
<img class="w-[30%] rounded-l-md" src={tool.src} alt="" />
<div class="bg-[#F5F8FE] p-5 rounded-r-md w-[70%]">
<div class="w-[70%] rounded-r-md bg-[#F5F8FE] p-5">
<h1 class="text-sm md:text-base">{tool.title}</h1>
<p class="text-xs text-gray-600 mt-1.5">
<p class="mt-1.5 text-xs text-gray-600">
{tool.subText}
</p>
</div>
apps/website/src/routes/tools/pomodoro/+page.svelte
+6 -16
View File
@@ -171,16 +171,11 @@
<section class=" w-full bg-white px-1 md:w-full md:px-0">
<ToolsHeader>
<img
src="/free-tools/pomodoro.svg"
class="mx-auto w-[15%] rounded-full border md:w-[5%]"
alt=""
/>
<img src="/free-tools/pomodoro.svg" class="mx-auto w-[15%] rounded-full border md:w-[5%]" alt="" />
<h1 class="my-3 text-3xl text-[#040F2D] md:text-5xl">Pomodoro Timer</h1>
<p class="mx-auto mt-10 text-sm font-light text-[#656565] md:w-[45%] md:font-normal">
Make your workday more engaging and effective with the Pomodoro timer, break work into
25-minute focused intervals called "pomodoros," followed by 5-minute breaks. take a longer
break.
Make your workday more engaging and effective with the Pomodoro timer, break work into 25-minute focused intervals
called "pomodoros," followed by 5-minute breaks. take a longer break.
</p>
</ToolsHeader>
@@ -280,12 +275,9 @@
<button
type="button"
onclick={() => deleteTodo(i)}
class="rounded-sm bg-[#F7F7F7] px-5 py-2 text-xs font-semibold"
>Discard</button
class="rounded-sm bg-[#F7F7F7] px-5 py-2 text-xs font-semibold">Discard</button
>
<button
type="submit"
class="rounded-sm bg-[#0D4CFF] px-5 py-2 text-xs font-semibold text-white"
<button type="submit" class="rounded-sm bg-[#0D4CFF] px-5 py-2 text-xs font-semibold text-white"
>Save</button
>
</div>
@@ -329,9 +321,7 @@
</div>
<div class="mt-10 flex items-center justify-between">
<p
class="rounded-[3px] bg-[#EAEAEA] px-1.5 py-0.5 text-xs font-medium text-[#656565]"
>
<p class="rounded-[3px] bg-[#EAEAEA] px-1.5 py-0.5 text-xs font-medium text-[#656565]">
{todo.time}
</p>
apps/website/src/routes/tools/tic-tac-toe/+page.svelte
+1 -3
View File
@@ -113,9 +113,7 @@
transition:fly={{ x: -100, delay: 600, easing: sineInOut }}
class="absolute top-[43%] z-[150] flex w-full flex-col items-center justify-center"
>
<div
class="flex h-[8vh] w-full items-center justify-center gap-10 bg-white py-1 text-[#0233BD] md:h-[13vh]"
>
<div class="flex h-[8vh] w-full items-center justify-center gap-10 bg-white py-1 text-[#0233BD] md:h-[13vh]">
{#if message != 'Tie game!'}
<img src="/free-tools/tic-tac/winner-star-icon.svg" alt="Star icon" class="h-full" />
{/if}