80 lines
3.6 KiB
TypeScript
Executable File
80 lines
3.6 KiB
TypeScript
Executable File
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="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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<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
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|