# Primary CTA Button - Design System Component

## Overview
The `PrimaryCTAButton` is a sophisticated, reusable component that provides the exact same slide animations, design, and behavior as the hero section CTA button. It features advanced text and icon animations with dynamic width adjustment.

## Features

### ✨ Sophisticated Animations
- **Text Slide Animation**: Current text slides up and fades out while identical text slides in from below (300ms ease-in-out)
- **Arrow Icon Animation**: Arrow slides diagonally up-right and fades out while new arrow enters from bottom-left
- **Hardware Accelerated**: Optimized with proper transforms and will-change properties

### 🎨 Design Specifications
- **Icon**: Blue background (#04045B) with white arrow SVG, 50x50px container
- **Text**: White Inter font, 20px size, 400 weight, with text shadows for visibility
- **Responsive**: Automatically scales for mobile (48px icon) and mobile small (46px icon)
- **Dynamic Width**: Button width adjusts automatically based on text length

### ⚙️ Technical Implementation
- Uses the same SVG paths as the hero button
- Maintains brand consistency with design system colors
- Proper accessibility with ARIA labels and focus states
- Cross-browser compatible animations

## Usage

### Basic Example
```tsx
import { PrimaryCTAButton } from './components/PrimaryCTAButton';

// Simple usage
<PrimaryCTAButton 
  text="Get Started Today"
  onClick={() => console.log('CTA clicked')}
/>
```

### With Custom aria-label
```tsx
<PrimaryCTAButton 
  text="Learn More"
  onClick={() => navigate('/about')}
  ariaLabel="Learn more about our services"
/>
```

### With Additional Classes
```tsx
<PrimaryCTAButton 
  text="Contact Us Now"
  onClick={() => window.location.href = '/contact'}
  className="mt-8 mx-auto"
/>
```

## Props Interface

```tsx
interface PrimaryCTAButtonProps {
  text: string;           // Button text content (required)
  onClick: () => void;    // Click handler (required) 
  ariaLabel?: string;     // Custom aria-label (optional, defaults to text)
  className?: string;     // Additional CSS classes (optional)
}
```

## Dynamic Width Calculation

The component automatically calculates the optimal width based on text length:
- **Minimum Width**: 280px (ensures usability on mobile)
- **Dynamic Calculation**: Icon width (50px) + gap (10px) + padding (32px) + estimated text width
- **Text Width Estimation**: ~12px per character for 20px Inter font

### Width Examples:
- `"Get Started"` (11 chars) → ~324px
- `"Learn More About Us"` (18 chars) → ~372px  
- `"Build Your Leadership Pipeline"` (31 chars) → ~464px
- `"Contact Our Team Today"` (21 chars) → ~384px

## Responsive Behavior

### Desktop (Default)
- Icon: 50x50px
- Text: 20px font size, 28px line height
- Gap: 10px between icon and text

### Tablet (≤768px)
- Icon: 48x48px  
- Text: 18px font size, 24px line height
- Gap: 8px between icon and text

### Mobile (≤480px)
- Icon: 46x46px
- Text: 16px font size, 22px line height  
- Gap: 6px between icon and text

## Animation Details

### Text Animation
1. **Initial State**: Primary text visible, secondary text positioned below (translateY(100%))
2. **Hover State**: Primary text slides up (translateY(-100%)) and fades out
3. **Simultaneous**: Secondary text slides to center (translateY(0)) and fades in
4. **Duration**: 300ms with ease-in-out timing
5. **Reverse**: Perfect reverse animation on mouse leave

### Icon Animation  
1. **Initial State**: Primary arrow visible, secondary arrow positioned bottom-left
2. **Hover State**: Primary arrow slides up-right diagonally (translateX(24px), translateY(-24px)) and fades out
3. **Simultaneous**: Secondary arrow slides to center from bottom-left and fades in
4. **Duration**: 300ms with ease-in-out timing
5. **Background**: Consistent blue background throughout (no color change)

## Design System Integration

### Colors Used
- **Icon Background**: `#04045B` (Brand Primary Blue)
- **Icon/Arrow**: `#FFFFFF` (White)
- **Text**: `#FFFFFF` (White with shadow)
- **Text Shadow**: `0 1px 2px rgba(0, 0, 0, 0.4)`

### Typography
- **Font**: Inter (design system font)
- **Size**: 20px (desktop), 18px (tablet), 16px (mobile)
- **Weight**: 400 (Regular)
- **Line Height**: 28px (desktop), 24px (tablet), 22px (mobile)

### Accessibility
- **Focus Ring**: 3px rgba(248, 195, 1, 0.3) outline
- **ARIA Support**: Proper aria-label attributes
- **Keyboard Navigation**: Full keyboard accessibility
- **Screen Readers**: Semantic button element with descriptive labels

## Example Scenarios

### Hero Sections
```tsx
<PrimaryCTAButton 
  text="Transform Your Leadership"
  onClick={() => navigate('/leadership-program')}
  ariaLabel="Start your leadership transformation journey"
/>
```

### Service Pages
```tsx
<PrimaryCTAButton 
  text="Book a Consultation"
  onClick={() => setShowBookingModal(true)}
/>
```

### Landing Pages
```tsx
<PrimaryCTAButton 
  text="Download Free Guide"
  onClick={() => triggerDownload()}
  className="mt-6"
/>
```

### Contact Forms
```tsx
<PrimaryCTAButton 
  text="Send Message"
  onClick={handleSubmit}
  ariaLabel="Send your message to our team"
/>
```

## Best Practices

### Text Content
- **Length**: Keep text concise (2-4 words ideal)
- **Action-Oriented**: Use verbs ("Get", "Start", "Learn", "Download")
- **Clear Value**: Communicate what happens when clicked
- **Consistent Tone**: Match your brand voice

### Implementation
- **Single CTA**: Use only one Primary CTA per section for maximum impact
- **Strategic Placement**: Position at natural conversion points
- **Sufficient Spacing**: Provide adequate whitespace around button
- **Context Relevant**: Ensure CTA matches the surrounding content

### Accessibility
- **Descriptive Labels**: Use clear, descriptive aria-labels when needed
- **Keyboard Focus**: Ensure button is reachable via keyboard navigation
- **Color Contrast**: White text on blue background meets WCAG AA standards
- **Touch Targets**: Minimum 44px height maintained on mobile

## CSS Classes Reference

### Component Classes
- `.primary-cta-button` - Main button container
- `.icon-layer` - Icon animation container  
- `.text-layer` - Text animation container
- `.text-element` - Individual text instances

### State Classes  
- `.group` - Enables group-hover functionality
- `.group-hover:*` - Triggered animation states

### Responsive Classes
- Media queries handle automatic responsive scaling
- No additional classes needed for responsive behavior

## Integration Notes

When implementing "Update as per Primary CTA Button":

1. **Replace existing button** with `<PrimaryCTAButton>`
2. **Update text prop** with new button content  
3. **Adjust onClick handler** for new functionality
4. **Add custom aria-label** if button text isn't descriptive enough
5. **Apply additional classes** if positioning adjustments needed

The component will automatically handle:
- ✅ Width adjustment for new text
- ✅ Responsive scaling
- ✅ Animation consistency  
- ✅ Design system compliance
- ✅ Accessibility requirements

This ensures perfect consistency across all Primary CTA buttons while maintaining the sophisticated slide animations that enhance user engagement.