Product Architecture

Technology Stack

Frontend Technologies

├── HTML5           # Semantic markup
├── CSS3            # Modern styling (Grid, Flexbox, animations)
├── JavaScript ES6+ # Interactive functionality and animations
├── Chart.js        # Data visualization
├── Font Awesome    # Icon library
└── Google Fonts    # Inter font family

Design System

• Primary Colors: Dark theme (#0a0a0f)

• Accent Colors: Cyan (#00D9C0), Blue (#0088CC)

• Visual Effects: Glassmorphism, gradients, smooth animations

• Responsive Breakpoints:

  • Large screens (≥1024px): 3-column layout

  • Tablet (768-1023px): 2-column layout

  • Mobile (480-767px): 1-column layout

  • Small screens (<480px): Optimized spacing

Project Structure

aware_aitrading/
├── index.html          # Homepage (all core sections)
├── about.html          # About us page
├── features.html       # Features detail page
├── strategies.html     # Strategy marketplace
├── learn.html          # Documentation center
├── community.html      # Community page
├── coming-soon.html    # Product preview page
├── css/
│   └── style.css       # Main stylesheet (21KB)
├── js/
│   └── main.js         # Core JavaScript functionality (9KB)
└── README.md           # Development documentation