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

About-us header

Browse Source
This commit is contained in:
samaradel
2021-09-19 08:32:47 +02:00
parent 80711ed92e
commit 0e88f72bc7
6 changed files with 290 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
content/navigation/navigation.md
View File

@@ -1,8 +1,8 @@
--- ---
id: navigation id: navigation
navLinks: navLinks:
- name: Why - name: About Us
link: /why link: /about-us
external: false external: false
expandable: false expandable: false

14
content/page/about-us/about-us.md Normal file
View File

@@ -0,0 +1,14 @@
---
id: about-us
metaTitle: ThreeFold | About Us
metaDesc: To build the world’s most decentralized, secure and scalable digital infrastructure – for the people, by the people
metaImg: ./about_header.png
header_slogan:
header_title: OUR MISSION
header_image: ./about_header.png
header_altImg: threefold
header_excerpt: To build the world’s most decentralized, secure and scalable digital infrastructure – for the people, by the people
solution_image:
button: The Digital Future
link: "#"
---

BIN
content/page/about-us/about_header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

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

@@ -17,7 +17,7 @@
'opacity-0': !disableScroll && scrollPosition < headerHeight, 'opacity-0': !disableScroll && scrollPosition < headerHeight,
}" }"
> >
<div class="flex items-center justify-between px-4 py-3 sm:p-0"> <div class="flex items-center justify-between px-4 py-2 lg:py-3 sm:p-0">
<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

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

