Corazonada Tattoo

Resumen del Proyecto

Corazonada Tattoo es un estudio privado de tatuajes en Playa del Carmen, México. “Privado” significa solo con cita: cada cliente tiene tiempo dedicado con el artista, y no se aceptan walk-ins. El sitio web sirve como la forma principal en que los clientes potenciales descubren el estudio, previsualian el trabajo de los artistas y reservan sesiones.

El estudio regularmente recibe artistas invitados de diferentes ciudades y países. El sitio necesitaba manejar esta rotación de forma fluida: los artistas van y vienen, cada uno con su propio portfolio, biografía e información de reserva.

Sistema de Portfolio de Artistas

Cada artista tiene una página dedicada con su biografía, especialización y una galería de su trabajo. El sistema está respaldado por MongoDB, así que agregar un nuevo artista invitado o actualizar un portfolio no requiere un despliegue. Es una operación de datos.

Experiencia de Galería

Los portfolios de tatuajes son inherentemente visuales. La galería usa Embla Carousel para navegación horizontal y abre imágenes en una vista modal para inspección detallada. En móvil, los gestos táctiles se sienten nativos: deslizar para navegar, las interacciones de pinch se manejan con gracia, y el modal se adapta al tamaño de pantalla.

Imágenes de Alta Resolución

La fotografía de tatuajes necesita detalle. Las imágenes se sirven a través del componente Image de Next.js con dimensionamiento responsivo y carga diferida para equilibrar calidad contra rendimiento de carga de página.

Flujo de Reservas

El sistema de reserva de citas recopila información del cliente a través de un formulario de contacto validado:

• Esquemas Zod validan el input antes del envío
• Server Actions procesan el formulario y almacenan el envío en MongoDB
• Nodemailer envía emails de confirmación tanto al estudio como al cliente
• Integración WhatsApp proporciona un canal de contacto directo alternativo

El formulario captura suficiente detalle (artista preferido, idea del tatuaje, ubicación, tamaño) para reducir el ida y vuelta de la consulta inicial.

Blog

Un blog integrado publica contenido de cuidado de tatuajes: guías de cuidado posterior para tatuajes nuevos, spotlights de artistas y actualizaciones del estudio. Esto sirve tanto como herramienta de generación de confianza para clientes potenciales como motor SEO para descubrimiento orgánico.

Arquitectura Técnica

Frontend

• Next.js con App Router para SSR/SSG y rendimiento óptimo
• React con hooks modernos y arquitectura orientada a componentes
• Framer Motion para transiciones de página, animaciones de scroll y elementos interactivos
• Tailwind CSS para estilado responsivo con la paleta de colores personalizada del estudio (rosa, verde, tinta)

Backend

• MongoDB almacenando perfiles de artistas, imágenes de portfolio, envíos de contacto y contenido del blog
• Server Actions para manejo de formularios y operaciones de base de datos
• Nodemailer para emails transaccionales vía SMTP
• Next.js Image con optimización, carga diferida y formatos responsivos

Componentes Clave

• Sección hero con fondo de video y llamada a la acción clara
• Grid de artistas con carga dinámica y filtrado por disponibilidad
• Sistema de galería con Embla Carousel, vista modal y controles de navegación
• Formularios de contacto con validación multi-paso y feedback de confirmación

Impacto

El sitio web estableció la presencia digital de Corazonada Tattoo más allá de Instagram. Los clientes ahora pueden explorar portfolios, entender el enfoque del estudio y reservar citas sin conversaciones por DM. Los artistas invitados obtienen un showcase profesional que eleva su trabajo junto a la marca del estudio.