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

Add last cta & brandpanel secs

Browse Source
This commit is contained in:
samaradel
2022-01-20 17:30:55 +02:00
parent 89a2450227
commit e009190ce7
7 changed files with 183 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
content/page/cloud/cloud.md
View File

@@ -15,15 +15,15 @@ header_link2: /compute
button: '' #Learn More
link: '' #link for button
blogs: [storage, compute, network]
cta: home_cta
#cta: cloud_cta
brandPanel: limitless_possibilities
brandPanel2: explore
features: [digithree, own_cloud, hpe, solidaridad]
workloadsMain: workloadMain
workloads: [workload1, workload2, workload3, workload4]
stats: stats
cta2: home_cta2
cta3: cloud_cta
cta2: cloud_cta2
cta3: cloud_cta3
logos: [logo1, logo7, logo8, logo4, logo2, logo3, logo5, logo6]
# signup: home_signup

2
content/page/cloud/cta/cta.md
View File

@@ -1,4 +1,4 @@
---
id: home_cta
id: cloud_cta
image: ./cloud_icons.png
---

2
content/page/cloud/cta2/index.md
View File

@@ -1,5 +1,5 @@
---
id: home_cta2
id: cloud_cta2
title: TAKE THREEFOLD CLOUD ON A
subtitle: TEST DRIVE
button: GET STARTED

2
content/page/cloud/cta3/cta.md
View File

@@ -1,5 +1,5 @@
---
id: cloud_cta
id: cloud_cta3
title: Introducing Zero-OS
image: ./zero_os.png
button: Learn More

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

@@ -5,6 +5,7 @@
pink: id == 'home' && !lastCta,
green: id == 'mission' && lastCta,
gray: id == 'developer',
'to-black': id == 'cloud' && textOnly,
}"
>
<!-- mission -->
@@ -1291,7 +1292,7 @@
<div
id="zero_os"
class="w-full max-w-3xl mx-auto lg:py-20"
v-else-if="id == 'grid' || id == 'cloud'"
v-else-if="id == 'grid' || (id == 'cloud' && !textOnly)"
>
<g-image :src="cta.image" class="mx-auto lg:w-1/3 my-10" />
<h2
@@ -1774,6 +1775,57 @@
>
</div>
<div
v-else-if="id == 'cloud' && textOnly"
class="w-full py-20 max-w-3xl mx-auto"
>
<h2 class="text-5xl text-white leading-tight font-semibold font-heading">
{{ cta.title }}
<span class="text-pink">{{ cta.subtitle }}</span>
</h2>
<div
v-html="cta.content"
class="text-2xl text-white leading-normal py-10"
></div>
<a
v-if="cta.link.includes('http')"
target="_blank"
:href="cta.link"
class="
green
bg-green-300
lg:text-2xl
text-lg
font-extrabold
px-12
hover:bg-green-200
rounded-lg
py-4
mb-4
shadow
"
>{{ cta.button }}</a
>
<a
v-else
:href="cta.link"
class="
green
bg-green-300
lg:text-2xl
text-lg
font-extrabold
px-12
hover:bg-green-200
rounded-lg
py-4
mb-4
shadow
"
>{{ cta.button }}</a
>
</div>
<div class="w-full max-w-7xl mx-auto" v-else>
<h2
v-if="cta.title"
@@ -1944,4 +1996,25 @@ export default {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.to-black {
background: #000;
background: -webkit-linear-gradient(to right, #000, #323232);
background: linear-gradient(to right, #000, #323232);
}
.to-black-bottom {
background: #000;
background: -webkit-linear-gradient(to bottom, #000, #323232);
background: linear-gradient(to bottom, #000, #323232);
}
.bg-gray {
background-color: #e6e6e6;
}
.green {
/* background-color: #70dfc9; */
font-family: "Orbitron", sans-serif !important;
}
.text-pink {
color: #ea1ff7;
}
</style>

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

@@ -1436,6 +1436,89 @@
</div>
</div>
<div v-else-if="id == 'cloud' && lastBrand">
<div class="max-w-screen-3xl mx-auto py-16">
<div
class="rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
>
<div
class="
flex
content-center
pb-12
px-6
sm:px-16
lg:pr-0
xl:py-10 xl:px-20
"
>
<div class="lg:self-center">
<h2 class="lg:text-5xl leading-none text-black">
{{ brand.title }}
</h2>
<div
class="mt-4 text-xl lg:text-2xl leading-normal text-black"
v-html="brand.content"
></div>
<div class="my-10">
<a
:href="brand.link"
v-if="brand.button"
class="
text-center
inline-block
green
bg-green-300
lg:text-2xl
text-lg
font-extrabold
px-12
hover:bg-green-200
rounded-lg
py-4
mb-4
lg:mr-4
shadow
"
>{{ brand.button }}</a
>
<a
:href="brand.link2"
v-if="brand.button2"
class="
text-center
inline-block
green
bg-green-300
lg:text-2xl
text-lg
font-extrabold
px-12
hover:bg-green-200
rounded-lg
py-4
mb-4
shadow
"
>{{ brand.button2 }}</a
>
</div>
</div>
</div>
<div class="relative lg:mt-14">
<g-image
class="inset-0 mx-auto object-cover"
:class="{
'w-3/4': id == 'cloud',
}"
:src="image"
:alt="brand.title"
/>
</div>
</div>
</div>
</div>
<div
v-else
class="

21
src/templates/MarkdownPage.vue
View File

@@ -122,7 +122,8 @@
$page.markdownPage.id !== 'tft' &&
$page.markdownPage.id !== 'farm' &&
$page.markdownPage.id !== 'community' &&
$page.markdownPage.id !== 'conversations'
$page.markdownPage.id !== 'conversations' &&
$page.markdownPage.id !== 'cloud'
"
:cta="$page.markdownPage.cta2"
:textOnly="true"
@@ -261,6 +262,20 @@
v-if="$page.markdownPage.stats"
:info="$page.markdownPage.stats"
/>
<CallToAction
v-if="$page.markdownPage.cta2"
:id="$page.markdownPage.id"
:cta="$page.markdownPage.cta2"
:textOnly="true"
/>
<BrandPanel
class="my-20"
:brand="$page.markdownPage.brandPanel2"
:id="$page.markdownPage.id"
v-if="$page.markdownPage.brandPanel2"
:lastBrand="true"
/>
</div>
<div class="container mx-auto">
<ConversationSec
@@ -766,6 +781,10 @@
sourceUrl2
content
image
button
link
button2
link2
}
brandPanel3{
id