Menu

Overview

Welcome to the ICLP Platform documentation. This guide covers how we present training and programs in Corporate Law, Policy, and Governance Global, including course structure, enrollment flow, branding and theme, navigation, and APIs.

The platform is built with Next.js App Router, React, Tailwind CSS, TypeScript, Framer Motion (interactions), and next-themes for light/dark modes.

  • Courses and Programs presented on the homepage and at /courses.
  • Legal & Policy pages: Ethics, Compliance, Privacy Policy, Terms & Conditions.
  • Case Studies with dynamic routes and cinematic narrative.
  • Brand-consistent header/footer and mobile navigation.

Courses & Programs

Structure

Courses are listed on the homepage in the Courses Preview and in the dedicated page at /courses. Each course card links to a detailed page via slug routing.

  • Route: src/app/courses/[slug]/
  • Data: src/app/data/programs.ts (labels, descriptions, categories)
  • CTAs: "Explore Courses" or "Details →" direct to /courses.
Creating a new course
  1. Add course metadata in src/app/data/programs.ts.
  2. Create a new page under src/app/courses/[slug]/ using the slug.
  3. Ensure the homepage preview reflects category and title consistency.

Enrollment Flow

The enrollment experience is a multi-step form located at /enroll. It collects participant details, selects programs, and confirms submission.

  • Route: src/app/enroll/page.tsx and components in src/app/enroll/components/
  • Validation: Client-side checks and user feedback on required fields.
  • Next step: Integrate server-side API to process enrollment and send confirmations.

Branding & Theme

Theme System

We use next-themes with attribute='class' and storage key iclp_theme. The Theme Toggle and Onboarding overlay ensure reliable light/dark selection.

  • Provider: src/app/layout.tsx configured with ThemeProvider.
  • Toggle: src/app/components/layout/header/ThemeToggle.tsx
  • Onboarding: src/app/components/layout/ThemeOnboarding.tsx
Brand Assets & UI

Logos and images live under /public/logo and /public/images. UI uses Tailwind with custom gradients and utilities (e.g., ice-cta-bg) for consistent CTAs and hero sections.

API Reference

Local API routes power data and submissions. Key endpoints:

  • /api/page-data: serves structured page content.
  • /api/footer-data: returns footer links/config.
  • /api/contact: contact form submission (placeholder; integrate provider).

Implement input validation and add an email provider or CRM integration for production.

Data Model

Static data for partners, programs, and case studies is available under src/app/data.

  • programs.ts: course listings and metadata.
  • partners.ts: institutional partners for brand presence.
  • caseStudies.ts: case studies index data.

For dynamic content, consider a headless CMS or database layer and align types in src/app/types/.