1// TypeScript + React + Framer Motion
2import { memo, useCallback } from 'react'
3import { motion } from 'framer-motion'
4import { trackEvent } from '@/lib/analytics'
5 
6interface HeroProps {
7  onCTA: () => void
8  title: string
9}
10 
11export const Hero = memo(({ onCTA, title }: HeroProps) => {
12  const handleClick = useCallback(() => {
13    trackEvent('cta_clicked', { location: 'hero' })
14    onCTA()
15  }, [onCTA])
16 
17  return (
18    <motion.section
19      initial={{ opacity: 0, y: 20 }}
20      animate={{ opacity: 1, y: 0 }}
21      transition={{ duration: 0.6 }}
22      className="hero-container"
23    >
24      <h1 className="gradient-text" role="heading" aria-level={1}>
25        {title}
26      </h1>
27 
28      <p className="lead" role="doc-subtitle">
29        Lightning-fast, accessible, SEO-optimized
30      </p>
31 
32      <motion.button
33        onClick={handleClick}
34        whileHover={{ scale: 1.05 }}
35        whileTap={{ scale: 0.95 }}
36        aria-label="Get started with free consultation"
37        className="cta-button"
38      >
39        Get Started
40      </motion.button>
41    </motion.section>
42  )
43})