From a93cc289899e352552f9de25944da05bb415a4f5 Mon Sep 17 00:00:00 2001
From: Arne <hello@cptarn.com>
Date: Wed, 26 Jul 2023 22:43:09 +0200
Subject: [PATCH] Added icons on contact

---
 src/app/app.component.html               | 14 +++++------
 src/app/app.component.scss               | 31 +++++++++++++++++++++++-
 src/app/collapse/collapse.component.scss |  5 ++--
 src/index.html                           |  2 +-
 src/styles.scss                          | 18 ++++++++++++++
 5 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2f96930..62ffbbd 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -158,7 +158,7 @@
       <div><span class="circle"></span><p>We overlopen de voor- en nadelen van een éénmanszaak ten opzichte van een vennootschap, en wat de fiscale en boekhoudkundige gevolgen zijn van deze keuze.</p></div>
       <div><span class="circle"></span><p>Ons kantoor en onze werkmethodes worden voorgesteld en uw vragen over de verdere samenwerking zullen worden beantwoord.</p></div>
       <div><span class="circle"></span><p>Kleine dossiers met een beperkt aantal te boeken documenten krijgen de mogelijkheid om zelf de aan- en verkopen te registreren via eenvoudige Excel bestanden.</p></div>
-      <div><span class="circle"></span><p>Interesse? Op onze <a href="#contact" alt="contact">contact pagina</a> vindt u onze contactgegevens./p></div>
+      <div><span class="circle"></span><p>Interesse? <span>Op onze <a href="#contact" alt="contact">contact pagina</a> vindt u onze contactgegevens</span></p></div>
     </div>
   </div>
   <img src="assets/b-images/customer.png" alt="klant">
@@ -224,12 +224,12 @@
 <div class="wrapper wrapper-contact">
   <div class="text">
     <h2>Contact</h2>
-    <p>Antwerpsesteenweg 271, 9040 Gent (Sint-Amandsberg)</p>
-    <p>Tel: 09/ 228.43.22</p>
-    <p>Gsm : 0475/ 70.78.87 (Robert Sinia)</p>
-    <p>E-mail: robert@sinia.be frank@sinia.be</p>
-    <p>Linkedin</p>
-    <p>Homepage</p>
+    <a href="https://www.google.com/maps?ll=51.06363,3.751164&z=13&t=m&hl=en&gl=BE&mapclient=embed&cid=4544505274712951366" target="_blank"><span class="fa-solid fa-location-pin"></span>Antwerpsesteenweg 271, 9040 Gent (Sint-Amandsberg)</a>
+    <a href="tel:+3292284322"><span class="fa-solid fa-phone"></span>09/228.43.22</a>
+    <a href="tel:+32475707887"><span class="fa-solid fa-mobile-screen"></span>0475/70.78.87 (Robert Sinia)</a>
+    <a href="mailto:robert@sinia.be,frank@sinia.be"><span class="fa-solid fa-envelope"></span>robert@sinia.be / frank@sinia.be</a>
+    <a href="https://www.linkedin.com/company/sinia-accountants-en-belastingconsulenten-bvba/about/" target="_blank"><span class="fa-brands fa-linkedin"></span>Linkedin</a>
+    <a href="/"><span class="fa-solid fa-home"></span>Homepage</a>
   </div>
   <div class="google-maps">
     <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d26011.531706816328!2d3.7327019887977553!3d51.06778304400319!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c376cf113b3e6f%3A0x3f11537833278a46!2sSinia%20Accountants%20En%20Belastingconsulenten!5e0!3m2!1sen!2sbe!4v1690233562850!5m2!1sen!2sbe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="google maps"></iframe>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index ef3b4ac..955e392 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -63,7 +63,7 @@ h2 {
 .wrapper {
   max-width: 120rem;
   margin: 0 auto;
-  padding: 2rem 2rem;
+  padding: 2rem 2rem 6rem 2rem;
 }
 
 .alternate {
@@ -96,6 +96,11 @@ h2 {
 
 #klantworden {
   margin-bottom: 4rem;
+
+  p + h2 {
+    margin-top: 10rem;
+  }
+
   .timeline {
     border-left: 0.2rem solid $primary-color;
     padding: 1rem 3rem 2rem 3rem;
@@ -125,6 +130,14 @@ h2 {
       margin-left: -5rem;
 
     }
+
+    p > span {
+      display: block;
+
+      a {
+        color: $secondary-color;
+      }
+    }
   }
 }
 
@@ -147,6 +160,22 @@ h2 {
   display: flex;
   padding: 2rem 0;
 
+  a {
+    text-decoration: none;
+  }
+
+  span {
+    color: $secondary-color;
+    margin-right: 3rem;
+    width: 1.8rem;
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
   div {
     width: 50%;
   }
diff --git a/src/app/collapse/collapse.component.scss b/src/app/collapse/collapse.component.scss
index 393f35a..3c3d085 100644
--- a/src/app/collapse/collapse.component.scss
+++ b/src/app/collapse/collapse.component.scss
@@ -15,6 +15,7 @@
   display: flex;
   justify-content: space-between;
   padding: 2rem;
+  cursor: pointer;
 
   h3, h3 + span {
     color: $primary-color;
@@ -39,14 +40,14 @@ span {
 
 .collapse {
   max-height: 50rem;
-  transition: max-height 0.5s ease;
+  transition: max-height 0.5s ease-in;
   overflow: hidden;
 }
 
 .collapsed {
   max-height: 0rem;
   overflow: hidden;
-  transition: max-height 0.5s ease;
+  transition: max-height 0.5s ease-out;
 }
 
 .collapse-container {
diff --git a/src/index.html b/src/index.html
index 3ccc5df..3c527f8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,7 +18,7 @@
 
     body *{
       font-family: 'Inter';
-      font-size: 1.6rem;
+      font-size: 2rem;
     }
 
     body {
diff --git a/src/styles.scss b/src/styles.scss
index 7d7870a..d8bc9ff 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -5,3 +5,21 @@ $third-color: #00AAFF;
 $white: #ffffff;
 $light: #F4F6FC;
 $text: #373E56;
+
+a, p, span, li {
+  color: $text;
+  text-decoration: none;
+}
+
+li {
+  text-decoration: none;
+  margin-bottom: 0.5rem;
+
+  &::marker {
+    color: $secondary-color;
+  }
+}
+
+ul {
+  margin-top: 0.25rem;
+}