345 lines
16 KiB
TypeScript
345 lines
16 KiB
TypeScript
import {
|
||
Bot,
|
||
Users,
|
||
FileText,
|
||
Mic,
|
||
BarChart3,
|
||
Clock,
|
||
CheckCircle2,
|
||
ArrowRight,
|
||
Zap,
|
||
Shield,
|
||
TrendingUp,
|
||
Mail,
|
||
MessageSquare
|
||
} from 'lucide-react'
|
||
import ContactForm from './ContactForm'
|
||
|
||
export default function LandingPage() {
|
||
const features = [
|
||
{
|
||
icon: Bot,
|
||
title: 'AI-интервьюер',
|
||
description: 'Искусственный интеллект проводит собеседования 24/7, задавая релевантные вопросы по резюме кандидата'
|
||
},
|
||
{
|
||
icon: Mic,
|
||
title: 'Голосовое общение',
|
||
description: 'Естественное голосовое взаимодействие через WebRTC — как настоящий телефонный звонок'
|
||
},
|
||
{
|
||
icon: FileText,
|
||
title: 'Автоматический анализ',
|
||
description: 'Мгновенный парсинг резюме и вакансий из PDF, DOCX и других форматов'
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: 'Объективные оценки',
|
||
description: 'Детальные отчёты по 6 критериям: технические навыки, опыт, коммуникация и другие'
|
||
},
|
||
{
|
||
icon: Clock,
|
||
title: 'Экономия времени',
|
||
description: 'Сократите время на первичный скрининг кандидатов с дней до минут'
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: 'Без предвзятости',
|
||
description: 'AI оценивает только профессиональные качества, исключая субъективные факторы'
|
||
}
|
||
]
|
||
|
||
const howItWorks = [
|
||
{
|
||
step: 1,
|
||
title: 'Загрузите вакансию',
|
||
description: 'Импортируйте описание вакансии из файла или введите вручную'
|
||
},
|
||
{
|
||
step: 2,
|
||
title: 'Кандидат откликается',
|
||
description: 'Соискатель загружает резюме и заполняет контактные данные'
|
||
},
|
||
{
|
||
step: 3,
|
||
title: 'AI проводит интервью',
|
||
description: 'Наш AI-агент звонит кандидату и проводит структурированное собеседование'
|
||
},
|
||
{
|
||
step: 4,
|
||
title: 'Получите отчёт',
|
||
description: 'Детальный анализ с оценками, сильными и слабыми сторонами кандидата'
|
||
}
|
||
]
|
||
|
||
const stats = [
|
||
{ value: '90%', label: 'Экономия времени HR' },
|
||
{ value: '24/7', label: 'Доступность системы' },
|
||
{ value: '6', label: 'Критериев оценки' },
|
||
{ value: '∞', label: 'Масштабируемость' }
|
||
]
|
||
|
||
return (
|
||
<div className="min-h-screen">
|
||
{/* Hero Section */}
|
||
<section className="relative bg-gradient-to-br from-primary-600 via-primary-700 to-primary-900 text-white overflow-hidden">
|
||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0di0yaDEyek0zNiAyNHYySDI0di0yaDEyeiIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
|
||
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 relative">
|
||
<div className="text-center max-w-4xl mx-auto">
|
||
<div className="inline-flex items-center px-4 py-2 bg-white/10 rounded-full text-sm font-medium mb-8 backdrop-blur-sm">
|
||
<Zap className="h-4 w-4 mr-2" />
|
||
Революция в подборе персонала
|
||
</div>
|
||
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
|
||
AI-собеседования для
|
||
<span className="text-primary-200"> масштабного найма</span>
|
||
</h1>
|
||
|
||
<p className="text-xl md:text-2xl text-primary-100 mb-10 max-w-3xl mx-auto">
|
||
Автоматизируйте первичный скрининг кандидатов с помощью искусственного интеллекта.
|
||
Проводите сотни собеседований одновременно без потери качества.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<a
|
||
href="#contact"
|
||
className="inline-flex items-center justify-center px-8 py-4 bg-white text-primary-700 font-semibold rounded-xl hover:bg-primary-50 transition-colors shadow-lg hover:shadow-xl"
|
||
>
|
||
Получить демо
|
||
<ArrowRight className="ml-2 h-5 w-5" />
|
||
</a>
|
||
<a
|
||
href="#how-it-works"
|
||
className="inline-flex items-center justify-center px-8 py-4 border-2 border-white/30 text-white font-semibold rounded-xl hover:bg-white/10 transition-colors backdrop-blur-sm"
|
||
>
|
||
Как это работает
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Wave divider */}
|
||
<div className="absolute bottom-0 left-0 right-0">
|
||
<svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="#f9fafb"/>
|
||
</svg>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Stats Section */}
|
||
<section className="py-16 bg-gray-50">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
{stats.map((stat, index) => (
|
||
<div key={index} className="text-center">
|
||
<div className="text-4xl md:text-5xl font-bold text-primary-600 mb-2">
|
||
{stat.value}
|
||
</div>
|
||
<div className="text-gray-600 font-medium">
|
||
{stat.label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<section className="py-20 bg-white" id="features">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||
Возможности платформы
|
||
</h2>
|
||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||
Полный цикл автоматизации подбора персонала — от получения резюме до финального отчёта
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{features.map((feature, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-6 bg-gray-50 rounded-2xl hover:bg-white hover:shadow-lg transition-all duration-300 border border-transparent hover:border-gray-200"
|
||
>
|
||
<div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
|
||
<feature.icon className="h-6 w-6 text-primary-600" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="text-gray-600">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* How It Works Section */}
|
||
<section className="py-20 bg-gray-50" id="how-it-works">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||
Как это работает
|
||
</h2>
|
||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||
Простой процесс интеграции в ваш рекрутинговый процесс
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{howItWorks.map((item, index) => (
|
||
<div key={index} className="relative">
|
||
<div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 h-full">
|
||
<div className="w-10 h-10 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg mb-4">
|
||
{item.step}
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-gray-600 text-sm">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
{index < howItWorks.length - 1 && (
|
||
<div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
|
||
<ArrowRight className="h-6 w-6 text-gray-300" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Benefits Section */}
|
||
<section className="py-20 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
|
||
Почему компании выбирают HR AI
|
||
</h2>
|
||
<div className="space-y-6">
|
||
<div className="flex items-start">
|
||
<CheckCircle2 className="h-6 w-6 text-green-500 mr-4 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">Масштабируемость без ограничений</h3>
|
||
<p className="text-gray-600">Проводите тысячи собеседований одновременно без увеличения штата HR</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start">
|
||
<CheckCircle2 className="h-6 w-6 text-green-500 mr-4 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">Стандартизированная оценка</h3>
|
||
<p className="text-gray-600">Все кандидаты оцениваются по единым критериям, что обеспечивает объективность</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start">
|
||
<CheckCircle2 className="h-6 w-6 text-green-500 mr-4 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">Мгновенные результаты</h3>
|
||
<p className="text-gray-600">Получайте детальные отчёты сразу после завершения собеседования</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start">
|
||
<CheckCircle2 className="h-6 w-6 text-green-500 mr-4 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">Улучшение качества найма</h3>
|
||
<p className="text-gray-600">AI анализирует не только ответы, но и способ коммуникации кандидата</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-3xl p-8 lg:p-12">
|
||
<div className="space-y-6">
|
||
<div className="flex items-center">
|
||
<TrendingUp className="h-8 w-8 text-primary-600 mr-4" />
|
||
<div>
|
||
<div className="text-3xl font-bold text-primary-700">90%</div>
|
||
<div className="text-gray-600">сокращение времени на скрининг</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<Users className="h-8 w-8 text-primary-600 mr-4" />
|
||
<div>
|
||
<div className="text-3xl font-bold text-primary-700">∞</div>
|
||
<div className="text-gray-600">кандидатов в день</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<BarChart3 className="h-8 w-8 text-primary-600 mr-4" />
|
||
<div>
|
||
<div className="text-3xl font-bold text-primary-700">6</div>
|
||
<div className="text-gray-600">метрик в каждом отчёте</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Form Section */}
|
||
<section className="py-20 bg-gray-50" id="contact">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="max-w-3xl mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||
Свяжитесь с нами
|
||
</h2>
|
||
<p className="text-xl text-gray-600">
|
||
Получите персональную демонстрацию и узнайте, как HR AI может помочь вашей компании
|
||
</p>
|
||
</div>
|
||
|
||
<ContactForm />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="bg-gray-900 text-gray-400 py-12">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
<div>
|
||
<div className="text-2xl font-bold text-white mb-4">HR AI</div>
|
||
<p className="text-sm">
|
||
Автоматизация подбора персонала с помощью искусственного интеллекта
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-white font-semibold mb-4">Контакты</h3>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex items-center">
|
||
<Mail className="h-4 w-4 mr-2" />
|
||
<span>accounts@rocketfounders.co</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<MessageSquare className="h-4 w-4 mr-2" />
|
||
<span>Telegram: @eugenesmykov</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-white font-semibold mb-4">Ссылки</h3>
|
||
<div className="space-y-2 text-sm">
|
||
<a href="#features" className="block hover:text-white transition-colors">Возможности</a>
|
||
<a href="#how-it-works" className="block hover:text-white transition-colors">Как это работает</a>
|
||
<a href="#contact" className="block hover:text-white transition-colors">Контакты</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
|
||
© 2025 HR AI. Все права защищены.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|