Hero 06

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 type { CtaProps } from '../../shared/cta'
8import { Cta } from '../../shared/cta'
9import { Spot01 } from '../../../illustrations/spot/spot-01'
10 
11export interface Hero06Props {
12  title: string
13  highlight?: string
14  description: string
15  animation?: 'none' | 'subtle'
16  primaryCTA: CtaProps
17  secondaryCTA?: CtaProps
18  logos: string[]
19  logosLabel?: string
20}
21 
22const container: Variants = {
23  hidden: {},
24  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
25}
26 
27const item: Variants = {
28  hidden: { opacity: 0, y: 12, filter: 'blur(6px)' },
29  visible: {
30    opacity: 1,
31    y: 0,
32    filter: 'blur(0px)',
33    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
34  },
35}
36 
37function Reveal({
38  active,
39  className,
40  children,
41}: Readonly<{
42  active: boolean
43  className?: string
44  children: React.ReactNode
45}>) {
46  if (!active) return <div className={className}>{children}</div>
47 
48  return (
49    <motion.div variants={item} className={className}>
50      {children}
51    </motion.div>
52  )
53}
54 
55export function Hero06({
56  title,
57  highlight,
58  description,
59  animation = 'none',
60  primaryCTA,
61  secondaryCTA,
62  logos = [],
63  logosLabel,
64}: Readonly<Hero06Props>) {
65  const reduce = useReducedMotion()
66  const animate = animation === 'subtle' && !reduce
67 
68  const titleElement = title && (
69    <h1 className="text-foreground font-serif text-2xl font-normal tracking-tight text-balance sm:text-3xl md:text-4xl">
70      <Balancer>{title}</Balancer>
71      {highlight && (
72        <>
73          {' '}
74          <span className="text-muted-foreground">{highlight}</span>
75        </>
76      )}
77    </h1>
78  )
79 
80  const descriptionElement = description && (
81    <p className="text-muted-foreground max-w-md text-base sm:text-lg">
82      <Balancer>{description}</Balancer>
83    </p>
84  )
85 
86  const ctasElement = (primaryCTA?.ctaEnabled || secondaryCTA?.ctaEnabled) && (
87    <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
88      {primaryCTA && <Cta cta={primaryCTA} className="w-full sm:w-fit" />}
89      {secondaryCTA && <Cta cta={secondaryCTA} className="w-full sm:w-fit" />}
90    </div>
91  )
92 
93  const logosElement = (
94    <div className="flex flex-col gap-3">
95      {logosLabel && logos.length > 0 && (
96        <p className="text-muted-foreground/80 text-xs tracking-wide uppercase">
97          {logosLabel}
98        </p>
99// … truncated