@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/composables/useNavigation/index.ts

@@ -0,0 +1,97 @@
+import { isRef, shallowRef } from 'vue';
+import Cookies from 'js-cookie';
+
+import type { Component, MaybeRef } from 'vue';
+import type { NavigationItem, Logo } from './index.d';
+
+const state = {
+  navigationItems: shallowRef<NavigationItem[]>([]),
+  mainMenuOpen: shallowRef<boolean>(false),
+  expanded: shallowRef<boolean>(Cookies.get('navigation-expanded') === 'true'),
+  mobileMenuOpen: shallowRef<boolean>(false),
+  mobileMenuOpenTransition: shallowRef<boolean>(false),
+  navigationComponent: shallowRef<'a' | Component>('a'),
+  logo: shallowRef<Logo | null>(null),
+  avatar: shallowRef<Component | null>(null),
+  contactRoute: shallowRef<string | null>(),
+  contactIcon: shallowRef<Component | string>('?'),
+};
+
+export function useNavigation() {
+  function setNavigationItems(items: MaybeRef<NavigationItem[]>): void {
+    state.navigationItems.value = isRef(items) ? items?.value : items;
+  }
+
+  function setNavigationComponent(value: 'a' | Component): void {
+    state.navigationComponent.value = value;
+  }
+
+  function setLogo(logo: Logo): void {
+    state.logo.value = logo;
+  }
+
+  function setAvatar(avatar: Component): void {
+    state.avatar.value = avatar;
+  }
+
+  function openMainMenu(): void {
+    state.mainMenuOpen.value = true;
+  }
+
+  function expand(expanded: boolean = true): void {
+    Cookies.set('navigation-expanded', `${expanded}`);
+
+    state.expanded.value = expanded;
+  }
+
+  function toggleExpand(): void {
+    expand(!state.expanded.value);
+  }
+
+  function closeMainMenu(): void {
+    state.mainMenuOpen.value = false;
+  }
+
+  function toggleMainMenu(): void {
+    state.mainMenuOpen.value = !state.mainMenuOpen.value;
+  }
+
+  function openMobileMenu(): void {
+    state.mobileMenuOpen.value = true;
+    state.mobileMenuOpenTransition.value = true;
+  }
+
+  function closeMobileMenu(): void {
+    state.mobileMenuOpen.value = false;
+
+    setTimeout(() => {
+      state.mobileMenuOpenTransition.value = false;
+    }, 100);
+  }
+
+  function toggleMobileMenu(): void {
+    if (state.mobileMenuOpen.value) {
+      return closeMobileMenu();
+    }
+
+    return openMobileMenu();
+  }
+
+  return {
+    ...state,
+    setNavigationItems,
+    setNavigationComponent,
+    setLogo,
+    setAvatar,
+    openMainMenu,
+    closeMainMenu,
+    toggleMainMenu,
+    openMobileMenu,
+    closeMobileMenu,
+    toggleMobileMenu,
+    expand,
+    toggleExpand,
+  };
+}
+
+export type { NavigationItem, Logo };

package/src/modules/icons/BuildingCircleCheck.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg
+    width="26"
+    height="21"
+    viewBox="0 0 26 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.375 0H13.625C14.6406 0 15.5 0.859375 15.5 1.875V9.10156C13.9375 10.3516 13 12.2656 13 14.375C13 16.3281
+        13.7812 18.0859 15.0703 19.3359C14.7188 19.7656 14.2109 20 13.625 20H9.875V16.875C9.875 15.8594 9.01562 15 8
+        15C6.94531 15 6.125 15.8594 6.125 16.875V20H2.375C1.32031 20 0.5 19.1797 0.5 18.125V1.875C0.5 0.859375 1.32031
+        0 2.375 0ZM3 9.375V10.625C3 10.9766 3.27344 11.25 3.625 11.25H4.875C5.1875 11.25 5.5 10.9766 5.5
+        10.625V9.375C5.5 9.0625 5.1875 8.75 4.875 8.75H3.625C3.27344 8.75 3 9.0625 3 9.375ZM7.375 8.75C7.02344 8.75 6.75
+        9.0625 6.75 9.375V10.625C6.75 10.9766 7.02344 11.25 7.375 11.25H8.625C8.9375 11.25 9.25 10.9766 9.25
+        10.625V9.375C9.25 9.0625 8.9375 8.75 8.625 8.75H7.375ZM10.5 9.375V10.625C10.5 10.9766 10.7734 11.25 11.125
+        11.25H12.375C12.6875 11.25 13 10.9766 13 10.625V9.375C13 9.0625 12.6875 8.75 12.375 8.75H11.125C10.7734 8.75
+        10.5 9.0625 10.5 9.375ZM3.625 3.75C3.27344 3.75 3 4.0625 3 4.375V5.625C3 5.97656 3.27344 6.25 3.625
+        6.25H4.875C5.1875 6.25 5.5 5.97656 5.5 5.625V4.375C5.5 4.0625 5.1875 3.75 4.875 3.75H3.625ZM6.75
+        4.375V5.625C6.75 5.97656 7.02344 6.25 7.375 6.25H8.625C8.9375 6.25 9.25 5.97656 9.25 5.625V4.375C9.25 4.0625
+        8.9375 3.75 8.625 3.75H7.375C7.02344 3.75 6.75 4.0625 6.75 4.375ZM11.125 3.75C10.7734 3.75 10.5 4.0625 10.5
+        4.375V5.625C10.5 5.97656 10.7734 6.25 11.125 6.25H12.375C12.6875 6.25 13 5.97656 13 5.625V4.375C13 4.0625
+        12.6875 3.75 12.375 3.75H11.125ZM25.5 14.375C25.5 16.4062 24.4062 18.2422 22.6875 19.2578C20.9297 20.2734
+        18.7812 20.2734 17.0625 19.2578C15.3047 18.2422 14.25 16.4062 14.25 14.375C14.25 12.3828 15.3047 10.5469 17.0625
+        9.53125C18.7812 8.51562 20.9297 8.51562 22.6875 9.53125C24.4062 10.5469 25.5 12.3828 25.5 14.375ZM22.4922
+        12.6953C22.2578 12.4609 21.8281 12.4609 21.5938 12.6953L19.25 15.0781L18.1172 13.9453C17.8828 13.7109 17.4531
+        13.7109 17.2188 13.9453C16.9844 14.1797 16.9844 14.6094 17.2188 14.8438L18.7812 16.4062C19.0156 16.6406 19.4453
+        16.6406 19.6797 16.4062L22.4922 13.5938C22.7266 13.3594 22.7266 12.9297 22.4922 12.6953Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/BuildingCircleXmark.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 512"
+  >
+    <path
+      d="M48 0C21.5 0 0 21.5 0 48L0 464c0 26.5 21.5 48 48 48l96 0 0-80c0-26.5 21.5-48 48-48s48 21.5 48 48l0 80 96 0c15.1 0 28.5-6.9
+        37.3-17.8C340.4 462.2 320 417.5 320 368c0-54.7 24.9-103.5 64-135.8L384 48c0-26.5-21.5-48-48-48L48 0zM64 240c0-8.8 7.2-16
+        6-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm112-16l32 0c8.8 0 16 7.2 16 16l0 32c0
+        8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0
+        8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM80 96l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8
+        0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8
+        0-16-7.2-16-16l0-32zM272 96l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM496
+        512a144 144 0 1 0 0-288 144 144 0 1 0 0 288zm59.3-180.7L518.6 368l36.7 36.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L496 390.6l-36.7
+        36.7c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L473.4 368l-36.7-36.7c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L496
+        345.4l36.7-36.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/CarsIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    width="26"
+    height="20"
+    viewBox="0 0 26 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.85156 1.875C5.46094 1.875 5.10938 2.14844 4.99219 2.5L4.32812 4.375H12.8828L12.2188 2.5C12.1016 2.14844 11.75 1.875 11.3594
+        1.875H5.85156ZM2.10156 5L3.23438 1.875C3.625 0.78125 4.67969 0 5.85156 0H11.3594C12.5312 0 13.5859 0.78125 14.0156 1.875L15.1094
+        5H14.6016C13.4688 5 12.4531 5.46875 11.6719 6.25H4.25C3.19531 6.25 2.375 7.10938 2.375 8.125V9.375H10.1875L9.75781 10.5469C9.52344
+        10.7812 9.28906 11.0156 9.09375 11.25H2.375V12.8125C2.375 13.3594 1.94531 13.75 1.4375 13.75C0.890625 13.75 0.5 13.3594 0.5
+        12.8125V11.25V10V9.375V8.125C0.5 6.875 1.125 5.74219 2.0625 5.07812C2.10156 5.03906 2.10156 5.03906 2.10156 5ZM4.875 8.75C4.32812
+        8.75 3.9375 8.35938 3.9375 7.8125C3.9375 7.30469 4.32812 6.875 4.875 6.875C5.38281 6.875 5.8125 7.30469 5.8125 7.8125C5.8125 8.35938
+        5.38281 8.75 4.875 8.75ZM14.6016 8.125C14.2109 8.125 13.8594 8.39844 13.7422 8.75L13.0781 10.625H21.6328L20.9688 8.75C20.8516
+        8.39844 20.5 8.125 20.1094 8.125H14.6016ZM10.8516 11.25L11.9844 8.125C12.375 7.03125 13.4297 6.25 14.6016 6.25H20.1094C21.2812
+        6.25 22.3359 7.03125 22.7656 8.125L23.8594 11.25C23.8594 11.2891 23.8984 11.2891 23.8984 11.3281C24.8359 11.9922 25.5 13.125 25.5
+        14.375V15.625V16.25V17.5V19.0625C25.5 19.6094 25.0703 20 24.5625 20C24.0156 20 23.625 19.6094 23.625
+        19.0625V17.5H11.125V19.0625C11.125 19.6094 10.6953 20 10.1875 20C9.64062 20 9.25 19.6094 9.25 19.0625V17.5V16.25V15.625V14.375C9.25
+        13.125 9.875 11.9922 10.8125 11.3281C10.8516 11.2891 10.8516 11.2891 10.8516 11.25ZM21.75 12.5H13C11.9453 12.5 11.125 13.3594 11.125
+        14.375V15.625H23.625V14.375C23.625 13.3594 22.7656 12.5 21.75 12.5ZM13.625 15C13.0781 15 12.6875 14.6094 12.6875 14.0625C12.6875
+        13.5547 13.0781 13.125 13.625 13.125C14.1328 13.125 14.5625 13.5547 14.5625 14.0625C14.5625 14.6094 14.1328 15 13.625 15ZM22.0625
+        14.0625C22.0625 14.6094 21.6328 15 21.125 15C20.5781 15 20.1875 14.6094 20.1875 14.0625C20.1875 13.5547 20.5781 13.125 21.125
+        13.125C21.6328 13.125 22.0625 13.5547 22.0625 14.0625Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/ChatPersonRoundedIcon.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useLayout } from '~/modules/composables';
+
+  const props = defineProps<{
+    primaryColor?: string;
+  }>();
+
+  const { colors } = useLayout();
+
+  const primaryColorWithFallback = computed(() => props.primaryColor ?? colors.primaryColor.value);
+</script>
+
+<template>
+  <svg
+    width="50"
+    height="50"
+    viewBox="0 0 50 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_3811_5945"
+      style="mask-type:alpha"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="50"
+      height="50"
+    >
+      <circle
+        cx="25"
+        cy="25"
+        r="25"
+        transform="matrix(-1 0 0 1 50 0)"
+        fill="#D9D9D9"
+      ></circle>
+    </mask>
+
+    <g mask="url(#mask0_3811_5945)">
+      <circle
+        cx="25"
+        cy="25"
+        r="25"
+        transform="matrix(-1 0 0 1 50 0)"
+        fill="#A1A1AA"
+      ></circle>
+
+      <path
+        d="M21.5701 39.3696C23.0466 41.612 22.6426 45.3129 22.6426 45.3129C22.6426 45.3129
+          20.4717 44.0286 20.3264 41.8759C20.1812 39.7232 21.5701 39.3696 21.5701 39.3696Z"
+        fill="#EBEFF2"
+      ></path>
+
+      <path
+        :fill="primaryColorWithFallback"
+        d="M4.37772 103.714C12.6102 105.679 31.1059 105.294 38.7144 103.671C38.8175 96.8455 38.61 89.8252 38.0145 82.6722C36.5563 65.1681
+          22.3973 48.4737 21.7245 42.9224C21.5698 41.6538 21.5251 40.4663 21.5752 39.3696C20.2323 42.1141 21.266 46.3236 20.0736
+          45.7292C19.059 45.2242 14.4293 41.4385 13.1148 39.7839C9.45505 51.5689 4.27057 71.1026 4.27057 87.2364C4.25971 92.827 4.2977
+          98.3295 4.37908 103.716L4.37772 103.714Z"
+      ></path>
+
+      <path
+        d="M12.8873 38.894C12.8767 39.0253 13.0027 39.2524 13.2296 39.5452C14.5152 41.2169 19.0446 45.0419 20.0357 45.5522C21.2019 46.1528
+          20.1923 41.8996 21.5044 39.1265C20.8808 39.1649 15.7795 36.686 14.1888 36.4206C13.9765 36.385 13.8266 36.3891 13.7589
+          36.4425C13.1765 36.9049 12.9549 38.0143 12.8873 38.8926V38.894Z"
+        fill="#F4F4F5"
+      ></path>
+
+      <path
+        d="M31.9449 4.78145C36.621 3.89561 38.7617 7.74691 38.1187 11.3839C37.477 15.0209 30.294 16.5796 29.438 16.6108C28.582 16.642
+          28.1547 11.4761 28.6132 8.6938C29.0717 5.91283 31.9449 4.78145 31.9449 4.78145Z"
+        fill="#27272A"
+      ></path>
+
+      <path
+        d="M14.1224 36.5629C15.6079 36.803 20.0832 38.8717 21.3367 39.2C21.3407 39.2 21.3421 39.2014 21.3434 39.2014C21.4588 39.2326 21.5469
+          39.2475 21.6026 39.2434C21.7586 35.7693 22.8723 33.2311 24.5558 32.0251C24.6698 31.9451 24.7837 31.8691 24.9004 31.8013C25.8174
+          31.2654 27.2472 31.222 28.6879 31.1759H28.6893C31.0646 31.1027 33.4726 31.028 33.672 28.7436C33.9935 25.0754 32.0671 24.2045
+          32.0563 22.9659C32.0441 21.7274 33.3057 22.0028 34.0382 21.5578C34.7722 21.1129 33.3966 20.3532 32.2964 17.8313C31.686 16.43
+          31.9369 14.7031 31.7606 13.0521C31.6235 11.7322 31.2098 10.4583 29.8654 9.44092L24.043 12.3752L16.685 17.8313V29.0787C16.685
+          29.0787 16.6809 29.0841 16.6809 29.0882C16.6402 29.198 16.1953 30.3945 15.4966 32.4294C15.1073 33.5608 14.6406 34.9526 14.1211
+          36.5615L14.1224 36.5629Z"
+        fill="#F5CAA4"
+      ></path>
+
+      <path
+        d="M16.6864 17.8327V29.08C17.8802 26.5514 16.8003 22.6322 19.3222 21.7315C21.8441 20.8307 22.776 17.7716 22.776 17.7716C22.776
+          17.7716 23.1884 17.2968 23.434 16.0895C23.6782 14.8821 25.9097 14.7912 26.3221 14.8509C26.6938 14.9065 30.8286 15.0965 31.762
+          13.0521C31.6249 11.7322 31.2112 10.4583 29.8668 9.44092L24.0444 12.3752L16.6864 17.8313V17.8327Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M9.98288 24.5277C9.91098 25.0106 9.90285 25.7472 10.0453 26.5218C10.4468 28.6856 12.0313 31.1328 16.6857 29.0817V18.9956C22.3331
+          21.626 23.4021 17.4898 23.0806 16.2295C22.7591 14.9693 23.1728 14.8784 24.3191 15.3803C25.4654 15.8863 30.0357 15.9392 30.463
+          12.8517C30.8904 9.76545 29.6695 8.66527 31.197 9.18348C32.7245 9.7044 35.4756 6.43235 34.4378 3.86436C33.3973 1.29637 31.7477
+          -4.16654 26.9794 -2.95105C22.211 -1.73692 25.3596 2.76418 24.0451 3.68123C22.7306 4.59827 20.2548 1.26788 17.6869 3.19286C15.1189
+          5.11919 17.657 10.0083 17.6869 11.1993C17.7181 12.3918 14.5084 9.5484 11.9716 11.1383C9.43347 12.7282 8.42418 14.8377 10.0751
+          17.6485C10.4414 18.2739 10.7778 18.7758 11.0709 19.1855C12.0991 20.6167 12.6445 20.9205 12.4301 21.4537C12.1548 22.1415 10.2583
+          22.6922 9.98424 24.525L9.98288 24.5277Z"
+        fill="#52525B"
+      ></path>
+
+      <path
+        d="M14.1218 36.5633C15.6072 36.8034 20.0825 38.8722 21.336 39.2004C21.3401 39.2004 21.3414 39.2018 21.3428 39.2018C21.4839 39.2262
+          21.5707 39.2384 21.5938 39.2425C21.3848 39.1475 16.782 37.095 16.0644 35.9582C15.6126 35.2447 15.5082 33.5964 15.496
+          32.4312C15.1066 33.5625 14.64 34.9544 14.1204 36.5633H14.1218Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M24.5629 31.62C24.5615 31.7625 24.5575 31.8981 24.5561 32.027C24.6701 31.947 24.784 31.871 24.9007 31.8032C25.8177 31.2673
+          27.2476 31.2239 28.6882 31.1778C25.1435 31.0679 22.0872 27.3102 21.8443 27.5544C21.6001 27.7986 24.5955 29.9379 24.5643
+          31.62H24.5629Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M10.0457 26.5203C12.7833 26.0916 16.678 24.8327 16.678 24.8327C16.678 24.8327 16.6821 24.8259 16.6875 24.8083V20.7318C15.9319
+          19.2477 14.4939 17.2183 14.4939 17.2183L11.0713 19.1866C12.0996 20.6178 12.6449 20.9217 12.4306 21.4548C12.1552 22.1426 10.2587
+          22.6934 9.98468 24.5261C9.91278 25.0091 9.90464 25.7457 10.0471 26.5203H10.0457Z"
+        fill="#27272A"
+      ></path>
+
+      <path
+        d="M20.6782 23.0028C20.2129 17.4517 15.1678 15.2649 13.9727 17.9184C12.7775 20.5718 17.862
+          24.8871 19.2592 25.0689C20.6565 25.2507 20.6769 23.0028 20.6769 23.0028H20.6782Z"
+        fill="#F5CAA4"
+      ></path>
+
+      <path
+        d="M19.0258 23.1914C19.936 21.2488 18.0314 19.5748 16.8959 20.4389C15.7605 21.3031 17.87 21.2122 18.011 21.6897C18.1521
+          22.1672 17.9812 22.3978 18.342 22.4887C18.7042 22.5796 18.8738 23.5129 19.0258 23.1914Z"
+        fill="#EAAA79"
+      ></path>
+
+      <circle
+        cx="2.08015"
+        cy="2.08015"
+        r="2.08015"
+        transform="matrix(-1 0 0 1 27.1504 20.0537)"
+        fill="#FCA573"
+      ></circle>
+
+      <path
+        d="M32.7966 25.459C31.5895 27.0548 28.9072 29.0995 27.8345 24.5113C28.8892 25.7212 31.3703 26.195 32.7966 25.459Z"
+        fill="#F4F4F5"
+      ></path>
+
+      <path
+        d="M32.7966 25.459C31.5895 27.0548 28.9072 29.0995 27.8345 24.5113C28.8521 25.9158 31.4635 26.7699 32.7966 25.459Z"
+        fill="#FE9661"
+      ></path>
+
+      <path
+        :fill="primaryColorWithFallback"
+        d="M9.34796 103.118C10.9894 104.39 12.6892 105.609 14.3618 106.736C15.3833 105.454 18.8914 102.254 20.3294 101.607C20.3308 101.605
+          20.3335 101.605 20.3335 101.605C17.7573 97.6143 15.4132 93.611 15.0578 91.2438C14.1407 85.1406 26.5683 72.9206 24.7776
+          65.4255C24.76 65.3509 24.1468 63.3269 24.1278 63.2523C22.6898 57.5656 17.543 49.0368 14.507 54.0547C9.26792 62.7151 -0.633701
+          79.4579 -1.99841 87.2053C-2.84627 92.0198 2.78215 98.0226 9.34796 103.118Z"
+      ></path>
+
+      <ellipse
+        cx="0.742909"
+        cy="1.78298"
+        rx="0.742909"
+        ry="1.78298"
+        transform="matrix(-0.991178 0.132536 0.132536 0.991178 29.8645 15.8945)"
+        fill="#232426"
+      ></ellipse>
+
+      <ellipse
+        cx="0.697212"
+        cy="1.67331"
+        rx="0.697212"
+        ry="1.67331"
+        transform="matrix(-0.999956 -0.00943597 -0.00943597 0.999956 32.7969 15.9067)"
+        fill="#232426"
+      ></ellipse>
+    </g>
+  </svg>
+</template>
+

