index.html - main - smaker21/test

index.html
1 241 строка48 KB
Ilya Ostapov
final version
05 фев 2026, 18:01
05 фев 2026, 18:018c9eedc
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>ЛАДА‑РЕНО – Специализированный автосервис | Профессиональное обслуживание автомобилей</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Автосервис ЛАДА‑РЕНО — профессиональное обслуживание автомобилей с 2005 года. Компьютерная диагностика, ремонт тормозной системы, кузовной ремонт, обслуживание кондиционеров. Гарантия на работы.">
    <meta name="keywords" content="автосервис, ремонт авто, диагностика, кузовной ремонт, тормозная система, обслуживание кондиционеров, ЛАДА, РЕНО, автосервис Москва">
    <meta name="author" content="ЛАДА‑РЕНО">
    <meta name="robots" content="index, follow">
    
    <!-- Open Graph / Social Media -->
    <meta property="og:title" content="ЛАДА‑РЕНО – Специализированный автосервис">
    <meta property="og:description" content="Профессиональное обслуживание автомобилей с 2005 года. Качество, которое вы заслуживаете.">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="ru_RU">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" 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>">
    
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <style>
        /* ---------- Тёмная тема ---------- */
        :root {
            --blue-1: #1e3a8a;
            --blue-2: #3b82f6;
            --dark-bg: #0f172a;
            --dark-card: #1e293b;
            --dark-text: #e2e8f0;
            --dark-text-muted: #94a3b8;
            --max-width: 1200px;
            --transition: .3s ease;
        }

        body {
            background: var(--dark-bg);
            color: var(--dark-text);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.7;
            font-size: 16px;
            margin: 0;
            padding: 0;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        a { text-decoration: none; color: inherit; transition: var(--transition); }
        img { max-width: 100%; display: block; }
        h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; }
        p { line-height: 1.7; }

        /* ---------- Шапка ---------- */
        header {
            position: sticky;
            top: 0;
            background: var(--dark-card);
            box-shadow: 0 2px 4px rgba(0,0,0,.3);
            z-index: 1000;
        }
        .nav {
            max-width: var(--max-width);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
        }
        .nav .logo {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--dark-text);
        }
        .nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
        }
        .nav ul li a {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--dark-text-muted);
            transition: var(--transition);
        }
        .nav ul li a:hover {
            color: var(--blue-2);
        }
        .nav .phone-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--blue-2);
            color: var(--white);
            padding: 0.7rem 1.3rem;
            border-radius: 0.6rem;
            font-weight: 600;
            font-size: 0.95rem;
            transition: var(--transition);
        }
        .nav .phone-btn:hover {
            background: var(--blue-1);
            transform: translateY(-2px);
        }

        /* ---------- Бургер меню ---------- */
        .burger {
            display: none;
            flex-direction: column;
            justify-content: space-around;
            width: 32px;
            height: 26px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1001;
        }
        .burger span {
            width: 100%;
            height: 3px;
            background: var(--dark-text);
            border-radius: 3px;
            transition: var(--transition);
            transform-origin: center;
        }
        .burger.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }
        .burger.active span:nth-child(2) {
            opacity: 0;
        }
        .burger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }

        /* ---------- Hero ---------- */
        .hero {
            position: relative;
            background-image: url('https://bestznak.ru/content/front/insurance_tmp1/images/sites_pages_photos/5/33/c53f53c-b.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: var(--white);
            text-align: center;
            padding: 8rem 1rem 10rem;
        }
        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,.5);
            z-index: 0;
        }
        .hero > * {
            position: relative;
            z-index: 1;
        }
        .hero h1 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            margin-bottom: 1.5rem;
            text-shadow: 0 2px 4px rgba(0,0,0,.3);
        }
        .hero p {
            font-size: 1.3rem;
            margin-bottom: 2.5rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.95;
        }
        .hero .cta {
            display: inline-block;
            background: var(--blue-2);
            color: var(--white);
            padding: 1rem 2.5rem;
            border-radius: 0.6rem;
            font-weight: 700;
            font-size: 1.05rem;
            transition: var(--transition);
            margin: 0.5rem;
            box-shadow: 0 4px 15px rgba(0,0,0,.2);
        }
        .hero .cta:hover {
            background: var(--blue-1);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,.3);
        }
        .hero .cta-outline {
            background: transparent;
            border: 2px solid var(--white);
            color: var(--white);
        }
        .hero .cta-outline:hover {
            background: var(--white);
            color: var(--blue-1);
        }

        /* ---------- О компании (с фоном, ярче и менее размыто) ---------- */
        .about {
            position: relative;
            background-image: url('О компании.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            margin: 0 auto 6rem;
            padding: 6rem 2rem;
        }
        .about::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 0;
        }
        .about > * {
            position: relative;
            z-index: 1;
        }
        .about-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        .about h2 {
            color: var(--white);
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-shadow: 0 2px 4px rgba(0,0,0,.3);
        }
        .about p {
            font-size: 1.2rem;
            line-height: 1.9;
            color: var(--white);
            text-shadow: 0 1px 2px rgba(0,0,0,.2);
            margin-bottom: 1.5rem;
        }
        .about-advantages {
            margin-top: 3rem;
            text-align: left;
            background: rgba(30, 41, 59, 0.5);
            padding: 2rem 2.5rem;
            border-radius: 1rem;
        }
        .about-advantages h3 {
            color: var(--white);
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .about-advantages ul {
            list-style: none;
        }
        .about-advantages li {
            padding: 0.8rem 0;
            border-bottom: 1px solid rgba(255,255,255,.1);
            color: var(--dark-text);
            font-size: 1.05rem;
        }
        .about-advantages li:last-child {
            border-bottom: none;
        }

        /* ---------- Услуги ---------- */
        .services {
            max-width: var(--max-width);
            margin: 6rem auto;
            padding: 0 1rem;
        }
        .services h2 {
            text-align: center;
            color: var(--dark-text);
            font-size: 2.2rem;
            margin-bottom: 3rem;
        }
        .service-list {
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }
        .service-card {
            background: var(--dark-card);
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,.2);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,.3);
        }
        .service-card img {
            height: 200px;
            width: 100%;
            object-fit: cover;
        }
        .service-card .content {
            padding: 1.5rem;
            flex-grow: 1;
        }
        .service-card h3 {
            margin-bottom: 0.8rem;
            color: var(--dark-text);
            font-size: 1.25rem;
        }
        .service-card p {
            font-size: 1rem;
            color: var(--dark-text-muted);
        }
        .service-card .price {
            margin-top: 1.2rem;
            font-weight: 700;
            color: var(--blue-2);
            font-size: 1.1rem;
        }

        /* ---------- Прайс-лист ---------- */
        .prices {
            max-width: var(--max-width);
            margin: 6rem auto;
            padding: 0 1rem;
        }
        .prices h2 {
            text-align: center;
            color: var(--dark-text);
            font-size: 2.2rem;
            margin-bottom: 3rem;
        }
        .price-table {
            background: var(--dark-card);
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,.2);
        }
        .price-row {
            display: grid;
            grid-template-columns: 1fr auto;
            padding: 1.3rem 2rem;
            border-bottom: 1px solid rgba(255,255,255,.1);
            align-items: center;
        }
        .price-row:last-child {
            border-bottom: none;
        }
        .price-row:hover {
            background: rgba(255,255,255,.05);
        }
        .price-row .service-name {
            font-weight: 600;
            color: var(--dark-text);
            font-size: 1.05rem;
        }
        .price-row .service-desc {
            font-size: 0.9rem;
            color: var(--dark-text-muted);
            margin-top: 0.3rem;
        }
        .price-row .price-value {
            font-weight: 700;
            color: var(--blue-2);
            font-size: 1.1rem;
            white-space: nowrap;
        }
        .price-note {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.95rem;
            color: var(--dark-text-muted);
        }

        /* ---------- Акции ---------- */
        .promo {
            max-width: var(--max-width);
            margin: 6rem auto;
            padding: 0 1rem;
        }
        .promo h2 {
            text-align: center;
            color: var(--dark-text);
            font-size: 2.2rem;
            margin-bottom: 3rem;
        }
        .promo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        .promo-card {
            background: var(--dark-card);
            border-radius: 1rem;
            padding: 0;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,.2);
            overflow: hidden;
            transition: var(--transition);
        }
        .promo-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0,0,0,.3);
        }
        .promo-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        .promo-card .promo-content {
            padding: 1.5rem 1.5rem 2rem;
        }
        .promo-card .badge {
            display: inline-block;
            background: #ef4444;
            color: var(--white);
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            font-size: 0.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        .promo-card h3 {
            color: var(--dark-text);
            margin-bottom: 0.8rem;
            font-size: 1.3rem;
        }
        .promo-card p {
            font-size: 1rem;
            color: var(--dark-text-muted);
            margin-bottom: 1rem;
        }
        .promo-card .discount {
            font-size: 1.5rem;
            font-weight: 800;
            color: #ef4444;
        }

        /* ---------- Отзывы ---------- */
        .reviews {
            max-width: var(--max-width);
            margin: 6rem auto;
            padding: 0 1rem;
        }
        .reviews h2 {
            text-align: center;
            color: var(--dark-text);
            font-size: 2.2rem;
            margin-bottom: 3rem;
        }
        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }
        .review-card {
            background: var(--dark-card);
            border-radius: 1rem;
            padding: 2rem;
            box-shadow: 0 4px 15px rgba(0,0,0,.2);
        }
        .review-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .review-avatar {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: var(--blue-2);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.3rem;
        }
        .review-author {
            font-weight: 600;
            color: var(--dark-text);
            font-size: 1.1rem;
        }
        .review-car {
            font-size: 0.9rem;
            color: var(--dark-text-muted);
        }
        .review-stars {
            color: #fbbf24;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }
        .review-text {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--dark-text-muted);
            font-style: italic;
        }

        /* ---------- FAQ ---------- */
        .faq {
            max-width: var(--max-width);
            margin: 6rem auto;
            padding: 0 1rem;
        }
        .faq h2 {
            text-align: center;
            color: var(--dark-text);
            font-size: 2.2rem;
            margin-bottom: 3rem;
        }
        .faq-list {
            max-width: 800px;
            margin: 0 auto;
        }
        .faq-item {
            background: var(--dark-card);
            border-radius: 1rem;
            margin-bottom: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,.2);
        }
        .faq-question {
            padding: 1.5rem 2rem;
            font-weight: 600;
            font-size: 1.05rem;
            color: var(--dark-text);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }
        .faq-question:hover {
            background: rgba(255,255,255,.05);
        }
        .faq-question::after {
            content: "+";
            font-size: 1.8rem;
            color: var(--blue-2);
            transition: var(--transition);
            font-weight: 400;
        }
        .faq-item.active .faq-question::after {
            transform: rotate(45deg);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease;
        }
        .faq-answer p {
            padding: 0 2rem 1.5rem;
            font-size: 1rem;
            color: var(--dark-text-muted);
            line-height: 1.7;
        }
        .faq-item.active .faq-answer {
            max-height: 200px;
        }

        /* ---------- Форма ---------- */
        .booking {
            background: var(--dark-card);
            max-width: var(--max-width);
            margin: 6rem auto;
            padding: 4rem 3rem;
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0,0,0,.2);
        }
        .booking h2 {
            text-align: center;
            color: var(--dark-text);
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
        }
        .booking > p {
            text-align: center;
            margin-bottom: 2.5rem;
            font-size: 1.1rem;
            color: var(--dark-text-muted);
        }
        .booking-form {
            max-width: 650px;
            margin: 0 auto;
        }
        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .form-group {
            display: flex;
            flex-direction: column;
        }
        .form-group label {
            margin-bottom: 0.6rem;
            font-weight: 600;
            color: var(--dark-text);
            font-size: 0.95rem;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 0.9rem 1.1rem;
            border: 2px solid rgba(255,255,255,.2);
            border-radius: 0.6rem;
            font-size: 1rem;
            font-family: inherit;
            transition: var(--transition);
            background: var(--dark-bg);
            color: var(--dark-text);
        }
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--blue-2);
        }
        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }
        .form-submit {
            text-align: center;
            margin-top: 1rem;
        }
        .form-submit button {
            background: var(--blue-2);
            color: var(--white);
            padding: 1.1rem 3.5rem;
            border: none;
            border-radius: 0.6rem;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }
        .form-submit button:hover {
            background: var(--blue-1);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, .3);
        }
        .form-success {
            display: none;
            text-align: center;
            padding: 2.5rem;
            background: rgba(34, 197, 94, .2);
            border-radius: 0.6rem;
            color: #22c55e;
        }
        .form-success.show {
            display: block;
        }
        .form-success h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        /* ---------- Контакты ---------- */
        .contact {
            background: var(--dark-card);
            color: var(--white);
            padding: 5rem 1rem;
        }
        .contact .inner {
            max-width: var(--max-width);
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 3rem;
            justify-content: space-between;
        }
        .contact h2 {
            width: 100%;
            text-align: center;
            margin-bottom: 2.5rem;
            font-size: 2rem;
        }
        .contact .info {
            flex: 1 1 280px;
        }
        .contact .info h3 {
            margin-bottom: 1rem;
            font-size: 1.3rem;
            color: var(--dark-text);
        }
        .contact .info p,
        .contact .info a {
            margin-bottom: 0.6rem;
            color: var(--dark-text-muted);
            font-size: 1.05rem;
        }
        .contact .info a:hover {
            text-decoration: underline;
        }
        .contact .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .contact .social-links a {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(255,255,255,.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            transition: var(--transition);
        }
        .contact .social-links a:hover {
            background: rgba(255,255,255,.2);
            transform: translateY(-3px);
        }
        .contact .map {
            flex: 1 1 280px;
            min-height: 280px;
            border: 2px solid rgba(255,255,255,.2);
            border-radius: 0.6rem;
            overflow: hidden;
        }
        .contact .map iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* ---------- Подвал ---------- */
        footer {
            background: var(--dark-card);
            color: var(--dark-text-muted);
            text-align: center;
            padding: 2rem;
        }
        footer .social-footer {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1.2rem;
        }
        footer .social-footer a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: var(--transition);
        }
        footer .social-footer a:hover {
            background: rgba(255,255,255,.2);
        }
        footer p {
            font-size: 0.95rem;
        }

        /* ---------- Адаптивность ---------- */
        @media (max-width: 768px) {
            .nav ul { gap: 1rem; }
            .hero { padding: 6rem 1rem 8rem; }
            .about { margin-top: 0; padding: 4rem 1.5rem; }
            .contact .inner { flex-direction: column; align-items: stretch; }
            .nav .phone-btn { display: none; }
            .about-content { padding: 0; }
            .about-advantages { padding: 1.5rem; }
            .about-advantages li { font-size: 0.95rem; }
            
            .burger {
                display: flex;
            }
            .nav ul.nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 85%;
                max-width: 320px;
                height: 100vh;
                background: var(--dark-card);
                flex-direction: column;
                justify-content: flex-start;
                padding-top: 90px;
                padding-left: 2rem;
                gap: 1.8rem;
                box-shadow: -4px 0 20px rgba(0,0,0,.3);
                transition: right .3s ease;
            }
            .nav ul.nav-links.active {
                right: 0;
            }
            .nav ul.nav-links li a {
                font-size: 1.2rem;
                color: var(--dark-text);
            }
        }
    </style>
</head>
<body>

<!-- Навигация -->
<header>
    <nav class="nav" role="navigation" aria-label="Главное меню">
        <div class="logo">ЛАДА‑РЕНО</div>
        <a href="tel:+74951234567" class="phone-btn">📞 +7 (495) 123‑45‑67</a>
        <button class="burger" aria-label="Открыть меню" aria-expanded="false">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <ul class="nav-links">
            <li><a href="#hero">Главная</a></li>
            <li><a href="#about">О компании</a></li>
            <li><a href="#services">Услуги</a></li>
            <li><a href="#prices">Цены</a></li>
            <li><a href="#promo">Акции</a></li>
            <li><a href="#reviews">Отзывы</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#contact">Контакты</a></li>
        </ul>
    </nav>
</header>

<!-- Hero -->
<section id="hero" class="hero">
    <h1>Ваш автомобиль – в надёжных руках!</h1>
    <p>Профессиональный автосервис «ЛАДА‑РЕНО». Качество, которое вы заслуживаете. Более 18 лет опыта и тысячи довольных клиентов.</p>
    <a href="#booking" class="cta" data-aos="fade-up">Записаться онлайн</a>
    <a href="tel:+74951234567" class="cta cta-outline" data-aos="fade-up" data-aos-delay="100">Позвонить сейчас</a>
