Празднуйте Новый год ярко и активно — организуем веселый пейнтбольный праздник для вашей компании любых размеров!
Почему пейнтбол на Новый год — лучший подарок?
Активный отдых и заряд эмоций Пейнтбол — это настоящий командный бой, где важна стратегия и веселое настроение. А с новогодними декорациями праздник становится еще ярче!
Новогодние сценарии Мы подготовим для вас специальные игры с Санта-Клаусом, эльфами и необычными заданиями.
Подходит для всех Возраст, физическая подготовка и опыт не важны — подберем уровень сложности под вашу компанию.
Что мы предоставляем в аренду?
Пейнтбольные маркеры
Новейшие модели, надежные и безопасные
Защитная экипировка
Шлемы, жилеты и перчатки для комфортной игры
Новогодняя атрибутика
Светящиеся шарики, тематические наклейки
Выбирайте свой идеальный новогодний пакет
Пакет
Описание
Цена / чел
Включено
Минимум
Аренда снаряжения на 2 часа
1500₽
Маркеры, экипировка, поле
Оптимальный
Минимум + игровой сценарий + аниматор
2500₽
Всё из Минимума + ведущий, призы
Максимум
Оптимальный + кейтеринг + фотосессия
4000₽
Полный праздник «под ключ»
Что говорят наши клиенты
«Отлично провели время всей командой! Новый год с пейнтболом — крутая идея, которую мы точно повторим!»
— Елена, Москва
«Замечательная организация и супер оборудование! Игры были веселыми, а атмосфера праздничной и дружеской.»
3. Что дальше?
Этот шаблон можно адаптировать под ваш контент и подключить обработчик формы (например, через PHP или сервисы рассылок типа MailerLite, Tilda и пр.).
Для сложной анимации и интерактивных эффектов можно добавить JavaScript.
Для улучшения SEO и аналитики — дополнить meta-тегами, микроразметкой и Google Analytics.
Дизайн можно расширить: добавить плавный скролл, мобильное меню «гамбургер», эффекты при наведении.
Если хотите, помогу с JavaScript, подключением форм или подготовкой макетов в Figma. Просто скажите!
13:19
Подготовь макет в Figma
13:24
GPT Logo
К сожалению, непосредственно создать файл Figma я не могу, но могу подробно описать структуру макета, дать рекомендации по организации страниц и добавить ссылки на ресурсы с готовыми шаблонами. Это поможет вам быстро собрать качественный макет или передать техническое задание дизайнеру.
Подробное описание макета для Figma — структура и компоненты
1. Общие рекомендации по стилю
Размеры артбордов:
Десктоп: 1440 px по ширине
Мобильный: 375 px по ширине
Сетки: 12-колоночная сеть с отступами по 20 px (десктоп) и адаптивная сетка для мобильной версии
Шрифты:
Montserrat Bold для заголовков (примерно 32-48 px по размеру)
Open Sans Regular для текста (16-18 px)
2. Главная страница (Hero screen)
Полноэкранный баннер с фото пейнтбольного праздника с праздничными элементами (снежинки, колпаки)
Заголовок: крупный, по центру (3 строки)
Подзаголовок: чуть меньше
Две крупные CTA кнопки: «Заказать праздник» и «Подробнее»
Шапка: логотип слева, меню справа, фиксированное при скролле (обратите внимание на мобильное меню — «гамбургер»)
3. Блок «О празднике»
Заголовок по центру
Три колонки с иконками и текстом — преимущества
Фотогалерея под текстом в виде сетки 2x3 или карусели
Можно добавить футуристичный фон с легкими снежинками с анимацией
4. Блок «Оборудование»
Заголовок
Сетка из 3 карточек с иконками/картинками оборудования, заголовком и коротким описанием
Под каждой карточкой кнопка «Подробнее» (опционально)
Простая, чистая сетка с небольшими тенями вокруг карточек
5. Блок «Пакеты и цены»
Заголовок по центру
Таблица с 3 колонками пакетов, в каждой: название, описание, цена, перечень включенного
Кнопки под таблицей
Используйте разные цветовые акценты в заголовках пакетов (красный, зеленый)
Отделите этот блок цветным фоном или рамкой для визуального выделения
6. Блок «Отзывы»
Заголовок
Карточки отзывов, каждая с фото клиента (круглая аватарка), текстом, именем и городом
Возможно, сделать слайдер или видимость 2-3 отзывов одновременно
7. Контактная форма
Заголовок
Поля формы: имя, телефон, email, дата и время, количество участников, выбор пакета, комментарии
Кнопка отправки
Контактные данные и иконки соцсетей/мессенджеров рядом или внизу
Встроенная карта (снимок из Google Maps или иконка)
8. Подвал (Footer)
Логотип + копирайт
Ссылки на соцсети (иконки)
Контактный телефон и емейл
Ресурсы, которые помогут
Бесплатные шаблоны для Figma (с адаптивными ивент-сайтами):
Figma Community — Event Templates
UI8 — Free Event Landing Page Template
Free Figma Templates on Dribbble
Иконки и визуал:
Flaticon — новогодние и пейнтбольные иконки
Unsplash — качественные фото для замен в макете
Что дальше?
Создайте в Figma новый проект и задайте размеры артбордов (Desktop и Mobile)
Воспользуйтесь руководством выше, чтобы построить макеты блоков: можно начинать с Главной страницы (Hero)
Добавьте цвета, шрифты, иконки, фото и кнопки согласно советам
Настройте прототипирование для переходов по меню и кнопкам
Если потребуется, могу помочь с отзывами по макету или описать взаимодействия и анимации на Figma
Если хотите, могу подготовить для вас файл с уже готовой структурой в виде Figma-описания (текстом), чтобы вы/дизайнер быстрее собрали прототип.
Готовы перейти к подготовке такого файла или нужна помощь в другом?
13:24
Для сложной анимации и интерактивных эффектов помоги с JavaScript
13:28
GPT Logo
Конечно! Ниже приведу примеры JavaScript-кода, который поможет добавить сложные анимации и интерактивные эффекты к вашему сайту новогоднего пейнтбольного праздника. Код легко интегрируется в адаптивный шаблон, который мы ранее обсуждали.
1. Эффект падающего снега (Canvas + requestAnimationFrame)
// Создаем снежинки и анимируем их падение
class Snowflake {
constructor(canvasWidth, canvasHeight) {
this.x = Math.random() * canvasWidth;
this.y = Math.random() * canvasHeight;
this.radius = Math.random() * 3 + 1;
this.speed = Math.random() * 1 + 0.5;
this.wind = Math.random() * 0.5 - 0.25;
}
update(canvasWidth, canvasHeight) {
this.y += this.speed;
this.x += this.wind;
if (this.y > canvasHeight) {
this.y = 0;
this.x = Math.random() * canvasWidth;
}
if (this.x > canvasWidth) this.x = 0;
if (this.x < 0) this.x = canvasWidth;
}
draw(ctx) {
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.shadowColor = 'white';
ctx.shadowBlur = 5;
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
}
}
function startSnowEffect() {
const canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.pointerEvents = 'none';
canvas.style.zIndex = '9999';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const flakesCount = 150;
const flakes = [];
for(let i=0; i < flakesCount; i++) {
flakes.push(new Snowflake(width, height));
}
function animate() {
ctx.clearRect(0, 0, width, height);
flakes.forEach(flake => {
flake.update(width, height);
flake.draw(ctx);
});
requestAnimationFrame(animate);
}
animate();
// Обработка ресайза окна
window.addEventListener('resize', () => {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
});
}
// Запускаем снег после загрузки контента
window.addEventListener('load', startSnowEffect);
2. Плавное появление блоков при скролле (Intersection Observer)
// Добавить класс "visible" к секциям при их появлении в зоне видимости
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, {threshold: 0.1});
sections.forEach(section => {
observer.observe(section);
});
});
CSS (пример для плавного появления):
section {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
section.visible {
opacity: 1;
transform: translateY(0);
}
3. Мобильное меню «гамбургер»
/* Основное меню уже есть, добавим стили для мобильного */
#burger {
display: none;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #D32F2F;
}
/* Показывать кнопку только на мобилке */
@media(max-width: 768px) {
nav ul {
display: none; /* скрываем меню */
flex-direction: column;
background: white;
position: absolute;
top: 60px;
right: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
nav ul.active {
display: flex;
}
#burger {
display: block;
}
}
document.addEventListener('DOMContentLoaded', () => {
const burger = document.getElementById('burger');
const menu = document.querySelector('nav ul');
burger.addEventListener('click', () => {
menu.classList.toggle('active');
});
// Закрыть меню при клике на ссылку
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.remove('active');
});
});
});
4. Анимация кнопок при наведении и нажатии
button {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.5);
}
button:active {
transform: scale(0.95);
box-shadow: none;
}
5. Пример плавного скролла по якорям
document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetEl = document.querySelector(this.getAttribute('href'));
if(targetEl) {
targetEl.scrollIntoView({
behavior: 'smooth'
});
}
});
});
Итог
Падающий снег — добавляет атмосферу праздника
Появление блоков при скролле — делает интерфейс живым и динамичным
Мобильное меню — улучшает UX на смартфонах
Анимация кнопок — приятный визуальный отклик
Плавный скролл — удобство навигации
Если хотите, могу помочь собрать все скрипты воедино, оптимизировать и показать, как внедрить их в ваш HTML. Напишите, если нужны еще идеи или примеры!
13:28
Создай скрипт прокрутки кадров фото по горизонтали при прокрутке
13:42
GPT Logo
Конечно! Ниже пример простого JavaScript-кода, который реализует горизонтальную прокрутку фото-карусели при вертикальной прокрутке страницы. Когда вы прокручиваете страницу вниз или вверх, галерея с фотографиями плавно сдвигается по горизонтали.
Как это работает
В блок с фотографиями устанавливаем фиксированную высоту и ширину (ширина больше, чем видимая область)
При вертикальной прокрутке страницы скролл страницы преобразуется в горизонтальный сдвиг галереи
Скрипт ограничивает прокрутку по контенту галереи
Пример HTML + CSS + JS
Горизонтальная прокрутка фото при вертикальном скролле
Галерея фото — горизонтальная прокрутка при вертикальном скролле
Прокручивайте страницу вниз — галерея будет плавно двигаться вправо.
