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

feat: certificates, landing pages, ai tutor, website update, compliance

Browse Source
This commit is contained in:
Rotimi Best
2026-05-18 03:47:22 +01:00
parent c31ad63955
commit ac3a2c14a7
644 changed files with 56050 additions and 5439 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/src/lib/components/hero.svelte
+161 -124
View File
@@ -1,139 +1,176 @@
<script>
import { BlurFade } from '@cio/ui/custom/animation/blurfade';
import { BorderBeam } from '@cio/ui/custom/animation/border-beam';
import { Badge } from '@cio/ui/base/badge';
import { Button } from '@cio/ui/base/button';
import ParticleField from './particle-field.svelte';
</script>
<section class="px-6 pt-32 pb-16 lg:px-12 lg:pt-40 lg:pb-24">
<div class="mx-auto grid max-w-[1100px] grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
<div>
<BlurFade delay={0} once>
<a href="/blog/learn-from-the-best" class="mb-7 inline-block">
<Badge variant="secondary" class="gap-2! px-3.5! py-1.5! text-xs! underline!">
<span class="relative flex h-2 w-2">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
</span>
Introducing ClassroomIO Version 2 →
</Badge>
</a>
</BlurFade>
<section class="relative overflow-hidden px-6 pt-32 pb-16 lg:px-12 lg:pt-40 lg:pb-24">
<!-- Soft off-white base with the faintest blue undertone -->
<div
class="pointer-events-none absolute inset-0 bg-[linear-gradient(135deg,#f7f9fc_0%,#eef2fa_60%,#e5ecf7_100%)]"
></div>
<BlurFade delay={0.1} once>
<h1 class="mb-6 text-[clamp(2.4rem,4vw,3.4rem)] leading-[1.12] font-medium tracking-tight text-gray-950">
The LMS for
<em class="text-blue-700 not-italic">compliance training</em>
and
<em class="text-blue-700 not-italic">certification programs.</em>
</h1>
</BlurFade>
<!-- Bordered clouds, top-left — crisp SVG silhouettes -->
<div class="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
<!-- Cloud 1 (largest) -->
<svg
class="cio-cloud-1 absolute top-6 left-3 h-24 w-[220px] md:top-8 md:left-5 md:h-36 md:w-[340px] lg:top-10 lg:left-6 lg:h-48 lg:w-[460px]"
viewBox="0 0 240 110"
fill="none"
aria-hidden="true"
>
<path
d="M 22 80
C 22 60, 42 50, 62 56
C 68 36, 100 30, 116 52
C 130 32, 168 38, 174 60
C 196 56, 216 68, 214 82
C 214 96, 196 102, 174 96
C 164 106, 130 106, 120 96
C 110 106, 78 106, 66 94
C 46 100, 22 96, 22 80 Z"
fill="white"
stroke="#cbd5e1"
stroke-width="0.75"
/>
</svg>
<BlurFade delay={0.2} once>
<p class="mb-9 max-w-[480px] text-base leading-relaxed text-gray-500 lg:text-lg">
ClassroomIO is the open source LMS built for compliance-driven teams. Run your certification programs, track
completions, and prove training happened. No Moodle headaches.
</p>
</BlurFade>
<!-- Cloud 2 (medium) -->
<svg
class="cio-cloud-2 absolute top-24 left-40 h-16 w-[150px] md:top-32 md:left-56 md:h-24 md:w-[230px] lg:top-40 lg:left-72 lg:h-36 lg:w-[320px]"
viewBox="0 0 200 90"
fill="none"
aria-hidden="true"
>
<path
d="M 16 64
C 16 48, 34 40, 52 46
C 58 30, 86 26, 100 44
C 114 28, 144 34, 150 52
C 168 48, 184 58, 182 70
C 182 82, 168 86, 150 82
C 142 90, 114 90, 106 82
C 98 90, 70 90, 60 80
C 42 86, 16 82, 16 64 Z"
fill="white"
stroke="#cbd5e1"
stroke-width="0.75"
/>
</svg>
<BlurFade delay={0.3} once>
<div class="flex flex-wrap items-center gap-3.5">
<a
href="/signup"
class="inline-flex items-center gap-2 rounded-lg bg-gray-950 px-7 py-3.5 text-sm font-medium text-white no-underline transition-all duration-200 hover:-translate-y-0.5 hover:bg-blue-700 lg:text-base"
>
Get Started Free →
</a>
<button
data-cal-link="classroomio/demo"
data-cal-config="'layout':'month_view'"
class="cursor-pointer rounded-lg border-[1.5px] border-gray-200 bg-transparent px-7 py-3.5 text-sm font-medium text-gray-950 transition-all duration-200 hover:border-gray-950 lg:text-base"
>
Book a Demo
</button>
</div>
</BlurFade>
<!-- Cloud 3 (small, lower) -->
<svg
class="cio-cloud-3 absolute top-40 left-16 h-14 w-[120px] md:top-56 md:left-20 md:h-20 md:w-[180px] lg:top-72 lg:left-28 lg:h-28 lg:w-[240px]"
viewBox="0 0 180 80"
fill="none"
aria-hidden="true"
>
<path
d="M 14 56
C 14 42, 30 36, 44 40
C 50 26, 76 22, 88 38
C 100 24, 128 30, 134 46
C 150 42, 166 52, 164 62
C 164 72, 150 76, 134 72
C 128 80, 100 80, 92 72
C 84 80, 60 80, 52 70
C 36 76, 14 72, 14 56 Z"
fill="white"
stroke="#cbd5e1"
stroke-width="0.75"
/>
</svg>
</div>
<BlurFade delay={0.4} once>
<div class="mt-7 flex flex-wrap items-center gap-5 text-xs text-gray-500">
<span class="flex items-center gap-1.5">
<span class="font-medium text-blue-700">✓</span> Open source
</span>
<span class="flex items-center gap-1.5">
<span class="font-medium text-blue-700">✓</span> Self-hosted
</span>
<span class="flex items-center gap-1.5">
<span class="font-medium text-blue-700">✓</span> No per-seat fees
</span>
</div>
</BlurFade>
</div>
<!-- Particle cloud — same component used in the footer at lower intensity -->
<ParticleField class="absolute inset-0 z-[2] h-full w-full" />
<!-- Bottom fade to next section -->
<div
class="pointer-events-none absolute right-0 bottom-0 left-0 h-32 bg-gradient-to-b from-transparent to-white"
></div>
<div class="relative z-10 mx-auto flex max-w-[1100px] flex-col items-center text-center">
<BlurFade delay={0} once>
<h1 class="max-w-[820px] text-[clamp(2rem,4vw,3.25rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
Teach your customers your product
<em class="text-blue-700 not-italic">before support has to.</em>
</h1>
</BlurFade>
<BlurFade delay={0.1} once>
<p class="mt-5 max-w-[580px] text-sm leading-relaxed lg:text-base">
Launch a branded customer academy in days. Train customers, certify power users, and drive adoption on your own
domain, with an AI tutor in every lesson.
</p>
</BlurFade>
<!-- Hero Visual -->
<BlurFade delay={0.2} once>
<div class="relative overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 shadow-2xl/5">
<BorderBeam size={250} duration={12} colorFrom="#0233BD" colorTo="#6b8fff" delay={1} />
<div class="flex items-center gap-2 border-b border-gray-200 bg-white px-4 py-3.5">
<div class="h-2.5 w-2.5 rounded-full bg-red-400"></div>
<div class="h-2.5 w-2.5 rounded-full bg-yellow-400"></div>
<div class="h-2.5 w-2.5 rounded-full bg-green-500"></div>
</div>
<div class="p-6">
<div class="mb-3.5 text-xs font-medium tracking-wider text-gray-500 uppercase">Team Progress - This Week</div>
<div class="mt-7 flex flex-wrap items-center justify-center gap-3">
<Button data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">Book a Demo</Button>
<Button href="/signup" variant="outline">Start free</Button>
</div>
</BlurFade>
</div>
<div class="mb-3 flex items-center gap-3.5 rounded-xl border border-gray-200 bg-white p-4">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-lg">📋</div>
<div class="min-w-0 flex-1">
<div class="mb-1 text-sm font-medium">Annual Compliance Training</div>
<div class="h-1 overflow-hidden rounded-full bg-gray-200">
<div class="h-full rounded-full bg-blue-700" style="width: 85%"></div>
</div>
</div>
<div
class="shrink-0 rounded-full bg-blue-50 px-2 py-0.5 text-[0.7rem] font-medium whitespace-nowrap text-blue-700"
>
85%
</div>
</div>
<div class="mb-3 flex items-center gap-3.5 rounded-xl border border-gray-200 bg-white p-4">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-green-50 text-lg">🛡️</div>
<div class="min-w-0 flex-1">
<div class="mb-1 text-sm font-medium">Security & Compliance</div>
<div class="h-1 overflow-hidden rounded-full bg-gray-200">
<div class="h-full rounded-full bg-green-500" style="width: 100%"></div>
</div>
</div>
<div
class="shrink-0 rounded-full bg-green-50 px-2 py-0.5 text-[0.7rem] font-medium whitespace-nowrap text-green-600"
>
✓ Done
</div>
</div>
<div class="mb-3 flex items-center gap-3.5 rounded-xl border border-gray-200 bg-white p-4">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-orange-50 text-lg">🎯</div>
<div class="min-w-0 flex-1">
<div class="mb-1 text-sm font-medium">Product Certification</div>
<div class="h-1 overflow-hidden rounded-full bg-gray-200">
<div class="h-full rounded-full bg-blue-700" style="width: 42%"></div>
</div>
</div>
<div
class="shrink-0 rounded-full bg-blue-50 px-2 py-0.5 text-[0.7rem] font-medium whitespace-nowrap text-blue-700"
>
42%
</div>
</div>
<div class="mt-4 flex items-center gap-3 rounded-lg bg-blue-50 p-4">
<span class="text-xl">🏆</span>
<div>
<div class="text-sm font-medium">3 certificates issued today</div>
<div class="text-xs text-gray-500">Sarah, Marcus & Priya completed their certs</div>
</div>
</div>
</div>
<div class="relative z-30 mx-auto mt-14 w-full max-w-[1100px]">
<BlurFade delay={0.3} once>
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
<img
src="/hero-academy.jpeg"
alt="Branded customer academy on a custom domain — catalog, programs, AI tutor"
width="2560"
height="1440"
class="block h-auto w-full"
loading="eager"
decoding="async"
/>
</div>
</BlurFade>
</div>
</section>
<style>
.cio-cloud-1 {
animation: cio-cloud-drift-1 22s ease-in-out infinite;
}
.cio-cloud-2 {
animation: cio-cloud-drift-2 28s ease-in-out infinite;
}
.cio-cloud-3 {
animation: cio-cloud-drift-3 26s ease-in-out infinite;
}
@keyframes cio-cloud-drift-1 {
0%,
100% {
transform: translate(0, 0) scale(1);
opacity: 0.9;
}
50% {
transform: translate(28px, 10px) scale(1.04);
opacity: 1;
}
}
@keyframes cio-cloud-drift-2 {
0%,
100% {
transform: translate(0, 0) scale(1);
opacity: 0.85;
}
50% {
transform: translate(36px, -8px) scale(1.06);
opacity: 1;
}
}
@keyframes cio-cloud-drift-3 {
0%,
100% {
transform: translate(0, 0) scale(1);
opacity: 0.8;
}
50% {
transform: translate(-12px, 14px) scale(1.05);
opacity: 0.95;
}
}
</style>