Skip to content

Commit

Permalink
feat: add LinkedIn icon "Any Questions?" section (#24)
Browse files Browse the repository at this point in the history
* feat: add LinkedIn icon "Any Questions?" section

* chore: add more space for buttons

---------

Co-authored-by: JCNoguera <[email protected]>
  • Loading branch information
begonaalvarezd and VmMad authored Dec 1, 2023
1 parent 3a56ac8 commit a08196a
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 6 deletions.
1 change: 1 addition & 0 deletions src/components/icons/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
6 changes: 4 additions & 2 deletions src/components/icons/index.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
Government,
Trust,
Visibility,
Accuracy
Accuracy,
LinkedIn
} from "./index";
export let name: string;
Expand All @@ -34,7 +35,8 @@
friendship: Friendship,
dataQuality: DataQuality,
finance: Finance,
accuracy: Accuracy
accuracy: Accuracy,
linkedin: LinkedIn
};
</script>

Expand Down
12 changes: 12 additions & 0 deletions src/components/icons/linkedin.svelte
Original file line number Diff line number Diff line change
@@ -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>
34 changes: 30 additions & 4 deletions src/sections/shared/haveAnyQuestions.svelte
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -25,34 +26,59 @@
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">
{HEADING_FAQS.title}
</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}
<div class="w-1/2 uppercase mx-auto mb-6 last:mb-0 md:mb-0">
<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 />
</div>
{/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>
Expand All @@ -62,7 +88,7 @@
<style lang="scss">
.buttons {
@screen lg {
max-width: 412px;
max-width: 468px;
}
}
</style>

0 comments on commit a08196a

Please sign in to comment.