@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/storefront-hero/storefront-hero-6.tsx

@@ -0,0 +1,205 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ArrowRight, Sparkles } from 'lucide-react'
+
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { Card, CardContent } from '../../../ui/card'
+
+export interface HeroDeal {
+  /** Unique identifier for the deal. */
+  id: string
+  /** Deal name shown in the badge, e.g. "Summer Sale". */
+  title: string
+  /** Discount label, e.g. "50% OFF". */
+  discount: string
+  /** Countdown text, e.g. "2d : 15h : 30m". */
+  endTime: string
+}
+
+export interface HeroCategory {
+  /** Unique identifier for the category. */
+  id: string
+  /** Category name. */
+  name: string
+  /** Product count label, e.g. "2.5k+". */
+  count: string
+  /** Image URL for the category card. */
+  image: string
+  /** Accessible image description (falls back to `name`). */
+  imageAlt?: string
+  /** Optional link destination; renders the card arrow as a link when present. */
+  href?: string
+}
+
+export interface StorefrontHero6Props {
+  /** Small pill shown above the headline. */
+  badge?: string
+  /** Main headline. */
+  title: string
+  /** Accent line rendered on a new line after the headline. */
+  subtitle?: string
+  /** Supporting paragraph under the headline. */
+  description: string
+  /** Deals rendered in the sticky auto-rotating top bar. */
+  deals: HeroDeal[]
+  /** Product categories rendered as a card grid. */
+  categories: HeroCategory[]
+  /** Milliseconds between auto-rotating deals (default 3000). */
+  rotationInterval?: number
+  /** Label shown before the deal countdown, e.g. "Ends in". */
+  endsInLabel?: string
+  /** Label of the shop-now button in the deals bar. */
+  shopNowLabel?: string
+  /** Unit appended to each category product count. */
+  productsLabel?: string
+  /** Prefix for the category arrow accessible label. */
+  viewLabel?: string
+  /** Called when the shop-now button in the deals bar is clicked. */
+  onShopNow?: (deal: HeroDeal) => void
+  /** Called when a category arrow is clicked (categories without `href`). */
+  onCategoryClick?: (category: HeroCategory) => void
+}
+
+function StorefrontHero6({
+  badge,
+  title,
+  subtitle,
+  description,
+  deals,
+  categories,
+  rotationInterval = 3000,
+  endsInLabel = 'Termina en',
+  shopNowLabel = 'Comprar ahora',
+  productsLabel = 'productos',
+  viewLabel = 'Ver',
+  onShopNow,
+  onCategoryClick,
+}: StorefrontHero6Props) {
+  const [currentDeal, setCurrentDeal] = useState(0)
+
+  useEffect(() => {
+    if (deals.length <= 1) return
+
+    const interval = setInterval(() => {
+      setCurrentDeal(prev => (prev + 1) % deals.length)
+    }, rotationInterval)
+
+    return () => clearInterval(interval)
+  }, [deals.length, rotationInterval])
+
+  const deal = deals[currentDeal]
+
+  return (
+    <div className='relative'>
+      {deal && (
+        <header className='bg-primary text-primary-foreground sticky top-0 z-50 shadow-md'>
+          <div className='mx-auto w-full max-w-7xl px-4 py-2 sm:px-6 lg:px-8'>
+            <div className='flex items-center justify-center'>
+              <div className='flex w-full max-w-3xl items-center justify-center gap-4'>
+                <div className='flex items-center gap-2'>
+                  <Badge
+                    variant='secondary'
+                    className='bg-primary-foreground text-primary px-2.5 py-0.5 font-semibold'
+                  >
+                    {deal.title}
+                  </Badge>
+                  <span className='font-semibold'>{deal.discount}</span>
+                </div>
+                <span className='hidden sm:inline'>
+                  {endsInLabel} {deal.endTime}
+                </span>
+                <Button
+                  variant='link'
+                  size='sm'
+                  className='text-primary-foreground hover:text-primary-foreground/80 ml-auto h-8 cursor-pointer px-3 text-xs'
+                  onClick={onShopNow ? () => onShopNow(deal) : undefined}
+                >
+                  {shopNowLabel} <ArrowRight />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </header>
+      )}
+
+      <main className='mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8'>
+        <div className='mb-12 text-center'>
+          {badge && (
+            <div className='relative inline-block'>
+              <Badge
+                variant='outline'
+                className='mb-4 flex h-auto items-center gap-2 rounded-full px-3.5 py-1.5 text-sm font-normal'
+              >
+                <Sparkles className='size-4' aria-hidden='true' />
+                {badge}
+              </Badge>
+            </div>
+          )}
+          <h1 className='text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl'>
+            {title}
+            {subtitle && (
+              <>
+                <br />
+                {subtitle}
+              </>
+            )}
+          </h1>
+          <p className='text-muted-foreground mx-auto mt-4 max-w-2xl text-lg'>{description}</p>
+        </div>
+
+        <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+          {categories.map(category => (
+            <Card key={category.id} className='group relative overflow-hidden py-0 transition-all duration-500'>
+              <img
+                src={category.image || undefined}
+                alt={category.imageAlt ?? category.name}
+                className='aspect-4/5 size-full object-cover grayscale transition-all duration-500 hover:grayscale-0'
+                width={400}
+                height={500}
+                loading='lazy'
+              />
+              <CardContent className='absolute inset-x-0 bottom-0 p-4'>
+                <div className='mt-1 flex items-center justify-between'>
+                  <div>
+                    <h2 className='text-background dark:text-foreground text-lg font-medium'>{category.name}</h2>
+                    <span className='text-background/80 dark:text-foreground/80 text-sm'>
+                      {category.count} {productsLabel}
+                    </span>
+                  </div>
+                  {category.href ? (
+                    <Button
+                      variant='secondary'
+                      size='icon'
+                      className='h-9 w-9 cursor-pointer rounded-full backdrop-blur-xs'
+                      aria-label={`${viewLabel} ${category.name}`}
+                      asChild
+                    >
+                      <a href={category.href}>
+                        <ArrowRight />
+                      </a>
+                    </Button>
+                  ) : (
+                    <Button
+                      variant='secondary'
+                      size='icon'
+                      className='h-9 w-9 cursor-pointer rounded-full backdrop-blur-xs'
+                      aria-label={`${viewLabel} ${category.name}`}
+                      onClick={onCategoryClick ? () => onCategoryClick(category) : undefined}
+                    >
+                      <ArrowRight />
+                    </Button>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export { StorefrontHero6 }
+export default StorefrontHero6

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

@@ -0,0 +1,69 @@
+'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

@@ -0,0 +1,188 @@
+'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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,45 @@
+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