TBGTHEBULLGROOVE
En producción
Ver web en vivo
Caso de Estudio · Desarrollo Web · 2026

WEB

para el cliente
Atelier Sol
Año
2026
Tipo
Desarrollo Web
Deploy
VPS Hostinger
Estado
En producción
Next.js 16TypeScriptTailwind v4next-intlFramer MotionReact Hook Form + Zod

01 · El Proyecto

El origen del proyecto

Atelier Sol es una marca de yoga y bienestar de lujo en Ibiza. El encargo fue una web premium que transmitiera calma, cuidado y sofisticación, con una estética minimalista cálida y animaciones refinadas que acompañan sin distraer.

El sitio es completamente multiidioma (español, inglés, italiano, francés y alemán) con ruteo por idioma, y está pensado para que la clienta gestione su propio contenido sin depender de la agencia. Diseñado primero en Claude Design y luego construido en código, replicando la dirección visual aprobada.

"Una web que respira: minimalista, cálida y en cinco idiomas. Cada animación acompaña, nunca distrae; a la altura de una marca de lujo."
5
idiomas (ES · EN · IT · FR · DE)
84
performance mobile · Lighthouse
6
pantallas principales
0
CLS (Cumulative Layout Shift)

02 · Módulos

Qué resuelve la web

🌿 Multiidioma (5 locales)

Ruteo por idioma con next-intl. Todos los textos externalizados, paridad exacta entre los 5 idiomas.

🎨 Diseño editorial premium

Estética minimalista cálida, tipografías Fraunces + Hanken Grotesk, paleta crema/beige/negro, escala de 8px.

✨ Animaciones refinadas

Reveals, blur, parallax, hover y transiciones de página con Framer Motion. Mask reveal editorial en los headers.

🛡️ Formularios con validación

Contacto y newsletter con React Hook Form + Zod, validación en servidor, sanitización y rate limiting.

⚡ Rendimiento optimizado

Video hero sin audio en WebM, poster LCP en AVIF, imágenes recomprimidas. Performance mobile 84, TBT ~40ms, CLS 0.

📱 Responsive mobile-first

Las 6 pantallas verificadas en mobile. Nav a hamburguesa, grillas a 1 columna, categorías con scroll horizontal.


03 · Arquitectura

Cómo está construida

Frontend
  • Next.js 16 App Router
  • Server Components por defecto
  • Client aislado para interactividad
  • next-intl para ruteo por idioma
Internacionalización
  • 5 locales (ES / EN / IT / FR / DE)
  • Textos externalizados en messages
  • Middleware de ruteo por idioma
Infraestructura
  • Docker en VPS Hostinger
  • Deploy con HTTPS válido
  • En producción

04 · Tecnología

Stack tecnológico

Cada pieza fue elegida con un propósito concreto: una web premium, rápida y multiidioma, mantenible en cada línea. TypeScript estricto sin atajos, animaciones que suman y una base internacional pensada para escalar.

Next.js 16
App Router
TypeScript
Strict · sin any
Tailwind CSS v4
Mobile-first
next-intl
i18n · 5 locales
Framer Motion
Animaciones
React Hook Form
Formularios
Zod
Validación
Docker
Contenedores
VPS Hostinger
Infraestructura

05 · Seguridad

Seguridad por diseño

Validación en servidorTodo input validado con Zod en el servidor, no solo en cliente.
Headers HTTPCSP, HSTS y X-Frame-Options en producción.
Formularios protegidosRate limiting y sanitización en contacto y newsletter.
Auditoría de dependenciasnpm audit previo a cada despliegue.

06 · Resultado

Entregado y en producción

Web activa en producción

Atelier Sol está en producción en ateliersolibiza.com, con HTTPS válido, corriendo en VPS propio. Una web premium, rápida y multiidioma que representa a la marca a la altura de su posicionamiento de lujo.

La clienta puede gestionar su contenido de forma autónoma y en vivo, sin depender de la agencia para cada cambio. Un proyecto entregado al 100%, funcionando y listo para crecer.

v1.0
Producción · 2026 · Ibiza, España