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

refactor: remove BlurFade component from hero and various sections for cleaner markup and improved performance

Browse Source
This commit is contained in:
Rotimi Best
2026-05-19 07:02:50 +01:00
parent 3562bd570e
commit 19a1243215
6 changed files with 69 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/src/lib/components/hero.svelte
+23 -32
View File
@@ -1,5 +1,4 @@
<script> <script>
import { BlurFade } from '@cio/ui/custom/animation/blurfade';
import { Button } from '@cio/ui/base/button'; import { Button } from '@cio/ui/base/button';
import ParticleField from './particle-field.svelte'; import ParticleField from './particle-field.svelte';
</script> </script>
@@ -91,42 +90,34 @@
></div> ></div>
<div class="relative z-10 mx-auto flex max-w-[1100px] flex-col items-center text-center"> <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">
<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
Teach your customers your product <em class="text-blue-700 not-italic">before support has to.</em>
<em class="text-blue-700 not-italic">before support has to.</em> </h1>
</h1>
</BlurFade>
<BlurFade delay={0.1} once> <p class="mt-5 max-w-[580px] text-sm leading-relaxed lg:text-base">
<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
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.
domain, with an AI tutor in every lesson. </p>
</p>
</BlurFade>
<BlurFade delay={0.2} once> <div class="mt-7 flex flex-wrap items-center justify-center gap-3">
<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 data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">Book a Demo</Button> <Button href="/signup" variant="outline">Start free</Button>
<Button href="/signup" variant="outline">Start free</Button> </div>
</div>
</BlurFade>
</div> </div>
<div class="relative z-30 mx-auto mt-14 w-full max-w-[1100px]"> <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">
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200"> <img
<img src="/hero-academy.jpeg"
src="/hero-academy.jpeg" alt="Branded customer academy on a custom domain — catalog, programs, AI tutor"
alt="Branded customer academy on a custom domain — catalog, programs, AI tutor" width="2560"
width="2560" height="1440"
height="1440" class="block h-auto w-full"
class="block h-auto w-full" loading="eager"
loading="eager" decoding="async"
decoding="async" />
/> </div>
</div>
</BlurFade>
</div> </div>
</section> </section>
apps/website/src/lib/components/navigation.svelte
+1 -1
View File
@@ -96,7 +96,7 @@
key: 'self-hosting', key: 'self-hosting',
title: 'Self-hosting & Docs', title: 'Self-hosting & Docs',
subtitle: 'Run ClassroomIO in your own VPC.', subtitle: 'Run ClassroomIO in your own VPC.',
href: 'https://docs.classroomio.com' href: 'https://classroomio.com/docs'
}, },
{ {
key: 'mcp-recipes', key: 'mcp-recipes',
apps/website/src/lib/components/oss-section.svelte
+1 -1
View File
@@ -73,7 +73,7 @@
{#if stars}<span class="text-blue-300">{stars}</span>{/if} {#if stars}<span class="text-blue-300">{stars}</span>{/if}
</a> </a>
<a <a
href="https://docs.classroomio.com/self-hosting" href="https://classroomio.com/docs/self-hosting"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-950 no-underline transition-all hover:border-gray-950" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-950 no-underline transition-all hover:border-gray-950"
apps/website/src/routes/(marketing)/customer-education/vs-help-docs/+page.svelte
+15 -25
View File
@@ -41,34 +41,24 @@
<section class="bg-white"> <section class="bg-white">
<PageHeader className="px-6 lg:px-12"> <PageHeader className="px-6 lg:px-12">
<div class="mx-auto max-w-[1100px]"> <div class="mx-auto max-w-[1100px]">
<BlurFade delay={0} once> <Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">Customer academy vs help docs</Badge>
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">Customer academy vs help docs</Badge>
</BlurFade>
<BlurFade delay={0.1} once> <h1 class="max-w-[820px] text-[clamp(2rem,3.4vw,2.8rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
<h1 Why your help center
class="max-w-[820px] text-[clamp(2rem,3.4vw,2.8rem)] leading-[1.1] font-medium tracking-tight text-gray-950" <em class="text-blue-700 not-italic">isn't teaching</em>
> your customers.
Why your help center </h1>
<em class="text-blue-700 not-italic">isn't teaching</em>
your customers.
</h1>
</BlurFade>
<BlurFade delay={0.2} once> <HeroSubtitle>
<HeroSubtitle> Intercom Articles, Zendesk Guide, and Confluence are excellent at one thing — answering "how do I do X?" when
Intercom Articles, Zendesk Guide, and Confluence are excellent at one thing — answering "how do I do X?" when the user already knows what they need. They were never designed to take a brand-new customer from zero to
the user already knows what they need. They were never designed to take a brand-new customer from zero to confident product use. That's what a customer academy is for.
confident product use. That's what a customer academy is for. </HeroSubtitle>
</HeroSubtitle>
</BlurFade>
<BlurFade delay={0.3} once> <div class="mt-8 flex flex-wrap items-center gap-3">
<div class="mt-8 flex flex-wrap items-center gap-3"> <Button href="/signup">Launch your academy free</Button>
<Button href="/signup">Launch your academy free</Button> <Button href="/customer-education" variant="outline">See a live academy</Button>
<Button href="/customer-education" variant="outline">See a live academy</Button> </div>
</div>
</BlurFade>
</div> </div>
</PageHeader> </PageHeader>
apps/website/src/routes/(marketing)/docs-vs-company-academy/+page.svelte
+26 -37
View File
@@ -168,49 +168,38 @@
<section class="bg-white"> <section class="bg-white">
<PageHeader className="px-6 lg:px-12"> <PageHeader className="px-6 lg:px-12">
<div class="mx-auto flex max-w-[820px] flex-col items-center text-center"> <div class="mx-auto flex max-w-[820px] flex-col items-center text-center">
<BlurFade delay={0} once> <Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!"> <BookOpen size={14} class="text-blue-700" />
<BookOpen size={14} class="text-blue-700" /> Docs vs Company Academy
Docs vs Company Academy </Badge>
</Badge>
</BlurFade>
<BlurFade delay={0.1} once> <h1 class="text-[clamp(2.4rem,4vw,3.6rem)] leading-[1.08] font-medium tracking-tight text-gray-950">
<h1 class="text-[clamp(2.4rem,4vw,3.6rem)] leading-[1.08] font-medium tracking-tight text-gray-950"> Documentation answers questions.
Documentation answers questions. <em class="text-blue-700 not-italic">A company academy teaches them to do the job.</em>
<em class="text-blue-700 not-italic">A company academy teaches them to do the job.</em> </h1>
</h1>
</BlurFade>
<BlurFade delay={0.2} once> <p class="mt-6 text-sm leading-relaxed lg:text-base">
<p class="mt-6 text-sm leading-relaxed lg:text-base"> Most teams do not need to choose one forever. They need to understand the job each format performs. This guide
Most teams do not need to choose one forever. They need to understand the job each format performs. This guide explains when docs are enough, when a company academy is the better tool, and how the two should work together.
explains when docs are enough, when a company academy is the better tool, and how the two should work </p>
together.
</p>
</BlurFade>
<BlurFade delay={0.3} once> <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
<div class="mt-8 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 data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">Book a Demo</Button> <Button href="/customer-education" variant="outline">Explore academies</Button>
<Button href="/customer-education" variant="outline">Explore academies</Button> </div>
</div>
</BlurFade>
</div> </div>
<BlurFade delay={0.35} once> <div class="mx-auto mt-14 w-full max-w-[1100px]">
<div class="mx-auto mt-14 w-full max-w-[1100px]"> <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200"> <img
<img src="/docs-vs-customer-site.jpeg"
src="/docs-vs-customer-site.jpeg" alt="Docs answering questions, customer academy building capability — side by side"
alt="Docs answering questions, customer academy building capability — side by side" class="block h-auto w-full"
class="block h-auto w-full" loading="eager"
loading="eager" decoding="async"
decoding="async" />
/>
</div>
</div> </div>
</BlurFade> </div>
</PageHeader> </PageHeader>
<section class="bg-gray-50 px-6 py-16 lg:px-12 lg:py-24"> <section class="bg-gray-50 px-6 py-16 lg:px-12 lg:py-24">
apps/website/src/routes/automation/+page.svelte
+3 -3
View File
@@ -57,7 +57,7 @@
connector" plans. Build the integration that fits your stack. connector" plans. Build the integration that fits your stack.
</HeroSubtitle> </HeroSubtitle>
<div class="mt-8 flex flex-wrap items-center gap-3"> <div class="mt-8 flex flex-wrap items-center gap-3">
<Button href="https://docs.classroomio.com/api">Read the API docs</Button> <Button href="https://classroomio.com/docs/api">Read the API docs</Button>
<Button href="/github" variant="outline">Star on GitHub</Button> <Button href="/github" variant="outline">Star on GitHub</Button>
</div> </div>
</div> </div>
@@ -147,7 +147,7 @@
<div class="mt-8 flex flex-wrap items-center gap-3"> <div class="mt-8 flex flex-wrap items-center gap-3">
<a <a
href="https://docs.classroomio.com/self-hosting" href="https://classroomio.com/docs/self-hosting"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="inline-flex items-center gap-2 rounded-lg bg-gray-950 px-5 py-2.5 text-sm font-medium text-white no-underline transition-all hover:-translate-y-0.5 hover:bg-blue-700" class="inline-flex items-center gap-2 rounded-lg bg-gray-950 px-5 py-2.5 text-sm font-medium text-white no-underline transition-all hover:-translate-y-0.5 hover:bg-blue-700"
@@ -206,7 +206,7 @@
header="Programmable from day one." header="Programmable from day one."
subText="API, Webhooks, and an MCP server in the box. Self-host it or use the hosted version. Same surface either way." subText="API, Webhooks, and an MCP server in the box. Self-host it or use the hosted version. Same surface either way."
btnLabel="Read the docs" btnLabel="Read the docs"
link="https://docs.classroomio.com/api" link="https://classroomio.com/docs/api"
demo={false} demo={false}
/> />
</section> </section>