cerbaservices-BTP System Requirements Document

Introduction

The cerbaservices-BTP project aims to create a professional and streamlined website for cerbaservices.com, a company operating in the construction and public works sector (BTP). The website will feature standard corporate presentation menus, a contact form, and links to social media. The design will reflect the BTP sector's professionalism and incorporate African connotations where possible.

System Overview

The cerbaservices-BTP website will serve as a digital presence for the company, showcasing its services, projects, and contact information. It will include an admin and user interface for easy content management, allowing modifications, additions, or deletions of site content. The platform will be designed with the latest design standards as of 2026, ensuring a modern and efficient user experience.

Functional Requirements

• As a Visitor, I should be able to view the company's services and projects.
• As a Visitor, I should be able to access a contact form to reach out to the company.
• As a Visitor, I should be able to find links to the company's social media profiles.
• As an Admin, I should be able to modify, add, or delete content on the website.
• As a User, I should be able to easily navigate through the website's menus and sections.

User Personas

• Visitor: Individuals interested in learning about cerbaservices-BTP's offerings and contacting the company.
• Admin: Personnel responsible for managing website content and ensuring information is up-to-date.
• User: General users who interact with the website for information and contact purposes.

Core User Flows

• Visitor navigates to the homepage -> views services and projects -> accesses contact form -> submits inquiry.
• Admin logs into the admin panel -> selects content to modify -> updates content -> saves changes.
• User visits the website -> explores menus -> finds social media links -> follows or interacts with the company online.

Visuals Colors and Theme

• primary: #004080 (deep blue)
• primary_light: #6699CC (light blue)
• secondary: #FF6600 (vibrant orange)
• accent: #FFD700 (gold)
• highlight: #FFA500 (amber)
• bg: #F5F5F5 (light grey)
• surface: rgba(255, 255, 255, 0.9) (white)
• text: #333333 (dark grey)
• text_muted: #777777 (medium grey)
• border: rgba(0, 64, 128, 0.2) (subtle blue)

Signature Design Concept

The homepage of cerbaservices-BTP will feature an interactive 3D construction site model using @react-three/fiber. Users can explore different sections of the site by clicking on various parts of the model, such as cranes or buildings, which will animate and reveal more information about the company's services and projects. This immersive experience will be enhanced with subtle animations and transitions using framer-motion, providing a dynamic and engaging user interface.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll through the site. Decorative elements like construction tools and site plans will move at different speeds, adding to the storytelling aspect of the website. Internal pages will maintain a "static" interaction model for clarity and ease of use.

Non-Functional Requirements

• The website must load within 3 seconds on standard broadband connections.
• The platform should be scalable to accommodate increased traffic.
• The design must be responsive and accessible on all devices.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB
• Local orchestration: Docker, docker-compose
• Server-side orchestration: Kubernetes

Assumptions and Constraints

• The website will be hosted on a cloud platform supporting Docker and Kubernetes.
• The admin interface will be intuitive and require minimal training for content management.
• The design will incorporate African cultural elements subtly to enhance brand identity.

Glossary

• BTP: Building and Public Works
• Admin: Administrator responsible for managing website content
• User: General visitor or user of the website
• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.