JNP — Propuestas de Layout

Propuestas de layout — Confidencial 2026

Selecciona una propuesta para revisar el wireframe

Propuesta 01

Vertical Clásico ↗

Flujo lineal descendente. Nav fija → Hero full → Stats → 4 cols servicios → Galería asimétrica → Formulario centrado.

Nav fija Hero full 4 cols Galería

Propuesta 02

Split Asimétrico ↗

Hero 50/50 texto-imagen. Ticker animado. Servicios 3 cols. Stats azul. Especialidades split. Formulario doble columna.

Split hero Ticker 3 cols Split form

Propuesta 03

Módulos Anchos ↗

Nav transparente en hero. Servicios índice lateral + 2×2. Imagen editorial. Masonry. Stats oscuro. CTA+form dividido.

Hero centrado Masonry CTA split

Propuesta 01

Vertical Clásico

S01 — Navegación fija

Logo JNP

Inicio Servicios Especialidades Contacto

Cotizar

Nav fija sobre scroll · Logo blanco izq · Links centro · CTA borde blanco der · Fondo #1a35bb

S02 — Hero pantalla completa 100vh

Eyebrow · Tagline corto

CTA Principal

Ver servicios

Imagen slider — overlay azul

100vh · Imagen de fondo con overlay azul · Eyebrow + H1 + descripción + 2 CTAs · Alineados abajo-izquierda

S03 — Barra de estadísticas

500+ Proyectos

12+ Años

100% Satisfacción

4 Servicios

4 columnas iguales · Número grande azul + etiqueta · Separadas por línea 1px · Fondo azul suave

S04 — Servicios · Grid 4 tarjetas

Sección: Servicios — Título H2 de sección

agencia-1.png

almacen-1.png

materiales-1.png

transporte-1.png

4 tarjetas iguales · Imagen arriba + Título + Descripción corta · Hover levanta sombra

S05 — Especialidades · Galería asimétrica + filtros

TodoAcabadosArquitecturaInterioresTabulador

Imagen grande
arquitectura-1.png

acabados-1.png

interior-1.png

tabulador-1.png

acabados-2.png

Filtros JS en la parte superior · Img grande izquierda (2 rows) + 4 imágenes derecha · Hover revela etiqueta de categoría

S06 — Contacto · Formulario centrado

Nombre

Empresa

Correo electrónico

Teléfono

Mensaje / descripción del proyecto

Enviar mensaje

Centrado máx 600px · 2 cols (nombre/empresa) → full width → textarea → CTA azul relleno completo

Propuesta 02

Split Asimétrico

S01 — Navegación · borde inferior oscuro

Logo JNP

Inicio Servicios Especialidades Contacto

Cotizar

Fondo blanco · Borde inferior doble #333 · Logo azul relleno · Links texto oscuro · CTA azul relleno der

S02 — Hero · Split 50 / 50

Eyebrow / tagline

CTA Principal

Secundario

slide1.png

Caption / frase de valor

División vertical 50/50 · Izq: contenido y CTAs sobre blanco · Der: imagen + caption azul abajo

S03 — Ticker animado

Agencia Aduanal · Almacenaje · Materiales · Transporte → loop infinito con GSAP

Banda azul ancho completo · Texto con marquee GSAP · Pausa en hover · Separa hero de servicios

S04 — Servicios · Grid 3 columnas

agencia-1.png

almacen-1.png

materiales-1.png

transporte-1.png

Cotizar →

agencia-2.png

Fila 1: 3 tarjetas con acento borde azul izq · Fila 2: tarjeta + bloque CTA + imagen de apoyo

S05 — Estadísticas · Banda azul

500+ Proyectos

12+ Años

100% Satisfacción

4 Servicios

Fondo azul · 4 cols · Números blancos grandes + etiqueta · GSAP counter-up al entrar en viewport

S06 — Especialidades · Split galería / texto

acabados-1.png

arquitectura-1.png

interior-1.png

tabulador-1.png

Especialidades

Solicitar cotización →

Galería 2×2 izquierda · Título + descripción + CTA derecha · Alternancia visual · Stagger GSAP al entrar

S07 — Contacto · Encabezado dividido + formulario

Nombre

Empresa

Correo

Teléfono

Mensaje / proyecto

Enviar mensaje →

Header: título izq / descripción der separados por línea oscura · Formulario 2 cols completo debajo

Propuesta 03

Módulos Anchos

S01 — Hero 100vh · Nav transparente integrada

Logo JNP

Servicios Especialidades Contacto

Tagline · Comercio Internacional

Conocer servicios ↓

Scroll

Nav transparente superpuesta al hero · Contenido centrado vertical + horizontal · Scroll indicator GSAP al pie

S02 — Servicios · Columna índice azul + Grid 2×2

01 — Servicios

agencia-1.png

almacen-1.png

materiales-1.png

transporte-1.png

Col fija azul izq con título sección · Grid 2×2 con número índice + imagen + descripción · Slide-in GSAP por col

S03 — Imagen editorial · Ancho completo

slide3.png — 100% ancho · altura ~40vh

Overlay frase opcional

Imagen respiración entre secciones · Refuerza identidad · Parallax suave con GSAP ScrollTrigger

S04 — Especialidades · Masonry 3 columnas + filtros

TodoAcabadosArquitecturaInterioresTabulador

acabados-1.png

tabulador-2.png

arquitectura-1.png

interior-1.png

tabulador-1.png

acabados-2.png

Título H2 izq + filtros JS der · 3 columnas altura variable · Hover: overlay etiqueta · Stagger GSAP al scroll

S05 — Estadísticas · Banda oscura #333

JNP

500+ Proyectos

12+ Años

100% Satisfacción

4 Servicios

Fondo #333 · Watermark JNP background · Números blancos + GSAP counter-up al entrar en viewport

S06 — Contacto · CTA azul izq + Formulario der

Contacto

Tijuana, Baja California

Teléfono / Correo

jnpcomerciointernacional.com

Nombre

Empresa

Correo electrónico

Teléfono

Mensaje

Enviar →

Split 50/50 · Izq: fondo azul con título y datos · Der: formulario blanco · Slide-in desde lados opuestos con GSAP