Files
ACVE/components/courses/CourseCatalogIntro.tsx
2026-03-15 13:52:11 +00:00

34 lines
1.7 KiB
TypeScript

type CourseCatalogIntroProps = {
totalCourses: number;
totalLessons: number;
instructorCount: number;
};
export default function CourseCatalogIntro({ totalCourses, totalLessons, instructorCount }: CourseCatalogIntroProps) {
return (
<section className="acve-panel acve-section-base">
<p className="acve-pill mb-4 w-fit text-sm">Catálogo</p>
<h1 className="acve-heading text-3xl leading-tight md:text-4xl">Formación Académica</h1>
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-muted-foreground md:text-base">
Programas de inglés jurídico estructurados por etapa académica para acompañar un progreso sólido, práctico y
alineado con escenarios profesionales internacionales.
</p>
<div className="mt-5 grid gap-3 sm:grid-cols-3">
<article className="rounded-2xl border border-border/80 bg-card/70 px-4 py-3">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Programas activos</p>
<p className="mt-1 text-2xl font-semibold text-foreground">{totalCourses}</p>
</article>
<article className="rounded-2xl border border-border/80 bg-card/70 px-4 py-3">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Lecciones publicadas</p>
<p className="mt-1 text-2xl font-semibold text-foreground">{totalLessons}</p>
</article>
<article className="rounded-2xl border border-border/80 bg-card/70 px-4 py-3">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Equipo docente</p>
<p className="mt-1 text-2xl font-semibold text-foreground">{instructorCount}</p>
</article>
</div>
</section>
);
}