u24-28taraban
/
site_demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
							<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>ТарДетейл | Премиальный детейлинг автомобилей</title>
    <!-- Tailwind CSS + Google Fonts -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- FontAwesome 6 (иконки) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Inter', 'Manrope', system-ui, sans-serif;
            background-color: #0A0A0A;
            color: #FFFFFF;
            scroll-behavior: smooth;
        }
        /* Анимации появления */
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s cubic-bezier(0.2, 0.9, 0.4, 1), transform 0.7s cubic-bezier(0.2, 0.9, 0.4, 1);
        }
        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* Hover эффекты карточек */
        .service-card, .principle-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: #111111;
            border-radius: 1.5rem;
            overflow: hidden;
            border: 1px solid #2A2A2A;
        }
        .service-card:hover, .principle-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 35px -12px rgba(0,0,0,0.6);
        }
        /* Стили для изображений в карточках */
        .service-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .service-card:hover .service-img {
            transform: scale(1.03);
        }
        /* Стили полей формы */
        input, textarea {
            transition: all 0.2s ease;
            background-color: #00000080;
            border: 1px solid #333;
            border-radius: 0.75rem;
            padding: 0.75rem 1.25rem;
            color: white;
        }
        input:focus, textarea:focus {
            outline: none;
            border-color: #FFFFFF;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
        }
        /* Уведомление */
        .toast-message {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: #1A1A1A;
            backdrop-filter: blur(12px);
            border: 1px solid #333;
            padding: 12px 24px;
            border-radius: 48px;
            font-weight: 500;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            pointer-events: none;
            font-size: 0.9rem;
            white-space: nowrap;
        }
        .toast-message.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        @media (max-width: 640px) {
            .toast-message { white-space: normal; text-align: center; width: 90%; font-size: 0.8rem; }
        }
    </style>
