Corazonada Tattoo
Sitio web full-stack para un estudio privado de tatuajes con portfolios dinámicos de artistas, sistema de citas y blog integrado.
Sitio web completo para Corazonada Tattoo, un estudio privado de tatuajes en Playa del Carmen, México. Construido con Next.js y MongoDB, el sitio gestiona portfolios rotativos de artistas invitados, maneja reservas de citas con notificaciones por email y publica contenido de cuidado de tatuajes a través de un blog, todo con animaciones fluidas de Framer Motion.
Galería
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
El Reto
- Gestionar portfolios dinámicos de artistas donde la cantidad de imágenes y artistas invitados cambia frecuentemente
- Crear experiencias de galería fluidas con vistas modales y navegación por carrusel
- Implementar un flujo de reservas con validación de formularios y notificaciones por email
- Construir un diseño responsivo que se sienta nativo en móvil, donde la mayoría de los clientes navegan
El Enfoque
- Sistema de artistas y portfolios respaldado por MongoDB con galerías de imágenes dinámicas
- Integración de Embla Carousel para navegación de imágenes fluida y touch-friendly
- Server Actions para procesamiento de formularios con validación Zod y notificaciones Nodemailer
- Tailwind CSS con layouts de grid responsivo personalizados y enfoque mobile-first
Resultados
- Presencia digital profesional para el estudio, reemplazando redes sociales como canal principal de reservas
- Proceso de reserva de citas optimizado reduciendo el ida y vuelta con clientes potenciales
- Los artistas invitados pueden agregarse y rotarse sin cambios de código
- Experiencia optimizada para móvil para la mayoría de la audiencia del estudio
Impacto
El estudio ya no depende de Instagram para mostrar su trabajo y recibir citas. Ahora tiene su propio sitio, y cada tatuador invitado tiene una página con lo suyo junto al equipo de casa.
Detalles del Proyecto
Objetivo
Darle al estudio una presencia digital profesional que muestre a los artistas invitados, agilice la reserva de citas y genere confianza con clientes potenciales antes de que visiten.
Tema
Estudio de tatuajes moderno con paleta de colores rosa y verde y animaciones fluidas.
Fecha
11 de junio de 2024