From 38ab5d6d86da9c34310ef454d149e428868405b4 Mon Sep 17 00:00:00 2001
From: Kagameow <kagami.404@gmail.com>
Date: Mon, 8 Jul 2024 15:50:41 +0200
Subject: [PATCH] contact us section

---
 src/assets/cross.svg                 |   4 +
 src/layout/AppFooter.vue             | 108 +++++++++++++++++++++++++--
 src/layout/assets/footer-full-bg.svg |   9 +++
 3 files changed, 114 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/cross.svg
 create mode 100644 src/layout/assets/footer-full-bg.svg

diff --git a/src/assets/cross.svg b/src/assets/cross.svg
new file mode 100644
index 0000000..4700807
--- /dev/null
+++ b/src/assets/cross.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="10.6067" width="1" height="15" transform="rotate(45 10.6067 0)" fill="white"/>
+<rect width="1" height="15" transform="matrix(-0.707107 0.707107 0.707107 0.707107 0.707031 0)" fill="white"/>
+</svg>
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index 6cc533b..4c26e87 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -1,13 +1,52 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import IconCross from '@/assets/cross.svg';
+
+const isContactSectionVisible = ref(false);
+const showContactSection = () => {
+  isContactSectionVisible.value = true;
+};
+const hideContactSection = () => {
+  isContactSectionVisible.value = false;
+};
+</script>
 
 <template>
   <footer class="app-footer">
-    <section class="app-footer__side">
-      <RouterLink to="/">Our Customers</RouterLink>
-    </section>
-    <section class="app-footer__side">
-      <RouterLink to="/services">Our service</RouterLink>
-    </section>
+    <template v-if="!isContactSectionVisible">
+      <section class="app-footer__side">
+        <RouterLink to="/">Our Customers</RouterLink>
+      </section>
+      <section class="app-footer__side app-footer__side--button">
+        <button @click="showContactSection">Contact Us</button>
+      </section>
+      <section class="app-footer__side">
+        <RouterLink to="/services">Our service</RouterLink>
+      </section>
+    </template>
+    <template v-else>
+      <section class="app-footer__contact-section">
+        <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
+            </a>
+          </p>
+          <p>
+            Phone number:
+            <a href="tel:0612345678">0612345678</a>
+          </p>
+        </address>
+        <IconCross
+          class="app-footer__contact-exit"
+          scale="2"
+          @click="hideContactSection"
+        />
+      </section>
+    </template>
   </footer>
 </template>
 
@@ -17,6 +56,7 @@
   align-items: center;
   justify-content: center;
   gap: 50px;
+  height: 80px;
 }
 
 .app-footer__side {
@@ -26,8 +66,62 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  a {
+    color: var(--color-text);
+  }
+}
+
+.app-footer__side--button {
+  button {
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+  }
+}
+
+.app-footer__contact-section {
+  background: url('assets/footer-full-bg.svg') top no-repeat;
+  width: 700px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.app-footer__contact-section-placeholder {
+  margin: 20px;
+  padding: 9px;
+}
+
+.app-footer__contact-address {
+  display: flex;
+  flex-direction: column;
+  font-style: normal;
+  align-items: center;
+
+  h3 {
+    font-size: 1rem;
+    font-weight: 900;
+    margin-bottom: 5px;
+    margin-top: 5px;
+  }
+
+  p {
+    font-weight: 600;
+  }
+
   a {
     color: var(--color-text);
   }
 }
+
+.app-footer__contact-exit {
+  justify-self: end;
+  cursor: pointer;
+  color: white;
+  scale: 1.5;
+  margin: 20px;
+}
 </style>
diff --git a/src/layout/assets/footer-full-bg.svg b/src/layout/assets/footer-full-bg.svg
new file mode 100644
index 0000000..1905925
--- /dev/null
+++ b/src/layout/assets/footer-full-bg.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="705" height="49" viewBox="0 0 705 49" fill="none">
+    <path d="M2 48L8.69592 5.3792C9.00158 3.4336 10.678 2 12.6474 2H690.489C692.395 2 694.036 3.34435 694.411 5.21273L703 48" stroke="url(#paint0_linear_353_937)" stroke-width="3"/>
+    <defs>
+        <linearGradient id="paint0_linear_353_937" x1="352.5" y1="2" x2="352.508" y2="35.3782" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E0E0E0"/>
+            <stop offset="1" stop-color="#303030"/>
+        </linearGradient>
+    </defs>
+</svg>