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/vibrant/course-card.svelte
+86
View File
@@ -0,0 +1,86 @@
<script lang="ts">
import type { CourseItem, OrgLandingPageLabels } from '../types';
import { getCourseTypeLandingMeta } 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 href = $derived.by(() => {
if (disableCourseLinks) return undefined;
return course.link || (course.slug ? `/course/${course.slug}` : undefined);
});
function formatCost(cost?: number, currency = 'USD'): string {
if (!cost) return labels?.freeLabel ?? 'Free';
return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(cost);
}
</script>
<a
{href}
class="ui:group ui:flex ui:flex-col ui:h-full ui:overflow-hidden ui:rounded-[20px] ui:bg-[var(--landing-card-soft)] ui:no-underline ui:transition-colors ui:hover:bg-[var(--landing-card)] {disableCourseLinks
? 'ui:cursor-default'
: 'ui:cursor-pointer'}"
aria-disabled={disableCourseLinks}
tabindex={disableCourseLinks ? -1 : undefined}
>
{#if course.logo}
<div
class="ui:h-[180px] ui:bg-cover ui:bg-center"
style="background-image: url('{course.logo}');"
aria-hidden="true"
></div>
{:else}
<div
class="ui:h-[180px] ui:relative ui:overflow-hidden"
style="
background:
radial-gradient(60% 80% at 30% 30%, color-mix(in oklab, var(--landing-accent) 40%, white) 0%, transparent 65%),
linear-gradient(135deg, color-mix(in oklab, var(--landing-accent) 70%, white) 0%, color-mix(in oklab, var(--landing-accent) 30%, white) 100%);
"
aria-hidden="true"
></div>
{/if}
<div class="ui:flex ui:flex-col ui:flex-1 ui:p-7">
{#if courseTypeMeta}
<span
class="ui:text-[12px] ui:font-medium ui:tracking-[0.04em] ui:uppercase ui:text-[var(--landing-fg-muted)] ui:mb-3"
>
{courseTypeMeta.label}
</span>
{/if}
<h3
class="ui:text-xl ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-2.5 ui:text-[var(--landing-fg)]"
style="letter-spacing: -0.015em;"
>
{course.title}
</h3>
<p
class="ui:text-[15px] ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:m-0 ui:mb-5 ui:flex-1"
>
{course.description}
</p>
<div
class="ui:flex ui:items-center ui:justify-between ui:pt-5 ui:mt-auto"
style="border-top: 1px solid var(--landing-border-soft);"
>
<span class="ui:text-lg ui:font-semibold ui:text-[var(--landing-fg)]" style="letter-spacing: -0.01em;">
{course.price || formatCost(course.cost, course.currency)}
</span>
<span
class="ui:inline-flex ui:items-center ui:gap-1 ui:text-sm ui:font-medium ui:text-[var(--landing-accent)] ui:transition-transform ui:group-hover:translate-x-0.5"
aria-hidden="true"
>
{labels?.enrollLabel ?? 'Enroll'} <span>→</span>
</span>
</div>
</div>
</a>
packages/ui/src/custom/org-landing-page/vibrant/hero.svelte
+72
View File
@@ -0,0 +1,72 @@
<script lang="ts">
import type { OrgLandingPageProps } from '../types';
import type { Snippet } from 'svelte';
import SecondaryActionButton from '../secondary-action-button.svelte';
import { Button } from '../../../base/button';
import EditableLandingSection from '../editable-section.svelte';
interface Props {
hero: OrgLandingPageProps['hero'];
labels?: OrgLandingPageProps['labels'];
navigation: Snippet;
}
let { hero, labels, navigation }: Props = $props();
</script>
{@render navigation()}
<EditableLandingSection sectionKey="hero">
<section
class="ui:relative ui:px-6 ui:md:px-8 ui:pt-20 ui:md:pt-24 ui:pb-20 ui:md:pb-24 ui:bg-[var(--landing-bg)] ui:text-center"
>
<div class="ui:max-w-[1320px] ui:mx-auto">
<h1
class="ui:text-[64px] ui:md:text-[88px] ui:lg:text-[110px] ui:font-medium ui:tracking-tight ui:text-[var(--landing-fg)] ui:m-0 ui:mb-7 ui:max-w-[1100px] ui:mx-auto ui:text-balance"
style="line-height: 0.98; letter-spacing: -0.04em;"
>
{hero.heading}
</h1>
<p
class="ui:text-lg ui:md:text-xl ui:lg:text-[22px] ui:text-[var(--landing-fg-muted)] ui:max-w-[640px] ui:mx-auto ui:m-0 ui:mb-10"
style="line-height: 1.4; letter-spacing: -0.012em;"
>
{hero.subheading}
</p>
<div class="ui:inline-flex ui:flex-wrap ui:justify-center ui:items-center ui:gap-3">
<Button
href={hero.primaryAction.href}
disabled={hero.primaryAction.disabled ?? false}
class="ui:rounded-md ui:px-7 ui:py-3.5 ui:text-base ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:opacity-90"
>
{hero.primaryAction.label}
</Button>
{#if hero.secondaryAction}
<SecondaryActionButton
href={hero.secondaryAction.href}
label={hero.secondaryAction.label}
variant="vibrant"
/>
{/if}
</div>
</div>
</section>
<div
aria-hidden="true"
class="ui:h-[180px] ui:md:h-[220px]"
style="
background: linear-gradient(
to bottom,
var(--landing-bg) 0%,
var(--landing-bg) 18%,
color-mix(in oklab, var(--landing-accent) 12%, var(--landing-bg)) 38%,
color-mix(in oklab, var(--landing-accent) 40%, var(--landing-bg)) 58%,
color-mix(in oklab, var(--landing-accent) 78%, var(--landing-bg)) 78%,
var(--landing-accent) 100%
);
"
></div>
</EditableLandingSection>
packages/ui/src/custom/org-landing-page/vibrant/nav.svelte
+71
View File
@@ -0,0 +1,71 @@
<script lang="ts">
import type { NavItem } from '../types';
import { Button } from '../../../base/button';
import EditableLandingSection from '../editable-section.svelte';
interface Props {
orgName: string;
logoUrl?: string;
navItems: NavItem[];
authAction?: {
label: string;
href: string;
};
}
let { orgName, logoUrl, navItems, authAction }: Props = $props();
</script>
<EditableLandingSection sectionKey="navigation">
<header class="ui:sticky ui:top-0 ui:z-50 ui:bg-[var(--landing-bg)]">
<div class="ui:max-w-[1320px] ui:mx-auto ui:px-6 ui:md:px-8">
<div class="ui:flex ui:items-center ui:justify-between ui:h-[72px] ui:gap-6">
<div class="ui:flex ui:items-center ui:gap-8">
<a
href="/"
class="ui:inline-flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[22px] ui:tracking-tight ui:text-[var(--landing-fg)] ui:no-underline ui:cursor-pointer"
>
{#if logoUrl}
<img src={logoUrl} alt={orgName} class="ui:h-7 ui:w-auto" />
{:else}
<span class="ui:relative ui:inline-block ui:size-[22px]" aria-hidden="true">
<span
class="ui:absolute ui:left-0 ui:top-0 ui:w-[10px] ui:h-[22px] ui:rounded-[3px] ui:bg-[var(--landing-accent)]"
></span>
<span
class="ui:absolute ui:right-0 ui:top-[6px] ui:w-[10px] ui:h-[10px] ui:rounded-[3px] ui:bg-[var(--landing-accent)]"
></span>
</span>
{/if}
<span>{orgName}</span>
</a>
{#if navItems.length > 0}
<nav class="ui:hidden ui:md:flex ui:gap-1 ui:items-center">
{#each navItems as item (item.href + item.label)}
<a
href={item.href}
class="ui:inline-flex ui:items-center ui:gap-1 ui:px-3.5 ui:py-2 ui:text-[15px] ui:font-medium ui:text-[var(--landing-fg)] ui:rounded-md ui:transition-colors ui:hover:bg-[var(--landing-card-soft)] ui:no-underline ui:cursor-pointer"
>
{item.label}
</a>
{/each}
</nav>
{/if}
</div>
{#if authAction}
<div class="ui:flex ui:items-center ui:gap-4">
<Button
href={authAction.href}
size="sm"
class="ui:rounded-md ui:px-4 ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:opacity-90"
>
{authAction.label}
</Button>
</div>
{/if}
</div>
</div>
</header>
</EditableLandingSection>