Skip to content

Comments

feat: add vibrant colors to marketing homepage#11677

Closed
roomote[bot] wants to merge 1 commit intomainfrom
feat/homepage-vibrant-colors
Closed

feat: add vibrant colors to marketing homepage#11677
roomote[bot] wants to merge 1 commit intomainfrom
feat/homepage-vibrant-colors

Conversation

@roomote
Copy link
Contributor

@roomote roomote bot commented Feb 22, 2026

Adds vibrant, colorful styling across the marketing homepage to make it more visually engaging.

Changes

Hero Section

  • Gradient text on the main heading (violet-blue-fuchsia)
  • Multi-color background glow effect
  • CTA buttons with gradient backgrounds and colored shadow accents

Pillars Section

  • Each pillar card icon badge now has a unique gradient color (violet, blue, amber, emerald) with white icons
  • Colored hover glow effects on cards
  • Gradient text accent on section heading
  • Multi-color background glow

Option Overview Section

  • Gradient text accent on section heading
  • Colorful dashed border on the decorative spinning circle

Use Examples Section

  • Gradient text on emphasized "entire" word
  • Colorful multi-tone background glow

Testimonials Section

  • Gradient text accent on section heading
  • Amber/gold star ratings (replacing violet)
  • Violet-tinted hover borders and shadows on cards

FAQ Section

  • Full gradient text heading
  • Violet hover borders on FAQ items

CTA Section

  • Gradient text accent on heading
  • Gradient primary CTA button with shadow
  • Violet-tinted outline secondary button
  • Colorful background glow

CSS Variables (globals.css)

  • Updated primary color from grayscale to violet (262 83% 58%)
  • Updated accent, secondary, and ring colors with subtle violet tints
  • Both light and dark mode variables updated for consistency

Interactively review PR in Roo Code Cloud

- Add gradient text to hero heading (violet-blue-fuchsia)
- Make CTA buttons use colorful gradients with shadow accents
- Add unique gradient icon badges to pillar cards (violet, blue, amber, emerald)
- Add colorful hover glow effects to cards across all sections
- Update CSS variables to use violet-based primary/accent colors
- Add gradient text highlights to section headings
- Make testimonial stars amber/gold
- Add colorful background glows to sections
- Add violet hover borders to FAQ items and testimonial cards
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. UI/UX UI/UX related or focused labels Feb 22, 2026
@github-actions
Copy link
Contributor

🚀 Preview deployed!

Your changes have been deployed to Vercel:

Preview URL: https://roo-code-website-b1ekpv3qb-roo-code.vercel.app

This preview will be updated automatically when you push new commits to this PR.

@mrubens mrubens closed this Feb 22, 2026
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Feb 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L This PR changes 100-499 lines, ignoring generated files. UI/UX UI/UX related or focused

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants