Files
engel/app/[locale]/courses/page.js
2026-04-21 07:37:18 +03:30

49 lines
2.0 KiB
JavaScript

import Link from "next/link";
import { notFound } from "next/navigation";
import { getLandingContent, isSupportedLocale, locales } from "@/lib/site-data";
export function generateStaticParams() {
return locales.map((locale) => ({ locale }));
}
export default async function CoursesPage({ params }) {
const { locale } = await params;
if (!isSupportedLocale(locale)) {
notFound();
}
const { courses, navigation, shared } = getLandingContent(locale);
return (
<main className="min-h-screen bg-brand-light text-gray-800">
<section className="border-b border-gray-200 bg-white">
<div className="mx-auto max-w-6xl px-6 py-16">
<Link href={`/${locale}`} className="text-sm font-semibold text-brand-purple">
{navigation.homeLabel}
</Link>
<h1 className="mt-4 text-4xl font-bold text-brand-dark">{navigation.courses}</h1>
<p className="mt-3 max-w-2xl text-gray-600">{shared.coursesIntro}</p>
</div>
</section>
<section className="mx-auto grid max-w-6xl gap-8 px-6 py-16 md:grid-cols-3">
{courses.map((course) => (
<article key={course.slug} className="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-gray-100">
<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-purple/10 text-2xl font-bold text-brand-purple">
{course.level}
</div>
<h2 className="text-2xl font-bold">{course.title}</h2>
<p className="mt-3 text-gray-600">{course.summary}</p>
<div className="mt-6 text-2xl font-black text-brand-dark">
{course.price} <span className="text-sm font-normal text-gray-400">/ {shared.perLevel}</span>
</div>
<Link href={`/${locale}/courses/${course.slug}`} className="mt-6 inline-flex rounded-xl border-2 border-brand-dark px-5 py-3 font-bold transition hover:bg-brand-dark hover:text-white">
{shared.viewDetails}
</Link>
</article>
))}
</section>
</main>
);
}