Case · 2024

UxPRO — design studio site

Design studio site built from scratch off Figma mockups. Multi-page Nuxt 3 with FSD structure, content layer via @nuxt/content, server-side contact form and Postgres for leads.

Client
UxPRO
Year
2024
Scope
Fullstack frontend · Architecture · CMS
Duration
TBC
Team
Solo
UxPRO — главный экран сайта
UxPRO — главный экран сайта

Context

The studio needed their own site — a window into services and case studies. The starting point was a detailed Figma file: serious typography, scroll scenarios, carousels, heavy transitions. The job: hold the bar of the mockups in a production build and ship an admin-friendly content layer so the studio could add new cases themselves without dev involvement.

Solution

Built on Nuxt 3 with FSD-style architecture: pages → widgets → features → entities → shared. Key pages (home, services, projects, project detail, contact, policy) prerender to static for fast first paint and clean SEO.

Content layer via @nuxt/content: projects and services live as YAML/Markdown in the repo. The studio drops in a new case as a file and it shows up on the home and catalog pages without a release. Dynamic routing by slug, home-page preview via embla-carousel with auto-scroll.

Server side on Nitro: contact form through nodemailer on the studio's SMTP, separate API for the presentation download with tracking. Forms validated with yup.

Tailwind v4 + custom SVG icons via vite-svg-loader — pixel-perfect match with the Figma. Pinia for shared state across modals and overlays. @nuxt/image for image optimization, @nuxtjs/sitemap for auto-generated sitemaps.

SEO setup: Google Search Console / Yandex Webmaster verifications, OG/Twitter meta, Yandex Metrica. Each page has its own title/description/canonical.

Stack
Nuxt 3Vue 3TypeScriptPiniaTailwind CSS v4@nuxt/content@nuxt/imageEmbla CarouselNodemailer

Outcome

Live in production at uxpro.ru. The studio runs the case catalog themselves via content files — no code changes required. The contact form runs on their own SMTP, leads logged to Postgres. Every page prerenders and is fully indexable.