Case 01/Website
Torio Web
The studio site: marketing in Spanish and English, a static export, dark mode, a calculator, and a clear path to WhatsApp.
Web development studio in Mexico
Websitesand web apps,built withcare.
Estimate
A range, not a quote
Company site
MX$18,000 – MX$45,000 MXN
This is a range, not a fixed quote.
torioweb.com
+52 442 825 3951
wa.me/524428253951
01
The brief
Torio Web needed the studio’s own site: a marketing page that could ship to file hosting and show, by name, what the work looks like. There was no client to borrow. The commission was this site.
02
What it had to do
- Explain the craft without a long presentation.
- Ship Spanish and English on the same structure.
- Offer a peso range before a fixed quote.
- Make the next step WhatsApp or email, and obvious on a phone.
03
What it is built with
- Next.js
- App Router and a static export. The build folder is what gets published, with no Node server.
- Spanish and English
- Mexican Spanish at the root. English under /en, with the same commissions.
- Dark mode
- The site opens in dark. Light is a choice that is remembered.
- Calculator
- A range in Mexican pesos to guide the conversation. It is not a quote.
- CSS motion
- Atmosphere, marquee, and reveals. They stop if the system asks for less motion.
- The call to action opens the studio chat. The form does not store what you write.
04
Design decisions
Dark by default
The arrival theme is dark. Light does not follow the system: you choose it, and the browser remembers.
Wordmark
Torio in serif and Web in small caps. The same mark sits in the header, the footer, and the frames on this case.
Two languages, one structure
The routes mirror each other. Project slugs stay in Spanish so the portfolio is not split in two.
No borrowed proof
If a project is not a client, the page says so. This case is the studio, not someone else’s testimonial.
05
Search
Each page has a title, a description, and a canonical URL. Mexican Spanish and English are declared as alternates. There is Open Graph, a sitemap, and studio data in schema.org. None of that invents reviews or clients.
06
Performance
The build is static HTML, ready for file hosting. Motion lives in CSS and respects the reduced-motion preference. Nothing stays open in a panel, and the form does not store what you write: the email is drafted in your own app.
07
What changes
The studio’s marketing site is published. You can read it, estimate a range, and write on WhatsApp.
- Next.js
- ES / EN
- Static