Интеграция с 21st.dev

Как создать лендинг с помощью готовых компонентов

Что такое 21st.dev

21st.dev — это сайт с готовыми компонентами. Компонент — это готовый блок. Например:

• Кнопка
• Форма
• Секция с текстом
• Блок с отзывами
• Навигационное меню

Каждый компонент можно скопировать и вставить в ваш проект. Это быстрее, чем создавать с нуля.

​

Как использовать

1. Найдите нужный компонент

   1. Откройте 21st.dev

   2. Найдите компонент, который вам нравится

      

   3. Скопируйте промпт компонента

      
2. Дайте указания Юре

   1. Откройте свой сайт на Поехали!

   2. Вставьте скопированное описание в чат

   3. Попросите Юру добавить этот компонент

      
3. Настройте под свой сайт

   Юра создаст компонент, а вы редактируйте:

   • Измени цвет на синий
   • Сделай текст крупнее
   • Добавь моё название компании

​

Зачем использовать готовые компоненты

• Экономия времени. Не нужно придумывать дизайн с нуля. Берёте готовое решение.
• Проверенные решения. Компоненты уже протестированы. Они работают хорошо.
• Профессиональный вид. Сайт выглядит как сделанный дизайнером.

​

Простой пример

Допустим, вам нужна секция с отзывами:

1. Откройте 21st.dev

   и найдите там «Reviews Section»

   
2. Скопируйте промпт

   
3. Попросите Юру сделать такой же компонент

   

   Юра создаст секцию с отзывами за несколько секунд.

   

​

Советы по использованию

• Начинайте с простого — выберите 2-3 компонента для начала, не берите сразу много
• Адаптируйте под себя — каждый компонент нужно настроить под ваш бизнес, замените текст и цвета
• Проверяйте на телефоне — убедитесь, что компонент хорошо выглядит на мобильном
• Сохраняйте единый стиль — все компоненты должны подходить друг другу по цветам и шрифтам

​

Что дальше

После добавления компонентов:

1. Проверьте сайт на разных устройствах
2. Попросите друзей посмотреть
3. Опубликуйте