From fc63d08d1aeae46400bfec8a05050d603be0d160 Mon Sep 17 00:00:00 2001
From: Kagameow <kagami.404@gmail.com>
Date: Tue, 6 Aug 2024 10:02:32 +0200
Subject: [PATCH] updated contact us

---
 src/assets/linkedin.svg  |  3 +++
 src/layout/AppFooter.vue | 48 +++++++++++++++++++++++++++++++---------
 2 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/linkedin.svg

diff --git a/src/assets/linkedin.svg b/src/assets/linkedin.svg
new file mode 100644
index 0000000..80860ac
--- /dev/null
+++ b/src/assets/linkedin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
+    <path d="M17.4167 2.75C17.9029 2.75 18.3692 2.94315 18.713 3.28697C19.0568 3.63079 19.25 4.0971 19.25 4.58333V17.4167C19.25 17.9029 19.0568 18.3692 18.713 18.713C18.3692 19.0568 17.9029 19.25 17.4167 19.25H4.58333C4.0971 19.25 3.63079 19.0568 3.28697 18.713C2.94315 18.3692 2.75 17.9029 2.75 17.4167V4.58333C2.75 4.0971 2.94315 3.63079 3.28697 3.28697C3.63079 2.94315 4.0971 2.75 4.58333 2.75H17.4167ZM16.9583 16.9583V12.1C16.9583 11.3074 16.6435 10.5474 16.0831 9.98693C15.5226 9.42651 14.7626 9.11167 13.97 9.11167C13.1908 9.11167 12.2833 9.58833 11.8433 10.3033V9.28583H9.28583V16.9583H11.8433V12.4392C11.8433 11.7333 12.4117 11.1558 13.1175 11.1558C13.4579 11.1558 13.7843 11.291 14.025 11.5317C14.2656 11.7724 14.4008 12.0988 14.4008 12.4392V16.9583H16.9583ZM6.30667 7.84667C6.7151 7.84667 7.10681 7.68442 7.39561 7.39561C7.68442 7.10681 7.84667 6.7151 7.84667 6.30667C7.84667 5.45417 7.15917 4.7575 6.30667 4.7575C5.8958 4.7575 5.50177 4.92072 5.21124 5.21124C4.92072 5.50177 4.7575 5.8958 4.7575 6.30667C4.7575 7.15917 5.45417 7.84667 6.30667 7.84667ZM7.58083 16.9583V9.28583H5.04167V16.9583H7.58083Z" fill="#F8F8F8"/>
+</svg>
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index 8d62fa5..1892e69 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import IconCross from '@/assets/cross.svg';
+import IconLinkedin from '@/assets/linkedin.svg';
 
 const isContactSectionVisible = ref(false);
 const showContactSection = () => {
@@ -29,16 +30,24 @@ const hideContactSection = () => {
         <div class="app-footer__contact-section-placeholder"></div>
         <address class="app-footer__contact-address">
           <h3>Contact Us</h3>
-          <p>
-            Email:
-            <a href="mailto:info@hiro-microdatacenters.nl">
-              info@hiro-microdatacenters.nl
+          <div class="app-footer__contact-address-container">
+            <p>
+              Email:
+              <a href="mailto:info@hiro-microdatacenters.nl">
+                info@hiro-microdatacenters.nl
+              </a>
+            </p>
+            <a
+              href="https://www.linkedin.com/company/hiro-microdatacenters/"
+              target="_blank"
+            >
+              <IconLinkedin scale="2" />
             </a>
-          </p>
+          </div>
         </address>
         <IconCross
           class="app-footer__contact-exit"
-          scale="2"
+          scale="1"
           @click="hideContactSection"
         />
       </section>
@@ -121,17 +130,21 @@ const hideContactSection = () => {
   background: url('assets/footer-full-bg-mobile.svg') top no-repeat;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-evenly;
+  width: 350px;
 
   @media (--breakpoint-desktop) {
     background: url('assets/footer-full-bg.svg') top no-repeat;
     width: 700px;
+    justify-content: space-between;
   }
 }
 
 .app-footer__contact-section-placeholder {
-  margin: 20px;
-  padding: 9px;
+  @media (--breakpoint-desktop) {
+    margin: 20px;
+    padding: 9px;
+  }
 }
 
 .app-footer__contact-address {
@@ -149,6 +162,8 @@ const hideContactSection = () => {
 
   p {
     font-weight: 900;
+    padding-right: 10px;
+    border-right: var(--color-text) 1px solid;
   }
 
   a {
@@ -156,11 +171,22 @@ const hideContactSection = () => {
   }
 }
 
+.app-footer__contact-address-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
 .app-footer__contact-exit {
   justify-self: end;
   cursor: pointer;
   color: white;
-  scale: 1.5;
-  margin: 20px;
+  margin-right: 10px;
+
+  @media (--breakpoint-desktop) {
+    scale: 1.5;
+    margin: 20px;
+  }
 }
 </style>