# Connect2Learn - System Knowledge Base

## Overview
Connect2Learn is a state-of-the-art interactive educational platform. Designed to seamlessly connect prospective students and their parents with top-tier educators, the platform focuses heavily on engaging micro-animations, concrete social proof, and a highly streamlined onboarding funnel. It aims to present a "premium" frontend experience.

## Architecture & Technology Stack
- **Core Framework**: Next.js 15 (Leveraging the App Router paradigm).
- **Interface Library**: React 19.
- **Styling Architecture**: Tailwind CSS v4, utilizing a utility-first styling methodology for high-performance visual compliance.
- **Component Strategy**: Built upon `shadcn/ui` to guarantee accessible, unstyled core primitives that are highly customizable.
- **Animation Ecosystem**: Deeply integrates `framer-motion` for complex scroll-linked animations, layout/route transitions, and interactive UI states. `lottie-react` is deployed for rich vector-based timeline animations.
- **Typography & Assets**: Uses optimized Next.js font rendering and local SVG/WebP assets for blazingly fast metrics.

## Engineering Standards & Conventions
- **Server vs Client**: React Server Components (RSC) are utilized by default to keep bundle sizes lean. The `"use client"` directive is explicitly reserved for the interactive extremities of the DOM tree (e.g., forms, event listeners, and `framer-motion` animatable shells).
- **Typing**: Strict TypeScript protocols are enforced across all component props, states, and data schemas. Forms utilize `zod` alongside `react-hook-form` to ensure high-fidelity type safety during data ingestion.
- **Modularity**: Components are broken entirely into their smallest atomic representations, ensuring standard design language synchronization.

## Core Application Routing Topology

### 1. Main Discovery Page (`/`)
The central hub engineered as a high-conversion funnel.
- **Hero Module**: Anchors the value proposition immediately with strong imagery and primary Calls to Action (CTAs).
- **Features Breakdown**: Validates pedagogical methodologies and visually confirms educator quality.
- **Conversion Pathways**: Persistently guides users sequentially toward scheduling a demo.

### 2. Social Proof Ecosystem (`/reviews`)
A computationally rich and visually robust trust-building interface.
- Utilizes stagger-layout animations to render large grids reliably.
- Implements interactive "satisfaction spotlight cards" that dynamically react to viewport scroll depth and cursor proximity.
- Features dual-axis auto-scrolling carousels segmenting distinct feedback classes (Students vs. Parents).
- Injects YouTube-embedded testimonials with lazy-loading constraints.
- Hosts an interactive Animated FAQ Accordion to organically resolve immediate user objections.

### 3. Curriculum Catalog (`/courses`)
An interactive, heavily visual catalog showcasing subjects, tutoring tracks, curricula methodologies, and actionable learning milestones.

### 4. Interactive Demo Booking Sequence (`/demo`)
A frictionless conversational form sequence that manages internal state gracefully. Captures lead demographics accurately minimizing dropout vectors without relying on full-page reloads.

### 5. Educator Showcases (`/teacher` & `/teacher-application`)
- `/teacher` provides public indexing of detailed portfolios, qualifications, localized specialties, and immediate availability for Connect2Learn educators.
- `/teacher-application` routes prospective staff through an internal evaluation questionnaire. 

### 6. Secure Authentication (`/login`)
A secure portal routing verified accounts into their distinct administrative dashboards.

### 7. Governance (`/privacy-policy` & `/terms-and-conditions`)
Standardized static documents handling legal disclaimers, usage protocols, and PII protections.

---
**Maintained by**: Connect2Learn Engineering Team
**Last Updated**: April 2026