🧩 Завдання
Розробити сучасний сайт для презентації послуг 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.
⚙ Архітектура сайту легко масштабується для подальших інтеграцій та розширення функціоналу.