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/bold.svelte
+15 -98
View File
@@ -6,14 +6,10 @@
import OrgLandingPageFooter from './landing-page-footer.svelte';
import BoldNav from './bold/nav.svelte';
import BoldHero from './bold/hero.svelte';
import BoldCourseCard from './bold/course-card.svelte';
import { Button } from '../../base/button';
import * as Card from '../../base/card';
import { BlurFade } from '../animation/blurfade';
import { BorderBeam } from '../animation/border-beam';
import { DotPattern } from '../animation/dot-pattern';
import ClockIcon from '@lucide/svelte/icons/clock';
import TagIcon from '@lucide/svelte/icons/tag';
import { getCourseTypeLandingMeta, getPrimaryCourseTag } from './landing-page-utils';
import { themeStyle } from './theme-style';
let {
orgName,
@@ -27,108 +23,29 @@
embed,
callout,
links,
footer
footer,
labels
}: OrgLandingPageProps = $props();
function formatCurrency(cost?: number, currency = 'USD') {
if (!cost) return 'Free';
return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
}
</script>
<div class="ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
<div
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
style={themeStyle('bold')}
>
<BoldNav {orgName} {logoUrl} {navItems} {authAction} />
<main>
<BoldHero {hero} />
<section class="ui:relative ui:bg-muted/30 ui:px-6 ui:overflow-hidden ui:mb-12">
<section class="ui:relative ui:bg-[var(--landing-card-soft)]/30 ui:px-6 ui:overflow-hidden ui:mb-12">
<DotPattern class="ui:opacity-[0.15]" />
<div class="ui:relative ui:max-w-7xl ui:mx-auto">
<div class="ui:flex ui:items-end ui:justify-between ui:mb-12">
<h2 class="ui:text-4xl ui:font-black ui:tracking-tight">Latest Courses</h2>
<h2 class="ui:text-4xl ui:font-black ui:tracking-tight">{labels?.catalogHeading ?? 'Latest Courses'}</h2>
</div>
<div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-8">
{#each courses as course, index (course.id)}
{@const courseTypeMeta = getCourseTypeLandingMeta(course)}
{@const primaryTag = getPrimaryCourseTag(course)}
<BlurFade delay={0.1 * index} once={true}>
<Card.Root
class="ui:group ui:relative ui:overflow-hidden ui:bg-background ui:rounded-3xl ui:p-4 ui:flex-col ui:sm:flex-row ui:gap-6 ui:duration-300 ui:h-full ui:border-border/50 {disableCourseLinks
? ''
: 'ui:hover:shadow-xl ui:hover:shadow-primary/5 ui:transition-all'}"
>
<BorderBeam
size={120}
duration={8}
colorFrom="var(--primary)"
colorTo="color-mix(in oklab, var(--primary) 65%, white)"
/>
{#if course.logo}
<img
src={course.logo}
alt={course.title}
class="ui:w-full ui:sm:w-48 ui:h-48 ui:object-cover ui:rounded-2xl ui:group-hover:scale-[1.02] ui:transition-transform ui:duration-500"
/>
{/if}
<Card.Content class="ui:p-2 ui:flex ui:flex-col ui:justify-center ui:flex-1">
<Card.Title class="ui:text-2xl ui:font-bold ui:mb-2">{course.title}</Card.Title>
<Card.Description class="ui:mb-6 ui:line-clamp-2">{course.description}</Card.Description>
<div class="ui:flex ui:items-center ui:gap-4 ui:text-sm ui:font-semibold ui:mb-6">
{#if course.duration}
<div
class="ui:flex ui:items-center ui:gap-1.5 ui:text-muted-foreground ui:bg-muted ui:px-2.5 ui:py-1 ui:rounded-md"
>
<ClockIcon class="ui:size-3.5" />
<span>{course.duration}</span>
</div>
{/if}
{#if courseTypeMeta}
{@const TypeIcon = courseTypeMeta.icon}
<div
class="ui:flex ui:items-center ui:gap-1.5 ui:text-foreground ui:bg-muted ui:px-2.5 ui:py-1 ui:rounded-md"
>
<TypeIcon class={courseTypeMeta.iconClass} />
<span>{courseTypeMeta.label}</span>
</div>
{/if}
{#if primaryTag}
<div
class="ui:flex ui:items-center ui:gap-1.5 ui:text-foreground ui:bg-muted ui:px-2.5 ui:py-1 ui:rounded-md"
>
<TagIcon class="ui:size-3.5 ui:text-primary" />
{#if primaryTag.color}
<span
class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
style={`background-color: ${primaryTag.color}`}
aria-hidden="true"
></span>
{/if}
<span>{primaryTag.name}</span>
</div>
{/if}
</div>
<div class="ui:mt-auto ui:flex ui:items-center ui:justify-between">
<span class="ui:font-black ui:text-lg"
>{course.price || formatCurrency(course.cost, course.currency)}</span
>
<Button
href={disableCourseLinks ? undefined : course.link}
variant="outline"
class="ui:rounded-lg ui:font-bold ui:text-sm {disableCourseLinks
? 'ui:pointer-events-none'
: 'ui:hover:bg-primary ui:hover:text-primary-foreground ui:group-hover:bg-primary ui:group-hover:text-primary-foreground ui:transition-colors'}"
aria-disabled={disableCourseLinks}
tabindex={disableCourseLinks ? -1 : undefined}
>
Details
</Button>
</div>
</Card.Content>
</Card.Root>
</BlurFade>
<BoldCourseCard {course} {disableCourseLinks} {labels} />
{/each}
</div>
@@ -140,7 +57,7 @@
class="ui:rounded-xl ui:px-8"
disabled={disableCourseLinks}
>
View more courses
{labels?.browseCoursesLabel ?? 'View more courses'}
</Button>
</div>
{/if}
@@ -148,11 +65,11 @@
</section>
</main>
<OrgLandingPageLinks {links} variant="bold" />
<OrgLandingPageLinks {links} {labels} variant="bold" />
<OrgLandingPageEmbed {embed} variant="bold" />
<OrgLandingPageEmbed {embed} {labels} variant="bold" />
<OrgLandingPageCallout {callout} variant="bold" />
<OrgLandingPageCallout {callout} {labels} variant="bold" />
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="bold" />
</div>