Sweet-Bot System Requirements Document

1. Introduction

Welcome to the System Requirements Document for the Sweet-Bot project. This document outlines the requirements for creating an interactive website for the Digi Dhamma trading-related Telegram group. The website will focus on forex and cryptocurrency trading, providing users with signals, EA development, and indicator development services.

2. System Overview

The Sweet-Bot website will serve as an online platform for the Digi Dhamma community, offering insights into forex and cryptocurrency trading. The website will be interactive, featuring smooth scrolling and a preloader. It will include sections such as About, Pricing, FAQ, Previous Trade Screenshots, and Membership Pricing. The primary call-to-action will be to join the Telegram group.

Key features include:

• Interactive design with smooth scrolling
• Preloader with a 3.5-second duration displaying "Start of something big"
• Carousel format for displaying approximately 8 trade screenshots
• Mobile and desktop-friendly layout

3. Functional Requirements

• As a User, I should be able to view a preloader for 3.5 seconds that says "Start of something big."
• As a User, I should experience smooth scrolling throughout the website.
• As a User, I should be able to view the About section to learn about Digi Dhamma's mission and services.
• As a User, I should be able to view the Pricing section to understand the cost of services.
• As a User, I should be able to view the FAQ section to get answers to common questions.
• As a User, I should be able to view previous trade screenshots in a carousel format.
• As a User, I should be able to view membership pricing details.
• As a User, I should be able to join the Telegram group via a call-to-action button.
• As a User, I should experience a modern, high-performance landing page with specific design elements using React, TypeScript, Tailwind CSS v4, and Motion.

4. User Personas

• Trader: Interested in forex and cryptocurrency trading, looking for signals and strategies.
• Developer: Interested in EA and indicator development services.
• Community Member: Engaged in the Digi Dhamma community, looking to share and grow with others.

5. Core User Flows

• User visits the website -> Views preloader -> Navigates through sections (About, Pricing, FAQ) -> Views trade screenshots in carousel -> Clicks CTA to join Telegram group.
• User accesses Pricing section -> Reviews membership and service costs -> Decides to join the VIP group or purchase EA/Indicator.
• User interacts with the modern landing page -> Experiences animations and transitions -> Engages with the content and navigates to desired sections.

6. Visuals Colors and Theme

• primary: #001F54 (Navy Blue)
• primary_light: #3A5FCD (Light Navy Blue)
• secondary: #FF8C00 (Orange)
• accent: #FFD700 (Yellow)
• highlight: #FFA500 (Amber)
• bg: #FFFFFF (White)
• surface: rgba(255, 255, 255, 0.9)
• text: #000000 (Black)
• text_muted: #555555 (Gray)
• border: rgba(0, 31, 84, 0.2)

7. Signature Design Concept

The Sweet-Bot website will feature an interactive "Trading Galaxy" homepage. Users will navigate through a 3D galaxy where each star represents a section of the website. Hovering over a star will reveal a brief description, and clicking will transport the user to that section. The galaxy will subtly rotate as users scroll, providing a dynamic and engaging experience. This concept will be implemented using @react-three/fiber and @react-three/drei for 3D interactions, ensuring a captivating first impression.

8. Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, with layered depth via scroll. Decorative elements like stars and nebulae will translate at different speeds, creating a sense of depth. Real content will scroll naturally, providing a visually rich first impression. Internal pages will maintain a "static" interaction model for clarity and ease of use.

9. Non-Functional Requirements

• The website must be optimized for both mobile and desktop views.
• The carousel must support approximately 8 images.
• The website must be deployable on Netlify.
• The landing page must be built using React, TypeScript, Tailwind CSS v4, and Motion.

10. Tech Stack

• Frontend: React for Web, TypeScript, Tailwind CSS v4, Motion
• Backend: Not specified, assumed to be static content
• Deployment: Netlify

11. Assumptions and Constraints

• The website will primarily serve users interested in forex and cryptocurrency trading.
• The website must be interactive and visually engaging to attract and retain users.
• The preloader and smooth scrolling are essential for the user experience.
• The design must incorporate specific libraries and styling as detailed.

12. Glossary

• EA: Expert Advisor, a software that provides trading signals.
• CTA: Call to Action, a prompt to encourage user interaction.
• Carousel: A rotating set of images or content.
• Parallax: A scrolling effect where background images move slower than foreground images, creating a sense of depth.