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/tech/course-card.svelte
+71
View File
@@ -0,0 +1,71 @@
<script lang="ts">
import type { CourseItem, OrgLandingPageLabels } from '../types';
import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
import ClockIcon from '@lucide/svelte/icons/clock';
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 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="ui:flex ui:flex-col ui:h-full ui:p-7 ui:border-r ui:border-b ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)] ui:transition-colors ui:no-underline {disableCourseLinks
? 'ui:cursor-default'
: 'ui:cursor-pointer ui:hover:bg-[var(--landing-card-soft)]/40'}"
aria-disabled={disableCourseLinks}
tabindex={disableCourseLinks ? -1 : undefined}
>
{#if courseTypeMeta}
<span
class="ui:inline-block ui:self-start ui:px-2.5 ui:py-1 ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:font-mono ui:text-[10px] ui:font-semibold ui:tracking-wider ui:uppercase ui:mb-4"
>
{courseTypeMeta.label}
</span>
{/if}
<h3 class="ui:text-xl ui:font-bold ui:tracking-tight ui:leading-tight ui:mb-3 ui:m-0">
{course.title}
</h3>
<p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:flex-1 ui:m-0 ui:mb-5">
{course.description}
</p>
<div
class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:border-t ui:border-dashed ui:border-[var(--landing-border)]"
>
<span class="ui:font-mono 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:font-mono ui:text-xs ui:text-[var(--landing-accent)] ui:font-bold"
aria-hidden="true"
>
{labels?.enrollLabel ?? 'enroll'}
<ArrowRightIcon class="ui:size-3.5" />
</span>
</div>
{#if course.duration}
<p
class="ui:font-mono ui:text-[11px] ui:text-[var(--landing-fg-muted)] ui:mt-3 ui:inline-flex ui:items-center ui:gap-1.5"
>
<ClockIcon class="ui:size-3" />
{course.duration}
</p>
{/if}
</a>
packages/ui/src/custom/org-landing-page/tech/hero.svelte
+39 -48
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 {
@@ -15,7 +14,9 @@
</script>
<EditableLandingSection sectionKey="hero">
<section class="ui:relative ui:bg-primary ui:text-primary-foreground ui:overflow-hidden ui:px-6 ui:pt-2 ui:pb-20">
<section
class="ui:relative ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:overflow-hidden ui:px-6 ui:pt-2 ui:pb-20"
>
<!-- subtle grid overlay -->
<div
class="ui:pointer-events-none ui:absolute ui:inset-0 ui:opacity-[0.08]"
@@ -31,56 +32,46 @@
class="ui:relative ui:max-w-[1280px] ui:mx-auto ui:py-16 ui:lg:py-24 ui:grid ui:lg:grid-cols-2 ui:gap-12 ui:items-center"
>
<div>
<BlurFade delay={0} once={true}>
<p
class="ui:inline-block ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-primary-foreground/80 ui:bg-primary-foreground/10 ui:px-3 ui:py-1.5 ui:mb-6"
<p
class="ui:inline-block ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent-fg)]/80 ui:bg-[var(--landing-accent-fg)]/10 ui:px-3 ui:py-1.5 ui:mb-6"
>
// engineering academy
</p>
<h1 class="ui:text-5xl ui:lg:text-7xl ui:font-extrabold ui:tracking-tight ui:leading-[0.95] ui:mb-6">
{hero.heading}
</h1>
<p
class="ui:text-lg ui:lg:text-xl ui:text-[var(--landing-accent-fg)]/80 ui:max-w-xl ui:mb-8 ui:leading-relaxed"
>
{hero.subheading}
</p>
<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
<Button
href={hero.primaryAction.href}
disabled={hero.primaryAction.disabled ?? false}
size="lg"
variant="secondary"
class="ui:rounded-none ui:px-7 ui:font-semibold ui:bg-[var(--landing-accent-fg)] ui:text-[var(--landing-accent)] ui:hover:bg-[var(--landing-accent-fg)]/90"
>
// engineering academy
</p>
</BlurFade>
<BlurFade delay={0.12} once={true}>
<h1 class="ui:text-5xl ui:lg:text-7xl ui:font-extrabold ui:tracking-tight ui:leading-[0.95] ui:mb-6">
{hero.heading}
</h1>
</BlurFade>
<BlurFade delay={0.24} once={true}>
<p class="ui:text-lg ui:lg:text-xl ui:text-primary-foreground/80 ui:max-w-xl ui:mb-8 ui:leading-relaxed">
{hero.subheading}
</p>
</BlurFade>
<BlurFade delay={0.36} once={true}>
<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
<Button
href={hero.primaryAction.href}
disabled={hero.primaryAction.disabled ?? false}
size="lg"
variant="secondary"
class="ui:rounded-none ui:px-7 ui:font-semibold ui:bg-primary-foreground ui:text-primary ui:hover:bg-primary-foreground/90"
>
{hero.primaryAction.label}
</Button>
{#if hero.secondaryAction}
<SecondaryActionButton
href={hero.secondaryAction.href}
label={hero.secondaryAction.label}
variant="tech"
/>
{/if}
</div>
</BlurFade>
{hero.primaryAction.label}
</Button>
{#if hero.secondaryAction}
<SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="tech" />
{/if}
</div>
</div>
{#if hero.image}
<BlurFade delay={0.3} once={true} class="ui:hidden ui:lg:block">
<div class="ui:relative">
<div class="ui:absolute ui:inset-0 ui:bg-primary-foreground/10 ui:translate-x-3 ui:translate-y-3"></div>
<img
src={hero.image}
alt=""
class="ui:relative ui:w-full ui:h-[460px] ui:object-cover ui:border ui:border-primary-foreground/20"
/>
</div>
</BlurFade>
<div class="ui:relative">
<div
class="ui:absolute ui:inset-0 ui:bg-[var(--landing-accent-fg)]/10 ui:translate-x-3 ui:translate-y-3"
></div>
<img
src={hero.image}
alt=""
class="ui:relative ui:w-full ui:h-[460px] ui:object-cover ui:border ui:border-[var(--landing-accent-fg)]/20"
/>
</div>
{/if}
</div>
</section>
packages/ui/src/custom/org-landing-page/tech/nav.svelte
+4 -4
View File
@@ -17,10 +17,10 @@
</script>
<EditableLandingSection sectionKey="navigation">
<header class="ui:flex ui:items-center ui:justify-between ui:gap-6 ui:py-4 ui:text-primary-foreground">
<header class="ui:flex ui:items-center ui:justify-between ui:gap-6 ui:py-4 ui:text-[var(--landing-accent-fg)]">
<a
href="/"
class="ui:flex ui:items-center ui:gap-2 ui:font-bold ui:text-base ui:tracking-tight ui:text-primary-foreground ui:no-underline"
class="ui:flex ui:items-center ui:gap-2 ui:font-bold ui:text-base ui:tracking-tight ui:text-[var(--landing-accent-fg)] ui:no-underline ui:cursor-pointer"
>
{#if logoUrl}
<img src={logoUrl} alt={orgName} class="ui:h-7 ui:w-auto" />
@@ -33,7 +33,7 @@
{#each navItems as item (item.href + item.label)}
<a
href={item.href}
class="ui:px-3 ui:py-1.5 ui:rounded-full ui:border ui:border-transparent ui:text-primary-foreground/85 ui:hover:text-primary-foreground ui:hover:border-primary-foreground/30 ui:hover:bg-primary-foreground/10 ui:transition-colors ui:no-underline"
class="ui:px-3 ui:py-1.5 ui:rounded-full ui:border ui:border-transparent ui:text-[var(--landing-accent-fg)]/85 ui:hover:text-[var(--landing-accent-fg)] ui:hover:border-[var(--landing-accent-fg)]/30 ui:hover:bg-[var(--landing-accent-fg)]/10 ui:transition-colors ui:no-underline ui:cursor-pointer"
>
( {item.label.toLowerCase()} )
</a>
@@ -46,7 +46,7 @@
href={authAction.href}
size="sm"
variant="outline"
class="ui:rounded-none ui:font-semibold ui:border-primary-foreground ui:text-primary-foreground ui:bg-transparent ui:hover:bg-primary-foreground/10 ui:hover:text-primary-foreground"
class="ui:rounded-none ui:font-semibold ui:border-[var(--landing-accent-fg)] ui:text-[var(--landing-accent-fg)] ui:bg-transparent ui:hover:bg-[var(--landing-accent-fg)]/10 ui:hover:text-[var(--landing-accent-fg)]"
>
{authAction.label} →
</Button>