From c5c5e9d44acbb4bbba55755a299b59de6af0043e Mon Sep 17 00:00:00 2001
From: ivelov-vm <ivelov_vm@groupbwt.com>
Date: Mon, 20 Mar 2023 11:31:32 +0200
Subject: [PATCH] feat: add footer
---
src/components/FooterComponent.vue | 76 +++++++++++++++++++++++++++
src/components/svg/FacebookSvg.vue | 11 ++++
src/components/svg/InstagramSvg.vue | 20 +++++++
src/components/svg/LinkedInSvg.vue | 11 ++++
src/components/svg/MailSvg.vue | 23 ++++++++
src/components/svg/MessageLikeSvg.vue | 19 +++++++
src/components/svg/TelSvg.vue | 30 +++++++++++
src/pages/HomePage.vue | 5 +-
tailwind.config.js | 3 ++
9 files changed, 197 insertions(+), 1 deletion(-)
create mode 100644 src/components/FooterComponent.vue
create mode 100644 src/components/svg/FacebookSvg.vue
create mode 100644 src/components/svg/InstagramSvg.vue
create mode 100644 src/components/svg/LinkedInSvg.vue
create mode 100644 src/components/svg/MailSvg.vue
create mode 100644 src/components/svg/MessageLikeSvg.vue
create mode 100644 src/components/svg/TelSvg.vue
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
new file mode 100644
index 0000000..b8aacc9
--- /dev/null
+++ b/src/components/FooterComponent.vue
@@ -0,0 +1,76 @@
+<template>
+ <footer class="">
+ <h1 class="text-center text-[54px] leading-[4.5rem] relative">
+ Contacts
+ <FeatureSvg
+ class="inline absolute -top-3 -translate-x-[3px] text-blue-text"
+ ></FeatureSvg>
+ </h1>
+
+ <div class="mt-[46px] mx-auto grid grid-cols-1 min-[900px]:grid-cols-3 justify-between gap-x-[41px] gap-y-[20px] w-max">
+ <article class="pt-[19px] px-5 pb-8 bg-gray-200 rounded-lg">
+ <p class="flex justify-center"><MailSvg></MailSvg></p>
+ <BreakLineSvg class="w-[225px] mt-3 text-blue-300"></BreakLineSvg>
+ <p
+ class="text-center text-blue-text mt-[11px] text-lg leading-[1.625rem]"
+ >
+ <a href="mailto:ackecosystem@gmail.com"> ackecosystem@gmail.com </a>
+ </p>
+ </article>
+
+ <article class="pt-[19px] px-5 pb-8 bg-gray-200 rounded-lg">
+ <p class="flex justify-center"><TelSvg></TelSvg></p>
+ <BreakLineSvg class="w-[225px] mt-3 text-blue-300"></BreakLineSvg>
+ <p
+ class="text-center text-blue-text mt-[9px] text-lg leading-[1.625rem]"
+ >
+ <a href="tel:+1884654458"> +1 884 65 44 58 </a>
+ </p>
+ </article>
+
+ <article class="pt-[19px] px-5 pb-8 bg-gray-200 rounded-lg">
+ <p class="flex justify-center"><MessageLikeSvg></MessageLikeSvg></p>
+ <BreakLineSvg class="w-[225px] mt-3 text-blue-300"></BreakLineSvg>
+ <div class="mt-[14px] flex gap-8 justify-center items-center">
+ <a href="https://www.instagram.com" target="_blank">
+ <InstagramSvg></InstagramSvg>
+ </a>
+ <a href="https://www.facebook.com" target="_blank">
+ <FacebookSvg></FacebookSvg>
+ </a>
+ <a href="https://www.linkedin.com" target="_blank">
+ <LinkedInSvg></LinkedInSvg>
+ </a>
+ </div>
+ </article>
+ </div>
+
+ <p class="text-blue-line mt-[70px] mb-[21px] text-smleading-4 text-center">
+ Terms of Service <span class="text-black font-gilroy font-normal">and</span> Privacy Policy.
+ </p>
+ </footer>
+</template>
+
+<script>
+import MailSvg from "./svg/MailSvg.vue";
+import TelSvg from "./svg/TelSvg.vue";
+import MessageLikeSvg from "./svg/MessageLikeSvg.vue";
+import FeatureSvg from "./svg/FeatureSvg.vue";
+import BreakLineSvg from "./svg/BreakLineSvg.vue";
+import InstagramSvg from "./svg/InstagramSvg.vue";
+import FacebookSvg from "./svg/FacebookSvg.vue";
+import LinkedInSvg from "./svg/LinkedInSvg.vue";
+export default {
+ name: "FooterComponent",
+ components: {
+ FeatureSvg,
+ MailSvg,
+ BreakLineSvg,
+ TelSvg,
+ MessageLikeSvg,
+ InstagramSvg,
+ FacebookSvg,
+ LinkedInSvg,
+ },
+};
+</script>
diff --git a/src/components/svg/FacebookSvg.vue b/src/components/svg/FacebookSvg.vue
new file mode 100644
index 0000000..f3d366c
--- /dev/null
+++ b/src/components/svg/FacebookSvg.vue
@@ -0,0 +1,11 @@
+<template>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4 6.85V4.96002C11.4 4.24002 11.85 4.06002 12.21 4.06002H14.28V1H11.4C8.25 1 8.25 3.34001 8.25 4.78001V6.85H6V10H8.25V19H11.4V10H14.01L14.37 6.85H11.4Z" fill="#3B5998"/>
+</svg>
+</template>
+
+<script>
+export default {
+ name: "FacebookSvg",
+};
+</script>
diff --git a/src/components/svg/InstagramSvg.vue b/src/components/svg/InstagramSvg.vue
new file mode 100644
index 0000000..294fe30
--- /dev/null
+++ b/src/components/svg/InstagramSvg.vue
@@ -0,0 +1,20 @@
+<template>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.12503 2.22521C0.710527 3.69446 1.00003 5.25521 1.00003 9.99671C1.00003 13.9342 0.313027 17.8815 3.90853 18.8107C5.03128 19.0995 14.9793 19.0995 16.1005 18.8092C17.5975 18.423 18.8155 17.2087 18.982 15.0915C19.0053 14.796 19.0053 5.20271 18.9813 4.90121C18.8043 2.64596 17.416 1.34621 15.5868 1.08296C15.1675 1.02221 15.0835 1.00421 12.9325 1.00046C5.30278 1.00421 3.63028 0.664462 2.12503 2.22521Z" fill="url(#paint0_linear_1218_2658)"/>
+<path d="M9.99848 3.35407C7.27523 3.35407 4.68923 3.11182 3.70148 5.64682C3.29348 6.69382 3.35273 8.05357 3.35273 10.0006C3.35273 11.7091 3.29798 13.3148 3.70148 14.3536C4.68698 16.8901 7.29398 16.6471 9.99698 16.6471C12.6047 16.6471 15.2935 16.9186 16.2932 14.3536C16.702 13.2961 16.642 11.9566 16.642 10.0006C16.642 7.40407 16.7852 5.72782 15.526 4.46932C14.251 3.19432 12.5267 3.35407 9.99548 3.35407H9.99848ZM9.40298 4.55182C15.0835 4.54282 15.8065 3.91132 15.4075 12.6841C15.2657 15.7868 12.9032 15.4463 9.99923 15.4463C4.70423 15.4463 4.55198 15.2948 4.55198 9.99757C4.55198 4.63882 4.97198 4.55482 9.40298 4.55032V4.55182ZM13.546 5.65507C13.1057 5.65507 12.7487 6.01207 12.7487 6.45232C12.7487 6.89257 13.1057 7.24957 13.546 7.24957C13.9862 7.24957 14.3432 6.89257 14.3432 6.45232C14.3432 6.01207 13.9862 5.65507 13.546 5.65507ZM9.99848 6.58732C8.11373 6.58732 6.58598 8.11582 6.58598 10.0006C6.58598 11.8853 8.11373 13.4131 9.99848 13.4131C11.8832 13.4131 13.4102 11.8853 13.4102 10.0006C13.4102 8.11582 11.8832 6.58732 9.99848 6.58732ZM9.99848 7.78507C12.9272 7.78507 12.931 12.2161 9.99848 12.2161C7.07048 12.2161 7.06598 7.78507 9.99848 7.78507Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_1218_2658" x1="2.15954" y1="17.8508" x2="18.8886" y2="3.37194" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDD55"/>
+<stop offset="0.5" stop-color="#FF543E"/>
+<stop offset="1" stop-color="#C837AB"/>
+</linearGradient>
+</defs>
+</svg>
+
+</template>
+
+<script>
+export default {
+ name: "InstagramSvg",
+};
+</script>
diff --git a/src/components/svg/LinkedInSvg.vue b/src/components/svg/LinkedInSvg.vue
new file mode 100644
index 0000000..c98dd76
--- /dev/null
+++ b/src/components/svg/LinkedInSvg.vue
@@ -0,0 +1,11 @@
+<template>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.65 1.00002H2.35C1.63 1.00002 1 1.5427 1 2.26632V17.7337C1 18.4573 1.63 19 2.35 19H17.65C18.37 19 19 18.4573 19 17.7337V2.26632C19 1.63315 18.37 1.00002 17.65 1.00002ZM6.31 16.4673H3.61V7.87437H6.31V16.4673ZM4.96 6.60802C4.06 6.60802 3.43 5.88444 3.43 5.07037C3.43 4.2563 4.15 3.53267 4.96 3.53267C5.77 3.53267 6.49 4.2563 6.49 5.07037C6.58 5.9749 5.86 6.60802 4.96 6.60802ZM16.3 16.4673H13.6V12.3066C13.6 11.3116 13.6 10.0452 12.25 10.0452C10.9 10.0452 10.63 11.1307 10.63 12.3066V16.5578H7.93001V7.9648H10.45V9.14073C10.81 8.41711 11.71 7.78394 12.97 7.78394C15.67 7.78394 16.21 9.59299 16.21 11.8543V16.4673H16.3Z" fill="#0077B5"/>
+</svg>
+</template>
+
+<script>
+export default {
+ name: "LinkedInSvg",
+};
+</script>
diff --git a/src/components/svg/MailSvg.vue b/src/components/svg/MailSvg.vue
new file mode 100644
index 0000000..60a5abd
--- /dev/null
+++ b/src/components/svg/MailSvg.vue
@@ -0,0 +1,23 @@
+<template>
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1173_1068)">
+<path d="M24 2.10938V13.4531C24 14.6204 23.0579 15.5625 21.8906 15.5625H2.10938C0.942141 15.5625 0 14.6204 0 13.4531V2.10938C0 1.53286 0.239016 1.01245 0.604687 0.632812H0.61875L11.55 6.87656C11.6907 6.975 11.8454 7.03125 12 7.03125C12.1546 7.03125 12.3093 6.97505 12.45 6.87656L23.3812 0.632812H23.3953C23.761 1.01245 24 1.53286 24 2.10938Z" fill="#A8B5C0"/>
+<path d="M24 2.10938V13.4531C24 14.6204 23.0579 15.5625 21.8906 15.5625H12V7.03125C12.1547 7.03125 12.3093 6.97505 12.45 6.87656L23.3812 0.632812H23.3953C23.761 1.01245 24 1.53286 24 2.10938Z" fill="#9FA8B0"/>
+<path d="M23.381 0.61875V0.632812L12.4498 9.68906C12.3091 9.7875 12.1544 9.84375 11.9998 9.84375C11.8451 9.84375 11.6905 9.78755 11.5498 9.68906L0.61853 0.632812V0.61875C0.998265 0.239016 1.53264 0 2.10916 0H21.8904C22.4669 0 23.0013 0.239016 23.381 0.61875Z" fill="#DEDEE7"/>
+<path d="M17.625 11.3438C14.1375 11.3438 11.2969 14.1844 11.2969 17.6719C11.2969 21.1593 14.1375 24 17.625 24C21.1125 24 24 21.1593 24 17.6719C24 14.1844 21.1125 11.3438 17.625 11.3438Z" fill="#2967F0"/>
+<path d="M20.9765 18.164L18.8203 20.2733C18.5531 20.5546 18.1032 20.5546 17.8359 20.2733C17.6953 20.1468 17.625 19.964 17.625 19.7812C17.625 19.5984 17.6953 19.4156 17.836 19.2891L18.7359 18.375H14.8125C14.4187 18.375 14.1094 18.0656 14.1094 17.6718C14.1094 17.278 14.4187 16.9687 14.8125 16.9687H18.7359L17.8359 16.0546C17.6953 15.9281 17.625 15.7453 17.625 15.5625C17.625 15.3796 17.6953 15.1968 17.836 15.0703C18.1032 14.7891 18.5531 14.7891 18.8203 15.0703L20.9766 17.1797C21.2578 17.4469 21.2578 17.8968 20.9765 18.164Z" fill="white"/>
+<path d="M20.9765 18.164L18.8203 20.2733C18.5531 20.5546 18.1032 20.5546 17.8359 20.2733C17.6953 20.1468 17.625 19.964 17.625 19.7812C17.625 19.5984 17.6953 19.4156 17.836 19.2891L18.7359 18.375H17.625V16.9687H18.7359L17.8359 16.0546C17.6953 15.9281 17.625 15.7453 17.625 15.5625C17.625 15.3796 17.6953 15.1968 17.836 15.0703C18.1032 14.7891 18.5531 14.7891 18.8203 15.0703L20.9766 17.1797C21.2578 17.4469 21.2578 17.8968 20.9765 18.164Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1173_1068">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</template>
+
+<script>
+export default {
+ name: "MailSvg",
+};
+</script>
diff --git a/src/components/svg/MessageLikeSvg.vue b/src/components/svg/MessageLikeSvg.vue
new file mode 100644
index 0000000..26ee89d
--- /dev/null
+++ b/src/components/svg/MessageLikeSvg.vue
@@ -0,0 +1,19 @@
+<template>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1173_2649)">
+<path d="M2 3C2 2.44772 2.44771 2 3 2H21C21.5523 2 22 2.44772 22 3V18.2C22 18.7523 21.5523 19.2 21 19.2H16.9368C16.0464 19.2 15.2021 19.5955 14.6321 20.2794L12.7682 22.5161C12.3684 22.9958 11.6316 22.9958 11.2318 22.5161L9.36791 20.2794C8.79793 19.5955 7.95359 19.2 7.06325 19.2H3C2.44771 19.2 2 18.7523 2 18.2V3Z" fill="#DEDEE7" stroke="#9FA8B0" stroke-width="2"/>
+<path d="M14.5002 6.25C13.4502 6.25 12.5252 6.775 12.0002 7.6C11.4752 6.775 10.5502 6.25 9.50024 6.25C7.85024 6.25 6.50024 7.6 6.50024 9.25C6.50024 12.225 12.0002 15.25 12.0002 15.25C12.0002 15.25 17.5002 12.25 17.5002 9.25C17.5002 7.6 16.1502 6.25 14.5002 6.25Z" fill="#2967F0"/>
+</g>
+<defs>
+<clipPath id="clip0_1173_2649">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</template>
+
+<script>
+export default {
+ name: "MessageLikeSvg",
+};
+</script>
diff --git a/src/components/svg/TelSvg.vue b/src/components/svg/TelSvg.vue
new file mode 100644
index 0000000..0c0d97e
--- /dev/null
+++ b/src/components/svg/TelSvg.vue
@@ -0,0 +1,30 @@
+<template>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1173_911)">
+<path d="M22.3688 21.6375L16.4063 15.675C16.1391 15.3938 15.6891 15.3938 15.4219 15.661C14.5922 16.4906 13.2563 16.4906 12.4266 15.675L8.32503 11.5418C7.50936 10.712 7.50936 9.3762 8.3391 8.54647C8.60628 8.27928 8.60628 7.82928 8.32503 7.5621L2.36254 1.59961C2.09536 1.31836 1.64536 1.31836 1.37817 1.59961C0.492236 2.47148 9.60886e-05 4.0746 9.60886e-05 6.08554C-0.0139664 9.50272 1.51416 14.7047 5.46571 18.6563C9.41727 22.6078 14.4516 24 17.8547 24C17.8547 24 17.8688 24 17.8829 24C19.8939 24 21.497 23.5079 22.3689 22.6219C22.6501 22.3547 22.6501 21.9047 22.3688 21.6375Z" fill="#DEDEE7"/>
+<path d="M22.3688 21.6373C22.6501 21.9045 22.6501 22.3545 22.3688 22.6217C21.497 23.5076 19.8938 23.9997 17.8829 23.9997C17.8688 23.9997 17.8547 23.9997 17.8547 23.9997C14.4517 23.9997 9.41725 22.6075 5.4657 18.656L10.4438 13.6919L12.4266 15.6747C13.2563 16.4903 14.5922 16.4903 15.4219 15.6607C15.6891 15.3935 16.1391 15.3935 16.4063 15.6747L22.3688 21.6373Z" fill="#DEDEE7"/>
+<path d="M9.3234 4.58083L5.34367 0.6011C4.55617 -0.200367 3.14992 -0.200367 2.34836 0.6011L1.37805 1.58547L8.33898 8.5464L9.32335 7.57609V7.56202C10.153 6.74645 10.153 5.3965 9.3234 4.58083Z" fill="#9FA8B0"/>
+<path d="M23.3671 18.6566L19.3875 14.6769C18.6 13.8753 17.1937 13.8753 16.3922 14.6769L15.4219 15.6612L22.3828 22.6222L23.3671 21.6518C23.3671 21.6378 23.3671 21.6378 23.3671 21.6378C24.1969 20.8222 24.1969 19.4722 23.3671 18.6566Z" fill="#9FA8B0"/>
+<path d="M24.0011 10.5469C24.0011 11.4749 22.5948 11.4749 22.5948 10.5469C22.5948 8.02963 21.5683 5.73744 19.923 4.07807C18.2636 2.43281 15.9715 1.40625 13.4542 1.40625C12.5262 1.40625 12.5262 0 13.4542 0C16.3652 0 19.0089 1.1812 20.9073 3.0937C22.8199 4.99218 24.0011 7.63592 24.0011 10.5469Z" fill="#2967F0"/>
+<path d="M21.1875 10.5469C21.1875 11.4749 19.7813 11.4749 19.7813 10.5469C19.7813 8.80302 19.0641 7.21405 17.925 6.0749C16.7859 4.93584 15.1969 4.21875 13.4531 4.21875C12.5251 4.21875 12.5251 2.8125 13.4531 2.8125C15.5907 2.8125 17.5172 3.67031 18.9234 5.07656C20.3297 6.48281 21.1875 8.40932 21.1875 10.5469Z" fill="#2967F0"/>
+<path d="M18.375 10.5469C18.375 11.4749 16.9688 11.4749 16.9688 10.5469C16.9688 9.57656 16.5751 8.70468 15.9422 8.05776C15.2953 7.42495 14.4234 7.03125 13.4531 7.03125C12.5251 7.03125 12.5251 5.625 13.4531 5.625C14.8172 5.625 16.0407 6.17339 16.9266 7.07339C17.8266 7.95932 18.375 9.18276 18.375 10.5469Z" fill="#2967F0"/>
+<path d="M15.5625 10.5469C15.5625 11.4749 14.1563 11.4749 14.1563 10.5469C14.1563 10.35 14.0859 10.1671 13.9454 10.0546C13.8328 9.91406 13.65 9.84375 13.4531 9.84375C12.5251 9.84375 12.5251 8.4375 13.4531 8.4375C14.0297 8.4375 14.5641 8.67652 14.9438 9.05625C15.3235 9.43589 15.5625 9.97026 15.5625 10.5469Z" fill="#2967F0"/>
+<path d="M14.1562 10.5473C14.1562 10.3504 14.0859 10.1675 13.9453 10.055L14.9437 9.05664C15.3234 9.43628 15.5624 9.97065 15.5624 10.5473C15.5624 11.4753 14.1562 11.4753 14.1562 10.5473Z" fill="#2967F0"/>
+<path d="M16.9688 10.5472C16.9688 9.5769 16.5751 8.70502 15.9423 8.0581L16.9266 7.07373C17.8266 7.95967 18.375 9.1831 18.375 10.5472C18.375 11.4753 16.9688 11.4753 16.9688 10.5472Z" fill="#2967F0"/>
+<path d="M19.7812 10.5465C19.7812 8.80268 19.064 7.21371 17.9249 6.07456L18.9234 5.07617C20.3297 6.48242 21.1875 8.40898 21.1875 10.5465C21.1874 11.4746 19.7812 11.4746 19.7812 10.5465Z" fill="#2967F0"/>
+<path d="M23.9999 10.5469C23.9999 11.475 22.5937 11.475 22.5937 10.5469C22.5937 8.02968 21.5672 5.73749 19.9219 4.07812L20.9062 3.09375C22.8187 4.99223 23.9999 7.63598 23.9999 10.5469Z" fill="#2967F0"/>
+</g>
+<defs>
+<clipPath id="clip0_1173_911">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+</template>
+
+<script>
+export default {
+ name: "TelSvg",
+};
+</script>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 7b5534a..575c692 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -149,7 +149,8 @@
class="absolute bg-blue-400 blur-[170px] rounded-[190px] w-[190px] h-[190px] z-0 -right-[133px] -bottom-[136px]"
></div>
</section>
- <footer class="mt-10"></footer>
+
+ <FooterComponent class="mt-[112px]"></FooterComponent>
</div>
</template>
@@ -159,6 +160,7 @@ import ReviewComponent from "../components/ReviewComponent.vue";
import ServiceCard from "../components/ServiceCard.vue";
import ServiceQuestionCard from "../components/ServiceQuestionCard.vue";
import TeamMember from "../components/TeamMember.vue";
+import FooterComponent from "../components/FooterComponent.vue";
import ReviewsMixin from "../components/mixins/ReviewsMixin.vue";
import ServicesMixin from "../components/mixins/ServicesMixin.vue";
@@ -351,6 +353,7 @@ export default {
ServiceQuestionCard,
FeatureLeftSvg,
TeamMember,
+ FooterComponent
},
mixins: [ReviewsMixin, ServicesMixin, TeamMixin],
};
diff --git a/tailwind.config.js b/tailwind.config.js
index c7618dc..1030545 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,8 +17,10 @@ module.exports = {
transparent: "transparent",
current: "currentColor",
white: "#ffffff",
+ black: "#000000",
blue: {
200: "#DBEBFF",
+ 300: "#A3ABF4",
400: "#3060C9",
500: "#3b82f6",
600: "#2563eb",
@@ -29,6 +31,7 @@ module.exports = {
question: "rgba(41, 103, 240, 0.8)",
},
gray: {
+ 200:"#F9FBFF",
bg: "#F2F6FF",
300: "rgb(0 0 0 / 35%)",
DEFAULT: "#757575",
--
GitLab