50 клиентов за 10 минут через 2GIS

Все ищут клиентов в чатах, на фрилансе, в холодных рассылках. Тратят недели на нетворкинг, сотни долларов на рекламу. А я открыл 2GIS, набрал "гостиницы Алматы" и за 10 минут нашёл 50 потенциальных клиентов, которым прямо сейчас нужен сайт.

Не "может быть когда-нибудь нужен". А нужен сегодня. Потому что у них либо нет сайта вообще, либо он выглядит так, будто его делали в 2008 году. И это видно прямо в отзывах: "не нашёл цены", "нет сайта", "непонятно что за место".

Дальше — дело техники. Берёшь Claude Code, подключаешь 21st.dev MCP, один мега-промпт — и через пару часов у тебя готовый premium лендинг с анимациями, WhatsApp-интеграцией и интерактивной картой. Деплоишь на Vercel за 2 минуты. Отправляешь владельцу гостиницы в WhatsApp. Готово.

Проблема: бизнесы без сайтов — это норма

По данным исследования 2025 года, 27% малых бизнесов до сих пор не имеют сайта. В Казахстане эта цифра ещё выше — особенно в сфере гостеприимства, общепита и услуг.

81% потребителей ищут бизнес онлайн перед покупкой. Бизнес без сайта теряет 20-35% потенциальных клиентов на этапе "проверки". Человек нашёл гостиницу на 2GIS, хочет посмотреть фото номеров, цены, условия — а сайта нет. Уходит к конкуренту.

Я открыл 2GIS Алматы и набрал "гостиницы". Нашлось 500+ результатов. Начал листать. Картина удручающая: у половины нет сайта вообще, у трети — страница на Booking.com и всё. Собственного лендинга с ценами, фото и WhatsApp — нет.

Метод: как находить клиентов через данные

Это не теория. Это конкретный алгоритм, который я использую. Работает для любой ниши: гостиницы, барбершопы, кафе, автосервисы, стоматологии. Везде, где есть локальный бизнес и 2GIS или Google Maps.

Инструменты: Claude Code + 21st.dev MCP

Стек предельно простой. Всё, что нужно — это Claude Code VS Code extension и 21st.dev Magic MCP server.

Claude Code — это AI-агент прямо в твоём редакторе. Он читает файлы, создаёт новые, запускает команды, устанавливает пакеты. По сути, это junior-разработчик, который выполняет инструкции мгновенно. Уже 2 миллиона разработчиков используют его.

21st.dev MCP — это Magic Component Platform. Когда Claude Code получает промпт "сделай карусель отзывов", он через MCP обращается к 21st.dev и получает готовый, красивый, протестированный компонент. Не генерирует с нуля — берёт из библиотеки.

Сгенерированный сайт использует Next.js + Tailwind CSS + Motion для анимаций. Это не шаблон с Tilda. Это полноценный код, который ты контролируешь.

Мега-промпт: один запрос = весь сайт

Вот суть подхода. Ты не пишешь 20 маленьких промптов. Ты составляешь один детальный мега-промпт, который описывает весь сайт целиком: дизайн-систему, каждую секцию, анимации, мобильную адаптацию, SEO, интеграции.

Claude Code читает этот промпт и генерирует все файлы за один проход. Подключённый 21st.dev MCP подтягивает готовые компоненты: карусели, карточки, навбары, футеры. На выходе — не прототип, а production-ready код.

You are an expert full-stack developer and UI/UX designer. Build a complete, premium, production-ready hotel landing page for "Grand Hotel Almaty".

## Tech Stack
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS 4
- Motion (motion/react) for animations
- 21st.dev components via MCP (use /ui command for each component)

## Design System
- Dark theme primary: zinc-950 background, zinc-100 text
- Accent: amber-500 / gold for luxury feel
- Font: Inter for body, Playfair Display for headings
- Border radius: rounded-2xl for cards, rounded-full for buttons
- Glassmorphism: backdrop-blur-xl bg-white/5 border-white/10

## Sections (in order)

### 1. Hero
- Full-screen with parallax background image
- Hotel name + tagline with stagger animation
- "Забронировать" CTA button (links to WhatsApp)
- Rating badge: 4.2 stars, 847 reviews (from 2GIS)
- Floating price tag: "от 15,000 ₸/ночь"

### 2. About
- 2-column: text left, image grid right (2x2 masonry)
- Key stats: founded year, rooms count, star rating
- Smooth scroll-triggered entrance animations

### 3. Rooms & Pricing
- 3 cards: Standard, Deluxe, Suite
- Each card: image, price, amenities list, "Забронировать" button
- Hover: scale + shadow transition
- Prices in KZT (тенге)

### 4. Amenities
- Icon grid (4x3): WiFi, parking, restaurant, pool, spa, gym, airport transfer, concierge, room service, laundry, meeting rooms, bar
- Use Lucide icons
- Subtle fade-in animation on scroll

### 5. Reviews
- Carousel of real reviews from 2GIS
- Star rating display
- Author name + date
- Auto-scroll with pause on hover

### 6. Location & Map
- Interactive map embed (Google Maps or 2GIS widget)
- Address, phone, email
- "Как добраться" section with landmarks
- Distance to airport, city center, Medeu

### 7. Gallery
- Lightbox image gallery (3-column grid)
- Hover zoom effect
- At least 8 placeholder images

### 8. Booking CTA
- Full-width section with gradient background
- WhatsApp direct link: https://wa.me/77001234567?text=Хочу забронировать номер
- Phone number
- Email

### 9. Footer
- Hotel logo + address
- Social links
- Copyright
- "Сайт создан с помощью AI" badge

## Mobile Requirements
- Fully responsive (mobile-first)
- Hamburger menu on mobile
- Touch-friendly gallery
- Sticky WhatsApp button (fixed bottom-right)

## Animations
- Use motion/react (NOT framer-motion)
- Hero: fade + slide up with stagger
- Cards: scale on hover, fade-in on scroll
- Numbers: count-up animation for stats
- Smooth scroll between sections

## WhatsApp Integration
- Floating WhatsApp button (bottom-right, always visible)
- Pre-filled message: "Здравствуйте! Хочу узнать о номерах в Grand Hotel Almaty"
- Green brand color (#25D366)

## SEO
- Meta title, description, keywords
- Open Graph tags
- Schema.org HotelRoom markup
- Alt text for all images

Generate ALL files needed for a complete working app. Include placeholder images from picsum.photos. Make it deployable with `vercel --prod` immediately.

Этот промпт содержит всё: стек технологий, дизайн-систему (цвета, шрифты, скругления, glassmorphism), 9 секций с детальными описаниями, требования к мобильной адаптации, анимации через Motion, WhatsApp-интеграцию и SEO-разметку.

Скопируй его, открой Claude Code в VS Code, вставь — и наблюдай, как AI создаёт полноценный сайт прямо на твоих глазах.

Пошаговая установка: от нуля до рабочего проекта

Никогда не писал код? Не страшно. Вот инструкция буквально для новичков — каждый шаг максимально подробно. Понадобится около 30 минут на настройку, а дальше Claude Code сделает всё за тебя.

Результат: что получается на выходе

Через 2-4 часа работы Claude Code ты получаешь готовый сайт. Не макет в Figma. Не прототип. Рабочий, задеплоенный сайт с реальными данными бизнеса. Вот что входит:

Деплой на Vercel за 2 минуты

Vercel — это хостинг от создателей Next.js. Бесплатный план достаточен для лендинга. Деплой занимает буквально 2 минуты.

Действуй: алгоритм на сегодня

Хватит читать статьи о том, как найти клиентов. Вот конкретный план на сегодня: