| <!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> |