@@ -1,6 +1,7 @@
<template> <template>
<section class="mb-10 px-4 bg-no-repeats bg-cover" <section
:style="{ 'background-image': 'url(' + image.src + ')' }" class="mb-10 bg-no-repeats bg-cover"
:class="{ 'bg-home': id == 'home' }"
> >
<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"
@@ -89,36 +90,25 @@
<div <div
class="flex flex-wrap text-center items-center lg:text-left lg:mt-4 -mx-2" class="flex flex-wrap text-center items-center lg:text-left lg:mt-4 -mx-2"
v-else-if="id == 'token'" v-else-if="id == 'about-us'"
> >
<div class="lg:w-1/2 px-2 lg:pr-10 lg:mt-10 order-1 lg:order-none"> <div class="lg:w-1/2 px-2 lg:pr-10 lg:mt-10 order-1 lg:order-none">
<h1 <h1
v-if="id == 'token'" v-if="id == 'about-us'"
class=" class="
text-center text-center
uppercase uppercase
mb-6 mb-6
mt-10 mt-10
leading-none leading-none
text-4xl text-6xl
font-light font-heading font-extrabold font-heading
" "
> >
{{ title }} <br /> {{ title }}
<span
class="
text-center
uppercase
mb-6
leading-none
text-4xl
font-black font-heading
"
>{{ slogan }}</span
>
</h1> </h1>
<div <div
class="mb-8 text-center text-gray-600 leading-relaxed" class="mb-8 px-10 text-center lg:text-5xl text-extrabold leading-tight"
v-html="excerpt" v-html="excerpt"
></div> ></div>
<div v-if="button" class="block text-center"> <div v-if="button" class="block text-center">
@@ -126,16 +116,19 @@
v-if="link.includes('http')" v-if="link.includes('http')"
target="_blank" target="_blank"
class=" class="
bg-blue-900 inline-block
text-md bg-white
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
mb-4 mb-4
border-2
shadow shadow
rounded-full border-black
" "
:href="link" :href="link"
>{{ button }}</a >{{ button }}</a
@@ -143,16 +136,19 @@
<a <a
v-else v-else
class=" class="
bg-blue-900 inline-block
text-md bg-white
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
mb-4 mb-4
border-2
shadow shadow
rounded-full border-black
" "
:href="link" :href="link"
>{{ button }}</a >{{ button }}</a
@@ -164,14 +160,35 @@
</div> </div>
<div <div
class="flex flex-wrap text-center tft_section lg:text-left lg:mt-10 lg:py-10 -mx-2" class="
flex flex-wrap
text-center
tft_section
lg:text-left
lg:mt-10
lg:py-10
-mx-2
"
v-else-if="id == 'tft'" v-else-if="id == 'tft'"
> >
<div class="lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none text-center"> <div
class="
lg:w-1/2
px-2
lg:pr-20
lg:mt-10
order-1
lg:order-none
text-center
"
>
<h1 class="text-8xl mb-6 mt-20 leading-none font-heading"> <h1 class="text-8xl mb-6 mt-20 leading-none font-heading">
{{ title }} {{ title }}
</h1> </h1>
<div class="mb-8 text-gray-800 text-3xl tft_subtitle" v-html="excerpt"></div> <div
class="mb-8 text-gray-800 text-3xl tft_subtitle"
v-html="excerpt"
></div>
<div v-if="button"> <div v-if="button">
<a <a
v-if="link.includes('http')" v-if="link.includes('http')"
@@ -224,105 +241,195 @@
<div <div
class="flex flex-wrap text-center lg:text-left lg:pt-10 -mx-2" class="flex flex-wrap text-center lg:text-left lg:pt-10 -mx-2"
v-else v-else-if="id == 'home'"
> >
<div class="px-2 lg:py-40 lg:mt-10 order-1 lg:order-none mx-auto text-center"> <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"> <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
<span class="">{{ slogan }}</span><br> <span class="">{{ slogan }}</span
><br />
{{ title }} {{ title }}
</h2> </h2>
<div class="mb-8 text-lg leading-relaxed" v-html="excerpt"></div> <div class="mb-8 text-lg leading-relaxed" v-html="excerpt"></div>
<a
v-if="link.includes('http')"
target="_blank"
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="link"
>{{ button }}</a
>
<a
v-else
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="link"
>{{ button }}</a
> <a
<a v-if="link.includes('http')"
target="_blank"
class=" class="
inline-block inline-block
bg-white bg-white
text-sm text-sm
learn-button learn-button
hover:bg-gray-400 hover:bg-gray-400
bo bo
px-12 px-12
py-1 py-1
mr-5 mr-5
mb-4 mb-4
border-2 border-2
shadow shadow
border-black border-black
"
" :href="link"
:href="link2" >{{ button }}</a
>{{ button2 }}</a >
<a
> v-else
<a class="
inline-block
class=" bg-white
inline-block text-sm
bg-white learn-button
text-sm hover:bg-gray-400
learn-button bo
hover:bg-gray-400 px-12
bo py-1
px-12 mr-5
py-1 mb-4
mr-5 border-2
mb-4 shadow
border-2 border-black
shadow "
border-black :href="link"
>{{ button }}</a
" >
:href="link3" <a
>{{ button3 }}</a class="
inline-block
> bg-white
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> --> 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 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:pt-10 -mx-2" v-else>
<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-lg leading-relaxed" v-html="excerpt"></div>
<a
v-if="link.includes('http')"
target="_blank"
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="link"
>{{ button }}</a
>
<a
v-else
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="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" /> <g-image :src="img" :alt="altImg" />
@@ -357,3 +464,10 @@ export default {
}; };
</script> </script>
<style scoped>
.bg-home {
background: #70dfc9;
background: -webkit-linear-gradient(to bottom, #ea1ff7, #70dfc9);
background: linear-gradient(to bottom, #ea1ff7, #70dfc9);
}
</style>

56
src/templates/MarkdownPage.vue
View File

@@ -1,17 +1,32 @@
<template> <template>
<Layout :hideHeader="true" :disableScroll="true"> <Layout :hideHeader="true" :disableScroll="true">
<div <div
class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden py-5" class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden"
v-if=" v-if="
$page.markdownPage.id == 'careers' || $page.markdownPage.id == 'careers' ||
$page.markdownPage.id == 'community' $page.markdownPage.id == 'community' ||
$page.markdownPage.id == 'about-us'
" "
> >
<CustomCTA <Header
v-if="
$page.markdownPage.header_title &&
$page.markdownPage.header_title != ''
"
:id="$page.markdownPage.id"
:title="$page.markdownPage.header_title"
:slogan="$page.markdownPage.header_slogan"
:image="$page.markdownPage.header_image"
:altImg="$page.markdownPage.header_altImg"
:excerpt="$page.markdownPage.header_excerpt"
:button="$page.markdownPage.button"
:link="$page.markdownPage.link"
/>
<!-- <CustomCTA
:header="true" :header="true"
:image="$page.markdownPage.pageHeader.image" :image="$page.markdownPage.pageHeader.image"
:title="$page.markdownPage.pageHeader.title" :title="$page.markdownPage.pageHeader.title"
/> /> -->
<!-- <div class="singlePic"> <!-- <div class="singlePic">
<g-image <g-image
class="w-100 mx-auto" class="w-100 mx-auto"
@@ -25,7 +40,7 @@
v-if=" v-if="
$page.markdownPage.id !== 'careers' && $page.markdownPage.id !== 'careers' &&
$page.markdownPage.id !== 'community' && $page.markdownPage.id !== 'community' &&
$page.markdownPage.id !== 'tft' $page.markdownPage.id !== 'about-us'
" "
> >
<Header <Header
@@ -75,13 +90,12 @@
/> --> /> -->
<!-- tft page --> <!-- tft page -->
<div <div
class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5" class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5"
v-if="$page.markdownPage.id == 'tft'" v-if="$page.markdownPage.id == 'tft'"
> >
<Header <Header
v-if=" v-if="
$page.markdownPage.header_title && $page.markdownPage.header_title &&
$page.markdownPage.header_title != '' $page.markdownPage.header_title != ''
" "
@@ -113,7 +127,7 @@
:card="$page.markdownPage.card" :card="$page.markdownPage.card"
/> />
<Slider <Slider
v-if="$page.markdownPage.carousel" v-if="$page.markdownPage.carousel"
:slides="$page.markdownPage.carousel" :slides="$page.markdownPage.carousel"
:main="$page.markdownPage.sliderMain" :main="$page.markdownPage.sliderMain"
@@ -143,33 +157,30 @@
:cultivationProcess="true" :cultivationProcess="true"
/> />
<g-image class ="lg:py-10" <g-image
class="lg:py-10"
v-if="$page.markdownPage.solution_image" v-if="$page.markdownPage.solution_image"
:src="$page.markdownPage.solution_image" :src="$page.markdownPage.solution_image"
/> />
<BrandPanel <BrandPanel
:id="$page.markdownPage.id" :id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel2" :brand="$page.markdownPage.brandPanel2"
v-if="$page.markdownPage.brandPanel2" v-if="$page.markdownPage.brandPanel2"
:diveInto="true" :diveInto="true"
/> />
<CallToActionbg1 <CallToActionbg1
v-if="$page.markdownPage.cta4" v-if="$page.markdownPage.cta4"
:cta="$page.markdownPage.cta4" :cta="$page.markdownPage.cta4"
:id="$page.markdownPage.id" :id="$page.markdownPage.id"
/> />
</div>
</div>
<div class="container sm:pxi-0 mx-auto py-5 overflow-visible"> <div class="container sm:pxi-0 mx-auto py-5 overflow-visible">
<CallToAction <CallToAction
:id="$page.markdownPage.id" :id="$page.markdownPage.id"
v-if=" v-if="$page.markdownPage.cta && $page.markdownPage.id == 'why'"
$page.markdownPage.cta && $page.markdownPage.id == 'why'
"
:cta="$page.markdownPage.cta" :cta="$page.markdownPage.cta"
/> />
@@ -190,9 +201,6 @@
:products="$page.markdownPage.productData" :products="$page.markdownPage.productData"
/> />
<Partenerships <Partenerships
v-if=" v-if="
$page.markdownPage.partnerships && $page.markdownPage.partnerships &&