@ozdao/prometheus-framework 0.2.111 → 0.2.112

package/src/modules/users/components/sections/FeaturedUsers.vue

@@ -1,20 +1,79 @@
 <template>
-  <div class="pd-extra o-hidden w-100">
-    <div class="content">
-      <span class="h2 mn-b-big">
+  <div class="o-hidden w-100">
+    <div class="flex-center flex w-100">
+      <h2 class="t-center h2 w-max-50 mn-b-big">
         Ask over 5 million people who have trusted us for decades
-      </span>
-    </div>
-    <div class="gap-thin flex flex-nowrap">
-      <CardUser 
-        v-for="user in usersList" 
-        class="selector flex-child bg-grey pd-small radius-small"
-        :user="user" 
-        :photo="user.profile.photo"
-        :name="user.profile.name || user.phone || user.username"
-        :phone="'DJ'" 
-      /> 
+      </h2>
     </div>
+    <Marquee
+      class="mn-b-thin"
+      :gradient="true"
+      :gradientColor="'var(--white)'"
+      :gradientLength="'10%'"
+      :direction="'normal'"
+      :pauseOnHover="false"
+      :clone="true"
+    >
+      <div class="flex flex-nowrap">
+        <CardUser 
+          v-for="user in usersList.slice(0,6)" 
+          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-grey pd-small radius-medium"
+          :user="user" 
+          :photo="user.profile.photo"
+          :name="user.profile.name || user.phone || user.username"
+          :phone="'DJ'"
+        /> 
+      </div>
+    </Marquee>
+
+    <Marquee
+      class="mn-b-thin"
+      :gradient="true"
+      :gradientColor="'var(--white)'"
+      :gradientLength="'10%'"
+      :direction="'reverse'"
+      :pauseOnHover="false"
+      :clone="true"
+    >
+      <div class="flex flex-nowrap">
+        <CardUser 
+          v-for="user in usersList.slice(7,14)" 
+          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-grey pd-small radius-medium"
+          :user="user" 
+          :photo="user.profile.photo"
+          :name="user.profile.name || user.phone || user.username"
+          :phone="'DJ'"
+        /> 
+      </div>
+    </Marquee>
+
+    <Marquee
+      class="mn-b-big"
+      :gradient="true"
+      :gradientColor="'var(--white)'"
+      :gradientLength="'10%'"
+      :direction="'normal'"
+      :pauseOnHover="false"
+      :clone="true"
+    >
+      <div class="flex flex-nowrap">
+        <CardUser 
+          v-for="user in usersList.slice(15,22)" 
+          class="mn-r-thin h4 h-8r flex-child-grow-0 flex-child bg-grey pd-small radius-medium"
+          :user="user" 
+          :photo="user.profile.photo"
+          :name="user.profile.name || user.phone || user.username"
+          :phone="'DJ'"
+        /> 
+      </div>
+    </Marquee>
+
+    <p class="w-m-33r mn-r-auto mn-l-auto t-center mn-b-small p-big">
+      Together, we're shaping the future of the globals music community.
+    </p>
+    <router-link :to="{ name: 'Sign In' }" class="bg-black mn-r-auto mn-l-auto t-medium t-white button">
+      Join Now
+    </router-link>
   </div>
 </template>
 
@@ -23,12 +82,15 @@ import { ref, onMounted } from 'vue';
 
 import * as users from '@pf/src/modules/users/store/users'
 
+import Marquee from '@pf/src/components/Marquee/Marquee.vue'
+
 import CardUser from '@pf/src/modules/users/components/blocks/CardUser.vue'
 
 const usersList = ref([])
 
 onMounted(async() => {
   usersList.value = await users.actions.read({
+    limit: 25
   })
 });
 </script>

package/src/modules/users/users.client.js

@@ -2,6 +2,9 @@
 import Profile from './components/pages/Profile.vue';
 import ProfileEdit from './components/pages/ProfileEdit.vue';
 
+// Sections
+import FeaturedUsers from './components/sections/FeaturedUsers.vue';
+
 // Importing Vuex store modules from the store directory
 import * as usersStore from './store/users.js';
 
@@ -12,6 +15,8 @@ import usersRoutes from './router/users.js';
 export {
   Profile,
   ProfileEdit,
+  FeaturedUsers,
+  
   usersStore,
   usersRoutes
 };