ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update home

Browse Source
This commit is contained in:
Ehab Hassan
2021-09-16 13:21:03 +02:00
parent cc193f17b3
commit 7add5f4172
14 changed files with 388 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/custom/Navbar/Navbar.vue
View File

@@ -22,7 +22,7 @@
<div class="inline-flex items-center flex-shrink-0">
<a href="/">
<g-image
:src="require(`!!assets-loader!@images/tfn_black.svg`)"
:src="require(`!!assets-loader!@images/tft_color_logo.svg`)"
class="mr-3 fill-current logo"
alt=""
/>
@@ -447,7 +447,7 @@ a.active--exact.active {
width: auto;
}
.logo {
max-width: 180px;
max-width: 80px;
}
@media (max-width: 768px) {
.navbar {

88
src/components/custom/sections/CallToAction.vue
View File

@@ -144,17 +144,18 @@
<a
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
target="_blank"
v-if="cta.button && cta.link.includes('http')"
@@ -164,17 +165,18 @@
<a
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
v-else
:href="cta.link"
@@ -183,17 +185,18 @@
<a
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
target="_blank"
v-if="cta.button2 && cta.link2.includes('http')"
@@ -203,17 +206,18 @@
<a
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
v-else
:href="cta.link2"
@@ -222,17 +226,18 @@
<a
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
target="_blank"
v-if="cta.button3 && cta.link3.includes('http')"
@@ -242,17 +247,18 @@
<a
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
v-else
:href="cta.link3"
@@ -261,17 +267,18 @@
<a
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
target="_blank"
v-if="cta.button4 && cta.link4.includes('http')"
@@ -281,17 +288,18 @@
<a
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
v-else
:href="cta.link4"

171
src/components/marketing/sections/cta-sections/BrandPanel.vue
View File

@@ -164,114 +164,77 @@
</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
"
>
<div
v-else-if="id == 'home'"
class="flex flex-wrap lg:text-left lg:pt-16 px-4"
>
<div class="lg:w-1/3 lg:px-6 self-center">
<g-image :src="image" :alt="brand.title" />
</div>
<div class="lg:w-2/3 lg:px-10 order-1 lg:order-none">
<div class="lg:self-center">
<h2
class="
text-4xl
leading-tight
mb-6
font-bold font-heading
uppercase
"
>
<h2 class="text-5xl mb-8 uppercase leading-none font-heading">
<span class="block">{{ brand.title }}</span>
<span class="block" v-if="brand.subtitle">{{
<!-- <span class="block" v-if="brand.subtitle">{{
brand.subtitle
}}</span>
}}</span> -->
</h2>
<div
class="mt-4 mx-4 mb-10 text-black"
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
v-if="brand.sourceUrl.includes('http')"
:href="brand.sourceUrl"
v-if="brand.btnTxt"
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
"
>{{ brand.btnTxt }}</a
>
<a
v-else
:href="brand.sourceUrl"
class="
bg-teal-300
inline-block
bg-white
text-sm
learn-button
hover:bg-57EEF8-400
text-gray-900
hover:bg-gray-400
bo
px-12
py-2
mr-3
py-1
mr-5
mb-4
border-2
shadow
rounded-full
border-black
"
>{{ brand.btnTxt }}</a
>
</div>
</div>
<div class="relative -mt-6">
<g-image
class="relative brandpanel inset-0 transform rounded-md object-fill"
:src="image"
:alt="brand.title"
/>
</div>
</div>
<!-- tft -->
<div
v-else-if="id == 'tft' && !diveInto"
class="flex flex-wrap text-center tft_section lg:text-left "
class="flex flex-wrap text-center tft_section lg:text-left"
>
<div class="lg:w-1/2 px-2 self-center">
<g-image
:src="image"
:alt="brand.title"
/>
<g-image :src="image" :alt="brand.title" />
</div>
<div
class="
lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-center
"
>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-center">
<div class="lg:self-center">
<h2
class="
text-6xl mb-6 uppercase leading-none font-heading
"
>
<h2 class="text-6xl mb-6 uppercase leading-none 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-900 text-2xl leading-tight tft_subtitle tracking-wide" v-html="brand.content"></div>
<div
class="
py-6
mt-4
text-gray-900 text-2xl
leading-tight
tft_subtitle
tracking-wide
"
v-html="brand.content"
></div>
<a
v-if="brand.btnTxt"
target="_blank"
@@ -294,53 +257,49 @@
</div>
</div>
<div
<div
v-else-if="id == 'tft' && diveInto"
class="flex flex-wrap tft_section lg:text-left lg:pt-16 px-4 "
class="flex flex-wrap tft_section lg:text-left lg:pt-16 px-4"
>
<div class="lg:w-1/2 px-2 self-center">
<g-image
:src="image"
:alt="brand.title"
/>
<g-image :src="image" :alt="brand.title" />
</div>
<div
class="
lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none
"
>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
<div class="lg:self-center">
<h2
class="
text-6xl mb-8 uppercase leading-none font-heading
"
>
<h2 class="text-6xl mb-8 uppercase leading-none font-heading">
<span class="block">{{ brand.title }}</span>
<span class="block" v-if="brand.subtitle">{{
brand.subtitle
}}</span>
</h2>
<div class="pb-6 text-gray-900 text-2xl leading-tight tft_subtitle tracking-wide" v-html="brand.content"></div>
<div
class="
pb-6
text-gray-900 text-2xl
leading-tight
tft_subtitle
tracking-wide
"
v-html="brand.content"
></div>
<a
v-if="brand.btnTxt"
target="_blank"
:href="brand.sourceUrl"
class="
inline-block
bg-gray-900
text-2xl
learn-button
hover:bg-gray-800
text-gray-100
px-16
py-1
mb-4
shadow
rounded-full
tft_subtitle
tracking-widev
bg-gray-900
text-2xl
learn-button
hover:bg-gray-800
text-gray-100
px-16
py-1
mb-4
shadow
rounded-full
tft_subtitle
tracking-widev
"
>{{ brand.btnTxt }}</a
>
@@ -416,7 +375,7 @@
<script>
export default {
props: ["brand", "id" , "diveInto"],
props: ["brand", "id", "diveInto"],
computed: {
image() {
return this.brand.image.src

100
src/components/marketing/sections/cta-sections/Header.vue
View File

@@ -1,5 +1,7 @@
<template>
<section class="py-15 mb-10 px-4">
<section class="mb-10 px-4 bg-no-repeats bg-cover"
:style="{ 'background-image': 'url(' + image.src + ')' }"
>
<div
class="flex flex-wrap text-center items-center pb-20 lg:text-left -mx-2"
v-if="id == 'why'"
@@ -43,7 +45,7 @@
v-if="link.includes('http')"
target="_blank"
class="
nline-block
inline-block
bg-blue-900
text-sm
learn-button
@@ -63,7 +65,7 @@
<a
v-else
class="
nline-block
inline-block
bg-blue-900
text-md
learn-button
@@ -224,29 +226,31 @@
class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
v-else
>
<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">
<span class="text-blue-600">{{ slogan }}</span> {{ title }}
<div class="px-2 lg:py-40 lg:mt-10 order-1 lg:order-none mx-auto text-center">
<h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
<span class="">{{ slogan }}</span><br>
{{ title }}
</h2>
<div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
<div v-if="button">
<div class="mb-8 text-lg leading-relaxed" v-html="excerpt"></div>
<a
v-if="link.includes('http')"
target="_blank"
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
rounded
border-2
shadow
rounded-full
border-black
"
:href="link"
>{{ button }}</a
@@ -255,28 +259,74 @@
v-else
class="
inline-block
bg-blue-900
bg-white
text-sm
learn-button
hover:bg-blue-800
text-gray-100
hover:bg-gray-400
bo
px-12
py-2
py-1
mr-5
mb-4
rounded
border-2
shadow
rounded-full
border-black
"
:href="link"
>{{ 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
"
:href="link2"
>{{ 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
"
:href="link3"
>{{ button3 }}</a
>
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
</div>
</div>
<div class="lg:w-3/5 px-2 self-center">
<!-- <div class="lg:w-3/5 px-2 self-center">
<g-image :src="img" :alt="altImg" />
</div>
</div> -->
</div>
</section>
</template>
@@ -291,7 +341,11 @@ export default {
"altImg",
"image",
"button",
"button2",
"button3",
"link",
"link2",
"link3",
],
computed: {
img: function () {

25
src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
View File

@@ -20,23 +20,25 @@
:href="product.url"
class="m-auto rounded overflow-hidden transition duration-500"
>
<div class="take_apart text-center pb-8 my-5">
<div class="part text-center pb-8 my-5"
:class="{ active: index !== 1 }"
>
<g-image :src="img(product.image)" />
<h3 class="font-bold text-2xl">{{ product.title }}</h3>
<div v-html="product.content" class="pb-4 px-5 text-gray-600"></div>
<div v-html="product.content" class="pb-4 px-5 "></div>
<div v-if="product.button">
<a
v-if="product.url.includes('http')"
target="_blank"
:href="product.url"
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mb-5 shadow rounded-full"
class="bg-white text-sm learn-button hover:bg-gray-400 px-12 py-2 mb-5 shadows border-black border-2"
>{{ product.button }}</a
>
<a
v-else
:href="product.url"
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mb-5 shadow rounded-full"
class="bg-white text-sm learn-button hover:bg-gray-400 px-12 py-2 mb-5 shadows border-black border-2"
>{{ product.button }}</a
>
</div>
@@ -64,8 +66,21 @@ export default {
height: 400px;
}
.take_apart {
/* .take_apart {
background-color: #f5f5f5;
max-height: 570px;
} */
.part {
max-height: 570px;
background-color: #ea1ff7;
}
.active {
background-color: #70dfc9;
}
</style>

2
src/components/marketing/sections/cta-sections/logoShowcase.vue
View File

@@ -1,7 +1,7 @@
<template>
<section class="py-10 pb-8 px-4 text-center">
<div class="max-w-2xl mx-auto mb-16" v-if="main">
<h2 class="text-4xl leading-tight mb-6 font-bold font-heading">
<h2 class="text-5xl uppercase leading-tight mb-6 font-bold font-heading">
{{ main.title }}
</h2>
<p class="text-gray-400 leading-relaxed"></p>