</section>

<!-- О компании (с преимуществами) -->
<section id="about" class="about">
    <div class="about-content">
        <h2 data-aos="fade-up">О компании</h2>
        <p data-aos="fade-up" data-aos-delay="100">
            С 2005 года автосервис «ЛАДА‑РЕНО» обслуживает автомобили всех марок в городе.
            Мы начинали как небольшая мастерская, а сегодня – это современный центр
            технического обслуживания, где работают только сертифицированные специалисты.
            Наша миссия – обеспечить безопасность и комфорт каждому клиенту,
            используя новейшее оборудование и оригинальные запчасти.
        </p>
        
        <div class="about-advantages" data-aos="fade-up" data-aos-delay="200">
            <h3>Почему выбирают нас</h3>
            <ul>
                <li>Опыт с 2005 года — более 18 лет успешной работы на рынке автосервисных услуг</li>
                <li>Сертифицированные мастера — квалифицированные специалисты с профессиональным образованием</li>
                <li>Гарантия на работы — официальная гарантия от 6 месяцев до 1 года на все виды работ</li>
                <li>Современное оборудование — новейшее диагностическое и ремонтное оборудование</li>
            </ul>
        </div>
    </div>
</section>

<!-- Услуги -->
<section id="services" class="services">
    <h2 data-aos="fade-up">Наши услуги</h2>
    <div class="service-list">
        <div class="service-card" data-aos="fade-up" data-aos-delay="0">
            <img src="https://avatars.mds.yandex.net/get-altay/4581272/2a0000017a7af08a6ed30ebdb86bcd517556/XXL_height" alt="Диагностика">
            <div class="content">
                <h3>Компьютерная диагностика</h3>
                <p>Быстрое выявление неисправностей с помощью современного диагностического оборудования.</p>
                <div class="price">от 1 500 ₽</div>
            </div>
        </div>
        <div class="service-card" data-aos="fade-up" data-aos-delay="100">
            <img src="https://cdn.shopify.com/s/files/1/0581/4691/4470/files/nt604_elite_ABS_system.jpg?v=1722068713" alt="Тормозная система">
            <div class="content">
                <h3>Тормозная система</h3>
                <p>Профессиональная проверка, замена колодок и ремонт тормозных механизмов.</p>
                <div class="price">от 3 500 ₽</div>
            </div>
        </div>
        <div class="service-card" data-aos="fade-up" data-aos-delay="200">
            <img src="https://avatars.mds.yandex.net/i?id=7ded0386d6624af51b31774630d67d9d_l-4568431-images-thumbs&n=13" alt="Кузовной ремонт">
            <div class="content">
                <h3>Кузовной ремонт</h3>
                <p>Восстановление формы, покраска и устранение следов аварийного воздействия.</p>
                <div class="price">от 15 000 ₽</div>
            </div>
        </div>
        <div class="service-card" data-aos="fade-up" data-aos-delay="300">
            <img src="https://avatars.mds.yandex.net/get-ydo/4219998/2a00000188ece4abf5447484658585535d03/diploma" alt="Сервис кондиционеров">
            <div class="content">
                <h3>Обслуживание кондиционеров</h3>
                <p>Заправка, чистка и проверка систем климат‑контроля для вашего комфорта.</p>
                <div class="price">от 2 500 ₽</div>
            </div>
        </div>
        <div class="service-card" data-aos="fade-up" data-aos-delay="400">
            <img src="Замена технических жидкостей.jpg" alt="Замена технических жидкостей">
            <div class="content">
                <h3>Замена технических жидкостей</h3>
                <p>Замена масла, охлаждающей жидкости, тормозной жидкости и других технических жидкостей.</p>
                <div class="price">от 2 000 ₽</div>
            </div>
        </div>
        <div class="service-card" data-aos="fade-up" data-aos-delay="500">
            <img src="Ремонт подвески.jpg" alt="Ремонт подвески">
            <div class="content">
                <h3>Ремонт подвески</h3>
                <p>Диагностика и ремонт амортизаторов, шаровых опор, рычагов, сайлентблоков.</p>
                <div class="price">от 4 500 ₽</div>
            </div>
        </div>
    </div>
