Add conversations page

2021-12-29 17:51:51 +02:00
parent 88da615a28
commit 5f800c7bb4
35 changed files with 576 additions and 26 deletions
--- a/src/components/custom/ConversationSec.vue
+++ b/src/components/custom/ConversationSec.vue
@@ -0,0 +1,94 @@
+<template>
+  <section class="px-4">
+    <h2
+      v-if="main.title"
+      class="
+        lg:text-6xl
+        text-center
+        uppercase
+        mb-2
+        leading-none
+        font-bold font-heading
+      "
+    >
+      {{ main.title }}
+    </h2>
+    
+    <article
+      class="flex my-20 text-center px-10 md:text-left flex-col md:flex-row"
+      v-for="conversation in conversations"
+      :key="conversation.id"
+    >
+      <div class="lg:w-1/3 mb-12">
+        <span class="block text-sm mb-1">{{ conversation.day }}</span>
+        <span
+          class="
+            block
+            text-xl
+            font-medium
+            uppercase
+            leading-6
+            text-gray-900
+            mb-1.5
+          "
+          >{{ conversation.month }}</span
+        ><span class="block text-sm mb-1">{{ conversation.time }}</span>
+      </div>
+      <div class="lg:w-2/3">
+        <h3 class="mb-3 text-4xl font-medium uppercase leading-9">
+          {{ conversation.title }}
+        </h3>
+        <p class="mb-4"><b>Hosts:</b> {{ conversation.hosts }}</p>
+        <div
+          class="font-lg post-content leading-6"
+          v-html="conversation.content"
+        ></div>
+        <a
+          v-if="conversation.link.includes('http')"
+          target="_blank"
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            my-5
+            border-2
+            shadow
+            border-black
+          "
+          :href="conversation.link"
+          >{{ conversation.button }}</a
+        >
+        <a
+          v-else
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            my-5
+            border-2
+            shadow
+            border-black
+          "
+          :href="conversation.link"
+          >{{ conversation.button }}</a
+        >
+      </div>
+    </article>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["id", "main", "conversations"],
+};
+</script>
--- a/src/components/custom/SplitWithForm.vue
+++ b/src/components/custom/SplitWithForm.vue
@@ -1,13 +1,23 @@
 <template>
-  <section class="body-font" id="subscribe">
-    <div class="mx-auto flex  py-10 lg:py-20 md:flex-row flex-col items-center lg:px-10">
+  <section class="body-font">
+    <div
+      class="
+        mx-auto
+        flex
+        py-10
+        lg:py-20
+        md:flex-row
+        flex-col
+        items-center
+        lg:px-10
+      "
+      v-if="id == 'subscribe'"
+    >
      <div
        class="
-          lg:pl-24
-          lg:w-1/2
+          lg:pl-24 lg:w-1/2
          flex flex-col
-          md:items-start
-          md:text-left
+          md:items-start md:text-left
          mb-16
          md:mb-0
          mx-4
@@ -17,15 +27,16 @@
      >
        <h2
          class="
-            lg:text-6xl uppercase mb-0 leading-tight font-semibold font-heading
+            lg:text-6xl
+            uppercase
+            mb-0
+            leading-tight
+            font-semibold font-heading
          "
        >
          {{ subscribe.title }}
        </h2>
-        <div
-          class="my-8 lg:text-xl"
-          v-html="subscribe.content"
-        ></div>
+        <div class="my-8 lg:text-xl" v-html="subscribe.content"></div>
        <div class="flex w-full md:justify-start justify-center items-end">
          <!-- <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
            <label for="hero-field" class="leading-7 text-sm text-gray-600"
@@ -58,7 +69,7 @@

          <a
            href="javascript:;"
-                onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
+            onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
            class="
              inline-flex
              bg-white
@@ -153,6 +164,73 @@
        />
      </div>
    </div>
+    <div
+      v-else-if="id == 'conversations'"
+      class="
+        mx-auto
+        flex
+        py-10
+        lg:py-20
+        md:flex-row
+        flex-col
+        items-center
+        lg:px-10
+      "
+    >
+      <div
+        class="
+          lg:pl-24 lg:w-1/2
+          flex flex-col
+          md:items-start md:text-left
+          mb-16
+          md:mb-0
+          mx-4
+          items-center
+          text-center
+        "
+      >
+        <h2
+          class="
+            lg:text-6xl
+            uppercase
+            mb-0
+            leading-tight
+            font-semibold font-heading
+          "
+        >
+          {{ subscribe.title }}
+        </h2>
+        <div class="my-8 lg:text-xl" v-html="subscribe.content"></div>
+        <div class="flex w-full md:justify-start justify-center items-end">
+          <a
+            href="javascript:;"
+            onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
+            class="
+              inline-flex
+              bg-white
+              border-2
+              py-1
+              px-12
+              learn-button
+              hover:bg-gray-400
+              shadow
+              border-black
+              text-black text-lg
+              cursor-pointer
+            "
+          >
+            {{ subscribe.button }}
+          </a>
+        </div>
+      </div>
+      <div class="md:w-1/2 hidden md:flex">
+        <g-image
+          class="object-cover w-3/4 mx-auto object-center rounded"
+          :alt="subscribe.title"
+          :src="subscribe.image.src"
+        />
+      </div>
+    </div>
  </section>
 </template>

