@ozdao/prometheus-framework 0.2.111 → 0.2.113

package/src/{components/Header → modules/globals/components/partials}/Header.vue

@@ -1,14 +1,65 @@
+<script setup="props">
+	import { computed, onMounted, toRefs, ref, inject } from 'vue'
+
+	import { useRouter,useRoute } from 'vue-router'
+	import { useI18n } from 'vue-i18n'
+	import { useStore } from '@/store';
+	
+	// Globasls Component
+	import Navigation from '@pf/src/modules/globals/components/partials/Navigation.vue'
+	// Prometheus Component
+	import Button from '@pf/src/components/Button/Button.vue'
+	import Select from '@pf/src/components/Select/Select.vue'
+	import Checkbox from '@pf/src/components/Checkbox/Checkbox.vue'
+	// Icons module
+	import Logotype from '@pf/src/modules/icons/logos/Logotype.vue'
+	import IconShopcart from '@pf/src/modules/icons/entities/IconShopcart.vue'
+	import IconProfile from '@pf/src/modules/icons/entities/IconProfile.vue'
+	
+	// Props
+	const props = defineProps({
+    theme: {
+    	type: String,
+	    default: "light"
+    }
+  });
+	// Accessing state
+	const router = useRouter()
+	const route = useRoute()
+	const store = useStore()
+	// Localization
+	const { t } = useI18n()
+	// const search = computed(() => store.products.state.search)
+
+	function openLocationPopup() {
+	  store.globals.state.isOpenLocationPopup = true;
+	}
+	/////////////////////////////
+	// MOUNTED
+	/////////////////////////////
+	onMounted(() => {
+    store.shopcart.actions.setShopcart()
+  });
+</script>
+
 <template>
-	<header id="header" class="
-		pos-relative
-		pd-thin 
-		z-index-2 
-		gap-thin
-		flex-center
-		flex-nowrap
-		flex
-		h-4r
-	">
+	<header 
+		id="header" 
+		class="
+			pd-thin 
+			gap-thin
+			flex-center
+			flex-nowrap
+			flex
+			h-4r
+			w-100
+			z-index-2 
+		"
+		:class="{
+  		't-black': theme === 'light',
+  		't-white': theme === 'dark'  
+  	}"
+	>
 		<!-- MENU -->
 		<button  
 			@click.stop="() => store.globals.state.isOpenSidebar = !store.globals.state.isOpenSidebar" 
@@ -17,12 +68,13 @@
 				'menu-btn_active': store.globals.state.isOpenSidebar
 			}"
 		>
-	    <span></span>
+	    <span/>
 	  </button>
 
 		<!-- LOGO -->
 		<Logotype
 			@click="router.push({ path: '/' })" 
+			:theme="theme"
 			class="
 				h-2r
 				w-auto
@@ -34,28 +86,43 @@
 		<button
     	class="
     		cursor-pointer
-    		br-solid br-2px br-black 
     		bg-transp 
-    		pd-l-micro pd-r-micro pd-t-nano pd-b-nano 
+    		pd-l-micro pd-r-micro
     		radius-extra 
     		uppercase 
     		t-semi
-    		mn-r-thin 
+    		br-solid 
+    		br-2px 
     	"
+    	:class="{
+    		'br-black t-black': theme === 'light',
+    		'br-white t-white': theme === 'dark'  
+    	}"
     	@click="openLocationPopup()"
     >
-    	{{store.globals.state.position?.country ? store.globals.state.position.country : '🌎 World'}}
+    	<svg class="i-small" xmlns="http://www.w3.org/2000/svg" width="50" height="67" viewBox="0 0 50 67" fill="none">
+			  <path d="M25 0C11.207 0 0 11.207 0 25C0 38.793 20.832 66.668 25 66.668C29.168 66.668 50 38.793 50 25C50 11.207 38.793 0 25 0ZM25 33.332C20.418 33.332 16.668 29.582 16.668 25C16.668 20.418 20.418 16.668 25 16.668C29.582 16.668 33.332 20.418 33.332 25C33.332 29.582 29.582 33.332 25 33.332Z" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'"/>
+			</svg>
+    	 {{store.globals.state.position?.country ? store.globals.state.position.country : 'World'}}
     </button>
 
 		<!-- NAGIVATION -->
-		<Navigation class="desktop-only"/>
+		<Navigation 
+			class=" mn-l-auto desktop-only"
+
+		/>
 
 		<Checkbox 
+      name="darkmode"
       :label="'Darkmode'"
       :radio="store.globals.state.theme.darkmode"
       @update:radio="event => store.globals.actions.toggleTheme()"
-      name="prices"
-      class="desktop-only t-semi pd-micro br-2px br-solid radius-extra br-black-transp-5"
+      class="mn-r-auto desktop-only t-semi pd-micro br-2px br-solid radius-extra"
+      :theme="theme"
+      :class="{
+    		'br-light t-black': theme === 'light',
+    		'br-dark t-white': theme === 'dark'  
+    	}"
     />
 
 		<Button
@@ -65,7 +132,10 @@
 			:showLoader="false"
 			class="pd-zero mn-l-auto"
 			> 
-			<IconShopcart class="i-semi"/>
+			<IconShopcart 
+				class="i-semi"
+				:fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" 
+			/>
 			<!-- <div class="w-max p-small pos-absolute pos-t-100 pos-r-0">Product Added to Shopcart</div> -->
 		</Button>
 		
@@ -81,7 +151,10 @@
 			:showSucces="false"
 			:showLoader="false"
 		>
-			<IconProfile class="i-semi"/>
+			<IconProfile 
+				class="i-semi"
+				:fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" 
+			/>
 		</Button>
 
 
@@ -89,74 +162,15 @@
 			v-model:select="$i18n.locale"
 		  :options="[{name: '🌎&nbsp;En', value: 'en'}, {name: '🇷🇺&nbsp;Ru', value: 'ru'}]"
 		  :property="'value'"