</section>

<!-- Прайс -->
<section id="prices" class="prices">
    <h2 data-aos="fade-up">Цены на услуги</h2>
    <div class="price-table" data-aos="fade-up">
        <div class="price-row">
            <div>
                <div class="service-name">Компьютерная диагностика</div>
                <div class="service-desc">Полная диагностика всех систем автомобиля</div>
            </div>
            <div class="price-value">от 1 500 ₽</div>
        </div>
        <div class="price-row">
            <div>
                <div class="service-name">Замена масла и фильтров</div>
                <div class="service-desc">Масло, фильтр масляный, воздушный, салонный</div>
            </div>
            <div class="price-value">от 2 000 ₽</div>
        </div>
        <div class="price-row">
            <div>
                <div class="service-name">Замена тормозных колодок</div>
                <div class="service-desc">Передние или задние колодки</div>
            </div>
            <div class="price-value">от 3 500 ₽</div>
        </div>
        <div class="price-row">
            <div>
                <div class="service-name">Обслуживание кондиционера</div>
                <div class="service-desc">Заправка, дезинфекция, проверка</div>
            </div>
            <div class="price-value">от 2 500 ₽</div>
        </div>
        <div class="price-row">
            <div>
                <div class="service-name">Регулировка развал-схождения</div>
                <div class="service-desc">На современном 3D-стенде</div>
            </div>
            <div class="price-value">от 4 000 ₽</div>
        </div>
        <div class="price-row">
            <div>
                <div class="service-name">Кузовной ремонт</div>
                <div class="service-desc">Восстановление геометрии, покраска</div>
            </div>
            <div class="price-value">от 15 000 ₽</div>
        </div>
        <div class="price-row">
            <div>
                <div class="service-name">Техническое обслуживание</div>
                <div class="service-desc">ТО-1, ТО-2, комплексное ТО</div>
            </div>
            <div class="price-value">от 5 000 ₽</div>
        </div>
        <div class="price-row">
            <div>
                <div class="service-name">Ремонт подвески</div>
                <div class="service-desc">Амортизаторы, шаровые, рычаги</div>
            </div>
            <div class="price-value">от 4 500 ₽</div>
        </div>
    </div>
    <p class="price-note" data-aos="fade-up">* Точная стоимость определяется после осмотра автомобиля. Возможны скидки для постоянных клиентов.</p>
