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>