-      class="pos-relative uppercase pd-micro t-semi bg-grey radius-thin"
+      class="pos-relative uppercase pd-micro t-semi radius-thin"
+      :class="{
+    		'bg-light t-black': theme === 'light',
+    		'bg-dark t-white': theme === 'dark'  
+    	}"
     />
-
-
 	</header>
 </template>
 
-<script setup="props">
-	/////////////////////////////
-	// COMPONENT DEPENDENCIES
-	/////////////////////////////
-	import { computed, onMounted, toRefs, ref, inject } from 'vue'
-	// Route
-	import { useRouter,useRoute } from 'vue-router'
-	// Store
-	import { useStore } from '@/store';
-	// i18n
-	import { useI18n } from 'vue-i18n'
-	// Weeder Component
-	import Navigation			from '@pf/src/components/Navigation/Navigation.vue'
-	// Prometheus Component
-	import Button 				from '@pf/src/components/Button/Button.vue'
-	import Select 				from '@pf/src/components/Select/Select.vue'
-	import Checkbox    from '@pf/src/components/Checkbox/Checkbox.vue'
-	// Icons module
-	import Logotype 				from '@pf/src/modules/icons/logos/Logotype.vue'
-	import IconShopcart from '@pf/src/modules/icons/entities/IconShopcart.vue'
-	import IconProfile from '@pf/src/modules/icons/entities/IconProfile.vue'
-	/////////////////////////////
-	// CREATED
-	/////////////////////////////
-	const router = useRouter()
-	const route = useRoute()
-	const store = useStore()
-	// Accessing state
-	// const search = computed(() => store.products.state.search)
-	/////////////////////////////
-	// POPUS
-	/////////////////////////////
-	function openLocationPopup() {
-	  store.globals.state.isOpenLocationPopup = true;
-	}
-	/////////////////////////////
-	// LOCALIZATION
-	/////////////////////////////
-	const text = {
-    messages: {
-      en: {
-        HEADER: {
-        	LOCATION: 'Thailand'
-			  }
-      },
-      ru: {
-	      HEADER: {
-	      	LOCATION: 'Тайланд'
-				}
-  		}
-		}
-	}
-	const { t } = useI18n(text)
-	/////////////////////////////
-	// MOUNTED
-	/////////////////////////////
-	onMounted(() => {
-    store.shopcart.actions.setShopcart()
-  });
-</script>
-
 <style lang="scss">
 .location-button { 
 	&:hover {

package/src/modules/globals/controllers/utils/queryProcessor.js

@@ -115,15 +115,15 @@ function getAddFieldsCreatorOwnerStage() {
         $switch: {
           branches: [
             {
-              case: { $eq: ["$creator.type", "user"] },
+              case: { $eq: [{ $toLower: "$creator.type" }, "user"] },
               then: { $arrayElemAt: ["$creatorUser", 0] }
             },
             {
-              case: { $eq: ["$creator.type", "organization"] },
+              case: { $eq: [{ $toLower: "$creator.type" }, "organization"] },
               then: { $arrayElemAt: ["$creatorOrganization", 0] }
             },
             {
-              case: { $eq: ["$creator.type", "customer"] },
+              case: { $eq: [{ $toLower: "$creator.type" }, "customer"] },
               then: { $arrayElemAt: ["$creatorCustomer", 0] }
             }
           ],

package/src/modules/globals/models/common.schema.js

@@ -2,7 +2,7 @@ module.exports = function applyCommonSchema(schema,db) {
   schema.add({
     status: {
       type: String,
-      enum: ['draft','published','removed'], 
+      enum: ['draft','published','featured','archived','removed'], 
       default: 'draft',
       required: true,
     },

package/src/modules/globals/services/globals.store.js

@@ -34,7 +34,12 @@ class Store {
     try {
       const response = await fetch(url, finalOptions);
 
-      if (!response.ok) throw new Error('Network response was not ok');
+      if (!response.ok) {
+        const errorData = await response.json();
+        const error = new Error(errorData.message || 'Unknown error');
+        error.errorCode = errorData.errorCode || 'UNKNOWN_ERROR';
+        throw error;
+      }
 
       return await response.json();
 
@@ -54,6 +59,7 @@ class Store {
 
   async read(options = {}) {
     const queryParams = new URLSearchParams(options).toString();
+    
     return await this.request(`/read?${queryParams}`);
   }
 
@@ -78,14 +84,13 @@ class Store {
   }
 
   addItem(item, state) {
-    const targetState = state ? state.items : this.state.items;
-
+    const targetState = state || this.state.items;
     const existingItemIndex = targetState.findIndex(i => i._id === item._id);
-
+    
     if (existingItemIndex === -1) {
-      targetState.push(item);
+      targetState.splice(0, 0, item);
     } else {
-       Object.assign(targetState[index], item);
+      Object.assign(targetState[existingItemIndex], item);
     }
   }
 

package/src/modules/globals/store/globals.js

@@ -41,7 +41,13 @@ const actions = {
 
     root.classList.toggle('dark-theme');
 
-    const variableNames = ['--white', '--black', '--grey'];
+    const variableNames = [
+      '--white',
+      '--light',
+      '--grey',
+      '--dark',
+      '--black'
+    ];
 
     // Проверяем, сохранены ли оригинальные цвета
     if (!state.theme.originalColors) {
@@ -177,23 +183,19 @@ function setError(error) {
 
 function invertColors(variableNames, originalColors) {
   variableNames.forEach(variableName => {
-    // Используем оригинальный цвет как основу для инверсии
     const baseColor = originalColors[variableName];
-
-    // Преобразуем значения в массив чисел
     const colorArray = baseColor.split(',').map(Number);
 
     let invertedColor;
 
     if (variableName === '--white') {
-      // Здесь ваша специфическая логика инверсии для белого цвета
-      invertedColor = colorArray.map(value => 255 - value / 1.075); // Пример
+      invertedColor = colorArray.map(value => 255 - value / 1.075);
     } else if (variableName === '--black') {
-      // Здесь ваша специфическая логика инверсии для черного цвета
-      invertedColor = colorArray.map(value => 255 - value); // Пример
+      invertedColor = colorArray.map(value => 255 - value); 
     } else if (variableName === '--grey') {
-      // Здесь ваша специфическая логика инверсии для серого цвета
-      invertedColor = colorArray.map(value => 255 - value * 2); // Пример
+      invertedColor = colorArray.map(value => 255 - value * 2);
+    } else {
+      invertedColor = colorArray.map(value => 255 - value / 1.075);
     }
     // Устанавливаем новые значения переменных CSS
     document.documentElement.style.setProperty(variableName, state.theme.darkmode ? invertedColor.join(', ') : baseColor );

package/src/modules/icons/logos/Logotype.vue

@@ -1,20 +1,24 @@
 <template>
-	<svg width="1254" height="369" viewBox="0 0 1254 369" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path d="M1120.39 112.332H1183C1190.11 112.332 1197.16 113.084 1204.14 114.59C1211.26 115.958 1217.55 118.49 1223.03 122.185C1228.64 125.743 1233.15 130.601 1236.57 136.759C1240 142.78 1241.71 150.375 1241.71 159.544C1241.71 168.439 1239.52 176.308 1235.14 183.15C1230.76 189.855 1224.46 195.056 1216.25 198.751L1253.2 257.663H1196.96L1169.04 205.73H1167.6V257.663H1120.39V112.332ZM1167.19 173.708H1176.84C1178.48 173.708 1180.26 173.571 1182.18 173.297C1184.23 173.023 1186.08 172.476 1187.72 171.655C1189.5 170.697 1190.94 169.465 1192.03 167.96C1193.26 166.318 1193.88 164.197 1193.88 161.597C1193.88 158.996 1193.4 156.944 1192.44 155.438C1191.48 153.933 1190.25 152.838 1188.75 152.154C1187.24 151.333 1185.6 150.854 1183.82 150.717C1182.04 150.444 1180.4 150.307 1178.89 150.307H1167.19V173.708Z" fill="rgb(var(--black))"/>
-		<path d="M1006.97 112.332H1106.94V152.975H1052.95V165.497H1103.65V203.472H1052.95V217.02H1110.43V257.663H1006.97V112.332Z" fill="rgb(var(--black))"/>
-		<path d="M855.464 257.663V112.332H909.655C921.151 112.332 932.098 113.495 942.499 115.821C953.036 118.011 962.273 121.911 970.21 127.522C978.284 132.996 984.716 140.317 989.506 149.486C994.295 158.654 996.69 170.218 996.69 184.176C996.69 196.903 994.364 207.919 989.711 217.225C985.195 226.53 979.105 234.194 971.442 240.215C963.778 246.1 954.952 250.479 944.962 253.352C934.972 256.226 924.572 257.663 913.761 257.663H855.464ZM902.471 153.796V215.788H911.503C922.998 215.788 931.825 213.325 937.983 208.398C944.141 203.335 947.22 195.124 947.22 183.766C947.22 174.323 944.141 167.002 937.983 161.802C931.825 156.465 923.614 153.796 913.35 153.796H902.471Z" fill="rgb(var(--black))"/>
-		<path d="M742.044 112.332H842.011V152.975H788.025V165.497H838.726V203.472H788.025V217.02H845.5V257.663H742.044V112.332Z" fill="rgb(var(--black))"/>
-		<path d="M628.624 112.332H728.591V152.975H674.605V165.497H725.307V203.472H674.605V217.02H732.08V257.663H628.624V112.332Z" fill="rgb(var(--black))"/>
-		<path d="M493.115 257.663H443.85L404.233 112.332H455.961L471.562 194.029H472.383L489.215 112.332H540.327L558.597 194.029H559.418L575.223 112.332H625.309L584.871 257.663H535.606L515.079 175.555H514.258L493.115 257.663Z" fill="rgb(var(--black))"/>
-		<circle cx="129.461" cy="203.233" r="11.0309" fill="rgb(var(--white))"/>
-		<circle cx="195.646" cy="203.233" r="11.0309" fill="rgb(var(--white))"/>
-		<path d="M130.703 243.68C137.061 254.67 148.944 262.065 162.554 262.065C176.164 262.065 188.047 254.67 194.404 243.68" stroke="rgb(var(--white))" stroke-width="11.0309" stroke-linecap="round"/>
-		<path fill-rule="evenodd" clip-rule="evenodd" d="M38.6944 102.647C37.829 107.433 37.3809 112.329 37.3809 117.309C37.3809 173.024 93.4641 218.191 162.646 218.191C231.828 218.191 287.912 173.024 287.912 117.309C287.912 112.328 287.463 107.431 286.597 102.643C281.122 83.8551 271.492 66.838 258.767 52.6536C259.07 54.735 259.225 56.8453 259.225 58.9798C259.225 94.6271 215.985 123.525 162.646 123.525C109.307 123.525 66.0676 94.6271 66.0676 58.9798C66.0676 56.8455 66.2226 54.7353 66.5256 52.654C53.8002 66.8393 44.1692 83.8574 38.6944 102.647Z" fill="rgb(var(--main))"/>
-		<path d="M33.5559 210.43C33.5559 281.725 91.3516 339.521 162.646 339.521C233.941 339.521 291.736 281.725 291.736 210.43C291.736 139.136 233.941 81.3402 162.646 81.3402C91.3516 81.3402 33.5559 139.136 33.5559 210.43Z" fill="rgb(var(--main))"/>
-		<path d="M109.535 210.431C109.535 239.763 133.314 263.541 162.646 263.541C191.978 263.541 215.757 239.763 215.757 210.431C215.757 181.098 191.978 157.32 162.646 157.32C133.314 157.32 109.535 181.098 109.535 210.431Z" fill="rgb(var(--main))" stroke="rgb(var(--white))" stroke-width="20"/>
-		<path d="M313.505 257.496C300.872 250.892 281.532 243.123 259.031 240.402C255.873 240.014 254.689 236.128 257.057 234.185C263.373 229.134 269.293 223.307 274.819 217.09C306.792 181.736 319.819 138.614 324.555 115.304C326.132 107.534 318.635 100.93 311.135 103.648C288.24 111.03 246.005 128.899 214.031 164.253C212.453 165.806 210.873 167.749 209.689 169.304C207.321 172.025 202.978 170.47 203.372 166.974C204.162 159.205 204.556 151.435 204.556 143.275C204.556 83.8351 184.426 32.5532 172.187 6.52374C168.635 -1.24554 157.186 -1.24554 153.24 6.52374C141.005 32.5532 120.871 84.2236 120.871 143.275C120.871 151.435 121.265 159.205 122.055 166.974C122.449 170.47 118.107 172.025 115.739 169.304C114.161 167.752 112.974 165.809 111.397 164.253C79.4241 128.899 37.1872 111.417 14.2928 103.648C6.79216 101.317 -0.707728 107.534 0.872606 115.304C6.00495 138.615 19.0316 181.738 50.608 217.09C56.1341 223.307 62.4506 229.133 68.3702 234.185C70.7381 236.128 69.5542 240.011 66.396 240.402C43.8949 243.122 24.5552 251.28 11.9224 257.496C4.42181 261.382 4.42181 271.87 11.9224 275.369C27.3169 283.138 52.973 293.628 81.7905 293.628C88.5005 293.628 94.8166 293.241 101.133 292.075C104.291 291.688 106.265 295.184 104.685 297.514C99.1589 305.283 95.2107 313.443 92.0521 320.047C88.8939 328.207 96.3943 336.364 105.078 333.646C116.524 329.76 131.131 323.156 143.761 311.5C146.526 309.17 148.894 306.449 150.865 304.118L146.917 356.567C146.523 363.171 152.049 369 158.759 369H166.26C172.97 369 178.496 363.174 178.102 356.567L174.154 304.118C176.522 306.839 178.89 309.169 181.258 311.5C193.494 323.156 208.495 329.76 219.941 333.646C228.231 336.367 236.125 328.207 232.967 320.047C230.202 313.055 226.257 305.283 220.334 297.514C218.36 294.793 220.728 291.298 223.886 292.075C230.202 292.853 236.519 293.628 243.228 293.628C272.043 293.628 297.702 283.528 313.096 275.369C321.007 271.483 321.007 261.38 313.507 257.496H313.505Z" fill="rgb(var(--black))"/>
-		<circle cx="129.566" cy="203.264" r="11.0491" fill="rgb(var(--white))"/>
-		<circle cx="195.86" cy="203.264" r="11.0491" fill="rgb(var(--white))"/>
-		<path d="M130.81 243.777C137.179 254.786 149.081 262.192 162.713 262.192C176.346 262.192 188.248 254.786 194.617 243.777" stroke="rgb(var(--white))" stroke-width="19.6291" stroke-linecap="round"/>
-	</svg>
-</template>
+<svg width="967" height="256" viewBox="0 0 967 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M928.525 111.166C924.605 107.336 922.645 102.059 922.645 95.3342C922.645 88.5916 924.605 83.3143 928.525 79.5024C932.463 75.6906 937.776 73.7847 944.464 73.7847C951.171 73.7847 956.484 75.6906 960.404 79.5024C964.324 83.3143 966.284 88.5916 966.284 95.3342C966.284 102.059 964.324 107.327 960.404 111.139C956.484 114.951 951.171 116.857 944.464 116.857C937.776 116.857 932.463 114.96 928.525 111.166ZM955.603 83.8447C952.978 81.0038 949.265 79.5834 944.464 79.5834C939.682 79.5834 935.969 81.0038 933.326 83.8447C930.7 86.6677 929.388 90.4975 929.388 95.3342C929.388 100.153 930.7 103.983 933.326 106.824C935.969 109.647 939.682 111.058 944.464 111.058C949.265 111.058 952.978 109.647 955.603 106.824C958.246 103.983 959.568 100.153 959.568 95.3342C959.568 90.4975 958.246 86.6677 955.603 83.8447ZM934.863 103.938V86.5957C934.863 86.2361 934.989 85.9394 935.241 85.7057C935.51 85.454 935.825 85.3281 936.184 85.3281H947.836C949.975 85.3281 951.738 85.9035 953.122 87.0542C954.507 88.187 955.199 89.7063 955.199 91.6123C955.199 94.3453 953.428 96.0444 949.886 96.7097C950.839 97.0693 951.908 98.1392 953.095 99.9192L955.684 103.938C955.864 104.279 955.954 104.558 955.954 104.774C955.954 105.098 955.702 105.259 955.199 105.259H951.827C950.91 105.259 950.173 104.819 949.616 103.938L947.242 100.243C946.254 98.7325 945.058 97.9773 943.655 97.9773H940.176V103.938C940.176 104.315 940.041 104.63 939.772 104.882C939.52 105.134 939.214 105.259 938.855 105.259H936.184C935.825 105.259 935.51 105.134 935.241 104.882C934.989 104.63 934.863 104.315 934.863 103.938ZM940.176 94.0666H946.191C947.18 94.0666 948.043 93.8778 948.78 93.5002C949.517 93.1046 949.886 92.4843 949.886 91.6392C949.886 90.7762 949.517 90.1648 948.78 89.8052C948.043 89.4276 947.18 89.2389 946.191 89.2389H940.176V94.0666Z"  :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'"/>
+<rect width="256" height="256" rx="79" fill="#00FF29"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.4972 57C35.9279 57 34.6558 58.2722 34.6558 59.8414V165.749C34.6558 167.11 34.8078 168.435 35.096 169.709L35.096 178.654C35.096 206.051 57.3064 228.262 84.7042 228.262H98.7239C110.58 228.262 121.465 224.103 129.999 217.164C138.533 224.103 149.417 228.262 161.273 228.262H175.293C202.691 228.262 224.901 206.052 224.901 178.654V176.502C225.185 175.572 225.338 174.585 225.338 173.562V160.089C225.339 159.989 225.34 159.89 225.34 159.79C225.34 159.69 225.339 159.591 225.338 159.492V89.9116C225.338 71.735 210.603 57 192.426 57C190.857 57 189.585 58.2722 189.585 59.8414V83.7981C189.586 83.9041 189.587 84.0102 189.587 84.1165V169.03C189.587 180.548 180.249 189.886 168.731 189.886C157.213 189.886 147.875 180.548 147.875 169.03V104.993L147.873 104.994V89.9116C147.873 71.735 133.138 57 114.962 57C113.392 57 112.12 58.2722 112.12 59.8414V83.7946C112.122 83.9017 112.123 84.009 112.123 84.1165V169.03C112.123 180.548 102.785 189.886 91.2667 189.886C79.7483 189.886 70.4107 180.548 70.4107 169.03V105.253C70.4101 105.253 70.4095 105.253 70.4088 105.254V89.9116C70.4088 71.735 55.6738 57 37.4972 57Z" fill="#00FF29"/>
+<path d="M35.096 169.709L43.3864 169.709L43.3864 168.783L43.1822 167.88L35.096 169.709ZM35.096 178.654L43.3864 178.654L35.096 178.654ZM84.7042 228.262L84.7042 236.552H84.7042V228.262ZM129.999 217.164L135.229 210.731L129.999 206.478L124.768 210.731L129.999 217.164ZM224.901 176.502L216.972 174.084L216.611 175.266V176.502H224.901ZM225.338 160.089L217.048 159.987L217.047 160.038V160.089H225.338ZM225.338 159.492H217.047V159.542L217.048 159.593L225.338 159.492ZM189.585 83.7981H181.294V83.8602L181.295 83.9223L189.585 83.7981ZM147.875 104.993H156.166V94.0714L145.646 97.0081L147.875 104.993ZM147.873 104.994H139.583V115.916L150.102 112.979L147.873 104.994ZM112.12 83.7946H103.83V83.8572L103.831 83.9198L112.12 83.7946ZM70.4107 105.253H78.7012V94.0779L68.0064 97.3188L70.4107 105.253ZM70.4088 105.254H62.1184V116.428L72.8131 113.188L70.4088 105.254ZM42.9462 59.8414C42.9462 62.8508 40.5066 65.2904 37.4972 65.2904V48.7096C31.3492 48.7096 26.3653 53.6935 26.3653 59.8414H42.9462ZM42.9462 165.749V59.8414H26.3653V165.749H42.9462ZM43.1822 167.88C43.0289 167.203 42.9462 166.49 42.9462 165.749H26.3653C26.3653 167.729 26.5868 169.668 27.0097 171.538L43.1822 167.88ZM43.3864 178.654L43.3864 169.709L26.8055 169.709L26.8055 178.654L43.3864 178.654ZM84.7042 219.971C61.885 219.971 43.3864 201.473 43.3864 178.654L26.8055 178.654C26.8055 210.63 52.7277 236.552 84.7042 236.552L84.7042 219.971ZM98.7239 219.971H84.7042V236.552H98.7239V219.971ZM124.768 210.731C117.659 216.512 108.606 219.971 98.7239 219.971V236.552C112.554 236.552 125.271 231.693 135.229 223.596L124.768 210.731ZM161.273 219.971C151.391 219.971 142.339 216.512 135.229 210.731L124.768 223.596C134.726 231.693 147.444 236.552 161.273 236.552V219.971ZM175.293 219.971H161.273V236.552H175.293V219.971ZM216.611 178.654C216.611 201.473 198.112 219.971 175.293 219.971V236.552C207.27 236.552 233.192 210.63 233.192 178.654H216.611ZM216.611 176.502V178.654H233.192V176.502H216.611ZM217.047 173.562C217.047 173.756 217.019 173.929 216.972 174.084L232.831 178.921C233.351 177.216 233.628 175.414 233.628 173.562H217.047ZM217.047 160.089V173.562H233.628V160.089H217.047ZM217.049 159.79C217.049 159.856 217.049 159.921 217.048 159.987L233.628 160.19C233.629 160.057 233.63 159.924 233.63 159.79H217.049ZM217.048 159.593C217.049 159.659 217.049 159.724 217.049 159.79H233.63C233.63 159.657 233.629 159.523 233.628 159.39L217.048 159.593ZM217.047 89.9116V159.492H233.628V89.9116H217.047ZM192.426 65.2904C206.024 65.2904 217.047 76.3137 217.047 89.9116H233.628C233.628 67.1563 215.181 48.7096 192.426 48.7096V65.2904ZM197.875 59.8414C197.875 62.8508 195.435 65.2904 192.426 65.2904V48.7096C186.278 48.7096 181.294 53.6935 181.294 59.8414H197.875ZM197.875 83.7981V59.8414H181.294V83.7981H197.875ZM197.877 84.1165C197.877 83.9689 197.876 83.8214 197.874 83.674L181.295 83.9223C181.296 83.9867 181.297 84.0514 181.297 84.1165H197.877ZM197.877 169.03V84.1165H181.297V169.03H197.877ZM168.731 198.176C184.828 198.176 197.877 185.127 197.877 169.03H181.297C181.297 175.97 175.671 181.596 168.731 181.596V198.176ZM139.585 169.03C139.585 185.127 152.634 198.176 168.731 198.176V181.596C161.791 181.596 156.166 175.97 156.166 169.03H139.585ZM139.585 104.993V169.03H156.166V104.993H139.585ZM150.102 112.979L150.104 112.978L145.646 97.0081L145.644 97.0087L150.102 112.979ZM139.583 89.9116V104.994H156.164V89.9116H139.583ZM114.962 65.2904C128.56 65.2904 139.583 76.3137 139.583 89.9116H156.164C156.164 67.1563 137.717 48.7096 114.962 48.7096V65.2904ZM120.411 59.8414C120.411 62.8508 117.971 65.2904 114.962 65.2904V48.7096C108.814 48.7096 103.83 53.6935 103.83 59.8414H120.411ZM120.411 83.7946V59.8414H103.83V83.7946H120.411ZM103.831 83.9198C103.832 83.9854 103.832 84.051 103.832 84.1165H120.413C120.413 83.967 120.412 83.818 120.41 83.6694L103.831 83.9198ZM103.832 84.1165V169.03H120.413V84.1165H103.832ZM103.832 169.03C103.832 175.97 98.2064 181.596 91.2667 181.596V198.176C107.364 198.176 120.413 185.127 120.413 169.03H103.832ZM91.2667 181.596C84.3269 181.596 78.7012 175.97 78.7012 169.03H62.1203C62.1203 185.127 75.1696 198.176 91.2667 198.176V181.596ZM78.7012 169.03V105.253H62.1203V169.03H78.7012ZM72.8131 113.188C72.8039 113.19 72.7965 113.193 72.7921 113.194C72.7881 113.195 72.7847 113.196 72.7854 113.196C72.7854 113.196 72.7857 113.196 72.786 113.196C72.7863 113.196 72.7868 113.196 72.7874 113.195C72.7887 113.195 72.7906 113.194 72.793 113.194C72.7978 113.192 72.8055 113.19 72.815 113.187L68.0064 97.3188C68.0156 97.316 68.023 97.3138 68.0275 97.3124C68.0315 97.3112 68.0349 97.3102 68.0341 97.3104C68.0341 97.3104 68.0339 97.3105 68.0336 97.3106C68.0332 97.3107 68.0327 97.3109 68.0321 97.311C68.0309 97.3114 68.0289 97.312 68.0265 97.3127C68.0218 97.3141 68.0141 97.3165 68.0045 97.3193L72.8131 113.188ZM62.1184 89.9116V105.254H78.6993V89.9116H62.1184ZM37.4972 65.2904C51.0951 65.2904 62.1184 76.3137 62.1184 89.9116H78.6993C78.6993 67.1563 60.2525 48.7096 37.4972 48.7096V65.2904Z" fill="#E9FFEC"/>
+<path d="M294.95 87.9085C294.69 87.2846 294.56 86.5828 294.56 85.8029C294.56 84.9711 295.002 84.0353 295.885 82.9955C296.821 81.9037 298.199 81.3578 300.019 81.3578H317.097C319.125 81.3578 320.996 82.0597 322.712 83.4634C324.428 84.8671 325.649 86.6347 326.377 88.7663L346.965 150.53L365.993 88.7663C367.501 83.8273 370.595 81.3578 375.274 81.3578H389.623C394.302 81.3578 397.395 83.8273 398.903 88.7663L417.931 150.53L438.519 88.7663C439.247 86.6347 440.469 84.8671 442.184 83.4634C443.9 82.0597 445.772 81.3578 447.799 81.3578H464.878C466.645 81.3578 467.971 81.9037 468.855 82.9955C469.791 84.0353 470.259 84.9711 470.259 85.8029C470.259 86.5828 470.155 87.2846 469.947 87.9085L435.166 185.233C433.242 190.536 429.499 193.188 423.936 193.188H412.628C406.857 193.188 403.14 190.536 401.476 185.233L382.448 125.185L363.42 185.233C361.704 190.536 357.987 193.188 352.268 193.188H340.882C335.372 193.188 331.654 190.536 329.731 185.233L294.95 87.9085ZM476.778 183.361C468.772 175.771 464.769 164.853 464.769 150.608C464.769 136.311 468.798 125.341 476.856 117.699C484.915 110.004 496.092 106.157 510.389 106.157C524.687 106.157 535.838 109.9 543.845 117.387C551.851 124.821 555.854 135.505 555.854 149.438V153.883C555.854 155.287 555.386 156.457 554.451 157.393C553.567 158.276 552.423 158.718 551.019 158.718H492.297C492.817 165.113 494.637 169.766 497.756 172.678C500.927 175.589 505.97 177.045 512.885 177.045C519.8 177.045 524.531 175.485 527.078 172.366C529.626 169.246 532.771 167.661 536.514 167.609H548.134C549.538 167.609 550.681 168.077 551.565 169.012C552.501 169.896 552.969 171.04 552.969 172.444C552.969 187.365 538.75 194.799 510.311 194.747C495.962 194.747 484.785 190.952 476.778 183.361ZM492.141 142.264H528.404C527.884 129.994 521.853 123.859 510.311 123.859C498.822 123.859 492.765 129.994 492.141 142.264ZM569.393 183.361C561.386 175.771 557.383 164.853 557.383 150.608C557.383 136.311 561.412 125.341 569.47 117.699C577.529 110.004 588.707 106.157 603.004 106.157C617.301 106.157 628.453 109.9 636.459 117.387C644.466 124.821 648.469 135.505 648.469 149.438V153.883C648.469 155.287 648.001 156.457 647.065 157.393C646.181 158.276 645.037 158.718 643.634 158.718H584.911C585.431 165.113 587.251 169.766 590.37 172.678C593.542 175.589 598.585 177.045 605.499 177.045C612.414 177.045 617.145 175.485 619.692 172.366C622.24 169.246 625.385 167.661 629.129 167.609H640.748C642.152 167.609 643.296 168.077 644.18 169.012C645.115 169.896 645.583 171.04 645.583 172.444C645.583 187.365 631.364 194.799 602.926 194.747C588.577 194.747 577.399 190.952 569.393 183.361ZM584.755 142.264H621.018C620.498 129.994 614.468 123.859 602.926 123.859C591.436 123.859 585.379 129.994 584.755 142.264ZM688.21 194.747C677.344 194.747 668.246 190.926 660.915 183.283C653.636 175.641 649.997 164.697 649.997 150.452C649.997 136.155 653.766 125.211 661.305 117.621C668.895 109.978 679.085 106.157 691.875 106.157C698.478 106.157 705.99 107.483 714.412 110.134V86.1928C714.412 84.7891 714.854 83.6453 715.738 82.7615C716.674 81.8257 717.818 81.3578 719.169 81.3578H736.56C737.964 81.3578 739.107 81.8257 739.991 82.7615C740.927 83.6453 741.395 84.7891 741.395 86.1928V188.43C741.395 189.782 740.927 190.926 739.991 191.862C739.107 192.746 737.964 193.188 736.56 193.188H721.587C720.183 193.188 719.039 192.746 718.156 191.862C717.272 190.926 716.83 189.782 716.83 188.43V186.013C708.616 191.836 699.075 194.747 688.21 194.747ZM697.49 125.029C690.315 125.029 685.246 127.057 682.283 131.112C679.319 135.115 677.838 141.562 677.838 150.452C677.838 159.342 679.241 165.815 682.049 169.87C684.856 173.925 689.067 175.953 694.682 175.953C700.349 175.953 706.926 173.613 714.412 168.934V128.148C707.706 126.069 702.065 125.029 697.49 125.029ZM759.768 183.361C751.762 175.771 747.759 164.853 747.759 150.608C747.759 136.311 751.788 125.341 759.846 117.699C767.905 110.004 779.082 106.157 793.379 106.157C807.677 106.157 818.828 109.9 826.835 117.387C834.841 124.821 838.844 135.505 838.844 149.438V153.883C838.844 155.287 838.376 156.457 837.441 157.393C836.557 158.276 835.413 158.718 834.009 158.718H775.287C775.807 165.113 777.627 169.766 780.746 172.678C783.917 175.589 788.96 177.045 795.875 177.045C802.79 177.045 807.521 175.485 810.068 172.366C812.616 169.246 815.761 167.661 819.504 167.609H831.124C832.528 167.609 833.671 168.077 834.555 169.012C835.491 169.896 835.959 171.04 835.959 172.444C835.959 187.365 821.74 194.799 793.301 194.747C778.952 194.747 767.775 190.952 759.768 183.361ZM775.131 142.264H811.394C810.874 129.994 804.843 123.859 793.301 123.859C781.812 123.859 775.755 129.994 775.131 142.264ZM904.32 127.525L892.311 127.057C885.292 127.057 878.585 130.904 872.191 138.598V188.43C872.191 189.834 871.723 190.978 870.787 191.862C869.903 192.746 868.785 193.188 867.434 193.188H849.965C848.561 193.188 847.417 192.746 846.534 191.862C845.65 190.978 845.208 189.834 845.208 188.43V112.552C845.208 111.148 845.65 110.004 846.534 109.12C847.469 108.184 848.613 107.717 849.965 107.717H867.434C868.837 107.717 869.981 108.184 870.865 109.12C871.749 110.004 872.191 111.148 872.191 112.552V117.465C877.493 113.617 882.588 110.784 887.476 108.964C892.415 107.093 898.861 106.157 906.816 106.157C908.219 106.157 909.363 106.625 910.247 107.561C911.183 108.444 911.651 109.562 911.651 110.914V122.768C911.651 124.171 911.183 125.315 910.247 126.199C909.363 127.083 908.219 127.525 906.816 127.525H904.32Z"  :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'"/>
+</svg>
+
+
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  },
+	  theme: {
+    	type: String,
+	    default: "light"
+    }
+	})
+</script>

package/src/modules/icons/navigation/IconCalendar.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <path d="M3 43.5V18H45V43.5C45 45.9375 42.9375 48 40.5 48H7.5C5.0625 48 3 45.9375 3 43.5ZM33 25.5V28.5C33 29.3438 33.6562 30 34.5 30H37.5C38.3438 30 39 29.3438 39 28.5V25.5C39 24.6562 38.3438 24 37.5 24H34.5C33.6562 24 33 24.6562 33 25.5ZM33 37.5V40.5C33 41.3438 33.6562 42 34.5 42H37.5C38.3438 42 39 41.3438 39 40.5V37.5C39 36.6562 38.3438 36 37.5 36H34.5C33.6562 36 33 36.6562 33 37.5ZM21 25.5V28.5C21 29.3438 21.6562 30 22.5 30H25.5C26.3438 30 27 29.3438 27 28.5V25.5C27 24.6562 26.3438 24 25.5 24H22.5C21.6562 24 21 24.6562 21 25.5ZM21 37.5V40.5C21 41.3438 21.6562 42 22.5 42H25.5C26.3438 42 27 41.3438 27 40.5V37.5C27 36.6562 26.3438 36 25.5 36H22.5C21.6562 36 21 36.6562 21 37.5ZM9 25.5V28.5C9 29.3438 9.65625 30 10.5 30H13.5C14.3438 30 15 29.3438 15 28.5V25.5C15 24.6562 14.3438 24 13.5 24H10.5C9.65625 24 9 24.6562 9 25.5ZM9 37.5V40.5C9 41.3438 9.65625 42 10.5 42H13.5C14.3438 42 15 41.3438 15 40.5V37.5C15 36.6562 14.3438 36 13.5 36H10.5C9.65625 36 9 36.6562 9 37.5ZM40.5 6C42.9375 6 45 8.0625 45 10.5V15H3V10.5C3 8.0625 5.0625 6 7.5 6H12V1.5C12 0.65625 12.6562 0 13.5 0H16.5C17.3438 0 18 0.65625 18 1.5V6H30V1.5C30 0.65625 30.6562 0 31.5 0H34.5C35.3438 0 36 0.65625 36 1.5V6H40.5Z" :fill="fill"/>
+  </svg>
+</template>
+
+<script setup>
+  const props = defineProps({
+    fill: {
+      type: String,
+      default: 'rgb(var(--black))'
+    },
+    order: {
+      type: String,
+      default: 'desc'
+    }
+  })
+</script>

package/src/modules/icons/navigation/IconFilter.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <path d="M46.4267 13.1341L29.226 30.2782V43.1433C29.2272 43.5293 29.1102 43.9065 28.8907 44.2239C28.6711 44.5414 28.3596 44.784 27.998 44.9191L20.5831 47.6868C20.2976 47.7934 19.9905 47.8294 19.6881 47.7917C19.3856 47.754 19.0968 47.6437 18.8462 47.4701C18.5957 47.2966 18.3908 47.065 18.2492 46.7952C18.1075 46.5253 18.0332 46.2252 18.0327 45.9204V30.2498L1.50259 13.0491C0.772898 12.2954 0.281511 11.3434 0.0898392 10.312C-0.101832 9.28058 0.0147126 8.21558 0.424909 7.25005C0.835106 6.28453 1.52076 5.46131 2.39619 4.88327C3.27161 4.30523 4.29798 3.99801 5.34702 4.00001H42.6579C43.7158 4.00084 44.7497 4.31552 45.6287 4.90422C46.5077 5.49291 47.1923 6.32916 47.5958 7.30712C47.9993 8.28507 48.1036 9.36075 47.8955 10.398C47.6874 11.4353 47.1763 12.3875 46.4267 13.1341Z" :fill="fill"/>
+  </svg>
+</template>
+
+<script setup>
+  const props = defineProps({
+    fill: {
+      type: String,
+      default: 'rgb(var(--black))'
+    },
+    order: {
+      type: String,
+      default: 'desc'
+    }
+  })
+</script>

package/src/modules/icons/navigation/IconSearch.vue

@@ -12,6 +12,4 @@
 	    default: 'rgb(var(--black))'
 	  }
 	})
-</script>
-
-`
+</script>

package/src/modules/icons/navigation/IconSort.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+    <rect y="0" :width="order === 'desc' ? 32 : 8" height="5" rx="2.5" :fill="fill"  class="transition-linear"/>
+    <rect y="9" :width="order === 'desc' ? 24 : 16" height="5" rx="2.5" :fill="fill"  class="transition-linear"/>
+    <rect y="18" :width="order === 'desc' ? 16 : 24" height="5" rx="2.5" :fill="fill"  class="transition-linear"/>
+    <rect y="27" :width="order === 'desc' ? 8 : 32" height="5" rx="2.5" :fill="fill"  class="transition-linear"/>
+  </svg>
+</template>
+
+<script setup>
+  const props = defineProps({
+    fill: {
+      type: String,
+      default: 'rgb(var(--black))'
+    },
+    order: {
+      type: String,
+      default: 'desc'
+    }
+  })
+</script>

package/src/modules/landing/components/pages/Home.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="">
 		<HeroRecommendation/>
 		<MenuSection/>
 		<PopularProducts/>
@@ -7,8 +7,8 @@
 		<SectionsSection/>
 		<SectionEarn/>
 		<SectionFeatures/>
-		<MobileApp/>
-		<JoinUs/>
+		<MobileApp id="mobile-app"/>
+		<!-- <JoinUs/> -->
 		<SubscribeNewsletter/>
 		<FeaturedUsers/>
 		<div class="pd-thin">
@@ -38,7 +38,7 @@
 	import FeaturedUsers from '@pf/src/modules/users/components/sections/FeaturedUsers.vue' 
 	// Not working
 	import JoinUs 		from '@pf/src/modules/community/components/sections/JoinUs.vue'
-	import SubscribeNewsletter 		from '@pf/src/modules/orders/components/sections/SubscribeNewsletter.vue'
+	import SubscribeNewsletter 		from '@pf/src/modules/landing/components/sections/SubscribeNewsletter.vue'
 	// import HeroSection 			from '@pf/src/modules/landing/components/sections/HeroSection.vue'
 	// import HowItWorksSection  			from '@pf/src/modules/landing/components/sections/HowItWorksSection.vue'
 	import MapSection 			from '@pf/src/modules/landing/components/sections/MapSection.vue'

package/src/modules/landing/components/sections/FeatureSection.vue

@@ -10,11 +10,11 @@
       </div>
 
       <ul class="cols-2 gap-thin">      
-        <li class="pd-medium bg-grey radius-big p-big t-semi">{{t('friendly')}}</li>
-        <li class="pd-medium bg-grey radius-big p-big t-semi">{{t('fast')}}</li>
-        <li class="pd-medium bg-grey radius-big p-big t-semi">{{t('reasonable')}}</li>
-        <li class="pd-medium bg-grey radius-big p-big t-semi">{{t('premium')}}</li>
-        <li class="pd-medium bg-grey radius-big p-big t-semi">{{t('refund')}}</li>
+        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('friendly')}}</li>
+        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('fast')}}</li>
+        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('reasonable')}}</li>
+        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('premium')}}</li>
+        <li class="pd-medium bg-light radius-big p-big t-semi">{{t('refund')}}</li>
       </ul>
 
     </section>

package/src/modules/landing/components/sections/HowToBuyWDR.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="cols-2 gap-thin">
+  <section id="howtoget" class="cols-2 gap-thin">
     <div class="pd-big bg-main radius-big">
       <h2 class="mn-b-small">{{ t('buyTokenTitle') }}</h2>
       <p class="mn-b-semi p-big t-transp">{{ t('description') }}</p>
@@ -19,7 +19,7 @@
         {{ t('privateRoundText2') }}
     </div>
 
-    <div class="flex-column pd-big flex-nowrap flex h-100 bg-grey radius-big o-hidden coming-soon">
+    <div class="flex-column pd-big flex-nowrap flex h-100 bg-light radius-big o-hidden coming-soon">
       <div class="
         w-100 h-100
         rainbow

package/src/modules/landing/components/sections/SectionFeature.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="o-hidden bg-grey pos-relative radius-big cols-2">
-		<div style="min-height: 20rem;" :class="{'order-2':order}" class="pos-relative w-100 h-100 bg-grey">
+	<div class="o-hidden bg-light pos-relative radius-big cols-2">
+		<div style="min-height: 20rem;" :class="{'order-2':order}" class="pos-relative w-100 h-100 bg-light">
 			<img class="w-100 h-100 object-fit-cover pos-absolute" :src="image">
 		</div>   
    <div class="pd-big flex-column flex w-100 h-100 gap-zero">

package/src/modules/landing/components/sections/SectionFeaturesImages.vue

@@ -13,10 +13,10 @@
       <div 
         v-for="feature in tm('features')" 
         :key="feature.title" 
-        class="w-100 pd-medium bg-grey radius-big"
+        class="w-100 pd-medium bg-light radius-big"
       >
         <img 
-          class="radius-medium bg-grey h-max-20r object-fit-cover w-100 mn-b-medium" 
+          class="radius-medium bg-light h-max-20r object-fit-cover w-100 mn-b-medium" 
           :src="feature.image"
         > 
         <h3 class="mn-b-medium">{{feature.title}}</h3>