task 17075 | сделал вывод соц. сетей

wp-content/themes/hantico/assets/css/style.css

@@ -6681,3 +6681,35 @@ h4 {
     grid-template-columns: 1fr;
   }
 }
+
+.article-social{
+  margin-top: 20px;
+
+  padding: 25px 30px;
+  background-color: var(--color-light);
+  border-radius: var(--radius-sm);
+
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.article-social__title{
+  font-size: var(--fs-h3-sm);
+    line-height: 1.2;
+    font-weight: 600;
+    color: var(--color-dark);
+}
+.article-social__text{
+  font-size: 18px;
+  line-height: 1.2;
+}
+.article-social__list{
+  display: flex;
+  gap: 10px;
+}
+.article-social__list > .footer-socials__item {
+  flex: 1;
+  width: auto;
+  height: 44px;
+  aspect-ratio: auto;
+}

wp-content/themes/hantico/single-article.php

@@ -19,6 +19,7 @@
 			$generated = generate_toc($article_content, 'article-content');
 			$content = $generated['content'];
 			$toc_items = $generated['toc_items'];
+			$footer_socials = get_field('socials', 'option');
 			foreach ($article_blocks as $block_index => &$block) {
 				if (($block['acf_fc_layout'] ?? '') !== 'text') {
 					continue;
@@ -142,6 +143,26 @@
 									</ul>
 								</div>
 							<?php endif; ?>
+
+							<div class="article-social">
+								<p class="article-social__title">
+									Работайте проще и зарабатывайте больше!
+								</p>
+
+								<p class="article-social__text">
+									Лайфхаки, полезные инструкции, изменения в правилах и важные новости для водителей и курьеров — в каналах Hantico.
+								</p>
+
+								<div class="article-social__list">
+									<a href="<?php echo $footer_socials['vk']; ?>" class="footer-socials__item" target="_blank" rel="noopener">
+										<img src="<?php echo get_theme_file_uri('assets/img/icons/vk.svg'); ?>" alt="VK" loading="lazy">
+									</a>
+									
+									<a href="<?php echo $footer_socials['telegram']; ?>" class="footer-socials__item" target="_blank" rel="noopener">
+										<img src="<?php echo get_theme_file_uri('assets/img/icons/telegram.svg'); ?>" alt="Telegram" loading="lazy">
+									</a>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>