Hero 01

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 { IntegrationCloud } from './integration-cloud'
11 
12export interface Hero01Props {
13  title: string
14  titleLine2?: string
15  description: string
16  washImage: string
17  animation?: 'none' | 'subtle'
18  primaryCTA: CtaProps
19  integrationRows: string[][]
20  variant?: 'standard' | 'compact'
21}
22 
23const variantStyles = {
24  standard: {
25    section: 'py-20 sm:py-28',
26    title: 'text-3xl sm:text-4xl md:text-5xl',
27    description: 'max-w-md text-sm sm:text-base',
28    content: 'gap-8',
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    content: 'gap-6',
35  },
36} as const
37 
38const container: Variants = {
39  hidden: {},
40  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
41}
42 
43const item: Variants = {
44  hidden: { opacity: 0, y: 12, filter: 'blur(6px)' },
45  visible: {
46    opacity: 1,
47    y: 0,
48    filter: 'blur(0px)',
49    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
50  },
51}
52 
53function Reveal({
54  active,
55  className,
56  children,
57}: Readonly<{
58  active: boolean
59  className?: string
60  children: React.ReactNode
61}>) {
62  if (!active) return <div className={className}>{children}</div>
63 
64  return (
65    <motion.div variants={item} className={className}>
66      {children}
67    </motion.div>
68  )
69}
70 
71export function Hero01({
72  title,
73  titleLine2,
74  description,
75  washImage,
76  animation = 'none',
77  primaryCTA,
78  integrationRows,
79  variant = 'standard',
80}: Readonly<Hero01Props>) {
81  const reduce = useReducedMotion()
82  const animate = animation === 'subtle' && !reduce
83  const vs = variantStyles[variant]
84 
85  const backgroundElement = washImage && (
86    <div
87      aria-hidden
88      className="pointer-events-none absolute inset-x-0 top-0 z-0 mx-auto h-full w-full mask-t-from-60% mask-t-to-90% mask-b-from-75% mask-b-to-85% mask-radial-[70%_70%] mask-radial-from-60% mask-radial-to-90% mask-radial-at-top opacity-50 md:mask-radial-[70%_90%] dark:opacity-10"
89    >
90      <img
91        src={washImage}
92        alt=""
93        className="absolute inset-0 size-full object-cover object-top"
94      />
95      <div className="bg-background/30 dark:bg-background/45 absolute inset-0" />
96    </div>
97  )
98 
99  const titleElement = title && (
100    <h1
101// … truncated