package/src/modules/icons/CompanyIcon.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+  /* eslint-disable max-len */
+</script>
+
+<template>
+  <svg
+    width="26"
+    height="20"
+    viewBox="0 0 26 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.75 1.875H3C2.64844 1.875 2.375 2.1875 2.375 2.5V16.25C2.375 16.6016 2.64844 16.875 3 16.875H8V18.75H3C1.59375 18.75 0.5 17.6562 0.5 16.25V2.5C0.5 1.13281 1.59375 0 3 0H11.75C13.1172 0 14.25 1.13281 14.25 2.5V5.03906C13.5469 5.11719 12.9219 5.35156 12.375 5.70312V2.5C12.375 2.1875 12.0625 1.875 11.75 1.875ZM10.5 8.59375L9.95312 10C9.95312 10 9.91406 10 9.875 10H8.625C8.27344 10 8 9.72656 8 9.375V8.125C8 7.8125 8.27344 7.5 8.625 7.5H9.875C10.1875 7.5 10.5 7.8125 10.5 8.125V8.59375ZM4.25 4.375C4.25 4.0625 4.52344 3.75 4.875 3.75H6.125C6.4375 3.75 6.75 4.0625 6.75 4.375V5.625C6.75 5.97656 6.4375 6.25 6.125 6.25H4.875C4.52344 6.25 4.25 5.97656 4.25 5.625V4.375ZM8.625 3.75H9.875C10.1875 3.75 10.5 4.0625 10.5 4.375V5.625C10.5 5.97656 10.1875 6.25 9.875 6.25H8.625C8.27344 6.25 8 5.97656 8 5.625V4.375C8 4.0625 8.27344 3.75 8.625 3.75ZM4.25 8.125C4.25 7.8125 4.52344 7.5 4.875 7.5H6.125C6.4375 7.5 6.75 7.8125 6.75 8.125V9.375C6.75 9.72656 6.4375 10 6.125 10H4.875C4.52344 10 4.25 9.72656 4.25 9.375V8.125ZM4.25 11.875C4.25 11.5625 4.52344 11.25 4.875 11.25H6.125C6.4375 11.25 6.75 11.5625 6.75 11.875V13.125C6.75 13.4766 6.4375 13.75 6.125 13.75H4.875C4.52344 13.75 4.25 13.4766 4.25 13.125V11.875ZM14.6016 8.125C14.2109 8.125 13.8594 8.39844 13.7422 8.75L13.0781 10.625H21.6328L20.9688 8.75C20.8516 8.39844 20.5 8.125 20.1094 8.125H14.6016ZM10.8516 11.25L11.9844 8.125C12.375 7.03125 13.4297 6.25 14.6016 6.25H20.1094C21.2812 6.25 22.3359 7.03125 22.7656 8.125L23.8594 11.25C23.8594 11.2891 23.8594 11.2891 23.8984 11.3281C24.8359 11.9922 25.5 13.125 25.5 14.375V15.625V16.25V17.5V19.0625C25.5 19.6094 25.0703 20 24.5625 20C24.0156 20 23.625 19.6094 23.625 19.0625V17.5H11.125V19.0625C11.125 19.6094 10.6953 20 10.1875 20C9.64062 20 9.25 19.6094 9.25 19.0625V17.5V16.25V15.625V14.375C9.25 13.125 9.875 11.9922 10.8125 11.3281C10.8516 11.2891 10.8516 11.2891 10.8516 11.25ZM21.75 12.5H13C11.9453 12.5 11.125 13.3594 11.125 14.375V15.625H23.625V14.375C23.625 13.3594 22.7656 12.5 21.75 12.5ZM13.625 13.125C14.1328 13.125 14.5625 13.5547 14.5625 14.0625C14.5625 14.6094 14.1328 15 13.625 15C13.0781 15 12.6875 14.6094 12.6875 14.0625C12.6875 13.5547 13.0781 13.125 13.625 13.125ZM20.1875 14.0625C20.1875 13.5547 20.5781 13.125 21.125 13.125C21.6328 13.125 22.0625 13.5547 22.0625 14.0625C22.0625 14.6094 21.6328 15 21.125 15C20.5781 15 20.1875 14.6094 20.1875 14.0625Z"
+      fill="white"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/HeroGirlIcon.vue

