@thorprovider/blocks 1.0.0 → 2.0.0

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

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

@@ -1,355 +0,0 @@
-import type { ReactElement, ReactNode, SVGProps } from 'react'
-import { Input } from '../../../ui/input'
-import { Button } from '../../../ui/button'
-import { ArrowRight, Mail, MapPin, Phone } from 'lucide-react'
-
-export type FooterSection4SocialIcon = 'facebook' | 'twitter' | 'instagram'
-
-export interface FooterSection4Link {
-  label: string
-  href?: string
-}
-
-export interface FooterSection4LinkColumn {
-  title: string
-  links: FooterSection4Link[]
-}
-
-export interface FooterSection4Contact {
-  /** Título de la columna de contacto. Requerido. */
-  heading: string
-  /** Dirección del negocio. Por defecto undefined. */
-  address?: string
-  /** href del enlace de dirección. Por defecto undefined. */
-  addressHref?: string
-  /** Teléfono de contacto. Por defecto undefined. */
-  phone?: string
-  /** href del enlace de teléfono (p. ej. tel:). Por defecto undefined. */
-  phoneHref?: string
-  /** Email de contacto. Por defecto undefined. */
-  email?: string
-  /** href del enlace de email (p. ej. mailto:). Por defecto undefined. */
-  emailHref?: string
-}
-
-export interface FooterSection4SocialLink {
-  label: string
-  href?: string
-  icon: FooterSection4SocialIcon
-}
-
-export interface FooterSection4Props {
-  /** Nombre de la marca mostrado junto al logo. Requerido. */
-  brandName: string
-  /** Descripción corta de la marca bajo el logo. Requerida. */
-  tagline: string
-  /** Placeholder del input de email del newsletter. Por defecto 'Tu correo electrónico'. */
-  newsletterPlaceholder?: string
-  /** Texto del botón de suscripción. Por defecto 'Suscribirse'. */
-  newsletterSubmitLabel?: string
-  /** Datos de la columna de contacto (dirección, teléfono, email). Requerido. */
-  contact: FooterSection4Contact
-  /** Columnas de enlaces (Quick Links, Resources, Legal...). Requerido. */
-  linkColumns: FooterSection4LinkColumn[]
-  /** Texto de copyright de la barra inferior (incluye año). Requerido. */
-  copyright: string
-  /** Redes sociales con su icono serializable por nombre. Por defecto []. */
-  socialLinks?: FooterSection4SocialLink[]
-  /** Logo personalizado; si se omite se usa el SVG interno del bloque. Por defecto undefined. */
-  logo?: ReactNode
-  /** Callback al enviar el formulario newsletter. Recibe el email. */
-  onNewsletterSubmit?: (email: string) => void
-  /** Callback al hacer clic en un enlace de columna o contacto. Recibe el enlace. */
-  onLinkClick?: (link: FooterSection4Link) => void
-  /** Callback al hacer clic en una red social. Recibe el label. */
-  onSocialClick?: (label: string) => void
-}
-
-const socialIconPaths: Record<
-  FooterSection4SocialIcon,
-  (props: SVGProps<SVGSVGElement>) => ReactElement
-> = {
-  facebook: props => (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='2'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z' />
-    </svg>
-  ),
-  twitter: props => (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='2'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <path d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z' />
-    </svg>
-  ),
-  instagram: props => (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='2'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <rect width='20' height='20' x='2' y='2' rx='5' ry='5' />
-      <path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z' />
-      <line x1='17.5' y1='6.5' x2='17.51' y2='6.5' />
-    </svg>
-  ),
-}
-
-const DefaultLogo = (
-  <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>
-)
-
-const contactItems = (contact: FooterSection4Contact, onLinkClick?: FooterSection4Props['onLinkClick']) => {
-  const items: { key: string; icon: ReactElement; href?: string; text?: string }[] = []
-  if (contact.address) {
-    items.push({
-      key: 'address',
-      icon: <MapPin className='mt-0.5 size-4 shrink-0' aria-hidden />,
-      href: contact.addressHref,
-      text: contact.address,
-    })
-  }
-  if (contact.phone) {
-    items.push({
-      key: 'phone',
-      icon: <Phone className='size-4 shrink-0' aria-hidden />,
-      href: contact.phoneHref,
-      text: contact.phone,
-    })
-  }
-  if (contact.email) {
-    items.push({
-      key: 'email',
-      icon: <Mail className='size-4 shrink-0' aria-hidden />,
-      href: contact.emailHref,
-      text: contact.email,
-    })
-  }
-  return items
-}
-
-export function FooterSection4({
-  brandName,
-  tagline,
-  newsletterPlaceholder = 'Tu correo electrónico',
-  newsletterSubmitLabel = 'Suscribirse',
-  contact,
-  linkColumns,
-  copyright,
-  socialLinks = [],
-  logo,
-  onNewsletterSubmit,
-  onLinkClick,
-  onSocialClick,
-}: FooterSection4Props) {
-  const logoMark = logo ?? DefaultLogo
-  return (
-    <footer className='from-background to-muted/50 w-full bg-linear-to-b py-16'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        {/* Top Section with Logo and Newsletter */}
-        <section className='mb-16 flex flex-col items-start justify-between gap-8 md:flex-row md:items-center'>
-          <div className='max-w-sm flex flex-col gap-4'>
-            <div className='flex items-center gap-2'>
-              {logoMark}
-              <h2 className='text-2xl font-bold text-balance'>{brandName}</h2>
-            </div>
-            <p className='text-muted-foreground text-sm leading-relaxed text-balance'>{tagline}</p>
-          </div>
-
-          <div className='w-full md:w-auto'>
-            <form
-              className='relative'
-              onSubmit={e => {
-                e.preventDefault()
-                if (onNewsletterSubmit) {
-                  const email = new FormData(e.currentTarget).get('email')
-                  if (typeof email === 'string') {
-                    onNewsletterSubmit(email)
-                  }
-                }
-              }}
-            >
-              <Input
-                type='email'
-                name='email'
-                placeholder={newsletterPlaceholder}
-                className='border-muted bg-background/50 h-12 w-full ps-4 pe-32 backdrop-blur-xs md:w-[400px]'
-                aria-label={newsletterPlaceholder}
-              />
-              <Button
-                type='submit'
-                className='bg-primary hover:bg-primary/90 absolute end-1 top-1 h-10 cursor-pointer px-4'
-                aria-label={newsletterSubmitLabel}
-              >
-                {newsletterSubmitLabel}
-                <ArrowRight />
-              </Button>
-            </form>
-          </div>
-        </section>
-
-        {/* Middle Section with Contact Info and Links */}
-        <div className='mb-16 grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-5'>
-          {/* Contact Information */}
-          <address className='not-italic lg:col-span-2'>
-            <h3 className='mb-6 text-lg font-semibold text-balance'>{contact.heading}</h3>
-            <ul className='flex flex-col gap-4'>
-              {contactItems(contact, onLinkClick).map(item => (
-                <li key={item.key} className='text-muted-foreground flex items-start gap-3 text-sm'>
-                  {item.icon}
-                  {item.href ? (
-                    <a
-                      href={item.href}
-                      onClick={e => {
-                        if (!onLinkClick) {
-                          e.preventDefault()
-                        } else {
-                          onLinkClick({ label: item.text ?? '' })
-                        }
-                      }}
-                      className='hover:text-foreground transition-colors'
-                    >
-                      {item.text}
-                    </a>
-                  ) : (
-                    <span>{item.text}</span>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </address>
-
-          {/* Link columns */}
-          {linkColumns.map(column => (
-            <nav key={column.title} aria-label={column.title}>
-              <h3 className='mb-6 text-lg font-semibold text-balance'>{column.title}</h3>
-              <ul className='grid grid-cols-1 gap-3'>
-                {column.links.map(link => (
-                  <li key={link.label}>
-                    {link.href ? (
-                      <a
-                        href={link.href}
-                        onClick={e => {
-                          if (!onLinkClick) {
-                            e.preventDefault()
-                          } else {
-                            onLinkClick(link)
-                          }
-                        }}
-                        className='group text-muted-foreground hover:text-foreground focus-visible:ring-ring relative inline-block rounded-sm text-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden'
-                      >
-                        {link.label}
-                      </a>
-                    ) : (
-                      <span className='text-muted-foreground relative inline-block text-sm'>
-                        {link.label}
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          ))}
-        </div>
-
-        {/* Bottom Section */}
-        <div className='border-muted-foreground/20 flex flex-col items-center justify-between border-t pt-8 md:flex-row'>
-          <p className='text-muted-foreground mb-4 text-sm md:mb-0'>{copyright}</p>
-
-          <nav aria-label='Social media'>
-            <ul className='flex gap-4'>
-              {socialLinks.map(({ label, href, icon }) => {
-                const Icon = socialIconPaths[icon]
-                const element = (
-                  <>
-                    <Icon className='size-5' aria-hidden />
-                    <span className='sr-only'>{label}</span>
-                  </>
-                )
-                const classes =
-                  'bg-accent text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex size-10 items-center justify-center rounded-full p-2 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden'
-                return (
-                  <li key={label}>
-                    {href ? (
-                      <a
-                        href={href}
-                        onClick={e => {
-                          if (!onSocialClick) {
-                            e.preventDefault()
-                          } else {
-                            onSocialClick(label)
-                          }
-                        }}
-                        className={classes}
-                        aria-label={`Seguir en ${label}`}
-                      >
-                        {element}
-                      </a>
-                    ) : (
-                      <span className={classes} aria-hidden='true'>
-                        {element}
-                      </span>
-                    )}
-                  </li>
-                )
-              })}
-            </ul>
-          </nav>
-        </div>
-      </div>
-    </footer>
-  )
-}
-
-export default FooterSection4