[UI] Replace Hero 3D Hexagon & Update Background Colors

[AasthathecoderX]

Current Behavior

The hero section currently features a 3D hexagon visualization that does not clearly communicate Kanvas’ positioning as an infrastructure design tool.

Additionally, the current background color scheme reinforces a conceptual/brand-first impression rather than a product-first experience, which may reduce clarity during initial user engagement.

Desired Behavior

The hero section should clearly reflect Kanvas as an infrastructure design platform.

Replace the abstract 3D hexagon with a real-world use case or product demonstration (e.g., infrastructure workflow visualization, dashboard preview, architecture diagram, or system builder interface).

Update the background colors to better align with the new product-focused visual and create a stronger, more professional infrastructure-oriented aesthetic.

Implementation

Visual Update

Remove the current 3D hexagon asset.

Introduce a high-fidelity product mockup, animated workflow preview, or real infrastructure design example.

Background Update

Adjust the hero background color palette to support the new visual.

Consider a more neutral, enterprise-oriented gradient or subtle depth effect.

Acceptance Tests

Mockups

---

Contributor Guides and Handbook

• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🖥 Contributing to Meshery UI
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[github-actions]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