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

feat: preview templates, thumbnail features, 2 new org templates

Browse Source
This commit is contained in:
Rotimi Best
2026-05-23 12:24:57 +01:00
parent 4fdd4115b9
commit 78ab13f54b
106 changed files with 8320 additions and 2040 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/custom/org-landing-page/saas/course-card.svelte
+98
View File
@@ -0,0 +1,98 @@
<script lang="ts">
import type { CourseItem, OrgLandingPageLabels } from '../types';
import ClockIcon from '@lucide/svelte/icons/clock';
import TagIcon from '@lucide/svelte/icons/tag';
import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
import { getCourseTypeLandingMeta, getPrimaryCourseTag } from '../landing-page-utils';
interface Props {
course: CourseItem;
disableCourseLinks?: boolean;
labels?: OrgLandingPageLabels;
}
let { course, disableCourseLinks = false, labels }: Props = $props();
const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
const primaryTag = $derived(getPrimaryCourseTag(course));
const href = $derived.by(() => {
if (disableCourseLinks) return undefined;
return course.link || (course.slug ? `/course/${course.slug}` : undefined);
});
function formatCurrency(cost?: number, currency = 'USD') {
if (!cost) return labels?.freeLabel ?? 'Free';
return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
}
</script>
<a
{href}
class="course-card ui:flex ui:flex-col ui:h-full ui:no-underline ui:bg-[var(--landing-bg)] ui:transition-colors {disableCourseLinks
? 'ui:cursor-default'
: 'ui:cursor-pointer ui:hover:bg-[var(--landing-card-soft)]/40'}"
aria-disabled={disableCourseLinks}
tabindex={disableCourseLinks ? -1 : undefined}
>
{#if course.logo}
<div
class="ui:h-40 ui:w-full ui:bg-cover ui:bg-center ui:relative"
style={`background-image: url(${course.logo});`}
>
{#if courseTypeMeta}
<span
class="ui:absolute ui:top-3 ui:left-3 ui:bg-[var(--landing-bg)]/95 ui:text-[var(--landing-fg)] ui:text-[11px] ui:font-semibold ui:px-2.5 ui:py-1 ui:rounded-full"
>
{courseTypeMeta.label}
</span>
{/if}
</div>
{/if}
<div class="ui:p-5 ui:flex ui:flex-col ui:flex-1 ui:gap-2">
<h3 class="ui:text-lg ui:font-bold ui:tracking-tight ui:leading-snug ui:m-0">
{course.title}
</h3>
<p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:line-clamp-2 ui:leading-relaxed ui:m-0 ui:flex-1">
{course.description}
</p>
<div class="ui:flex ui:items-center ui:gap-2 ui:flex-wrap ui:text-xs ui:text-[var(--landing-fg-muted)] ui:mt-2">
{#if course.duration}
<span class="ui:inline-flex ui:items-center ui:gap-1">
<ClockIcon class="ui:size-3.5" />
{course.duration}
</span>
{/if}
{#if primaryTag}
<span class="ui:inline-flex ui:items-center ui:gap-1">
<TagIcon class="ui:size-3.5" />
{#if primaryTag.color}
<span
class="ui:inline-block ui:size-2 ui:rounded-full"
style={`background-color: ${primaryTag.color}`}
aria-hidden="true"
></span>
{/if}
{primaryTag.name}
</span>
{/if}
</div>
<div
class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:mt-2 ui:border-t ui:border-[var(--landing-border)]/60"
>
<span class="ui:text-sm ui:font-bold">
{course.price || formatCurrency(course.cost, course.currency)}
</span>
<span
class="ui:inline-flex ui:items-center ui:gap-1 ui:text-xs ui:font-semibold ui:text-[var(--landing-accent)]"
aria-hidden="true"
>
{labels?.enrollLabel ?? 'Enroll'}
<ArrowRightIcon class="ui:size-3.5" />
</span>
</div>
</div>
</a>
packages/ui/src/custom/org-landing-page/saas/hero.svelte
+30 -39
View File
@@ -3,7 +3,6 @@
import type { Snippet } from 'svelte';
import SecondaryActionButton from '../secondary-action-button.svelte';
import { Button } from '../../../base/button';
import { BlurFade } from '../../animation/blurfade';
import EditableLandingSection from '../editable-section.svelte';
interface Props {
@@ -21,48 +20,40 @@
</div>
<div class="ui:relative ui:max-w-[1180px] ui:mx-auto ui:pt-16 ui:md:pt-20 ui:text-center">
<BlurFade delay={0} once={true}>
<h1
class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-bold ui:tracking-tight ui:leading-[1.05] ui:max-w-3xl ui:mx-auto ui:mb-5"
>
{hero.heading}
</h1>
</BlurFade>
<h1
class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-bold ui:tracking-tight ui:leading-[1.05] ui:max-w-3xl ui:mx-auto ui:mb-5"
>
{hero.heading}
</h1>
<BlurFade delay={0.15} once={true}>
<p
class="ui:text-base ui:md:text-lg ui:text-muted-foreground ui:max-w-xl ui:mx-auto ui:mb-8 ui:leading-relaxed"
>
{hero.subheading}
</p>
</BlurFade>
<p
class="ui:text-base ui:md:text-lg ui:text-[var(--landing-fg-muted)] ui:max-w-xl ui:mx-auto ui:mb-8 ui:leading-relaxed"
>
{hero.subheading}
</p>
<BlurFade delay={0.3} once={true}>
<div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
<Button
href={hero.primaryAction.href}
disabled={hero.primaryAction.disabled ?? false}
size="lg"
class="ui:rounded-full ui:px-6"
>
{hero.primaryAction.label}
</Button>
{#if hero.secondaryAction}
<SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="saas" />
{/if}
</div>
</BlurFade>
<div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
<Button
href={hero.primaryAction.href}
disabled={hero.primaryAction.disabled ?? false}
size="lg"
class="ui:rounded-full ui:px-6"
>
{hero.primaryAction.label}
</Button>
{#if hero.secondaryAction}
<SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="saas" />
{/if}
</div>
{#if hero.image}
<BlurFade delay={0.45} once={true}>
<div class="ui:mt-16 ui:max-w-4xl ui:mx-auto">
<img
src={hero.image}
alt=""
class="ui:w-full ui:h-auto ui:rounded-2xl ui:border ui:border-border ui:shadow-[0_20px_60px_-30px_rgba(14,14,16,0.25)]"
/>
</div>
</BlurFade>
<div class="ui:mt-16 ui:max-w-4xl ui:mx-auto">
<img
src={hero.image}
alt=""
class="ui:w-full ui:h-auto ui:rounded-2xl ui:border ui:border-[var(--landing-border)] ui:shadow-[0_20px_60px_-30px_rgba(14,14,16,0.25)]"
/>
</div>
{/if}
</div>
</section>
packages/ui/src/custom/org-landing-page/saas/nav.svelte
+3 -3
View File
@@ -18,11 +18,11 @@
<EditableLandingSection sectionKey="navigation">
<header
class="ui:flex ui:items-center ui:justify-between ui:gap-4 ui:py-2 ui:pl-5 ui:pr-2 ui:rounded-full ui:border ui:border-border ui:bg-background/85 ui:backdrop-blur-md ui:shadow-[0_4px_24px_-8px_rgba(14,14,16,0.08)]"
class="ui:flex ui:items-center ui:justify-between ui:gap-4 ui:py-2 ui:pl-5 ui:pr-2 ui:rounded-full ui:border ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)]/85 ui:backdrop-blur-md ui:shadow-[0_4px_24px_-8px_rgba(14,14,16,0.08)]"
>
<a
href="/"
class="ui:flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[15px] ui:tracking-tight ui:text-foreground ui:no-underline"
class="ui:flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[15px] ui:tracking-tight ui:text-[var(--landing-fg)] ui:no-underline ui:cursor-pointer"
>
{#if logoUrl}
<img src={logoUrl} alt={orgName} class="ui:h-6 ui:w-auto" />
@@ -35,7 +35,7 @@
{#each navItems as item (item.href + item.label)}
<a
href={item.href}
class="ui:px-3.5 ui:py-1.5 ui:text-sm ui:font-medium ui:text-foreground/80 ui:hover:text-foreground ui:hover:bg-muted/60 ui:rounded-full ui:transition-colors ui:no-underline"
class="ui:px-3.5 ui:py-1.5 ui:text-sm ui:font-medium ui:text-[var(--landing-fg)]/80 ui:hover:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)]/60 ui:rounded-full ui:transition-colors ui:no-underline ui:cursor-pointer"
>
{item.label}
</a>