|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Что такое CRM и зачем она нужна?</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
height: 100vh; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.slide { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 2rem; |
|
|
opacity: 0; |
|
|
transition: opacity 0.8s ease-in-out; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.slide.active { |
|
|
opacity: 1; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 80%; |
|
|
height: 6px; |
|
|
background-color: rgba(255,255,255,0.3); |
|
|
border-radius: 3px; |
|
|
overflow: hidden; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.progress { |
|
|
height: 100%; |
|
|
background-color: #4f46e5; |
|
|
width: 0%; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.highlight { |
|
|
background: linear-gradient(120deg, #a5b4fc 0%, #818cf8 100%); |
|
|
background-repeat: no-repeat; |
|
|
background-size: 100% 40%; |
|
|
background-position: 0 88%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative"> |
|
|
|
|
|
<div class="progress-bar"> |
|
|
<div class="progress" id="progress"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide active" id="slide1"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h1 class="text-5xl md:text-6xl font-bold text-gray-800 mb-8 animate__animated animate__fadeInDown">Что такое <span class="highlight">CRM</span>?</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-600 animate__animated animate__fadeIn animate__delay-1s"> |
|
|
Customer Relationship Management — система управления взаимоотношениями с клиентами |
|
|
</p> |
|
|
<div class="mt-12 animate__animated animate__fadeIn animate__delay-2s"> |
|
|
<div class="inline-block p-4 bg-white rounded-xl shadow-lg"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide2"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-8">CRM — это <span class="highlight">централизованная база</span> клиентов</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8 mt-12"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-lg animate__animated animate__fadeInUp"> |
|
|
<div class="text-indigo-600 mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Контакты</h3> |
|
|
<p class="text-gray-600">Все данные клиентов в одном месте</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-lg animate__animated animate__fadeInUp animate__delay-1s"> |
|
|
<div class="text-indigo-600 mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">История</h3> |
|
|
<p class="text-gray-600">Все взаимодействия с клиентом</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-lg animate__animated animate__fadeInUp animate__delay-2s"> |
|
|
<div class="text-indigo-600 mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Безопасность</h3> |
|
|
<p class="text-gray-600">Защита данных клиентов</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide3"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-8">Зачем бизнесу <span class="highlight">CRM система</span>?</h2> |
|
|
<div class="mt-12"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -left-8 top-3 h-4 w-4 rounded-full bg-indigo-500 animate-pulse"></div> |
|
|
<p class="text-xl md:text-2xl text-gray-700 mb-6 pl-8 animate__animated animate__fadeInLeft">Увеличение <span class="font-semibold text-indigo-600">продаж</span> на 25-35%</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="absolute -left-8 top-3 h-4 w-4 rounded-full bg-indigo-500 animate-pulse animate__delay-1s"></div> |
|
|
<p class="text-xl md:text-2xl text-gray-700 mb-6 pl-8 animate__animated animate__fadeInLeft animate__delay-1s">Сокращение времени на <span class="font-semibold text-indigo-600">рутинные задачи</span> до 40%</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="absolute -left-8 top-3 h-4 w-4 rounded-full bg-indigo-500 animate-pulse animate__delay-2s"></div> |
|
|
<p class="text-xl md:text-2xl text-gray-700 mb-6 pl-8 animate__animated animate__fadeInLeft animate__delay-2s">Улучшение <span class="font-semibold text-indigo-600">удовлетворенности</span> клиентов</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="absolute -left-8 top-3 h-4 w-4 rounded-full bg-indigo-500 animate-pulse animate__delay-3s"></div> |
|
|
<p class="text-xl md:text-2xl text-gray-700 pl-8 animate__animated animate__fadeInLeft animate__delay-3s">Автоматизация <span class="font-semibold text-indigo-600">маркетинговых</span> процессов</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide4"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-8">Как CRM <span class="highlight">улучшает</span> работу?</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8 mt-12"> |
|
|
<div class="bg-indigo-50 p-8 rounded-xl animate__animated animate__zoomIn"> |
|
|
<h3 class="text-2xl font-semibold text-indigo-800 mb-4">До CRM</h3> |
|
|
<ul class="space-y-4 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|
|
</svg> |
|
|
<span>Потерянные клиенты</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|
|
</svg> |
|
|
<span>Ручной ввод данных</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|
|
</svg> |
|
|
<span>Отсутствие аналитики</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-green-50 p-8 rounded-xl animate__animated animate__zoomIn animate__delay-1s"> |
|
|
<h3 class="text-2xl font-semibold text-green-800 mb-4">После внедрения CRM</h3> |
|
|
<ul class="space-y-4 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
|
|
</svg> |
|
|
<span>Полный контроль над клиентами</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
|
|
</svg> |
|
|
<span>Автоматизация процессов</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
|
|
</svg> |
|
|
<span>Детальная аналитика и отчеты</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide5"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-8">Кому <span class="highlight">необходима</span> CRM?</h2> |
|
|
<div class="mt-12"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-lg max-w-2xl mx-auto animate__animated animate__fadeInUp"> |
|
|
<div class="text-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
<p class="text-xl md:text-2xl text-gray-600"> |
|
|
CRM не нужна только тем, у кого <span class="font-semibold text-indigo-600">нет клиентов</span> или кто не планирует <span class="font-semibold text-indigo-600">развивать</span> свой бизнес |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide6"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-8 animate__animated animate__fadeInDown">CRM — это <span class="highlight">инвестиция</span> в рост бизнеса</h2> |
|
|
<div class="mt-12 animate__animated animate__fadeIn animate__delay-1s"> |
|
|
<div class="inline-flex items-center bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-4 rounded-full shadow-lg"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> |
|
|
</svg> |
|
|
<span class="text-xl font-semibold">Время внедрять CRM!</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-16 animate__animated animate__fadeIn animate__delay-2s"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 text-indigo-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const slides = document.querySelectorAll('.slide'); |
|
|
const progressBar = document.getElementById('progress'); |
|
|
let currentSlide = 0; |
|
|
const totalSlides = slides.length; |
|
|
let autoSlideInterval; |
|
|
let touchStartX = 0; |
|
|
let touchEndX = 0; |
|
|
|
|
|
|
|
|
updateProgressBar(); |
|
|
|
|
|
|
|
|
startAutoSlide(); |
|
|
|
|
|
|
|
|
document.addEventListener('touchstart', function(e) { |
|
|
touchStartX = e.changedTouches[0].screenX; |
|
|
}, false); |
|
|
|
|
|
document.addEventListener('touchend', function(e) { |
|
|
touchEndX = e.changedTouches[0].screenX; |
|
|
handleSwipe(); |
|
|
}, false); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'ArrowRight') { |
|
|
nextSlide(); |
|
|
} else if (e.key === 'ArrowLeft') { |
|
|
prevSlide(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function handleSwipe() { |
|
|
if (touchEndX < touchStartX - 50) { |
|
|
nextSlide(); |
|
|
} else if (touchEndX > touchStartX + 50) { |
|
|
prevSlide(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function startAutoSlide() { |
|
|
autoSlideInterval = setInterval(nextSlide, 8000); |
|
|
} |
|
|
|
|
|
|
|
|
function nextSlide() { |
|
|
resetAutoSlide(); |
|
|
|
|
|
slides[currentSlide].classList.remove('active'); |
|
|
currentSlide = (currentSlide + 1) % totalSlides; |
|
|
slides[currentSlide].classList.add('active'); |
|
|
|
|
|
updateProgressBar(); |
|
|
} |
|
|
|
|
|
|
|
|
function prevSlide() { |
|
|
resetAutoSlide(); |
|
|
|
|
|
slides[currentSlide].classList.remove('active'); |
|
|
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; |
|
|
slides[currentSlide].classList.add('active'); |
|
|
|
|
|
updateProgressBar(); |
|
|
} |
|
|
|
|
|
|
|
|
function resetAutoSlide() { |
|
|
clearInterval(autoSlideInterval); |
|
|
startAutoSlide(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateProgressBar() { |
|
|
const progress = ((currentSlide + 1) / totalSlides) * 100; |
|
|
progressBar.style.width = progress + '%'; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('click', function() { |
|
|
nextSlide(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=timoon811/crmprez" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