--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -1459,7 +1459,11 @@
      >
    </div>

-    <div  id="gettft" class="w-full mx-auto lg:py-20" v-else-if="id == 'tft' && lastCta">
+    <div
+      id="gettft"
+      class="w-full mx-auto lg:py-20"
+      v-else-if="id == 'tft' && lastCta"
+    >
      <h2
        v-if="cta.title"
        class="
@@ -1480,10 +1484,17 @@
        class="mt-6 mb-8 mx-2 lg:text-xl text-gray-800"
      ></div>

-       <div class="quicklinks">
-          <a :href="cta.link" target="_blank"><g-image class="py-2 my-2 px-5 border-2 border-black" :src="cta.image2"  /></a
-          ><a  :href="cta.link2" target="_blank"><g-image class="py-2 my-2 px-5 border-2 border-black" :src="cta.image3" /></a>
-        </div>
+      <div class="quicklinks">
+        <a :href="cta.link" target="_blank"
+          ><g-image
+            class="py-2 my-2 px-5 border-2 border-black"
+            :src="cta.image2" /></a
+        ><a :href="cta.link2" target="_blank"
+          ><g-image
+            class="py-2 my-2 px-5 border-2 border-black"
+            :src="cta.image3"
+        /></a>
+      </div>

      <!-- <a
        class="
@@ -1702,6 +1713,67 @@
      >
    </div>

+    <!-- conversations -->
+    <div class="w-full mx-auto lg:py-20" v-else-if="id == 'conversations'">
+      <h2
+        v-if="cta.title"
+        class="
+          lg:text-6xl
+          text-center
+          uppercase
+          mb-2
+          leading-none
+          font-bold font-heading
+        "
+      >
+        {{ cta.title }}
+      </h2>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-8 lg:text-xl text-gray-800 max-w-2xl mx-auto"
+      ></div>
+      <a
+        class="
+          inline-block
+          bg-white
+          text-lg
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        target="_blank"
+        v-if="cta.button && cta.link.includes('http')"
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+
+      <a
+        class="
+          inline-block
+          bg-white
+          text-lg
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        v-else
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+    </div>
+
    <div class="w-full max-w-7xl mx-auto" v-else>
      <h2
        v-if="cta.title"
@@ -1725,7 +1797,6 @@
            py-2
            mr-5
            mb-4
-            rounded
            shadow
            rounded-full
          "
@@ -1785,7 +1856,6 @@
          py-2
          mr-5
          mb-4
-          rounded
          shadow
          rounded-full
        "
--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -447,8 +447,11 @@
          v-html="excerpt"
        ></div>
        <div class="quicklinks">
-          <a :href="link" target="_blank"><g-image :src="buttonImg"  style="width:200px"/></a
-          ><a :href="link2" target="_blank"><g-image :src="buttonImg2" style="width:150px"/></a>
+          <a :href="link" target="_blank"
+            ><g-image :src="buttonImg" style="width: 200px" /></a
+          ><a :href="link2" target="_blank"
+            ><g-image :src="buttonImg2" style="width: 150px"
+          /></a>
        </div>
      </div>
    </div>
@@ -584,7 +587,63 @@
        :alt="altImg"
      />
    </div>
+    <!-- conversation -->
+    <div
+      class="flex flex-wrap text-center lg:text-left lg:pt-10 -mx-2"
+      v-else-if="id == 'conversations'"
+    >
+      <g-image
+        class="order-2 lg:order-none mx-auto w-1/2"
+        :src="img"
+        :alt="altImg"
+      />
+      <div class="px-3 lg:mt-5 order-1 lg:order-none mx-auto text-center">
+        <h2 class="md:text-6xl uppercase mb-6 mt-20 leading-none font-heading">
+          {{ title }}
+        </h2>
+        <div class="mb-8 mx-auto lg:text-2xl max-w-2xl" v-html="excerpt"></div>

+        <a
+          v-if="link.includes('http')"
+          target="_blank"
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            mb-4
+            border-2
+            shadow
+            border-black
+          "
+          :href="link"
+          >{{ button }}</a
+        >
+        <a
+          v-else
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            mb-4
+            border-2
+            shadow
+            border-black
+          "
+          :href="link"
+          >{{ button }}</a
+        >
+      </div>
+    </div>
    <!-- community -->
    <div
      class="flex flex-wrap text-center lg:text-left lg:pt-10 lg:pb-10 -mx-2"
--- a/src/components/marketing/sections/logo-clouds/off_white_grid.vue
+++ b/src/components/marketing/sections/logo-clouds/off_white_grid.vue
@@ -1,9 +1,21 @@
 <template>
  <div class="bg-white">
    <div
-      v-if="id == 'community'"
+      v-if="id == 'community' || id == 'conversations'"
      class="max-w-screen-xl mx-auto py-6 px-4 sm:px-6 lg:py-12 lg:px-10"
    >
+      <h2
+        v-if="id == 'conversations'"
+        class="
+          lg:text-6xl
+          mb-0
+          leading-tight
+          text-center
+          font-semibold font-heading
+        "
+      >
+        {{ news.title }}
+      </h2>
      <div
        v-html="news.content"
        class="text-center text-6xl font-semibold leading-tight font-heading"