style: improve landing page UI

[biraj21]

No description provided.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR modernizes the landing page UI with a comprehensive visual redesign. The changes include a vibrant particle animation background with glowing effects, redesigned hero section with custom GitHub stat badges, modernized download buttons with inline SVGs, and a completely restructured footer with grid layout and social links. The typography has been updated to use the Lexend font family, and the color scheme now features electric blues and cyans throughout.

Key improvements:

• Enhanced particle animation system with colorful gradients and glow effects
• Custom GitHub buttons replacing external github-buttons library with live API data fetching
• Modern, responsive footer with structured sections and improved visual hierarchy
• Updated announcement banner copy for better product positioning
• Comprehensive SCSS modernization with improved hover states and transitions

Issues found:

• Invalid CSS color concatenation in background.js (lines 27-28) that produces malformed color strings
• Duplicate JSDoc @param in background.js (line 2-3)

Confidence Score: 4/5

• Safe to merge after fixing the CSS color concatenation bug
• The PR is well-implemented with comprehensive UI improvements, but contains a syntax error in the gradient color handling that will prevent transparency from working correctly. Once the hex color concatenation is fixed, the changes are safe to deploy.
• client/lib/background.js requires attention for the invalid CSS color concatenation

Important Files Changed

Filename	Overview
client/lib/background.js	Enhanced particle animation with glowing effects and vibrant color palette; has invalid CSS color concatenation that needs fixing
client/components/announcementBanner/index.js	Updated banner copy to emphasize product positioning; no issues found
client/pages/home/index.js	Replaced external GitHub buttons with custom implementation fetching live stats; improved download button UI with inline SVGs
client/main.view.js	Redesigned footer with modern grid layout, social links, and structured content sections
client/main.scss	Comprehensive footer redesign with modern styling, responsive grid layout, and improved visual hierarchy
client/pages/home/style.scss	Major homepage redesign with new typography (Lexend font), modern button styles, enhanced animations, and improved responsive design

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant HomePage
    participant GitHubAPI
    participant PluginsAPI
    participant Background

    User->>Browser: Visit landing page
    Browser->>HomePage: Load home component
    HomePage->>Background: Initialize canvas animation
    Background-->>Browser: Render particle effects
    
    par Fetch GitHub Stats
        HomePage->>GitHubAPI: GET /repos/acode-foundation/acode
        GitHubAPI-->>HomePage: {stargazers_count, forks_count}
        HomePage->>Browser: Update stars & forks display
    and Fetch Plugin Data
        HomePage->>PluginsAPI: GET /api/plugins/count
        PluginsAPI-->>HomePage: {count}
        HomePage->>PluginsAPI: GET /api/plugins?limit=4&sort=downloads
        PluginsAPI-->>HomePage: [plugin list]
        HomePage->>Browser: Render featured plugins
    end
    
    HomePage->>Browser: Hide loading, display content
    
    alt GitHub API fails
        GitHubAPI-->>HomePage: Error
        HomePage->>Browser: Display fallback stats (1.2k+, 200+)
    end
    
    User->>Browser: Hover/interact with UI elements
    Browser->>Background: Continue animation loop
    Background-->>Browser: Update particles & connections

Loading

[greptile-apps]

_{6 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

string concatenation with hex colors doesn't create transparency properly - ${this.color}40 produces strings like #00d4ff40 which is invalid CSS

Suggested change

	gradient.addColorStop(0.5, `${this.color}40`); // Add transparency to hex
	gradient.addColorStop(1, `${this.color}00`);
	gradient.addColorStop(0.5, `${this.color}66`); // 40% opacity in hex
	gradient.addColorStop(1, `${this.color}00`);

Prompt To Fix With AI

This is a comment left during a code review.
Path: client/lib/background.js
Line: 27:28

Comment:
string concatenation with hex colors doesn't create transparency properly - `${this.color}40` produces strings like `#00d4ff40` which is invalid CSS

```suggestion
    gradient.addColorStop(0.5, `${this.color}66`); // 40% opacity in hex
    gradient.addColorStop(1, `${this.color}00`);
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

Additional Comments (1)

client/lib/background.js
duplicate @param for canvas in JSDoc

  /**
   * @param {HTMLCanvasElement} canvas

Prompt To Fix With AI

This is a comment left during a code review.
Path: client/lib/background.js
Line: 2:3

Comment:
duplicate `@param` for canvas in JSDoc

```suggestion
  /**
   * @param {HTMLCanvasElement} canvas
```

How can I resolve this? If you propose a fix, please make it concise.