@ozdao/prometheus-framework 0.2.37 → 0.2.39

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

@@ -0,0 +1,108 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  textData: {
+    type: Object,
+    default: () => ({
+      messages: {
+        en: {
+          title: 'Weeder Roadmap',
+          milestones: [{
+            title: 'MVP in Thailand',
+            description: 'The Weeder platform was tested as a minimum viable product (MVP) in Thailand to validate its basic features and gather user feedback. This helped the company make improvements before launching on a larger scale.',
+            date: '2023-02-01',
+            finished: 'true'
+          },{
+            date: '2023-05-01',
+            title: 'Weeder Platform Soft Launch',
+            description: 'A soft version of the Weeder platform will be launched for users to explore and provide feedback. This allows the company to identify any issues and make improvements before the official release.',
+          },{
+            date: '2023-07-01',
+            title: 'IDO',
+            description: 'The Initial DEX Offering (IDO) will launch the Weeder token on a our decentralized platform. It allows the public to purchase Weeder tokens and get involved in the project at an early stage. It can also help establish the initial token price.',
+          },{
+            date: '2023-09-01',
+            title: 'Weeder Platform Official Release',
+            description: 'The Weeder platform will be officially released with dividend features, cashback, and full blockchain integration. This marks the full launch of the platform and allows users to access all its features.',
+          },{
+            date: '2023-11-01',
+            title: 'Weeder Ecosystem Expansion',
+            description: 'The Weeder ecosystem will be expanded by adding support for new countries and enhancing its functionalities. This helps to increase the platforms user base and improve its overall capabilities.',
+          }]
+        }
+      }
+    })
+  }
+});
+
+const { t,tm } = useI18n(props.textData);
+</script>
+
+<template>
+  <div class="o-hidden bg-black t-white t-left pd-big radius-big">
+    <h2 class="mn-b-big t-center w-100">{{ t('title') }}</h2>
+    
+    <div class="gap-thin flex-nowrap flex o-scrolled timeline custom-scroll">
+      <div
+        v-for="(milestone, index) in tm('milestones')"
+        :key="index"
+        class="timeline-item br-white-transp-10 br-1px br-solid pd-big radius-small"
+      >
+      
+        <div class="mn-b-semi bg-white-transp-5 timeline-icon">
+          <svg v-if="milestone.finished"  width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g id="24 / basic / check-mark">
+            <path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M7.28033 10.7197L14.25 3.75L15.3107 4.81066L7.28033 12.841L3 8.56066L4.06066 7.5L7.28033 10.7197Z" fill="rgb(var(--main))"/>
+            </g>
+          </svg>
+        </div>
+
+        <div class="w-100 timeline-content">
+          <h3 class="mn-b-small">{{ t(milestone.title) }}</h3>
+          <p class="uppercase mn-b-semi t-main t-semi date">{{ milestone.date }}</p>
+          <p class="t-transp w-100">{{ t(milestone.description) }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .timeline {
+    .timeline-item {
+      min-width: 32rem;
+    }
+
+    .timeline-icon {
+      border-radius: 100%;
+      width: 3rem;
+      height: 3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    
+
+      img {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+  }
+
+  .custom-scroll {
+    overflow-x: scroll;
+    scrollbar-width: none; /* Hide scrollbar for Firefox */
+    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
+    display: -webkit-box; /* Fix for Safari */
+    display: -webkit-flex; /* Fix for Safari */
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .custom-scroll::-webkit-scrollbar {
+    width: 0px; /* Hide scrollbar for Chrome and Safari */
+    height: 0px;
+  }
+</style>

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

@@ -1,156 +0,0 @@
-<script setup>
-	import { useRouter } from 'vue-router'
-	import { useI18n } from 'vue-i18n'
-
-	const props = defineProps({
-	  textData: {
-	    type: Object,
-	    default: () => ({
-	      messages: {
-	      	en: {
-				    TITLE: "Smoke Weed Every Day &<b> Get A Slice Of The Pie</b>",
-				    DESCRIPTION: "Earn Weeder Token and Get part of the profits of Weeder Delivery. The more tokens you have, the bigger your cut of the profits will be. So what are you waiting for?",
-				    ACTION: "Open Marketplace →",
-				    SUBACTION: "Sign Up To Start"
-			    }
-			  }
-			})
-		}
-	})
-
-	const { t } = useI18n(props.textData)
-</script>
-
-
-<template>
-	<div 
-		id="heroGovernance" 
-		class="pd-thin"
-	>
-
-		<div 
-			class="pos-relative bg-black o-hidden t-white t-center pd-extra radius-big flex-column flex-center flex"
-		>
-			<div class="sheen h-5r mn-b-small radius-extra o-hidden pos-relative ">
-		  	<img src="/logo/wdt.svg" class="w-100 h-100">
-		  </div>
-
-			<h1 
-				class="w-max-35r mn-b-medium" 
-				v-html="t('TITLE')"
-			/>
-
-			<p 
-				class="w-max-40r mn-b-big t-transp p-big" 
-				v-html="t('DESCRIPTION')"
-			/>
-
-			<div 
-				class="t-white gap-small cols-2-fit-content"
-			>
-				<router-link 
-					:to="{
-						name: 'Sign In'
-					}"
-					class="w-max bg-light t-dark br-light button"
-					v-html="t('SUBACTION')"
-				/>
-
-				<router-link  
-					:to="{
-						name: 'Marketplace'
-					}"
-					class="w-max bg-dark t-white button"
-					v-html="t('ACTION')"
-				/>
-			</div>
-
-			<div class="w-100 h-100 pos-absolute pos-t-0 pos-r-0 z-index-0 grid ">
-				<div class="grid-lines"></div>
-			</div>
-
-		</div>
-
-	</div>
-</template>
-
-<style lang="scss">
-	.sheen:after {
-	content:'';
-  top:0;
-  left: -25%;
-	transform:translateX(100%);
-	width:100%;
-	height:220px;
-	position: absolute;
-	z-index:1;
-	animation: slide 3s infinite;
-	 
-  /* 
-  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
-  */
-  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
-	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
-}
-
-/* animation */
-
-@keyframes slide {
-	0% {	
-		transform:translateX(-00%); 
-		opacity: 0;
-	}
-	20% {
-		opacity: 1
-	}
-	80% {
-		opacity: 1
-	}
-	100% {
-		transform:translateX(100%); 
-			opacity: 0
-	}
-}
-	
-
-	.grid {
-  perspective: 450px;
-  background-size: cover;
-}
-
-.grid-lines {
-  width: 100%;
-  height: 200%;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 0), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 0);
-  background-size: 45px 30px;
-  background-repeat: repeat;
-  transform-origin: 100% 0 0;
-  animation: play 15s linear infinite;
-}
-
-@keyframes play {
-  0% {
-    transform: rotateX(45deg) translateY(-50%);
-  }
-  100% {
-    transform: rotateX(45deg) translateY(0);
-  }
-}
-
- @media screen and (max-width: 1025px) {
-    #mobileApp {
-      text-align: center;
-      > section {
-        flex-direction: column;
-        > div {
-          order: 1;
-        }
-      }
-    }
-  }
-</style>