Spaces:

Starchik1
/

dpkrovlya

Running

App Files Files Community

Starchik1 commited on Mar 8

Commit

f45ca93

verified ·

1 Parent(s): 91e65e9

Update index.html

Browse files

Files changed (1) hide show

index.html +753 -0

index.html CHANGED Viewed

	@@ -0,0 +1,753 @@

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Профессиональные кровельные работы любой сложности">
+    <title>RoofMaster - Кровельные работы</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #2563eb;
+            --secondary: #3b82f6;
+            --accent: #f59e0b;
+            --dark: #1e3a8a;
+            --light: #f8fafc;
+            --text: #1e293b;
+            --gray: #64748b;
+            --pattern-color: rgba(37, 99, 235, 0.08);
+            --section-padding: 4rem 5%;
+            --section-gap: 2rem;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+        body {
+            background-color: var(--light);
+            color: var(--text);
+            line-height: 1.6;
+            font-size: 16px;
+            background-image:
+                linear-gradient(to right, var(--pattern-color) 1px, transparent 1px),
+                linear-gradient(to bottom, var(--pattern-color) 1px, transparent 1px),
+                linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
+            background-size:
+                20px 20px,
+                20px 20px,
+                100px 100px,
+                100px 100px;
+            background-position:
+                -1px -1px,
+                -1px -1px,
+                -1px -1px,
+                -1px -1px;
+        }
+        .header {
+            background: rgba(255,255,255,0.95);
+            padding: 1rem 5%;
+            position: fixed;
+            width: 100%;
+            z-index: 1000;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            backdrop-filter: blur(8px);
+        }
+        .nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary);
+            text-decoration: none;
+            transition: opacity 0.2s;
+        }
+        .logo:hover {
+            opacity: 0.8;
+        }
+        .nav-links {
+            display: flex;
+            gap: 1.5rem;
+            align-items: center;
+        }
+        .nav-links a {
+            color: var(--text);
+            text-decoration: none;
+            font-weight: 500;
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            transition: all 0.2s;
+        }
+        .nav-links a:hover {
+            background: var(--light);
+            color: var(--primary);
+        }
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: var(--text);
+            cursor: pointer;
+            padding: 0.5rem;
+        }
+        .hero {
+            padding: 120px 5% 60px;
+            text-align: center;
+            position: relative;
+        }
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L100 50L50 100L0 50L50 0Z' fill='%232563eb' opacity='0.05'/%3E%3C/svg%3E");
+            opacity: 0.1;
+            z-index: -1;
+        }
+        .hero-content {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .hero h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: var(--dark);
+            line-height: 1.2;
+        }
+        .hero p {
+            font-size: 1.1rem;
+            margin-bottom: 2rem;
+            color: var(--gray);
+            max-width: 600px;
+            margin: 0 auto 2rem;
+        }
+        .cta-button {
+            background: var(--primary);
+            color: white;
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            position: relative;
+            overflow: hidden;
+            text-decoration: none;
+            margin-bottom: 10px;
+        }
+        .cta-button::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
+            transform: rotate(45deg);
+            transition: all 0.5s;
+        }
+        .cta-button:hover {
+            background: var(--secondary);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(37,99,235,0.2);
+        }
+        .cta-button:hover::before {
+            left: 50%;
+            top: 50%;
+        }
+        .cta-button .button-text {
+            transition: all 0.3s ease;
+            display: inline-block;
+            position: relative;
+        }
+        .cta-button:hover .button-text {
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(3px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .services {
+            padding: var(--section-padding);
+            background: linear-gradient(175deg, #fff 60%, var(--light) 100%);
+        }
+        .section-title {
+            text-align: center;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+            color: var(--dark);
+        }
+        .services-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: var(--section-gap);
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .service-card {
+            padding: 1.5rem;
+            border-radius: 12px;
+            background: rgba(255,255,255,0.9);
+            transition: all 0.3s;
+            border: 1px solid #e2e8f0;
+            text-align: center;
+            backdrop-filter: blur(4px);
+        }
+        .service-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+        }
+        .service-icon {
+            width: 64px;
+            height: 64px;
+            background: var(--primary);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 1rem;
+            transition: all 0.3s;
+        }
+        .service-card:hover .service-icon {
+            transform: rotate(15deg);
+        }
+        .gallery-section {
+            padding: var(--section-padding);
+            background: var(--light);
+        }
+        .swiper {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            height: 400px;
+        }
+        .swiper-slide img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            filter: brightness(0.9);
+            transition: filter 0.3s;
+        }
+        .swiper-slide:hover img {
+            filter: brightness(1);
+        }
+        .slide-caption {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            right: 20px;
+            background: rgba(255,255,255,0.95);
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .materials-section {
+            padding: var(--section-padding);
+            background: linear-gradient(175deg, var(--light) 60%, #fff 100%);
+        }
+        .materials-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: var(--section-gap);
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .material-card {
+            background: rgba(255,255,255,0.95);
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+            transition: transform 0.3s;
+        }
+        .material-card:hover {
+            transform: translateY(-5px);
+        }
+        .material-image img {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            border-bottom: 3px solid var(--primary);
+        }
+        .material-content {
+            padding: 1.5rem;
+        }
+        .material-props {
+            list-style: none;
+            margin-top: 1rem;
+        }
+        .material-props li {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.5rem;
+            color: var(--gray);
+            font-size: 0.9rem;
+        }
+        .material-props i {
+            color: var(--primary);
+            width: 20px;
+            text-align: center;
+        }
+        .material-props i.fa-wave-square { color: var(--accent); }
+        .material-props i.fa-temperature-low { color: #2dd4bf; }
+        .material-props i.fa-snowflake { color: #38bdf8; }
+        .material-props i.fa-boxes { color: #f59e0b; }
+        .steps-section {
+            padding: var(--section-padding);
+            background: var(--light);
+        }
+        .step-list {
+            counter-reset: step;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .step-item {
+            display: flex;
+            align-items: center;
+            padding: 1.5rem;
+            margin-bottom: 1rem;
+            background: white;
+            border-radius: 12px;
+            transition: all 0.3s;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+        }
+        .step-item:hover {
+            transform: translateX(10px);
+        }
+        .step-item::before {
+            counter-increment: step;
+            content: counter(step);
+            background: var(--primary);
+            color: white;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            margin-right: 1rem;
+            flex-shrink: 0;
+        }
+        .social-section {
+            padding: var(--section-padding);
+            background: white;
+            text-align: center;
+        }
+        .social-buttons {
+            display: flex;
+            gap: 1.5rem;
+            justify-content: center;
+            flex-wrap: wrap;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .cta-button.tiktok-btn {
+            background: #000000;
+        }
+        .cta-button.tiktok-btn:hover {
+            background: #ff0050;
+        }
+        .cta-button.instagram-btn {
+            background: #E1306C;
+        }
+        .cta-button.instagram-btn:hover {
+            background: #833AB4;
+        }
+        footer {
+            background: var(--dark);
+            color: white;
+            padding: 3rem 5%;
+            margin-top: 2rem;
+        }
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+        }
+        .footer-section h3 {
+            margin-bottom: 1rem;
+            color: white;
+        }
+        .footer-links a {
+            color: #e2e8f0;
+            text-decoration: none;
+            display: block;
+            margin-bottom: 0.5rem;
+            transition: color 0.2s;
+        }
+        .footer-links a:hover {
+            color: var(--accent);
+        }
+        @media (max-width: 768px) {
+            :root {
+                --section-padding: 3rem 5%;
+                --section-gap: 1.5rem;
+            }
+            .menu-toggle {
+                display: block;
+            }
+            .nav-links {
+                display: none;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                background: white;
+                padding: 1rem;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            .nav-links.active {
+                display: flex;
+            }
+            .hero {
+                padding: 100px 5% 40px;
+            }
+            .hero h1 {
+                font-size: 2rem;
+            }
+            .swiper {
+                height: 300px;
+            }
+            .cta-button {
+                width: 100%;
+                justify-content: center;
+            }
+            .social-buttons {
+                flex-direction: column;
+            }
+            .material-card {
+                margin: 0 1rem;
+            }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .section-title,
+        .services-grid,
+        .swiper,
+        .step-list,
+        .social-buttons {
+            animation: fadeIn 0.6s ease-out;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <nav class="nav">
+            <a href="#" class="logo">RoofMaster</a>
+            <button class="menu-toggle" aria-label="Открыть меню">☰</button>
+            <div class="nav-links">
+                <a href="#services">Услуги</a>
+                <a href="#gallery">Работы</a>
+                <a href="#materials">Материалы</a>
+                <a href="#steps">Этапы</a>
+                <a href="#social">Соцсети</a>
+            </div>
+        </nav>
+    </header>
+    <section class="hero">
+        <div class="hero-content">
+            <h1>Профессиональные кровельные работы</h1>
+            <p>Качественный монтаж и ремонт кровли с гарантией 5 лет</p>
+            <a href="tel:+380979752177" class="cta-button" data-operator="Киевстар" data-phone="+380 97 975 2177">
+                <i class="fas fa-phone-alt"></i>
+                <span class="button-text">Киевстар</span>
+            </a>
+            <a href="tel:+380959009448" class="cta-button" data-operator="Водафон" data-phone="+380 95 900 9448">
+                <i class="fas fa-phone-alt"></i>
+                <span class="button-text">Водафон</span>
+            </a>
+        </div>
+    </section>
+    <section class="services" id="services">
+        <h2 class="section-title">Наши услуги</h2>
+        <div class="services-grid">
+            <div class="service-card">
+                <div class="service-icon">
+                    <i class="fas fa-hammer"></i>
+                </div>
+                <h3>Монтаж кровли</h3>
+                <p>Установка всех видов кровельных покрытий любой сложности</p>
+            </div>
+            <div class="service-card">
+                <div class="service-icon">
+                    <i class="fas fa-tools"></i>
+                </div>
+                <h3>Ремонт кровли</h3>
+                <p>Качественное восстановление и усиление конструкций</p>
+            </div>
+            <div class="service-card">
+    <div class="service-icon">
+        <i class="fas fa-building"></i>
+    </div>
+    <h3>Обслуживание кровли</h3>
+    <p>Регулярный осмотр, чистка и профилактические работы для поддержания кровли в идеальном состоянии</p>
+</div>
+        </div>
+    </section>
+    <section class="gallery-section" id="gallery">
+        <h2 class="section-title">Примеры работ</h2>
+        <div class="swiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="https://eliteroof.dp.ua/_files/usr/catalog/Suntile/metalicheskaya_suntile_dnepropetrovsk.jpg" alt="Пример работы 1">
+                    <div class="slide-caption">
+                        <h3>Жилая крыша</h3>
+                        <p>Монтаж металлочерепицы</p>
+                    </div>
+                </div>
+                <div class="swiper-slide">
+                    <img src="https://kingdom.com.ua/images/ploskaiakrisha.jpg" alt="Пример работы 2">
+                    <div class="slide-caption">
+                        <h3>Коммерческий объект</h3>
+                        <p>Ремонт плоской кровли</p>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-pagination"></div>
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
+        </div>
+    </section>
+    <section class="materials-section" id="materials">
+        <h2 class="section-title">Используемые материалы</h2>
+        <div class="materials-grid">
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-3-360-263-falc-370x270.jpg" alt="Фальцевая кровля">
+                </div>
+                <div class="material-content">
+                    <h3>Фальцевая кровля</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-layer-group"></i> Материал: оцинкованная сталь/медь</li>
+                        <li><i class="fas fa-lock"></i> Шов: двойной замок</li>
+                        <li><i class="fas fa-calendar"></i> Срок службы: 50 лет</li>
+                        <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-4-360-263-profnastil-001-370x270.jpg" alt="Профнастил">
+                </div>
+                <div class="material-content">
+                    <h3>Профнастил</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-ruler"></i> Толщина: 0.4-0.7 мм</li>
+                        <li><i class="fas fa-paint-brush"></i> Покрытие: полимерное</li>
+                        <li><i class="fas fa-wave-square"></i> Высота волны: 20-40 мм</li>
+                        <li><i class="fas fa-palette"></i> Цвета: 20 вариантов</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/3-4-360-263-soffit-370x270.jpg" alt="Подшивка софит">
+                </div>
+                <div class="material-content">
+                    <h3>Подшивка (софит)</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-box"></i> Материал: ПВХ/металл</li>
+                        <li><i class="fas fa-wind"></i> Вентиляция: перфорированный</li>
+                        <li><i class="fas fa-ruler-horizontal"></i> Ширина: 30-50 см</li>
+                        <li><i class="fas fa-sun"></i> УФ-защита</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-2-823-289-m.okna-750x263.jpg" alt="Мансардные окна">
+                </div>
+                <div class="material-content">
+                    <h3>Мансардные окна</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-window-maximize"></i> Остекление: 2-3 камеры</li>
+                        <li><i class="fas fa-cube"></i> Материал: дерево/ПВХ</li>
+                        <li><i class="fas fa-temperature-low"></i> Теплоизоляция</li>
+                        <li><i class="fas fa-cog"></i> Механизм открывания</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-1-397-611-vodostok-002-370x570.jpg" alt="Водосточные системы">
+                </div>
+                <div class="material-content">
+                    <h3>Водосточные системы</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-tint"></i> Материал: ПВХ/металл</li>
+                        <li><i class="fas fa-ruler-vertical"></i> Диаметр: 100-150 мм</li>
+                        <li><i class="fas fa-snowflake"></i> Морозостойкость</li>
+                        <li><i class="fas fa-boxes"></i> Комплектующие в наборе</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-1-397-611-metall-005-370x570.jpg" alt="Металлочерепица">
+                </div>
+                <div class="material-content">
+                    <h3>Металлочерепица</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-ruler-combined"></i> Толщина: 0.5 мм</li>
+                        <li><i class="fas fa-shield-alt"></i> Гарантия: 25 лет</li>
+                        <li><i class="fas fa-palette"></i> Цвета: 15 вариантов</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://www.1d.ua/image/cache/webp/catalog/fotosNew/bitumna-cherepytsia/brava-bitumna-cherepytsia/76331-700x700.webp" alt="Гибкая черепица">
+                </div>
+                <div class="material-content">
+                    <h3>Гибкая черепица</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-layer-group"></i> Слои: 3</li>
+                        <li><i class="fas fa-thermometer-three-quarters"></i> Морозостойкость: -60°C</li>
+                        <li><i class="fas fa-tint"></i> Водонепроницаемость: 100%</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://www.sddu.com.ua/images/1-_enl.jpg" alt="Медная кровля">
+                </div>
+                <div class="material-content">
+                    <h3>Медная кровля</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-weight-hanging"></i> Вес: 5-7 кг/м²</li>
+                        <li><i class="fas fa-history"></i> Срок службы: 100+ лет</li>
+                        <li><i class="fas fa-atom"></i> Патина: естественное покрытие</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="steps-section" id="steps">
+        <h2 class="section-title">Как мы работаем</h2>
+        <div class="step-list">
+            <div class="step-item">
+                <div>
+                    <h3>Консультация</h3>
+                    <p>Бесплатный выезд специалиста</p>
+                </div>
+            </div>
+            <div class="step-item">
+                <div>
+                    <h3>Договор</h3>
+                    <p>Фиксированная стоимость работ</p>
+                </div>
+            </div>
+            <div class="step-item">
+                <div>
+                    <h3>Реализация</h3>
+                    <p>Качественное выполнение работ</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="social-section" id="social">
+        <h2 class="section-title">Мы в соцсетях</h2>
+        <div class="social-buttons">
+            <a href="https://tiktok.com/@ваш_аккаунт" target="_blank" class="cta-button tiktok-btn">
+                <i class="fab fa-tiktok"></i>
+                TikTok
+            </a>
+            <a href="https://instagram.com/ваш_аккаунт" target="_blank" class="cta-button instagram-btn">
+                <i class="fab fa-instagram"></i>
+                Instagram
+            </a>
+        </div>
+    </section>
+    <footer>
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>RoofMaster</h3>
+                <p>Качественные кровельные решения</p>
+            </div>
+            <div class="footer-section">
+                <h3>Контакты</h3>
+                <p>+380 97 975 2177</p>
+                <p>+380 95 900 9448</p>
+                <p>[email protected]</p>
+            </div>
+            <div class="footer-section">
+                <h3>Навигация</h3>
+                <div class="footer-links">
+                    <a href="#services">Услуги</a>
+                    <a href="#gallery">Работы</a>
+                    <a href="#materials">Материалы</a>
+                    <a href="#social">Соцсети</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+    <script>
+        const swiper = new Swiper('.swiper', {
+            loop: true,
+            autoplay: { delay: 5000 },
+            pagination: { el: '.swiper-pagination', clickable: true },
+            navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
+            grabCursor: true,
+        });
+        const menuToggle = document.querySelector('.menu-toggle');
+        const navLinks = document.querySelector('.nav-links');
+        menuToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+        });
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.nav')) {
+                navLinks.classList.remove('active');
+            }
+        });
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            });
+        });
+        document.querySelectorAll('.cta-button[data-phone]').forEach(button => {
+            const operator = button.dataset.operator;
+            const phone = button.dataset.phone;
+            const textSpan = button.querySelector('.button-text');
+            button.addEventListener('mouseenter', () => textSpan.textContent = phone);
+            button.addEventListener('mouseleave', () => textSpan.textContent = operator);
+        });
+    </script>
+</body>
+</html>