From a08196ad34a3d11dd9f184927f7822c201856224 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20=C3=81lvarez=20de=20la=20Cruz?=
 <balvarez@boxfish.studio>
Date: Fri, 1 Dec 2023 12:20:13 +0100
Subject: [PATCH] feat: add LinkedIn icon "Any Questions?" section (#24)

* feat: add LinkedIn icon "Any Questions?" section

* chore: add more space for buttons

---------

Co-authored-by: JCNoguera <jcnoguera@boxfish.studio>
---
 src/components/icons/index.js               |  1 +
 src/components/icons/index.svelte           |  6 ++--
 src/components/icons/linkedin.svelte        | 12 ++++++++
 src/sections/shared/haveAnyQuestions.svelte | 34 ++++++++++++++++++---
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/components/icons/linkedin.svelte

diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index 3d2bf18..44782f0 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -13,3 +13,4 @@ export { default as Government } from "./government.svelte";
 export { default as Trust } from "./trust.svelte";
 export { default as Visibility } from "./visibility.svelte";
 export { default as Accuracy } from "./accuracy.svelte";
+export { default as LinkedIn } from "./linkedin.svelte";
diff --git a/src/components/icons/index.svelte b/src/components/icons/index.svelte
index beec552..725ed8f 100644
--- a/src/components/icons/index.svelte
+++ b/src/components/icons/index.svelte
@@ -14,7 +14,8 @@
         Government,
         Trust,
         Visibility,
-        Accuracy
+        Accuracy,
+        LinkedIn
     } from "./index";
 
     export let name: string;
@@ -34,7 +35,8 @@
         friendship: Friendship,
         dataQuality: DataQuality,
         finance: Finance,
-        accuracy: Accuracy
+        accuracy: Accuracy,
+        linkedin: LinkedIn
     };
 </script>
 
diff --git a/src/components/icons/linkedin.svelte b/src/components/icons/linkedin.svelte
new file mode 100644
index 0000000..5fdfca4
--- /dev/null
+++ b/src/components/icons/linkedin.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let width = 19;
+    export let height = 19;
+    export let fill = "#7C7A9F";
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} fill="none" viewBox="0 0 16 16">
+    <path
+        {fill}
+        d="M13.633 13.634h-2.37V9.92c0-.886-.017-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V5.998h2.276v1.043h.032a2.495 2.495 0 0 1 2.245-1.233c2.403 0 2.846 1.58 2.846 3.636v4.19ZM3.56 4.954a1.376 1.376 0 1 1 0-2.751 1.376 1.376 0 0 1 0 2.751Zm1.185 8.68H2.372V5.998h2.373v7.636ZM14.815 0H1.18A1.168 1.168 0 0 0 0 1.154v13.692A1.168 1.168 0 0 0 1.18 16h13.635A1.17 1.17 0 0 0 16 14.846V1.154A1.17 1.17 0 0 0 14.815 0"
+    />
+</svg>
diff --git a/src/sections/shared/haveAnyQuestions.svelte b/src/sections/shared/haveAnyQuestions.svelte
index 2ebf38d..9defdd4 100644
--- a/src/sections/shared/haveAnyQuestions.svelte
+++ b/src/sections/shared/haveAnyQuestions.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     import type { Button as ButtonType } from "$lib/types/components";
-    import { Button } from "$components";
+    import { Button, Icon } from "$components";
     import type { Heading } from "$lib/types/sections";
     import { page } from "$app/stores";
+    import type { ComponentProps } from "svelte";
 
     export let id: string;
 
@@ -25,13 +26,28 @@
         title: "Still Have Questions?",
         description: "Send us an email and we will reply as soon as we can."
     };
+
+    const LINKEDIN_SOCIAL: {
+        href: string;
+        icon: ComponentProps<Icon>;
+    } = {
+        href: "https://www.linkedin.com/company/trade-and-logistics-information-pipeline/",
+        icon: {
+            name: "linkedin",
+            fill: "#000",
+            height: 24,
+            width: 24
+        }
+    };
 </script>
 
 <section class="py-20 bg-blue-300" {id}>
     <div class="container flex text-white justify-between flex-col text-center lg:flex-row lg:text-left">
-        <div class="w-full lg:mr-7">
+        <div class="py-20 w-full lg:mr-7">
             {#if $page.url.pathname != "/faq"}
-                <h1 class="capitalize mb-6 flex text-36 md:text-48 justify-center lg:justify-start">{HEADING.title}</h1>
+                <h1 class="capitalize mb-6 flex text-36 md:text-48 justify-center lg:justify-start">
+                    {HEADING.title}
+                </h1>
                 <p>{HEADING.description}</p>
             {:else}
                 <h1 class="capitalize mb-6 flex text-36 md:text-48 justify-center lg:justify-start">
@@ -39,6 +55,7 @@
                 </h1>
                 <p>{HEADING_FAQS.description}</p>
             {/if}
+
             <div class="buttons w-full md:flex gap-x-7 mt-6 md:mt-10 lg:mt-28">
                 {#if $page.url.pathname != "/faq"}
                     {#each BUTTONS as button}
@@ -46,6 +63,14 @@
                             <Button classes="text-16 font-bold h-14" {...button} secondary />
                         </div>
                     {/each}
+                    <a
+                        href={LINKEDIN_SOCIAL.href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="w-1/2 md:w-auto flex p-4 bg-white rounded-md mx-auto justify-center mb-6 last:mb-0 md:mb-0 hover:opacity-80 transition-opacity"
+                    >
+                        <Icon {...LINKEDIN_SOCIAL.icon} />
+                    </a>
                 {:else}
                     <div class="w-1/2 uppercase mx-auto lg:mx-0 mb-6 last:mb-0 md:mb-0">
                         <Button classes="text-16 font-bold h-14" {...BUTTONS[1]} secondary />
@@ -53,6 +78,7 @@
                 {/if}
             </div>
         </div>
+
         <div class="w-full lg:max-w-md flex relative object-scale-down items-center mt-12 lg:mt-0 justify-center">
             <img src="./assets/haveAnyQuestions.png" alt="TLIP in Africa" />
         </div>
@@ -62,7 +88,7 @@
 <style lang="scss">
     .buttons {
         @screen lg {
-            max-width: 412px;
+            max-width: 468px;
         }
     }
 </style>