@ozdao/prometheus-framework 0.2.320 → 0.2.322

package/dist/prometheus-framework/src/modules/wallet/views/components/elements/ConnectMetamask.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectMetamask.vue.js","sources":["../../../../../../../../src/modules/wallet/views/components/elements/ConnectMetamask.vue"],"sourcesContent":["<template>\n  <div>\n    <!-- Connect Metamask -->\n    <button \n      v-if=\"!isMetaMaskInstalled\"\n      @click=\"connectMetaMask\" \n      class=\"transition-ease-in-out cursor-pointer  bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white\"\n    >\n      <img loading=\"lazy\" :src=\"'/icons/metamask.svg'\" class=\"mn-r-small i-big\" >\n      <span class=\"h4 uppercase w-100\">{{ t('wallet.connectMetaMask') }}</span>\n      <IconAdd  class=\"t-transp\"   fill=\"rgb(var(--white))\"/>\n    </button>\n\n    <template v-else>\n      <!-- Switch to Polygon -->\n      <button \n        v-if=\"!isPolygon\"\n        @click=\"switchToPolygon\" \n        class=\"transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black t-white radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small \"\n      >\n        <img loading=\"lazy\" :src=\"'/icons/metamask.svg'\" class=\"mn-r-small i-big\" >\n        <span class=\"h4 uppercase w-100\">{{ t('wallet.switchToPolygon') }}</span>\n        <IconAdd  class=\"t-transp\"  fill=\"rgb(var(--white))\" />\n      </button>\n      <!-- Add WDT to metamask -->\n      <button \n        v-if=\"isPolygon\"\n        @click=\"addWDT\" \n        class=\"transition-ease-in-out cursor-pointer hover-bg-white hover-t-black  bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white\"\n      >\n        <img loading=\"lazy\" :src=\"'/icons/metamask.svg'\" class=\"mn-r-small i-big\" >\n        <span class=\"h4 uppercase w-100\">{{ t('wallet.addToken') }}</span>\n        <IconAdd  class=\"hover-fill-black fill-white t-transp\"/>\n      </button>\n    </template>\n\n    <!-- <p class=\"mn-t-small\" v-if=\"error\">{{ error }}</p> -->\n\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, computed } from 'vue';\nimport { useI18n } from 'vue-i18n';\n\nimport text from '@pf/src/modules/wallet/views/localization/wallet.json'\n\nimport IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue'\n\nconst isMetaMaskInstalled = ref(false);\nconst isPolygon = ref(false);\nconst loading = ref(false);\nconst error = ref(null);\nconst buttonStyle = ref({});\n\nconst tokenAddress = '0xE11702CF04621D395E75680C29d3dbF81484e875'; \nconst tokenSymbol = 'WDT';\nconst tokenDecimals = 8;\nconst tokenImage = 'https://weeder.delivery/logo-token.png';\n\nconst connectMetaMask = async () => {\n  if (typeof window.ethereum !== 'undefined') {\n    try {\n      await window.ethereum.request({ method: 'eth_requestAccounts' });\n      checkMetaMask();\n    } catch (error) {\n      console.error('Ошибка при подключении MetaMask:', error);\n    }\n  } else {\n    window.open('https://metamask.io/', '_blank');\n  }\n};\n\nconst checkMetaMask = async () => {\n  if (typeof window.ethereum !== 'undefined') {\n    isMetaMaskInstalled.value = true;\n    const chainId = await window.ethereum.request({ method: 'eth_chainId' });\n    isPolygon.value = chainId === '0x89' || chainId === '0x13881';\n  } else {\n    isMetaMaskInstalled.value = false;\n  }\n};\n\nconst switchToPolygon = async () => {\n  try {\n    await window.ethereum.request({\n      method: 'wallet_switchEthereumChain',\n      params: [{ chainId: '0x89' }],\n    });\n    checkMetaMask();\n  } catch (error) {\n    console.error('Ошибка при переключении на Polygon:', error);\n  }\n};\n\nconst addWDT = async () => {\n  buttonStyle.value['pointer-events'] = 'none';\n  error.value = null;\n  loading.value = true;\n\n  try {\n    await ethereum.request({\n      method: 'wallet_watchAsset',\n      params: {\n        type: 'ERC20',\n        options: {\n          address: tokenAddress,\n          symbol: tokenSymbol,\n          decimals: tokenDecimals,\n          image: tokenImage,\n        },\n      },\n    });\n\n    buttonStyle.value['background-color'] = '#009911';\n    loading.value = false;\n  } catch (err) {\n    error.value = err.toString();\n  }\n};\n\nconst { t } = useI18n({\n  useScope: 'global', \n  ...text\n})\n\nonMounted(() => {\n  checkMetaMask();\n});\n\n</script>"],"names":["error"],"mappings":";;;;;;;AAuDA,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,aAAa;;;;AATnB,UAAM,sBAAsB,IAAI,KAAK;AACrC,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,UAAU,IAAI,KAAK;AACzB,UAAM,QAAQ,IAAI,IAAI;AACtB,UAAM,cAAc,IAAI,CAAA,CAAE;AAO1B,UAAM,kBAAkB,YAAY;AAClC,UAAI,OAAO,OAAO,aAAa,aAAa;AAC1C,YAAI;AACF,gBAAM,OAAO,SAAS,QAAQ,EAAE,QAAQ,sBAAqB,CAAE;AAC/D;QACD,SAAQA,QAAO;AACd,kBAAQ,MAAM,oCAAoCA,MAAK;AAAA,QACxD;AAAA,MACL,OAAS;AACL,eAAO,KAAK,wBAAwB,QAAQ;AAAA,MAC7C;AAAA,IACH;AAEA,UAAM,gBAAgB,YAAY;AAChC,UAAI,OAAO,OAAO,aAAa,aAAa;AAC1C,4BAAoB,QAAQ;AAC5B,cAAM,UAAU,MAAM,OAAO,SAAS,QAAQ,EAAE,QAAQ,cAAa,CAAE;AACvE,kBAAU,QAAQ,YAAY,UAAU,YAAY;AAAA,MACxD,OAAS;AACL,4BAAoB,QAAQ;AAAA,MAC7B;AAAA,IACH;AAEA,UAAM,kBAAkB,YAAY;AAClC,UAAI;AACF,cAAM,OAAO,SAAS,QAAQ;AAAA,UAC5B,QAAQ;AAAA,UACR,QAAQ,CAAC,EAAE,SAAS,QAAQ;AAAA,QAClC,CAAK;AACD;MACD,SAAQA,QAAO;AACd,gBAAQ,MAAM,uCAAuCA,MAAK;AAAA,MAC3D;AAAA,IACH;AAEA,UAAM,SAAS,YAAY;AACzB,kBAAY,MAAM,gBAAgB,IAAI;AACtC,YAAM,QAAQ;AACd,cAAQ,QAAQ;AAEhB,UAAI;AACF,cAAM,SAAS,QAAQ;AAAA,UACrB,QAAQ;AAAA,UACR,QAAQ;AAAA,YACN,MAAM;AAAA,YACN,SAAS;AAAA,cACP,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,OAAO;AAAA,YACR;AAAA,UACF;AAAA,QACP,CAAK;AAED,oBAAY,MAAM,kBAAkB,IAAI;AACxC,gBAAQ,QAAQ;AAAA,MACjB,SAAQ,KAAK;AACZ,cAAM,QAAQ,IAAI;MACnB;AAAA,IACH;AAEA,UAAM,EAAE,EAAG,IAAG,QAAQ;AAAA,MACpB,UAAU;AAAA,MACV,GAAG;AAAA,IACL,CAAC;AAED,cAAU,MAAM;AACd;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ConnectMetamask.vue.js","sources":["../../../../../../../../src/modules/wallet/views/components/elements/ConnectMetamask.vue"],"sourcesContent":["<template>\n  <div>\n    <!-- Connect Metamask -->\n    <button \n      v-if=\"!isMetaMaskInstalled\"\n      @click=\"connectMetaMask\" \n      class=\"transition-ease-in-out cursor-pointer bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white\"\n    >\n      <img loading=\"lazy\" :src=\"metamaskIcon\" class=\"mn-r-small i-big\">\n      <span class=\"h4 uppercase w-100\">{{ t('connectMetaMask') }}</span>\n      <IconAdd class=\"t-transp\" fill=\"rgb(var(--white))\"/>\n    </button>\n    <template v-else>\n      <!-- Switch to Polygon -->\n      <button \n        v-if=\"!isPolygon\"\n        @click=\"switchToPolygon\" \n        class=\"transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black t-white radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small\"\n      >\n        <img loading=\"lazy\" :src=\"metamaskIcon\" class=\"mn-r-small i-big\">\n        <span class=\"h4 uppercase w-100\">{{ t('switchToPolygon') }}</span>\n        <IconAdd class=\"t-transp\" fill=\"rgb(var(--white))\"/>\n      </button>\n      <!-- Add Token to metamask -->\n      <button \n        v-if=\"isPolygon\"\n        @click=\"addToken\" \n        class=\"transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white\"\n      >\n        <img loading=\"lazy\" :src=\"metamaskIcon\" class=\"mn-r-small i-big\">\n        <span class=\"h4 uppercase w-100\">{{ t('addToken') }}</span>\n        <IconAdd class=\"hover-fill-black fill-white t-transp\"/>\n      </button>\n    </template>\n    <p class=\"mn-t-small\" v-if=\"error\">{{ error }}</p>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, computed } from 'vue';\nimport { useI18n } from 'vue-i18n';\n\nimport IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue';\n\nconst props = defineProps({\n  // Token configuration\n  tokenAddress: {\n    type: String,\n    required: true\n  },\n  tokenSymbol: {\n    type: String,\n    required: true\n  },\n  tokenImage: {\n    type: String,\n    required: true\n  },\n  tokenDecimals: {\n    type: Number,\n    default: 18\n  },\n  // Chain configuration\n  targetChainId: {\n    type: String,\n    default: '0x89' // Polygon Mainnet by default\n  },\n  // UI configuration\n  metamaskIcon: {\n    type: String,\n    default: '/icons/metamask.svg'\n  },\n  content: {\n    type: Object,\n    default: () => ({\n      en: {\n        \"connectMetaMask\": \"Connect MetaMask\",\n        \"switchToPolygon\": \"Switch to Polygon\",\n        \"addToken\": `Add token to MetaMask`,\n      }\n    })\n  }\n});\n\nconst isMetaMaskInstalled = ref(false);\nconst isPolygon = ref(false);\nconst loading = ref(false);\nconst error = ref(null);\nconst buttonStyle = ref({});\n\nconst connectMetaMask = async () => {\n  if (typeof window.ethereum !== 'undefined') {\n    try {\n      await window.ethereum.request({ method: 'eth_requestAccounts' });\n      checkMetaMask();\n    } catch (err) {\n      error.value = err.message;\n      console.error('Error connecting to MetaMask:', err);\n    }\n  } else {\n    window.open('https://metamask.io/', '_blank');\n  }\n};\n\nconst checkMetaMask = async () => {\n  if (typeof window.ethereum !== 'undefined') {\n    isMetaMaskInstalled.value = true;\n    const chainId = await window.ethereum.request({ method: 'eth_chainId' });\n    isPolygon.value = chainId === props.targetChainId;\n  } else {\n    isMetaMaskInstalled.value = false;\n  }\n};\n\nconst switchToPolygon = async () => {\n  try {\n    await window.ethereum.request({\n      method: 'wallet_switchEthereumChain',\n      params: [{ chainId: props.targetChainId }],\n    });\n    checkMetaMask();\n  } catch (err) {\n    error.value = err.message;\n    console.error('Error switching to Polygon:', err);\n  }\n};\n\nconst addToken = async () => {\n  buttonStyle.value['pointer-events'] = 'none';\n  error.value = null;\n  loading.value = true;\n  \n  try {\n    await ethereum.request({\n      method: 'wallet_watchAsset',\n      params: {\n        type: 'ERC20',\n        options: {\n          address: props.tokenAddress,\n          symbol: props.tokenSymbol,\n          decimals: props.tokenDecimals,\n          image: props.tokenImage,\n        },\n      },\n    });\n    buttonStyle.value['background-color'] = '#009911';\n    loading.value = false;\n  } catch (err) {\n    error.value = err.message;\n    loading.value = false;\n  }\n};\n\nconst { t } = useI18n({\n  messages: props.content\n});\n\nonMounted(() => {\n  checkMetaMask();\n});\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,UAAM,QAAQ;AAwCd,UAAM,sBAAsB,IAAI,KAAK;AACrC,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,UAAU,IAAI,KAAK;AACzB,UAAM,QAAQ,IAAI,IAAI;AACtB,UAAM,cAAc,IAAI,CAAA,CAAE;AAE1B,UAAM,kBAAkB,YAAY;AAClC,UAAI,OAAO,OAAO,aAAa,aAAa;AAC1C,YAAI;AACF,gBAAM,OAAO,SAAS,QAAQ,EAAE,QAAQ,sBAAqB,CAAE;AAC/D;QACD,SAAQ,KAAK;AACZ,gBAAM,QAAQ,IAAI;AAClB,kBAAQ,MAAM,iCAAiC,GAAG;AAAA,QACnD;AAAA,MACL,OAAS;AACL,eAAO,KAAK,wBAAwB,QAAQ;AAAA,MAC7C;AAAA,IACH;AAEA,UAAM,gBAAgB,YAAY;AAChC,UAAI,OAAO,OAAO,aAAa,aAAa;AAC1C,4BAAoB,QAAQ;AAC5B,cAAM,UAAU,MAAM,OAAO,SAAS,QAAQ,EAAE,QAAQ,cAAa,CAAE;AACvE,kBAAU,QAAQ,YAAY,MAAM;AAAA,MACxC,OAAS;AACL,4BAAoB,QAAQ;AAAA,MAC7B;AAAA,IACH;AAEA,UAAM,kBAAkB,YAAY;AAClC,UAAI;AACF,cAAM,OAAO,SAAS,QAAQ;AAAA,UAC5B,QAAQ;AAAA,UACR,QAAQ,CAAC,EAAE,SAAS,MAAM,cAAa,CAAE;AAAA,QAC/C,CAAK;AACD;MACD,SAAQ,KAAK;AACZ,cAAM,QAAQ,IAAI;AAClB,gBAAQ,MAAM,+BAA+B,GAAG;AAAA,MACjD;AAAA,IACH;AAEA,UAAM,WAAW,YAAY;AAC3B,kBAAY,MAAM,gBAAgB,IAAI;AACtC,YAAM,QAAQ;AACd,cAAQ,QAAQ;AAEhB,UAAI;AACF,cAAM,SAAS,QAAQ;AAAA,UACrB,QAAQ;AAAA,UACR,QAAQ;AAAA,YACN,MAAM;AAAA,YACN,SAAS;AAAA,cACP,SAAS,MAAM;AAAA,cACf,QAAQ,MAAM;AAAA,cACd,UAAU,MAAM;AAAA,cAChB,OAAO,MAAM;AAAA,YACd;AAAA,UACF;AAAA,QACP,CAAK;AACD,oBAAY,MAAM,kBAAkB,IAAI;AACxC,gBAAQ,QAAQ;AAAA,MACjB,SAAQ,KAAK;AACZ,cAAM,QAAQ,IAAI;AAClB,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACH;AAEA,UAAM,EAAE,EAAG,IAAG,QAAQ;AAAA,MACpB,UAAU,MAAM;AAAA,IAClB,CAAC;AAED,cAAU,MAAM;AACd;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/modules/wallet/views/localization/wallet.json.cjs

@@ -6,9 +6,6 @@ const messages = {
       title: "Your Wallet",
       subtitle: "Earn WDT by purchasing our weed or contributing to the community.",
       token: "WDT",
-      connectMetaMask: "Connect MetaMask",
-      switchToPolygon: "Switch to Polygon",
-      addToken: "Add WDT to MetaMask",
       pay: "pay",
       youReceived: "you received",
       enterAmount: "enter amount to top up",
@@ -22,9 +19,6 @@ const messages = {
     wallet: {
       title: "Ваш Кошелек",
       subtitle: "Зарабатывайте WDT, покупая товары или внося вклад в сообщество.",
-      connectMetaMask: "Подключить MetaMask",
-      switchToPolygon: "Переподключиться на Polygon",
-      addToken: "Добавить WDT в Metamask",
       pay: "купить",
       youReceived: "вы пополнили на сумму",
       enterAmount: "введите сумму для пополнения",

package/dist/prometheus-framework/src/modules/wallet/views/localization/wallet.json.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"wallet.json.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"wallet.json.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/modules/wallet/views/localization/wallet.json.js

@@ -4,9 +4,6 @@ const messages = {
       title: "Your Wallet",
       subtitle: "Earn WDT by purchasing our weed or contributing to the community.",
       token: "WDT",
-      connectMetaMask: "Connect MetaMask",
-      switchToPolygon: "Switch to Polygon",
-      addToken: "Add WDT to MetaMask",
       pay: "pay",
       youReceived: "you received",
       enterAmount: "enter amount to top up",
@@ -20,9 +17,6 @@ const messages = {
     wallet: {
       title: "Ваш Кошелек",
       subtitle: "Зарабатывайте WDT, покупая товары или внося вклад в сообщество.",
-      connectMetaMask: "Подключить MetaMask",
-      switchToPolygon: "Переподключиться на Polygon",
-      addToken: "Добавить WDT в Metamask",
       pay: "купить",
       youReceived: "вы пополнили на сумму",
       enterAmount: "введите сумму для пополнения",

package/dist/prometheus-framework/src/modules/wallet/views/localization/wallet.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"wallet.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"wallet.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/prometheus-framework",
-  "version": "0.2.320",
+  "version": "0.2.322",
   "description": "Web3 Framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/modules/auth/views/components/sections/SliderFeatures.vue

@@ -100,13 +100,7 @@ onMounted(async() => {
 </template>
 
 <style lang="scss">
-  .fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active в версии 2.1.8+ */ {
-  opacity: 0;
-}
-  .carousel__track {
+.carousel__track {
     height: 100%;
   }
 .carousel-controls {

package/src/modules/community/components/sections/HotPosts.vue

@@ -1,73 +1,76 @@
 <template>
-	<section class="pd-thin">
-    <div class="bg-light radius-big pd-t-big pd-b-big">
-
-  		<h2 class="w-100  pd-b-small  t-center flex-center flex">
-  			Discover Our 
-        <router-link 
-          :to="{ name:'Blog' }"
-          class="transition-ease-in hover-bg-black hover-t-white transition-timing-1 hover-scale-0 bg-main cursor-pointer pd-thin pd-r-small pd-l-small mn-l-thin radius-extra flex flex-v-center"
-        >
-           <b>Community</b>
-        </router-link>
-  		</h2>
-
-  		 <Slider
-        :store="{
-          read: (options) => blog.read(options)
-        }"
-        :options="{
-          skip: 0,
-          limit: 8,
-          user: auth.state.user._id,
-          period: 'year',
-          category: 'featured'
-        }"
-        :text="{
-          messages: {
-            en: {
-              title: 'No Blogposts Found',
-              description: 'Currently, there are no blogposts available.'
-            }
-          }
-        }"
-        v-slot="{ 
-          item
-        }"
-        class="slider-hotpost"
-      >
-        <CardBlogpost 
-          :key="item._id" 
-          :blogpost="item" 
-          :user="auth.state.user._id" 
-          :hideDescription="true"
-          class="bg-white flex flex-column h-35r"
-        />
-      </Slider>
-    </div>
-	</section>
+  <Slider
+    :store="{
+      read: (options) => blog.read({ 
+        skip, 
+        limit,
+        user: userId,
+        period,
+        category 
+      })
+    }"
+    :text="{
+      messages: {
+        en: {
+          title: 'No Blogposts Found',
+          description: 'Currently, there are no blogposts available.'
+        }
+      }
+    }"
+    v-slot="{ 
+      item
+    }"
+    class="slider-hotpost flex-child-default"
+  >
+    <CardBlogpost 
+      :key="item._id" 
+      :blogpost="item" 
+      :user="auth.state.user._id" 
+      :hideDescription="true"
+      class="bg-white flex flex-column h-35r"
+    />
+  </Slider>
 </template>
 
-<script setup="props">
-	import { ref, onMounted } from 'vue'
+<script setup>
+import { ref, onMounted, defineProps } from 'vue'
+import Feed from '@pf/src/components/Feed/Feed.vue'
+import Slider from '@pf/src/components/Slider/Slider.vue'
+import CardBlogpost from '@pf/src/modules/community/components/blocks/CardBlogpost.vue'
+import * as blog from '@pf/src/modules/community/store/blogposts.js'
+import * as auth from '@pf/src/modules/auth/views/store/auth'
 
-	import Feed from '@pf/src/components/Feed/Feed.vue'
-	import Slider from '@pf/src/components/Slider/Slider.vue'
-
-  import CardBlogpost from '@pf/src/modules/community/components/blocks/CardBlogpost.vue';
-	// Import state
-	import * as blog from '@pf/src/modules/community/store/blogposts.js';
-	import * as auth  from '@pf/src/modules/auth/views/store/auth'
+const props = defineProps({
+  skip: {
+    type: Number,
+    default: 0
+  },
+  limit: {
+    type: Number,
+    default: 8
+  },
+  userId: {
+    type: String,
+    default: () => auth.state.user._id
+  },
+  period: {
+    type: String,
+    default: 'year'
+  },
+  category: {
+    type: String,
+    default: 'featured'
+  }
+})
 </script>
 
-<style lang="scss" >
+<style lang="scss">
+.slider-hotpost .embla__slide {
+  flex: 0 0 25%;
+}
+@media screen and (max-width: 1025px) {
   .slider-hotpost .embla__slide {
-      flex: 0 0 25%;
-    }
-
-    @media screen and (max-width: 1025px) {
-      .slider-hotpost  .embla__slide {
-        flex: 0 0 75%;
-      }
-    }
+    flex: 0 0 75%;
+  }
+}
 </style>

package/src/modules/events/components/sections/List.vue

@@ -115,22 +115,4 @@
 </script>
 
 <style lang="scss">
-  .fade-move,
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-
-  /* 2. declare enter from and leave to state */
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-    transform: scaleY(0.01) translate(30px, 0);
-  }
-
-  /* 3. ensure leaving items are taken out of layout flow so that moving
-        animations can be calculated correctly. */
-  .fade-leave-active {
-    position: absolute;
-  }
 </style>

package/src/modules/globals/views/components/layouts/Client.vue

@@ -193,7 +193,34 @@
 	});
 </script>
 
