update home

This commit is contained in:
2021-09-16 13:21:03 +02:00
parent cc193f17b3
commit 7add5f4172
14 changed files with 388 additions and 206 deletions

View File

@@ -1,14 +1,10 @@
--- ---
id: fix_internet id: fix_internet
title: Join the ThreeFold Community title: ZERO OS
subtitle: '' subtitle: ''
sourceUrl: https://t.me/threefold sourceUrl: https://t.me/threefold
btnTxt: Join the Community btnTxt: Get a Node
image: token_header.png # src/assets/brandPanel/.. image: zero_os.png # src/assets/brandPanel/..
--- ---
* Become a part of a collaborative community Zero-OS is an autonomous open-source operating system that supports the peer-to-peer cloud and the deployment of infinitely scalable digital workloads with unparalleled levels of security and privacy.
* Earn income for connecting sovereign capacity
* Regenerate our planet with every sale and purchase
* Reserve capacity without any intermediaries
* Receive grants for regenerative initiatives

View File

@@ -2,14 +2,20 @@
id: home id: home
metaTitle: ThreeFold | Home metaTitle: ThreeFold | Home
metaDesc: ThreeFold is the engine for a planet positive and data sovereign Internet. A collaborative movement of people who care about a better future. metaDesc: ThreeFold is the engine for a planet positive and data sovereign Internet. A collaborative movement of people who care about a better future.
metaImg: ./home_header.jpg metaImg: ./home_bg.jpg
header_slogan: BE header_slogan: from zero
header_title: THE INTERNET header_title: to one
header_image: ./home_header.jpg header_image: ./home_bg.jpg
header_altImg: threefold header_altImg: threefold
header_excerpt: ThreeFold is the engine for a planet positive and data sovereign Internet. A collaborative movement of people who care about a better future. header_excerpt: The digital infrastructure for an interconnected world.
button: '' button: Expand the network
link: '' link: /
button2: Expand the network2
link2: /
button3: Expand the network3
link3: /
cta2: home_cta2 cta2: home_cta2
productsMain: product productsMain: product
@@ -22,6 +28,7 @@ cta5: home_cta5
comparisonMain: comparison comparisonMain: comparison
comparisonSecs: [private, equal, sustainable] comparisonSecs: [private, equal, sustainable]
logos: [logo1, logo2, logo3, logo4, logo5, logo6] logos: [logo1, logo2, logo3, logo4, logo5, logo6]
logosMain : logo_home
inTheNews: in_the_news inTheNews: in_the_news
solution_image: ./cta_image.png solution_image: ./cta_image.png
cta: home_cta cta: home_cta

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

View File

@@ -0,0 +1,5 @@
---
id: logo_home
title: Our Partners
---

View File

