import React, { useEffect } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; import BaseButton from '../components/BaseButton'; import LayoutGuest from '../layouts/Guest'; import { getPageTitle } from '../config'; import * as icon from '@mdi/js'; import BaseIcon from '../components/BaseIcon'; import { useAppDispatch, useAppSelector } from '../stores/hooks'; import { fetch as fetchCourses } from '../stores/courses/coursesSlice'; export default function Starter() { const dispatch = useAppDispatch(); const { courses, loading } = useAppSelector((state) => state.courses); useEffect(() => { dispatch(fetchCourses({ query: '?published=true&limit=6' })); }, [dispatch]); const title = 'EduFlow LMS'; const features = [ { title: 'Expert-Led Courses', description: 'Learn from industry professionals with real-world experience.', icon: icon.mdiSchool, }, { title: 'Flexible Learning', description: 'Study at your own pace, anytime and anywhere in the world.', icon: icon.mdiClockFast, }, { title: 'Progress Tracking', description: 'Monitor your growth with detailed analytics and assessments.', icon: icon.mdiChartLine, }, ]; const getThumbnail = (course: any) => { if (course.thumbnail && course.thumbnail.length > 0) { return `/api/file/download?privateUrl=${course.thumbnail[0].privateUrl}`; } return 'https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=600'; }; return (
{getPageTitle('Home')} {/* Hero Section */}

Unlock Your Potential with EduFlow

The most intuitive platform for instructors to create and students to excel. Start your journey today.

Learning
{/* Features Section */}

Why Choose EduFlow?

{features.map((feature, idx) => (

{feature.title}

{feature.description}

))}
{/* Course Catalog Preview */}

Popular Courses

Join thousands of students learning these top-rated skills.

{loading ? (
) : (
{courses && courses.length > 0 ? ( courses.map((course: any, idx: number) => (
{course.title} {course.category && (
{course.category.name}
)}
{course.instructor ? `${course.instructor.firstName}${course.instructor.lastName ? " " + course.instructor.lastName : ""}` : 'Instructor'}

{course.title}

{course.level}
{course.price ? `$${course.price}` : 'Free'}
)) ) : (
No courses found. Check back later!
)}
)}
{/* Footer */}
); } Starter.getLayout = function getLayout(page: ReactElement) { return {page}; };