Added the missing useState import to the React imports. The component was using useState for the isVisible state but it wasn't included in the import statement from React.

I can see the color balance issues. The problem is that the design is using too many competing colors (rose, amber, blue, purple, emerald, violet, teal) in the feature cards and program cards, which clashes with the brand color palette. I need to harmonize everything to use the defined palette: Dark Teal (#203E3F), Off-white (#EFF3F3), Emerald (#2DA072), Gold (#AC9258), and Terracotta (#7F5A53).

Now let me also update the hero section and other components to ensure color consistency throughout:

The listen section, contact section, and footer are using semantic tokens (like bg-primary, text-secondary, etc.) which will correctly pull from the design tokens. Let me also update the hero section to use more consistent colors:

I've fixed the color balance issues across the site. The changes include:

1. About Section: Replaced rainbow gradient colors with the brand palette - Emerald (#2DA072), Gold (#AC9258), Dark Teal (#203E3F), and Terracotta (#7F5A53) for the feature card icons.
2. Programs Section: Removed gradient-based headers and replaced them with solid brand colors that rotate between Gold, Dark Teal, Emerald, and Terracotta.
3. Hero Section: Updated the background gradient from blue/slate tones to the brand's dark teal variations, and fixed all card elements to use consistent Dark Teal (#203E3F) and Emerald (#2DA072) colors instead of the previous #0d4a3e color.

The entire site now uses a cohesive 5-color palette as defined: Dark Teal, Off-white, Emerald Green, Gold, and Terracotta.