Hero 05

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