Webrarium

Webrarium

Діджитал агенство


Перейти на сайт

🧩 Завдання

Розробити сучасний сайт для презентації послуг digital-агенції Webrarium, який би:

  • Позиціонував компанію як технологічного та креативного партнера.

  • Демонстрував портфоліо, експертизу та напрями роботи.

  • Був адаптивним, анімаційним і швидким.

  • Мав гнучку архітектуру для багатомовності, CMS-інтеграції та подальшого масштабування.


🛠 Рішення

Розробка сайту відбулася на базі Next.js 14+ App Router з широким використанням сучасного інструментарію:

  • Storyblok CMS: гнучке управління контентом з live preview-режимом.

  • App Router + Server Actions: для оптимізації SEO та контролю форм.

  • Tailwind CSS: кастомна стилізація та швидке створення UI-компонентів.

  • GSAP (ScrollTrigger): інтерактивна анімація під час скролу.

  • React Hook Form + Google reCAPTCHA v3: захищена форма зворотного зв’язку.

  • Telegram Bot + Nodemailer: повідомлення про нові заявки через пошту і бот.

  • @calcom/embed-react: інтеграція онлайн-календаря для зустрічей.

  • Multilingual: підтримка i18n (англійська/українська) через next-i18n-router.


Особливості реалізації

  • Блискавична швидкість завдяки SSR + ISR + edge-функціям.

  • 🌐 Багатомовна підтримка з глибокою локалізацією всіх сторінок.

  • 🧑‍💼 Інтеграція з Telegram для отримання миттєвих заявок.

  • 🧩 Портфоліо реалізоване через CMS з шаблонізацією проектів.

  • 🧠 Реактивна структура компонентів з розділенням server/client logic.


🚀 Використані технології

  • Next.js 14+ App Router

  • TypeScript

  • Storyblok CMS

  • GSAP (ScrollTrigger)

  • React Hook Form

  • Google reCAPTCHA v3

  • @calcom/embed-react

  • Nodemailer + Telegram Bot API

  • Multilingual (next-i18n-router)

  • Vercel Analytics + @vercel/blob

  • SEO-оптимізація: кастомні meta, Open Graph, sitemap, robots.txt


📈 Результати

  • 💼 Створено повноцінний корпоративний сайт, який працює як візитівка і точка входу для клієнтів.

  • 🧠 Контент керується повністю з CMS без втрати гнучкості.

  • 📲 Успішно зібрані перші заявки через онлайн-форму й Telegram.

  • Архітектура сайту легко масштабується для подальших інтеграцій та розширення функціоналу.