magma-idea

Introduction

The project "magma-idea" aims to create a website identical to www.trbnofficial.com, with the only change being the name, which should be updated to "Resilient Bankers". This document outlines the system requirements for the project.

System Overview

The system will replicate the existing functionalities and design of the www.trbnofficial.com website. The primary objective is to ensure that all features, user interactions, and visual elements remain consistent with the original site, except for the branding name, which will be "Resilient Bankers".

Functional Requirements

• As a User, I should see the website branded as "Resilient Bankers" instead of the original name.
• As a User, I should experience the same navigation and layout as www.trbnofficial.com.
• As a User, I should have access to all the features and functionalities available on www.trbnofficial.com.

User Personas

• General User: Individuals visiting the site for information and services provided by "Resilient Bankers".

Core User Flows

• User visits the homepage -> User navigates through the site using the menu -> User accesses desired information or service.

Visuals Colors and Theme

The color palette and theme will mirror those of www.trbnofficial.com, ensuring brand consistency with the new name "Resilient Bankers".

• primary: #004080 (Deep Blue)
• primary_light: #336699 (Light Blue)
• secondary: #FF6600 (Orange)
• accent: #FFCC00 (Gold)
• highlight: #FF9900 (Amber)
• bg: #FFFFFF (White)
• surface: rgba(240, 240, 240, 0.8)
• text: #000000 (Black)
• text_muted: #666666 (Gray)
• border: rgba(200, 200, 200, 0.5)

Signature Design Concept

The homepage will feature an interactive 3D model of a bank vault that opens as users scroll down, revealing different sections of the website. This will be achieved using @react-three/fiber for 3D rendering and gsap for scroll-triggered animations. Users can click on different parts of the vault to navigate to various sections of the site, providing an engaging and memorable experience.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll. This will enhance the storytelling aspect of the website, making the user experience more immersive and visually appealing.

Non-Functional Requirements

• The website must load within 3 seconds on a standard broadband connection.
• It should be accessible and responsive across all major devices and browsers.
• The system must ensure data security and user privacy in compliance with local regulations.

Tech Stack

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

Assumptions and Constraints

• The existing design and functionality of www.trbnofficial.com will be fully replicated.
• The project will adhere to the same performance and security standards as the original site.
• The name "Resilient Bankers" will be the only branding change.

Glossary

• Parallax: A visual effect where background images move slower than foreground images, creating an illusion of depth.
• 3D Model: A digital representation of a three-dimensional object.
• React: A JavaScript library for building user interfaces.
• FastAPI: A modern, fast web framework for building APIs with Python.
• Docker: A platform for developing, shipping, and running applications in containers.
• Kubernetes: An open-source system for automating the deployment, scaling, and management of containerized applications.