-<style lang="scss">;	
+<style lang="scss">
+	.fade-enter-active, .fade-leave-active {
+	  transition: opacity .5s;
+	}
+	.fade-enter, .fade-leave-to /* .fade-leave-active в версии 2.1.8+ */ {
+	  opacity: 0;
+	}
+
+	
+  .fade-move,
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+  }
+
+  /* 2. declare enter from and leave to state */
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+    transform: translate(30px, 0);
+  }
+
+  /* 3. ensure leaving items are taken out of layout flow so that moving
+        animations can be calculated correctly. */
+  .fade-leave-active {
+    position: absolute;
+  }
+
 	.moveFromTop-enter-active,
 	.moveFromTop-leave-active {
 		transform: translateY(0);

package/src/modules/icons/entities/IconInfo.vue

@@ -0,0 +1,15 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" class="mn-b-small i-extra" f width="64" height="64" viewBox="0 0 64 64" fill="none">
+    <circle cx="32" cy="32" r="22.875"  :stroke="fill" stroke-width="2.25"/>
+    <path d="M34.207 22.4192L33.436 21.6L34.207 22.4192C34.8678 21.7973 35.173 20.9832 35.173 20.088C35.173 19.1688 34.8535 18.3301 34.1341 17.7234C33.4511 17.123 32.5912 16.875 31.672 16.875C30.7602 16.875 29.912 17.1319 29.2341 17.7338C28.5388 18.3482 28.243 19.1854 28.243 20.088C28.243 20.9931 28.5391 21.8248 29.209 22.4552L29.2337 22.4785L29.2598 22.5002C29.9451 23.0714 30.8001 23.301 31.708 23.301C32.6422 23.301 33.5294 23.057 34.207 22.4192ZM33.012 26.631H28.8847C27.8742 26.631 27.055 27.4502 27.055 28.4607C27.055 29.3486 27.6924 30.1083 28.5668 30.2626L29.503 30.4279V42.2561L28.2191 42.643C27.4211 42.8835 26.875 43.6184 26.875 44.4518C26.875 45.4952 27.7208 46.341 28.7642 46.341H35.7727C36.8134 46.341 37.657 45.4974 37.657 44.4567C37.657 43.6154 37.0993 42.8761 36.2904 42.6449L35.137 42.3154V28.756C35.137 27.5824 34.1856 26.631 33.012 26.631Z"  :stroke="fill" stroke-width="2.25"/>
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

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

@@ -1,27 +1,23 @@
 <template>
   <div class="pd-thin">
     <section class="cols-2 bg-black t-black radius-big pd-thin gap-thin">
-      <div>
+      <div class="pos-relative flex flex-column flex-center h-100">
         <div class="mn-b-thin t-white pd-big radius-big">
-           <img loading="lazy" class="mn-b-semi h-5r"  src="/logo/wdt.svg">
+          <img v-if="te('logo')" loading="lazy" class="mn-b-semi h-5r" :src="t('logo')">
 
-          <h2 class="mn-b-small" v-html="t('title')"/>
-          <p class="mn-b-small p-big t-transp">{{ t('description') }}</p>  
-          <p class="mn-b-semi p-medium t-transp">{{ t('subdescription')}}</p>
+          <h2 v-if="te('title')" class="mn-b-small" v-html="t('title')"/>
+          <p v-if="te('description')" class="mn-b-small p-big t-transp">{{ t('description') }}</p>  
+          <p v-if="te('subdescription')" class="mn-b-semi p-medium t-transp">{{ t('subdescription')}}</p>
 
         <div class="gap-thin cols-2">
-          <router-link to="/governance" class="flex t-center bg-white flex-center flex-column t-black pd-big radius-big">
-            
-             <svg xmlns="http://www.w3.org/2000/svg" class="mn-b-small i-extra" f width="64" height="64" viewBox="0 0 64 64" fill="none">
-              <circle cx="32" cy="32" r="22.875" stroke="black" stroke-width="2.25"/>
-              <path d="M34.207 22.4192L33.436 21.6L34.207 22.4192C34.8678 21.7973 35.173 20.9832 35.173 20.088C35.173 19.1688 34.8535 18.3301 34.1341 17.7234C33.4511 17.123 32.5912 16.875 31.672 16.875C30.7602 16.875 29.912 17.1319 29.2341 17.7338C28.5388 18.3482 28.243 19.1854 28.243 20.088C28.243 20.9931 28.5391 21.8248 29.209 22.4552L29.2337 22.4785L29.2598 22.5002C29.9451 23.0714 30.8001 23.301 31.708 23.301C32.6422 23.301 33.5294 23.057 34.207 22.4192ZM33.012 26.631H28.8847C27.8742 26.631 27.055 27.4502 27.055 28.4607C27.055 29.3486 27.6924 30.1083 28.5668 30.2626L29.503 30.4279V42.2561L28.2191 42.643C27.4211 42.8835 26.875 43.6184 26.875 44.4518C26.875 45.4952 27.7208 46.341 28.7642 46.341H35.7727C36.8134 46.341 37.657 45.4974 37.657 44.4567C37.657 43.6154 37.0993 42.8761 36.2904 42.6449L35.137 42.3154V28.756C35.137 27.5824 34.1856 26.631 33.012 26.631Z" stroke="black" stroke-width="2.25"/>
-            </svg>
-              <h4 class="uppercase t-medium">{{t('action')}}</h4>
+          <router-link :to="t('action_link')" class="flex t-center bg-white flex-center flex-column t-black pd-big radius-big">
+            <IconInfo class="mn-b-small i-extra" fill="rgb(var(--black)"/>
+            <p class="uppercase t-semi">{{t('action')}}</p>
           </router-link>
 
-          <router-link to="/governance#howtoget" class="flex t-center flex-center flex-column bg-main t-black pd-big radius-big">
+          <router-link :to="t('action_sublink') " class="flex t-center flex-center flex-column bg-main t-black pd-big radius-big">
             <IconEarn class="mn-b-small i-extra" fill="rgb(var(--black)"/>
-            <h4 class="uppercase t-medium">{{t('subaction')}}</h4>
+            <p class="uppercase t-semi">{{t('subaction')}}</p>
           </router-link>
           
         </div>
@@ -30,12 +26,22 @@
       </div>
 
       <div class="pos-relative pd-medium flex-column flex-center flex h-100 bg-main radius-big o-hidden">
-          <img loading="lazy" src="/landing/token_hands.png" class="mn-t-extra z-index-1 w-75 mn-b-auto" >
-          <!-- <h3 class="mn-b-small z-index-1">How to Earn?</h3> -->
-          <ConnectMetamask class="w-100 z-index-1" />
-          <div style="background-image: url(/spiral.jpg)" class="mn-b-extra spiral"></div>
-        
-          <!-- <Shader class="pos-absolute z-index-0 w-100 h-100"/> -->
+          <img v-if="te('image')" loading="lazy" :src="t('image')" class="mn-t-extra z-index-1 w-75 mn-b-auto">
+          <ConnectMetamask
+            :tokenAddress="options.tokenAddress"
+            :tokenSymbol="options.tokenSymbol"
+            :tokenDecimals="options.tokenDecimals"
+            :tokenImage="options.tokenImage"
+            :targetChainId="options.targetChainId"
+            :metamaskIcon="options.metamaskIcon"
+            :content="{
+              en: {
+                'connectMetaMask': t('connectMetaMask'),
+                'switchToPolygon': t('switchToPolygon'),
+                'addToken': t('addToken')
+              }
+            }"
+          />
       </div>
     </section>
   </div>
