Design Fixes Applied

Issue: Invisible "Schedule Demo" ButtonCopy Anchor Link

Problem DescriptionCopy Anchor Link

The "Schedule Demo" button in the Closing CTA section was not visible due to insufficient contrast against the gradient background.

Location: closing-cta.tsx

Screenshot Reference:

• Button had white border and white text on blue/teal gradient
• Border and text were barely visible

Root CauseCopy Anchor Link

The button was using variant="outline" with:

• border-2 border-white
• text-white
• hover:bg-white/10 (very subtle)

On the gradient background (from-primary-600 via-primary-500 to-healthcare-500), the white border wasn't providing enough contrast.

Solution ImplementedCopy Anchor Link

Changed the button styling to:

<Button
  size="lg"
  className="text-lg px-10 py-7 border-2 border-white bg-transparent text-white hover:bg-white hover:text-primary-600 transition-all duration-300 font-semibold"
>
  Schedule Demo
</Button>

Key Changes:

1. Removed variant="outline" prop
2. Explicitly set bg-transparent for transparent background
3. Added strong hover effect: hover:bg-white hover:text-primary-600
4. Kept white border and text for visibility
5. Added smooth transition: transition-all duration-300

ResultCopy Anchor Link

• Button now has clear white border and text visible on gradient
• Hover state fills button with white and changes text to primary blue
• Maintains design consistency with primary CTA button
• Provides better user feedback on interaction

Related Design ImprovementsCopy Anchor Link

Closing CTA Section FeaturesCopy Anchor Link

• Primary button: White background with blue text
• Secondary button: Transparent with white border/text
• Both buttons have engaging hover animations
• Trust line below buttons for reassurance

Design PatternCopy Anchor Link

This follows the common CTA pattern:

• Primary action (Start Free Trial): Solid, high-contrast
• Secondary action (Schedule Demo): Outlined, still visible
• Clear visual hierarchy between actions