styled-components with ServerStyleSheet
The CSS ships inside the server HTML. Without it the first paint arrives unstyled, and this page is the first commercial contact the company gets.
BC
2023 to present · client work
Maincore
Institutional site that has to sell two technical product lines and capture qualified leads. Next.js 13 with styled-components on the server, Radix for the interactive components, and lead capture with the captcha verified in the backend.
live site closed source
The problem
Maincore sells embedded systems and programmable logic, which nobody buys on impulse. The site had to explain two separate product lines, hold up in Portuguese and English search, and turn a visit into a conversation without an intermediary holding the lead data.
What I built
An institutional site in Next.js with two product pages, a resource centre, a contact form and a newsletter signup behind a captcha.
Technical decisions
Radix for the accordion and the menu
Product specs live in accordions. Keyboard, focus and ARIA out of the box cost less than reimplementing them wrong.
reCAPTCHA verified server-side
The token only counts once the backend confirms it with Google. Validating on the client is decorative.
Own SMTP instead of a form service
The lead lands straight in the company mailbox, with no third party holding customer data.
One route per product
Polaris and Sirius on separate URLs instead of tabs. A product that has to rank needs its own address.
Result
Live since 2023 on Vercel, two product lines documented, and the form delivering straight to the company mailbox.
What I would do differently today
Translation is decided on the client by navigator.language, and the html lang attribute is hardcoded to "en". A crawler never sees the English version and the declared language does not match the content. Today I would use a route per locale, which is what I did on this portfolio with next-intl.