</section>

<!-- Акции -->
<section id="promo" class="promo">
    <h2 data-aos="fade-up">Специальные предложения</h2>
    <div class="promo-grid">
        <div class="promo-card" data-aos="fade-up" data-aos-delay="0">
            <img src="Первое посещение.jpg" alt="Первое посещение">
            <div class="promo-content">
                <span class="badge">ХИТ</span>
                <h3>Скидка 15%</h3>
                <p>На первое посещение для новых клиентов</p>
                <div class="discount">-15%</div>
            </div>
        </div>
        <div class="promo-card" data-aos="fade-up" data-aos-delay="100">
            <img src="Диагностика бесплатно.webp" alt="Диагностика бесплатно">
            <div class="promo-content">
                <span class="badge">АКЦИЯ</span>
                <h3>Диагностика бесплатно</h3>
                <p>При заказе ремонта от 10 000 ₽</p>
                <div class="discount">0 ₽</div>
            </div>
        </div>
        <div class="promo-card" data-aos="fade-up" data-aos-delay="200">
            <img src="Скидка пенсионерам и участникам СВО.webp" alt="Скидка пенсионерам">
            <div class="promo-content">
                <span class="badge">ВЫГОДА</span>
                <h3>Скидка 10%</h3>
                <p>Для пенсионеров и участников СВО</p>
                <div class="discount">-10%</div>
            </div>
        </div>
    </div>
