@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/marketing/banners/avatar-group.tsx

@@ -1,69 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useEffect, useState } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-const LIFT = -4
-const FALLOFF = 0.45
-const ACTIVE_SCALE = 1.05
-const DURATION = 320
-const EASE_IN = 'cubic-bezier(0.22, 1, 0.36, 1)'
-const EASE_OUT = 'cubic-bezier(0.34, 3.85, 0.64, 1)'
-
-export function AvatarGroup({
-  children,
-  className,
-  overlap = '-ml-2',
-}: {
-  children: React.ReactNode
-  className?: string
-  overlap?: string
-}) {
-  const items = React.Children.toArray(children)
-  const [activeIndex, setActiveIndex] = useState<number | null>(null)
-  const [reducedMotion, setReducedMotion] = useState(false)
-
-  useEffect(() => {
-    const query = window.matchMedia('(prefers-reduced-motion: reduce)')
-    const sync = () => setReducedMotion(query.matches)
-
-    sync()
-    query.addEventListener('change', sync)
-    return () => query.removeEventListener('change', sync)
-  }, [])
-
-  const itemStyle = (index: number): React.CSSProperties | undefined => {
-    if (reducedMotion) {
-      return undefined
-    }
-
-    const isActive = index === activeIndex
-    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex)
-
-    return {
-      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,
-      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,
-      willChange: 'transform',
-      zIndex: isActive ? 1 : undefined,
-    }
-  }
-
-  return (
-    <div className={cn('flex', className)} onMouseLeave={() => setActiveIndex(null)}>
-      {items.map((child, index) => (
-        <div
-          key={index}
-          className={cn('relative', index > 0 && overlap)}
-          style={itemStyle(index)}
-          onMouseEnter={() => setActiveIndex(index)}
-        >
-          {child}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default AvatarGroup

package/src/blocks/marketing/banners/banner-1.tsx

@@ -1,188 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { motion, useReducedMotion } from 'motion/react'
-import { ArrowRight, X } from 'lucide-react'
-import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { AvatarGroup } from './avatar-group'
-
-export type Banner1Shape = 'bar' | 'pill'
-
-export interface Banner1Props {
-  /**
-   * 'bar'  — full-width strip above the header (the default).
-   * 'pill' — floating rounded card pinned to the bottom of the viewport, with an avatar stack.
-   */
-  shape?: Banner1Shape
-  badge?: string
-  message: string
-  href: string
-  linkLabel: string
-  /** Used by the 'pill' shape only; decorative avatars of the announcement's authors. */
-  avatars?: string[]
-  /**
-   * 'bar' only. When true, the inner content spans the full width of its parent
-   * (skips the centered `max-w-7xl` container) so badge/message/CTA reach the edges.
-   */
-  fullWidth?: boolean
-  /** Fired when the user clicks the banner CTA. When provided, the CTA renders as a button instead of a link. */
-  onCtaClick?: () => void
-  /** Fired when the user dismisses the banner. */
-  onDismiss?: () => void
-}
-
-type Visibility = 'visible' | 'closing' | 'closed'
-
-export function Banner1({
-  shape = 'bar',
-  badge,
-  message,
-  href,
-  linkLabel,
-  avatars,
-  fullWidth,
-  onCtaClick,
-  onDismiss,
-}: Banner1Props) {
-  const [visibility, setVisibility] = useState<Visibility>('visible')
-  const reduceMotion = useReducedMotion()
-
-  useEffect(() => {
-    if (visibility !== 'closing') {
-      return
-    }
-
-    const timer = window.setTimeout(() => setVisibility('closed'), 200)
-    return () => window.clearTimeout(timer)
-  }, [visibility])
-
-  const dismiss = () => {
-    onDismiss?.()
-    setVisibility(reduceMotion ? 'closed' : 'closing')
-  }
-
-  if (visibility === 'closed') {
-    return null
-  }
-
-  const closing = visibility === 'closing'
-
-  if (shape === 'pill') {
-    return (
-      <div
-        className={`fixed inset-x-4 bottom-4 z-50 transition-all duration-200 ease-out motion-reduce:transition-none sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 ${
-          closing ? 'translate-y-2 opacity-0' : 'opacity-100'
-        }`}
-      >
-        <div className='bg-background/95 border-border flex items-center gap-3 rounded-full border py-2 pr-2 pl-3 shadow-lg backdrop-blur sm:pl-4'>
-          {avatars && avatars.length > 0 && (
-            <AvatarGroup aria-hidden='true'>
-              {avatars.map(src => (
-                <Avatar key={src} className='ring-background size-6 ring-2'>
-                  <AvatarImage src={src || undefined} alt='' />
-                  <AvatarFallback />
-                </Avatar>
-              ))}
-            </AvatarGroup>
-          )}
-          <p className='truncate text-sm'>{message}</p>
-          <a
-            href={href}
-            className='hover:text-foreground text-muted-foreground focus-visible:ring-ring hidden shrink-0 items-center gap-1 rounded-sm text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none sm:inline-flex'
-          >
-            {linkLabel}
-            <ArrowRight className='size-3.5' />
-          </a>
-          <Button
-            variant='ghost'
-            size='icon'
-            className='size-8 shrink-0 rounded-full'
-            aria-label='Dismiss announcement'
-            onClick={dismiss}
-          >
-            <X className='size-4' />
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className={`grid transition-all duration-200 ease-out motion-reduce:transition-none ${
-        closing ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100'
-      }`}
-    >
-      <div className='overflow-hidden'>
-        <div className='bg-primary text-primary-foreground'>
-          <div
-            className={`flex w-full items-center gap-3 px-4 py-2.5 sm:px-6 lg:px-8 ${
-              fullWidth ? '' : 'mx-auto max-w-7xl'
-            }`}
-          >
-            {badge ? (
-              <Badge
-                variant='secondary'
-                className='hidden shrink-0 rounded-full px-2 py-0 text-xs font-semibold sm:inline-flex'
-              >
-                {badge}
-              </Badge>
-            ) : null}
-
-            <p className='min-w-0 flex-1 truncate text-sm'>{message}</p>
-
-            {onCtaClick ? (
-              <span className='relative inline-flex'>
-                <motion.span
-                  aria-hidden='true'
-                  className='pointer-events-none absolute inset-0 rounded-md ring-2 ring-background/70'
-                  initial={{ scale: 1, opacity: 0.7 }}
-                  animate={
-                    reduceMotion
-                      ? { scale: 1, opacity: 0 }
-                      : { scale: [1, 1.35], opacity: [0.7, 0] }
-                  }
-                  transition={{ duration: 1.8, repeat: Infinity, ease: 'easeOut', repeatDelay: 0.4 }}
-                />
-                <Button
-                  type='button'
-                  variant='secondary'
-                  size='sm'
-                  onClick={onCtaClick}
-                  className='shrink-0'
-                >
-                  <span className='hidden sm:inline'>{linkLabel}</span>
-                  <span className='sr-only sm:hidden'>{linkLabel}</span>
-                  <ArrowRight className='size-3.5' aria-hidden='true' />
-                </Button>
-              </span>
-            ) : (
-              <a
-                href={href}
-                className='focus-visible:ring-ring inline-flex shrink-0 items-center gap-1 rounded-sm text-sm font-medium underline-offset-4 transition-opacity duration-150 hover:opacity-80 hover:underline focus-visible:ring-2 focus-visible:outline-none'
-              >
-                <span className='hidden sm:inline'>{linkLabel}</span>
-                <span className='sr-only sm:hidden'>{linkLabel}</span>
-                <ArrowRight className='size-3.5' aria-hidden='true' />
-              </a>
-            )}
-
-            <Button
-              variant='ghost'
-              size='icon'
-              className='hover:bg-primary-foreground/10 hover:text-primary-foreground size-8 shrink-0'
-              aria-label='Dismiss announcement'
-              onClick={dismiss}
-            >
-              <X className='size-4' />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Banner1

package/src/blocks/marketing/cta/cta-section-1.tsx

@@ -1,112 +0,0 @@
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { ArrowRight, Phone, Radio } from 'lucide-react'
-import type { CTA } from '../../../lib/types'
-
-export interface CtaSection1Props {
-  badgeText?: string
-  title?: string
-  description?: string
-  primaryCta?: CTA
-  secondaryCta?: CTA
-  onPrimaryClick?: () => void
-  onSecondaryClick?: () => void
-}
-
-const HEADING_ID = 'cta-section-1-heading'
-
-export function CtaSection1({
-  badgeText,
-  title,
-  description,
-  primaryCta,
-  secondaryCta,
-  onPrimaryClick,
-  onSecondaryClick,
-}: CtaSection1Props) {
-  return (
-    <section
-      className='bg-background relative w-full overflow-hidden py-24'
-      aria-labelledby={title ? HEADING_ID : undefined}
-    >
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='relative mx-auto max-w-4xl text-center'>
-          {badgeText && (
-            <Badge
-              variant='secondary'
-              className='mb-6 h-auto rounded-md px-2.5 py-0.5 text-sm font-medium'
-            >
-              <Radio className='!size-5' aria-hidden='true' />
-              {badgeText}
-            </Badge>
-          )}
-
-          {title && (
-            <h1
-              id={HEADING_ID}
-              className='mb-6 text-4xl font-bold tracking-tight text-balance sm:text-5xl lg:text-6xl'
-            >
-              {title}
-            </h1>
-          )}
-
-          {description && (
-            <p className='text-muted-foreground mx-auto mb-10 max-w-2xl text-lg text-balance'>
-              {description}
-            </p>
-          )}
-
-          {(primaryCta || secondaryCta) && (
-            <div className='flex flex-wrap items-center justify-center gap-4'>
-              {primaryCta &&
-                (primaryCta.href ? (
-                  <Button asChild size='lg' className='h-10 cursor-pointer px-6 w-fit'>
-                    <a href={primaryCta.href}>
-                      {primaryCta.label}
-                      <ArrowRight />
-                    </a>
-                  </Button>
-                ) : (
-                  <Button
-                    size='lg'
-                    className='h-10 cursor-pointer px-6 w-fit'
-                    onClick={onPrimaryClick}
-                  >
-                    {primaryCta.label}
-                    <ArrowRight />
-                  </Button>
-                ))}
-
-              {secondaryCta &&
-                (secondaryCta.href ? (
-                  <Button
-                    asChild
-                    variant='outline'
-                    size='lg'
-                    className='h-10 cursor-pointer px-6 w-fit'
-                  >
-                    <a href={secondaryCta.href}>
-                      <Phone />
-                      {secondaryCta.label}
-                    </a>
-                  </Button>
-                ) : (
-                  <Button
-                    variant='outline'
-                    size='lg'
-                    className='h-10 cursor-pointer px-6 w-fit'
-                    onClick={onSecondaryClick}
-                  >
-                    <Phone />
-                    {secondaryCta.label}
-                  </Button>
-                ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default CtaSection1

package/src/blocks/marketing/faq/faq-block-1.tsx

@@ -1,45 +0,0 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../ui/accordion'
-
-export interface FaqItem {
-  value: string
-  question: string
-  answer: string
-}
-
-export interface FaqBlock1Props {
-  /** Preguntas y respuestas del bloque. Cada item necesita un `value` único. */
-  items: FaqItem[]
-  title?: string
-  description?: string
-  /** Permite abrir varios items a la vez (`'multiple'`) o solo uno (`'single'`). */
-  accordionType?: 'single' | 'multiple'
-}
-
-export function FaqBlock1({
-  items,
-  title = 'Preguntas frecuentes',
-  description,
-  accordionType = 'multiple',
-}: FaqBlock1Props) {
-  return (
-    <div className='w-full py-16'>
-      <div className='mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8'>
-        <div className='mb-12 text-center'>
-          <h2 className='mb-4 text-4xl font-bold'>{title}</h2>
-          {description && <p className='text-muted-foreground'>{description}</p>}
-        </div>
-
-        <Accordion type={accordionType} className='flex flex-col gap-4'>
-          {items.map(item => (
-            <AccordionItem key={item.value} value={item.value} className='rounded-md !border'>
-              <AccordionTrigger className='cursor-pointer px-4 py-4'>{item.question}</AccordionTrigger>
-              <AccordionContent className='text-muted-foreground px-4'>{item.answer}</AccordionContent>
-            </AccordionItem>
-          ))}
-        </Accordion>
-      </div>
-    </div>
-  )
-}
-
-export default FaqBlock1

package/src/blocks/marketing/features/feature.test.tsx

@@ -1,153 +0,0 @@
-import { Zap } from 'lucide-react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import {
-  featureCardsSpecSchema,
-  featurePropsSchema,
-  featureSplitSpecSchema,
-} from '../../../lib/contracts'
-import Feature, { type FeatureItem, type FeatureProps } from './feature'
-
-const items: FeatureItem[] = [
-  { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: Zap },
-  { id: 'f2', title: 'Safe', description: 'Built to last.', icon: Zap },
-]
-
-const specItems = [
-  { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: 'Zap' },
-  { id: 'f2', title: 'Safe', description: 'Built to last.', icon: 'Zap' },
-]
-
-const render = (props: FeatureProps) => renderToStaticMarkup(<Feature {...props} />)
-
-describe('Feature — canonical render', () => {
-  it('renders the cards structure by default (former Feature1)', () => {
-    const html = render({
-      items,
-      badge: 'Why us',
-      title: 'Benefits',
-      description: 'Everything you need',
-      learnMoreLabel: 'Learn more',
-      ctaLabel: 'See all',
-      onCtaClick: () => {},
-      onLearnMore: () => {},
-    })
-    expect(html).toContain('Why us')
-    expect(html).toContain('Benefits')
-    expect(html).toContain('Fast')
-    expect(html).toContain('Learn more')
-    expect(html).toContain('See all')
-  })
-
-  it('renders the split structure with presentation: split (former Feature2)', () => {
-    const html = render({
-      items,
-      presentation: 'split',
-      title: 'Benefits',
-      description: 'Everything you need',
-      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
-      className: 'bg-background',
-    })
-    expect(html).toContain('Benefits')
-    expect(html).toContain('Fast')
-    expect(html).toContain('https://cdn.example/img.jpg')
-    expect(html).toContain('grayscale')
-    expect(html).toContain('bg-background')
-  })
-
-  it('omits the badge and per-item learn-more in the split presentation', () => {
-    const html = render({
-      items,
-      presentation: 'split',
-      badge: 'Why us',
-      title: 'Benefits',
-      learnMoreLabel: 'Learn more',
-      onLearnMore: () => {},
-      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
-    } as unknown as FeatureProps)
-    expect(html).not.toContain('Why us')
-    expect(html).not.toContain('Learn more')
-  })
-
-  it('renders no empty chrome when optional content is absent (cards)', () => {
-    const html = render({ items })
-    expect(html).not.toContain('badge')
-    expect(html).not.toContain('Learn more')
-    expect(html).not.toContain('See all')
-  })
-
-  it('rejects split without an image at the serialized boundary', () => {
-    expect(() =>
-      featureSplitSpecSchema.parse({ items: specItems, presentation: 'split' }),
-    ).toThrow()
-    expect(() =>
-      featurePropsSchema.parse({ items: specItems, presentation: 'split' }),
-    ).toThrow()
-  })
-
-  it('rejects split with a blank image source', () => {
-    expect(() =>
-      featureSplitSpecSchema.parse({
-        items: specItems,
-        presentation: 'split',
-        image: { src: '   ', alt: 'Workshop' },
-      }),
-    ).toThrow()
-  })
-
-  it('accepts cards without an image at the serialized boundary', () => {
-    expect(() => featurePropsSchema.parse({ items: specItems })).not.toThrow()
-    expect(() =>
-      featurePropsSchema.parse({ items: specItems, presentation: 'cards' }),
-    ).not.toThrow()
-    expect(() =>
-      featureCardsSpecSchema.parse({ items: specItems }),
-    ).not.toThrow()
-  })
-
-  it('throws a configuration error for untyped split callers without an image', () => {
-    expect(() =>
-      render({ items, presentation: 'split' } as unknown as FeatureProps),
-    ).toThrow(/presentation="split".*image/)
-    expect(() =>
-      render({
-        items,
-        presentation: 'split',
-        image: { src: '   ', alt: 'Workshop' },
-      } as unknown as FeatureProps),
-    ).toThrow(/presentation="split".*image/)
-  })
-
-  it('renders one image with the supplied src and alt and never emits an empty src', () => {
-    const html = render({
-      items,
-      presentation: 'split',
-      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
-    })
-    expect(html).toContain('<img')
-    expect(html).toContain('src="https://cdn.example/img.jpg"')
-    expect(html).toContain('alt="Workshop"')
-    expect(html.match(/<img/g)).toHaveLength(1)
-    expect(html).not.toContain('src=""')
-  })
-
-  it('renders an empty items list without item chrome or errors', () => {
-    const html = render({ items: [], title: 'Benefits' })
-    expect(html).toContain('Benefits')
-    expect(html).not.toContain('<article')
-    expect(html).not.toContain('<h3')
-  })
-
-  it('validates a serialized props object against featurePropsSchema', () => {
-    const spec = {
-      items: [
-        { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: 'Zap' },
-      ],
-      presentation: 'split',
-      title: 'Benefits',
-      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
-    }
-    const parsed = featurePropsSchema.parse(spec)
-    expect(parsed.items[0]?.icon).toBe('Zap')
-  })
-})