# Customization Guide — Hero Section 02 (AI SaaS / Startup)

This guide explains how to customize the assets, styling, charts, and interactive dialogues of the Aero AI SaaS Hero Section (`Hero-02`).

---

## 1. Customizing Logo & Navigation
Open `index.html` and search for `.premium-header`. 
- **Logo Text/Icon:** Edit the text `Aero` or swap the inline SVG tag with your own company mark:
  ```html
  <a href="#" class="logo-group">
    <div class="logo-icon"><!-- Insert brand SVG here --></div>
    <span class="logo-text">YourBrand</span>
  </a>
  ```
- **Links:** Edit nav link anchors in `<nav class="main-nav">` and update corresponding items in `<nav class="mobile-nav">` inside `index.html`.

---

## 2. Text Content & Typography
The typography styles use **Inter** and **Plus Jakarta Sans** loaded via Google Fonts in `style.css`.
- **Headline:** Update the `h1` tag inside the `.hero-left` container. The `.gradient-text` class applies a dual-layer purple-to-blue linear color mask:
  ```html
  <h1 class="hero-title">
    Scale your product <span class="gradient-text">10x Faster.</span>
  </h1>
  ```
- **Description:** Locate `.hero-description` and update the paragraphs.

---

## 3. Theme Colors
All colors, gradient overlays, card backgrounds, and metric indicators are mapped to CSS custom variables in `:root` scope of `style.css`:
```css
:root {
  --color-bg: #050505;                 /* Main background (Obsidian black) */
  --color-card-bg: rgba(18, 18, 20, 0.7); /* Dashboard background card fill */
  --color-primary: #2563eb;            /* Electric Blue accent */
  --color-secondary: #8b5cf6;          /* Purple secondary accent */
  --color-success: #10b981;            /* Emerald Green success metric */
}
```
Modify these variables to instantly update the overall layout colors.

---

## 4. Customizing the AI Chat Widget
The chat dialogue inside the AI Assistant Widget is driven by an array inside `script.js`. Find `initChatWidget()` in `script.js` and edit the message objects:
```javascript
const chatSteps = [
  { sender: 'user', text: 'Generate revenue reports for Q2.' },
  { sender: 'ai', text: 'Analyzing database records... ⚙' },
  { sender: 'ai', text: '✓ Done! Revenue is up by +18.4% this quarter.' }
];
```
- You can add, remove, or modify dialogue items. The widget will type them out sequentially and auto-scroll to the bottom of the screen.

---

## 5. Chart Modifications
The spline chart (Revenue Graph) and column chart (Growth Bar Graph) are rendered using inline SVGs inside `index.html`.
- **Spline Chart:** Edit the `d` attribute of the SVG `<path>` element to modify the curve trajectory:
  ```html
  <path d="M10 80 Q 40 50, 80 70 T 150 20 ..." />
  ```
- **Growth Columns:** Adjust the inline height styling parameter of `.bar-item` elements:
  ```html
  <div class="bar-item" style="--height: 75%"></div>
  ```

---

## 6. Adjusting Floating Speeds & Parallax
- **Float Animations:** The floating cards hover automatically via keyframe parameters (`floating-dash` in `style.css`). You can edit speed properties in elements like `.card-dau`, `.card-ai-chat` in `style.css`.
- **Cursor Parallax:** The script translates card offsets as the mouse moves. Adjust coordinates multiplier ratios under `initDashboardParallax()` in `script.js`:
  ```javascript
  const speed = 15; // Set higher to make the cards slide more aggressively
  ```
