# Primary CTA Button Variants

This document explains how to use the different Primary CTA Button variants available in the KLC website design system.

## Overview

To provide individual color control while preserving the sophisticated animations, we've created separate Primary CTA Button variant components. Each variant maintains all the original functionality and animations while allowing different color schemes.

## Available Components

### 1. Original PrimaryCTAButton (Protected)
- **File**: `/components/PrimaryCTAButton.tsx`
- **Status**: 🔒 PROTECTED - Never modify directly
- **Default**: Yellow background (#F8C301) with white text

### 2. PrimaryCTAButtonYellow
- **File**: `/components/PrimaryCTAButtonYellow.tsx`
- **Purpose**: Maintains original yellow styling
- **Colors**: Yellow background (#F8C301), White text (#FFFFFF)

### 3. PrimaryCTAButtonBlue
- **File**: `/components/PrimaryCTAButtonBlue.tsx`
- **Purpose**: Blue variant for brand consistency
- **Colors**: Blue background (#04045B), Black text (#26231A)

### 4. PrimaryCTAButtonVariant
- **File**: `/components/PrimaryCTAButtonVariant.tsx`
- **Purpose**: Flexible component with variant and custom color support
- **Variants**: 'yellow', 'blue', 'custom'

## Usage Examples

### Yellow Variant (Default Styling)
```tsx
import { PrimaryCTAButtonYellow } from './components/PrimaryCTAButtonYellow';

<PrimaryCTAButtonYellow 
  text="Learn More" 
  onClick={() => handleClick()} 
  ariaLabel="Learn more about our services"
/>
```

### Blue Variant (Brand Blue)
```tsx
import { PrimaryCTAButtonBlue } from './components/PrimaryCTAButtonBlue';

<PrimaryCTAButtonBlue 
  text="Get Started" 
  onClick={() => handleClick()} 
  ariaLabel="Get started with KLC"
/>
```

### Flexible Variant Component
```tsx
import { PrimaryCTAButtonVariant } from './components/PrimaryCTAButtonVariant';

// Yellow variant
<PrimaryCTAButtonVariant 
  variant="yellow"
  text="Default Yellow" 
  onClick={handleClick} 
/>

// Blue variant
<PrimaryCTAButtonVariant 
  variant="blue"
  text="Brand Blue" 
  onClick={handleClick} 
/>

// Custom colors
<PrimaryCTAButtonVariant 
  variant="custom"
  customBackgroundColor="#FF6B6B"
  customTextColor="#FFFFFF"
  customHoverBackgroundColor="#FF5252"
  text="Custom Red Button"
  onClick={handleClick}
/>
```

## Component Protection Policy

### 🔒 CRITICAL RULES

1. **NEVER modify `/components/PrimaryCTAButton.tsx`** - This is the protected base component
2. **All variants preserve animations** - Sophisticated slide animations are maintained
3. **Use variants for color changes** - Instead of modifying the main component
4. **CSS overrides are component-specific** - Each variant has its own CSS classes

### ✅ APPROVED MODIFICATIONS

- ✅ Create new variant components
- ✅ Use CSS classes for variant-specific styling
- ✅ Extend functionality through wrapper components
- ✅ Add custom color support via props

### ❌ PROHIBITED MODIFICATIONS

- ❌ Direct changes to main PrimaryCTAButton.tsx
- ❌ Global CSS overrides affecting all buttons
- ❌ Modifying animation structure or timing
- ❌ Breaking accessibility features

## CSS Classes Used

### Blue Variant
- `.primary-cta-button-blue` - Main blue variant class
- Background: #04045B (Brand Blue)
- Text: #26231A (Brand Black)
- Hover Background: #030359 (Darker Blue)

### Yellow Variant
- `.primary-cta-button-yellow` - Main yellow variant class
- Preserves original component styling

### Custom Variant
- `.primary-cta-button-custom` - Custom variant class
- Uses CSS custom properties:
  - `--custom-bg-color`
  - `--custom-text-color`
  - `--custom-hover-bg-color`

## Migration Guide

### Existing Code
```tsx
// Old approach - affects all buttons globally
<PrimaryCTAButton text="Click Me" onClick={handleClick} />
```

### New Approach
```tsx
// New approach - specific variant control
<PrimaryCTAButtonBlue text="Click Me" onClick={handleClick} />
// or
<PrimaryCTAButtonYellow text="Click Me" onClick={handleClick} />
// or
<PrimaryCTAButtonVariant variant="blue" text="Click Me" onClick={handleClick} />
```

## Benefits

1. **Individual Control**: Each button can have different colors
2. **Animation Preservation**: All sophisticated animations maintained
3. **Component Protection**: Main component remains untouched
4. **Flexibility**: Support for custom colors when needed
5. **Brand Consistency**: Pre-defined variants follow brand guidelines
6. **Type Safety**: Full TypeScript support with proper prop types

## Best Practices

1. **Use specific variants** when you know the color scheme
2. **Use PrimaryCTAButtonVariant** for dynamic or custom colors
3. **Always provide meaningful ariaLabel** for accessibility
4. **Test hover states** to ensure proper color contrast
5. **Follow brand guidelines** when using custom colors

## Accessibility

All variants maintain the original accessibility features:
- Proper ARIA labels
- Keyboard navigation support
- Focus indicators
- Color contrast compliance (when using approved color combinations)

## Performance

- **No performance impact**: Variants are lightweight wrappers
- **CSS optimization**: Specific classes prevent global overrides
- **Animation performance**: All GPU-accelerated animations preserved