Creditexplainedclearly.
A web experience to explore options and simulate installments.
Payroll loans with a simulator and two themes.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
Creditexplainedclearly.
A web experience to explore options and simulate installments.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
Payroll loans with a simulator and two themes.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
The simulator
How much is the installment?
The first question of anyone looking for credit is simple: how much will I pay each month? The page answers before any sign-up. Drag the amount and the term: the installment, the total and the interest change right away, with the site's own maths.
Monthly installmentR$ 439,68
- Total to pay
- R$ 21.104,88
- Interest over the term
- R$ 6.104,88
- Monthly rate
- 1,49%
Where the money goes
The maths is the site component's (simulator-section.tsx): a fixed installment at 1.49% a month, the landing's sample rate. It's a simulation, with no credit check.
From question to simulation, in just a few steps.
Amount and term in an interactive interface, with light and dark versions.
A credit landing page has to take people down a short path: understand, simulate, trust and get in touch. The page has six parts, and a column of dots on the side shows which one the visitor is in, one click goes straight to any of them.
The parts and dots are the landing's (page.tsx and navigation-dots.tsx); the screens are real captures, in the dark theme.
Two themes
Light by day, dark at night.
The site has both complete versions, and a sun-and-moon button switches between them; it also follows what the visitor's device already uses. Pick a part and drag the handle: it's the same screen, cut between the two themes.
DarkLightThe themes come from next-themes, with the right logo for each background (lib/brand.ts). The 15 screens are real captures of the landing; the contact shows the template's sample data.
The motion
A page that moves with you.
Bank pages tend to be still and cold. This one has motion in every part, always with a purpose: draw the eye to the call, show the number is real, guide the reading. Tap or hover over each card to see the effect play.
- Words that come in
The title arrives word by word, coming out of the blur.
components/hero-section.tsx - Particles at the top
Points of light rise slowly behind the opening.
components/hero-section.tsx - Card that tilts
The benefit card follows the pointer, like a pane of glass.
components/advantages-section.tsx - Number that climbs
The value counts up from zero when it shows on screen.
components/simulator-section.tsx - Step-by-step line
The four steps are joined by a line that grows as you scroll.
components/how-it-works-section.tsx - Navigation dots
On the side, the dots show which part the visitor is in and lead to each one.
components/navigation-dots.tsx
The effects are the landing's, built with Framer Motion; here they were remade in miniature to fit the cards.
The questions
The answer before the phone call.
Anyone thinking about a payroll loan arrives with the same questions: who can apply, how much it costs, how long it takes. The page answers each one in its own text, so people reach the contact form already decided.
What credit seekers ask
Support · Gestão de Financiamentos
ClientWho can take out a payroll loan?
Gestão de FinanciamentosRetirees and pensioners of the national social security, federal, state and municipal civil servants and employees of partner private companies, with available payroll margin.
Questions and answers are the landing's text (faq-section.tsx), summarized; the conditions are the template's samples.
The technologies
What it is made of, piece by piece
A credit landing page built with Next.js: each part of the page is its own piece, the motion comes from Framer Motion and the two themes switch with one button. Pick a piece to see what it does here and which file it is in.
9technologies, in 3 layers
Site base
Look and motion
Measurement
Websites and web experiencesSouza Paiol