101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
interface PrimaryCTAButtonProps {
|
|
text: string;
|
|
onClick: () => void;
|
|
ariaLabel?: string;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function PrimaryCTAButton({
|
|
text,
|
|
onClick,
|
|
ariaLabel,
|
|
className = '',
|
|
disabled = false
|
|
}: PrimaryCTAButtonProps) {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
aria-label={ariaLabel || text}
|
|
className={`primary-cta-button ${className}`}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '12px',
|
|
padding: '8px 20px',
|
|
borderRadius: '10px',
|
|
border: 'none',
|
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
fontSize: 'var(--font-body-lg)',
|
|
fontWeight: 'var(--font-weight-h3)',
|
|
fontFamily: 'var(--font-family-base)',
|
|
backgroundColor: disabled ? '#9CA3AF' : 'var(--color-primary)',
|
|
color: '#FFFFFF',
|
|
boxShadow: disabled
|
|
? 'none'
|
|
: '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
|
|
transition: 'all 300ms ease-in-out',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
opacity: disabled ? 0.6 : 1,
|
|
transform: isHovered && !disabled ? 'translateY(-2px)' : 'translateY(0)',
|
|
...(isHovered && !disabled && {
|
|
backgroundColor: '#030359', // Darker shade of primary brand color
|
|
boxShadow: '0 8px 25px rgba(4, 4, 91, 0.3), 0 4px 6px rgba(4, 4, 91, 0.1)'
|
|
})
|
|
}}
|
|
>
|
|
{/* Text */}
|
|
<span
|
|
style={{
|
|
fontSize: 'var(--font-body-lg)',
|
|
fontWeight: 'var(--font-weight-h3)',
|
|
fontFamily: 'var(--font-family-base)',
|
|
color: '#FFFFFF',
|
|
whiteSpace: 'nowrap'
|
|
}}
|
|
>
|
|
{text}
|
|
</span>
|
|
|
|
{/* Arrow icon with enhanced animation */}
|
|
<span
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '20px',
|
|
height: '20px',
|
|
borderRadius: '50%',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
transition: 'all 300ms ease-in-out',
|
|
transform: isHovered && !disabled ? 'translateX(4px) scale(1.1)' : 'translateX(0) scale(1)',
|
|
...(isHovered && !disabled && {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.3)'
|
|
})
|
|
}}
|
|
>
|
|
<ArrowRight
|
|
size={14}
|
|
style={{
|
|
color: '#FFFFFF',
|
|
transition: 'all 300ms ease-in-out'
|
|
}}
|
|
/>
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// Named exports for backward compatibility
|
|
export const PrimaryCTAButtonProps = PrimaryCTAButton;
|
|
export default PrimaryCTAButton; |