@@ -45,55 +51,51 @@
 import { computed,ref,onMounted, reactive } from 'vue'
 import { useI18n } from 'vue-i18n';
 
-import Shader from '@pf/src/components/Shader/Shader.vue'
-
+import IconInfo from '@pf/src/modules/icons/entities/IconInfo.vue'
 import IconEarn from '@pf/src/modules/icons/entities/IconEarn.vue'
-import IconInfo from '@pf/src/modules/icons/navigation/IconInfo.vue'
 
 import ConnectMetamask from '@pf/src/modules/wallet/views/components/elements/ConnectMetamask.vue'
 
 const props = defineProps({
-  mockupImage: {
-    type: String,
-    default: "/landing/mockup.png"
-  },
-   mockupMobile: {
-    type: String,
-    default: "/landing/mockup-mobile.png"
-  },
-  bgImage: {
-    type: String,
-    default: "" // Введите ваше стандартное значение здесь, если необходимо
+  content: {
+    type: Object,
+    required: true
   },
-  textData: {
+  options: {
     type: Object,
     default: () => ({
-      messages: {
-        en: {
-          title: 'Smoke Weed and<br><b>Get Slice of The Pie</b>',
-          description: 'Earn Weeder Digital Tokens to get a share of Weeder profits. The more tokens you have, the bigger your cut of the profits will be.',
-          subdescription: 'Weeder innovative approach to the cannabis industry is reflected in its dual-token ecosystem. We have developed two types of tokens - WDT (Released) and HIGH (Soon) - each with distinct functions, benefits, and structures. These tokens enable users to participate in the Weeder platform, incentivize community engagement, and encourage growth and expansion.',
-          action: 'Learn More',
-          subaction: 'How to Get',
-        },
-      }
+      tokenAddress: '0x64b4b0ade1f015d6a0c536e8cf041e181d872220',
+      tokenSymbol: 'OZDT',
+      tokenDecimals: '8',
+      tokenImage: 'https://ozdao.dev/logo-token.png',
+      targetChainId: '0x89',
+      metamaskIcon: "/icons/metamask.svg"
     })
   }
 })
-const { t } = useI18n(props.textData)
+const { t, te } = useI18n({
+  messages: props.content
+})
 </script>
 
 <style lang="scss" scoped>
-  @keyframes rotate {
-    from {
-      transform: rotate(0deg);
+  .spiral {
+    background-size: cover;
+    width: 100rem;
+    height: 100rem;
+    position: absolute;
+    opacity: 0.066;
+    transform: translate(-50%, -50%) rotate(0deg);
+    transform-origin: center center;
+    animation: spin 5s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: translate(-50%, -50%) rotate(0deg);
     }
-    to {
-      transform: rotate(360deg);
+    100% {
+      transform: translate(-50%, -50%) rotate(360deg);
     }
   }
-  .rotating {
-    animation: rotate 16s linear infinite;
-  }
-
 </style>

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

@@ -37,9 +37,10 @@
       required: true
     }
   })
-const { t, tm } = useI18n({
-  messages: props.content
-})
+  
+  const { t, tm } = useI18n({
+    messages: props.content
+  })
 </script>
 
 <style lang="scss">

package/src/modules/landing/landing.client.js

@@ -1,6 +1,7 @@
 // Importing Vue components
 import MobileApp from './components/sections/MobileApp.vue';
 import SubscribeNewsletter from './components/sections/SubscribeNewsletter.vue';
+import SectionEarn from './components/sections/SectionEarn.vue';
 import SectionFeatures from './components/sections/SectionFeatures.vue';
 import SectionGuide from './components/sections/SectionGuide.vue';
 import SectionOverview  from './components/sections/SectionOverview.vue';
@@ -9,6 +10,7 @@ import FloatingImages from './components/elements/FloatingImages.vue';
 import AnimatedGrid from './components/elements/AnimatedGrid.vue';
 
 export {
+  SectionEarn,
   MobileApp,
   SectionGuide,
   SectionOverview,

package/src/modules/products/components/sections/HeroRecommendation.vue

@@ -148,7 +148,7 @@
 	</div>
 </template>
 
-<style>
+<style style="scoped">
 .spiral {
 	
   background-size: cover;