150 lines
8.6 KiB
JavaScript
150 lines
8.6 KiB
JavaScript
import React from 'react'
|
|
import { Link, router, usePage } from '@inertiajs/react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
import NovaSelect from '../../components/ui/NovaSelect'
|
|
import { trackAcademySearchResultClick, trackUpgradeClick, useAcademyPageAnalytics } from '../../lib/academyAnalytics'
|
|
|
|
function CourseCard({ course, variant = 'default', analytics = null, searchContext = null, position = null }) {
|
|
const isFeatured = variant === 'featured'
|
|
const progress = course?.progress || null
|
|
const cover = course?.cover_image_url || course?.teaser_image_url || course?.cover_image || course?.teaser_image || ''
|
|
const trackSearchClick = () => {
|
|
if (!searchContext?.query) {
|
|
return
|
|
}
|
|
|
|
trackAcademySearchResultClick(analytics, searchContext, {
|
|
contentType: 'academy_course',
|
|
contentId: course?.id,
|
|
position,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={course.public_url}
|
|
onClick={trackSearchClick}
|
|
data-academy-content-type={searchContext?.query ? 'academy_course' : undefined}
|
|
data-academy-content-id={searchContext?.query ? course?.id : undefined}
|
|
data-academy-search-query={searchContext?.query || undefined}
|
|
data-academy-search-results-count={searchContext?.resultsCount || undefined}
|
|
data-academy-search-position={position || undefined}
|
|
className={[
|
|
'group overflow-hidden rounded-[30px] border border-white/10 transition hover:border-sky-300/25 hover:bg-white/[0.06]',
|
|
isFeatured ? 'bg-[linear-gradient(135deg,rgba(14,165,233,0.14),rgba(15,23,42,0.92))]' : 'bg-white/[0.04]',
|
|
].join(' ')}
|
|
>
|
|
<div className="relative">
|
|
{cover ? <img src={cover} alt="" aria-hidden="true" className={`w-full object-cover ${isFeatured ? 'h-56' : 'h-44'}`} /> : <div className={`w-full bg-[linear-gradient(135deg,rgba(14,165,233,0.22),rgba(15,23,42,0.92))] ${isFeatured ? 'h-56' : 'h-44'}`} />}
|
|
<div className="absolute inset-0 bg-[linear-gradient(180deg,transparent,rgba(2,6,23,0.82))]" />
|
|
<div className="absolute left-5 top-5 flex flex-wrap gap-2">
|
|
<span className="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-100">{course.difficulty}</span>
|
|
<span className="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-200">{course.access_level}</span>
|
|
{course.is_featured ? <span className="rounded-full border border-amber-300/20 bg-amber-300/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100">Featured</span> : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<h2 className={`font-semibold tracking-[-0.05em] text-white transition group-hover:text-sky-100 ${isFeatured ? 'text-3xl' : 'text-2xl'}`}>{course.title}</h2>
|
|
{course.subtitle ? <p className="mt-2 text-sm font-medium uppercase tracking-[0.18em] text-slate-400">{course.subtitle}</p> : null}
|
|
<p className="mt-4 text-sm leading-7 text-slate-300">{course.excerpt || course.description || 'Structured Academy course.'}</p>
|
|
|
|
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
|
|
<p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Lessons</p>
|
|
<p className="mt-2 text-sm font-semibold text-white">{course.lessons_count || 0}</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
|
|
<p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Duration</p>
|
|
<p className="mt-2 text-sm font-semibold text-white">{course.estimated_minutes ? `${course.estimated_minutes} min` : 'Flexible'}</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
|
|
<p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Progress</p>
|
|
<p className="mt-2 text-sm font-semibold text-white">{progress ? `${progress.percent}%` : 'Start fresh'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default function AcademyCoursesIndex({ seo, title, description, items, featuredCourses = [], filters = {}, pricingUrl, analytics }) {
|
|
const flash = usePage().props.flash || {}
|
|
useAcademyPageAnalytics(analytics)
|
|
const searchContext = analytics?.search ? {
|
|
query: analytics.search.query,
|
|
normalizedQuery: analytics.search.normalizedQuery,
|
|
resultsCount: analytics.search.resultsCount,
|
|
filters,
|
|
} : null
|
|
const difficultyOptions = [
|
|
{ value: '', label: 'All levels' },
|
|
{ value: 'beginner', label: 'Beginner' },
|
|
{ value: 'intermediate', label: 'Intermediate' },
|
|
{ value: 'advanced', label: 'Advanced' },
|
|
]
|
|
const accessOptions = [
|
|
{ value: '', label: 'All access' },
|
|
{ value: 'free', label: 'Free' },
|
|
{ value: 'premium', label: 'Premium' },
|
|
{ value: 'mixed', label: 'Mixed' },
|
|
]
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.16),_transparent_24%),linear-gradient(180deg,_#0f172a_0%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
|
|
<SeoHead seo={seo || {}} title={title} description={description} />
|
|
|
|
<div className="mx-auto max-w-[1400px] space-y-6">
|
|
<section className="rounded-[40px] border border-white/10 bg-[linear-gradient(135deg,rgba(15,23,42,0.96),rgba(14,165,233,0.12))] p-8 shadow-[0_24px_90px_rgba(2,6,23,0.36)] md:p-10 lg:p-12">
|
|
<div className="flex flex-wrap items-end justify-between gap-6">
|
|
<div className="max-w-4xl">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Skinbase AI Academy</p>
|
|
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.055em] text-white md:text-5xl lg:text-6xl">{title}</h1>
|
|
<p className="mt-5 text-base leading-8 text-slate-300 md:text-lg">{description}</p>
|
|
</div>
|
|
<Link href={pricingUrl} onClick={() => trackUpgradeClick(analytics, { source: 'academy_courses_index_hero' })} className="rounded-full border border-amber-300/25 bg-amber-300/12 px-5 py-3 text-sm font-semibold text-amber-100">See Academy plans</Link>
|
|
</div>
|
|
</section>
|
|
|
|
{flash.success ? <div className="rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">{flash.success}</div> : null}
|
|
{flash.error ? <div className="rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{flash.error}</div> : null}
|
|
|
|
{featuredCourses.length ? (
|
|
<section className="grid gap-5 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
|
|
<CourseCard course={featuredCourses[0]} variant="featured" analytics={analytics} searchContext={searchContext} position={1} />
|
|
<div className="grid gap-5">
|
|
{featuredCourses.slice(1, 3).map((course, index) => <CourseCard key={course.id} course={course} analytics={analytics} searchContext={searchContext} position={index + 2} />)}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="grid gap-3 rounded-[30px] border border-white/10 bg-black/20 p-5 md:grid-cols-2">
|
|
<NovaSelect
|
|
label="Difficulty"
|
|
value={filters?.difficulty || ''}
|
|
onChange={(nextValue) => router.get(window.location.pathname, { ...filters, difficulty: nextValue || undefined }, { preserveScroll: true, preserveState: true })}
|
|
options={difficultyOptions}
|
|
searchable={false}
|
|
className="rounded-2xl bg-white/[0.04]"
|
|
/>
|
|
<NovaSelect
|
|
label="Access"
|
|
value={filters?.access || ''}
|
|
onChange={(nextValue) => router.get(window.location.pathname, { ...filters, access: nextValue || undefined }, { preserveScroll: true, preserveState: true })}
|
|
options={accessOptions}
|
|
searchable={false}
|
|
className="rounded-2xl bg-white/[0.04]"
|
|
/>
|
|
</section>
|
|
|
|
{(items?.data || []).length === 0 ? (
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.04] px-6 py-12 text-center text-slate-400">No published Academy courses matched these filters.</section>
|
|
) : (
|
|
<section className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
|
{items.data.map((course, index) => <CourseCard key={course.id} course={course} analytics={analytics} searchContext={searchContext} position={index + 1} />)}
|
|
</section>
|
|
)}
|
|
</div>
|
|
</main>
|
|
)
|
|
} |