Сайт артиста с WebGL-героем, календарём концертов, формой бронирования и анимациями на Framer Motion.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — веб-разработчик, который специализируется на сайтах-портфолио музыкантов. Артист: [имя, жанр, характер музыки] Контент: [треки, клипы, фото, биография] Стек: [Next.js + Tailwind + Framer Motion] Раскладка: [CSS Grid / Flexbox] Календарь: [FullCalendar или своя реализация] Нужно сделать: 1. Раскладка: расположение ключевых секций — Hero, музыка, концерты, бронирование, контакты; адаптивная сетка. 2. Hero с WebGL-фоном, который отражает настроение музыки. Fallback-картинка при отсутствии WebGL и при `prefers-reduced-motion`; анимация останавливается, когда блок вне экрана. 3. Календарь событий: список ближайших концертов с датой, городом, площадкой и ссылкой на билеты; удобный вид на мобильном. 4. Бронирование: форма для организаторов (дата, город, формат, бюджет, контакт) с валидацией и понятным подтверждением. Авторизация — только если нужна личная история заявок. 5. Плавные переходы между секциями на Framer Motion без ущерба для скорости. Правила: кроссбраузерность, мобильная версия с 320px, контраст AA, изображения в современных форматах. Формат ответа: план компонентов, код ключевых файлов, README с установкой и запуском.
```text Ты — веб-разработчик, который специализируется на сайтах-портфолио музыкантов. Артист: [имя, жанр, характер музыки] Контент: [треки, клипы, фото, биография] Стек: [Next.js + Tailwind + Framer Motion] Раскладка: [CSS Grid / Flexbox] Календарь: [FullCalendar или своя реализация] Нужно сделать: 1. Раскладка: расположение ключевых секций — Hero, музыка, концерты, бронирование, контакты; адаптивная сетка. 2. Hero с WebGL-фоном, который отражает настроение музыки. Fallback-картинка при отсутствии WebGL и при `prefers-reduced-motion`; анимация останавливается, когда блок вне экрана. 3. Календарь событий: список ближайших концертов с датой, городом, площадкой и ссылкой на билеты; удобный вид на мобильном. 4. Бронирование: форма для организаторов (дата, город, формат, бюджет, контакт) с валидацией и понятным подтверждением. Авторизация — только если нужна личная история заявок. 5. Плавные переходы между секциями на Framer Motion без ущерба для скорости. Правила: кроссбраузерность, мобильная версия с 320px, контраст AA, изображения в современных форматах. Формат ответа: план компонентов, код ключевых файлов, README с установкой и запуском. ```
{
"messages": [
{
"role": "user",
"content": "Ты — веб-разработчик, который специализируется на сайтах-портфолио музыкантов.\n\nАртист: [имя, жанр, характер музыки]\nКонтент: [треки, клипы, фото, биография]\nСтек: [Next.js + Tailwind + Framer Motion]\nРаскладка: [CSS Grid / Flexbox]\nКалендарь: [FullCalendar или своя реализация]\n\nНужно сделать:\n1. Раскладка: расположение ключевых секций — Hero, музыка, концерты, бронирование, контакты; адаптивная сетка.\n2. Hero с WebGL-фоном, который отражает настроение музыки. Fallback-картинка при отсутствии WebGL и при `prefers-reduced-motion`; анимация останавливается, когда блок вне экрана.\n3. Календарь событий: список ближайших концертов с датой, городом, площадкой и ссылкой на билеты; удобный вид на мобильном.\n4. Бронирование: форма для организаторов (дата, город, формат, бюджет, контакт) с валидацией и понятным подтверждением. Авторизация — только если нужна личная история заявок.\n5. Плавные переходы между секциями на Framer Motion без ущерба для скорости.\n\nПравила: кроссбраузерность, мобильная версия с 320px, контраст AA, изображения в современных форматах.\n\nФормат ответа: план компонентов, код ключевых файлов, README с установкой и запуском."
}
]
}