@@ -1,5 +1,5 @@
--- ---
id: product id: product
title: TECHNOLOGY FOR HUMANITY TO THRIVE AND HEAL OUR PLANET title: THE THREEFOLD ECOSYSTEM
subtitle: The ThreeFold Movement is building a new peer-to-peer digital world starting with compute and storage developer solutions and communication tools to empower humans with ultra-secure, scalable, and affordable technologies. subtitle: 'The ThreeFold Grid recently launched its 3rd release, representing the greatest leap towards a peer-to-peer world. Innovative organizations and developers have already started building on this revolutionary infrastructure. Check out these examples:'
--- ---

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@@ -0,0 +1,120 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 391.5 287.1" style="enable-background:new 0 0 391.5 287.1;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{clip-path:url(#SVGID_3_);fill:url(#SVGID_4_);}
.st2{fill:url(#SVGID_5_);}
.st3{fill:url(#SVGID_6_);}
.st4{fill:url(#SVGID_7_);}
.st5{fill:url(#SVGID_8_);}
.st6{fill:url(#SVGID_9_);}
.st7{fill:#1D1D1B;}
</style>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="6077.7998" y1="-11708.6084" x2="6083.5737" y2="-11708.6084" gradientTransform="matrix(35.3735 0 0 35.3735 -214899.1875 414340.5938)">
<stop offset="0" style="stop-color:#DB00E9"/>
<stop offset="1" style="stop-color:#15FBFF"/>
</linearGradient>
<path class="st0" d="M273.2,187.5L273.2,187.5H94.4v-41.6H297v20.2C297,178,286.3,187.5,273.2,187.5L273.2,187.5L273.2,187.5
c13.1,0,23.7-9.6,23.7-21.4v-20.2H94.4v41.6H273.2L273.2,187.5z"/>
<g>
<g>
<defs>
<path id="SVGID_2_" d="M94.4,24.9v41.6H297V46.1c0-11.8-10.6-21.2-23.5-21.2L94.4,24.9L94.4,24.9z"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_2_" style="overflow:visible;"/>
</clipPath>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="6077.0327" y1="-11711.7119" x2="6082.8047" y2="-11711.7119" gradientTransform="matrix(35.089 0 0 35.089 -213142.6563 410998.0625)">
<stop offset="0" style="stop-color:#2E3192"/>
<stop offset="9.824239e-02" style="stop-color:#372F97"/>
<stop offset="0.2567" style="stop-color:#4F29A3"/>
<stop offset="0.4558" style="stop-color:#7520B7"/>
<stop offset="0.6875" style="stop-color:#AB14D3"/>
<stop offset="0.9439" style="stop-color:#EF04F7"/>
<stop offset="1" style="stop-color:#FF00FF"/>
</linearGradient>
<rect x="94.4" y="24.9" class="st1" width="202.5" height="41.6"/>
</g>
</g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="6038.4263" y1="-11723.8389" x2="6044.1987" y2="-11723.8389" gradientTransform="matrix(24.8071 0 0 24.8071 -149641.9375 290941.0625)">
<stop offset="0" style="stop-color:#2E3192"/>
<stop offset="9.824239e-02" style="stop-color:#372F97"/>
<stop offset="0.2567" style="stop-color:#4F29A3"/>
<stop offset="0.4558" style="stop-color:#7520B7"/>
<stop offset="0.6875" style="stop-color:#AB14D3"/>
<stop offset="0.9439" style="stop-color:#EF04F7"/>
<stop offset="1" style="stop-color:#FF00FF"/>
</linearGradient>
<rect x="153.7" y="85.4" class="st2" width="143.2" height="41.6"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="6077.0327" y1="-11708.8623" x2="6082.8047" y2="-11708.8623" gradientTransform="matrix(35.089 0 0 35.089 -213142.6563 411019.0313)">
<stop offset="0" style="stop-color:#2E3192"/>
<stop offset="9.824239e-02" style="stop-color:#372F97"/>
<stop offset="0.2567" style="stop-color:#4F29A3"/>
<stop offset="0.4558" style="stop-color:#7520B7"/>
<stop offset="0.6875" style="stop-color:#AB14D3"/>
<stop offset="0.9439" style="stop-color:#EF04F7"/>
<stop offset="1" style="stop-color:#FF00FF"/>
</linearGradient>
<rect x="94.4" y="145.8" class="st3" width="202.5" height="41.6"/>
<g>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="6077.7998" y1="-11711.4365" x2="6083.5737" y2="-11711.4365" gradientTransform="matrix(35.3735 0 0 35.3735 -214899.1875 414319.6563)">
<stop offset="0" style="stop-color:#DB00E9"/>
<stop offset="1" style="stop-color:#15FBFF"/>
</linearGradient>
<path class="st4" d="M297,66.5L297,66.5H94.4V24.9h179c13.1,0,23.5,9.4,23.5,21.2V66.5L297,66.5L297,66.5V46.1
c0-11.8-10.6-21.2-23.5-21.2h-179v41.6L297,66.5L297,66.5z"/>
</g>
<g>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="6077.7998" y1="-11711.4365" x2="6083.5737" y2="-11711.4365" gradientTransform="matrix(35.3735 0 0 35.3735 -214899.1875 414319.6563)">
<stop offset="0" style="stop-color:#DB00E9"/>
<stop offset="1" style="stop-color:#15FBFF"/>
</linearGradient>
<path class="st5" d="M273.4,24.9L273.4,24.9h-179v41.6H297V46.1C297,34.5,286.5,24.9,273.4,24.9L273.4,24.9L273.4,24.9
c13.1,0,23.5,9.4,23.5,21.2v20.4H94.4V24.9H273.4L273.4,24.9z"/>
</g>
<g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="6039.9355" y1="-11723.3252" x2="6045.7085" y2="-11723.3252" gradientTransform="matrix(25.0916 0 0 25.0916 -151398.6875 294262.9688)">
<stop offset="0" style="stop-color:#DB00E9"/>
<stop offset="1" style="stop-color:#15FBFF"/>
</linearGradient>
<polygon class="st6" points="297,127 297,127 153.7,127 153.7,85.4 297,85.4 297,127 297,127 297,127 297,85.4 153.7,85.4
153.7,127 "/>
</g>
<polygon class="st7" points="59.8,229.9 47.3,229.9 47.3,261.7 38.6,261.7 38.6,229.9 26.1,229.9 26.1,223.6 59.8,223.6 "/>
<polygon class="st7" points="101.5,223.6 101.5,261.7 92.8,261.7 92.8,245.3 74,245.3 74,261.7 65.1,261.7 65.1,223.6 74,223.6
74,239.8 92.8,239.8 92.8,223.6 "/>
<path class="st7" d="M144.5,261.9h-8c-1.5,0-2.5-0.5-3.1-1.5l-8.1-11.8c-0.3-0.5-0.7-0.8-1.2-1c-0.3-0.2-1-0.3-1.8-0.3h-3v14.6
h-8.8v-38.3h13.4c3,0,5.5,0.3,7.6,0.8c2.2,0.5,3.8,1.3,5.1,2.3c1.3,1,2.3,2.2,3,3.5c0.7,1.3,1,2.8,1,4.5c0,1.3-0.2,2.5-0.7,3.6
c-0.3,1.2-1,2.2-1.8,3.1c-0.8,1-1.7,1.8-2.8,2.5c-1.2,0.7-2.3,1.3-3.8,1.7c0.5,0.3,1.2,0.7,1.7,1c0.5,0.3,1,0.8,1.3,1.3
L144.5,261.9z M123.9,241.6c1.5,0,2.7-0.2,3.6-0.5c1-0.3,1.8-0.8,2.5-1.3s1.2-1.3,1.5-2c0.3-0.8,0.5-1.7,0.5-2.5
c0-1.8-0.7-3.1-2-4.1c-1.3-1-3.3-1.5-6.1-1.5h-4.6v12.1h4.6V241.6z"/>
<polygon class="st7" points="157.6,229.7 157.6,239.5 171.6,239.5 171.6,245.5 157.6,245.5 157.6,255.6 175.8,255.6 175.8,261.9
148.6,261.9 148.6,223.6 175.8,223.6 175.8,229.7 "/>
<polygon class="st7" points="191.2,229.7 191.2,239.5 205.5,239.5 205.5,245.5 191.2,245.5 191.2,255.6 209.4,255.6 209.4,261.9
182.4,261.9 182.4,223.6 209.4,223.6 209.4,229.7 "/>
<polygon class="st7" points="224.9,229.7 224.9,240.3 240.3,240.3 240.3,246.5 224.9,246.5 224.9,261.9 216.1,261.9 216.1,223.6
243.3,223.6 243.3,229.7 "/>
<path class="st7" d="M290,242.6c0,2.8-0.5,5.5-1.5,7.8c-1,2.3-2.5,4.5-4.5,6.1c-2,1.7-4.1,3.1-7,4.1c-2.7,1-5.6,1.5-8.9,1.5
c-3.3,0-6.3-0.5-8.9-1.5c-2.7-1-5-2.3-7-4.1c-2-1.8-3.5-3.8-4.5-6.1c-1-2.3-1.5-5-1.5-7.8c0-2.8,0.5-5.3,1.5-7.8
c1-2.3,2.5-4.5,4.5-6.1s4.1-3.1,7-4.1c2.7-1,5.6-1.5,8.9-1.5c3.3,0,6.3,0.5,8.9,1.5s5,2.3,7,4.1c2,1.8,3.3,3.8,4.5,6.1
C289.5,237.3,290,239.8,290,242.6 M281,242.6c0-2-0.3-3.8-0.8-5.5c-0.7-1.7-1.5-3-2.5-4.1c-1.2-1.2-2.5-2-4-2.5
c-1.5-0.7-3.3-0.8-5.3-0.8s-3.8,0.3-5.3,0.8c-1.7,0.7-3,1.5-4,2.5c-1.2,1.2-2,2.5-2.5,4.1c-0.7,1.7-0.8,3.3-0.8,5.5
c0,2,0.3,3.8,0.8,5.5c0.7,1.7,1.5,3,2.5,4c1.2,1.2,2.5,2,4,2.5c1.7,0.7,3.3,0.8,5.3,0.8s3.8-0.3,5.3-0.8c1.7-0.7,3-1.5,4-2.5
c1.2-1.2,2-2.5,2.5-4C280.7,246.5,281,244.6,281,242.6"/>
<polygon class="st7" points="321.8,255.4 321.8,261.9 296.5,261.9 296.5,223.6 305.2,223.6 305.2,255.4 "/>
<path class="st7" d="M365.4,242.6c0,2.8-0.5,5.3-1.5,7.8c-1,2.3-2.5,4.3-4.5,6c-2,1.7-4.1,3-7,4c-2.7,1-5.6,1.5-8.9,1.5h-16.4
v-38.3h16.4c3.3,0,6.3,0.5,8.9,1.5s5,2.3,7,4c2,1.7,3.3,3.6,4.5,6.1C364.9,237.3,365.4,239.8,365.4,242.6 M356.3,242.6
c0-2-0.3-3.8-0.8-5.5c-0.7-1.7-1.5-3-2.5-4.1c-1.2-1.2-2.5-2-4-2.5c-1.7-0.7-3.3-0.8-5.3-0.8h-7.5v25.9h7.5c2,0,3.8-0.3,5.3-0.8
c1.7-0.7,3-1.5,4-2.5c1.2-1.2,2-2.5,2.5-4.1C356,246.5,356.3,244.6,356.3,242.6"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.5 KiB

View File

@@ -22,7 +22,7 @@
<div class="inline-flex items-center flex-shrink-0"> <div class="inline-flex items-center flex-shrink-0">
<a href="/"> <a href="/">
<g-image <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" class="mr-3 fill-current logo"
alt="" alt=""
/> />
@@ -447,7 +447,7 @@ a.active--exact.active {
width: auto; width: auto;
} }
.logo { .logo {
max-width: 180px; max-width: 80px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.navbar { .navbar {

View File

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

View File

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

View File

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

View File

@@ -20,23 +20,25 @@
:href="product.url" :href="product.url"
class="m-auto rounded overflow-hidden transition duration-500" 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)" /> <g-image :src="img(product.image)" />
<h3 class="font-bold text-2xl">{{ product.title }}</h3> <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"> <div v-if="product.button">
<a <a
v-if="product.url.includes('http')" v-if="product.url.includes('http')"
target="_blank" target="_blank"
:href="product.url" :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 >{{ product.button }}</a
> >
<a <a
v-else v-else
:href="product.url" :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 >{{ product.button }}</a
> >
</div> </div>
@@ -64,8 +66,21 @@ export default {
height: 400px; height: 400px;
} }
.take_apart { /* .take_apart {
background-color: #f5f5f5; background-color: #f5f5f5;
max-height: 570px; max-height: 570px;
} */
.part {
max-height: 570px;
background-color: #ea1ff7;
}
.active {
background-color: #70dfc9;
} }
</style> </style>

View File

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

View File

@@ -1,6 +1,6 @@
<template> <template>
<Layout :hideHeader="true" :disableScroll="true"> <Layout :hideHeader="true" :disableScroll="true">
<div class="container mx-auto sm:pxi-0 overflow-x-hidden"> <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
<Header <Header
:id="$page.markdownPage.id" :id="$page.markdownPage.id"
:title="$page.markdownPage.header_title" :title="$page.markdownPage.header_title"
@@ -9,10 +9,26 @@
:altImg="$page.markdownPage.header_altImg" :altImg="$page.markdownPage.header_altImg"
:excerpt="$page.markdownPage.header_excerpt" :excerpt="$page.markdownPage.header_excerpt"
:button="$page.markdownPage.button" :button="$page.markdownPage.button"
:button2="$page.markdownPage.button2"
:button3="$page.markdownPage.button3"
:link="$page.markdownPage.link" :link="$page.markdownPage.link"
:link2="$page.markdownPage.link2"
:link3="$page.markdownPage.link3"
/> />
</div>
<VideoPanel :card="$page.markdownPage.videoPanel" /> <div class="container mx-auto sm:pxi-0 overflow-x-hidden">
<!-- <VideoPanel :card="$page.markdownPage.videoPanel" /> -->
<ShowcaseProducts
v-if="
$page.markdownPage.productData &&
$page.markdownPage.productData.length > 0
"
:id="$page.markdownPage.id"
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/>
<Map <Map
v-if="$page.markdownPage.stats" v-if="$page.markdownPage.stats"
@@ -37,7 +53,9 @@
<logoShowcase <logoShowcase
v-if="$page.markdownPage.logos.length > 0" v-if="$page.markdownPage.logos.length > 0"
:id="$page.markdownPage.id"
:logos="$page.markdownPage.logos" :logos="$page.markdownPage.logos"
:main="$page.markdownPage.logosMain"
/> />
<BrandPanel <BrandPanel
@@ -52,16 +70,7 @@
:id="$page.markdownPage.id" :id="$page.markdownPage.id"
/> --> /> -->
<ShowcaseProducts <!-- <g-image
v-if="
$page.markdownPage.productData &&
$page.markdownPage.productData.length > 0
"
:id="$page.markdownPage.id"
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/>
<!-- <g-image
class="mx-auto" class="mx-auto"
v-if="$page.markdownPage.solution_image2" v-if="$page.markdownPage.solution_image2"
:src="$page.markdownPage.solution_image2.src" :src="$page.markdownPage.solution_image2.src"
@@ -118,6 +127,11 @@
header_altImg header_altImg
button button
link link
button2
link2
button3
link3
solution_image solution_image
# solution_image2 # solution_image2
# solution_image3 # solution_image3
@@ -286,6 +300,10 @@
btnTxt2 btnTxt2
image image
} }
logosMain {
id
title
}
logos{ logos{
id id
image image