First commit
This commit is contained in:
mdares
11
app/(public)/assistant/page.tsx
Normal file
11
app/(public)/assistant/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import AssistantDrawer from "@/components/AssistantDrawer";
|
||||
|
||||
export default function AssistantPage() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="acve-heading text-4xl md:text-6xl">AI Assistant (Demo)</h1>
|
||||
<p className="text-lg text-slate-600 md:text-2xl">This page renders the same assistant UI as the global drawer.</p>
|
||||
<AssistantDrawer mode="page" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
59
app/(public)/case-studies/[slug]/page.tsx
Normal file
59
app/(public)/case-studies/[slug]/page.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";
|
||||
|
||||
export default function CaseStudyDetailPage() {
|
||||
const params = useParams<{ slug: string }>();
|
||||
const caseStudy = getCaseStudyBySlug(params.slug);
|
||||
|
||||
if (!caseStudy) {
|
||||
return (
|
||||
<div className="acve-panel p-6">
|
||||
<h1 className="text-2xl font-bold text-slate-900">Case study not found</h1>
|
||||
<p className="mt-2 text-slate-600">The requested case study slug does not exist in mock data.</p>
|
||||
<Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/case-studies">
|
||||
Back to case studies
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="acve-panel space-y-6 p-6">
|
||||
<header className="space-y-2">
|
||||
<p className="text-lg text-slate-500">
|
||||
{caseStudy.citation} ({caseStudy.year})
|
||||
</p>
|
||||
<h1 className="acve-heading text-3xl md:text-6xl">{caseStudy.title}</h1>
|
||||
<p className="text-base text-slate-600 md:text-2xl">
|
||||
Topic: {caseStudy.topic} | Level: {caseStudy.level}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl text-[#232b39] md:text-4xl">Summary</h2>
|
||||
<p className="mt-2 text-lg leading-relaxed text-slate-700 md:text-3xl">{caseStudy.summary}</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl text-[#232b39] md:text-4xl">Key legal terms explained</h2>
|
||||
<div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{caseStudy.keyTerms.map((term, index) => (
|
||||
<div key={term} className="rounded-xl border-l-4 border-accent bg-[#faf8f8] p-4">
|
||||
<p className="text-xl font-semibold text-brand md:text-3xl">{term}</p>
|
||||
<p className="mt-1 text-base text-slate-600 md:text-xl">Legal explanation block {index + 1}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-t border-slate-200 pt-5">
|
||||
<Link className="acve-button-secondary inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href="/case-studies">
|
||||
Back to Case Library
|
||||
</Link>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
85
app/(public)/case-studies/page.tsx
Normal file
85
app/(public)/case-studies/page.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { mockCaseStudies } from "@/lib/data/mockCaseStudies";
|
||||
|
||||
export default function CaseStudiesPage() {
|
||||
const [activeSlug, setActiveSlug] = useState(mockCaseStudies[0]?.slug ?? "");
|
||||
const activeCase = mockCaseStudies.find((item) => item.slug === activeSlug) ?? mockCaseStudies[0];
|
||||
|
||||
return (
|
||||
<div className="space-y-7">
|
||||
<section className="text-center">
|
||||
<p className="acve-pill mx-auto mb-4 w-fit">Case Studies</p>
|
||||
<h1 className="acve-heading text-4xl md:text-6xl">Learn from Landmark Cases</h1>
|
||||
<p className="mx-auto mt-3 max-w-4xl text-lg text-slate-600 md:text-3xl">
|
||||
Real English law cases explained with key legal terms and practical insights.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-5 lg:grid-cols-[0.9fr_1.8fr]">
|
||||
<div className="space-y-3">
|
||||
{mockCaseStudies.map((caseStudy) => {
|
||||
const isActive = caseStudy.slug === activeCase.slug;
|
||||
return (
|
||||
<button
|
||||
key={caseStudy.slug}
|
||||
className={`w-full rounded-2xl border p-4 text-left transition ${
|
||||
isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white hover:border-slate-400"
|
||||
}`}
|
||||
onClick={() => setActiveSlug(caseStudy.slug)}
|
||||
type="button"
|
||||
>
|
||||
<h2 className="text-xl text-[#232b39] md:text-3xl">{caseStudy.title}</h2>
|
||||
<p className="mt-1 text-base text-slate-500 md:text-2xl">
|
||||
[{caseStudy.year}] {caseStudy.citation}
|
||||
</p>
|
||||
<div className="mt-3 flex items-center gap-2 text-sm">
|
||||
<span className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{caseStudy.topic}</span>
|
||||
<span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">{caseStudy.level}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<article className="acve-panel p-6">
|
||||
<div className="mb-5 flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-3xl text-[#202936] md:text-6xl">{activeCase.title}</h2>
|
||||
<p className="mt-2 text-lg text-slate-500 md:text-3xl">
|
||||
{activeCase.citation} | {activeCase.year}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2 text-right text-sm">
|
||||
<p className="rounded-full bg-accent px-3 py-1 font-semibold text-white">{activeCase.level}</p>
|
||||
<p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.topic}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="border-t border-slate-200 pt-5">
|
||||
<h3 className="text-4xl text-[#232b39]">Case Summary</h3>
|
||||
<p className="mt-3 text-lg leading-relaxed text-slate-700 md:text-3xl">{activeCase.summary}</p>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h3 className="mb-3 text-4xl text-[#232b39]">Key Legal Terms Explained</h3>
|
||||
<div className="space-y-3">
|
||||
{activeCase.keyTerms.map((term) => (
|
||||
<div key={term} className="rounded-xl border-l-4 border-accent bg-[#faf8f8] p-4">
|
||||
<p className="text-xl font-semibold text-brand md:text-3xl">{term}</p>
|
||||
<p className="mt-1 text-base text-slate-600 md:text-2xl">Term explanation will be expanded in phase 2 content.</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
135
app/(public)/courses/[slug]/page.tsx
Normal file
135
app/(public)/courses/[slug]/page.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import ProgressBar from "@/components/ProgressBar";
|
||||
import { getCourseBySlug } from "@/lib/data/courseCatalog";
|
||||
import { getCourseProgressPercent, progressUpdatedEventName } from "@/lib/progress/localProgress";
|
||||
import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
|
||||
import { supabaseBrowser } from "@/lib/supabase/browser";
|
||||
import type { Course } from "@/types/course";
|
||||
|
||||
export default function CourseDetailPage() {
|
||||
const params = useParams<{ slug: string }>();
|
||||
const slug = params.slug;
|
||||
const [course, setCourse] = useState<Course | undefined>(() => getCourseBySlug(slug));
|
||||
const [hasResolvedCourse, setHasResolvedCourse] = useState(false);
|
||||
|
||||
const [userId, setUserId] = useState("guest");
|
||||
const [isAuthed, setIsAuthed] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const loadCourse = () => {
|
||||
setCourse(getCourseBySlug(slug));
|
||||
setHasResolvedCourse(true);
|
||||
};
|
||||
loadCourse();
|
||||
window.addEventListener(teacherCoursesUpdatedEventName, loadCourse);
|
||||
return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourse);
|
||||
}, [slug]);
|
||||
|
||||
useEffect(() => {
|
||||
const client = supabaseBrowser();
|
||||
if (!client) return;
|
||||
|
||||
client.auth.getUser().then(({ data }) => {
|
||||
const nextId = data.user?.id ?? "guest";
|
||||
setUserId(nextId);
|
||||
setIsAuthed(Boolean(data.user));
|
||||
});
|
||||
|
||||
const { data } = client.auth.onAuthStateChange((_event, session) => {
|
||||
setUserId(session?.user?.id ?? "guest");
|
||||
setIsAuthed(Boolean(session?.user));
|
||||
});
|
||||
|
||||
return () => data.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!course) return;
|
||||
const load = () => setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
|
||||
load();
|
||||
window.addEventListener(progressUpdatedEventName, load);
|
||||
return () => window.removeEventListener(progressUpdatedEventName, load);
|
||||
}, [course, userId]);
|
||||
|
||||
if (!course && !hasResolvedCourse) {
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<p className="text-slate-600">Loading course...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!course) {
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<h1 className="text-2xl font-bold text-slate-900">Course not found</h1>
|
||||
<p className="mt-2 text-slate-600">The requested course slug does not exist in mock data.</p>
|
||||
<Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/courses">
|
||||
Back to courses
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const redirect = `/courses/${course.slug}/learn`;
|
||||
const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;
|
||||
|
||||
return (
|
||||
<div className="grid gap-7 lg:grid-cols-[1.9fr_0.9fr]">
|
||||
<section className="pt-1">
|
||||
<Link className="inline-flex items-center gap-2 text-lg text-slate-600 hover:text-brand md:text-2xl" href="/courses">
|
||||
<span className="text-xl">{"<-"}</span>
|
||||
Back to Courses
|
||||
</Link>
|
||||
|
||||
<div className="mt-6 flex items-center gap-3 text-base text-slate-600 md:text-lg">
|
||||
<span className="rounded-full bg-accent px-4 py-1 text-base font-semibold text-white">{course.level}</span>
|
||||
<span>Contract Law</span>
|
||||
</div>
|
||||
|
||||
<h1 className="acve-heading mt-5 text-4xl leading-tight md:text-7xl">{course.title}</h1>
|
||||
<p className="mt-5 max-w-5xl text-xl leading-relaxed text-slate-600 md:text-4xl">{course.summary}</p>
|
||||
|
||||
<div className="mt-7 flex flex-wrap items-center gap-5 text-lg text-slate-600 md:text-3xl">
|
||||
<span className="font-semibold text-slate-800">Rating {course.rating.toFixed(1)}</span>
|
||||
<span>{course.students.toLocaleString()} students</span>
|
||||
<span>{course.weeks} weeks</span>
|
||||
<span>{course.lessonsCount} lessons</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="acve-panel space-y-5 p-7">
|
||||
<h2 className="text-2xl text-slate-700 md:text-4xl">Your Progress</h2>
|
||||
<div className="flex items-end justify-between">
|
||||
<p className="text-4xl font-semibold text-brand md:text-6xl">{progress}%</p>
|
||||
<p className="text-lg text-slate-600 md:text-3xl">
|
||||
{Math.round((progress / 100) * course.lessonsCount)}/{course.lessonsCount} lessons
|
||||
</p>
|
||||
</div>
|
||||
<ProgressBar value={progress} />
|
||||
<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.instructor}</p>
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Duration</p>
|
||||
<p className="mb-4 font-semibold text-slate-800">{course.weeks} weeks</p>
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
|
||||
<p className="font-semibold text-slate-800">{course.level}</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
app/(public)/courses/page.tsx
Normal file
115
app/(public)/courses/page.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import CourseCard from "@/components/CourseCard";
|
||||
import Tabs from "@/components/Tabs";
|
||||
import { getAllCourses } from "@/lib/data/courseCatalog";
|
||||
import {
|
||||
getCourseProgressPercent,
|
||||
progressUpdatedEventName,
|
||||
} from "@/lib/progress/localProgress";
|
||||
import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
|
||||
import { supabaseBrowser } from "@/lib/supabase/browser";
|
||||
import type { Course, CourseLevel } from "@/types/course";
|
||||
|
||||
const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
|
||||
|
||||
export default function CoursesPage() {
|
||||
const [activeLevel, setActiveLevel] = useState<CourseLevel>("Beginner");
|
||||
const [userId, setUserId] = useState("guest");
|
||||
const [progressBySlug, setProgressBySlug] = useState<Record<string, number>>({});
|
||||
const [courses, setCourses] = useState<Course[]>(() => getAllCourses());
|
||||
|
||||
const counts = useMemo(
|
||||
() =>
|
||||
levels.reduce(
|
||||
(acc, level) => {
|
||||
acc[level] = courses.filter((course) => course.level === level).length;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<CourseLevel, number>,
|
||||
),
|
||||
[courses],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const loadCourses = () => {
|
||||
setCourses(getAllCourses());
|
||||
};
|
||||
|
||||
loadCourses();
|
||||
window.addEventListener(teacherCoursesUpdatedEventName, loadCourses);
|
||||
return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourses);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const client = supabaseBrowser();
|
||||
if (!client) return;
|
||||
|
||||
client.auth.getUser().then(({ data }) => {
|
||||
setUserId(data.user?.id ?? "guest");
|
||||
});
|
||||
|
||||
const { data } = client.auth.onAuthStateChange((_event, session) => {
|
||||
setUserId(session?.user?.id ?? "guest");
|
||||
});
|
||||
|
||||
return () => data.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const load = () => {
|
||||
const nextProgress: Record<string, number> = {};
|
||||
for (const course of courses) {
|
||||
nextProgress[course.slug] = getCourseProgressPercent(userId, course.slug, course.lessons.length);
|
||||
}
|
||||
setProgressBySlug(nextProgress);
|
||||
};
|
||||
|
||||
load();
|
||||
window.addEventListener(progressUpdatedEventName, load);
|
||||
window.addEventListener(teacherCoursesUpdatedEventName, load);
|
||||
return () => {
|
||||
window.removeEventListener(progressUpdatedEventName, load);
|
||||
window.removeEventListener(teacherCoursesUpdatedEventName, load);
|
||||
};
|
||||
}, [courses, userId]);
|
||||
|
||||
const filteredCourses = useMemo(
|
||||
() => courses.filter((course) => course.level === activeLevel),
|
||||
[activeLevel, courses],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<section className="acve-panel p-5">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<Tabs active={activeLevel} onChange={setActiveLevel} options={levels} />
|
||||
<span className="text-base font-semibold text-slate-600">{counts[activeLevel]} courses in this level</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel px-6 py-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="mt-1 flex h-12 w-12 items-center justify-center rounded-xl bg-accent text-2xl font-semibold text-white">C</div>
|
||||
<div>
|
||||
<h1 className="text-3xl text-[#202a39] md:text-5xl">{activeLevel} Level Courses</h1>
|
||||
<p className="mt-2 text-base text-slate-600 md:text-2xl">
|
||||
{activeLevel === "Beginner"
|
||||
? "Perfect for those new to English law. Build a strong foundation with fundamental concepts and terminology."
|
||||
: activeLevel === "Intermediate"
|
||||
? "Deepen practical analysis skills with real-world drafting, contract review, and legal communication."
|
||||
: "Master complex legal reasoning and advanced writing for high-impact legal practice."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
{filteredCourses.map((course) => (
|
||||
<CourseCard key={course.slug} course={course} progress={progressBySlug[course.slug] ?? 0} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
79
app/(public)/page.tsx
Normal file
79
app/(public)/page.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
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",
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<section className="acve-panel relative overflow-hidden p-6 md:p-10">
|
||||
<div className="grid items-start gap-8 lg:grid-cols-[1.1fr_0.9fr]">
|
||||
<div>
|
||||
<p className="acve-pill mb-5 w-fit text-base">
|
||||
<span className="mr-2 text-accent">*</span>
|
||||
Professional Legal Education
|
||||
</p>
|
||||
<h1 className="acve-heading text-4xl leading-[1.1] md:text-7xl">Learn English Law with Confidence</h1>
|
||||
<p className="mt-5 max-w-2xl text-lg leading-relaxed text-slate-600 md:text-2xl">
|
||||
Courses, case studies, and guided practice designed for Latin American professionals and students.
|
||||
</p>
|
||||
<ul className="mt-7 space-y-3">
|
||||
{highlights.map((item) => (
|
||||
<li key={item} className="flex items-start gap-3 text-base text-slate-700 md:text-xl">
|
||||
<span className="mt-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-accent text-base text-accent">
|
||||
v
|
||||
</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<Link className="acve-button-primary px-8 py-3 text-lg font-semibold transition hover:brightness-105" href="/courses">
|
||||
Start Learning
|
||||
</Link>
|
||||
<Link className="acve-button-secondary px-8 py-3 text-lg font-semibold transition hover:bg-brand-soft" href="/courses">
|
||||
Explore Courses
|
||||
</Link>
|
||||
</div>
|
||||
</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-[420px] w-full object-cover object-right md:h-[600px]"
|
||||
height={900}
|
||||
priority
|
||||
src="/images/hero-reference.png"
|
||||
width={700}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-5 left-5 right-5 rounded-2xl border border-slate-300 bg-white px-5 py-4 shadow-sm">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-accent">AI</p>
|
||||
<p className="text-xl font-semibold text-slate-800">Legal Assistant Ready</p>
|
||||
<p className="text-base text-slate-500">Ask me anything about English Law</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 grid gap-4 border-t border-slate-200 pt-7 text-center text-sm 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-4 hover:border-brand hover:text-brand" href="/courses">
|
||||
Browse courses
|
||||
</Link>
|
||||
<Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 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-4 hover:border-brand hover:text-brand" href="/practice">
|
||||
Practice and exercises
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
app/(public)/practice/page.tsx
Normal file
41
app/(public)/practice/page.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import Link from "next/link";
|
||||
import { mockPracticeModules } from "@/lib/data/mockPractice";
|
||||
|
||||
export default function PracticePage() {
|
||||
return (
|
||||
<div className="space-y-7">
|
||||
<section className="text-center">
|
||||
<p className="acve-pill mx-auto mb-4 w-fit">Practice and Exercises</p>
|
||||
<h1 className="acve-heading text-4xl md:text-6xl">Master Your Skills</h1>
|
||||
<p className="mx-auto mt-3 max-w-4xl text-lg text-slate-600 md:text-3xl">
|
||||
Interactive exercises designed to reinforce your understanding of English law concepts.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-3">
|
||||
{mockPracticeModules.map((module, index) => (
|
||||
<Link
|
||||
key={module.slug}
|
||||
href={`/practice/${module.slug}`}
|
||||
className={`rounded-2xl border p-6 shadow-sm transition hover:-translate-y-0.5 ${
|
||||
index === 0 ? "border-brand bg-white" : "border-slate-300 bg-white"
|
||||
}`}
|
||||
>
|
||||
<div className="mb-3 text-3xl text-brand md:text-4xl">{index === 0 ? "A/" : index === 1 ? "[]" : "O"}</div>
|
||||
<h2 className="text-2xl text-[#222a38] md:text-4xl">{module.title}</h2>
|
||||
<p className="mt-2 text-lg text-slate-600 md:text-2xl">{module.description}</p>
|
||||
<p className="mt-4 text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||
{module.isInteractive ? "Interactive now" : "Coming soon"}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="acve-panel p-5 text-center">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||
Open a module to start the full interactive flow
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user