Лендинг для курса по архитектуре: как мы создали его с нуля на Vue 3, Composition API и Tailwind CSS

В эпоху визуального контента и быстрой информации лендинг — это не просто сайт. Это лицо проекта. Особенно если речь идёт о курсе по архитектуре, где эстетику и функциональность нужно показывать с первых секунд. Мы решили разработать лендинг для онлайн-курса по архитектуре с нуля — без шаблонов, без конструктора, полностью вручную. Почему? Потому что курс учит архитектурному мышлению, и лендинг должен демонстрировать это мышление уже на уровне интерфейса и кода.

Создать лендинг для курса по архитектуре, который:

Vue 3 с Composition API — это современно, лаконично и гибко. Благодаря этой архитектуре мы разделили логику компонентов по функциональности, а не по типу, что сильно упростило поддержку кода и повторное использование блоков. Такой подход особенно пригодился при разработке отдельных секций лендинга, где каждый блок — это самостоятельный компонент: хедер, блок с программой курса, галерея с примерами работ, отзывы студентов, секция “О преподавателе” и футер.

Tailwind CSS стал палочкой-выручалочкой: мы создавали адаптивный интерфейс без написания кастомных CSS-файлов. Это позволило сконцентрироваться на дизайне, а не на вёрстке. Мы использовали utility-first подход: классы типа grid-cols-1 md:grid-cols-2, rounded-2xl, backdrop-blur, hover:scale-105 transition сделали лендинг живым и интерактивным без лишнего веса.

Мы минимизировали использование сторонних библиотек. Все базовые анимации делались средствами Tailwind (transition, transform, duration-300) и небольшими Vue-хитростями — вроде v-if, v-show с кастомной анимацией через Transition.

На первый взгляд, лендингу не нужен роутер. Но мы хотели, чтобы каждую секцию (например, "/program" или "/reviews") можно было открыть напрямую. С vue-router мы реализовали плавную навигацию между якорями, которая чувствуется как нативная прокрутка, но при этом сохраняет историю просмотров и позволяет делиться ссылками.

Сборку делал Vite, и мы остались в восторге от его скорости. Итоговый бандл весил меньше 200 KB, страницы загружаются за миллисекунды. Tailwind был собран с purge, чтобы удалить неиспользуемые классы, а изображения оптимизировались заранее.

В Tailwind адаптивность реализуется за счёт мобильного-first подхода. Мы использовали sm:, md:, lg: и xl: для того, чтобы сделать верстку гибкой. Сайт одинаково хорошо смотрится как на iPhone, так и на 4K-мониторе архитектора.

Создание лендинга — это не просто верстка. Это упражнение в дизайне мышления, архитектуре кода и внимании к деталям. Если вы хотите, чтобы ваш продукт действительно "продавал" с первой секунды — пишите с нуля. Выбирайте правильный стек, стройте архитектуру не только зданий, но и кода.