</section>

<!-- Отзывы -->
<section id="reviews" class="reviews">
    <h2 data-aos="fade-up">Отзывы наших клиентов</h2>
    <div class="reviews-grid">
        <div class="review-card" data-aos="fade-up" data-aos-delay="0">
            <div class="review-header">
                <div class="review-avatar">А</div>
                <div>
                    <div class="review-author">Алексей Петров</div>
                    <div class="review-car">Lada Vesta</div>
                </div>
            </div>
            <div class="review-stars">★★★★★</div>
            <p class="review-text">"Отличный автосервис! Быстро нашли неисправность, всё объяснили и показали. Цены адекватные, качество работы на высоте. Рекомендую!"</p>
        </div>
        <div class="review-card" data-aos="fade-up" data-aos-delay="100">
            <div class="review-header">
                <div class="review-avatar">М</div>
                <div>
                    <div class="review-author">Мария Смирнова</div>
                    <div class="review-car">Renault Duster</div>
                </div>
            </div>
            <div class="review-stars">★★★★★</div>
            <p class="review-text">"Впервые обратилась и осталась очень довольна! Вежливый персонат, чистая приёмка, всё объяснили по ремонту. Сделали скидку постоянному клиенту."</p>
        </div>
        <div class="review-card" data-aos="fade-up" data-aos-delay="200">
            <div class="review-header">
                <div class="review-avatar">Д</div>
                <div>
                    <div class="review-author">Дмитрий Волков</div>
                    <div class="review-car">Lada XRAY</div>
                </div>
            </div>
            <div class="review-stars">★★★★☆</div>
            <p class="review-text">"Хороший сервис, делал кузовной ремонт после ДТП. Работой доволен, цвет подобрали идеально. Пришлось подождать запись на пару дней."</p>
        </div>
    </div>
