From 8f6903da26475195201f2e321eae0de696c480b9 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Thu, 19 Jun 2025 16:09:24 +0200
Subject: [PATCH] FEATURE Introducing social networks links and icons

---
 .../img/icons/carhop-social-facebook.svg      | 16 +++++
 .../img/icons/carhop-social-instagram.svg     | 20 +++++++
 resources/img/icons/carhop-social-tiktok.svg  | 16 +++++
 resources/img/icons/carhop-social-youtube.svg | 16 +++++
 template-parts/footer.php                     | 59 ++++++++++++-------
 5 files changed, 106 insertions(+), 21 deletions(-)
 create mode 100644 resources/img/icons/carhop-social-facebook.svg
 create mode 100644 resources/img/icons/carhop-social-instagram.svg
 create mode 100644 resources/img/icons/carhop-social-tiktok.svg
 create mode 100644 resources/img/icons/carhop-social-youtube.svg

diff --git a/resources/img/icons/carhop-social-facebook.svg b/resources/img/icons/carhop-social-facebook.svg
new file mode 100644
index 0000000..f0fc609
--- /dev/null
+++ b/resources/img/icons/carhop-social-facebook.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="social-facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #136f63;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" width="30" height="30"/>
+  <path class="cls-2" d="M19.7,9.01v-2.93s-2.99-.03-3.2-.03c-1.35,0-3.3,1.54-3.3,3.28v3.13h-2.8v3.32h2.77v8.24h3.27v-8.28h2.89l.37-3.25h-3.22v-2.38c0-.57.43-1.13,1.08-1.13.43,0,2.14.02,2.14.02h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-social-instagram.svg b/resources/img/icons/carhop-social-instagram.svg
new file mode 100644
index 0000000..b9de5aa
--- /dev/null
+++ b/resources/img/icons/carhop-social-instagram.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="social-instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #136f63;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="0" width="30" height="30"/>
+  <g>
+    <path class="cls-2" d="M11.69,8.28c-1.88,0-3.41,1.53-3.41,3.42v6.61c0,1.88,1.53,3.42,3.41,3.42h6.61c1.88,0,3.42-1.53,3.42-3.42v-6.61c0-1.88-1.53-3.42-3.42-3.42h-6.61ZM18.3,23.65h-6.61c-2.95,0-5.34-2.4-5.34-5.35v-6.61c0-2.95,2.4-5.34,5.34-5.34h6.61c2.95,0,5.34,2.4,5.34,5.34v6.61c0,2.95-2.4,5.35-5.34,5.35h0Z"/>
+    <path class="cls-2" d="M15,12.31c-1.48,0-2.69,1.2-2.69,2.69s1.2,2.69,2.69,2.69,2.69-1.21,2.69-2.69-1.2-2.69-2.69-2.69h0ZM15,19.42c-2.44,0-4.42-1.98-4.42-4.42s1.98-4.42,4.42-4.42,4.42,1.98,4.42,4.42-1.98,4.42-4.42,4.42h0Z"/>
+    <path class="cls-2" d="M20.39,10.32c0,.41-.33.75-.75.75s-.75-.33-.75-.75.33-.75.75-.75.75.34.75.75h0Z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-social-tiktok.svg b/resources/img/icons/carhop-social-tiktok.svg
new file mode 100644
index 0000000..0e47e8b
--- /dev/null
+++ b/resources/img/icons/carhop-social-tiktok.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="social-tiktok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #136f63;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="0" width="30" height="30"/>
+  <path class="cls-2" d="M22.87,10.63s-1.6-.03-2.96-1.02c-1.18-.86-1.59-2.73-1.65-3.43v-.09h-2.87v12.39c0,1.49-1.21,2.7-2.7,2.7s-2.7-1.21-2.7-2.7,1.21-2.7,2.7-2.7h.91v-2.87h-.91c-3.07,0-5.57,2.5-5.57,5.57s2.5,5.57,5.57,5.57,5.57-2.5,5.57-5.57v-6.51c2.08,1.5,4.34,1.55,4.6,1.55h0v-2.87s0,0,0,0h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-social-youtube.svg b/resources/img/icons/carhop-social-youtube.svg
new file mode 100644
index 0000000..ffa4cf2
--- /dev/null
+++ b/resources/img/icons/carhop-social-youtube.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="social-youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #136f63;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" width="30" height="30"/>
+  <path class="cls-2" d="M15.48,16.69l-2.66,1.64v-6.58l2.66,1.65,2.66,1.65-2.66,1.65h0ZM20.46,9.03h-10.92c-1.71,0-3.11,1.4-3.11,3.11v5.71c0,1.71,1.4,3.11,3.11,3.11h10.92c1.71,0,3.11-1.4,3.11-3.11v-5.71c0-1.71-1.4-3.11-3.11-3.11h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/template-parts/footer.php b/template-parts/footer.php
index 4253c13..fa3e108 100644
--- a/template-parts/footer.php
+++ b/template-parts/footer.php
@@ -21,37 +21,37 @@
 
 <ul class="credits">
 	<li class="contact">
