First commit

app/(public)/page.tsx

@@ -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>
+  );
+}