Hero 03

1'use client'
2 
3import * as React from 'react'
4import { motion, useReducedMotion, type Variants } from 'motion/react'
5import Balancer from 'react-wrap-balancer'
6 
7import { cn } from '@/lib/utils'
8 
9import { Cta, type CtaProps } from '../../shared/cta'
10 
11export interface Hero03Props {
12  title: string
13  description: string
14  portraitImage: string
15  portraitAlt?: string
16  animation?: 'none' | 'subtle'
17  primaryCTA: CtaProps
18  secondaryCTA?: CtaProps
19  variant?: 'standard' | 'compact'
20}
21 
22const variantStyles = {
23  standard: {
24    section: 'py-20 sm:py-28',
25    title: 'text-3xl sm:text-4xl md:text-5xl',
26    description: 'mx-auto max-w-lg text-sm sm:text-base leading-relaxed',
27    header: 'gap-5',
28    content: 'gap-14 sm:gap-20',
29    portrait: 'max-w-3xl',
30  },
31  compact: {
32    section: 'py-14 sm:py-20',
33    title: 'text-2xl sm:text-3xl md:text-4xl',
34    description: 'mx-auto max-w-md text-sm leading-relaxed',
35    header: 'gap-4',
36    content: 'gap-10 sm:gap-14',
37    portrait: 'max-w-2xl',
38  },
39} as const
40 
41const container: Variants = {
42  hidden: {},
43  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
44}
45 
46const item: Variants = {
47  hidden: { opacity: 0, y: 12, filter: 'blur(6px)' },
48  visible: {
49    opacity: 1,
50    y: 0,
51    filter: 'blur(0px)',
52    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
53  },
54}
55 
56const mediaItem: Variants = {
57  hidden: { opacity: 0, y: 24, filter: 'blur(8px)' },
58  visible: {
59    opacity: 1,
60    y: 0,
61    filter: 'blur(0px)',
62    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
63  },
64}
65 
66function Reveal({
67  active,
68  variants,
69  className,
70  children,
71}: Readonly<{
72  active: boolean
73  variants?: Variants
74  className?: string
75  children: React.ReactNode
76}>) {
77  if (!active) return <div className={className}>{children}</div>
78 
79  return (
80    <motion.div variants={variants ?? item} className={className}>
81      {children}
82    </motion.div>
83  )
84}
85 
86export function Hero03({
87  title,
88  description,
89  portraitImage,
90  portraitAlt = '',
91  animation = 'none',
92  primaryCTA,
93  secondaryCTA,
94  variant = 'standard',
95}: Readonly<Hero03Props>) {
96  const reduce = useReducedMotion()
97  const animate = animation === 'subtle' && !reduce
98  const vs = variantStyles[variant]
99 
100  const titleElement = title && (
101    <h1
102      className={cn(
103        'text-foreground font-serif font-normal tracking-tight text-balance',
104        vs.title,
105      )}
106    >
107      <Balancer>{title}</Balancer>
108    </h1>
109  )
110 
111// … truncated