UxPRO — сайт дизайн-студии
Сайт дизайн-студии с нуля по Figma-макетам. Многостраничник на Nuxt 3 с FSD-структурой, контент-системой через @nuxt/content и серверной формой обратной связи.
Контекст
Студии нужен был свой сайт — витрина услуг и кейсов. На входе детализированные макеты в Figma: серьёзная типографика, скролл-сценарии, карусели, тяжёлые переходы. Задача — выдержать планку макетов в продакшен-сборке и сделать админ-удобный контент-слой, чтобы студия могла добавлять новые проекты сама без участия разработчика.
Решение
Собрал на Nuxt 3 с FSD-подобной архитектурой: pages → widgets → features → entities → shared. Все ключевые страницы (главная, услуги, проекты, страница проекта, контакты, политика) пререндерятся в статику для быстрой первой загрузки и нормального SEO.
Контент-слой — через @nuxt/content: проекты и услуги хранятся в YAML/Markdown в репозитории. Студия добавляет новый кейс файлом — и он сразу подхватывается на главной и в каталоге, без релиза кода. Динамический роутинг по slug, превью на главной через embla-carousel с автопрокруткой.
Серверная часть на Nitro: форма обратной связи через nodemailer на SMTP студии, отдельный API для скачивания презентации с трекингом. Валидация форм на yup.
Tailwind v4 + кастомные SVG-иконки через vite-svg-loader — пиксель-в-пиксель совпадение с макетами. Pinia — для разделяемого состояния модалок и оверлеев. Подключил @nuxt/image для оптимизации изображений и @nuxtjs/sitemap для автогенерации.
SEO-обвязка: верификации Google Search Console / Yandex Webmaster, OG/Twitter мета, Yandex Метрика. Каждая страница — со своим title/description/canonical.
Результат
Сайт в продакшене на uxpro.ru. Студия самостоятельно ведёт каталог кейсов через файлы контента — без правок кода. Форма обратной связи работает на собственном SMTP, заявки логируются в Postgres. Все страницы пререндерены, полностью индексируются.