Modify sections
This commit is contained in:
samaradel
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<section class="pb-10 px-4 bg-cover text-center">
|
||||
<section
|
||||
class="pb-10 px-4 bg-cover text-center"
|
||||
:class="{
|
||||
pink: id == 'home',
|
||||
}"
|
||||
>
|
||||
<!-- why -->
|
||||
<div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
|
||||
<h2
|
||||
@@ -112,15 +117,23 @@
|
||||
|
||||
<!-- home -->
|
||||
|
||||
<div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'home'">
|
||||
<div class="w-full mx-auto mt-10 py-16" v-else-if="id == 'home'">
|
||||
<h2
|
||||
v-if="cta.title"
|
||||
class="text-3xl mb-2 uppercase leading-tight font-semibold font-heading"
|
||||
class="text-3xl uppercase leading-tight font-semibold font-heading"
|
||||
>
|
||||
{{ cta.title }}
|
||||
</h2>
|
||||
<div v-html="cta.content" class="mt-6 mb-8 text-gray-800"></div>
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
|
||||
<h2
|
||||
v-if="cta.subtitle"
|
||||
class="text-3xl uppercase leading-tight font-semibold font-heading"
|
||||
>
|
||||
{{ cta.subtitle }}
|
||||
</h2>
|
||||
|
||||
<g-image :src="cta.image.src" />
|
||||
<!-- <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="
|
||||
@@ -140,173 +153,246 @@
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-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-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button2 && cta.link2.includes('http')"
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button3 && cta.link3.includes('http')"
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button4 && cta.link4.includes('http')"
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-3 gap-4">
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
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-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button2 && cta.link2.includes('http')"
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button3 && cta.link3.includes('http')"
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button4 && cta.link4.includes('http')"
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button5 && cta.link5.includes('http')"
|
||||
:href="cta.link5"
|
||||
>{{ cta.button5 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link5"
|
||||
>{{ cta.button5 }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button6 && cta.link6.includes('http')"
|
||||
:href="cta.link4"
|
||||
>{{ cta.button6 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link6"
|
||||
>{{ cta.button6 }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- tft -->
|
||||
<div
|
||||
class="w-full lg:max-w-4xl mx-auto lg:mt-20 lg:px-16 lg:py-10 tft_section"
|
||||
@@ -563,3 +649,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
@@ -156,6 +156,163 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-12 px-4 text-center" v-else-if="id == 'oldhome'">
|
||||
<h2 class="text-4xl leading-tight mb-6 font-bold font-heading uppercase">
|
||||
{{ main.title }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="main.content"
|
||||
class="mb-6 text-gray-700"
|
||||
v-html="main.content"
|
||||
></div>
|
||||
<div class="flex flex-wrap items-center -mx-4 mb-6">
|
||||
<div
|
||||
v-for="(feature, index) in features"
|
||||
:key="index"
|
||||
class="lg:w-1/3 mt-5 lg:mt-0 feature px-4 text-center"
|
||||
>
|
||||
<div v-if="index == 1">
|
||||
<div class="w-1/2 lg:w-full lg:h-full mx-auto px-2 order-1">
|
||||
<g-image :src="feature.svg" :alt="feature.title" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<span v-if="index !== 4" class="img-border"></span>
|
||||
<h5 class="capitalize">
|
||||
{{ feature.title }}
|
||||
</h5>
|
||||
<div v-html="feature.content" class="text-gray-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-20" v-if="main.btn">
|
||||
<a
|
||||
v-if="main.link.includes('http')"
|
||||
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="main.link"
|
||||
target="_blank"
|
||||
>{{ main.btn }}
|
||||
</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="main.link"
|
||||
>{{ main.btn }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="main.link2.includes('http')"
|
||||
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="main.link2"
|
||||
target="_blank"
|
||||
>{{ main.btn2 }}
|
||||
</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="main.link2"
|
||||
>{{ main.btn2 }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="main.link3.includes('http')"
|
||||
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="main.link3"
|
||||
target="_blank"
|
||||
>{{ main.btn3 }}
|
||||
</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="main.link3"
|
||||
>{{ main.btn3 }}
|
||||
</a>
|
||||
<!-- <div v-html="main.content" class="text-sm text-gray-400 mt-5"></div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-12 px-4" v-else>
|
||||
<h2 class="text-4xl text-center mb-12 font-normal font-heading">
|
||||
{{ main.title }}
|
||||
|
||||
Reference in New Issue
Block a user