@ozdao/prometheus-framework 0.2.48 → 0.2.51

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

@@ -0,0 +1,88 @@
+<template>
+  <section id="howtobuy" class="pd-thin pd-t-big">
+
+    <div class="mn-b-big t-center title">
+      <h2 class="mn-b-small">{{t('title')}}</h2>
+      <p class="t-transp">{{t('subtitle')}}</p>
+    </div>
+
+    <div class="cols-3">
+
+      <div class="cols-2 gap-medium radius-big bg-black t-white pd-medium">
+        <img class="radius-medium w-100 mn-b-medium" src="@/assets/images/howitworks/1.jpg"> 
+        <div>
+        <h3 class="mn-b-medium">{{t('steps.step1.headline')}}</h3>
+        <p class="t-transp">{{t('steps.step1.text')}}</p>
+        </div>
+      </div>
+
+      <div class="cols-2 gap-medium radius-big bg-black t-white pd-medium">
+        <img class="radius-medium  w-100 mn-b-medium" src="@/assets/images/howitworks/2.jpg"> 
+        <div>
+        <h3 class="mn-b-medium">{{t('steps.step2.headline')}}</h3>
+        <p class="t-transp">{{t('steps.step2.text')}}</p>
+        </div>
+      </div>
+
+      <div class="cols-2 gap-medium radius-big bg-black t-white pd-medium">
+        <img class="radius-medium w-100 mn-b-medium" src="@/assets/images/howitworks/3.jpg">
+        <div>
+        <h3 class="mn-b-medium">{{t('steps.step3.headline')}}</h3>
+        <p class="t-transp">{{t('steps.step3.text')}}</p>
+        </div>
+      </div>
+    </div>
+
+  </section>
+</template>
+
+
+<script setup>
+ import { useI18n }    from 'vue-i18n'
+    
+  const text = {
+    messages: {
+      en: {
+        title: 'How It Works 🚚',
+        subtitle: 'Get High THC Cannabis Delivered To Your Home Or Hotel',
+        steps: {
+          step1: {
+            headline: 'Build Your Box',
+            text: 'Select from a diverse choice of strains. Our selection of the highest quality cannabis allows you to enjoy the best possible experience.',
+          },
+          step2: {
+            headline: 'We Pack & Deliver',
+            text: 'Expertly selected, our products are grown organically, indoor to enhance the quality. Our clean and safe delivery process preserves that quality until your arrival at the hotel.',
+          },
+          step3: {
+            headline: 'Enjoy. Love. Repeat.',
+            text: 'When you arrive, everything will be all set. We strive for you to have the best experience at the best price.',
+          },
+        }
+      },
+      ru: {
+        title: 'Процесс Покупки 🚚',
+        subtitle: 'Получите высокачественный каннабис, доставленный до вашего дома или отеля',
+        steps: {
+          step1: {
+            headline: 'Выберите травку и оформите заказ',
+            text: 'Выберите из нашиъ разнообразных сортов. Наш выбор каннабиса высочайшего качества позволит вам получить наилучшие впечатления.',
+          },
+          step2: {
+            headline: 'Мы упакуем заказ и оформим доставку',
+            text: 'Наши продукты, отобранные экспертами, выращиваются органически в помещении для повышения качества. Наш чистый и безопасный процесс доставки сохраняет это качество до вашего прибытия в отель.',
+          },
+          step3: {
+            headline: 'Получите травку. Насладитесь. Повторите шаг 1.',
+            text: 'Когда вы получите товар, все будет готово. Мы стремимся к тому, чтобы вы получили лучший опыт по лучшей цене.',
+          },
+      }
+    }
+  }
+}
+
+const { t } = useI18n(text)
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,131 @@
+<template>
+  <section 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>
+      <h3 class="mn-b-small">{{ t('purchaseDetailsTitle') }}</h3>
+      <ol class="mn-b-big">
+        <li class="mn-b-small radius-small bg-black-transp-5 pd-small">{{ t('step1') }}</li>
+        <li class="mn-b-small radius-small bg-black-transp-5 pd-small">{{ t('step2') }}</li>
+        <li class="mn-b-small radius-small bg-black-transp-5 pd-small">{{ t('step3') }}</li>
+        <li class="mn-b-small radius-small bg-black-transp-5 pd-small">{{ t('step4') }}</li>
+      </ol>
+     
+    
+        <h4 class="mn-b-small">{{ t('privateRoundTitle') }}</h4>
+
+        {{ t('privateRoundText1') }}
+        <a>hello@weeder.delivery</a>
+        {{ t('privateRoundText2') }}
+    </div>
+
+    <div class="flex-column pd-big flex-nowrap flex h-100 bg-grey radius-big o-hidden coming-soon">
+      <div class="
+        w-100 h-100
+        rainbow
+        flex-v-center flex-h-center
+        flex-column flex 
+        pd-big mn-b-medium
+        radius-big o-hidden"
+      >
+        <img class="mn-b-small" src="/logo/logo-disabled.png">
+        <p class="t-semi uppercase">{{ t('comingSoon') }}</p>
+      </div>
+      <p class="mn-b-small">
+        To add WDT, you need to install MetaMask. Please install it if you haven't already.
+      </p>
+      <ConnectMetamask class="w-100" />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+import ConnectMetamask        from '@/components/elements/ConnectMetamask.vue'
+import ButtonAddWDT        from '@/components/elements/ButtonAddWDT.vue'
+import ButtonSwitchToPolygon        from '@/components/elements/ButtonSwitchToPolygon.vue'
+
+const text = {
+  messages: {
+    en: {
+      howToBuyTitle: 'How To Buy WDT?',
+      description:
+        'Weeder Token is a revolutionary cryptocurrency designed for the cannabis industry. With Weeder Token, you can easily buy, sell and trade cannabis products around the world.',
+      purchaseDetailsTitle: 'Purchasing details:',
+      step1: 'Create a cryptocurrency wallet that supports ERC20 tokens.',
+      step2: 'Buy Ethereum (ETH) or any other supported cryptocurrency.',
+      step3: 'Transfer your ETH or other cryptocurrency to your wallet.',
+      step4: 'Visit our token sale platform (coming soon) and follow the instructions to purchase WDT tokens.',
+      privateRoundTitle: 'Interested in a private round?',
+      privateRoundText1: 'If you want to participate in a private round, please email us at',
+      privateRoundText2: 'and we will get back to you with more information.',
+      buyTokenTitle: 'Buy Weeder Token',
+      comingSoon: 'Here will be UI for exchange WDT',
+    },
+    ru: {
+      howToBuyTitle: 'Как купить WDT?',
+      description:
+        'Weeder Token - это революционная криптовалюта, разработанная для индустрии каннабиса. С Weeder Token вы можете легко покупать, продавать и обменивать продукты каннабиса по всему миру.',
+      purchaseDetailsTitle: 'Процесс покупки:',
+      step1: '1. Создайте криптовалютный кошелек, поддерживающий токены ERC20.',
+      step2: '2. Купите Ethereum (ETH) или другую поддерживаемую криптовалюту.',
+      step3: '3. Переведите свои ETH или другую криптовалюту на свой кошелек.',
+      step4: '4. Посетите нашу платформу продажи токенов (скоро будет доступна) и следуйте инструкциям для покупки токенов WDT.',
+      privateRoundTitle: 'Хотите участвовать в приватном раунде?',
+      privateRoundText1: 'Если вы хотите участвовать в приватном раунде, пожалуйста, напишите нам на почту',
+      privateRoundText2: 'и мы свяжемся с вами с дополнительной информацией.',
+      buyTokenTitle: 'Купить Weeder Token',
+      comingSoon: 'Здесь будет интерфейс для обмена WDT',
+    },
+  }
+}
+
+const { t } = useI18n(text);
+</script>
+
+<style lang="scss" scoped>
+.weeder-token {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 20px;
+  max-width: 800px;
+  margin: auto;
+}
+
+.content {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.purchase-form {
+  flex: 1;
+}
+
+.rainbow {
+  position: relative;
+  z-index: 0;
+  padding: 2rem;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -2;
+    left: -50%;
+    top: -50%;
+    width: 200%;
+    height: 200%;
+    background-color: #399953;
+    background-repeat: no-repeat;
+    background-size: 50% 50%, 50% 50%;
+    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+      background-image: 
+        linear-gradient(#00ff88, #fff), 
+        linear-gradient(#00ff88, #fff), 
+        linear-gradient(white, white), 
+         linear-gradient(white, #fff);
+    animation: rotate 4s linear infinite;
+  }
+}
+
+</style>

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

@@ -0,0 +1,181 @@
+ <template>
+  <section id="instagram" class="section">
+    <div ref="root" class="t-center glide">
+        <div class="title">
+          <h2 class="mn-b-big">Отзывы наших покупателей</h2>
+      </div>
+       <div data-glide-el="controls" class="mn-b-big flex controls">
+        <button data-glide-dir="<" class="btn-circle">
+           <img src="@/assets/icons/arrow-left.svg">
+        </button>
+        <button data-glide-dir=">" class="btn-circle">
+         <img src="@/assets/icons/arrow-right.svg">
+        </button>
+      </div>
+      <div data-glide-el="track" class="mn-b-extra group glide__track">
+        <ul class="glide__slides flex">
+          <InstagramCard :img="1"/>
+          <InstagramCard :img="2"/>
+          <InstagramCard :img="3"/>
+          <InstagramCard :img="4"/>
+        </ul>
+      </div>
+    </div>
+    <div class="t-center title">
+      <p class="text-medium">Мы очень рады, что вы делитесь с нами своей красотой и присылаете нам фото-приветы.<br>Спасибо за ваши фотографии!</p>
+      <button class="button">Посмотреть все отзывы</button> 
+    </div>
+  </section>
+</template>
+
+
+<script>
+import InstagramCard from "@/components/blocks/InstagramCard.vue";
+
+import { ref, onMounted } from "vue";
+import Glide from "@glidejs/glide";
+export default {
+  data() {
+    return {};
+  },
+  name: "InstagramSection",
+  components: {
+    InstagramCard,
+  },
+  setup() {
+    const root = ref(null);
+
+    onMounted(() => {
+      var glideClass = root.value;
+        var glideObject = new Glide(glideClass, {
+          type: 'carousel',
+          startAt: 0,
+          perView: 3,
+          peek: 0,
+          gap: 30,
+          breakpoints: {
+            900: {
+              perView: 2  
+            },
+            600: {
+              perView: 1,
+              gap: 10,
+              peek: 10
+            }
+          }
+        }).mount();
+
+        function convertRemToPixels(rem) {    
+            return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        }
+      })
+    return {
+      root,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+#instagram {
+  position: relative;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.900651) 100%), url("@/assets/images/backgrounds/testimonials.jpg");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+
+  .button { margin: 0 auto; }
+  .controls {
+      position: absolute;
+      top: 53%;
+      width: 100%;
+
+        .btn-circle{
+          position: absolute;
+          display: flex;
+          align-items: center;
+          top: 50%;
+          justify-content: center;
+          height: 4rem;
+          width: 4rem;
+          background: white;
+          box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.06);
+          border: none;
+          padding: 1rem;
+          border-radius: 4rem;
+          z-index: 14;
+
+          transform: scale(1);
+
+          transition: all 0.33s ease;
+          
+          &:first-child {left: -2rem;}
+          &:last-child {right: -2rem;}
+
+          &:hover {
+            cursor: pointer;
+
+            transform: scale(0.9);
+          }
+        }
+      }
+
+  .instagram-integration {
+    margin-bottom: 4rem;
+  }
+  .title {
+    p {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  ul {
+    display: flex;
+    justify-content: space-between;
+
+    .instagram-item {
+      width: calc(25% - 0.5rem);
+      border-radius: 1rem;
+
+      box-shadow: -8px -8px 20px -8px #FFFFFF, 8px 8px 20px -12px rgba(183, 124, 124, 0.06);
+      &:last-child{
+        margin-right: 0;
+      }
+      .insta-top{
+          span{display: block;}
+      }
+      > img { width: 100%; }
+      .insta-bottom{
+        padding: 0.625rem 0.625rem 1rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+          img {
+            margin-right: 0.625rem;
+            &:last-child{margin-right: 0;}
+            }
+          span {display: block; margin-top: 0.25rem}
+      }
+      
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  #instagram {
+    padding: 0;
+    padding-top: 2rem;
+    padding-bottom: 4rem;
+
+    .mn-b-extra { margin-bottom: 2rem;}
+
+    .controls {
+      display: none;
+
+    }
+  }
+}
+
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+  <section id="map" class="section">
+    <div class="mn-b-big t-center title">
+      <h2 class="" v-html="t('title')"></h2>
+    </div>
+
+    <div class="cols-2">
+      <MapBlock 
+      :name="t('map.title')" 
+      map="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d988.2464207440368!2d98.32843645562768!3d7.791339890847109!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30502f47783f9337%3A0x516fcf234b41baa0!2z4Lia4LmJ4Liy4LiZ4Lif4Li04LiZ4LiB4Lix4LiN!5e0!3m2!1sen!2sth!4v1671872245101!5m2!1sen!2sth"
+      link="https://goo.gl/maps/Pvvow9B4uS9eEHP56" 
+      :text="t('map.description')"
+      />
+      <MapBlock 
+      :name="t('newplaces.title')" 
+      :text="t('newplaces.description')"
+      />
+    </div>
+  </section>
+</template>
+
+
+<script setup>
+  import { ref, computed, onServerPrefetch, onMounted } from 'vue'
+
+  import MapBlock from "@pf/src/modules/landing/components/blocks/MapBlock.vue"
+
+  import { useI18n } from 'vue-i18n'
+    
+  const text = {
+    messages: {
+      en: {
+        title: '<b>Fin.Kan House Is Our Partner</b><br>And Pickup Location 📍',
+        subtitle: 'Buy CBD and high THC weed in-store at our central Weeder location',
+        map: {
+          title: '43 283 Soi Boathouse, Rawai 🏨',
+          description: 'Opening hours from 18:00 to 24:00.'
+        },
+        newplaces: {
+          title: 'New Places is Coming 👌',
+          description: 'We are in the process of opening a new locations for faster delivery to all areas of Phuket. Subscribe to our social networks and expect news!'
+        }
+      },
+      ru: {
+        title: '<b>Fin.Kan House Наш Партнер</b><br>и Пункт Выдачи 📍',
+        subtitle: 'Купите травку с КБД и высоким содержанием ТГК в центральном магазине Weeder.',
+        map: {
+          title: '43 283 Soi Boathouse, Rawai 🏨',
+          description: 'Время работы с 18:00 до 24:00.'
+        },
+        newplaces: {
+          title: 'Новые места на подходе 👌',
+          description: 'Мы занимаемся открытием нового мест для более быстрой доставки во все районы Пхукеты. Подписыватесь на наши социальные сети и ожидайте новостей!'
+        }
+      }
+    }
+  }
+
+  const { t } = useI18n(text)
+
+</script>
+
+<style lang="scss">
+#map {
+  padding-bottom: 0;
+  
+  .cols-2 {
+      gap: 1rem;
+
+      border-radius: 2rem;
+      overflow: hidden;
+      
+      .col:first-of-type {
+          display: flex;
+          flex-direction: column;
+
+          .button-link {color: #00ff88;}
+      }
+      .col:last-of-type {
+
+          #gmap_canvas {
+            // border-radius: 2rem;
+            overflow: hidden;
+            
+             height: 100%;
+              width: 100%;
+          }
+      }
+  }
+}
+</style>

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

@@ -0,0 +1,69 @@
+<template>
+<div id="sections" class="pd-thin">
+  <h2 class="mn-auto pd-t-big pd-b-big t-center" v-html="t('title')"/>
+  
+  <div class="cols-4 gap-thin">
+    <router-link to="/marketplace" class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-grey t-black radius-big">
+      <img src="/sections/1.png" alt="" class="section-image">
+      <h3 class="mn-b-medium">{{t('section1.title')}}</h3>
+      <p class="t-transp">{{t('section1.text')}}</p>
+    </router-link >
+
+    <router-link to="/spots" class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-grey t-black radius-big">
+      <img src="/sections/2.png" alt="" class="section-image">
+      <h3 class="mn-b-medium">{{t('section2.title')}}</h3>
+      <p class="t-transp">{{t('section2.text')}}</p>
+    </router-link>
+
+    <router-link to="/community" class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-grey t-black radius-big">
+      <img src="/sections/3.png" alt="" class="section-image">
+      <h3 class="mn-b-medium">{{t('section3.title')}}</h3>
+      <p class="t-transp">{{t('section3.text')}}</p>
+    </router-link>
+
+    <router-link to="/governance" class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-grey t-black radius-big">
+      <img src="/sections/4.png" alt="" class="section-image">
+      <h3 class="mn-b-medium">{{t('section4.title')}}</h3>
+      <p class="t-transp">{{t('section4.text')}}</p>
+    </router-link>
+  </div>
+
+</div>
+</template>
+
+<script setup>
+  import { useI18n } from 'vue-i18n'
+    
+  const text = {
+    messages: {
+      en: {
+        title: 'Dive Deeper Into <b> Weeder Platform</b>',
+        section1: {
+          title: 'Marketplace',
+          text: 'A simple platform for buying and selling weed, joints, and everything else from seeds to grow boxes'
+        },
+        section2: {
+          title: 'Spots',
+          text: 'Discover the top spots for purchasing or sharing a smoke with like-minded cannabis enthusiasts'
+        },
+        section3: {
+          title: 'Community',
+          text: 'Engage with our community to discuss cannabis news and innovations'
+        },
+        section4: {
+          title: 'Governance',
+          text: 'Join platform stakeholders in governance, playing an active role in molding our collective future'
+        }
+      }
+    }
+  }
+
+  const { t } = useI18n(text)
+</script>
+
+<style lang="scss">
+.section-image {
+  width: 100%;
+  object-fit: cover;
+}
+</style>

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

@@ -0,0 +1,131 @@
+<script setup>
+import 'vue3-carousel/dist/carousel.css'
+
+
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
+
+const ImagesSlider = ref(null)
+
+const text = {
+  messages: {
+    en: {
+      features: [
+        {
+          title: "What's the Weeder Token, Dude?",
+          description: "WDT is like, the backbone of our rad community. It's cash, it's power, it's an investment. Groovy, right?", 
+        },
+        {
+          title: "Light Up and Level Up",
+          description: "Order up, light up, and earn Weeder tokens. More tokes, more cash in your pocket, man.", 
+        },
+        {
+          title: "Hang Ten with Our Community",
+          description: "Find the dopest strains and start floating on cloud 9 with us!", 
+        },
+        {
+          title: "Shop 'Til You Drop... Into Your Couch",
+          description: "Score primo bud and gear with just a few clicks. Delivered right to your pad!", 
+        },
+      ]
+    },
+    ru: {
+      features: [
+        {
+          title: "Что такое токен Weeder, Бро?",
+          description: "WDT - это как основа нашего крутого сообщества. Это деньги, это власть, это инвестиции. Круто, а?", 
+        },
+        {
+          title: "Зажигай и Развивайся",
+          description: "Закажи шмали, курни и зарабатывай токены Weeder. Чем больше курнешь, тем больше кэша у тебя в кармане, чувак.", 
+        },
+        
+        {
+          title: "Веселись с Нашим Сообществом",
+          description: "Найди самые крутые сорта и начни шмалить на девятом облаке вместе с нами.", 
+        },
+        {
+          title: "Покупайте, Когда Накурились",
+          description: "Закажи премиумную бошку и крутые аксессуары за пару кликов, чувак. Прямо к твоей двери!",
+        },
+      ]
+    }
+  }
+}
+
+const { tm,rt } = useI18n(text)
+
+const fadeIn = ref(false)
+
+onMounted(() => {
+
+    setTimeout(() => {
+      ImagesSlider.value.restartCarousel()
+      fadeIn.value = true
+    }, "500")
+
+})
+</script>
+
+<template>
+  <Carousel ref="ImagesSlider" :items-to-show="1" :wrapAround="true" :transition="330" :autoplay="3000" :pauseAutoplayOnHover="true" class="w-100 h-100">
+    <Slide v-for="(feature, index) in tm('features')" :key="index" class="w-100 h-100 flex-v-center flex">
+      <div class="parent-div" :style="`background-image: url(/assets/images/features/${index}.png); background-size:cover; background-position: center center;`">
+          <div class="background-div"></div>
+          <h4 class="mn-b-small">{{ feature.title }}</h4>
+          <p class='mn-b-big mn-r-small mn-l-small'>{{ feature.description }}</p>
+      </div>
+    </Slide>
+  </Carousel>
+</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 {
+    height: 100%;
+  }
+.carousel-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.carousel-indicators li {
+  list-style: none;
+  margin: 0 5px;
+  width: 10px;
+  height: 10px;
+  background: gray;
+  border-radius: 50%;
+}
+
+.carousel-indicators li.active {
+  background: white;
+}
+
+.parent-div {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.background-div {
+  flex-grow: 1 // Занимает все оставшееся пространство
+}
+</style>