</section>

<!-- FAQ -->
<section id="faq" class="faq">
    <h2 data-aos="fade-up">Частые вопросы</h2>
    <div class="faq-list" data-aos="fade-up">
        <div class="faq-item">
            <div class="faq-question">Сколько времени занимает компьютерная диагностика?</div>
            <div class="faq-answer"><p>Компьютерная диагностика занимает от 30 минут до 1 часа в зависимости от сложности выявленных неисправностей. Мы всегда называем точное время после первичного осмотра.</p></div>
        </div>
        <div class="faq-item">
            <div class="faq-question">Какие марки автомобилей вы обслуживаете?</div>
            <div class="faq-answer"><p>Мы обслуживаем автомобили всех марок — отечественные и иномарки. Наши специалисты имеют опыт работы с LADA, Renault, Hyundai, Kia, Volkswagen, Toyota и многими другими брендами.</p></div>
        </div>
        <div class="faq-item">
            <div class="faq-question">Какая гарантия на выполняемые работы?</div>
            <div class="faq-answer"><p>Мы предоставляем гарантию от 6 месяцев до 1 года на все виды работ в зависимости от их сложности. Гарантийные случаи устраняем бесплатно.</p></div>
        </div>
        <div class="faq-item">
            <div class="faq-question">Можно ли оплатить картой?</div>
            <div class="faq-answer"><p>Да, мы принимаем оплату наличными и банковскими картами. Также возможна безналичная оплата для юридических лиц.</p></div>
        </div>
        <div class="faq-item">
            <div class="faq-question">Нужна ли предварительная запись?</div>
            <div class="faq-answer"><p>Да, мы рекомендуем записываться заранее, чтобы мы могли подготовить необходимые запчасти и мастера. Записаться можно по телефону или через форму на сайте.</p></div>
        </div>
    </div>
</section>

<!-- Форма -->
<section id="booking" class="booking">
    <h2 data-aos="fade-up">Записаться на обслуживание</h2>
    <p data-aos="fade-up">Оставьте заявку и наш мастер свяжется с вами в ближайшее время</p>
    
    <form class="booking-form" id="bookingForm">
        <div class="form-row">
            <div class="form-group">
                <label for="name">Ваше имя *</label>
                <input type="text" id="name" name="name" required placeholder="Иван Иванов">
            </div>
            <div class="form-group">
                <label for="phone">Телефон *</label>
                <input type="tel" id="phone" name="phone" required placeholder="+7 (___) ___-__-__">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="car">Марка автомобиля *</label>
                <input type="text" id="car" name="car" required placeholder="Lada Vesta">
            </div>
            <div class="form-group">
                <label for="service">Услуга</label>
                <select id="service" name="service">
                    <option value="">Выберите услугу</option>
                    <option value="diagnostics">Компьютерная диагностика</option>
                    <option value="brakes">Тормозная система</option>
                    <option value="body">Кузовной ремонт</option>
                    <option value="ac">Обслуживание кондиционеров</option>
                    <option value="other">Другая услуга</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="comment">Комментарий</label>
            <textarea id="comment" name="comment" placeholder="Опишите проблему или удобное время визита..."></textarea>
        </div>
        <div class="form-submit">
            <button type="submit">Записаться на приём</button>
        </div>
    </form>
    
    <div class="form-success" id="formSuccess">
        <h3>✅ Спасибо за заявку!</h3>
        <p>Наш мастер свяжется с вами в ближайшее время.</p>
    </div>
