80 lines
3.6 KiB
TypeScript
80 lines
3.6 KiB
TypeScript
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>
|
|
);
|
|
}
|