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