Institutional site · Desktop and mobile

A storygains a digitalpresence.

Editorial design and a responsive experience for Souza Paiol.

A live institutional site, in 3 languages, with its own panel and support chat.

Live siteInstitutionalClient

Next.js
React
TypeScript
GSAP

Institutional site · Desktop and mobile

A storygains a digitalpresence.

Editorial design and a responsive experience for Souza Paiol.

Next.js
React
TypeScript
GSAP

A live institutional site, in 3 languages, with its own panel and support chat.

Live siteInstitutionalClient

Next.js
React
TypeScript
GSAP

PortfolioSouza Paiol

The site's support chat

Misspell it, and it still finds it.

The site's support chat doesn't depend on an outside service: it's hand-written rules that compare what the person types with each topic's words, and survive typos. Type with a mistake and see each topic's score.

Ask

Try

Answers directlyHow do I know it is original?

What you typed, in 3-letter pieces

·auautuththehenentntctcicitityty·

Each topic's score

How do I know it is original?similar (trigrams) · "authenticity"0,64
What products do you have?below the cutoff0,00
How do I apply for a job?below the cutoff0,00
How do I reach you?below the cutoff0,00
What are the health notices?below the cutoff0,00
Where are you located?below the cutoff0,00

The rules are the site's (busca.ts): no accents, no punctuation; a whole clue word scores 1; the start of a clue with 3 letters or more scores 0.85; otherwise, the similarity between 3-letter pieces (shared ÷ all), and below 0.28 it's noise. With a score ≥ 0.5 it answers; below that, it shows the 3 closest. Clues match by whole word on purpose: "autenticidade" doesn't match the "idade" of the health topic.

Project scene: the site on a laptop and the open menu on a phone, next to a glass globe

Three languages. Two ways of seeing.

Portuguese, English and Spanish with light and dark themes.

PT · EN · ES | Light and dark

The language always shows in the address, the theme starts dark and the cachaça area only opens to people 18 and over. Switch the language and theme and go through the gate.

The site, inside

souzapaiol.com.br/en/produtos

The rules

1The language is always in the address: /pt, /en or /es.
2The theme starts dark and doesn't follow the system; the choice is saved.
3The age gate keeps the answer for 30 days; Tab only cycles between the two buttons and Esc doesn't close it.
4Behind the gate, only the spec sheet: no price, no purchase.

The visitor's system is in light mode

The site still opens in the dark theme, the system theme is ignored. Now: dark.

The rules are the site's (routing.ts, theme-provider.tsx, age-gate.tsx): the gate decision is made on the server, so the content doesn't flash before it; the two curtains open in 1 s; reduced-motion is respected. The three series carry the data the site publishes, all at 39%.

Project scene: two glass phones, one with the admin login and one with the support chat open

Content and support. Development made to measure.

Its own admin panel, chat and content management built into the site.

Next.js · React · TypeScript

From the panel, the brand takes a page offline without breaking what search engines already know. Unpublish a page and see what changes in the page code and the sitemap.

Pages in the panel

Published
Published
Published
Published

The page head

<meta name="robots" content="index, follow">

The linked languages

<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">

The sitemap

/ptlastmod 2026-09-30 · 1.0
/pt/empresalastmod 2026-09-12 · 0.7
/pt/acao-sociallastmod 2026-10-02 · 0.7
/pt/saudeno lastmod (never edited) · 0.7

The real screens

Visit the site

The rules are the site's (sitemap.ts, metadata.ts): the sitemap date only exists when it's real; an unpublished page gets noindex but keeps follow, leaves the language group and stays in the sitemap with the unpublish date, that's what brings the search engine back to see the noindex. Only after it leaves the index does it leave the sitemap. The home page can't be unpublished here. Dates are examples.

The technologies

What it is made of, piece by piece

An institutional site with its own admin panel: Next.js with React and TypeScript, three languages in the address, motion with GSAP and smooth scrolling, images optimized on upload and a password-protected panel that edits texts, images, menu and the support chat. Pick a piece to see what it does here and which file it is in.

9technologies, in 3 layers

Site

Motion

Panel

1Nx16.3

Layer: Site

Next.js 16.3

The pages, the honest sitemap and the panel routes.

Where it is in the code

src/app/sitemap.ts

Layer: Site

React 19.2

The support chat, the age gate and the galleries.

Where it is in the code

src/components/chat/atendimento.tsx

Layer: Site

TypeScript 5.9

The typo-tolerant search, written by hand.

Where it is in the code

src/lib/chat/busca.ts

Layer: Site

next-intl 4.13

Portuguese, English and Spanish, always in the address.

Where it is in the code

src/i18n/routing.ts

Layer: Motion

GSAP 3.15

The gate's curtains and the reveals.

Where it is in the code

src/components/cachaca/age-gate.tsx

Layer: Motion

Lenis 1.3

Smooth scrolling.

Where it is in the code

src/components/providers/smooth-scroll.tsx

Layer: Motion

next-themes 0.4

Dark theme by default, light on request.

Where it is in the code

src/components/providers/theme-provider.tsx

Layer: Panel

sharp 0.35

Each uploaded image becomes 4 WebP versions.

Where it is in the code

src/lib/media/storage.ts

Layer: Panel

Nodemailer 10

Sends an e-mail notice after saving the message.

Where it is in the code

src/app/api/contact/route.ts

Next project18 / 51

Desktop applicationsCine Creator StudioA desktop app (Tauri 2 + Rust) that builds cuts and exports in 5 formats, with smart render, automatic GPU choice and camera movesTauri 2.11Rustplugins dialogfs

← PreviousGestão de Financiamentos

Home