283 lines
14 KiB
HTML
283 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>АвтоМастер - Ремонт автомобилей</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>">
|
||
<style>
|
||
:root{
|
||
--primary: #2563EB;
|
||
--primary-dark: #1D4ED8;
|
||
--accent: #F59E0B;
|
||
--ink: #1F2937;
|
||
--gray-500: #6B7280;
|
||
--gray-100: #F3F4F6;
|
||
--white: #FFFFFF;
|
||
--success: #10B981;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:linear-gradient(135deg,#EFF6FF 0%,#FFFFFF 100%);padding:100px 24px;text-align:center}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.1;margin-bottom:24px;color:var(--ink)}
|
||
.hero p{font-size:20px;color:var(--gray-500);max-width:600px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--primary);color:var(--white);padding:16px 32px;border-radius:8px;font-weight:700;text-decoration:none;transition:background 0.3s}
|
||
.btn:hover{background:var(--primary-dark)}
|
||
.btn-accent{background:var(--accent)}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:16px;text-align:center}
|
||
.section-subtitle{text-align:center;color:var(--gray-500);margin-bottom:48px;max-width:600px;margin-left:auto;margin-right:auto}
|
||
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1140px;margin:0 auto}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;transition:transform 0.3s,box-shadow 0.3s}
|
||
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.1)}
|
||
.card-icon{font-size:48px;margin-bottom:16px}
|
||
.card h3{font-size:22px;font-weight:700;margin-bottom:12px}
|
||
.card p{color:var(--gray-500);line-height:1.6}
|
||
.card-price{font-size:18px;font-weight:700;color:var(--primary);margin-top:16px}
|
||
.about{background:linear-gradient(135deg,#FFF7ED 0%,#FFFFFF 100%)}
|
||
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1140px;margin:0 auto}
|
||
.about-image{width:100%;height:400px;object-fit:cover;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.1)}
|
||
.about-text h3{font-size:28px;font-weight:700;margin-bottom:16px}
|
||
.about-text p{color:var(--gray-500);margin-bottom:24px}
|
||
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
|
||
.feature{display:flex;align-items:center;gap:12px}
|
||
.feature-icon{width:24px;height:24px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px}
|
||
.form-section{background:linear-gradient(135deg,#EFF6FF 0%,#FFFFFF 100%)}
|
||
.form-container{max-width:500px;margin:0 auto;background:var(--white);padding:40px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.1)}
|
||
.form-group{margin-bottom:20px}
|
||
.form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--ink)}
|
||
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid #D1D5DB;border-radius:8px;font-size:16px;font-family:inherit;transition:border-color 0.3s}
|
||
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}
|
||
.form-group textarea{resize:vertical;min-height:100px}
|
||
.form-submit{width:100%;background:var(--primary);color:var(--white);padding:16px;border:none;border-radius:8px;font-size:18px;font-weight:700;cursor:pointer;transition:background 0.3s}
|
||
.form-submit:hover{background:var(--primary-dark)}
|
||
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;max-width:1140px;margin:0 auto}
|
||
.contact-card{text-align:center;padding:24px}
|
||
.contact-icon{font-size:40px;margin-bottom:16px}
|
||
.contact-card h3{font-size:20px;font-weight:700;margin-bottom:8px}
|
||
.contact-card p{color:var(--gray-500)}
|
||
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1140px;margin:0 auto}
|
||
.testimonial{background:var(--gray-100);padding:32px;border-radius:16px}
|
||
.testimonial-text{font-size:16px;color:var(--gray-500);margin-bottom:20px;font-style:italic}
|
||
.testimonial-author{display:flex;align-items:center;gap:12px}
|
||
.testimonial-avatar{width:48px;height:48px;border-radius:50%;background:var(--primary);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700}
|
||
.testimonial-name{font-weight:700}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media(max-width:768px){
|
||
.hero h1{font-size:36px}
|
||
.section h2{font-size:28px}
|
||
.container{padding:48px 20px}
|
||
.about-grid{grid-template-columns:1fr}
|
||
.features{grid-template-columns:1fr}
|
||
.hero{padding:60px 20px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Профессиональный ремонт автомобилей</h1>
|
||
<p>Качественный сервис, современное оборудование и опытные мастера. Вернём ваш автомобиль к жизни!</p>
|
||
<a class="btn" href="#form">Записаться на ремонт</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Наши услуги</h2>
|
||
<p class="section-subtitle">Полный спектр услуг по ремонту и обслуживанию автомобилей</p>
|
||
<div class="services-grid">
|
||
<div class="card reveal">
|
||
<div class="card-icon">🔧</div>
|
||
<h3>Диагностика</h3>
|
||
<p>Компьютерная диагностика всех систем автомобиля. Выявление неисправностей любой сложности.</p>
|
||
<div class="card-price">от 1 500 ₸</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">⚙️</div>
|
||
<h3>Ремонт двигателя</h3>
|
||
<p>Капитальный и текущий ремонт двигателей. Замена запчастей, регулировка клапанов.</p>
|
||
<div class="card-price">от 25 000 ₸</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">🚗</div>
|
||
<h3>Ходовая часть</h3>
|
||
<p>Ремонт подвески, замена амортизаторов, рычагов, сайлентблоков. Развал-схождение.</p>
|
||
<div class="card-price">от 8 000 ₸</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">💧</div>
|
||
<h3>Замена масел</h3>
|
||
<p>Замена масла в двигателе, КПП, редукторах. Все фильтры в наличии.</p>
|
||
<div class="card-price">от 3 000 ₸</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">❄️</div>
|
||
<h3>Кондиционеры</h3>
|
||
<p>Заправка, диагностика и ремонт систем кондиционирования. Устранение утечек.</p>
|
||
<div class="card-price">от 5 000 ₸</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">🔋</div>
|
||
<h3>Электрика</h3>
|
||
<p>Ремонт электропроводки, стартеров, генераторов. Установка сигнализаций.</p>
|
||
<div class="card-price">от 4 000 ₸</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section about">
|
||
<div class="about-grid">
|
||
<img src="https://loremflickr.com/600/400/autoservice" alt="Автосервис" class="about-image reveal">
|
||
<div class="about-text reveal">
|
||
<h3>Почему выбирают нас</h3>
|
||
<p>Мы работаем на рынке более 10 лет и зарекомендовали себя как надёжный партнёр для автовладельцев.</p>
|
||
<div class="features">
|
||
<div class="feature">
|
||
<div class="feature-icon">✓</div>
|
||
<span>Опытные мастера</span>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">✓</div>
|
||
<span>Гарантия на работы</span>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">✓</div>
|
||
<span>Современное оборудование</span>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">✓</div>
|
||
<span>Честные цены</span>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">✓</div>
|
||
<span>Оригинальные запчасти</span>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">✓</div>
|
||
<span>Соблюдение сроков</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section form-section" id="form">
|
||
<div class="container">
|
||
<h2>Записаться на ремонт</h2>
|
||
<p class="section-subtitle">Оставьте заявку, и мы свяжемся с вами в течение 15 минут</p>
|
||
<div class="form-container reveal">
|
||
<form id="requestForm">
|
||
<div class="form-group">
|
||
<label for="name">Ваше имя</label>
|
||
<input type="text" id="name" name="name" placeholder="Иван Иванов" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Телефон</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="+7 (777) 777-77-77" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="service">Выберите услугу</label>
|
||
<select id="service" name="service" required>
|
||
<option value="">-- Выберите из списка --</option>
|
||
<option value="diagnostika">Диагностика</option>
|
||
<option value="dvigatel">Ремонт двигателя</option>
|
||
<option value="hodovaya">Ходовая часть</option>
|
||
<option value="maslo">Замена масел</option>
|
||
<option value="kondicioner">Кондиционеры</option>
|
||
<option value="elektrika">Электрика</option>
|
||
<option value="drugoe">Другое</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Комментарий</label>
|
||
<textarea id="message" name="message" placeholder="Опишите проблему или пожелания..."></textarea>
|
||
</div>
|
||
<button type="submit" class="form-submit">Отправить заявку</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Отзывы клиентов</h2>
|
||
<p class="section-subtitle">Что говорят о нас наши клиенты</p>
|
||
<div class="testimonials-grid">
|
||
<div class="testimonial reveal">
|
||
<p class="testimonial-text">«Отличный сервис! Быстро нашли проблему с двигателем, которую до этого не могли диагностировать в трёх других местах. Цены адекватные.»</p>
|
||
<div class="testimonial-author">
|
||
<div class="testimonial-avatar">А</div>
|
||
<div class="testimonial-name">Алексей К.</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial reveal">
|
||
<p class="testimonial-text">«Обслуживаю здесь уже третий автомобиль. Нравится отношение к клиентам и качество работы. Всегда всё объяснят и покажут.»</p>
|
||
<div class="testimonial-author">
|
||
<div class="testimonial-avatar">М</div>
|
||
<div class="testimonial-name">Марат Т.</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial reveal">
|
||
<p class="testimonial-text">«Заправляла кондиционер - сделали всё за час. Дали гарантию. Цена ниже, чем у официалов, а качество не хуже.»</p>
|
||
<div class="testimonial-author">
|
||
<div class="testimonial-avatar">Е</div>
|
||
<div class="testimonial-name">Елена В.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:linear-gradient(135deg,#EFF6FF 0%,#FFFFFF 100%)">
|
||
<div class="container">
|
||
<h2>Контакты</h2>
|
||
<p class="section-subtitle">Свяжитесь с нами любым удобным способом</p>
|
||
<div class="contact-grid">
|
||
<div class="contact-card reveal">
|
||
<div class="contact-icon">📍</div>
|
||
<h3>Адрес</h3>
|
||
<p>г. Алматы, ул. Автомобильная, 123</p>
|
||
</div>
|
||
<div class="contact-card reveal">
|
||
<div class="contact-icon">📞</div>
|
||
<h3>Телефон</h3>
|
||
<p>+7 (777) 777-77-77</p>
|
||
</div>
|
||
<div class="contact-card reveal">
|
||
<div class="contact-icon">⏰</div>
|
||
<h3>Режим работы</h3>
|
||
<p>Пн-Сб: 9:00 - 18:00<br>Вс: выходной</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
|
||
document.getElementById('requestForm').addEventListener('submit',function(e){
|
||
e.preventDefault();
|
||
var name=document.getElementById('name').value;
|
||
var phone=document.getElementById('phone').value;
|
||
var service=document.getElementById('service').value;
|
||
var message=document.getElementById('message').value;
|
||
|
||
var whatsappMsg='Здравствуйте! Меня зовут '+name+'. Телефон: '+phone+'. Интересует: '+service+'. '+(message?message:'');
|
||
window.open('https://wa.me/77777777777?text='+encodeURIComponent(whatsappMsg),'_blank');
|
||
|
||
e.target.reset();
|
||
alert('Спасибо за заявку! Мы свяжемся с вами в ближайшее время.');
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|