Eagle eye onboarding (#496)

Author: joanagmaia

frontend/public/images/eagle-eye/banner.png

@@ -93,8 +93,9 @@
     &:active {
       @apply bg-gray-200 text-gray-600 border-2 border-gray-200 border-solid;
     }
-    &[disabled] {
-      @apply cursor-not-allowed bg-white text-gray-400 border-2 border-gray-100 border-solid;
+    &[disabled],
+    &.disabled {
+      @apply cursor-not-allowed bg-white text-gray-400 border-none;
     }
   }
 

frontend/public/images/eagle-eye/onboard-discover.png

@@ -0,0 +1,47 @@
+export const pageContent = {
+  organizations: {
+    icon: 'ri-community-line',
+    headerTitle: 'Organizations',
+    title:
+      'Get a pulse of the organizations represented in your community',
+    mainContent:
+      'Get a complete organization directory that you can search, filter, and sort instantly. Each organization also has its own profile page, which highlights key information about that organization and all the community members that belong to it. Keeping a pulse of which organizations your members are representing is extremely important for a successful bottom-up growth strategy.',
+    imageSrc: '/images/paywall/organizations.png',
+    imageClass: 'mt-8',
+    secondaryContent:
+      'Organizations are companies or entities within your community. If a member that works at a certain company joins your community, that company will be added as an organization.',
+    featuresList: []
+  },
+  eagleEye: {
+    icon: 'ri-search-eye-line',
+    headerTitle: 'Eagle Eye',
+    title: 'Locate & engage with the right content',
+    mainContent:
+      "Our Eagle Eye app allows you to monitor different community platforms to find relevant content to engage with, helping you to gain developers' mindshare and grow your community organically.",
+    imageSrc: '/images/paywall/eagle-eye.png',
+    imageClass: '',
+    featuresList: [
+      {
+        icon: 'ri-eye-2-line',
+        title:
+          'Keep an Eagle Eye view on relevant content & posts to grow',
+        content:
+          "On top of monitoring everything going on within your community, crowd.dev's Eagle Eye application is focused on helping you engage with relevant content outside of your community to help grow it further."
+      },
+      {
+        icon: 'ri-apps-2-line',
+        title:
+          'Identify and engage with content across platforms',
+        content:
+          'All you need to do is type in a few keywords and Eagle Eye will give you the most recent and relevant content to enage with accross platforms like HackerNews and Dev to connect you with like-minded people.'
+      },
+      {
+        icon: 'ri-character-recognition-line',
+        title:
+          'Search powered by Natural Language Processing',
+        content:
+          "The search engine behind Eagle Eye is based on a semantic model that delivers the most relevant content even when it doesn't match your keywords."
+      }
+    ]
+  }
+}

frontend/public/images/eagle-eye/onboard-engage.png

@@ -97,6 +97,7 @@ import config from '@/config'
 import AppPageWrapper from '@/shared/layout/page-wrapper.vue'
 import { defineProps, computed } from 'vue'
 import { premiumFeatureCopy } from '@/utils/posthog'
+import { pageContent } from '@/modules/layout/layout-page-content'
 
 const props = defineProps({
   module: {
@@ -109,54 +110,6 @@ const page = computed(() => pageContent[props.module])
 const computedFeaturePlan = computed(() => {
   return config.isCommunityVersion ? 'Custom' : 'Growth'
 })
-
-const pageContent = {
-  organizations: {
-    icon: 'ri-community-line',
-    headerTitle: 'Organizations',
-    title:
-      'Get a pulse of the organizations represented in your community',
-    mainContent:
-      'Get a complete organization directory that you can search, filter, and sort instantly. Each organization also has its own profile page, which highlights key information about that organization and all the community members that belong to it. Keeping a pulse of which organizations your members are representing is extremely important for a successful bottom-up growth strategy.',
-    imageSrc: '/images/paywall/organizations.png',
-    imageClass: 'mt-8',
-    secondaryContent:
-      'Organizations are companies or entities within your community. If a member that works at a certain company joins your community, that company will be added as an organization.',
-    featuresList: []
-  },
-  eagleEye: {
-    icon: 'ri-search-eye-line',
-    headerTitle: 'Eagle Eye',
-    title: 'Locate & engage with the right content',
-    mainContent:
-      'Our Eagle Eye app allows you to monitor different community platforms to find relevant content to engage with, helping you to gain developers’ mindshare and grow your community organically',
-    imageSrc: '/images/paywall/eagle-eye.png',
-    imageClass: '',
-    featuresList: [
-      {
-        icon: 'ri-eye-2-line',
-        title:
-          'Keep an Eagle Eye view on relevant content & posts to grow',
-        content:
-          'On top of monitoring everything going on within your community, crowd.dev’s Eagle Eye application is focused on helping you engage with relevant content outside of your community to help grow it further.'
-      },
-      {
-        icon: 'ri-apps-2-line',
-        title:
-          'Identify and engage with content across platforms',
-        content:
-          'All you need to do is type in a few keywords and Eagle Eye will give you the most recent and relevant content to enage with accross platforms like HackerNews and Dev to connect you with like-minded people.'
-      },
-      {
-        icon: 'ri-character-recognition-line',
-        title:
-          'Search powered by Natural Language Processing',
-        content:
-          'The search engine behind Eagle Eye is based on a semantic model that delivers the most relevant content even when it doesn’t match your keywords.'
-      }
-    ]
-  }
-}
 </script>
 
 <style lang="scss">

frontend/public/images/eagle-eye/onboard-grow.png

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="bg-brand-50/50 relative p-8 h-fit"
+    :class="{ 'h-68': showImage }"
+  >
+    <div class="">
+      <div
+        class="uppercase text-xs text-brand-500 font-semibold"
+      >
+        {{ preTitle }}
+      </div>
+      <h4 class="text-gray-900 mt-2">
+        {{ title }}
+      </h4>
+    </div>
+
+    <img
+      v-if="showImage"
+      class="absolute bottom-0 right-0 h-68"
+      src="/images/eagle-eye/banner.png"
+    />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  preTitle: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  showImage: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>