</head>
<body class="bg-[#0A0A0A] antialiased">

    <!-- НАВИГАЦИЯ -->
    <nav class="fixed top-0 left-0 w-full z-50 bg-[#0A0A0A]/80 backdrop-blur-md border-b border-[#222] py-4">
        <div class="container mx-auto px-6 md:px-12 flex justify-between items-center">
            <div class="text-2xl font-bold tracking-tighter"><span class="text-white">Тар</span><span class="font-light">Детейл</span></div>
            <div class="hidden md:flex gap-8 text-sm font-medium">
                <a href="#home" class="hover:text-gray-300 transition">Главная</a>
                <a href="#about" class="hover:text-gray-300 transition">О нас</a>
                <a href="#services" class="hover:text-gray-300 transition">Услуги</a>
                <a href="#contact" class="hover:text-gray-300 transition">Консультация</a>
            </div>
            <div class="md:hidden">
                <button id="mobileMenuBtn" class="text-white text-2xl"><i class="fas fa-bars"></i></button>
            </div>
        </div>
        <!-- Мобильное меню -->
        <div id="mobileMenu" class="fixed top-0 left-0 w-full h-full bg-black/95 backdrop-blur-md z-50 transform -translate-x-full transition-transform duration-300 pt-24 px-6">
            <button id="closeMenu" class="absolute top-6 right-6 text-3xl text-white">&times;</button>
            <div class="flex flex-col gap-8 text-xl font-medium">
                <a href="#home" class="border-b border-gray-700 pb-2">Главная</a>
                <a href="#about" class="border-b border-gray-700 pb-2">О нас</a>
                <a href="#services" class="border-b border-gray-700 pb-2">Услуги</a>
                <a href="#contact" class="border-b border-gray-700 pb-2">Консультация</a>
            </div>
        </div>
    </nav>

    <main class="pt-20">
        <!-- Hero секция (главная) -->
        <section id="home" class="min-h-screen flex items-center justify-center px-6 md:px-12 py-24">
            <div class="container mx-auto max-w-6xl text-center md:text-left fade-up">
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight tracking-tight">
                    ТарДетейл:<br> 
                    <span class="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">Безупречный уход за вашим автомобилем</span>
                </h1>
                <p class="text-gray-300 text-lg md:text-xl max-w-3xl mx-auto md:mx-0 mt-6 leading-relaxed">
                    Студия профессионального детейлинга Матвея Тарабана. Мы не просто моем машины, 
                    мы возвращаем им первозданный вид, работая на совесть.
                </p>
                <div class="mt-10">
                    <a href="#contact" class="inline-block bg-white text-black font-semibold px-8 py-4 rounded-full text-lg shadow-2xl hover:bg-gray-200 transition transform hover:scale-[1.02]">Записаться на осмотр →</a>
                </div>
                <div class="mt-16 flex flex-wrap justify-center md:justify-start gap-6 text-sm text-gray-400">
                    <div class="flex items-center gap-2"><i class="fas fa-check-circle text-white"></i> Полировка</div>
                    <div class="flex items-center gap-2"><i class="fas fa-check-circle text-white"></i> Керамика</div>
                    <div class="flex items-center gap-2"><i class="fas fa-check-circle text-white"></i> Химчистка</div>
                    <div class="flex items-center gap-2"><i class="fas fa-check-circle text-white"></i> Антидождь</div>
                </div>
            </div>
        </section>

        <!-- О НАС / История + Принципы -->
        <section id="about" class="py-24 px-6 md:px-12">
            <div class="container mx-auto max-w-6xl">
                <div class="fade-up border-l-4 border-white pl-6 md:pl-8 mb-24">
                    <span class="text-sm uppercase tracking-wider text-gray-400">Основано Матвеем Тарабаном</span>
                    <h2 class="text-3xl md:text-5xl font-bold mt-3">История ТарДетейл</h2>
                    <p class="text-gray-300 text-lg md:text-xl max-w-4xl mt-6 leading-relaxed">
                        Всё началось с безграничной любви к автомобилям и перфекционизма. Матвей Тарабан,
                        основатель студии, долгие годы искал сервис, где к машине относятся как к искусству.
                        Не найдя — создал своё пространство «ТарДетейл». Здесь каждый проект ведётся лично 
                        под контролем Матвея, а компромиссы в качестве — недопустимы. Девиз «Делаем на совесть» 
                        стал фундаментом безупречной репутации.
                    </p>
                </div>

                <!-- Принципы 4 карточки -->
                <div class="fade-up">
                    <h3 class="text-2xl md:text-3xl font-semibold text-center mb-14">Наши принципы</h3>
                    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                        <div class="principle-card p-6">
                            <div class="text-4xl mb-4"><i class="fas fa-hand-sparkles"></i></div>
                            <h4 class="text-xl font-bold">Работаем на совесть</h4>
                            <p class="text-gray-400 mt-2 text-sm">Каждая деталь проверяется лично.</p>
                        </div>
                        <div class="principle-card p-6">
                            <div class="text-4xl mb-4"><i class="fas fa-gem"></i></div>
                            <h4 class="text-xl font-bold">Премиальные материалы</h4>
                            <p class="text-gray-400 mt-2 text-sm">Лучшие мировые бренды.</p>
                        </div>
                        <div class="principle-card p-6">
                            <div class="text-4xl mb-4"><i class="fas fa-shield-alt"></i></div>
                            <h4 class="text-xl font-bold">Гарантия результата</h4>
                            <p class="text-gray-400 mt-2 text-sm">Гарантийные обязательства.</p>
                        </div>
                        <div class="principle-card p-6">
                            <div class="text-4xl mb-4"><i class="fas fa-chart-line"></i></div>
                            <h4 class="text-xl font-bold">Прозрачные цены</h4>
                            <p class="text-gray-400 mt-2 text-sm">Фиксированная стоимость.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- УСЛУГИ с фотографиями (все ваши ссылки добавлены) -->
        <section id="services" class="py-24 px-6 md:px-12 bg-[#050505]">
            <div class="container mx-auto max-w-6xl">
                <div class="text-center fade-up mb-14">
                    <h2 class="text-3xl md:text-5xl font-bold">Наши услуги</h2>
                    <div class="w-20 h-[2px] bg-white/50 mx-auto mt-4"></div>
                    <p class="text-gray-400 mt-4">Качественные фото наших работ — лучшее подтверждение мастерства</p>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- 1. Полировка кузова -->
                    <div class="service-card">
                        <img class="service-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCOzjz7kgoz8Dq4LoaOQ6Rs3TSB5Hi0KK3XA&s" alt="Полировка автомобиля">
                        <div class="p-5">
                            <h3 class="text-xl font-bold">Полировка кузова</h3>
                            <p class="text-gray-400 text-sm mt-2">Восстановление ЛКП до зеркального блеска.</p>
                        </div>
                    </div>
                    <!-- 2. Керамическое покрытие -->
                    <div class="service-card">
                        <img class="service-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRuhWF6lxUXwoNEZ1qPZrvwgLyuGnSTrUgJDw&s" alt="Керамическое покрытие авто">
                        <div class="p-5">
                            <h3 class="text-xl font-bold">Керамическое покрытие</h3>
                            <p class="text-gray-400 text-sm mt-2">Надёжная защита на годы, гидрофобность.</p>
                        </div>
                    </div>
                    <!-- 3. Детейлинг-химчистка (фото процессов детейлинга) -->
                    <div class="service-card">
                        <img class="service-img" src="https://spbdetailing.ru/wp-content/uploads/2022/07/INS09083-scaled.jpg" alt="Детейлинг химчистка салона">
                        <div class="p-5">
                            <h3 class="text-xl font-bold">Детейлинг-химчистка</h3>
                            <p class="text-gray-400 text-sm mt-2">Глубокая чистка салона, удаление запахов.</p>
                        </div>
                    </div>
                    <!-- 4. Антидождь + полировка фар / пример -->
                    <div class="service-card">
                        <img class="service-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAiVFoc9rdi5z0ceYA-rx_2ubic9iOAdKddg&s" alt="Антидождь покрытие стёкол">
                        <div class="p-5">
                            <h3 class="text-xl font-bold">Антидождь</h3>
                            <p class="text-gray-400 text-sm mt-2">Нанопокрытие стёкол для идеального обзора.</p>
                        </div>
                    </div>
                </div>
                <!-- Дополнительные фото для красоты можно добавить второй ряд (по желанию) -->
                <div class="grid md:grid-cols-3 gap-6 mt-10">
                    <div class="service-card">
                        <img class="service-img h-48" src="https://storeaudio.ru/upload/iblock/46c/1qb33ngtv1t58jfyp2uy6mjn071y7q7c.jpg" alt="Полировка фар">
                        <div class="p-4">
                            <h3 class="font-bold">Полировка фар</h3>
                            <p class="text-gray-400 text-xs">Возвращаем прозрачность оптике.</p>
                        </div>
                    </div>
                    <div class="service-card">
                        <img class="service-img h-48" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-7hID6M2fhena-J-tK1TvDyryonrL1HRryw&s" alt="Защита кузова">
                        <div class="p-4">
                            <h3 class="font-bold">Защитная пленка</h3>
                            <p class="text-gray-400 text-xs">Антигравийная защита кузова.</p>
                        </div>
                    </div>
                    <div class="service-card">
                        <img class="service-img h-48" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScEUcyi44yHlWDc24cxYZJWy2Xrv-6-jIotg&s" alt="Чистка двигателя">
                        <div class="p-4">
                            <h3 class="font-bold">Чистка моторного отсека</h3>
                            <p class="text-gray-400 text-xs">Детейлинг под капотом.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ФОРМА ОБРАТНОЙ СВЯЗИ -->
        <section id="contact" class="py-28 px-6 md:px-12">
            <div class="container mx-auto max-w-5xl fade-up">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-5xl font-bold">Оставьте заявку на <span class="border-b-2 border-white">бесплатную консультацию</span></h2>
                    <p class="text-gray-400 mt-4">Заполните форму, и основатель студии Матвей Тарабан свяжется с вами.</p>
                </div>
                <div class="bg-[#111111] rounded-3xl border border-[#2A2A2A] p-6 md:p-10">
                    <form id="leadForm" class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium mb-2">ФИО *</label>
                            <input type="text" id="fullname" placeholder="Иван Иванов" class="w-full">
                            <div class="text-red-400 text-xs mt-1 hidden" id="nameError">Укажите ФИО</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-2">Телефон *</label>
                            <input type="tel" id="phone" placeholder="+7 (999) 000-00-00" class="w-full">
                            <div class="text-red-400 text-xs mt-1 hidden" id="phoneError">Введите 10 цифр номера</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-2">Электронная почта *</label>
                            <input type="email" id="email" placeholder="example@mail.ru" class="w-full">
                            <div class="text-red-400 text-xs mt-1 hidden" id="emailError">Введите корректный email</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-2">Марка авто / Комментарий</label>
                            <textarea id="comment" rows="3" placeholder="Например: BMW X5, керамика..." class="w-full"></textarea>
                        </div>
                        <button type="submit" id="submitBtn" class="w-full bg-white text-black font-bold py-4 rounded-xl text-lg hover:bg-gray-200 transition flex justify-center items-center gap-2">Отправить заявку <i class="fas fa-arrow-right"></i></button>
                    </form>
                </div>
            </div>
        </section>

        <!-- ФУТЕР -->
        <footer class="border-t border-[#222] py-12 px-6 md:px-12 bg-[#050505]">
            <div class="container mx-auto max-w-6xl grid md:grid-cols-3 gap-8">
                <div>
                    <div class="text-2xl font-bold">Тар<span class="font-light">Детейл</span></div>
                    <p class="text-gray-400 text-sm mt-3">Студия детейлинга. Делаем на совесть.</p>
                </div>
                <div>
                    <h4 class="font-semibold text-lg mb-3">Контакты</h4>
                    <p class="text-gray-400 flex gap-2 items-center"><i class="fas fa-phone-alt"></i> +7 (928) 888-22-33</p>
                    <p class="text-gray-400 flex gap-2 items-center mt-2"><i class="fas fa-map-marker-alt"></i> г. Таганрог, Детейлинговая 12</p>
                    <div class="flex gap-5 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-telegram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-whatsapp"></i></a>
                    </div>
                </div>
                <div class="text-gray-400 text-sm">
                    <p>© 2026 ТарДетейл. Все права защищены. <br>Основатель: Матвей Тарабан.</p>
                </div>
            </div>
        </footer>
    </main>

    <div id="toastMsg" class="toast-message"></div>

    <script>
        // Анимации Intersection Observer
        const faders = document.querySelectorAll('.fade-up');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });
        faders.forEach(el => observer.observe(el));

        // Мобильное меню
        const menuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        const closeMenuBtn = document.getElementById('closeMenu');
        if(menuBtn && mobileMenu && closeMenuBtn) {
            menuBtn.onclick = () => { mobileMenu.classList.remove('-translate-x-full'); mobileMenu.classList.add('translate-x-0'); };
            closeMenuBtn.onclick = () => { mobileMenu.classList.add('-translate-x-full'); mobileMenu.classList.remove('translate-x-0'); };
            document.querySelectorAll('#mobileMenu a').forEach(link => {
                link.onclick = () => { mobileMenu.classList.add('-translate-x-full'); mobileMenu.classList.remove('translate-x-0'); };
            });
        }

        // Маска телефона
        const phoneField = document.getElementById('phone');
        if(phoneField) {
            phoneField.addEventListener('input', function(e) {
                let val = e.target.value.replace(/\D/g, '');
                if(val.length > 11) val = val.slice(0,11);
                let formatted = '';
                if(val.length > 0) formatted = '+7 ';
                if(val.length >= 1) {
                    let part1 = val.slice(1,4);
                    if(part1) formatted += `(${part1}`;
                    if(val.length >= 4) formatted += `) ${val.slice(4,7)}`;
                    if(val.length >= 7) formatted += `-${val.slice(7,9)}`;
                    if(val.length >= 9) formatted += `-${val.slice(9,11)}`;
                }
                e.target.value = formatted;
            });
        }

        // Валидация и отправка
        const form = document.getElementById('leadForm');
        const toast = document.getElementById('toastMsg');
        function showMessage(text, isError = false) {
            toast.innerText = text;
            toast.classList.add('show');
            toast.style.background = isError ? '#2c1515' : '#1E1E1E';
            toast.style.border = isError ? '1px solid #f44336' : '1px solid #4CAF50';
            setTimeout(() => toast.classList.remove('show'), 4000);
        }

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            let isValid = true;
            const fullname = document.getElementById('fullname').value.trim();
            const phoneDigits = document.getElementById('phone').value.replace(/\D/g, '');
            const email = document.getElementById('email').value.trim();
            const nameErr = document.getElementById('nameError');
            const phoneErr = document.getElementById('phoneError');
            const emailErr = document.getElementById('emailError');
            if(!fullname) { nameErr.classList.remove('hidden'); isValid = false; } else { nameErr.classList.add('hidden'); }
            if(phoneDigits.length < 10) { phoneErr.classList.remove('hidden'); isValid = false; } else { phoneErr.classList.add('hidden'); }
            const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/;
            if(!email || !emailRegex.test(email)) { emailErr.classList.remove('hidden'); isValid = false; } else { emailErr.classList.add('hidden'); }
            if(isValid) {
                const btn = document.getElementById('submitBtn');
                const original = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Отправка...';
                btn.disabled = true;
                setTimeout(() => {
                    showMessage('✅ Спасибо! Матвей или менеджер свяжется с вами.');
                    form.reset();
                    btn.innerHTML = original;
                    btn.disabled = false;
                }, 1000);
            } else {
                showMessage('⚠️ Заполните все обязательные поля верно', true);
            }
        });
        // Плавный скролл по якорям
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const target = document.querySelector(this.getAttribute('href'));
                if(target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth' }); }
            });
        });
        window.addEventListener('load', () => {
            faders.forEach(el => { if(el.getBoundingClientRect().top < window.innerHeight-100) el.classList.add('visible'); });
        });
    </script>
</body>
</html>