@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -1,195 +0,0 @@
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { ArrowRight } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import { cn } from '../../../lib/utils'
-
-export interface FeatureItem {
-  id: string
-  title: string
-  description: string
-  icon: LucideIcon
-}
-
-/**
- * The bounded presentation surface. `cards` is the card grid with a centered
- * header, per-item learn-more and a section CTA; `split` is the editorial
- * split layout with a required image column and deliberately ignores the
- * badge and per-item learn-more. The value changes structure, never the item
- * contract.
- */
-export type FeaturePresentation = 'cards' | 'split'
-
-interface FeatureBaseProps {
-  items: FeatureItem[]
-  title?: string
-  description?: string
-  className?: string
-}
-
-export interface FeatureCardsProps extends FeatureBaseProps {
-  /** Bounded presentation option; defaults to `cards`. */
-  presentation?: 'cards'
-  /** `cards`-only header chrome. */
-  badge?: string
-  /** Section CTA (`cards` only). */
-  ctaLabel?: string
-  onCtaClick?: () => void
-  /** Per-item link (`cards` only). */
-  learnMoreLabel?: string
-  onLearnMore?: (item: FeatureItem) => void
-}
-
-export interface FeatureSplitProps extends FeatureBaseProps {
-  presentation: 'split'
-  /** Required editorial image; a non-empty `src` is part of the contract. */
-  image: { src: string; alt: string }
-}
-
-export type FeatureProps = FeatureCardsProps | FeatureSplitProps
-
-function SplitFeature({ items, title, description, image, className }: FeatureSplitProps) {
-  if (!image?.src || image.src.trim() === '') {
-    throw new Error(
-      'Feature: presentation="split" requires a non-empty image.src. Pass { image: { src, alt } } or use presentation="cards".',
-    )
-  }
-
-  return (
-    <section
-      className={cn('mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8', className)}
-    >
-      <div className='grid gap-12 lg:grid-cols-2 lg:gap-16'>
-        <div className='flex flex-col gap-10'>
-          {(title || description) && (
-            <header className='flex flex-col gap-4'>
-              {title && (
-                <h2 className='text-3xl font-bold tracking-tight text-balance sm:text-4xl lg:text-5xl'>
-                  {title}
-                </h2>
-              )}
-              {description && (
-                <p className='text-muted-foreground text-base text-pretty md:text-lg'>
-                  {description}
-                </p>
-              )}
-            </header>
-          )}
-
-          <div className='grid gap-6 sm:grid-cols-2 sm:gap-8'>
-            {items.map(item => (
-              <div key={item.id} className='group flex flex-col items-start gap-3 rounded-lg'>
-                <div className='bg-secondary text-secondary-foreground inline-flex size-10 items-center justify-center rounded-full'>
-                  <item.icon className='size-5' aria-hidden='true' />
-                </div>
-                <div className='flex flex-col gap-1.5'>
-                  <h3 className='text-foreground text-base font-semibold md:text-lg'>{item.title}</h3>
-                  <p className='text-muted-foreground text-sm text-balance'>{item.description}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className='relative'>
-          <div className='bg-muted relative z-10 overflow-hidden rounded-lg shadow-sm transition-all duration-300 hover:shadow-md'>
-            <div className='aspect-[4/3] w-full'>
-              <img
-                src={image.src}
-                alt={image.alt}
-                className='size-full object-cover grayscale'
-                loading='lazy'
-                decoding='async'
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function CardsFeature({
-  items,
-  badge,
-  title,
-  description,
-  ctaLabel,
-  onCtaClick,
-  learnMoreLabel,
-  onLearnMore,
-  className,
-}: FeatureCardsProps) {
-  return (
-    <section
-      className={cn('mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8', className)}
-    >
-      {(badge || title || description) && (
-        <header className='mx-auto mb-12 max-w-2xl text-center'>
-          {badge && (
-            <Badge variant='secondary' className='h-auto mb-4 rounded-full px-4 py-1 font-medium'>
-              {badge}
-            </Badge>
-          )}
-          {title && (
-            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>{title}</h2>
-          )}
-          {description && (
-            <p className='text-muted-foreground text-pretty'>{description}</p>
-          )}
-        </header>
-      )}
-
-      <div className='grid gap-4 sm:grid-cols-2 sm:gap-6 md:grid-cols-3'>
-        {items.map(feature => (
-          <article key={feature.id} className='group'>
-            <Card className='relative h-full overflow-hidden transition-all hover:shadow-md'>
-              <CardContent className='px-6'>
-                <div className='bg-secondary text-secondary-foreground mb-4 inline-flex size-12 items-center justify-center rounded-xl'>
-                  <feature.icon className='size-5' aria-hidden='true' />
-                </div>
-                <h3 className='mb-2 text-lg font-semibold'>{feature.title}</h3>
-                <p className='text-muted-foreground mb-4 text-sm'>{feature.description}</p>
-
-                {learnMoreLabel && (
-                  <Button
-                    variant='link'
-                    size='sm'
-                    className='h-8 px-3 text-xs text-muted-foreground hover:text-foreground h-auto cursor-pointer !p-0 text-sm'
-                    onClick={onLearnMore ? () => onLearnMore(feature) : undefined}
-                  >
-                    {learnMoreLabel}
-                    <ArrowRight />
-                  </Button>
-                )}
-              </CardContent>
-            </Card>
-          </article>
-        ))}
-      </div>
-
-      {ctaLabel && (
-        <div className='mt-12 text-center'>
-          <Button
-            size='lg'
-            className='h-10 cursor-pointer rounded-lg !px-8'
-            onClick={onCtaClick}
-          >
-            {ctaLabel}
-            <ArrowRight />
-          </Button>
-        </div>
-      )}
-    </section>
-  )
-}
-
-export function Feature(props: FeatureProps) {
-  if (props.presentation === 'split') {
-    return <SplitFeature {...props} />
-  }
-  return <CardsFeature {...props} />
-}
-
-export default Feature

package/src/blocks/marketing/footers/footer-section-1.test.tsx

@@ -1,117 +0,0 @@
-import type { ReactElement, ReactNode } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it, vi } from 'vitest'
-import { FooterSection1 } from './footer-section-1'
-
-const base = {
-  brandName: 'ElectroCuba',
-  linkColumns: [],
-}
-
-type SubmitHandler = (event: { preventDefault: () => void }) => void
-
-function findForm(node: ReactNode): ReactElement<{ onSubmit?: SubmitHandler }> | undefined {
-  if (node === null || node === undefined || typeof node !== 'object') return undefined
-  if (Array.isArray(node)) {
-    for (const child of node) {
-      const found = findForm(child)
-      if (found) return found
-    }
-    return undefined
-  }
-  const element = node as ReactElement<{ children?: ReactNode }>
-  if (element.type === 'form') return element as ReactElement<{ onSubmit?: SubmitHandler }>
-  return findForm(element.props?.children)
-}
-
-describe('FooterSection1 — optional brand accent', () => {
-  it('renders the brand name unchanged when no accent is supplied', () => {
-    const html = renderToStaticMarkup(<FooterSection1 {...base} />)
-    expect(html).toContain('>ElectroCuba</span>')
-    expect(html).not.toContain('text-brand-promo')
-  })
-
-  it('accents a matched trailing segment without duplicating the brand name', () => {
-    const html = renderToStaticMarkup(
-      <FooterSection1 {...base} brandAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
-    )
-    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
-    expect(html.match(/Electro/g)).toHaveLength(1)
-    expect(html.match(/Cuba/g)).toHaveLength(1)
-  })
-
-  it('accents the full brand name when the accent covers all of it', () => {
-    const html = renderToStaticMarkup(
-      <FooterSection1 {...base} brandAccent={{ text: 'ElectroCuba', className: 'text-brand-promo' }} />,
-    )
-    expect(html).toContain('<span class="text-brand-promo">ElectroCuba</span>')
-  })
-
-  it('does not accent when the segment is not a trailing match', () => {
-    const html = renderToStaticMarkup(<FooterSection1 {...base} brandAccent={{ text: 'Electro' }} />)
-    expect(html).toContain('>ElectroCuba</span>')
-  })
-})
-
-describe('FooterSection1 — newsletter requires a submit callback', () => {
-  it('renders no form, input, or button when the newsletter has no onSubmit', () => {
-    const html = renderToStaticMarkup(
-      <FooterSection1 {...base} newsletter={{ buttonLabel: 'Suscribirse', placeholder: 'tu@correo.com' }} />,
-    )
-    expect(html).not.toContain('<form')
-    expect(html).not.toContain('<input')
-    expect(html).not.toContain('<button')
-  })
-
-  it('renders the interactive form when a submit handler is supplied', () => {
-    const html = renderToStaticMarkup(
-      <FooterSection1 {...base} newsletter={{ buttonLabel: 'Suscribirse', onSubmit: () => {} }} />,
-    )
-    expect(html).toContain('<form')
-    expect(html).toContain('<input')
-    expect(html).toContain('<button')
-    expect(html).toContain('Suscribirse')
-  })
-
-  it('retains the supplied submit handler and forwards the email', () => {
-    const onSubmit = vi.fn()
-    const tree = FooterSection1({
-      ...base,
-      newsletter: { buttonLabel: 'Suscribirse', onSubmit },
-    })
-    const form = findForm(tree)
-    expect(form).toBeDefined()
-
-    vi.stubGlobal(
-      'FormData',
-      class {
-        get() {
-          return 'shopper@example.com'
-        }
-      },
-    )
-    try {
-      form?.props.onSubmit?.({ preventDefault: () => {} })
-    } finally {
-      vi.unstubAllGlobals()
-    }
-
-    expect(onSubmit).toHaveBeenCalledWith('shopper@example.com')
-  })
-})
-
-describe('FooterSection1 — optional outer surface className', () => {
-  it('keeps the default surface when className is omitted', () => {
-    const html = renderToStaticMarkup(<FooterSection1 {...base} />)
-    expect(html).toContain('bg-secondary')
-  })
-
-  it('merges a branded surface onto the footer and drops the default background', () => {
-    const html = renderToStaticMarkup(
-      <FooterSection1 {...base} className='bg-brand-nav text-brand-nav-foreground' />,
-    )
-    expect(html).toContain('bg-brand-nav')
-    expect(html).toContain('text-brand-nav-foreground')
-    expect(html).not.toContain('bg-secondary')
-  })
-})

package/src/blocks/marketing/footers/footer-section-1.tsx

@@ -1,178 +0,0 @@
-'use client'
-
-import { Input } from '../../../ui/input'
-import { Button } from '../../../ui/button'
-import { ArrowRight } from 'lucide-react'
-import { cn } from '../../../lib/utils'
-
-export interface FooterLink {
-  label: string
-  href?: string
-}
-
-export interface FooterLinkColumn {
-  title: string
-  links: FooterLink[]
-}
-
-export interface FooterNewsletter {
-  placeholder?: string
-  buttonLabel: string
-  /**
-   * Submit handler. The interactive form (input + submit button) renders only
-   * when this is supplied. A newsletter without `onSubmit` renders no form,
-   * input, or button — never a fake form.
-   */
-  onSubmit?: (email: string) => void
-}
-
-export interface BrandAccent {
-  /** Trailing segment of `brandName` to render with the accent styling. */
-  text: string
-  /** Consumer-supplied classes for the accent span (e.g. a brand color token). */
-  className?: string
-}
-
-export interface FooterSection1Props {
-  brandName: string
-  /**
-   * Optional accent for a trailing segment of `brandName` (e.g. the "Cuba" in
-   * "ElectroCuba"). When omitted, or when `text` is not a trailing segment of
-   * `brandName`, the brand name renders unchanged.
-   */
-  brandAccent?: BrandAccent
-  brandDescription?: string
-  linkColumns: FooterLinkColumn[]
-  newsletter?: FooterNewsletter
-  /**
-   * Consumer-supplied classes merged onto the outer `<footer>` as the final
-   * argument, so a semantic surface such as `bg-brand-nav
-   * text-brand-nav-foreground` overrides the default `bg-secondary`. Purely
-   * presentational: no layout, structure, or behavior changes.
-   */
-  className?: string
-}
-
-export function FooterSection1({
-  brandName,
-  brandAccent,
-  brandDescription,
-  linkColumns,
-  newsletter,
-  className,
-}: FooterSection1Props) {
-  const accentText = brandAccent?.text ?? ''
-  const hasAccent = accentText.length > 0 && brandName.endsWith(accentText)
-  const baseName = hasAccent ? brandName.slice(0, brandName.length - accentText.length) : brandName
-  const newsletterSubmit = newsletter?.onSubmit
-
-  return (
-    <footer
-      className={cn('bg-secondary w-full py-16', className)}
-      aria-label='Pie de página'
-    >
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='grid grid-cols-1 gap-8 lg:grid-cols-12'>
-          {/* Left Section */}
-          <div className='me-8 md:col-span-5'>
-            <div className='mb-6 flex items-center gap-2'>
-              <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
-                <path
-                  d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
-                  fill='currentColor'
-                />
-                <path
-                  d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
-                  fill='currentColor'
-                />
-                <path
-                  d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
-                  fill='currentColor'
-                />
-                <path
-                  d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
-                  fill='currentColor'
-                />
-                <path
-                  d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
-                  fill='currentColor'
-                />
-                <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' />
-                <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' />
-                <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
-                <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
-              </svg>
-              <span className='text-xl font-semibold'>
-                {baseName}
-                {hasAccent ? <span className={brandAccent?.className}>{accentText}</span> : null}
-              </span>
-            </div>
-            {brandDescription && (
-              <p className='text-muted-foreground mb-8 max-w-sm text-sm leading-relaxed text-balance'>
-                {brandDescription}
-              </p>
-            )}
-            {newsletter && newsletterSubmit ? (
-              <form
-                className='relative'
-                onSubmit={e => {
-                  e.preventDefault()
-                  const email = new FormData(e.currentTarget).get('email')
-                  if (typeof email === 'string') {
-                    newsletterSubmit(email)
-                  }
-                }}
-              >
-                <Input
-                  type='email'
-                  name='email'
-                  placeholder={newsletter.placeholder}
-                  className='border-muted-foreground/20 bg-background/80 h-12 pe-32'
-                  aria-label='Correo electrónico'
-                />
-                <Button
-                  type='submit'
-                  variant='default'
-                  className='absolute end-1 top-1 h-10 cursor-pointer px-4'
-                  aria-label='Suscribirse a la newsletter'
-                >
-                  {newsletter.buttonLabel}
-                  <ArrowRight />
-                </Button>
-              </form>
-            ) : null}
-          </div>
-
-          {/* Right Section */}
-          <div className='md:col-span-7'>
-            <div className='grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3'>
-              {linkColumns.map(column => (
-                <div key={column.title}>
-                  <h3 className='mb-4 text-lg font-medium'>{column.title}</h3>
-                  <ul className='flex flex-col gap-3'>
-                    {column.links.map(link => (
-                      <li key={link.label}>
-                        {link.href ? (
-                          <a
-                            href={link.href}
-                            className='text-muted-foreground hover:text-primary text-sm transition-colors'
-                          >
-                            {link.label}
-                          </a>
-                        ) : (
-                          <span className='text-muted-foreground text-sm'>{link.label}</span>
-                        )}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  )
-}
-
-export default FooterSection1

package/src/blocks/marketing/footers/footer-section-3.tsx

@@ -1,192 +0,0 @@
-import { Input } from '../../../ui/input'
-import { Button } from '../../../ui/button'
-import { ArrowRight, type LucideIcon } from 'lucide-react'
-
-export interface FooterLink {
-  label: string
-  href?: string
-}
-
-export interface FooterLinkColumn {
-  title: string
-  links: FooterLink[]
-}
-
-export interface SocialLink {
-  label: string
-  href?: string
-  icon: LucideIcon
-}
-
-export interface FooterSection3Props {
-  /** Texto del logo (identidad del bloque). Requerido. */
-  logoText: string
-  /** Descripción corta de la marca. Requerida. */
-  description: string
-  /** Columnas de enlaces (máximo recomendado 4). Requerido. */
-  linkColumns: FooterLinkColumn[]
-  /** Enlaces legales de la barra inferior. Por defecto []. */
-  legalLinks?: FooterLink[]
-  /** Redes sociales (cada una con su icono lucide). Por defecto []. */
-  socialLinks?: SocialLink[]
-  /** Título del bloque newsletter. Por defecto 'Suscríbete a nuestro boletín'. */
-  newsletterTitle?: string
-  /** Placeholder del input de email. Por defecto 'Tu correo electrónico'. */
-  newsletterPlaceholder?: string
-  /** aria-label del botón de envío (icon-only). Por defecto 'Suscribirse'. */
-  newsletterLabel?: string
-  /** Callback al enviar el formulario newsletter. Recibe el email. */
-  onSubscribe?: (email: string) => void
-}
-
-export function FooterSection3({
-  logoText,
-  description,
-  linkColumns,
-  legalLinks = [],
-  socialLinks = [],
-  newsletterTitle = 'Suscríbete a nuestro boletín',
-  newsletterPlaceholder = 'Tu correo electrónico',
-  newsletterLabel = 'Suscribirse',
-  onSubscribe,
-}: FooterSection3Props) {
-  return (
-    <footer className='w-full py-16' aria-label='Pie de página'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        {/* Logo y branding */}
-        <div className='mb-8 flex items-center gap-2'>
-          <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
-            <path
-              d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
-              fill='currentColor'
-            />
-            <path
-              d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
-              fill='currentColor'
-            />
-            <path
-              d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
-              fill='currentColor'
-            />
-            <path
-              d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
-              fill='currentColor'
-            />
-            <path
-              d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
-              fill='currentColor'
-            />
-            <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' />
-            <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' />
-            <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
-            <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
-          </svg>
-          <span className='text-2xl font-semibold'>{logoText}</span>
-        </div>
-
-        <p className='text-muted-foreground mb-8 max-w-lg text-sm'>{description}</p>
-
-        {/* Grid principal */}
-        <div className='grid grid-cols-2 gap-x-8 gap-y-12 md:grid-cols-4 lg:grid-cols-6'>
-          {/* Columna newsletter */}
-          <div className='col-span-2 me-8 flex flex-col gap-4 md:col-span-4 lg:col-span-2'>
-            <h4 className='text-foreground text-base font-medium'>{newsletterTitle}</h4>
-            <form
-              className='relative'
-              onSubmit={e => {
-                e.preventDefault()
-                if (onSubscribe) {
-                  const email = new FormData(e.currentTarget).get('email')
-                  if (typeof email === 'string') {
-                    onSubscribe(email)
-                  }
-                }
-              }}
-            >
-              <Input
-                type='email'
-                name='email'
-                placeholder={newsletterPlaceholder}
-                className='border-muted-foreground/20 h-10 bg-transparent pe-12'
-                aria-label={newsletterPlaceholder}
-              />
-              <Button
-                type='submit'
-                variant='outline'
-                size='icon'
-                className='absolute end-1 top-1 size-8 cursor-pointer p-0'
-                aria-label={newsletterLabel}
-              >
-                <ArrowRight className='size-4' />
-              </Button>
-            </form>
-          </div>
-
-          {/* Columnas de enlaces */}
-          {linkColumns.map(column => (
-            <div key={column.title} className='flex flex-col gap-4'>
-              <h4 className='text-foreground text-base font-medium'>{column.title}</h4>
-              <div className='flex flex-col gap-4'>
-                {column.links.map(link => (
-                  <span
-                    key={link.label}
-                    className='text-muted-foreground hover:text-foreground w-fit text-sm transition-colors'
-                  >
-                    <span className='group relative inline-flex items-center'>
-                      {link.label}
-                      <span className='bg-primary absolute start-0 -bottom-0.5 h-px w-0 transition-all duration-300 ease-out group-hover:w-full' />
-                    </span>
-                  </span>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Barra inferior */}
-        <div className='border-muted-foreground/20 mt-16 flex flex-col items-center justify-between gap-6 border-t pt-8 md:flex-row'>
-          {/* Enlaces legales */}
-          <div className='flex gap-4'>
-            {legalLinks.map(link => (
-              <span
-                key={link.label}
-                className='text-muted-foreground hover:text-foreground w-fit text-sm transition-colors'
-              >
-                <span className='group relative inline-flex items-center'>
-                  {link.label}
-                  <span className='bg-primary absolute start-0 -bottom-0.5 h-px w-0 transition-all duration-300 ease-out group-hover:w-full' />
-                </span>
-              </span>
-            ))}
-          </div>
-
-          {/* Iconos de redes sociales */}
-          <div className='flex gap-4'>
-            {socialLinks.map(({ label, href, icon: Icon }) =>
-              href ? (
-                <a
-                  key={label}
-                  href={href}
-                  className='bg-muted/50 text-muted-foreground hover:text-primary rounded-full p-2 transition-colors'
-                  aria-label={label}
-                >
-                  <Icon className='size-4' />
-                </a>
-              ) : (
-                <span
-                  key={label}
-                  className='bg-muted/50 text-muted-foreground rounded-full p-2'
-                  aria-hidden='true'
-                >
-                  <Icon className='size-4' />
-                </span>
-              )
-            )}
-          </div>
-        </div>
-      </div>
-    </footer>
-  )
-}
-
-export default FooterSection3