CDGAssist System Requirements Document

1. Introduction

CDGAssist is a comprehensive web platform designed to manage claims for CDG Prévoyance in Morocco, specifically targeting affiliates. The platform aims to provide a simple, readable, and accessible user experience.

2. System Overview

CDGAssist will be developed using Next.js 15 with Page Router, TailwindCSS, and shadcn/ui. The platform will facilitate the submission, tracking, and management of claims, ensuring compliance with local regulations and providing an accessible interface for its users.

3. Functional Requirements

• As a User, I should be able to view an animated hero section with statistics and contact information on the homepage.
• As a User, I should be able to submit a claim through a three-step form with a natural audio guide.
• As a User, I should receive a ticket number in the format CDG-2026-XXXXXX upon claim submission.
• As a User, I should be able to track my claim using the ticket number and view its status on a timeline.
• As a User, I should be able to contest a decision with three options and receive confirmation within four days.
• As a User, I should be able to access information about security and data privacy, including TLS and local laws.
• As a User, I should be able to learn about the mission, values, and statistics of CDG Prévoyance.
• As a User, I should be able to interact with a floating chatbot for assistance, with escalation options for emergencies.
• As a User, I should see a visible call button for immediate assistance.
• As a User, I should experience a scroll progress bar and breadcrumb navigation.
• As a User, I should be able to access a FAQ section with 10 questions.
• As a User, I should receive toast notifications for important updates.
• As a User, I should experience real-time validation during form submissions.
• As a User, I should see an animated logo during page loading.

4. User Personas

• User: Affiliates using the platform to manage their claims.
• Admin: To be developed later for administrative purposes.

5. Core User Flows

• User visits homepage -> views hero section -> accesses contact information.
• User submits a claim -> follows three-step form -> receives ticket number.
• User tracks claim -> enters ticket number -> views timeline status.
• User contests decision -> selects option -> submits form -> receives confirmation.
• User interacts with chatbot -> receives assistance or escalates issue.

6. Visuals Colors and Theme

• primary: #003A70 (Navy)
• primary_light: #0072BC (Blue)
• secondary: #0099D6 (Cyan)
• accent: #16A34A (Green)
• highlight: #FFCC00 (Gold)
• bg: #FFFFFF (White)
• surface: rgba(240, 240, 240, 0.8)
• text: #000000 (Black)
• text_muted: #666666 (Gray)
• border: rgba(0, 58, 112, 0.2)

7. Signature Design Concept

The homepage will feature an interactive gradient animation that responds to user scroll, creating a dynamic visual experience. The hero section will include animated statistics that count up as they come into view. The contact section will have interactive icons that expand with hover effects. The design will use framer-motion for smooth transitions and animations.

8. Interaction Model & Motion Direction

• Interaction Model: Parallax
• The landing page will feature layered depth with scroll-triggered animations, providing a visually rich first impression. Internal pages will maintain a static layout for clarity and ease of use.

9. Non-Functional Requirements

• The platform must be responsive and mobile-first.
• All links must be functional and UI ready for production.
• Compliance with local data protection laws (law 09-08, CNDP).

10. Tech Stack

• Frontend: Next.js 15, TailwindCSS, shadcn/ui
• Backend: Supabase
• Database: Supabase with RLS enabled

11. Assumptions and Constraints

• The platform will be used primarily by affiliates in Morocco.
• Accessibility features such as text zoom and voice reader are critical.
• The system must handle file uploads securely.

12. Glossary

• CDG: Caisse de Dépôt et de Gestion
• RLS: Row-Level Security
• TLS: Transport Layer Security
• CNDP: Commission Nationale de Contrôle de la Protection des Données à Caractère Personnel