</section>

<!-- Контакты -->
<section id="contact" class="contact">
    <div class="inner">
        <h2>Свяжитесь с нами</h2>

        <div class="info">
            <h3>Часы работы</h3>
            <p>Пн‑Пт: 08:00 – 19:00</p>
            <p>Сб: 09:00 – 16:00</p>
            <p>Вс: выходной</p>

            <h3>Контакты</h3>
            <p>Телефон: <a href="tel:+74951234567">+7 (495) 123‑45‑67</a></p>
            <p>E‑mail: <a href="mailto:info@lada-reno.ru">info@lada-reno.ru</a></p>
            
            <div class="social-links">
                <a href="https://wa.me/74951234567" title="WhatsApp" aria-label="WhatsApp">💬</a>
                <a href="https://t.me/lada_reno" title="Telegram" aria-label="Telegram">✈️</a>
                <a href="https://vk.com/lada_reno" title="VK" aria-label="VK">VK</a>
            </div>
        </div>

        <div class="map">
            <iframe src="https://yandex.ru/map-widget/v1/-/CCUeVnD2ZB" allowfullscreen title="Карта автосервиса ЛАДА‑РЕНО"></iframe>
        </div>
    </div>
</section>

<!-- Подвал -->
<footer>
    <div class="social-footer">
        <a href="https://wa.me/74951234567" title="WhatsApp" aria-label="WhatsApp">💬</a>
        <a href="https://t.me/lada_reno" title="Telegram" aria-label="Telegram">✈️</a>
        <a href="https://vk.com/lada_reno" title="VK" aria-label="VK">VK</a>
    </div>
    <p>© 2026 ЛАДА‑РЕНО. Все права защищены.</p>
</footer>

<!-- AOS Animation Library -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>
    // Инициализация AOS анимаций
    AOS.init({
        duration: 800,
        easing: 'ease-out',
        once: true,
        offset: 50
    });

    // Мобильное меню
    const burger = document.querySelector('.burger');
    const navLinks = document.querySelector('.nav-links');
    
    burger.addEventListener('click', () => {
        burger.classList.toggle('active');
        navLinks.classList.toggle('active');
        const expanded = burger.classList.contains('active');
        burger.setAttribute('aria-expanded', expanded);
    });
    
    navLinks.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
            burger.classList.remove('active');
            navLinks.classList.remove('active');
            burger.setAttribute('aria-expanded', 'false');
        });
    });

    // Маска для телефона
    const phoneInput = document.getElementById('phone');
    phoneInput.addEventListener('input', (e) => {
        let value = e.target.value.replace(/\D/g, '');
        if (value.length > 0) {
            if (value[0] === '7' || value[0] === '8') {
                value = value.substring(1);
            }
            let formatted = '+7';
            if (value.length > 0) formatted += ' (' + value.substring(0, 3);
            if (value.length > 3) formatted += ') ' + value.substring(3, 6);
            if (value.length > 6) formatted += '-' + value.substring(6, 8);
            if (value.length > 8) formatted += '-' + value.substring(8, 10);
            e.target.value = formatted;
        }
    });

    // Обработка формы
    document.getElementById('bookingForm').addEventListener('submit', (e) => {
        e.preventDefault();
        document.getElementById('bookingForm').style.display = 'none';
        document.getElementById('formSuccess').classList.add('show');
    });

    // FAQ аккордеон
    document.querySelectorAll('.faq-question').forEach(question => {
        question.addEventListener('click', () => {
            const item = question.parentElement;
            const isActive = item.classList.contains('active');
            
            document.querySelectorAll('.faq-item').forEach(faq => {
                faq.classList.remove('active');
            });
            
            if (!isActive) {
                item.classList.add('active');
            }
        });
    });
</script>

</body>
</html>