-		<h3>Contact</h2>
-			<p>
-				<a href="mailto:info@carhop.be">info@carhop.be</a>
-			</p>
-			<p>
-				<a href="tel:+3267485861">+32 67 48 58 61</a>
-			</p>
+		<h3 class="section-title">Contact</h3>
+		<p>
+			<a href="mailto:info@carhop.be">info@carhop.be</a>
+		</p>
+		<p>
+			<a href="tel:+3267485861">+32 67 48 58 61</a>
+		</p>
 	</li>
 
 	<li class="siege-social">
-		<h3>siège social et d'activités </h3>
-		<p>Avenue de la Houssière, 80
-			7090 Braine-le-Comte
+		<h3 class="section-title">siège social et d'activités </h3>
+		<p>Avenue de la Houssière, 80<br />
+			7090 Braine-le-Comte<br />
 			067/48.58.61</p>
 	</li>
 	<li class="siege-activite">
-		<h3>siège d'activités</h3>
+		<h3 class="section-title">siège d'activités</h3>
 		<p>
-			Rue de la Poste, 111
-			1030 Bruxelles
+			Rue de la Poste, 111<br />
+			1030 Bruxelles<br />
 			02/514.15.30
 		</p>
 	</li>
 	<li class="numero-entreprise">
-		<h3>Numéro d'entreprise</h3>
+		<h3 class="section-title">Numéro d'entreprise</h3>
 		<p>
 			421 374 334
 		</p>
 	</li>
 	<li class="belfius">
-		<h3>Belfius</h3>
+		<h3 class="section-title">Belfius</h3>
 		<p>
 			IBAN BE86 7995 2072 9950
 		</p>
@@ -60,12 +60,29 @@
 		</p>
 	</li>
 	<li class="socials">
-		<a href="https://www.facebook.com/p/Carhop-asbl-100064324346403">
-			Facebook
-		</a>
 
-		<a href="https://www.youtube.com/channel/UC-PTbzaC0tlrShZE4l8Z2zA">
-			YouTube
-		</a>
+		<ul class="social-networks-links">
+			<li>
+				<a class="social-link" title="<?php echo __('Facebook', "carhop") ?>" href="<?php "https://www.facebook.com/p/Carhop-asbl-100064324346403/" ?>">
+					<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-facebook.svg' ?>" alt="">
+				</a>
+			</li>
+			<li>
+				<a class="social-link" title="<?php echo __('Youtube', "carhop") ?>" href="<?php echo "https://www.youtube.com/channel/UC-PTbzaC0tlrShZE4l8Z2zA" ?>">
+					<img class="social-icon" src=" <?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-youtube.svg' ?>" alt="">
+				</a>
+			</li>
+			<li>
+				<a class="social-link" title="<?php echo __('Instagram', "carhop") ?>" href="<?php "https://www.instagram.com/carhop.asbl/" ?>">
+					<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-instagram.svg' ?>" alt="">
+				</a>
+			</li>
+			<li>
+				<a class="social-link" title="<?php echo __('TikTok', "carhop") ?>" href="<?php echo "https://www.tiktok.com/@carhop.asbl" ?>">
+					<img class="social-icon" src=" <?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-tiktok.svg' ?>" alt="">
+				</a>
+			</li>
+		</ul>
+
 	</li>
 </ul>
\ No newline at end of file