first commit

src/components/StandardCTAButton.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { ArrowRight } from 'lucide-react';
+
+interface StandardCTAButtonProps {
+  text: string;
+  onClick: () => void;
+  ariaLabel?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function StandardCTAButton({ 
+  text, 
+  onClick, 
+  ariaLabel, 
+  className = '',
+  disabled = false 
+}: StandardCTAButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={`standard-cta-button ${className}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '8px',
+        padding: '16px 28px',
+        borderRadius: '12px',
+        border: 'none',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        fontSize: 'var(--font-body)',
+        fontWeight: 'var(--font-weight-h3)',
+        fontFamily: 'var(--font-family-base)',
+        backgroundColor: disabled ? '#9CA3AF' : 'var(--color-primary)',
+        color: '#FFFFFF',
+        boxShadow: disabled 
+          ? 'none' 
+          : '0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
+        transition: 'all 200ms ease-in-out',
+        position: 'relative',
+        overflow: 'hidden',
+        opacity: disabled ? 0.6 : 1,
+        transform: isHovered && !disabled ? 'translateY(-1px)' : 'translateY(0)',
+        ...(isHovered && !disabled && {
+          backgroundColor: '#030359', // Darker shade of primary brand color
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)'
+        })
+      }}
+    >
+      {/* Text with underline animation */}
+      <span
+        style={{
+          position: 'relative',
+          display: 'inline-block',
+          transition: 'all 200ms ease-in-out'
+        }}
+      >
+        {text}
+        {/* Animated underline */}
+        <span
+          style={{
+            position: 'absolute',
+            bottom: '-2px',
+            left: '0',
+            height: '1px',
+            backgroundColor: '#FFFFFF',
+            transition: 'width 200ms ease-in-out',
+            width: isHovered && !disabled ? '100%' : '0%'
+          }}
+        />
+      </span>
+      
+      {/* Arrow icon with slide-in animation */}
+      <span
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          transition: 'transform 200ms ease-in-out',
+          transform: isHovered && !disabled ? 'translateX(0)' : 'translateX(4px)',
+          opacity: isHovered && !disabled ? 1 : 0.8
+        }}
+      >
+        <ArrowRight 
+          size={16} 
+          style={{ 
+            color: '#FFFFFF',
+            transition: 'all 200ms ease-in-out'
+          }} 
+        />
+      </span>
+    </button>
+  );
+}