Pending course, rest ready for launch
This commit is contained in:
Marcelo
@@ -33,34 +33,40 @@ export default function CaseStudyDetailPage() {
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-slate-500">{caseStudy.citation} ({caseStudy.year})</p>
|
||||
<h1 className="mt-2 text-4xl font-semibold leading-tight text-[#1f2b3a] md:text-5xl">{caseStudy.title}</h1>
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">Topic: {caseStudy.topic}</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">
|
||||
Categoria: {caseStudy.category}
|
||||
</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">
|
||||
Dificultad: {caseStudy.difficulty}
|
||||
</span>
|
||||
<span className={`rounded-full px-3 py-1 text-xs font-semibold ${levelBadgeClass(caseStudy.level)}`}>Level: {caseStudy.level}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-[1.35fr_0.8fr]">
|
||||
<div className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-[#232b39]">Case Summary</h2>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{caseStudy.summary}</p>
|
||||
<h2 className="text-2xl font-semibold text-[#232b39]">Resumen del caso</h2>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{caseStudy.summaryEs}</p>
|
||||
|
||||
<h3 className="mt-5 text-lg font-semibold text-[#232b39]">Reading Guide (Placeholder)</h3>
|
||||
<ul className="mt-2 space-y-2 text-sm text-slate-700">
|
||||
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">1. Identify the legal issue and the jurisdiction context.</li>
|
||||
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">2. Highlight the key reasoning applied by the court.</li>
|
||||
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">3. Extract practical implications for drafting or litigation.</li>
|
||||
</ul>
|
||||
<h3 className="mt-5 text-lg font-semibold text-[#232b39]">Resultado Juridico</h3>
|
||||
<p className="mt-2 rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm leading-relaxed text-slate-700">
|
||||
{caseStudy.legalOutcomeEs}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<aside className="acve-panel p-5">
|
||||
<h2 className="text-lg font-semibold text-[#232b39]">Key Legal Terms</h2>
|
||||
<h2 className="text-lg font-semibold text-[#232b39]">Terminos Juridicos Fundamentales</h2>
|
||||
<div className="mt-3 space-y-2">
|
||||
{caseStudy.keyTerms.map((term, index) => (
|
||||
<div key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-3">
|
||||
<p className="text-base font-semibold text-brand">{term}</p>
|
||||
<p className="mt-1 text-sm text-slate-600">Legal explanation block {index + 1}</p>
|
||||
{caseStudy.keyTerms.map((term) => (
|
||||
<div key={term.term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-3">
|
||||
<p className="text-base font-semibold text-brand">{term.term}</p>
|
||||
<p className="mt-1 text-sm text-slate-600">{term.definitionEs}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-4 inline-flex rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
|
||||
{caseStudy.quizPrompt}
|
||||
</p>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -53,7 +53,8 @@ export default function CaseStudiesPage() {
|
||||
[{caseStudy.year}] {caseStudy.citation}
|
||||
</p>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs">
|
||||
<span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.topic}</span>
|
||||
<span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.category}</span>
|
||||
<span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.difficulty}</span>
|
||||
<span className={`rounded-full px-2 py-1 font-semibold ${levelBadgeClass(caseStudy.level)}`}>{caseStudy.level}</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -72,27 +73,35 @@ export default function CaseStudiesPage() {
|
||||
</div>
|
||||
<div className="space-y-2 text-right text-xs">
|
||||
<p className={`rounded-full px-3 py-1 font-semibold ${levelBadgeClass(activeCase.level)}`}>{activeCase.level}</p>
|
||||
<p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.topic}</p>
|
||||
<p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.category}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="border-t border-slate-200 pt-4">
|
||||
<h3 className="text-2xl font-semibold text-[#232b39]">Case Summary</h3>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{activeCase.summary}</p>
|
||||
<h3 className="text-2xl font-semibold text-[#232b39]">Resumen del caso</h3>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{activeCase.summaryEs}</p>
|
||||
</section>
|
||||
|
||||
<section className="mt-5">
|
||||
<h3 className="mb-3 text-2xl font-semibold text-[#232b39]">Key Legal Terms Explained</h3>
|
||||
<h3 className="mb-3 text-2xl font-semibold text-[#232b39]">Terminos Juridicos Fundamentales</h3>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{activeCase.keyTerms.map((term) => (
|
||||
<div key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-4">
|
||||
<p className="text-lg font-semibold text-brand">{term}</p>
|
||||
<p className="mt-1 text-sm text-slate-600">Detailed explanation will expand in phase 2 content.</p>
|
||||
<div key={term.term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-4">
|
||||
<p className="text-lg font-semibold text-brand">{term.term}</p>
|
||||
<p className="mt-1 text-sm text-slate-600">{term.definitionEs}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-5 rounded-xl border border-slate-200 bg-slate-50 p-4">
|
||||
<h3 className="text-xl font-semibold text-[#232b39]">Resultado Juridico</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-slate-700">{activeCase.legalOutcomeEs}</p>
|
||||
<p className="mt-3 inline-flex rounded-full bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-600">
|
||||
{activeCase.quizPrompt}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Link className="acve-button-secondary mt-6 inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href={`/case-studies/${activeCase.slug}`}>
|
||||
Open detail page
|
||||
</Link>
|
||||
|
||||
87
app/(public)/comunidad/page.tsx
Normal file
87
app/(public)/comunidad/page.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import Link from "next/link";
|
||||
|
||||
type CommunityPhoto = {
|
||||
id: string;
|
||||
src: string;
|
||||
alt: string;
|
||||
caption: string;
|
||||
span: string;
|
||||
};
|
||||
|
||||
const communityPhotos: CommunityPhoto[] = [
|
||||
{
|
||||
id: "community-1",
|
||||
src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Equipo colaborando en una mesa de trabajo",
|
||||
caption: "Taller colaborativo",
|
||||
span: "md:col-span-2 md:row-span-2",
|
||||
},
|
||||
{
|
||||
id: "community-2",
|
||||
src: "https://images.unsplash.com/photo-1528901166007-3784c7dd3653?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Grupo de estudiantes revisando material",
|
||||
caption: "Cohorte activa",
|
||||
span: "md:col-span-2",
|
||||
},
|
||||
{
|
||||
id: "community-3",
|
||||
src: "https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Conversación profesional durante evento",
|
||||
caption: "Networking legal",
|
||||
span: "",
|
||||
},
|
||||
{
|
||||
id: "community-4",
|
||||
src: "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Sesión en auditorio con ponentes",
|
||||
caption: "Masterclass",
|
||||
span: "",
|
||||
},
|
||||
{
|
||||
id: "community-5",
|
||||
src: "https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Personas participando en una dinámica",
|
||||
caption: "Práctica guiada",
|
||||
span: "md:col-span-2",
|
||||
},
|
||||
{
|
||||
id: "community-6",
|
||||
src: "https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Estudiantes en jornada formativa",
|
||||
caption: "Comunidad ACVE",
|
||||
span: "",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ComunidadPage() {
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Comunidad ACVE</p>
|
||||
<h1 className="acve-heading text-4xl md:text-5xl">Red de práctica y colaboración</h1>
|
||||
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Collage visual temporal con fotos de referencia para representar talleres, networking y actividades colaborativas.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 grid auto-rows-[150px] grid-cols-2 gap-3 md:auto-rows-[170px] md:grid-cols-4">
|
||||
{communityPhotos.map((photo) => (
|
||||
<figure
|
||||
key={photo.id}
|
||||
className={`group relative overflow-hidden rounded-2xl border border-border/80 bg-card shadow-sm ${photo.span}`}
|
||||
>
|
||||
<img alt={photo.alt} className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]" loading="lazy" src={photo.src} />
|
||||
<figcaption className="absolute inset-x-2 bottom-2 rounded-lg bg-black/55 px-2 py-1 text-xs font-semibold text-white">
|
||||
{photo.caption}
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-5 text-sm font-semibold text-primary">Estas imágenes son temporales y se podrán reemplazar por contenido oficial.</p>
|
||||
<Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
|
||||
Regresar al inicio
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
107
app/(public)/courses/[slug]/learn/actions.ts
Normal file
107
app/(public)/courses/[slug]/learn/actions.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
"use server";
|
||||
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { issueCertificateIfEligible } from "@/lib/certificates";
|
||||
import { refreshStudyRecommendations } from "@/lib/recommendations";
|
||||
|
||||
type ToggleLessonCompleteInput = {
|
||||
courseSlug: string;
|
||||
lessonId: string;
|
||||
};
|
||||
|
||||
export async function toggleLessonComplete({ courseSlug, lessonId }: ToggleLessonCompleteInput) {
|
||||
const user = await requireUser();
|
||||
|
||||
if (!user?.id) {
|
||||
return { success: false, error: "Unauthorized" };
|
||||
}
|
||||
|
||||
const lesson = await db.lesson.findUnique({
|
||||
where: { id: lessonId },
|
||||
select: {
|
||||
id: true,
|
||||
module: {
|
||||
select: {
|
||||
courseId: true,
|
||||
course: {
|
||||
select: {
|
||||
slug: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!lesson || lesson.module.course.slug !== courseSlug) {
|
||||
return { success: false, error: "Lesson not found" };
|
||||
}
|
||||
|
||||
const enrollment = await db.enrollment.findUnique({
|
||||
where: {
|
||||
userId_courseId: {
|
||||
userId: user.id,
|
||||
courseId: lesson.module.courseId,
|
||||
},
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
if (!enrollment) {
|
||||
return { success: false, error: "Not enrolled in this course" };
|
||||
}
|
||||
|
||||
const existingProgress = await db.userProgress.findUnique({
|
||||
where: {
|
||||
userId_lessonId: {
|
||||
userId: user.id,
|
||||
lessonId,
|
||||
},
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
isCompleted: true,
|
||||
},
|
||||
});
|
||||
|
||||
const nextCompleted = !existingProgress?.isCompleted;
|
||||
|
||||
if (existingProgress) {
|
||||
await db.userProgress.update({
|
||||
where: { id: existingProgress.id },
|
||||
data: {
|
||||
isCompleted: nextCompleted,
|
||||
finishedAt: nextCompleted ? new Date() : null,
|
||||
lastPlayedAt: new Date(),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
await db.userProgress.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
lessonId,
|
||||
isCompleted: true,
|
||||
finishedAt: new Date(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const certificateResult = nextCompleted
|
||||
? await issueCertificateIfEligible(user.id, lesson.module.courseId)
|
||||
: { certificateId: null, certificateNumber: null, newlyIssued: false };
|
||||
|
||||
revalidatePath(`/courses/${courseSlug}/learn`);
|
||||
revalidatePath("/my-courses");
|
||||
revalidatePath("/profile");
|
||||
await refreshStudyRecommendations(user.id);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
isCompleted: nextCompleted,
|
||||
certificateId: certificateResult.certificateId,
|
||||
certificateNumber: certificateResult.certificateNumber,
|
||||
newlyIssuedCertificate: certificateResult.newlyIssued,
|
||||
};
|
||||
}
|
||||
192
app/(public)/courses/[slug]/learn/page.tsx
Normal file
192
app/(public)/courses/[slug]/learn/page.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import StudentClassroomClient from "@/components/courses/StudentClassroomClient";
|
||||
import { parseLessonDescriptionMeta } from "@/lib/courses/lessonContent";
|
||||
|
||||
type LessonSelect = {
|
||||
id: string;
|
||||
title: unknown;
|
||||
description: unknown;
|
||||
videoUrl: string | null;
|
||||
youtubeUrl: string | null;
|
||||
estimatedDuration: number;
|
||||
isFreePreview: boolean;
|
||||
};
|
||||
type ModuleSelect = { id: string; title: unknown; lessons: LessonSelect[] };
|
||||
type CourseWithModules = { id: string; slug: string; title: unknown; price: unknown; modules: ModuleSelect[] };
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ lesson?: string }>;
|
||||
};
|
||||
|
||||
export default async function CourseLearnPage({ params, searchParams }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const { lesson: requestedLessonId } = await searchParams;
|
||||
|
||||
const user = await requireUser();
|
||||
|
||||
const courseSelect = {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
price: true,
|
||||
modules: {
|
||||
orderBy: { orderIndex: "asc" as const },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
lessons: {
|
||||
orderBy: { orderIndex: "asc" as const },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
videoUrl: true,
|
||||
youtubeUrl: true,
|
||||
estimatedDuration: true,
|
||||
isFreePreview: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const course = (await db.course.findUnique({
|
||||
where: { slug },
|
||||
select: courseSelect,
|
||||
})) as CourseWithModules | null;
|
||||
|
||||
if (!course) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let enrollment: { id: string } | null = null;
|
||||
let isEnrolled: boolean;
|
||||
|
||||
if (!user?.id) {
|
||||
// Anonymous: no enrollment, preview-only access
|
||||
const allLessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({ id: l.id, isFreePreview: l.isFreePreview }))
|
||||
);
|
||||
const firstPreviewLesson = allLessons.find((l) => l.isFreePreview);
|
||||
if (!firstPreviewLesson) {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
isEnrolled = false;
|
||||
} else {
|
||||
enrollment = await db.enrollment.findUnique({
|
||||
where: {
|
||||
userId_courseId: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
},
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
const isFree = Number(course.price) === 0;
|
||||
|
||||
if (!enrollment) {
|
||||
if (isFree) {
|
||||
enrollment = await db.enrollment.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
amountPaid: 0,
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
isEnrolled = true;
|
||||
} else {
|
||||
// Paid course, no enrollment: allow only if there are preview lessons
|
||||
const allLessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({ id: l.id, isFreePreview: l.isFreePreview }))
|
||||
);
|
||||
const firstPreviewLesson = allLessons.find((l) => l.isFreePreview);
|
||||
if (!firstPreviewLesson) {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
isEnrolled = false;
|
||||
}
|
||||
} else {
|
||||
isEnrolled = true;
|
||||
}
|
||||
}
|
||||
|
||||
const completedProgress =
|
||||
isEnrolled && user
|
||||
? await db.userProgress.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
isCompleted: true,
|
||||
lesson: {
|
||||
module: { courseId: course.id },
|
||||
},
|
||||
},
|
||||
select: { lessonId: true },
|
||||
})
|
||||
: [];
|
||||
|
||||
const modules = course.modules.map((module) => ({
|
||||
id: module.id,
|
||||
title: getText(module.title) || "Untitled module",
|
||||
lessons: module.lessons.map((lesson) => {
|
||||
const lessonMeta = parseLessonDescriptionMeta(lesson.description);
|
||||
return {
|
||||
id: lesson.id,
|
||||
title: getText(lesson.title) || "Untitled lesson",
|
||||
description: lessonMeta.text,
|
||||
contentType: lessonMeta.contentType,
|
||||
materialUrl: lessonMeta.materialUrl,
|
||||
videoUrl: lesson.videoUrl,
|
||||
youtubeUrl: lesson.youtubeUrl,
|
||||
estimatedDuration: lesson.estimatedDuration,
|
||||
isFreePreview: lesson.isFreePreview,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
const flattenedLessons = modules.flatMap((module) => module.lessons);
|
||||
const flattenedLessonIds = flattenedLessons.map((l) => l.id);
|
||||
|
||||
let initialSelectedLessonId: string;
|
||||
if (isEnrolled) {
|
||||
initialSelectedLessonId =
|
||||
requestedLessonId && flattenedLessonIds.includes(requestedLessonId)
|
||||
? requestedLessonId
|
||||
: flattenedLessonIds[0] ?? "";
|
||||
} else {
|
||||
const firstPreview = flattenedLessons.find((l) => l.isFreePreview);
|
||||
const requestedLesson = requestedLessonId
|
||||
? flattenedLessons.find((l) => l.id === requestedLessonId)
|
||||
: null;
|
||||
if (requestedLesson?.isFreePreview) {
|
||||
initialSelectedLessonId = requestedLessonId!;
|
||||
} else {
|
||||
initialSelectedLessonId = firstPreview?.id ?? "";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<StudentClassroomClient
|
||||
courseSlug={course.slug}
|
||||
courseTitle={getText(course.title) || "Untitled course"}
|
||||
modules={modules}
|
||||
initialSelectedLessonId={initialSelectedLessonId}
|
||||
initialCompletedLessonIds={completedProgress.map((p) => p.lessonId)}
|
||||
isEnrolled={isEnrolled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,184 +1,169 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import CourseDetailHeader from "@/components/courses/CourseDetailHeader";
|
||||
import CourseProgressCard from "@/components/courses/CourseProgressCard";
|
||||
import ProgramContentList from "@/components/courses/ProgramContentList";
|
||||
import { getCourseDetailViewModel } from "@/lib/courses/publicCourses";
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
const levelLabel = (level: string) => {
|
||||
if (level === "BEGINNER") return "Beginner";
|
||||
if (level === "INTERMEDIATE") return "Intermediate";
|
||||
if (level === "ADVANCED") return "Advanced";
|
||||
return level;
|
||||
};
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
};
|
||||
|
||||
type DetailActionState = {
|
||||
primaryAction: {
|
||||
label: string;
|
||||
href?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
secondaryAction?: {
|
||||
label: string;
|
||||
href?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
helperText?: string;
|
||||
};
|
||||
|
||||
function buildActionState(args: {
|
||||
slug: string;
|
||||
isAuthenticated: boolean;
|
||||
isEnrolled: boolean;
|
||||
availabilityState: "published" | "upcoming" | "draft";
|
||||
progressPercent: number;
|
||||
firstPreviewLessonId: string | null;
|
||||
price: number;
|
||||
}): DetailActionState {
|
||||
const learnUrl = `/courses/${args.slug}/learn`;
|
||||
const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(`/courses/${args.slug}`)}`;
|
||||
const previewUrl = args.firstPreviewLessonId ? `${learnUrl}?lesson=${args.firstPreviewLessonId}` : undefined;
|
||||
|
||||
if (args.availabilityState !== "published") {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Próximamente",
|
||||
disabled: true,
|
||||
},
|
||||
helperText: "Este programa se encuentra en preparación editorial y estará habilitado en próximas publicaciones.",
|
||||
};
|
||||
}
|
||||
|
||||
if (args.isAuthenticated && args.isEnrolled) {
|
||||
const label = args.progressPercent >= 100 ? "Revisar programa" : args.progressPercent > 0 ? "Continuar" : "Comenzar";
|
||||
return {
|
||||
primaryAction: {
|
||||
label,
|
||||
href: learnUrl,
|
||||
},
|
||||
helperText:
|
||||
args.progressPercent > 0
|
||||
? "Tu avance se conserva automáticamente. Puedes continuar desde la lección más reciente."
|
||||
: "Inicia el recorrido académico desde el primer módulo.",
|
||||
};
|
||||
}
|
||||
|
||||
if (args.isAuthenticated) {
|
||||
if (args.price <= 0) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Comenzar",
|
||||
href: learnUrl,
|
||||
},
|
||||
helperText: "Programa con acceso abierto para iniciar de inmediato.",
|
||||
};
|
||||
}
|
||||
|
||||
if (previewUrl) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Ver clase de muestra",
|
||||
href: previewUrl,
|
||||
},
|
||||
helperText: "El contenido completo está disponible para estudiantes inscritos en el programa.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Inscripción próximamente",
|
||||
disabled: true,
|
||||
},
|
||||
helperText: "La inscripción completa para este programa estará disponible en breve.",
|
||||
};
|
||||
}
|
||||
|
||||
if (previewUrl) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Ver clase de muestra",
|
||||
href: previewUrl,
|
||||
},
|
||||
secondaryAction: {
|
||||
label: "Iniciar sesión",
|
||||
href: loginUrl,
|
||||
},
|
||||
helperText: "Puedes revisar una vista previa o iniciar sesión para gestionar tu itinerario académico.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Iniciar sesión para comenzar",
|
||||
href: loginUrl,
|
||||
},
|
||||
helperText: "Accede con tu cuenta para comenzar este programa y registrar tu progreso.",
|
||||
};
|
||||
}
|
||||
|
||||
export default async function CourseDetailPage({ params }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const user = await requireUser().catch(() => null);
|
||||
|
||||
const course = await db.course.findFirst({
|
||||
where: { slug, status: "PUBLISHED" },
|
||||
include: {
|
||||
author: { select: { fullName: true } },
|
||||
modules: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
include: {
|
||||
lessons: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
select: { id: true, title: true, estimatedDuration: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
_count: { select: { enrollments: true } },
|
||||
},
|
||||
});
|
||||
|
||||
const course = await getCourseDetailViewModel(slug, user?.id ?? null);
|
||||
if (!course) notFound();
|
||||
|
||||
const user = await requireUser();
|
||||
const isAuthed = Boolean(user?.id);
|
||||
|
||||
const title = getText(course.title) || "Untitled course";
|
||||
const summary = getText(course.description) || "";
|
||||
|
||||
const lessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({
|
||||
id: l.id,
|
||||
title: getText(l.title) || "Untitled lesson",
|
||||
minutes: Math.ceil((l.estimatedDuration ?? 0) / 60),
|
||||
})),
|
||||
);
|
||||
const lessonsCount = lessons.length;
|
||||
|
||||
const redirect = `/courses/${course.slug}/learn`;
|
||||
const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;
|
||||
|
||||
const learningOutcomes = [
|
||||
"Understand key legal vocabulary in context",
|
||||
"Apply contract and case analysis patterns",
|
||||
"Improve professional written legal communication",
|
||||
];
|
||||
const actions = buildActionState({
|
||||
slug: course.slug,
|
||||
isAuthenticated: Boolean(user?.id),
|
||||
isEnrolled: course.isEnrolled,
|
||||
availabilityState: course.availabilityState,
|
||||
progressPercent: course.progressPercent,
|
||||
firstPreviewLessonId: course.firstPreviewLessonId,
|
||||
price: course.price,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel overflow-hidden p-0">
|
||||
<div className="grid gap-0 lg:grid-cols-[1.6fr_0.9fr]">
|
||||
<div className="acve-section-base">
|
||||
<Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand" href="/courses">
|
||||
<span>{"<-"}</span>
|
||||
Back to Courses
|
||||
</Link>
|
||||
<section className="grid items-start gap-5 xl:grid-cols-[1.55fr_0.95fr]">
|
||||
<CourseDetailHeader
|
||||
availabilityLabel={course.availabilityLabel}
|
||||
availabilityState={course.availabilityState}
|
||||
description={course.longDescription}
|
||||
durationLabel={course.durationLabel}
|
||||
instructor={course.instructor}
|
||||
lessonCount={course.lessonCount}
|
||||
proficiencyLabel={course.proficiencyLabel}
|
||||
stageLabel={course.stage.levelLabel}
|
||||
studentsCount={course.studentsCount}
|
||||
thumbnailUrl={course.thumbnailUrl}
|
||||
title={course.title}
|
||||
/>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-600">
|
||||
<span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">
|
||||
{levelLabel(course.level)}
|
||||
</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 font-semibold">
|
||||
{course.status.toLowerCase()}
|
||||
</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1">
|
||||
{lessonsCount} lessons
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="mt-4 text-4xl font-semibold leading-tight text-[#1f2a3a] md:text-5xl">{title}</h1>
|
||||
<p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">{summary}</p>
|
||||
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Students</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">
|
||||
{course._count.enrollments.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Lessons</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">{lessonsCount}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructor</p>
|
||||
<p className="mt-1 text-lg font-semibold text-slate-900">
|
||||
{course.author.fullName || "ACVE Team"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="border-t border-slate-200 bg-slate-50/80 p-6 lg:border-l lg:border-t-0">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500">What you will learn</h2>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{learningOutcomes.map((item) => (
|
||||
<li key={item} className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<CourseProgressCard
|
||||
availabilityLabel={course.availabilityLabel}
|
||||
completedLessons={course.completedLessons}
|
||||
durationLabel={course.durationLabel}
|
||||
helperText={actions.helperText}
|
||||
instructor={course.instructor}
|
||||
primaryAction={actions.primaryAction}
|
||||
progressPercent={course.progressPercent}
|
||||
secondaryAction={actions.secondaryAction}
|
||||
stageLabel={course.stage.levelLabel}
|
||||
totalLessons={course.totalLessons}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-5 lg:grid-cols-[1.6fr_0.85fr]">
|
||||
<article className="acve-panel acve-section-base">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Course structure preview</h2>
|
||||
<div className="mt-4 grid gap-2">
|
||||
{lessons.slice(0, 5).map((lesson, index) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="font-medium text-slate-800">
|
||||
Lesson {index + 1}: {lesson.title}
|
||||
</span>
|
||||
<span className="text-slate-500">{lesson.minutes} min</span>
|
||||
</div>
|
||||
))}
|
||||
{lessons.length === 0 && (
|
||||
<p className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
|
||||
No lessons yet. Check back soon.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside className="acve-panel space-y-5 p-6">
|
||||
<h2 className="text-2xl text-slate-700 md:text-4xl">Course details</h2>
|
||||
<div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
|
||||
<p className="mb-4 font-semibold text-slate-800">{course.author.fullName || "ACVE Team"}</p>
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
|
||||
<p className="mb-4 font-semibold text-slate-800">{levelLabel(course.level)}</p>
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Lessons</p>
|
||||
<p className="font-semibold text-slate-800">{lessonsCount}</p>
|
||||
</div>
|
||||
{isAuthed ? (
|
||||
<Link
|
||||
className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
|
||||
href={redirect}
|
||||
>
|
||||
Start Course
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
|
||||
href={loginUrl}
|
||||
>
|
||||
Login to start
|
||||
</Link>
|
||||
)}
|
||||
</aside>
|
||||
</section>
|
||||
<ProgramContentList modules={course.modules} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,93 +1,35 @@
|
||||
import CourseCard from "@/components/CourseCard";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import CourseCatalogIntro from "@/components/courses/CourseCatalogIntro";
|
||||
import CourseLevelTabs from "@/components/courses/CourseLevelTabs";
|
||||
import ProgramSection from "@/components/courses/ProgramSection";
|
||||
import { getCourseCatalogViewModel } from "@/lib/courses/publicCourses";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function CoursesPage() {
|
||||
const courses = await db.course.findMany({
|
||||
where: {
|
||||
status: "PUBLISHED",
|
||||
},
|
||||
include: {
|
||||
author: {
|
||||
select: {
|
||||
fullName: true,
|
||||
},
|
||||
},
|
||||
modules: {
|
||||
select: {
|
||||
_count: {
|
||||
select: {
|
||||
lessons: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
_count: {
|
||||
select: {
|
||||
enrollments: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: {
|
||||
updatedAt: "desc",
|
||||
},
|
||||
});
|
||||
|
||||
const totalLessons = courses.reduce(
|
||||
(total, course) => total + course.modules.reduce((courseTotal, module) => courseTotal + module._count.lessons, 0),
|
||||
0,
|
||||
);
|
||||
const user = await requireUser().catch(() => null);
|
||||
const catalog = await getCourseCatalogViewModel(user?.id ?? null);
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel overflow-hidden p-0">
|
||||
<div className="grid gap-0 lg:grid-cols-[1.45fr_0.95fr]">
|
||||
<div className="acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Course Catalog</p>
|
||||
<h1 className="text-3xl font-semibold leading-tight text-[#202a39] md:text-4xl">Build your legal English learning path</h1>
|
||||
<p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
|
||||
Discover our published legal English courses and start with the path that matches your level.
|
||||
</p>
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Total Courses</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">{courses.length}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Published Lessons</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">{totalLessons}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructors</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">
|
||||
{new Set(courses.map((course) => course.author.fullName || "ACVE Team")).size}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CourseCatalogIntro
|
||||
instructorCount={catalog.totals.instructorCount}
|
||||
totalCourses={catalog.totals.totalCourses}
|
||||
totalLessons={catalog.totals.totalLessons}
|
||||
/>
|
||||
|
||||
<aside className="border-t border-slate-200 bg-slate-50/80 p-5 lg:border-l lg:border-t-0">
|
||||
<h2 className="text-base font-semibold text-slate-800">Open Access</h2>
|
||||
<p className="mt-2 text-sm text-slate-600">
|
||||
This catalog is public. Open any course card to visit the landing page and enroll.
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
<CourseLevelTabs
|
||||
items={catalog.sections.map((section) => ({
|
||||
id: section.id,
|
||||
label: section.tabLabel,
|
||||
anchorId: section.anchorId,
|
||||
count: section.courses.length,
|
||||
}))}
|
||||
/>
|
||||
|
||||
{courses.length === 0 ? (
|
||||
<section className="acve-panel acve-section-base">
|
||||
<div className="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Coming Soon</h2>
|
||||
<p className="mt-2 text-slate-600">We are preparing new courses. Please check back shortly.</p>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{courses.map((course) => (
|
||||
<CourseCard key={course.slug} course={course} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{catalog.sections.map((section) => (
|
||||
<ProgramSection key={section.id} section={section} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
462
app/(public)/eventos/page.tsx
Normal file
462
app/(public)/eventos/page.tsx
Normal file
@@ -0,0 +1,462 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { type FormEvent, useEffect, useMemo, useState } from "react";
|
||||
import { readDemoClientAuth } from "@/lib/auth/clientAuth";
|
||||
import { supabaseBrowser } from "@/lib/supabase/browser";
|
||||
|
||||
type EventItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
mode: string;
|
||||
location: string;
|
||||
summary: string;
|
||||
details: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
|
||||
type EventDraft = {
|
||||
title: string;
|
||||
date: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
mode: string;
|
||||
location: string;
|
||||
summary: string;
|
||||
details: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
|
||||
const EVENTS_STORAGE_KEY = "acve.custom-events.v1";
|
||||
const defaultThumbnail =
|
||||
"https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&w=1200&q=80";
|
||||
|
||||
const defaultEvents: EventItem[] = [
|
||||
{
|
||||
id: "launch-day-2026-03-20",
|
||||
title: "Launch Day ACVE",
|
||||
date: "2026-03-20",
|
||||
startTime: "18:00",
|
||||
endTime: "20:30",
|
||||
mode: "Híbrido",
|
||||
location: "Monterrey",
|
||||
summary: "Presentación oficial de ACVE, agenda académica y networking inicial.",
|
||||
details:
|
||||
"Sesión inaugural con bienvenida institucional, visión del programa 2026 y espacio de networking para alumnos, docentes e invitados del sector legal.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1528605248644-14dd04022da1?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "webinar-drafting-2026-03-27",
|
||||
title: "Webinar: Legal Drafting in English",
|
||||
date: "2026-03-27",
|
||||
startTime: "19:00",
|
||||
endTime: "20:15",
|
||||
mode: "Online",
|
||||
location: "Zoom ACVE",
|
||||
summary: "Buenas prácticas para redactar cláusulas con claridad y precisión.",
|
||||
details:
|
||||
"Revisión de estructura, vocabulario funcional y errores frecuentes en contratos internacionales. Incluye sesión breve de preguntas al final.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "qa-session-2026-04-05",
|
||||
title: "Q&A de Cohorte",
|
||||
date: "2026-04-05",
|
||||
startTime: "17:30",
|
||||
endTime: "18:30",
|
||||
mode: "Streaming",
|
||||
location: "Campus Virtual ACVE",
|
||||
summary: "Resolución de dudas académicas y guía de estudio para la siguiente unidad.",
|
||||
details:
|
||||
"Encuentro en vivo para alinear progreso de la cohorte, resolver dudas de contenido y compartir recomendaciones de práctica.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1515169067868-5387ec356754?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "workshop-monterrey-2026-04-18",
|
||||
title: "Workshop Presencial",
|
||||
date: "2026-04-18",
|
||||
startTime: "10:00",
|
||||
endTime: "13:00",
|
||||
mode: "Presencial",
|
||||
location: "Monterrey",
|
||||
summary: "Simulación de negociación y revisión colaborativa de cláusulas.",
|
||||
details:
|
||||
"Taller práctico con actividades por equipos para aplicar vocabulario jurídico en contexto de negociación y redacción de términos clave.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1475721027785-f74eccf877e2?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "networking-night-2026-05-02",
|
||||
title: "Networking Night",
|
||||
date: "2026-05-02",
|
||||
startTime: "19:30",
|
||||
endTime: "21:00",
|
||||
mode: "Híbrido",
|
||||
location: "Monterrey + Online",
|
||||
summary: "Conexión entre estudiantes, alumni y profesores ACVE.",
|
||||
details:
|
||||
"Espacio informal para compartir experiencias, oportunidades de colaboración y avances en el uso profesional del inglés legal.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1528909514045-2fa4ac7a08ba?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
];
|
||||
|
||||
const blankDraft: EventDraft = {
|
||||
title: "",
|
||||
date: "",
|
||||
startTime: "18:00",
|
||||
endTime: "19:00",
|
||||
mode: "Online",
|
||||
location: "Monterrey",
|
||||
summary: "",
|
||||
details: "",
|
||||
thumbnail: "",
|
||||
};
|
||||
|
||||
function parseDateInUtc(value: string): Date {
|
||||
const [year, month, day] = value.split("-").map(Number);
|
||||
return new Date(Date.UTC(year, month - 1, day));
|
||||
}
|
||||
|
||||
function sortEvents(items: EventItem[]): EventItem[] {
|
||||
return [...items].sort((a, b) => {
|
||||
if (a.date !== b.date) return a.date.localeCompare(b.date);
|
||||
return a.startTime.localeCompare(b.startTime);
|
||||
});
|
||||
}
|
||||
|
||||
function formatCardDate(value: string) {
|
||||
const date = parseDateInUtc(value);
|
||||
return {
|
||||
day: new Intl.DateTimeFormat("es-MX", { day: "2-digit", timeZone: "UTC" }).format(date),
|
||||
month: new Intl.DateTimeFormat("es-MX", { month: "short", timeZone: "UTC" }).format(date).toUpperCase(),
|
||||
};
|
||||
}
|
||||
|
||||
function formatLongDate(value: string): string {
|
||||
return new Intl.DateTimeFormat("es-MX", {
|
||||
weekday: "long",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
timeZone: "UTC",
|
||||
}).format(parseDateInUtc(value));
|
||||
}
|
||||
|
||||
function isEventItem(value: unknown): value is EventItem {
|
||||
if (!value || typeof value !== "object") return false;
|
||||
const record = value as Record<string, unknown>;
|
||||
return (
|
||||
typeof record.id === "string" &&
|
||||
typeof record.title === "string" &&
|
||||
typeof record.date === "string" &&
|
||||
typeof record.startTime === "string" &&
|
||||
typeof record.endTime === "string" &&
|
||||
typeof record.mode === "string" &&
|
||||
typeof record.location === "string" &&
|
||||
typeof record.summary === "string" &&
|
||||
typeof record.details === "string" &&
|
||||
typeof record.thumbnail === "string"
|
||||
);
|
||||
}
|
||||
|
||||
export default function EventosPage() {
|
||||
const [selectedEvent, setSelectedEvent] = useState<EventItem | null>(null);
|
||||
const [addedEvents, setAddedEvents] = useState<EventItem[]>([]);
|
||||
const [draft, setDraft] = useState<EventDraft>(blankDraft);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [isTeacher, setIsTeacher] = useState(false);
|
||||
const [isCheckingRole, setIsCheckingRole] = useState(true);
|
||||
|
||||
const orderedEvents = useMemo(() => sortEvents([...defaultEvents, ...addedEvents]), [addedEvents]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
const stored = window.localStorage.getItem(EVENTS_STORAGE_KEY);
|
||||
if (!stored) return;
|
||||
const parsed = JSON.parse(stored);
|
||||
if (Array.isArray(parsed)) {
|
||||
setAddedEvents(parsed.filter(isEventItem));
|
||||
}
|
||||
} catch {
|
||||
setAddedEvents([]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
window.localStorage.setItem(EVENTS_STORAGE_KEY, JSON.stringify(sortEvents(addedEvents)));
|
||||
}, [addedEvents]);
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
const demoSnapshot = readDemoClientAuth();
|
||||
const client = supabaseBrowser();
|
||||
|
||||
if (!client) {
|
||||
setIsTeacher(demoSnapshot.isTeacher);
|
||||
setIsCheckingRole(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const resolveTeacherRole = async () => {
|
||||
try {
|
||||
const {
|
||||
data: { user },
|
||||
} = await client.auth.getUser();
|
||||
|
||||
if (!mounted) return;
|
||||
if (!user) {
|
||||
setIsTeacher(demoSnapshot.isTeacher);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch("/api/auth/session", { cache: "no-store" });
|
||||
if (!mounted) return;
|
||||
|
||||
const payload = (await response.json()) as { isTeacher?: boolean };
|
||||
setIsTeacher(payload.isTeacher === true || demoSnapshot.isTeacher);
|
||||
} catch {
|
||||
if (mounted) setIsTeacher(demoSnapshot.isTeacher);
|
||||
} finally {
|
||||
if (mounted) setIsCheckingRole(false);
|
||||
}
|
||||
};
|
||||
|
||||
void resolveTeacherRole();
|
||||
|
||||
const {
|
||||
data: { subscription },
|
||||
} = client.auth.onAuthStateChange(() => {
|
||||
void resolveTeacherRole();
|
||||
});
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
subscription.unsubscribe();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleAddEvent = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (!isTeacher) {
|
||||
setFormError("Solo docentes pueden agregar eventos.");
|
||||
return;
|
||||
}
|
||||
|
||||
const required = [draft.title, draft.date, draft.startTime, draft.endTime, draft.mode, draft.location, draft.summary, draft.details];
|
||||
if (required.some((field) => field.trim().length === 0)) {
|
||||
setFormError("Completa todos los campos obligatorios para publicar el evento.");
|
||||
return;
|
||||
}
|
||||
|
||||
setAddedEvents((previous) => [
|
||||
...previous,
|
||||
{
|
||||
id: typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}`,
|
||||
title: draft.title.trim(),
|
||||
date: draft.date,
|
||||
startTime: draft.startTime,
|
||||
endTime: draft.endTime,
|
||||
mode: draft.mode.trim(),
|
||||
location: draft.location.trim(),
|
||||
summary: draft.summary.trim(),
|
||||
details: draft.details.trim(),
|
||||
thumbnail: draft.thumbnail.trim() || defaultThumbnail,
|
||||
},
|
||||
]);
|
||||
|
||||
setDraft(blankDraft);
|
||||
setFormError(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Eventos ACVE</p>
|
||||
<h1 className="acve-heading text-4xl md:text-5xl">Calendario académico y networking</h1>
|
||||
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Eventos ordenados cronológicamente. Haz clic en cualquier tarjeta para ver el detalle completo del evento.
|
||||
</p>
|
||||
|
||||
<div className="acve-scrollbar-none mt-8 flex gap-4 overflow-x-auto pb-2">
|
||||
{orderedEvents.map((eventCard) => {
|
||||
const cardDate = formatCardDate(eventCard.date);
|
||||
return (
|
||||
<button
|
||||
key={eventCard.id}
|
||||
className="group relative flex min-h-[272px] min-w-[292px] max-w-[320px] flex-col overflow-hidden rounded-2xl border border-border/80 bg-card text-left shadow-sm transition hover:-translate-y-0.5 hover:border-primary/45 hover:shadow-md"
|
||||
type="button"
|
||||
onClick={() => setSelectedEvent(eventCard)}
|
||||
>
|
||||
<div className="h-32 w-full overflow-hidden border-b border-border/70">
|
||||
<img
|
||||
alt={`Miniatura de ${eventCard.title}`}
|
||||
className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
|
||||
loading="lazy"
|
||||
src={eventCard.thumbnail}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-xl border border-primary/25 bg-primary/10 px-2 py-1 text-center text-primary">
|
||||
<p className="text-lg font-bold leading-none">{cardDate.day}</p>
|
||||
<p className="text-[11px] font-semibold tracking-wide">{cardDate.month}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">{eventCard.mode}</p>
|
||||
<h2 className="text-base font-semibold text-foreground">{eventCard.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm text-muted-foreground">{eventCard.summary}</p>
|
||||
<p className="mt-auto pt-4 text-xs font-semibold uppercase tracking-wide text-primary">{eventCard.location}</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Link className="acve-button-secondary inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/#eventos">
|
||||
Ver sección de eventos en Inicio
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel acve-section-base border-dashed">
|
||||
<h2 className="acve-heading text-2xl md:text-3xl">Gestión de eventos</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground md:text-base">Solo el equipo docente puede publicar nuevos eventos en este tablero.</p>
|
||||
|
||||
{isCheckingRole ? (
|
||||
<p className="mt-4 text-sm text-muted-foreground">Verificando permisos...</p>
|
||||
) : null}
|
||||
|
||||
{!isCheckingRole && !isTeacher ? (
|
||||
<p className="mt-4 rounded-xl border border-border/80 bg-card/70 px-4 py-3 text-sm text-muted-foreground">
|
||||
Tu perfil actual no tiene permisos de publicación. Si eres docente, inicia sesión con tu cuenta de profesor.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{!isCheckingRole && isTeacher ? (
|
||||
<form className="mt-6 grid gap-3 md:grid-cols-2" onSubmit={handleAddEvent}>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
placeholder="Título del evento"
|
||||
value={draft.title}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, title: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
type="date"
|
||||
value={draft.date}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, date: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
type="time"
|
||||
value={draft.startTime}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, startTime: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
type="time"
|
||||
value={draft.endTime}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, endTime: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
placeholder="Modalidad (Online, Presencial, Híbrido)"
|
||||
value={draft.mode}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, mode: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
placeholder="Ubicación"
|
||||
value={draft.location}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, location: event.target.value }))}
|
||||
/>
|
||||
<textarea
|
||||
required
|
||||
className="min-h-[92px] rounded-xl border border-border bg-background px-3 py-2 text-sm md:col-span-2"
|
||||
placeholder="Resumen breve para la tarjeta"
|
||||
value={draft.summary}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, summary: event.target.value }))}
|
||||
/>
|
||||
<textarea
|
||||
required
|
||||
className="min-h-[120px] rounded-xl border border-border bg-background px-3 py-2 text-sm md:col-span-2"
|
||||
placeholder="Detalle completo para el popup"
|
||||
value={draft.details}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, details: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm md:col-span-2"
|
||||
placeholder="URL de miniatura (opcional)"
|
||||
value={draft.thumbnail}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, thumbnail: event.target.value }))}
|
||||
/>
|
||||
|
||||
{formError ? <p className="text-sm font-medium text-primary md:col-span-2">{formError}</p> : null}
|
||||
|
||||
<button className="acve-button-primary inline-flex w-fit items-center justify-center px-5 py-2.5 text-sm font-semibold md:col-span-2" type="submit">
|
||||
Publicar evento
|
||||
</button>
|
||||
</form>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
{selectedEvent ? (
|
||||
<div
|
||||
aria-modal="true"
|
||||
className="fixed inset-0 z-[70] flex items-center justify-center bg-black/55 p-4"
|
||||
role="dialog"
|
||||
onClick={() => setSelectedEvent(null)}
|
||||
>
|
||||
<article
|
||||
className="acve-panel relative w-full max-w-3xl overflow-hidden shadow-2xl"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
aria-label="Cerrar detalle del evento"
|
||||
className="absolute right-3 top-3 z-10 rounded-full border border-white/70 bg-white/90 px-3 py-1 text-xs font-semibold text-foreground hover:bg-white"
|
||||
type="button"
|
||||
onClick={() => setSelectedEvent(null)}
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
|
||||
<div className="h-52 w-full overflow-hidden border-b border-border/70 md:h-72">
|
||||
<img alt={`Imagen del evento ${selectedEvent.title}`} className="h-full w-full object-cover" src={selectedEvent.thumbnail} />
|
||||
</div>
|
||||
|
||||
<div className="p-5 md:p-7">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">
|
||||
{formatLongDate(selectedEvent.date)} · {selectedEvent.startTime} - {selectedEvent.endTime}
|
||||
</p>
|
||||
<h3 className="mt-2 text-2xl font-semibold text-foreground md:text-3xl">{selectedEvent.title}</h3>
|
||||
<p className="mt-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{selectedEvent.mode} · {selectedEvent.location}
|
||||
</p>
|
||||
<p className="mt-4 text-sm leading-relaxed text-muted-foreground md:text-base">{selectedEvent.details}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
app/(public)/noticias/page.tsx
Normal file
108
app/(public)/noticias/page.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import Link from "next/link";
|
||||
|
||||
type NewsPost = {
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
category: string;
|
||||
excerpt: string;
|
||||
bodyPreview: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
|
||||
const newsPosts: NewsPost[] = [
|
||||
{
|
||||
id: "news-1",
|
||||
title: "ACVE abre convocatoria para la cohorte de primavera",
|
||||
date: "15 de marzo de 2026",
|
||||
category: "Comunicado",
|
||||
excerpt: "Se habilitó la convocatoria para estudiantes y profesionales que buscan fortalecer inglés jurídico aplicado.",
|
||||
bodyPreview:
|
||||
"El proceso incluye evaluación de nivel, entrevista breve y acompañamiento para elegir la ruta formativa más adecuada según perfil profesional.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "news-2",
|
||||
title: "Nuevo ciclo de webinars con enfoque en redacción contractual",
|
||||
date: "08 de marzo de 2026",
|
||||
category: "Académico",
|
||||
excerpt: "Iniciamos una serie de sesiones en vivo para reforzar estructuras clave de contratos en inglés.",
|
||||
bodyPreview:
|
||||
"Cada webinar incluye ejemplos prácticos, análisis de cláusulas frecuentes y espacio de preguntas para conectar teoría con práctica legal real.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "news-3",
|
||||
title: "ACVE fortalece su red de mentores en litigio internacional",
|
||||
date: "02 de marzo de 2026",
|
||||
category: "Institucional",
|
||||
excerpt: "Se integran nuevos especialistas para acompañar el desarrollo profesional de la comunidad ACVE.",
|
||||
bodyPreview:
|
||||
"La red de mentores cubrirá preparación de audiencias, argumentación oral y terminología crítica para contextos transnacionales.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1560439514-4e9645039924?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "news-4",
|
||||
title: "Publicamos guía práctica para entrevistas legales en inglés",
|
||||
date: "22 de febrero de 2026",
|
||||
category: "Recursos",
|
||||
excerpt: "Disponible un nuevo material descargable para preparar entrevistas y reuniones con clientes internacionales.",
|
||||
bodyPreview:
|
||||
"La guía presenta frases útiles, recomendaciones de tono profesional y checklist de preparación para mejorar seguridad comunicativa.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "news-5",
|
||||
title: "Comunidad ACVE inicia calendario de foros colaborativos",
|
||||
date: "12 de febrero de 2026",
|
||||
category: "Comunidad",
|
||||
excerpt: "Los foros temáticos permitirán compartir casos, dudas y mejores prácticas entre cohortes.",
|
||||
bodyPreview:
|
||||
"Las dinámicas estarán moderadas por el equipo docente y buscarán acelerar el aprendizaje aplicado con interacción entre perfiles diversos.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
];
|
||||
|
||||
export default function NoticiasPage() {
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Noticias ACVE</p>
|
||||
<h1 className="acve-heading text-4xl md:text-5xl">Actualizaciones institucionales</h1>
|
||||
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Formato tipo blog con tarjetas horizontales amplias, priorizando contenido textual y con miniaturas de apoyo.
|
||||
</p>
|
||||
|
||||
<div className="acve-scrollbar-none mt-8 max-h-[72vh] space-y-4 overflow-y-auto pr-1">
|
||||
{newsPosts.map((post) => (
|
||||
<article key={post.id} className="rounded-2xl border border-border/80 bg-card p-4 shadow-sm md:p-6">
|
||||
<div className="flex flex-col gap-4 md:flex-row">
|
||||
<div className="h-32 w-full shrink-0 overflow-hidden rounded-xl border border-border/70 md:h-24 md:w-56">
|
||||
<img alt={`Miniatura de ${post.title}`} className="h-full w-full object-cover" loading="lazy" src={post.thumbnail} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-primary">
|
||||
{post.category} · {post.date}
|
||||
</p>
|
||||
<h2 className="mt-1 text-xl font-semibold text-foreground md:text-2xl">{post.title}</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground md:text-base">{post.excerpt}</p>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{post.bodyPreview}</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
|
||||
Regresar al inicio
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,79 +1,297 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { db } from "@/lib/prisma";
|
||||
|
||||
const highlights = [
|
||||
"Courses designed for Latin American professionals",
|
||||
"Real English law case studies and analysis",
|
||||
"AI-powered legal assistant available 24/7",
|
||||
"Interactive practice exercises and assessments",
|
||||
type ProgramCard = {
|
||||
title: string;
|
||||
description: string;
|
||||
status: string;
|
||||
href: string;
|
||||
visualClass: string;
|
||||
};
|
||||
|
||||
const fallbackPrograms: ProgramCard[] = [
|
||||
{
|
||||
title: "Introducción al Inglés Legal",
|
||||
description:
|
||||
"Una introducción estructurada al lenguaje jurídico en inglés para comprender y utilizar terminología clave con seguridad profesional.",
|
||||
status: "Cohorte abierta",
|
||||
href: "/courses",
|
||||
visualClass: "from-[#ead9cb] via-[#f7ece3] to-[#fef8f2]",
|
||||
},
|
||||
{
|
||||
title: "Common vs Civil Law",
|
||||
description:
|
||||
"Explora los dos sistemas jurídicos predominantes del mundo y aprende su lógica, diferencias y vocabulario aplicado a contextos internacionales.",
|
||||
status: "Próximamente",
|
||||
href: "/courses",
|
||||
visualClass: "from-[#e4d4dd] via-[#f3e7ed] to-[#fff7fb]",
|
||||
},
|
||||
{
|
||||
title: "Fundamentos de la Traducción Jurídica",
|
||||
description:
|
||||
"Aprende los fundamentos de la equivalencia jurídica entre distintos sistemas legales para traducir con claridad, rigor y contexto.",
|
||||
status: "Próximamente",
|
||||
href: "/courses",
|
||||
visualClass: "from-[#e9ddd0] via-[#f7eee5] to-[#fefaf4]",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
const events = [
|
||||
{ title: "Networking virtual", date: "24", month: "MAR", mode: "Online", note: "Próximamente..." },
|
||||
{ title: "Webinar", date: "03", month: "ABR", mode: "Streaming", note: "Próximamente..." },
|
||||
{ title: "Sesión Q&A", date: "17", month: "ABR", mode: "En vivo", note: "Próximamente..." },
|
||||
{ title: "Taller presencial", date: "09", month: "MAY", mode: "Monterrey", note: "Próximamente..." },
|
||||
];
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
title: "Miranda v. Arizona",
|
||||
year: "1966",
|
||||
summary:
|
||||
"Caso central en derecho penal del que surgen los Miranda rights. Ideal para trabajar vocabulario procesal, derechos constitucionales y lenguaje judicial.",
|
||||
},
|
||||
{
|
||||
title: "Marbury v. Madison",
|
||||
year: "1803",
|
||||
summary:
|
||||
"Caso fundacional que establece el judicial review en Estados Unidos y permite comprender cómo opera el control constitucional del poder público.",
|
||||
},
|
||||
{
|
||||
title: "Brown v. Board of Education",
|
||||
year: "1954",
|
||||
summary:
|
||||
"Decisión emblemática en materia de derechos civiles que declaró inconstitucional la segregación racial en escuelas públicas.",
|
||||
},
|
||||
];
|
||||
|
||||
const challenges = [
|
||||
{
|
||||
title: "Desafío de traducción",
|
||||
description: "Resuelve una traducción jurídica breve con foco en precisión terminológica y estilo profesional.",
|
||||
href: "/practice",
|
||||
},
|
||||
{
|
||||
title: "Reto de términos legales",
|
||||
description: "Pon a prueba tu dominio de conceptos clave con ejercicios de uso contextual y equivalencia funcional.",
|
||||
href: "/practice",
|
||||
},
|
||||
{
|
||||
title: "Ejercicio de cláusulas",
|
||||
description: "Analiza cláusulas reales y mejora tu capacidad de redacción y negociación en inglés jurídico.",
|
||||
href: "/practice",
|
||||
},
|
||||
];
|
||||
|
||||
const visualPresets = [
|
||||
"from-[#ead9cb] via-[#f7ece3] to-[#fef8f2]",
|
||||
"from-[#e4d4dd] via-[#f3e7ed] to-[#fff7fb]",
|
||||
"from-[#e9ddd0] via-[#f7eee5] to-[#fefaf4]",
|
||||
"from-[#dfe4f1] via-[#ecf0f7] to-[#f8f9fd]",
|
||||
"from-[#e7e1d6] via-[#f2ece4] to-[#fcfaf6]",
|
||||
];
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
async function getAcademicCards(): Promise<ProgramCard[]> {
|
||||
const publishedCourses = await db.course
|
||||
.findMany({
|
||||
where: { status: "PUBLISHED" },
|
||||
orderBy: { updatedAt: "desc" },
|
||||
take: 6,
|
||||
select: {
|
||||
slug: true,
|
||||
title: true,
|
||||
description: true,
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to load featured courses for homepage.", error);
|
||||
return [];
|
||||
});
|
||||
|
||||
if (publishedCourses.length === 0) {
|
||||
return fallbackPrograms;
|
||||
}
|
||||
|
||||
return publishedCourses.map((course, index) => ({
|
||||
title: getText(course.title) || "Programa académico ACVE",
|
||||
description:
|
||||
getText(course.description) ||
|
||||
"Programa académico orientado al dominio del inglés jurídico con enfoque aplicado en contextos profesionales.",
|
||||
status: "Disponible",
|
||||
href: `/courses/${course.slug}`,
|
||||
visualClass: visualPresets[index % visualPresets.length],
|
||||
}));
|
||||
}
|
||||
|
||||
export default async function HomePage() {
|
||||
const programs = await getAcademicCards();
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel relative overflow-hidden p-5 md:p-8">
|
||||
<div className="grid items-start gap-6 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
<div>
|
||||
<p className="acve-pill mb-4 w-fit text-sm">
|
||||
<span className="mr-2 text-accent">*</span>
|
||||
Professional Legal Education
|
||||
</p>
|
||||
<h1 className="acve-heading text-4xl leading-tight md:text-5xl">Learn English Law with Confidence</h1>
|
||||
<p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
|
||||
Courses, case studies, and guided practice designed for Latin American professionals and students.
|
||||
</p>
|
||||
<ul className="mt-5 grid gap-2 sm:grid-cols-2">
|
||||
{highlights.map((item) => (
|
||||
<li key={item} className="flex items-start gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
|
||||
<span className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full border border-accent text-xs text-accent">
|
||||
v
|
||||
</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<section className="acve-panel relative overflow-hidden px-6 py-10 md:px-10 md:py-14">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(152,20,63,0.18),_transparent_55%)]" />
|
||||
<div className="relative">
|
||||
<p className="acve-pill mb-5 w-fit text-sm">ACVE Centro de Estudios</p>
|
||||
<h1 className="acve-heading max-w-4xl text-4xl leading-tight md:text-6xl">
|
||||
Domina el inglés jurídico y ejerce a nivel internacional.
|
||||
</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-relaxed text-muted-foreground md:text-lg">
|
||||
Formación práctica para comprender, redactar y negociar documentos legales en inglés. Diseñada para abogados y estudiantes que desean
|
||||
desenvolverse con solvencia en entornos académicos y profesionales globales.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-2">
|
||||
<Link className="acve-button-primary px-6 py-2 text-sm font-semibold transition hover:brightness-105" href="/courses">
|
||||
Start Learning
|
||||
</Link>
|
||||
<Link className="acve-button-secondary px-6 py-2 text-sm font-semibold transition hover:bg-brand-soft" href="/courses">
|
||||
Explore Courses
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-7 flex flex-wrap gap-3">
|
||||
<Link className="acve-button-primary inline-flex items-center px-6 py-3 text-sm font-semibold hover:brightness-105" href="/courses">
|
||||
Explorar programas
|
||||
</Link>
|
||||
<Link className="acve-button-secondary inline-flex items-center px-6 py-3 text-sm font-semibold hover:bg-accent" href="/case-studies">
|
||||
Ver casos prácticos
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="overflow-hidden rounded-3xl border border-slate-300 bg-white shadow-sm">
|
||||
<Image
|
||||
alt="ACVE legal library"
|
||||
className="h-[360px] w-full object-cover object-right md:h-[460px]"
|
||||
height={900}
|
||||
priority
|
||||
src="/images/hero-reference.png"
|
||||
width={700}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 right-4 rounded-2xl border border-slate-300 bg-white px-4 py-3 shadow-sm">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-accent">AI</p>
|
||||
<p className="text-lg font-semibold text-slate-800">Legal Assistant Ready</p>
|
||||
<p className="text-sm text-slate-500">Ask me anything about English Law</p>
|
||||
</div>
|
||||
<div className="mt-8 grid gap-3 md:grid-cols-3">
|
||||
{["Metodología aplicada", "Casos emblemáticos", "Comunidad jurídica"].map((item) => (
|
||||
<div key={item} className="rounded-2xl border border-border/80 bg-card/90 px-4 py-3 text-sm font-semibold text-foreground shadow-sm">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mt-6 grid gap-3 border-t border-slate-200 pt-5 text-center text-xs font-semibold uppercase tracking-wide text-slate-500 md:grid-cols-3">
|
||||
<Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/courses">
|
||||
Browse courses
|
||||
</Link>
|
||||
<Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/case-studies">
|
||||
Read case studies
|
||||
</Link>
|
||||
<Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/practice">
|
||||
Practice and exercises
|
||||
<section className="acve-panel px-6 py-8 md:px-10 md:py-10" id="formacion-academica">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="acve-heading text-3xl md:text-4xl">Formación Académica</h2>
|
||||
<p className="mt-3 text-muted-foreground md:text-lg">
|
||||
Programas impartidos por instructores de élite, con lecciones focalizadas y enfoque académico para una aplicación profesional real. Los
|
||||
cursos publicados aparecen automáticamente en esta sección.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
{programs.map((program) => (
|
||||
<article key={program.title} className="rounded-2xl border border-border/80 bg-card p-4 shadow-sm">
|
||||
<div className={cn("h-36 rounded-xl border border-border/70 bg-gradient-to-br p-4", program.visualClass)}>
|
||||
<span className="inline-flex rounded-full border border-primary/20 bg-card/85 px-3 py-1 text-xs font-semibold text-primary">
|
||||
{program.status}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-4 text-xl font-semibold text-foreground">{program.title}</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{program.description}</p>
|
||||
<Link className="mt-4 inline-flex text-sm font-semibold text-primary hover:underline" href={program.href}>
|
||||
Conocer más
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel px-6 py-8 md:px-10 md:py-10" id="eventos">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="acve-heading text-3xl md:text-4xl">Próximos eventos</h2>
|
||||
<p className="mt-3 text-muted-foreground md:text-lg">
|
||||
Espacios para practicar inglés legal, fortalecer comunidad y mantenerte actualizado en tendencias jurídicas internacionales.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-7 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
{events.map((event) => (
|
||||
<article key={event.title} className="rounded-2xl border border-border/80 bg-card p-4 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-xl border border-primary/20 bg-primary/10 px-2 py-2 text-center text-primary">
|
||||
<p className="text-lg font-bold leading-none">{event.date}</p>
|
||||
<p className="text-[11px] font-semibold tracking-wide">{event.month}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-foreground">{event.title}</h3>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">{event.mode}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-muted-foreground">{event.note}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Link className="acve-button-secondary inline-flex items-center px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/eventos">
|
||||
Ver el calendario completo
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel px-6 py-8 md:px-10 md:py-10">
|
||||
<div className="max-w-4xl">
|
||||
<h2 className="acve-heading text-3xl md:text-4xl">Casos prácticos</h2>
|
||||
<p className="mt-3 text-muted-foreground md:text-lg">
|
||||
Pon a prueba tu nivel de inglés legal con los casos judiciales más emblemáticos de Estados Unidos y del mundo.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
{caseStudies.map((entry) => (
|
||||
<article key={entry.title} className="rounded-2xl border border-border/80 bg-card p-5 shadow-sm">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-primary">{entry.year}</p>
|
||||
<h3 className="mt-1 text-xl font-semibold text-foreground">{entry.title}</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">{entry.summary}</p>
|
||||
<Link className="mt-4 inline-flex text-sm font-semibold text-primary hover:underline" href="/case-studies">
|
||||
Read more
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative overflow-hidden rounded-3xl border border-primary/30 bg-gradient-to-r from-[#98143f] via-[#6f1737] to-[#3f1327] px-7 py-10 text-white shadow-xl md:px-10 md:py-12">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,_rgba(255,255,255,0.24),_transparent_40%)]" />
|
||||
<div className="relative max-w-3xl">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/80">Evento destacado</p>
|
||||
<h2 className="mt-3 font-[var(--acve-heading-font)] text-3xl leading-tight md:text-4xl">Congreso Internacional de Inglés Jurídico ACVE 2026</h2>
|
||||
<p className="mt-4 text-sm leading-relaxed text-white/90 md:text-base">
|
||||
Una jornada intensiva con expertos en litigio, arbitraje y traducción jurídica para fortalecer tus competencias profesionales en contextos
|
||||
multinacionales.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<Link className="inline-flex rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-[#6f1737] hover:bg-white/90" href="/auth/signup">
|
||||
Reservar lugar
|
||||
</Link>
|
||||
<Link className="inline-flex rounded-full border border-white/50 px-5 py-2.5 text-sm font-semibold text-white hover:bg-white/10" href="/eventos">
|
||||
Ver agenda preliminar
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel px-6 py-8 md:px-10 md:py-10">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="acve-heading text-3xl md:text-4xl">Retos</h2>
|
||||
<p className="mt-3 text-muted-foreground md:text-lg">
|
||||
Entrena tu precisión lingüística con ejercicios breves diseñados para el trabajo real de abogados y equipos legales bilingües.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-7 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{challenges.map((challenge) => (
|
||||
<article key={challenge.title} className="rounded-2xl border border-border/80 bg-card p-5 shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-foreground">{challenge.title}</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">{challenge.description}</p>
|
||||
<Link className="acve-button-primary mt-5 inline-flex items-center px-5 py-2.5 text-sm font-semibold hover:brightness-105" href={challenge.href}>
|
||||
Iniciar
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
28
app/(public)/sobre-acve/page.tsx
Normal file
28
app/(public)/sobre-acve/page.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function SobreAcvePage() {
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Sobre ACVE</p>
|
||||
<h1 className="acve-heading text-4xl md:text-5xl">Nuestra historia</h1>
|
||||
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
ACVE nació en Monterrey como una iniciativa de cinco fundadores con una misma convicción: que dominar el inglés jurídico abre puertas
|
||||
académicas y profesionales a nivel internacional.
|
||||
</p>
|
||||
<p className="mt-2 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Empezamos con grupos pequeños, sesiones prácticas y acompañamiento cercano para abogados y estudiantes. Con el tiempo, ese formato se
|
||||
convirtió en una comunidad enfocada en claridad técnica, confianza comunicativa y aplicación real en contextos legales.
|
||||
</p>
|
||||
<p className="mt-2 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Hoy seguimos creciendo con el mismo enfoque de origen: formación seria, metodología aplicada y una red que impulse a cada alumno a ejercer
|
||||
con mayor seguridad en escenarios globales.
|
||||
</p>
|
||||
<p className="mt-5 text-sm font-semibold text-primary">Origen: Monterrey · Equipo fundador: 5 personas</p>
|
||||
<Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
|
||||
Regresar al inicio
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user