Implemented the Education information subpage under "International"

src/app/(app)/[lang]/international/education-information/components/CodeOfStudiesSection.tsx

@@ -0,0 +1,58 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EducationInformationData } from "./types";
+import CompletionCurriculumSection from "./CompletionCurriculumSection";
+import ProblemsDuringStudiesSection from "./ProblemsDuringStudiesSection";
+
+type Props = Pick<EducationInformationData, "code_of_studies" | "completion" | "curriculum">;
+
+export default function CodeOfStudiesSection({ code_of_studies, completion, curriculum }: Props) {
+  return (
+    <div className="flex flex-col gap-4 md:gap-6">
+      <Card className="group hover:shadow-md transition-all duration-300">
+        <CardContent className="p-4 md:p-6">
+          <div className="prose max-w-none text-gray-700 space-y-4">
+            <div>
+              <h4 className="font-semibold text-gray-900">{code_of_studies.study_levels.title}</h4>
+              <ul className="list-disc pl-5 mt-1">
+                {code_of_studies.study_levels.items.map((item, i) => (
+                  <li key={i}>{item}</li>
+                ))}
+              </ul>
+              <p className="mt-1">{code_of_studies.study_levels.extra}</p>
+            </div>
+
+            <div>
+              <h4 className="font-semibold text-gray-900">{code_of_studies.languages.title}</h4>
+              <ul className="list-disc pl-5 mt-1">
+                {code_of_studies.languages.items.map((item, i) => (
+                  <li key={i}>{item}</li>
+                ))}
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="font-semibold text-gray-900">{code_of_studies.formats.title}</h4>
+              <ul className="list-disc pl-5 mt-1">
+                {code_of_studies.formats.items.map((item, i) => (
+                  <li key={i}>{item}</li>
+                ))}
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="font-semibold text-gray-900">{code_of_studies.subjects.title}</h4>
+              <ul className="list-disc pl-5 mt-1">
+                {code_of_studies.subjects.items.map((item, i) => (
+                  <li key={i}>{item}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <ProblemsDuringStudiesSection code_of_studies={code_of_studies} />
+      <CompletionCurriculumSection completion={completion} curriculum={curriculum} />
+    </div>
+  );
+}

src/app/(app)/[lang]/international/education-information/components/CompletionCurriculumSection.tsx

@@ -0,0 +1,36 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EducationInformationData } from "./types";
+
+type Props = Pick<EducationInformationData, "completion" | "curriculum">;
+
+export default function CompletionCurriculumSection({ completion, curriculum }: Props) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
+      <Card className="group hover:shadow-md transition-all duration-300">
+        <CardContent className="p-4 md:p-6">
+          <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors mb-2">
+            {completion.title}
+          </h3>
+          <div className="prose max-w-none text-gray-700">
+            {completion.paragraphs.map((p, i) => (
+              <p key={i} className="mt-2">{p}</p>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="group hover:shadow-md transition-all duration-300">
+        <CardContent className="p-4 md:p-6">
+          <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors mb-2">
+            {curriculum.title}
+          </h3>
+          <div className="prose max-w-none text-gray-700">
+            {curriculum.paragraphs.map((p, i) => (
+              <p key={i} className="mt-2">{p}</p>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/(app)/[lang]/international/education-information/components/EducationInformationContent.tsx

@@ -0,0 +1,54 @@
+import { EducationInformationData } from "./types";
+import SubjectDescriptionSection from "./SubjectDescriptionSection";
+import RegistrationPeriodsSection from "./RegistrationPeriodsSection";
+import LateRegistrationSection from "./LateRegistrationSection";
+import CodeOfStudiesSection from "./CodeOfStudiesSection";
+import EvaluationSection from "./EvaluationSection";
+import OhvSection from "./OhvSection";
+import SemesterInfoSection from "./SemesterInfoSection";
+import TdkSection from "./TdkSection";
+import { SectionHeader } from "@/components/common/SectionHeader";
+
+export default function EducationInformationContent({ content }: { content: EducationInformationData }) {
+  return (
+    <div className="flex flex-col gap-16 lg:px-4 px-2">
+      <section id="subject-description" className="scroll-mt-28 space-y-8">
+        <SectionHeader title={content.nav.subject_description} />
+        <SubjectDescriptionSection subject_description={content.subject_description} />
+      </section>
+
+      <section id="registration-periods" className="scroll-mt-28 space-y-8">
+        <SectionHeader title={content.nav.registration_periods} />
+        <div className="flex flex-col gap-4 md:gap-6">
+          <RegistrationPeriodsSection registration_periods={content.registration_periods} />
+          <LateRegistrationSection late_registration={content.late_registration} />
+        </div>
+      </section>
+
+      <section id="code-of-studies" className="scroll-mt-28 space-y-8">
+        <SectionHeader title={content.nav.code_of_studies} />
+        <CodeOfStudiesSection 
+          code_of_studies={content.code_of_studies}
+          completion={content.completion}
+          curriculum={content.curriculum}
+        />
+      </section>
+
+      <section id="evaluation" className="scroll-mt-28 space-y-8">
+        <SectionHeader title={content.nav.evaluation} />
+        <EvaluationSection evaluation={content.evaluation} />
+        <OhvSection evaluation={content.evaluation} />
+      </section>
+
+      <section id="semester-info" className="scroll-mt-28 space-y-8">
+        <SectionHeader title={content.nav.semester_info} />
+        <SemesterInfoSection semester_info={content.semester_info} />
+      </section>
+
+      <section id="tdk" className="scroll-mt-28 space-y-8">
+        <SectionHeader title={content.nav.tdk} />
+        <TdkSection tdk={content.tdk} />
+      </section>
+    </div>
+  );
+}

src/app/(app)/[lang]/international/education-information/components/EvaluationSection.tsx

@@ -0,0 +1,49 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EducationInformationData } from "./types";
+
+type Props = Pick<EducationInformationData, "evaluation">;
+
+export default function EvaluationSection({ evaluation }: Props) {
+  return (
+    <Card className="group hover:shadow-md transition-all duration-300">
+      <CardContent className="p-4 md:p-6">
+        <div className="prose max-w-none text-gray-700 space-y-4">
+          <div>
+            <h4 className="font-semibold text-gray-900">{evaluation.assessment_goals.title}</h4>
+            <p className="mt-1">{evaluation.assessment_goals.intro}</p>
+            <ul className="list-disc pl-5 mt-1">
+              {evaluation.assessment_goals.items.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-gray-900 text-lg">{evaluation.assessment_types.title}</h4>
+
+            <h5 className="font-medium mt-2">{evaluation.assessment_types.diagnostic.title}</h5>
+            <ul className="list-disc pl-5 mt-1">
+              {evaluation.assessment_types.diagnostic.items.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+
+            <h5 className="font-medium mt-3">{evaluation.assessment_types.formative.title}</h5>
+            <ul className="list-disc pl-5 mt-1">
+              {evaluation.assessment_types.formative.items.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+
+            <h5 className="font-medium mt-3">{evaluation.assessment_types.summative.title}</h5>
+            <ul className="list-disc pl-5 mt-1">
+              {evaluation.assessment_types.summative.items.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/app/(app)/[lang]/international/education-information/components/LateRegistrationSection.tsx

@@ -0,0 +1,38 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EducationInformationData } from "./types";
+
+type Props = Pick<EducationInformationData, "late_registration">;
+
+export default function LateRegistrationSection({ late_registration }: Props) {
+  return (
+    <Card className="group hover:shadow-md transition-all duration-300">
+      <CardContent className="p-4 md:p-6">
+        <div className="flex flex-col gap-2 md:gap-3">
+          <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
+            {late_registration.title}
+          </h3>
+          <div className="prose max-w-none text-gray-700 space-y-4">
+            {late_registration.paragraphs.map((p) => (
+              <p key={p} className="leading-relaxed">{p}</p>
+            ))}
+            <ul className="list-disc pl-5 mt-1">
+              {late_registration.requests.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+            <div>
+              <h4 className="font-semibold text-gray-900">{late_registration.not_own_fault.title}</h4>
+              <p className="mt-1">{late_registration.not_own_fault.intro}</p>
+              <ul className="list-disc pl-5 mt-1">
+                {late_registration.not_own_fault.items.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+              <p className="mt-2 text-sm italic">{late_registration.not_own_fault.outro}</p>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/app/(app)/[lang]/international/education-information/components/OhvSection.tsx

@@ -0,0 +1,24 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EducationInformationData } from "./types";
+
+type Props = Pick<EducationInformationData, "evaluation">;
+
+export default function OhvSection({ evaluation }: Props) {
+  return (
+    <Card className="group hover:shadow-md transition-all duration-300">
+      <CardContent className="p-4 md:p-6">
+        <div className="prose max-w-none text-gray-700">
+          <h4 className="font-semibold text-gray-900 group-hover:text-[#862633] transition-colors">{evaluation.ohv.title}</h4>
+          <p className="mt-1">{evaluation.ohv.intro}</p>
+          <h5 className="font-medium mt-2">{evaluation.ohv.why_matters.title}</h5>
+          <ul className="list-disc pl-5 mt-1">
+            {evaluation.ohv.why_matters.items.map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}
+          </ul>
+          <p className="mt-2 text-sm italic">{evaluation.ohv.why_matters.extra}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/app/(app)/[lang]/international/education-information/components/ProblemsDuringStudiesSection.tsx

@@ -0,0 +1,34 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EducationInformationData } from "./types";
+
+type Props = Pick<EducationInformationData, "code_of_studies">;
+
+export default function ProblemsDuringStudiesSection({ code_of_studies }: Props) {
+  return (
+    <Card className="group hover:shadow-md transition-all duration-300">
+      <CardContent className="p-4 md:p-6">
+        <h4 className="font-semibold text-gray-900 text-lg mb-4 group-hover:text-[#862633] transition-colors">
+          {code_of_studies.problems.title}
+        </h4>
+        <div className="space-y-4">
+          <div>
+            <h5 className="font-medium text-gray-800">{code_of_studies.problems.professor.title}</h5>
+            <ul className="list-disc pl-5 mt-1">
+              {code_of_studies.problems.professor.items.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <h5 className="font-medium text-gray-800">{code_of_studies.problems.students_council.title}</h5>
+            <ul className="list-disc pl-5 mt-1">
+              {code_of_studies.problems.students_council.items.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/app/(app)/[lang]/international/education-information/components/RegistrationPeriodsSection.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EducationInformationData } from "./types";
+
+type Props = Pick<EducationInformationData, "registration_periods">;
+
+export default function RegistrationPeriodsSection({ registration_periods }: Props) {
+  return (
+    <Card className="group hover:shadow-md transition-all duration-300">
+      <CardContent className="p-4 md:p-6">
+        <div className="flex flex-col gap-2 md:gap-3">
+          <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
+            {registration_periods.title}
+          </h3>
+          <div className="prose max-w-none text-gray-700 space-y-2">
+            {registration_periods.paragraphs.map((p, i) => (
+              <p key={i} className="leading-relaxed">{p}</p>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/app/(app)/[lang]/international/education-information/components/SemesterInfoSection.tsx

@@ -0,0 +1,43 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EducationInformationData } from "./types";
+
+type Props = Pick<EducationInformationData, "semester_info">;
+
+export default function SemesterInfoSection({ semester_info }: Props) {
+  return (
+    <Card className="group hover:shadow-md transition-all duration-300">
+      <CardContent className="p-4 md:p-6">
+        <div className="flex flex-col gap-2 md:gap-3">
+          <div className="prose max-w-none text-gray-700 space-y-4">
+            <div>
+              <h4 className="font-semibold text-gray-900">{semester_info.absences.title}</h4>
+              {semester_info.absences.paragraphs.map((p, i) => (
+                <p key={i} className="mt-1">{p}</p>
+              ))}
+            </div>
+
+            <div className="border-t pt-4">
+              <h4 className="font-semibold text-gray-900">{semester_info.how_it_works.title}</h4>
+              <p className="mt-1">{semester_info.how_it_works.intro}</p>
+              <div className="mt-3 space-y-4">
+                {semester_info.how_it_works.stages.map((stage, i) => (
+                  <div key={i} className="bg-gray-50 p-4 rounded-md border border-gray-100">
+                    <h5 className="font-bold text-[#862633]">{stage.title}</h5>
+                    <p className="mt-1">{stage.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="border-t pt-4">
+              <h4 className="font-semibold text-gray-900">{semester_info.calendar.title}</h4>
+              {semester_info.calendar.paragraphs.map((p, i) => (
+                <p key={i} className="mt-1">{p}</p>
+              ))}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}