Pending course, rest ready for launch

components/courses/CourseCatalogIntro.tsx

@@ -0,0 +1,33 @@
+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>
+  );
+}