Sitio institucional · Desktop y móvil
Una historiagana presenciadigital.
Diseño editorial y experiencia responsiva para Souza Paiol.
Sitio institucional en línea, en 3 idiomas, con panel y atención propios.
- Next.js
- React
- TypeScript
- GSAP
Sitio institucional · Desktop y móvilUna historiagana presenciadigital.
Diseño editorial y experiencia responsiva para Souza Paiol.
- Next.js
- React
- TypeScript
- GSAP
Sitio institucional en línea, en 3 idiomas, con panel y atención propios.
- Next.js
- React
- TypeScript
- GSAP
La atención del sitio
Lo escribes mal, y aun así lo encuentra.
La atención del sitio no depende de un servicio externo: son reglas escritas a mano que comparan lo que la persona escribe con las palabras de cada tema, y aguantan errores de tipeo. Escribe con un error y mira la nota de cada tema.
Prueba
Lo que escribiste, en pedazos de 3 letras
·auaututetenentntctcicididadadad·
La nota de cada tema
- ¿Cómo sé si es original?parecido (trigramas) · "autenticidad"
0,64 - ¿Qué productos tienen?debajo del corte
0,00 - ¿Cómo me postulo a una vacante?debajo del corte
0,00 - ¿Cómo hablo con ustedes?debajo del corte
0,00 - ¿Cuáles son los avisos de salud?debajo del corte
0,00 - ¿Dónde están?debajo del corte
0,00
Las reglas son las del sitio (busca.ts): sin acento y sin puntuación; la palabra pista entera vale 1; el inicio de una pista con 3 letras o más vale 0,85; si no, la semejanza entre pedazos de 3 letras (comunes ÷ todos), y debajo de 0,28 es ruido. Con nota ≥ 0,5 responde; debajo, muestra los 3 más cercanos. La pista es por palabra entera a propósito: "autenticidade" no coincide con el "idade" del tema de salud.
Tres idiomas. Dos formas de ver.
Portugués, inglés y español con temas claro y oscuro.
PT · EN · ES | Claro y oscuroEl idioma siempre aparece en la dirección, el tema empieza oscuro y el área de cachaça solo se abre para mayores de 18. Cambia el idioma y el tema y entra por el portón.
El sitio, por dentro
¿Tienes 18 años o más?
Las reglas
- 1El idioma va siempre en la dirección: /pt, /en o /es.
- 2El tema empieza oscuro y no sigue el del sistema; la elección queda guardada.
- 3El portón de edad guarda la respuesta por 30 días; Tab solo circula entre los dos botones y Esc no lo cierra.
- 4Detrás del portón, solo la ficha: sin precio, sin compra.
Aun así el sitio abre en tema oscuro, el tema del sistema se ignora. Ahora: oscuro.
Las reglas son las del sitio (routing.ts, theme-provider.tsx, age-gate.tsx): la decisión del portón se toma en el servidor, para que el contenido no parpadee antes; las dos cortinas abren en 1 s; se respeta la preferencia de menos movimiento. Las tres series tienen los datos que publica el sitio, todas con 39%.
Contenido y atención. Desarrollo a medida.
Panel propio, chat y gestión de contenido integrados al sitio.
Next.js · React · TypeScriptDesde el panel, la marca saca una página del aire sin romper lo que el buscador ya conoce. Despublica una página y mira qué cambia en el código de la página y en el sitemap.
Páginas en el panel
- Publicada
- Publicada
- Publicada
- Publicada
El encabezado de la página
<meta name="robots" content="index, follow">
Los idiomas enlazados
<link rel="alternate" hreflang="pt" href="/pt/acao-social"> <link rel="alternate" hreflang="en" href="/en/acao-social"> <link rel="alternate" hreflang="es" href="/es/acao-social">
El sitemap
/ptlastmod 2026-09-30 · 1.0/pt/empresalastmod 2026-09-12 · 0.7/pt/acao-sociallastmod 2026-10-02 · 0.7/pt/saudesin lastmod (nunca editada) · 0.7
Las pantallas reales
Las reglas son las del sitio (sitemap.ts, metadata.ts): la fecha del sitemap solo existe cuando es real; la página despublicada recibe noindex pero sigue con follow, sale del grupo de idiomas y queda en el sitemap con la fecha de la despublicación, eso hace que el buscador vuelva y vea el noindex. Solo después de salir del índice deja el sitemap. El inicio no se puede despublicar aquí. Las fechas son de ejemplo.
Las tecnologías
De qué está hecho, pieza por pieza
Un sitio institucional con panel propio: Next.js con React y TypeScript, tres idiomas en la dirección, movimiento con GSAP y desplazamiento suave, imágenes optimizadas al subir y un panel con contraseña que edita textos, imágenes, menú y la atención. Elige una pieza para ver qué hace aquí y en qué archivo está.
9tecnologías, en 3 capas
Sitio
Movimiento
Panel
Aplicaciones de escritorioCine Creator Studio