@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,97 @@
+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'
+
+export interface Feature1Item {
+  id: string
+  title: string
+  description: string
+  icon: LucideIcon
+}
+
+export interface Feature1Props {
+  items: Feature1Item[]
+  badge?: string
+  title?: string
+  description?: string
+  learnMoreLabel?: string
+  ctaLabel?: string
+  onCtaClick?: () => void
+  onLearnMore?: (item: Feature1Item) => void
+}
+
+export function Feature1({
+  items,
+  badge,
+  title,
+  description,
+  learnMoreLabel,
+  ctaLabel,
+  onCtaClick,
+  onLearnMore,
+}: Feature1Props) {
+  return (
+    <section className='mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8'>
+      {(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 default Feature1

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

@@ -0,0 +1,82 @@
+import { cn } from '../../../lib/utils'
+import type { LucideIcon } from 'lucide-react'
+
+export interface Feature2Item {
+  id: string
+  title: string
+  description: string
+  icon: LucideIcon
+}
+
+export interface Feature2Props {
+  items: Feature2Item[]
+  title?: string
+  description?: string
+  image?: { src: string; alt: string }
+  className?: string
+}
+
+export function Feature2({
+  items,
+  title,
+  description,
+  image,
+  className,
+}: Feature2Props) {
+  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>
+
+        {image && (
+          <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 || undefined}
+                  alt={image.alt}
+                  className='size-full object-cover grayscale'
+                  loading='lazy'
+                  decoding='async'
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default Feature2

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

@@ -0,0 +1,141 @@
+'use client'
+
+import { Input } from '../../../ui/input'
+import { Button } from '../../../ui/button'
+import { ArrowRight } from 'lucide-react'
+
+export interface FooterLink {
+  label: string
+  href?: string
+}
+
+export interface FooterLinkColumn {
+  title: string
+  links: FooterLink[]
+}
+
+export interface FooterNewsletter {
+  placeholder?: string
+  buttonLabel: string
+  onSubmit?: (email: string) => void
+}
+
+export interface FooterSection1Props {
+  brandName: string
+  brandDescription?: string
+  linkColumns: FooterLinkColumn[]
+  newsletter?: FooterNewsletter
+}
+
+export function FooterSection1({
+  brandName,
+  brandDescription,
+  linkColumns,
+  newsletter,
+}: FooterSection1Props) {
+  return (
+    <footer className='bg-secondary 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'>
+        <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'>{brandName}</span>
+            </div>
+            {brandDescription && (
+              <p className='text-muted-foreground mb-8 max-w-sm text-sm leading-relaxed text-balance'>
+                {brandDescription}
+              </p>
+            )}
+            {newsletter && (
+              <form
+                className='relative'
+                onSubmit={e => {
+                  e.preventDefault()
+                  if (newsletter.onSubmit) {
+                    const email = new FormData(e.currentTarget).get('email')
+                    if (typeof email === 'string') {
+                      newsletter.onSubmit(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>
+            )}
+          </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

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