Hero 04

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'
10import { ArtCollage } from './art-collage'
11 
12export interface Hero04Props {
13  title: string
14  washImage?: string
15  titleLine2?: string
16  description: string
17  primaryImage: string
18  secondaryImage: string
19  primaryAlt?: string
20  secondaryAlt?: string
21  animation?: 'none' | 'subtle'
22  primaryCTA: CtaProps
23  secondaryCTA?: CtaProps
24  variant?: 'standard' | 'compact'
25}
26 
27const variantStyles = {
28  standard: {
29    section: 'py-20 sm:py-28',
30    title: 'text-3xl sm:text-4xl md:text-5xl',
31    description: 'max-w-md text-sm sm:text-base',
32    header: 'gap-5',
33    grid: 'gap-12 lg:gap-16',
34  },
35  compact: {
36    section: 'py-14 sm:py-20',
37    title: 'text-2xl sm:text-3xl md:text-4xl',
38    description: 'max-w-sm text-sm',
39    header: 'gap-4',
40    grid: 'gap-10 lg:gap-12',
41  },
42} as const
43 
44const container: Variants = {
45  hidden: {},
46  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
47}
48 
49const item: Variants = {
50  hidden: { opacity: 0, y: 12, filter: 'blur(6px)' },
51  visible: {
52    opacity: 1,
53    y: 0,
54    filter: 'blur(0px)',
55    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
56  },
57}
58 
59const mediaItem: Variants = {
60  hidden: { opacity: 0, y: 24, filter: 'blur(8px)' },
61  visible: {
62    opacity: 1,
63    y: 0,
64    filter: 'blur(0px)',
65    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
66  },
67}
68 
69function Reveal({
70  active,
71  variants,
72  className,
73  children,
74}: Readonly<{
75  active: boolean
76  variants?: Variants
77  className?: string
78  children: React.ReactNode
79}>) {
80  if (!active) return <div className={className}>{children}</div>
81 
82  return (
83    <motion.div variants={variants ?? item} className={className}>
84      {children}
85    </motion.div>
86  )
87}
88 
89export function Hero04({
90  title,
91  titleLine2,
92  description,
93  washImage,
94  primaryImage,
95  secondaryImage,
96  primaryAlt = '',
97  secondaryAlt = '',
98  animation = 'none',
99  primaryCTA,
100  secondaryCTA,
101  variant = 'standard',
102}: Readonly<Hero04Props>) {
103  const reduce = useReducedMotion()
104  const animate = animation === 'subtle' && !reduce
105  const vs = variantStyles[variant]
106 
107  const backgroundElement = washImage && (
108    <div
109      aria-hidden
110// … truncated