@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useLayout } from '~/modules/composables';
+
+  const props = defineProps<{
+    primaryColor?: string;
+    secondaryColor?: string;
+  }>();
+
+  const { colors } = useLayout();
+
+  const primaryColorWithFallback = computed(() => props.primaryColor ?? colors.primaryColor.value);
+  const secondaryColorWithFallback = computed(() => props.secondaryColor ?? colors.primaryColorActive.value);
+</script>
+
+<template>
+  <svg
+    width="224"
+    height="377"
+    viewBox="0 0 224 377"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      :fill="secondaryColorWithFallback"
+      d="M68.8749 328.38C72.723 330.19 80.9125 335.257 83.6113 337.77C97.8265 324.35 108.84 309.191 108.84
+        309.191L111.739 177.741C103.755 218.297 89.5533 293.528 68.8749 328.38Z"
+    ></path>
+
+    <path
+      d="M59.4618 340.771L70.0941 348.965C70.6665 348.565 71.2295 348.17 71.7832 347.756C68.661 346.076
+        63.3471 342.13 60.6669 339.58C60.2668 339.994 59.8713 340.394 59.4618 340.776V340.771Z"
+      fill="white"
+    ></path>
+
+    <path
+      :fill="secondaryColorWithFallback"
+      d="M60.6632 339.576C63.3434 342.13 68.6572 346.071 71.7794 347.751C72.8264 348.323 73.6221 348.635 73.9943
+        348.556C75.9393 348.123 84.622 340.795 84.4917 338.924C84.4731 338.673 84.152 338.277 83.6076 337.765C80.9088
+        335.257 72.724 330.186 68.8713 328.375C67.7359 327.85 66.9867 327.603 66.8565 327.789C64.7346 330.776 60.1514
+        336.225 59.0672 337.305C58.7973 337.575 59.4674 338.44 60.6585 339.571L60.6632 339.576Z"
+    ></path>
+
+    <path
+      d="M68.8058 349.854C69.2385 349.561 69.6713 349.268 70.0947 348.961L59.4624 340.767C59.1413 341.078 58.8203
+        341.372 58.4945 341.655C32.1022 364.921 48.2345 363.73 68.8105 349.849L68.8058 349.854Z"
+      fill="#F5CAA4"
+    ></path>
+
+    <path
+      d="M79.5498 342.028C78.1955 342.028 77.0976 340.93 77.0976 339.575C77.0976 338.221 78.1955 337.123 79.5498
+        337.123C80.9041 337.123 82.002 338.221 82.002 339.575C82.002 340.93 80.9041 342.028 79.5498 342.028Z"
+      fill="white"
+    ></path>
+
+    <path
+      d="M69.4697 39.8415C68.4321 61.9577 41.6814 74.7397 38.8198 93.743C35.9535 112.746 63.0159 109.401 63.6534
+        129.735C64.2908 150.069 50.1221 172.874 80.8745 181.51C111.627 190.146 126.14 190.951 128.21 179.49C130.286
+        168.034 109.552 94.4363 109.552 94.4363L69.4697 39.8415Z"
+      fill="#501B1A"
+    ></path>
+
+    <path
+      d="M90.3774 58.8447C69.82 59.0169 52.7152 35.1744 72.235 13.5794C91.7593 -8.01563 154.646 -5.42386 156.544
+        32.7548C158.443 70.9381 138.146 89.2481 163.799 105.059C189.456 120.866 201.116 146.793 191.526 161.171C181.936
+        175.549 227.807 195.502 214.331 206.385C200.856 217.269 177.79 208.716 177.79 208.716L100.177 105.953L90.3727
+        58.8401L90.3774 58.8447Z"
+      fill="#642E29"
+    ></path>
+
+    <path
+      d="M131.947 65.5173C136.665 67.7554 119.989 90.7184 141.909 113.942C163.83 137.166 155.413 161.171 155.413
+        161.171C155.413 161.171 106.039 114.77 105.629 96.344C105.22 77.9178 131.952 65.5173 131.952 65.5173H131.947Z"
+      fill="#501B1A"
+    ></path>
+
+    <path
+      :fill="primaryColorWithFallback"
+      d="M91.5356 367.136C115.899 369.923 138.648 369.816 158.819 368.211C186.138 366.047 208.677 361.124 224
+        356.918C223.912 353.284 223.777 349.682 223.586 346.127C221.371 303.868 212.158 266.862 200.213 235.151C192.08
+        213.546 182.667 194.404 173.346 177.741C167.288 166.95 161.286 157.193 155.66 148.477C147.889 151.097 128.439
+        156.271 117.207 159.147C116.997 159.189 116.793 159.249 116.574 159.296C114.731 159.771 113.131 160.18 111.865
+        160.482C111.725 160.51 111.595 160.552 111.465 160.58C111.465 160.58 111.459 160.583 111.446 160.589C110.813
+        168.825 108.91 178.597 105.406 190.155C102.419 200.029 99.8879 213.109 97.8359 228.436C97.352 232.061 96.8913
+        235.797 96.4586 239.66C95.072 252.014 93.9645 265.512 93.1456 279.737C92.885 284.125 92.6524 288.578 92.4523
+        293.086C92.1917 298.703 91.987 304.412 91.8195 310.182C91.2751 328.766 91.1773 348.03 91.5263 367.14L91.5356
+        367.136Z"
+    ></path>
+
+    <path
+      d="M144.609 131.782C136.955 135.281 120.525 142.303 112.252 145.457C111.624 145.704 111.223 145.858
+        111.116 145.895C111.098 145.904 111.088 145.904 111.088 145.904C109.278 133.876 103.504 127.045 96.0031
+        123.783C93.7138 122.783 91.2569 122.118 88.7117 121.755H88.7024C88.4744 121.708 88.2371 121.68 88.0044
+        121.648C69.4665 119.312 74.5291 101.816 76.3298 92.361C78.1585 82.9059 64.027 83.669 68.9547 81.7333C72.8446
+        80.1978 77.1488 72.3387 78.0747 60.7664C78.312 57.7186 78.3213 54.4103 78.0282 50.8925C78.0282 50.8925 95.2493
+        59.9475 105.761 63.9864C106.114 64.1213 106.459 64.2423 106.789 64.3679C117.156 68.1695 117.845 75.9495 126.146
+        101.509C127.546 105.855 131.427 112.127 136.885 120.321C139.202 123.793 141.794 127.613 144.605 131.777L144.609
+        131.782Z"
+      fill="#F6CBA5"
+    ></path>
+
+    <path
+      :fill="primaryColorWithFallback"
+      d="M159.016 147.044C158.881 147.305 157.648 147.803 155.665 148.473C146.275 151.632 119.86 158.528 111.456
+        160.58C109.921 160.952 108.99 161.171 108.865 161.171C107.953 161.171 107.571 147.044 107.571 147.044C108.111
+        146.96 109.353 146.546 111.093 145.904C118.878 143.01 136.574 135.453 144.605 131.787C146.825 130.758 148.318
+        130.046 148.649 129.805C150.454 128.52 159.918 145.355 159.016 147.044Z"
+    ></path>
+
+    <path
+      :fill="secondaryColorWithFallback"
+      d="M173.337 177.736C168.121 169.621 162.523 161.306 159.996 158.882C155.008 154.112 141.119 153.461 117.207
+        159.142C128.435 156.271 147.889 151.097 155.664 148.477C161.281 157.197 167.297 166.95 173.337 177.741V177.736Z"
+    ></path>
+
+    <path
+      d="M78.0744 60.7711C78.3117 57.7233 78.321 54.415 78.0279 50.8972C78.0279 50.8972 95.249 59.9521 105.76
+        63.991C109.925 67.9741 112.814 70.9846 112.814 70.9846C112.814 70.9846 84.3282 67.8112 78.0744 60.7664V60.7711Z"
+      fill="#EAAA79"
+    ></path>
+
+    <path
+      d="M113.916 70.9846C104.456 70.0773 78.2828 62.5625 75.1745 50.9019C72.0662 39.2412 99.2775 41.7027 104.07
+        48.9569C108.863 56.2111 118.192 68.5232 118.192 68.5232L113.916 70.9846Z"
+      fill="#743B36"
+    ></path>
+
+    <path
+      d="M111.586 75.6472C112.363 62.6883 131.627 60.0546 132.795 67.3972C133.963 74.7398 118.198 84.2414 117.849
+        86.2702C117.5 88.2989 111.586 75.6472 111.586 75.6472Z"
+      fill="#F5CAA4"
+    ></path>
+
+    <path
+      d="M116.378 77.9364C115.801 73.3205 122.036 67.225 125.577 70.1611C129.118 73.0972 121.04 73.0134 121.343
+        73.8742C121.645 74.7397 118.621 74.5676 118.537 75.1678C118.449 75.7727 116.55 79.3137 116.378 77.9318V77.9364Z"
+      fill="#EAAA79"
+    ></path>
+
+    <path
+      d="M144.609 131.782C136.955 135.281 120.525 142.303 112.252 145.458C117.435 143.429 138.202 134.918 138.1
+        128.865C138.053 125.998 137.509 122.927 136.89 120.326C139.207 123.797 141.799 127.618 144.609 131.782Z"
+      fill="#EAAA79"
+    ></path>
+
+    <path
+      d="M105.63 111.978C104.685 113.816 100.884 120.773 96.0026 123.788C93.7133 122.788 91.2565 122.122 88.7112
+        121.759L88.7205 121.75C95.4024 122.378 103.052 116.739 105.625 111.983L105.63 111.978Z"
+      fill="#EAAA79"
+    ></path>
+
+    <path
+      d="M21.814 257.793C23.1634 258.681 24.5826 259.626 26.0623 260.603L35.4848 251.041C35.4848 251.041 35.4941
+        251.032 35.4941 251.022C35.5034 251.013 35.5127 251.004 35.5127 251.004C24.5314 244.764 15.1368 239.981
+        9.22735 239.706C-6.8398 238.952 -1.47478 242.372 21.8186 257.788L21.814 257.793Z"
+      fill="#F5CAA4"
+    ></path>
+
+    <path
+      d="M26.0624 260.603C26.9093 261.166 27.7747 261.743 28.6681 262.334H28.6774C30.8318 259.356 35.1406 254.158
+        37.5137 252.148C36.839 251.757 36.1736 251.376 35.5128 251.004L26.0624 260.598V260.603Z"
+      fill="white"
+    ></path>
+
+    <path
+      :fill="secondaryColorWithFallback"
+      d="M27.3923 264.516C27.9181 264.949 37.0056 271.007 37.2197 272.306C37.2616 272.575 37.8432 272.091 38.7273
+        271.138C41.2865 268.35 46.377 261.594 47.9963 258.23C48.4802 257.216 48.6523 256.508 48.3592 256.299C44.8182
+        253.814 40.5699 251.65 38.9553 251.334C38.6854 251.283 38.1782 251.595 37.5082 252.158C35.1351 254.163 30.8263
+        259.365 28.6719 262.343C27.7879 263.572 27.2621 264.419 27.3923 264.526V264.516Z"
+    ></path>
+
+    <path
+      d="M37.5087 269.318C36.5707 269.318 35.8103 268.558 35.8103 267.62C35.8103 266.682 36.5707 265.922 37.5087
+        265.922C38.4466 265.922 39.207 266.682 39.207 267.62C39.207 268.558 38.4466 269.318 37.5087 269.318Z"
+      fill="white"
+    ></path>
+
+    <path
+      d="M21.814 257.793C23.1634 258.681 24.5826 259.626 26.0623 260.603L35.4848 251.041C35.4848 251.041 35.4941
+        251.032 35.4941 251.022C35.0521 251.404 28.0632 257.425 25.7599 257.634C24.913 257.714 23.4054 257.765
+        21.814 257.793Z"
+      fill="#EAAA79"
+    ></path>
+
+    <path
+      :fill="secondaryColorWithFallback"
+      d="M91.5356 367.136C115.899 369.923 138.648 369.816 158.819 368.21C186.138 366.047 208.677 361.124 224
+        356.917C223.912 353.283 223.777 349.682 223.586 346.127C214.075 313.862 194.974 237.398 151.9 181.719L134.498
+        177.741C134.498 177.741 117.044 182.645 121.804 226.775C126.527 270.584 93.6295 279.597 93.1549 279.727C92.8943
+        284.115 92.6617 288.568 92.4616 293.077C92.201 298.693 91.9963 304.403 91.8288 310.172C91.2843 328.757
+        91.1866 348.021 91.5356 367.131V367.136Z"
+    ></path>
+
+    <path
+      :fill="primaryColorWithFallback"
+      d="M38.7279 271.133C41.4871 274.111 44.1813 277.443 46.8801 281.049C66.6092 307.395 87.013 348.323 142.934
+        371.407C170.494 382.793 185.263 374.888 192.22 358.262C203.545 331.205 194.174 281.049 185.645 253.447C171.876
+        208.884 155.618 186.433 149.658 178.755C137.83 163.512 121.139 164.745 121.665 197.6C122.056 222.103 128.44
+        256.913 119.51 272.841C116.463 278.285 111.647 281.528 104.197 281.416C88.3717 281.174 67.0326 269.249 47.9968
+        258.221C46.3775 261.585 41.2917 268.346 38.7279 271.128V271.133Z"
+    ></path>
+
+    <path
+      :fill="secondaryColorWithFallback"
+      d="M44.0776 272.05C42.4862 267.29 48.6888 263.395 47.9955 258.221C46.3762 261.585 41.2904 268.346 38.7265
+        271.128C41.4858 274.106 44.18 277.438 46.8788 281.044C45.9621 278.024 44.864 274.418 44.0776 272.045V272.05Z"
+    ></path>
+
+    <circle
+      cx="101"
+      cy="88"
+      r="7"
+      fill="#FCA573"
+    ></circle>
+
+    <ellipse
+      cx="87.2736"
+      cy="72.2784"
+      rx="2.5"
+      ry="6"
+      transform="rotate(7.61614 87.2736 72.2784)"
+      fill="#232426"
+    ></ellipse>
+
+    <ellipse
+      cx="78.1229"
+      cy="71.6489"
+      rx="2.34622"
+      ry="5.63093"
+      transform="rotate(-0.540649 78.1229 71.6489)"
+      fill="#232426"
+    ></ellipse>
+
+    <path
+      d="M81 100C83.9825 106.037 91.5579 114.489 98 100C93.75 103.333 85.25 103.333 81 100Z"
+      fill="white"
+    ></path>
+
+    <path
+      d="M81 100C83.9825 106.037 91.5579 114.489 98 100C93.75 104 84.5789 105.175 81 100Z"
+      fill="#FE9661"
+    ></path>
+  </svg>
+</template>
+