@thorprovider/blocks 0.1.0

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

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

package/src/blocks/marketing/hero-sections/avatar-group.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+
+import { cn } from '../../../lib/utils'
+
+/**
+ * @title Avatar group
+ * @description Overlapping avatar stack whose neighbours lift with a distance falloff on hover.
+ *
+ * Adapted from Transitions.dev "Avatar group hover".
+ *
+ * A dock, not a switch. Lifting only the hovered item makes the row twitch — one element jumps
+ * while the rest sit rigid — so the response falls off with distance: the neighbour rises about
+ * half as far, the next barely at all. The falloff is what makes the row read as one soft object.
+ *
+ * The return is deliberately springier than the approach: a strong overshoot curve on the way back
+ * reads as elastic rather than mechanical.
+ */
+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
+  /** Negative margin applied to every item but the first. Set to `''` for a non-overlapping row. */
+  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 {
+      // translateY before scale, so scaling never amplifies the lift distance.
+      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,
+      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,
+      willChange: 'transform',
+      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.
+      zIndex: isActive ? 1 : undefined,
+    }
+  }
+
+  return (
+    <div className={cn('flex', className)} onMouseLeave={() => setActiveIndex(null)}>
+      {items.map((child, index) => (
+        <div
+          // eslint-disable-next-line react/no-array-index-key -- position is the identity here
+          key={index}
+          className={cn('relative', index > 0 && overlap)}
+          style={itemStyle(index)}
+          onMouseEnter={() => setActiveIndex(index)}
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default AvatarGroup

package/src/blocks/marketing/hero-sections/hero-section-1.tsx

@@ -0,0 +1,135 @@
+import { Button } from '../../../ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
+import { Badge } from '../../../ui/badge'
+import { AvatarGroup } from './avatar-group'
+import { Star } from 'lucide-react'
+import type { CTA } from '../../../lib/types'
+
+interface AvatarItem {
+  id: string | number
+  avatarUrl: string
+  fallback: string
+  alt?: string
+}
+
+interface Rating {
+  value: number
+  count: number
+}
+
+interface HeroSection1Props {
+  title: string
+  description: string
+  badge?: string
+  cta?: CTA
+  reviewers?: AvatarItem[]
+  rating?: Rating
+  trustedBy?: string
+  image?: { src: string; alt: string }
+}
+
+export function HeroSection1({
+  title,
+  description,
+  badge,
+  cta,
+  reviewers,
+  rating,
+  trustedBy,
+  image,
+}: HeroSection1Props) {
+  return (
+    <section className='w-full py-12 lg:py-20'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='grid items-center gap-8 lg:grid-cols-2 lg:gap-12'>
+          <div className='flex flex-col gap-8 text-center lg:text-start'>
+            <header className='flex flex-col gap-4'>
+              {badge && (
+                <Badge variant='outline' className='h-auto font-semibold rounded-md text-muted-foreground px-3.5 py-1 self-center lg:self-start'>
+                  {badge}
+                </Badge>
+              )}
+              <h1 className='text-4xl font-bold tracking-tight text-balance md:text-5xl'>{title}</h1>
+              <p className='text-muted-foreground text-balance md:text-lg'>
+                {description}
+              </p>
+            </header>
+
+            {cta &&
+              (cta.href ? (
+                <Button
+                  asChild
+                  size='lg'
+                  className='h-10 px-8 cursor-pointer text-base w-fit self-center lg:self-start'
+                >
+                  <a href={cta.href}>{cta.label}</a>
+                </Button>
+              ) : (
+                <Button
+                  size='lg'
+                  className='h-10 px-8 cursor-pointer text-base w-fit self-center lg:self-start'
+                >
+                  {cta.label}
+                </Button>
+              ))}
+
+            {(reviewers || rating || trustedBy) && (
+              <div className='flex flex-col items-center gap-4 sm:flex-row sm:justify-center lg:justify-start'>
+                {reviewers && (
+                  <AvatarGroup overlap='-ml-3'>
+                    {reviewers.map(reviewer => (
+                      <Avatar
+                        key={reviewer.id}
+                        className='ring-background bg-muted size-10 ring-2'
+                      >
+                        <AvatarImage
+                          src={reviewer.avatarUrl || undefined}
+                          alt={reviewer.alt ?? `User ${reviewer.id}`}
+                        />
+                        <AvatarFallback className='text-xs'>{reviewer.fallback}</AvatarFallback>
+                      </Avatar>
+                    ))}
+                    <div className='border-background bg-accent relative -ms-1.5 flex size-10 items-center justify-center rounded-full border-2'>
+                      <span className='text-xs font-medium'>+{reviewers.length}</span>
+                    </div>
+                  </AvatarGroup>
+                )}
+
+                {(rating || trustedBy) && (
+                  <div className='flex flex-col gap-0.5'>
+                    {rating && (
+                      <div className='flex items-center justify-center gap-1 lg:justify-start'>
+                        {Array.from({ length: 5 }).map((_, i) => (
+                          <Star
+                            key={i}
+                            className={`size-4 ${i < Math.round(rating.value) ? 'fill-foreground' : ''}`}
+                          />
+                        ))}
+                        <span className='ms-2 text-sm font-medium'>({rating.count})</span>
+                      </div>
+                    )}
+                    {trustedBy && <p className='text-muted-foreground text-sm'>{trustedBy}</p>}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {image && (
+            <div className='aspect-[4/3] overflow-hidden rounded-xl border'>
+              <img
+                src={image.src || undefined}
+                alt={image.alt}
+                className='size-full object-cover'
+                width={800}
+                height={600}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default HeroSection1

package/src/blocks/marketing/logo-clouds/logo-cloud-1-logo-icon.tsx

@@ -0,0 +1,52 @@
+import { Skeleton } from '../../../ui/skeleton'
+import { cn } from '../../../lib/utils'
+
+const iconMap = {
+  nextdotjs:
+    'M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z',
+  typescript:
+    'M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z',
+  tailwindcss:
+    'M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z',
+  react:
+    'M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z',
+  prisma:
+    'M21.8068 18.2848L13.5528.7565c-.207-.4382-.639-.7273-1.1286-.7541-.5023-.0293-.9523.213-1.2062.6253L2.266 15.1271c-.2773.4518-.2718 1.0091.0158 1.4555l4.3759 6.7786c.2608.4046.7127.6388 1.1823.6388.1332 0 .267-.0188.3987-.0577l12.7019-3.7568c.3891-.1151.7072-.3904.8737-.7553s.1633-.7828-.0075-1.1454zm-1.8481.7519L9.1814 22.2242c-.3292.0975-.6448-.1873-.5756-.5194l3.8501-18.4386c.072-.3448.5486-.3996.699-.0803l7.1288 15.138c.1344.2856-.019.6224-.325.7128z',
+  github:
+    'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
+  vercel: 'm12 1.608 12 20.784H0Z',
+  stripe:
+    'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
+  figma:
+    'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
+} as const
+
+export type LogoCloud1LogoSlug = keyof typeof iconMap
+
+export function LogoCloud1LogoIcon({
+  iconSlug,
+  size = 24,
+  className,
+}: {
+  iconSlug: string
+  size?: number
+  className?: string
+}) {
+  const iconPath = iconMap[iconSlug as LogoCloud1LogoSlug]
+
+  if (!iconPath) {
+    return <Skeleton className={cn('rounded-sm', className)} style={{ width: size, height: size }} />
+  }
+
+  return (
+    <svg
+      role='img'
+      viewBox='0 0 24 24'
+      className={cn('fill-foreground', className)}
+      style={{ width: size, height: size }}
+      aria-hidden='true'
+    >
+      <path d={iconPath} />
+    </svg>
+  )
+}