From f20539c18eeeafc3a115f991a0bbb25a9ccd4dd1 Mon Sep 17 00:00:00 2001
From: Charles MCGregory <charlesm@datalogics.com>
Date: Fri, 20 Jan 2023 17:09:27 -0600
Subject: [PATCH] Update homepage

---
 components/TitleBody.vue             | 38 ++++++++++----
 components/homepage/APDFLLinks.vue   |  2 +-
 components/homepage/Endorsements.vue | 74 ++++++++++++++++++++++++++++
 pages/homepage.vue                   | 30 ++++++++---
 tailwind.config.js                   |  3 ++
 5 files changed, 131 insertions(+), 16 deletions(-)
 create mode 100644 components/homepage/Endorsements.vue

diff --git a/components/TitleBody.vue b/components/TitleBody.vue
index 81ea1aa..9198add 100644
--- a/components/TitleBody.vue
+++ b/components/TitleBody.vue
@@ -1,18 +1,34 @@
 <template>
   <div>
     <!-- NOTE PASS IN A TAG USING :tag WHEN IMPORTING THE COMPONENT -->
-    <div v-if="heroText != null && tag != null" class="text-white">
-      <h2>{{ heroText.title }}</h2>
-      <div v-html="heroText.html" />
+    <div v-if="heroTexts != null && tag != null">
+      <div v-for="heroText in heroTexts" :key="heroText.id">
+        <div class="flex flex-row">
+          <div>
+            <img
+              :src="heroText.feature_image"
+              :alt="feature_image_alt"
+              :class="img_css"
+            />
+          </div>
+          <div class="flex-col">
+            <h2>{{ heroText.title }}</h2>
+            <div v-html="heroText.html" />
+          </div>
+        </div>
+      </div>
     </div>
     <div v-else-if="title != null && body != null">
-      <h2
-        class="text-2xl font-white"
-      >
+      <h2 class="text-2xl font-white">
         {{ title }}
       </h2>
       <div class="text-lg" v-html="body" />
     </div>
+    <div v-else-if="title != null && body == null">
+      <h2 class="text-2xl font-white">
+        {{ title }}
+      </h2>
+    </div>
   </div>
 </template>
 
@@ -43,17 +59,21 @@ export default Vue.extend({
       type: String,
       required: false,
     },
+    img_css: {
+      type: String,
+      required: false,
+    },
   },
   data() {
     return {
-      heroText: null,
+      heroTexts: null,
     }
   },
   async created() {
     // NOTE Get the post using the tag passed as prop
-    const heroText = await getPosts(this.tag)
+    const heroTexts = await getPosts(this.tag)
     // NOTE Assign the post to heroText
-    this.heroText = heroText[0]
+    this.heroTexts = heroTexts
   },
 })
 </script>
diff --git a/components/homepage/APDFLLinks.vue b/components/homepage/APDFLLinks.vue
index 4304a9e..df345e2 100644
--- a/components/homepage/APDFLLinks.vue
+++ b/components/homepage/APDFLLinks.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cols-4 gap-x-10 w-full">
     <div v-for="link in links" :key="link.id" class="">
-      <div class="btn rounded">
+      <div class="btn rounded-full">
         <i class="icon icon-4691586_nuget_icon"></i>{{ link.name }}
       </div>
     </div>
diff --git a/components/homepage/Endorsements.vue b/components/homepage/Endorsements.vue
new file mode 100644
index 0000000..1fa34c1
--- /dev/null
+++ b/components/homepage/Endorsements.vue
@@ -0,0 +1,74 @@
+<template lang="">
+  <div class="grid grid-cols-7 gap-x-12 gap-y-20">
+    <div v-for="company in companys" :key="company.id">
+      <img :src="company.logo" :alt="company.name" class="h-24 w-auto" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      companys: [
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+        {
+          name: 'company-name',
+          logo: 'https://www.datalogics.com/wp-content/uploads/2022/12/callas_b.png',
+        },
+      ],
+    }
+  },
+}
+</script>
+<style lang=""></style>
diff --git a/pages/homepage.vue b/pages/homepage.vue
index 029bbd3..73083a7 100644
--- a/pages/homepage.vue
+++ b/pages/homepage.vue
@@ -1,9 +1,9 @@
 <template>
   <!-- Content Box -->
-  <div class="space-y-10">
+  <div class="flex flex-col space-y-24">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"></link>
     
-    <div class="hero min-h-screen bg-base-200 mb-12">
+    <div class="hero min-h-screen bg-base-200 mb-20">
       <div class="hero-content text-center min-w-full">
         <div class="flex lg:flex-row w-full justify-center">
           <div>
@@ -14,7 +14,7 @@
                 Take Control of <span class="text-accent">PDF</span> Workflows
               </h1>
             </div>
-            <TitleBody :tag="'hash-homeherotext'" class="prose" />
+            <TitleBody :tag="'hash-homeherotext'" class="prose text-white" />
             <SupportedPlatforms />
           </div>
           <CircleNav class="w-1/4" />
@@ -25,22 +25,40 @@
     
 
     <div class="hero h-20">
-      <APDFLLinks class="hero-content"/>
+      <APDFLLinks class="hero-content place-content-center"/>
     </div>
-    <div class="flex lg:flex-row w-fit mx-auto space-x-6 mb-12">
+    <div class="flex flex-col lg:flex-row w-fit mx-auto space-x-6 mb-12">
       <FeaturesBox :featuresContentTagList="firstFeatureBoxTags" />
       <FeaturesBox :featuresContentTagList="secondFeatureBoxTags" />
       <FeaturesBox :featuresContentTagList="thirdFeatureBoxTags" />
     </div>
+
+        <div class="hero min-h-80 bg-base-content py-10">
+      <div class=" hero-content min-w-full">
+        <Endorsements class=""/>
+      </div>
+    </div>
+
     <div class="min-h-screen w-1/2 mx-auto">
       <LowCodeTools />
     </div>
+
+    <div class="text-center bg-primary font-bold py-2">
+      <TitleBody :title="'Companion SDKs & Publishing Tools'"/>
+    </div>
+
+    <div class="hero">
+      <div class="hero-content min-w-full">
+        <TitleBody :tag="'hash-hp-sdk-pub'" class="prose text-primary-content w-3/4" :img_css="'max-h-44 max-w-sm'" />
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import Vue from 'vue'
 import CircleNav from '~/components/CircleNav.vue'
 import APDFLLinks from '~/components/homepage/APDFLLinks.vue'
+import Endorsements from '~/components/homepage/Endorsements.vue'
 import LowCodeTools from '~/components/homepage/LowCodeTools.vue'
 export default Vue.extend({
   name: 'homepage',
@@ -59,6 +77,6 @@ export default Vue.extend({
       ],
     }
   },
-  components: { CircleNav, LowCodeTools, APDFLLinks },
+  components: { CircleNav, LowCodeTools, APDFLLinks, Endorsements },
 })
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 20a17f4..db73f65 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,9 @@ module.exports = {
           success: '#36D399',
           warning: '#F2D424',
           error: '#F23924',
+          'primary-focus': '#063573',
+          'base-content': '#021733',
+          'primary-content': '#A8CDFB',
         },
       },
     ],