2

2026-05-26 21:32:23 +05:00
parent 244a409444
commit 374f9588dc
4 changed files with 104 additions and 13 deletions
--- a/public/img/partner-1.webp
+++ b/public/img/partner-1.webp
--- a/public/img/thanks-1.webp
+++ b/public/img/thanks-1.webp
--- a/public/img/thanks-2.webp
+++ b/public/img/thanks-2.webp
--- a/public/index.html
+++ b/public/index.html
@@ -73,9 +73,9 @@ img { max-width: 100%; display: block; }
 }

 .logo { display: flex; align-items: center; position: relative; z-index: 2; margin-top: -18px; margin-bottom: -18px; }
-.logo img { height: 180px; width: auto; }
+.logo img { max-height: 180px; max-width: 100%; width: auto; height: auto; }

-.nav { display: flex; align-items: center; gap: 24px; position: relative; z-index: 2; }
+.nav { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; }

 .nav a {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
@@ -519,6 +519,42 @@ img { max-width: 100%; display: block; }
  .btn { width: 100%; justify-content: center; }
  .hero-contacts { flex-direction: column; gap: 12px; }
 }
+.activity-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+  margin-top: 40px;
+}
+.activity-grid img {
+  width: 100%; height: auto;
+  border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+}
+.activity-grid .license-gallery-item { cursor: pointer; }
+
+.partners-scroll {
+  overflow: hidden;
+  margin-top: 40px;
+}
+.partners-track {
+  display: flex;
+  gap: 60px;
+  animation: partners-scroll 20s linear infinite;
+  width: max-content;
+}
+.partners-track:hover { animation-play-state: paused; }
+.partners-track img {
+  height: 100px;
+  width: auto;
+  flex-shrink: 0;
+}
+@keyframes partners-scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+@media (max-width: 768px) {
+  .activity-grid { grid-template-columns: 1fr; }
+}
 </style>
 </head>
 <body>
@@ -530,15 +566,16 @@ img { max-width: 100%; display: block; }
      <a href="#hero" class="logo">
        <img src="./img/logo.webp" alt="СТС-Авто">
      </a>
-      <nav class="nav">
-        <a href="#about">О компании</a>
-        <a href="#services">Услуги</a>
-        <a href="#process">Этапы</a>
-        <a href="#equipment">Техника</a>
-        <a href="#geography">География</a>
-        <a href="#licenses">Лицензии</a>
-        <a href="#contacts">Контакты</a>
-      </nav>
+<nav class="nav">
+  <a href="#about">О компании</a>
+  <a href="#activity">Деятельность</a>
+  <a href="#services">Услуги</a>
+  <a href="#process">Этапы</a>
+  <a href="#equipment">Техника</a>
+  <a href="#geography">География</a>
+  <a href="#licenses">Лицензии</a>
+  <a href="#contacts">Контакты</a>
+</nav>
      <a href="tel:88005552931" class="header-phone">
        <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z"/></svg>
        8(800) 555-29-31
@@ -552,6 +589,7 @@ img { max-width: 100%; display: block; }
 <div class="mobile-overlay" id="mobileOverlay"></div>
 <nav class="mobile-nav" id="mobileNav">
  <a href="#about" class="mobile-link">О компании</a>
+  <a href="#activity" class="mobile-link">Деятельность</a>
  <a href="#services" class="mobile-link">Услуги</a>
  <a href="#process" class="mobile-link">Этапы работ</a>
  <a href="#equipment" class="mobile-link">Спецтехника</a>
@@ -607,7 +645,7 @@ img { max-width: 100%; display: block; }
  <div class="container">
    <div class="section-header reveal">
      <h2 class="section-title">О <span>компании</span></h2>
-      <p class="section-subtitle">Компания «СТС-Авто» — надёжный партнёр в сфере демонтажа нефтегазопроводов по России, утилизации отходов. Мы работаем на всей территории Российской Федерации, обеспечивая полный цикл работ собственными силами и техникой.</p>
+      <p class="section-subtitle">Компания «СТС-Авто» — надёжный партнёр в сфере демонтажа, оказывает услуги по демонтажу магистральных трубопроводов, объектов инфраструктуры, зданий, сооружений и разделки жд транспорта, с последующей переработкой и утилизацией для предприятий. Мы работаем на всей территории Российской Федерации.</p>
    </div>
    <div class="about-grid">
      <div class="about-image reveal-left">
@@ -641,7 +679,36 @@ img { max-width: 100%; display: block; }
  </div>
 </section>

-<!-- SERVICES -->
+<!-- SOCIAL ACTIVITY -->
+<section class="section section-white" id="activity">
+  <div class="container">
+    <div class="section-header center reveal">
+      <h2 class="section-title">Общественная <span>деятельность</span></h2>
+      <p class="section-subtitle">Компания «СТС-Авто» активно участвует в социальной и общественной жизни регионов присутствия.</p>
+    </div>
+    <div class="activity-grid reveal">
+      <div class="license-gallery-item" data-src="./img/thanks-1.webp" data-title="Благодарственное письмо" data-desc="Благодарность от партнёров за качественно выполненные работы.">
+        <div class="license-gallery-thumb">
+          <img src="./img/thanks-1.webp" alt="Благодарственное письмо">
+          <div class="license-gallery-zoom"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
+        </div>
+        <div class="license-gallery-body">
+          <h4>Благодарственное письмо</h4>
+        </div>
+      </div>
+      <div class="license-gallery-item" data-src="./img/thanks-2.webp" data-title="Благодарственное письмо" data-desc="Благодарность от партнёров за качественно выполненные работы.">
+        <div class="license-gallery-thumb">
+          <img src="./img/thanks-2.webp" alt="Благодарственное письмо">
+          <div class="license-gallery-zoom"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
+        </div>
+        <div class="license-gallery-body">
+          <h4>Благодарственное письмо</h4>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
 <section class="section section-white" id="services">
  <div class="container">
    <div class="section-header center reveal">
@@ -1120,6 +1187,30 @@ img { max-width: 100%; display: block; }
  </div>
 </section>

+<!-- PARTNERS -->
+<section class="section section-white" id="partners">
+  <div class="container">
+    <div class="section-header center reveal">
+      <h2 class="section-title">Наши <span>партнёры</span></h2>
+      <p class="section-subtitle">Сотрудничаем с ведущими компаниями нефтегазового сектора.</p>
+    </div>
+    <div class="partners-scroll reveal">
+      <div class="partners-track">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+        <img src="./img/partner-1.webp" alt="Партнёр">
+      </div>
+    </div>
+  </div>
+</section>
+
 <!-- FOOTER -->
 <footer class="footer">
  <div class="footer-content">