@ozdao/prometheus-framework 0.2.48 → 0.2.51

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

@@ -0,0 +1,54 @@
+<template>
+	<div>
+		<MapSection />
+		<AboutSection />
+		<SectionGuide />
+    <!-- Partials (need to remove) -->
+    <Footer/>
+  </div>
+</template>
+
+<script setup>
+	import { computed } from 'vue'
+
+	import AboutSection 			from '@pf/src/modules/landing/components/sections/AboutSection.vue'
+	import SectionGuide     from '@pf/src/modules/landing/components/sections/SectionGuide.vue'
+	import MapSection 			from '@pf/src/modules/landing/components/sections/MapSection.vue'
+  import Footer from '@pf/src/components/Footer/Footer.vue'
+
+	import { useMeta } from 'vue-meta'
+	import { useI18n }    from 'vue-i18n'
+
+
+  const text = {
+    messages: {
+      en: {
+        meta: {
+          title: "Hotel – Fin.Kan House is Cannabis friendly hotel in Phuket",
+          description: "At Fingan House, we encourage the exploration of Phuket’s finest cannabis products and are proud to provide a fully stocked bar of our signature product offerings to those looking to enjoy their experience to the fullest.",
+
+        },
+      },
+      ru: {
+        meta: {
+          title: "Отель – Fin.Kan House это каннабис-френдли отель на Пхукете",
+          description: "Приходите полюбоваться удивительными закатами в 18:00 или увидеть ночные огни Пхукета во всей красе после захода солнца. Купите немного каннабиса и наслаждайтесь видами — это действительно так просто!",
+        }
+      }
+    }
+  }
+
+  const { t } = useI18n(text)
+
+
+  const computedMeta = computed(() => ({
+    title: t('meta.title'),
+    description: t('meta.description')
+  }))
+
+  const { meta, onRemoved } = useMeta(computedMeta)
+</script>
+
+<style lang="scss">
+
+</style>

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

