Add conversations page
This commit is contained in:
samaradel
94
src/components/custom/ConversationSec.vue
Normal file
94
src/components/custom/ConversationSec.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
"
|
||||
|
||||
Reference in New Issue
Block a user