Hero 02

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