init tft page
This commit is contained in:
samaradel
@@ -4,12 +4,24 @@
|
||||
<div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
|
||||
<h2
|
||||
v-if="cta.title"
|
||||
class="text-4xl text-center uppercase mb-2 leading-none font-light font-heading"
|
||||
class="
|
||||
text-4xl text-center
|
||||
uppercase
|
||||
mb-2
|
||||
leading-none
|
||||
font-light font-heading
|
||||
"
|
||||
>
|
||||
{{ cta.title }}
|
||||
</h2>
|
||||
<span
|
||||
class="text-center uppercase leading-none text-4xl text-gray-800 font-black font-heading"
|
||||
class="
|
||||
text-center
|
||||
uppercase
|
||||
leading-none
|
||||
text-4xl text-gray-800
|
||||
font-black font-heading
|
||||
"
|
||||
>
|
||||
{{ cta.slogan }}
|
||||
</span>
|
||||
@@ -17,25 +29,81 @@
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<g-link
|
||||
class="inline-block bg-blue-900 text-md learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-md
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:to="cta.link"
|
||||
>{{ cta.button }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
@@ -55,32 +123,213 @@
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="inline-block cursor-pointer bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
cursor-pointer
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<g-link
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
>
|
||||
|
||||
<g-link
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button4"
|
||||
:to="cta.link4"
|
||||
>{{ cta.button4 }}</g-link
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- tft -->
|
||||
<div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'tft'">
|
||||
<h2
|
||||
v-if="cta.title"
|
||||
class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
|
||||
>
|
||||
{{ cta.title }}
|
||||
</h2>
|
||||
<div v-html="cta.content" class="mt-6 mb-8 text-2xl text-gray-800"></div>
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="
|
||||
inline-block
|
||||
cursor-pointer
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
>
|
||||
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button4"
|
||||
:to="cta.link4"
|
||||
>{{ cta.button4 }}</g-link
|
||||
@@ -98,25 +347,82 @@
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="inline-block cursor-pointer bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
cursor-pointer
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<g-link
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
|
||||
@@ -4,21 +4,55 @@
|
||||
<!-- token -->
|
||||
<div
|
||||
v-if="id == 'token'"
|
||||
class="brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
|
||||
class="
|
||||
brandpanel
|
||||
rounded-lg
|
||||
shadow-xl
|
||||
overflow-hidden
|
||||
lg:grid lg:grid-cols-2
|
||||
lg:gap-4
|
||||
"
|
||||
>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<g-image
|
||||
class="absolute brandpanel inset-0 w-full h-full translate-x-0 translate-y-center rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
|
||||
class="
|
||||
absolute
|
||||
brandpanel
|
||||
inset-0
|
||||
w-full
|
||||
h-full
|
||||
translate-x-0 translate-y-center
|
||||
rounded-md
|
||||
object-fill object-left-top
|
||||
sm:translate-x-0
|
||||
lg:translate-y-20
|
||||
"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="pt-10 pb-10 px-6 sm:pt-16 sm:px-10 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
|
||||
class="
|
||||
pt-10
|
||||
pb-10
|
||||
px-6
|
||||
sm:pt-16
|
||||
sm:px-10
|
||||
lg:py-16
|
||||
lg:pr-0
|
||||
xl:py-20
|
||||
xl:px-15
|
||||
"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
|
||||
class="
|
||||
text-4xl
|
||||
mb-2
|
||||
uppercase
|
||||
leading-tight
|
||||
font-semibold font-heading
|
||||
"
|
||||
>
|
||||
<span class="block">{{ brand.title }}</span>
|
||||
<span class="block" v-if="brand.subtitle">{{
|
||||
@@ -30,7 +64,18 @@
|
||||
v-if="brand.btnTxt"
|
||||
target="_blank"
|
||||
:href="brand.sourceUrl"
|
||||
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-white px-12 py-2 mr-3 shadow rounded-full"
|
||||
class="
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-white
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
@@ -40,14 +85,38 @@
|
||||
<!-- why -->
|
||||
<div
|
||||
v-else-if="id == 'why'"
|
||||
class="whybrand brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
|
||||
class="
|
||||
whybrand
|
||||
brandpanel
|
||||
rounded-lg
|
||||
shadow-xl
|
||||
overflow-hidden
|
||||
lg:grid lg:grid-cols-2
|
||||
lg:gap-4
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
|
||||
class="
|
||||
pt-10
|
||||
pb-12
|
||||
px-6
|
||||
sm:pt-16
|
||||
sm:px-16
|
||||
lg:py-16
|
||||
lg:pr-0
|
||||
xl:py-20
|
||||
xl:px-15
|
||||
"
|
||||
>
|
||||
<div class="lg:self-center text-center">
|
||||
<h2
|
||||
class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
|
||||
class="
|
||||
text-4xl
|
||||
mb-2
|
||||
uppercase
|
||||
leading-tight
|
||||
font-semibold font-heading
|
||||
"
|
||||
>
|
||||
<span class="block">{{ brand.title }}</span>
|
||||
<span class="block" v-if="brand.subtitle">{{
|
||||
@@ -57,27 +126,66 @@
|
||||
<div class="py-6 mt-4 mx-4 text-black" v-html="brand.content"></div>
|
||||
<a
|
||||
:href="brand.sourceUrl"
|
||||
class="bg-gray-700 text-sm learn-button hover:bg-57EEF8-400 text-white px-12 py-2 mr-3 shadow rounded-full"
|
||||
class="
|
||||
bg-gray-700
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-57EEF8-400
|
||||
text-white
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<g-image
|
||||
class="absolute brandpanel inset-0 w-full h-full transform translate-x-0 translate-y-6 rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
|
||||
class="
|
||||
absolute
|
||||
brandpanel
|
||||
inset-0
|
||||
w-full
|
||||
h-full
|
||||
transform
|
||||
translate-x-0 translate-y-6
|
||||
rounded-md
|
||||
object-fill object-left-top
|
||||
sm:translate-x-0
|
||||
lg:translate-y-20
|
||||
"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- home -->
|
||||
<div v-else-if="id == 'home'" class="brandpanel lg:grid lg:grid-cols-2">
|
||||
<div
|
||||
class="py-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
|
||||
class="
|
||||
py-12
|
||||
px-6
|
||||
sm:pt-16
|
||||
sm:px-16
|
||||
lg:py-16
|
||||
lg:pr-0
|
||||
xl:py-20
|
||||
xl:px-15
|
||||
"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
class="text-4xl leading-tight mb-6 font-bold font-heading uppercase"
|
||||
class="
|
||||
text-4xl
|
||||
leading-tight
|
||||
mb-6
|
||||
font-bold font-heading
|
||||
uppercase
|
||||
"
|
||||
>
|
||||
<span class="block">{{ brand.title }}</span>
|
||||
<span class="block" v-if="brand.subtitle">{{
|
||||
@@ -92,13 +200,35 @@
|
||||
v-if="brand.sourceUrl.includes('http')"
|
||||
:href="brand.sourceUrl"
|
||||
target="_blank"
|
||||
class="bg-teal-300 text-sm learn-button hover:bg-57EEF8-400 text-gray-900 px-12 py-2 mr-3 shadow rounded-full"
|
||||
class="
|
||||
bg-teal-300
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-57EEF8-400
|
||||
text-gray-900
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="brand.sourceUrl"
|
||||
class="bg-teal-300 text-sm learn-button hover:bg-57EEF8-400 text-gray-900 px-12 py-2 mr-3 shadow rounded-full"
|
||||
class="
|
||||
bg-teal-300
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-57EEF8-400
|
||||
text-gray-900
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
@@ -112,12 +242,111 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tft -->
|
||||
<div
|
||||
v-else-if="id == 'tft'"
|
||||
class="
|
||||
brandpanel
|
||||
rounded-lg
|
||||
overflow-hidden
|
||||
lg:grid lg:grid-cols-2
|
||||
lg:gap-4
|
||||
"
|
||||
>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<g-image
|
||||
class="
|
||||
absolute
|
||||
brandpanel
|
||||
inset-0
|
||||
w-full
|
||||
h-full
|
||||
sm:h-auto
|
||||
translate-x-0 translate-y-center
|
||||
rounded-md
|
||||
object-fill object-left-top
|
||||
sm:translate-x-0
|
||||
lg:translate-y-20
|
||||
"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
pt-10
|
||||
pb-10
|
||||
px-6
|
||||
sm:pt-16
|
||||
sm:px-10
|
||||
lg:py-16
|
||||
lg:pr-0
|
||||
xl:py-20
|
||||
xl:px-15
|
||||
"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
class="
|
||||
text-4xl
|
||||
mb-2
|
||||
uppercase
|
||||
leading-tight
|
||||
font-semibold font-heading
|
||||
"
|
||||
>
|
||||
<span class="block">{{ brand.title }}</span>
|
||||
<span class="block" v-if="brand.subtitle">{{
|
||||
brand.subtitle
|
||||
}}</span>
|
||||
</h2>
|
||||
<div class="py-6 mt-4 text-gray-600" v-html="brand.content"></div>
|
||||
<a
|
||||
v-if="brand.btnTxt"
|
||||
target="_blank"
|
||||
:href="brand.sourceUrl"
|
||||
class="
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-white
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="brandpanel bg-gray-900 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
|
||||
class="
|
||||
brandpanel
|
||||
bg-gray-900
|
||||
rounded-lg
|
||||
shadow-xl
|
||||
overflow-hidden
|
||||
lg:grid lg:grid-cols-2
|
||||
lg:gap-4
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
|
||||
class="
|
||||
pt-10
|
||||
pb-12
|
||||
px-6
|
||||
sm:pt-16
|
||||
sm:px-16
|
||||
lg:py-16
|
||||
lg:pr-0
|
||||
xl:py-20
|
||||
xl:px-15
|
||||
"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
@@ -138,7 +367,19 @@
|
||||
</div>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<g-image
|
||||
class="absolute brandpanel inset-0 w-full h-full transform translate-x-0 translate-y-6 rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
|
||||
class="
|
||||
absolute
|
||||
brandpanel
|
||||
inset-0
|
||||
w-full
|
||||
h-full
|
||||
transform
|
||||
translate-x-0 translate-y-6
|
||||
rounded-md
|
||||
object-fill object-left-top
|
||||
sm:translate-x-0
|
||||
lg:translate-y-20
|
||||
"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
|
||||
@@ -161,6 +161,63 @@
|
||||
<div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
|
||||
v-else-if="id == 'tft'"
|
||||
>
|
||||
<div class="lg:w-2/5 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
|
||||
<h2 class="text-6xl mb-6 mt-20 leading-none font-heading">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
|
||||
<div v-if="button">
|
||||
<a
|
||||
v-if="link.includes('http')"
|
||||
target="_blank"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="link"
|
||||
>{{ button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="link"
|
||||
>{{ button }}</a
|
||||
>
|
||||
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-3/5 px-2 self-center">
|
||||
<g-image :src="img" :alt="altImg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
|
||||
v-else
|
||||
|
||||
@@ -1,30 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
|
||||
<div
|
||||
class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"
|
||||
>
|
||||
<div class="lg:w-1/2">
|
||||
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" :style="img"></div>
|
||||
<div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
|
||||
<div
|
||||
v-if="id == 'tft'"
|
||||
class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:rounded-lg"
|
||||
>
|
||||
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
|
||||
<div class="mt-4 text-gray-700" v-html="card.content"></div>
|
||||
<div class="mt-8" v-if="card.button">
|
||||
<a
|
||||
v-if="card.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="card.link"
|
||||
class="
|
||||
bg-blue-900
|
||||
learn-button
|
||||
hover:bg-blue-700
|
||||
text-gray-100
|
||||
px-5
|
||||
py-3
|
||||
font-semibold
|
||||
rounded
|
||||
"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="card.link"
|
||||
class="
|
||||
bg-blue-900
|
||||
learn-button
|
||||
hover:bg-blue-700
|
||||
text-gray-100
|
||||
px-5
|
||||
py-3
|
||||
font-semibold
|
||||
rounded
|
||||
"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
</div>
|
||||
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
|
||||
<div class="mt-4 text-gray-700" v-html="card.content"></div>
|
||||
<div class="mt-8" v-if="card.button">
|
||||
<a
|
||||
v-if="card.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="card.link"
|
||||
class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="card.link"
|
||||
class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/2">
|
||||
<div
|
||||
class="h-64 bg-cover lg:rounded-lg lg:h-full"
|
||||
:style="{ 'background-image': 'url(' + img(card.img) + ')' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"
|
||||
>
|
||||
<div class="lg:w-1/2">
|
||||
<div
|
||||
class="h-64 bg-cover lg:rounded-lg lg:h-full"
|
||||
:style="{ 'background-image': 'url(' + img(card.img) + ')' }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
|
||||
<div class="mt-4 text-gray-700" v-html="card.content"></div>
|
||||
<div class="mt-8" v-if="card.button">
|
||||
<a
|
||||
v-if="card.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="card.link"
|
||||
class="
|
||||
bg-gray-900
|
||||
learn-button
|
||||
hover:bg-gray-700
|
||||
text-gray-100
|
||||
px-5
|
||||
py-3
|
||||
font-semibold
|
||||
rounded
|
||||
"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="card.link"
|
||||
class="
|
||||
bg-gray-900
|
||||
learn-button
|
||||
hover:bg-gray-700
|
||||
text-gray-100
|
||||
px-5
|
||||
py-3
|
||||
font-semibold
|
||||
rounded
|
||||
"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,14 +102,13 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
img: function () {
|
||||
if (this.card.image.src)
|
||||
return "background-image:url(" + this.card.image.src + ")";
|
||||
return this.card.image;
|
||||
props: ["id", "card"],
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
},
|
||||
},
|
||||
|
||||
props: ["card"],
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user