mango-app System Requirements Document

1. Introduction

The purpose of this document is to outline the system requirements for the "mango-app," a digital marketing agency platform aimed at reaching international clients. The platform will provide services such as Shopify, WordPress, custom website development, graphics, UI/UX design, and SEO.

2. System Overview

The mango-app is designed to serve as a comprehensive digital marketing platform that showcases the agency's services and capabilities. The platform will be responsive, visually appealing, and optimized for international reach. It will include features such as service listings, portfolio showcases, contact forms, and potentially a logo design.

3. Functional Requirements

• As a User, I should be able to view the services offered by the agency, including Shopify, WordPress, and custom website development.
• As a User, I should be able to view examples of previous work in a portfolio section.
• As a User, I should be able to contact the agency via a contact form.
• As a User, I should be able to view information about the agency's expertise in graphics, UI/UX design, and SEO.
• As a User, I should be able to navigate the website easily on both desktop and mobile devices.

4. User Personas

• Admin: Manages the content and updates the website with new services and portfolio items.
• User: Potential clients looking to learn about the agency's services and contact them for business inquiries.

5. Core User Flows

• User visits the homepage -> navigates to services section -> views detailed service offerings.
• User visits the portfolio section -> browses through previous projects -> decides to contact the agency.
• User fills out the contact form -> submits inquiry -> receives confirmation of submission.

6. Visuals Colors and Theme

• primary: #1A73E8 (a deep blue representing trust and professionalism)
• primary_light: #E8F0FE (a light blue for hover states and secondary UI)
• secondary: #FF6F61 (a coral hue for headlines and emphasis)
• accent: #FFD700 (a vibrant gold for CTAs and active states)
• highlight: #FFA500 (a warm orange for hover states and notifications)
• bg: #FFFFFF (a clean white background)
• surface: rgba(240, 240, 240, 0.8) (a light grey for card/panel backgrounds)
• text: #333333 (a dark grey for primary text)
• text_muted: #777777 (a softer grey for secondary text)
• border: rgba(200, 200, 200, 0.2) (a subtle grey for borders)

7. Signature Design Concept

The homepage of the mango-app will feature an interactive 3D globe using @react-three/fiber and @react-three/drei. Users can rotate the globe to explore different service offerings represented by icons placed on various continents. Hovering over an icon will display a brief description of the service, and clicking will navigate to a detailed service page. This concept emphasizes the agency's international reach and dynamic service offerings.

8. Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements such as atmospheric blobs and distant shapes will translate at different speeds, while the main content scrolls naturally. This approach will provide a visually rich first impression, suitable for a marketing-focused platform.

9. Non-Functional Requirements

• The website must be responsive and function correctly on all major browsers and devices.
• The website should load within 3 seconds on a standard internet connection.
• The website should be optimized for SEO to enhance visibility in search engines.

10. Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB
• AI Models: Not applicable
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

11. Assumptions and Constraints

• The agency does not currently have a company name or logo, which will be developed as part of the project.
• The platform is intended to reach an international audience, requiring multilingual support in the future.
• The website should be designed to accommodate future expansions of services and portfolio items.

12. Glossary

• SEO: Search Engine Optimization
• UI/UX: User Interface/User Experience
• CTA: Call to Action
• 3D Globe: A three-dimensional representation of the Earth used for interactive navigation on the homepage.