243 lines
12 KiB
TypeScript
243 lines
12 KiB
TypeScript
import {
|
|
mdiBookOpenPageVariant,
|
|
mdiChartTimelineVariant,
|
|
mdiCheckCircleOutline,
|
|
mdiNotebookOutline,
|
|
mdiSchoolOutline,
|
|
} from '@mdi/js';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import BaseButton from '../components/BaseButton';
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import CardBox from '../components/CardBox';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
|
|
const featureCards = [
|
|
{
|
|
title: 'Courses that feel structured',
|
|
text: 'Publish polished learning paths with clear descriptions, featured content, and intentional lesson order.',
|
|
icon: mdiBookOpenPageVariant,
|
|
},
|
|
{
|
|
title: 'Lessons made for momentum',
|
|
text: 'Deliver text and markdown lessons that are fast to author, easy to read, and simple to extend later.',
|
|
icon: mdiNotebookOutline,
|
|
},
|
|
{
|
|
title: 'Progress learners can feel',
|
|
text: 'Enrollment, lesson completion, and course progress work together so every session shows visible movement.',
|
|
icon: mdiCheckCircleOutline,
|
|
},
|
|
];
|
|
|
|
const workflowSteps = [
|
|
{
|
|
eyebrow: 'Instructor flow',
|
|
title: 'Create a course',
|
|
text: 'Set up the course shell, assign an instructor, add a concise description, then publish when it is ready.',
|
|
},
|
|
{
|
|
eyebrow: 'Student flow',
|
|
title: 'Enroll in one click',
|
|
text: 'Learners discover published courses, join instantly, and open the lesson reader without jumping between pages.',
|
|
},
|
|
{
|
|
eyebrow: 'Operations view',
|
|
title: 'Track learning progress',
|
|
text: 'Admins and instructors can review enrollments while students see real progress grow lesson by lesson.',
|
|
},
|
|
];
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Instructor Student LMS')}</title>
|
|
<meta
|
|
name='description'
|
|
content='A modern LMS for course publishing, lesson delivery, enrollment, and progress tracking.'
|
|
/>
|
|
</Head>
|
|
|
|
<div className='min-h-screen bg-[radial-gradient(circle_at_top,_rgba(37,99,235,0.18),_transparent_35%),linear-gradient(180deg,#F8FAFC_0%,#EEF2FF_42%,#FFFFFF_100%)] text-slate-900'>
|
|
<div className='mx-auto max-w-7xl px-6 py-6 lg:px-10'>
|
|
<div className='flex flex-wrap items-center justify-between gap-4 rounded-full border border-white/80 bg-white/80 px-5 py-3 shadow-sm backdrop-blur'>
|
|
<div>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.24em] text-[#2563EB]'>
|
|
Instructor Student LMS
|
|
</p>
|
|
<p className='mt-1 text-sm text-slate-500'>A focused LMS for instructors, students, and learning operations.</p>
|
|
</div>
|
|
<div className='flex flex-wrap gap-3'>
|
|
<BaseButton href='/login' color='info' label='Login' />
|
|
<BaseButton href='/dashboard' color='info' outline label='Admin interface' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main className='mx-auto max-w-7xl px-6 pb-16 lg:px-10'>
|
|
<section className='grid gap-10 py-10 lg:grid-cols-[1.1fr_0.9fr] lg:py-16'>
|
|
<div className='space-y-8'>
|
|
<div className='space-y-5'>
|
|
<span className='inline-flex items-center rounded-full border border-[#BFDBFE] bg-white px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-[#1D4ED8] shadow-sm'>
|
|
Initial MVP slice live
|
|
</span>
|
|
<div className='space-y-4'>
|
|
<h1 className='max-w-3xl text-5xl font-semibold tracking-tight text-slate-950 md:text-6xl'>
|
|
A clean LMS for publishing courses and helping students finish what they start.
|
|
</h1>
|
|
<p className='max-w-2xl text-lg leading-8 text-slate-600'>
|
|
Built around the core journey that matters first: instructors publish courses and lessons,
|
|
students enroll, read, and watch progress update in real time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='flex flex-wrap gap-3'>
|
|
<BaseButton href='/learning-hub' color='info' label='Open learning hub' />
|
|
<BaseButton href='/login' color='info' outline label='Sign in' />
|
|
<BaseButton href='/dashboard' color='whiteDark' label='Go to admin' />
|
|
</div>
|
|
|
|
<div className='grid gap-4 md:grid-cols-3'>
|
|
<div className='rounded-3xl border border-slate-200 bg-white p-5 shadow-sm'>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-slate-500'>Roles</p>
|
|
<p className='mt-3 text-2xl font-semibold text-slate-950'>3</p>
|
|
<p className='mt-2 text-sm leading-6 text-slate-500'>Admin, Instructor, and Learner workflows are all accounted for.</p>
|
|
</div>
|
|
<div className='rounded-3xl border border-slate-200 bg-white p-5 shadow-sm'>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-slate-500'>Lesson format</p>
|
|
<p className='mt-3 text-2xl font-semibold text-slate-950'>Text / Markdown</p>
|
|
<p className='mt-2 text-sm leading-6 text-slate-500'>Fast authoring now, easy to extend later with media attachments.</p>
|
|
</div>
|
|
<div className='rounded-3xl border border-slate-200 bg-white p-5 shadow-sm'>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-slate-500'>What is new</p>
|
|
<p className='mt-3 text-2xl font-semibold text-slate-950'>Learning Hub</p>
|
|
<p className='mt-2 text-sm leading-6 text-slate-500'>Enroll, continue lessons, and see progress move without raw CRUD screens.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<CardBox className='overflow-hidden border border-slate-200 bg-slate-950 text-white shadow-2xl'>
|
|
<div className='rounded-3xl bg-[radial-gradient(circle_at_top_right,_rgba(59,130,246,0.45),_transparent_25%),radial-gradient(circle_at_bottom_left,_rgba(20,184,166,0.35),_transparent_28%),linear-gradient(180deg,#0F172A_0%,#111827_100%)] p-8'>
|
|
<div className='flex items-center justify-between'>
|
|
<div>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-sky-200'>Thin slice</p>
|
|
<h2 className='mt-2 text-3xl font-semibold'>Student journey</h2>
|
|
</div>
|
|
<div className='rounded-2xl bg-white/10 p-4 text-sky-100'>
|
|
<BaseIcon path={mdiSchoolOutline} size={30} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mt-8 space-y-4'>
|
|
<div className='rounded-2xl border border-white/10 bg-white/5 p-4'>
|
|
<p className='text-sm font-semibold'>1. Browse published courses</p>
|
|
<p className='mt-2 text-sm leading-6 text-slate-300'>Students see a focused catalog instead of generic tables.</p>
|
|
</div>
|
|
<div className='rounded-2xl border border-white/10 bg-white/5 p-4'>
|
|
<p className='text-sm font-semibold'>2. Enroll instantly</p>
|
|
<p className='mt-2 text-sm leading-6 text-slate-300'>One click creates the enrollment and opens the lesson path.</p>
|
|
</div>
|
|
<div className='rounded-2xl border border-white/10 bg-white/5 p-4'>
|
|
<p className='text-sm font-semibold'>3. Complete lessons</p>
|
|
<p className='mt-2 text-sm leading-6 text-slate-300'>Completion updates course progress automatically for a real sense of momentum.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
</section>
|
|
|
|
<section className='grid gap-5 py-6 md:grid-cols-3'>
|
|
{featureCards.map((card) => (
|
|
<CardBox key={card.title} className='border border-slate-200 shadow-sm'>
|
|
<div className='space-y-4'>
|
|
<div className='inline-flex rounded-2xl bg-[#EEF2FF] p-3 text-[#3730A3]'>
|
|
<BaseIcon path={card.icon} size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className='text-xl font-semibold text-slate-950'>{card.title}</h3>
|
|
<p className='mt-2 text-sm leading-7 text-slate-500'>{card.text}</p>
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
))}
|
|
</section>
|
|
|
|
<section className='py-14'>
|
|
<div className='mb-8 max-w-3xl'>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#2563EB]'>Workflow first</p>
|
|
<h2 className='mt-3 text-3xl font-semibold tracking-tight text-slate-950 md:text-4xl'>
|
|
The first delivery is an end-to-end loop, not just a prettier admin.
|
|
</h2>
|
|
<p className='mt-3 text-base leading-8 text-slate-600'>
|
|
Core CRUD already exists. This iteration turns that foundation into a usable product slice that both students and instructors can understand immediately.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='grid gap-5 lg:grid-cols-3'>
|
|
{workflowSteps.map((step, index) => (
|
|
<CardBox key={step.title} className='border border-slate-200 shadow-sm'>
|
|
<div className='space-y-4'>
|
|
<div className='flex items-center justify-between'>
|
|
<span className='text-xs font-semibold uppercase tracking-[0.2em] text-slate-500'>
|
|
{step.eyebrow}
|
|
</span>
|
|
<span className='rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700'>
|
|
0{index + 1}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h3 className='text-xl font-semibold text-slate-950'>{step.title}</h3>
|
|
<p className='mt-2 text-sm leading-7 text-slate-500'>{step.text}</p>
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className='rounded-[2rem] border border-slate-200 bg-white px-6 py-8 shadow-sm lg:px-10'>
|
|
<div className='flex flex-wrap items-center justify-between gap-5'>
|
|
<div className='max-w-2xl'>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#2563EB]'>Ready to explore</p>
|
|
<h2 className='mt-3 text-3xl font-semibold tracking-tight text-slate-950'>
|
|
Jump into the learner workflow or open the admin interface.
|
|
</h2>
|
|
<p className='mt-3 text-base leading-8 text-slate-600'>
|
|
The app now has a public-facing entry, a direct login path, and a branded route into the new learning hub.
|
|
</p>
|
|
</div>
|
|
<div className='flex flex-wrap gap-3'>
|
|
<BaseButton href='/learning-hub' color='info' label='Launch learning hub' />
|
|
<BaseButton href='/dashboard' color='info' outline label='Admin interface' />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className='border-t border-white/70 bg-white/70 backdrop-blur'>
|
|
<div className='mx-auto flex max-w-7xl flex-col gap-4 px-6 py-6 text-sm text-slate-500 md:flex-row md:items-center md:justify-between lg:px-10'>
|
|
<p>© 2026 Instructor Student LMS. Built for modern course publishing and learner progress.</p>
|
|
<div className='flex gap-4'>
|
|
<Link className='hover:text-slate-900' href='/privacy-policy'>
|
|
Privacy Policy
|
|
</Link>
|
|
<Link className='hover:text-slate-900' href='/login'>
|
|
Login
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
HomePage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|