feat: WIP promo component

components/PluginPromo.ce.vue

@@ -1,11 +1,86 @@
 <script lang="ts" setup>
+import type { UserProfilePromoFeature } from '~/types/userProfile';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
+
+const features = ref<UserProfilePromoFeature[]>([
+  {
+    title: 'Dynamic Remote Access',
+    copy: 'Toggle on/off server accessibility with dynamic remote access. Automatically turn on UPnP and open a random WAN port on your router at the click of a button and close off access in seconds.',
+  },
+  {
+    title: 'Manage Your Server Within Connect',
+    copy: 'Servers equipped with a myunraid.net certificate can be managed directly from within the Connect web UI. Manage multiple servers from your phone, tablet, laptop, or PC in the same browser window.',
+  },
+  {
+    title: 'Deep Linking',
+    copy: 'The Connect dashboard links to relevant sections of the webgui, allowing quick access to those settings and server sections.',
+  },
+  {
+    title: 'Online Flash Backup',
+    copy: 'Never ever be left without a backup of your config. If you need to change flash drives, generate a backup from Connect and be up and running in minutes.',
+  },
+  {
+    title: 'Real-time Monitoring',
+    copy: 'Get an overview of your server\'s state, storage space, apps and VMs status, and more.',
+  },
+  {
+    title: 'Customizable Dashboard Tiles',
+    copy: 'Set custom server tiles how you like and automatically display your server\'s banner image on your Connect Dashboard.',
+  },
+  {
+    title: 'License Management',
+    copy: 'Manage your license keys at any time via the My Keys section.',
+  },
+  {
+    title: 'Plus more on the way',
+    copy: 'All you need is an active internet connection, an Unraid.net account, and the Connect plugin. Get started by installing the plugin.',
+  },
+]);
+
+const installPlugin = (staging = false) => {
+  return console.debug(staging ? 'dynamix.unraid.net.staging.plg' : 'dynamix.unraid.net.plg');
+};
+
+const installButtonClasses = 'text-white text-14px text-center w-full flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md bg-gradient-to-r from-red to-orange hover:from-red/60 hover:to-orange/60 focus:from-red/60 focus:to-orange/60';
 </script>
 
 <template>
-  <div class="text-white font-semibold p-4 bg-orange-400 rounded-lg">
-    PluginPromo.ce
+  <div class="Promo TopBlip text-beta bg-alpha border-grey-darkest text-center relative z-10 w-full max-w-800px mr-8px p-24px sm:p-32px lg:px-40px shadow-md rounded-lg">
+    <h2 class="text-24px font-semibold my-0">
+      Enhance your Unraid experience with these <span class="inline-flex flex-row items-end gap-x-4px"><br class="hidden sm:block"/>Connect <span><UpcBeta /></span></span> features
+    </h2>
+
+    <div class="text-12px flex flex-wrap justify-center my-16px">
+      <UpcPromoFeature
+        v-for="(feature, index) in features"
+        :key="index"
+        :title="feature.title"
+        :copy="feature.copy"
+      />
+    </div>
+
+    <div class="w-full max-w-xs flex flex-col gap-y-8px mx-auto">
+      <!-- v-if="devEnv" -->
+      <button @click="installPlugin(true)" :class="installButtonClasses">Install Staging</button>
+      <button @click="installPlugin()" :class="installButtonClasses">{{ 'Install Connect' }}</button>
+      <div>
+        <a
+          href="https://docs.unraid.net/category/unraid-connect"
+          class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
+          target="_blank"
+          rel="noopener noreferrer"
+          :title="'Checkout the Connect Documentation'"
+        >{{ 'Learn More' }}</a>
+        <button
+          @click="console.debug('Close Promo')"
+          class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
+          :title="'Close Promo'"
+        >
+          {{ 'No thanks' }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 

components/UserProfile/Dropdown.vue

@@ -85,7 +85,7 @@ const links = computed(():UserProfileLink[] => {
 </script>
 
 <template>
-  <UpcDropdownWrapper class="min-w-300px max-w-350px">
+  <UpcDropdownWrapper class="DropdownWrapper_blip text-beta absolute z-30 top-full right-0 min-w-300px max-w-350px">
     <header class="flex flex-row items-start justify-between mt-8px mx-8px">
       <h3 class="text-18px leading-none inline-flex flex-row gap-x-8px items-center">
         <span class="font-semibold">Connect</span>

components/UserProfile/DropdownWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="DropdownWrapper_blip text-beta absolute z-30 top-full right-0 flex flex-col gap-y-8px p-8px bg-alpha border rounded-lg shadow-[var(--ring-offset-shadow)_var(--ring-shadow)_var(--shadow-beta)]">
+  <nav class="flex flex-col gap-y-8px p-8px bg-alpha border rounded-lg shadow-[var(--ring-offset-shadow)_var(--ring-shadow)_var(--shadow-beta)]">
     <slot/>
   </nav>
 </template>

components/UserProfile/PromoFeature.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+export interface Props {
+  center?: boolean;
+  copy?: string;
+  icon?: string;
+  title?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div
+    class="text-left relative flex overflow-hidden p-8px"
+    :class="{
+      'w-full sm:w-1/2': !center,
+      'max-w-640px': center,
+    }"
+  >
+    <span v-if="!center" class="flex-shrink-0">
+      <slot></slot>
+    </span>
+    <div class="inline-flex flex-col pl-4 mr-4" :class="{ 'text-center': center }">
+      <h3 class="font-semibold" :class="{ 'mt-0 mb-4px': copy, 'my-0': !copy, 'flex flex-row justify-center items-center': center }">
+        <span v-if="center" class="flex-shrink-0 mr-8px">
+          <slot></slot>
+        </span>
+        {{ title }}
+      </h3>
+      <p v-if="copy" v-html="copy" class="opacity-90 py-0" :class="{'px-8px': center}"></p>
+    </div>
+  </div>
+</template>

types/userProfile.ts

@@ -10,3 +10,9 @@ export interface UserProfileLink {
   text: string;
   title?: string;
 }
+
+export interface UserProfilePromoFeature {
+  copy: string;
+  icon?: typeof ArrowTopRightOnSquareIcon;
+  title: string;
+}