@@ -0,0 +1,184 @@
+<template>
+  <div >
+    
+    <div class="breadcrumbs section">
+      <router-link to="/">
+        <svg class="home" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill="rgb(var(--black))" d="M0.494141 4.26391C0.494141 4.48862 0.659906 4.66912 0.928813 4.66912C1.05037 4.66912 1.16825 4.6065 1.27139 4.52177L1.64344 4.20866V7.56448C1.64344 8.13545 1.98971 8.47803 2.5791 8.47803H7.56678C8.15616 8.47803 8.50243 8.13545 8.50243 7.56448V4.19392L8.8929 4.52177C8.99604 4.6065 9.11392 4.66912 9.23916 4.66912C9.48597 4.66912 9.67015 4.5144 9.67015 4.27128C9.67015 4.1313 9.61121 4.01343 9.5007 3.92133L8.50243 3.08146V1.47538C8.50243 1.30961 8.3956 1.1991 8.22984 1.1991H7.63308C7.46732 1.1991 7.35313 1.30961 7.35313 1.47538V2.11634L5.66969 0.70181C5.31606 0.403433 4.85928 0.403433 4.50197 0.70181L0.663589 3.92133C0.553079 4.01711 0.494141 4.14235 0.494141 4.26391ZM6.13752 5.26219C6.13752 5.08906 6.02701 4.97855 5.85387 4.97855H4.31779C4.14097 4.97855 4.02678 5.08906 4.02678 5.26219V7.63447H2.83327C2.60856 7.63447 2.48332 7.50922 2.48332 7.28084V3.5014L4.90349 1.47538C5.01768 1.37592 5.15029 1.37592 5.26817 1.47538L7.66255 3.48298V7.28084C7.66255 7.50922 7.53731 7.63447 7.3126 7.63447H6.13752V5.26219Z"/>
+        </svg>
+        <span>{{t('breadcrumbs.home')}}</span>
+      </router-link>
+      
+
+      <svg  class="chevron" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 3.99992C4 3.83673 3.94307 3.70391 3.81025 3.57867L0.899431 0.732369C0.800759 0.629902 0.679317 0.580566 0.531309 0.580566C0.239089 0.580566 0 0.815861 0 1.10808C0 1.25229 0.0607211 1.38512 0.166983 1.49138L2.74763 3.99613L0.166983 6.50846C0.0607211 6.61093 0 6.74375 0 6.89176C0 7.18398 0.239089 7.41928 0.531309 7.41928C0.675522 7.41928 0.800759 7.36994 0.899431 7.26747L3.81025 4.42117C3.94307 4.29594 4 4.15931 4 3.99992Z" fill="rgb(var(--black))"/>
+      </svg>
+      
+      <router-link v-if="page" :to="'/pages/' + page.url">
+        <span v-if="$i18n.locale === 'en'">{{page.localization[0].text}}</span>
+        <span v-if="$i18n.locale === 'ru'">{{page.localization[1].text}}</span>
+        <!-- {{$i18n.locale}} -->
+      </router-link >
+      
+    </div>
+
+  
+    <div class="page-wrapper cols-2-1_3 gap-big section"> 
+      <ul class="w-100 pd-medium menu-tabs">
+        <p class="mn-b-medium t-semi p-medium">{{ t('information') }}</p>
+        <li  v-for="(page,index) in pages"  :class="{'product-tab-active':route.params.url === page.url}" class="product-tab">
+
+          <router-link :to="{ name: 'Page', params: { url: page.url}}" >
+            <span v-html="t('pages[' + index + ']')"></span>
+          </router-link>
+        </li>
+      </ul>  
+      <section class="page ">
+        <h1 class="mn-b-small">
+            <span>{{ t('title') }}</span>
+        </h1>
+        <hr class="mn-b-semi">
+        <div class="page-content-wrapper">
+          {{t('content')}}
+        </div>
+
+      </section>  
+    </div>
+    <!-- Partials (need to remove) -->
+    <Footer/>
+
+  </div>
+</template>
+
+<script setup>
+  // Import libs
+  import { computed, onMounted } from 'vue'
+  import { useStore } from '@/store'
+  import { useRoute } from 'vue-router'
+  import { useI18n }    from 'vue-i18n'
+  import { useMeta } from 'vue-meta'
+  
+  import * as marked from 'marked';
+  import Footer from '@pf/src/components/Footer/Footer.vue'
+  
+
+  // const renderer = {
+  //   image(image) {
+  //     var imageRequired = require('../../..@/assets/images/cases/' + image)
+  //     return `<img src='${imageRequired.default}' />`;
+  //   }
+  // };
+
+  // marked.use({ renderer });
+  // Import components
+  // Accessing router and store
+  const text = {
+    locale: 'en',
+    messages: {
+      en: {
+        breadcrumbs: {
+          home: 'Home',
+          store: 'Store',
+        },
+        information: "Information",
+        adress: 'Adress',
+        support: 'Get Online Support',
+        request: 'Contact Number',
+        time: "24 / 7 Seven days a week",
+        copyright: "Weeder, 2022. Proudly created with OZ DAO.",
+        pages: [],
+      },
+      ru: {
+        breadcrumbs: {
+          home: 'Главная',
+          store: 'Store',
+        },
+        information: "Информация",
+        adress: 'Адресс',
+        support: 'Онлайн Поддержка',
+        request: 'Контактный Телефон',
+        time: "24 / 7 без перерывов",
+        copyright: "Weeder, 2022. С гордостью создано OZ DAO.",
+        pages: [],
+        title: '',
+        content: '',
+      }
+    }
+  }
+
+
+
+  const { t, locale } = useI18n(text)
+  const store = useStore()
+  const route = useRoute()
+  // Data prefetching
+  if (route.params.url) {
+    await store.dispatch('pages/fetch', route.params.url)
+  } else {
+    store.commit('pages/init');
+  }
+
+  await store.dispatch('pages/fetchAll')
+
+  const pages = computed(() => store.pages.state.all)
+  console.log(store.pages.state)
+
+  const page = computed(() => store.pages.state.current)
+
+  const content = computed(() => marked(t('content'), { sanitize: true }))
+
+  store.pages.state.all.forEach( page => {
+    page.localization.forEach( localization => {
+      text.messages[localization.locale].pages.push(localization.text)
+    })
+  })
+
+  store.pages.state.current.localization.forEach(localization => {
+    text.messages[localization.locale].title = localization.text
+  })
+
+  store.pages.state.current.localization.forEach(localization => {
+    text.messages[localization.locale].content = localization.content
+  })
+
+  const computedMeta = computed(() => ({
+    title: t('title'),
+    description: t('content').substring(0, 200)
+  }))
+
+  const { meta, onRemoved } = useMeta(computedMeta)
+</script>
+
+<style lang="scss">
+.menu-tabs {
+  margin-right: 3rem;
+  .product-tab {
+    height: 2.5rem;
+  }
+}
+
+.page-wrapper {
+  .router-link-active, .router-link-exact-active {
+    color: rgb(var(--main));
+  }
+}
+.page {
+  width: 100%;
+  
+  .page-content-wrapper {
+    > * {
+      margin-bottom: 1rem;
+    }
+  }
+  p { 
+    opacity: 0.5;
+  }
+  ul {
+    li {
+      list-style-type: circle;
+      // height: 4rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,69 @@
+<template>
+  <section id="about" class="section">
+
+    <div class="cols-2-golden-ration bg-white radius-big flex-nowrap">
+      <!-- Left col -->
+      <div class="pd-big text-about flex-v-center flex col">
+        <h3 class="mn-b-medium">{{t('title')}}</h3>
+        <p class="mn-b-big">{{t('description')}}</p>
+      </div>
+      <!-- Right col -->
+      <div class="brand-photocol col">
+         <video class="video" autoplay playsinline muted loop preload > 
+          <source src="@/assets/videos/hotel.webm">
+        </video>
+      </div>
+    </div>
+  </section>
+</template>
+
+
+<script setup>
+  import { computed, onMounted, reactive, toRefs } from 'vue'
+  
+  import { useRoute,useRouter } from 'vue-router'
+  import { useI18n } from 'vue-i18n'
+ 
+  const route = useRoute()
+  const router = useRouter()
+    
+  const text = {
+    messages: {
+      en: {
+        title:  "CANNABIS FRIENDLY HOTEL IN PHUKET 🌿😌",
+        description:  "We invite you to enjoy the best views of Phuket whilst consuming our superior quality products which are conveniently located at our on-site dispensary.  At Fingan House, we encourage the exploration of Phuket’s finest cannabis products and are proud to provide a fully stocked bar of our signature product offerings to those looking to enjoy their experience to the fullest. Whether you’re a seasoned veteran or completely new to the scene, our team of friendly experts is available to assist you in selecting the perfect strain for the occasion.", 
+        calltoaction: "Like it?  Check out Airbnb and start your mary jane adventure ✈️",
+        button: "Read more"
+      },
+      ru: {
+        title:  "КАННАБИС ФРЕНДЛИ ОТЕЛЬ НА ПХУКЕТЕ 🌿😌",
+        description:  "Расположенный в центре Раваи, вы можете наслаждаться потрясающим 360-градусным видом на Пхукет, куря убийственную травку на крыше Fingan House. Приходите полюбоваться удивительными закатами в 18:00 или увидеть ночные огни Пхукета во всей красе после захода солнца. Купите немного каннабиса и наслаждайтесь видами — это действительно так просто! Не умеете крутить? Не беспокойтесь — у Фингана есть помощник, который может бесплатно скрутить для вас косяк.", 
+        calltoaction: "Нравится? Загляните на Airbnb и начните свое травяное приключение ✈️",
+        button: "Узнать больше"
+      }
+    }
+  }
+
+  const { t } = useI18n(text)
+</script>
+
+<style lang="scss">
+#about {
+
+  .brand-photocol {
+    object-fit: cover;
+    min-height: 24rem;
+    height: 100%;
+    
+    video {
+      position: absolute;
+      left: 0;
+      right: 0;
+      object-fit: cover;
+      width: 100%;
+      min-height: 100%;
+    }
+  }
+}
+
+</style>

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

@@ -0,0 +1,90 @@
+<template>
+	<section class="pd-big">
+		<header class="mn-b-big t-center">
+			<h2 class="mn-center text-fade-in"><span class="text-splitted">Example of the Signals</span></h2> 
+		</header>
+		<div class="cols-4 gap-medium">
+        <img  v-for="(signal,index)  in signals"   class="signal" :src="/images/examples/' + signal">
+		</div>
+	</section>
+</template>
+
+<script setup>
+/////////////////////////////
+// COMPONENT DEPENDENCIES
+/////////////////////////////
+// VUE DEPENDENCIES
+import { onMounted } from 'vue';
+// GSAP DEPENDENCIES
+import { gsap } from "gsap/dist/gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+/////////////////////////////
+// CREATED
+/////////////////////////////
+gsap.registerPlugin(ScrollTrigger);
+
+let signals = [
+  '01.png',
+  '02.png',
+  '03.png',
+  '04.png',
+]
+
+/////////////////////////////
+// MOUNTED
+/////////////////////////////
+onMounted(() => {
+	gsap.set('.signal', {
+    // maxHeight: 0,
+    force3D:false,
+    opacity: 0,
+    // y: 50,
+  });
+
+  gsap.set('.signal-child ', {
+    opacity: 0,
+    force3D:false,
+    y: 50,
+  }); 
+
+ ScrollTrigger.batch('.signal', {
+  onEnter: batch => {
+    batch.forEach((card, index) => {
+      gsap.to(card, {
+        opacity: 1,
+        // maxHeight: 1000, 
+        duration: 1.5,
+        ease: "power2.inOut",
+        y: 0, 
+        stagger: 0.1, 
+        delay: index * 0.3
+      })
+
+      gsap.to(card.children, {
+        opacity: 1, 
+        duration: 1.5,
+        ease: "power2.inOut",
+        y: 0, 
+        stagger: 0.1, 
+        delay: index * 0.3
+      })
+    })
+  },
+  // onLeaveBack: batch => {
+  //   batch.forEach((card, index) => gsap.to(card.children, {
+  //     opacity: 0, 
+  //     duration: 1.5,
+  //     ease: "power2.inOut",
+  //     y: 50, 
+  //     stagger: 0.1, 
+  //     delay: index * 0.3
+  //   }))
+  // },
+  start: "top 70%",
+  });
+})
+
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+  <section  class="cols-2-golden-ration pd-thin gap-thin">
+      <div id="feature" class="cols-2">
+
+        <div class="col">
+          <h2 class="h1" v-html="t('title')"></h2>
+        </div>
+
+       
+      </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>
+      </ul>
+
+    </section>
+</template>
+
+
+<script setup>
+  import { useI18n } from 'vue-i18n'
+    
+  const text = {
+    messages: {
+      en: {
+        title: 'Best Quality.<br><b class="t-white">Reasonable Price.</b>',
+        friendly: 'Friendly Service',
+        fast: 'Fast Shipment',
+        reasonable: 'Reasonable Prices',
+        premium: 'Premium Medical Grade',
+        refund: 'Refund Policy'
+      },
+      ru: {
+        title: 'Лучшее качество.<br><b class="t-white">Разумная цена.</b>',
+        subtitle: 'Мы придаем большое значение высокому качеству товаров и удовлетворенности клиентов',
+        friendly: 'Дружелюбный Сервис',
+        fast: 'Быстрая Доставка',
+        reasonable: 'Разумные Цены',
+        premium: 'Лабораторное качество',
+        refund: 'Политика возврата'
+      }
+    }
+  }
+
+  const { t } = useI18n(text)
+</script>
+
+<style lang="scss">
+#feature {
+  background-size: cover;
+  background-position: center center;
+  border-radius: 2rem;
+  padding: 4rem;  
+
+  .col {
+    ul {
+      li {
+        line-height: 1.5;
+        margin-bottom: 1rem;
+        color: white;
+
+
+
+        &:before {
+          content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
+          color: black; /* Change the color */
+          font-weight: bold; /* If you want it to be bold */
+          display: inline-block; /* Needed to add space between the bullet and the text */
+          width: 1em; /* Also needed for space (tweak if needed) */
+          margin-left: -1em; /* Also needed for space (tweak if needed) */
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+  <section id="gift" class="section">
+
+    <div class="t-center section-1-col">
+      <p class="mn-b-small">
+        Looking for a beautiful and stylish gift?
+      </p>
+      <h3 class="mn-b-medium">
+        Gift Certificate is a simple way to donate money<br><b>and make suprise for someone</b>
+      </h3>
+      
+      <router-link to="/catalog/products/7070249d-c84a-4bb4-bfac-a58b65353209">
+        <button class="button">Buy now</button>
+      </router-link>
+    </div>
+
+  </section>
+</template>
+
+
+<script setup>
+  import { computed, onMounted, reactive, toRefs } from 'vue'
+  
+  import { useRoute,useRouter } from 'vue-router'
+  const route = useRoute()
+  const router = useRouter()
+</script>
+
+<style lang="scss">
+#gift {
+    b {
+      color: #00ff88;
+    }
+
+   .section-1-col {
+    display: block;
+    padding: 10rem 3rem;
+    color: black;
+    border-radius: 2rem;
+    background: #00ff88;
+    background-image: url("@/assets/images/backgrounds/cerificat.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center bottom;
+    overflow: hidden;
+    .button {
+      margin: 0 auto;
+      background: white;
+      color: #00ff88;
+      // box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.05);
+      // border: 1px solid #f7f7f7;
+      opacity: 1;
+
+      &:hover {
+         background: #00ff88;
+      color: white;
+      }
+    }
+
+  }
+}
+
+</style>

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

@@ -0,0 +1,74 @@
+<script setup>
+	import { useRouter } from 'vue-router'
+	
+	import { useI18n } from 'vue-i18n'
+
+	const router = useRouter()
+
+	const text = {
+    messages: {
+      en: {
+        HERO: {
+			    TITLE: "Phuket №1 Weed Shop with<br><b class='t-white'>Sameday Delivery</b>",
+			    DESCRIPTION: "Weeder Delivery stocks a wide range of quality CBD & high THC weed strains available for purchase whether you are a local, expat or tourist. We also receive new cannabis strains for our clients to enjoy daily!",
+			    ACTION: "Open Marketplace →",
+			    SUBACTION: "Get Recomendation"
+			  }
+      },
+      ru: {
+	      HERO: {
+			    TITLE: "Лучшая доставка травки<br><b class='t-white'> на Пхукете за 1 час</b>",
+			    DESCRIPTION: "Weeder Delivery предлагает широкий ассортимент качественных сортов с CBD и высоким содержанием THC, доступных для покупки независимо от того, являетесь ли вы местным, эмигрантом или туристом. Мы также ежедневно получаем новые сорта каннабиса для наших клиентов!",
+			    ACTION: "Открыть Маркетплейс →",
+			    SUBACTION: "Получить рекомендацию"
+			  }
+		  }
+  	}
+	}
+
+	const { t } = useI18n(text)
+</script>
+
+
+<template>
+	<div 
+	id="hero" 
+	class="t-center cols-1 flex-center flex section"
+	>
+
+		<div 
+		class="flex-column flex-center flex pd-big radius-medium col"
+		>
+			<h1 
+			class="mn-b-medium" 
+			v-html="t('HERO.TITLE')"
+			></h1>
+
+			<p 
+			class="w-m-60r mn-b-big t-transp p-big" 
+			v-html="t('HERO.DESCRIPTION')"
+			></p>
+
+			<div 
+			class="mobile-w-100 t-white gap-small cols-2"
+			>
+				<button  
+				@click="router.push('/catalog')" 
+				class="w-100 bg-dark t-white button">
+					{{t('HERO.ACTION')}}
+				</button>
+
+				<button 
+				@click="store.commit('toggleBackCall')"
+				class="w-100 bg-light t-dark br-light button">
+					{{t('HERO.SUBACTION')}}
+				</button>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<style lang="scss" scoped>
+</style>