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
navLinks:
- name: Why
link: /why
- name: About Us
link: /about-us
external: 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,
}"
>
<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">
<a href="/">
<g-image

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

@@ -1,6 +1,7 @@
<template>
<section class="mb-10 px-4 bg-no-repeats bg-cover"
:style="{ 'background-image': 'url(' + image.src + ')' }"
<section
class="mb-10 bg-no-repeats bg-cover"
:class="{ 'bg-home': id == 'home' }"
>
<div
class="flex flex-wrap text-center items-center pb-20 lg:text-left -mx-2"
@@ -89,36 +90,25 @@
<div
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">
<h1
v-if="id == 'token'"
v-if="id == 'about-us'"
class="
text-center
uppercase
mb-6
mt-10
leading-none
text-4xl
font-light font-heading
text-6xl
font-extrabold font-heading
"
>
{{ title }} <br />
<span
class="
text-center
uppercase
mb-6
leading-none
text-4xl
font-black font-heading
"
>{{ slogan }}</span
>
{{ title }}
</h1>
<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"
></div>
<div v-if="button" class="block text-center">
@@ -126,16 +116,19 @@
v-if="link.includes('http')"
target="_blank"
class="
bg-blue-900
text-md
inline-block
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
"
:href="link"
>{{ button }}</a
@@ -143,16 +136,19 @@
<a
v-else
class="
bg-blue-900
text-md
inline-block
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
"
:href="link"
>{{ button }}</a
@@ -164,14 +160,35 @@
</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'"
>
<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">
{{ title }}
</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">
<a
v-if="link.includes('http')"
@@ -224,11 +241,14 @@
<div
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">
<span class="">{{ slogan }}</span><br>
<span class="">{{ slogan }}</span
><br />
{{ title }}
</h2>
<div class="mb-8 text-lg leading-relaxed" v-html="excerpt"></div>
@@ -250,7 +270,6 @@
border-2
shadow
border-black
"
:href="link"
>{{ button }}</a
@@ -271,14 +290,11 @@
border-2
shadow
border-black
"
:href="link"
>{{ button }}</a
>
<a
class="
inline-block
bg-white
@@ -293,14 +309,11 @@
border-2
shadow
border-black
"
:href="link2"
>{{ button2 }}</a
>
<a
class="
inline-block
bg-white
@@ -315,14 +328,108 @@
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 class="lg:w-3/5 px-2 self-center">
<g-image :src="img" :alt="altImg" />
@@ -357,3 +464,10 @@ export default {
};
</script>
<style scoped>
.bg-home {
background: #70dfc9;
background: -webkit-linear-gradient(to bottom, #ea1ff7, #70dfc9);
background: linear-gradient(to bottom, #ea1ff7, #70dfc9);
}
</style>

38
src/templates/MarkdownPage.vue
View File

@@ -1,17 +1,32 @@
<template>
<Layout :hideHeader="true" :disableScroll="true">
<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="
$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"
:image="$page.markdownPage.pageHeader.image"
:title="$page.markdownPage.pageHeader.title"
/>
/> -->
<!-- <div class="singlePic">
<g-image
class="w-100 mx-auto"
@@ -25,7 +40,7 @@
v-if="
$page.markdownPage.id !== 'careers' &&
$page.markdownPage.id !== 'community' &&
$page.markdownPage.id !== 'tft'
$page.markdownPage.id !== 'about-us'
"
>
<Header
@@ -81,7 +96,6 @@
>
<Header
v-if="
$page.markdownPage.header_title &&
$page.markdownPage.header_title != ''
"
@@ -143,7 +157,8 @@
:cultivationProcess="true"
/>
<g-image class ="lg:py-10"
<g-image
class="lg:py-10"
v-if="$page.markdownPage.solution_image"
:src="$page.markdownPage.solution_image"
/>
@@ -160,16 +175,12 @@
:cta="$page.markdownPage.cta4"
:id="$page.markdownPage.id"
/>
</div>
<div class="container sm:pxi-0 mx-auto py-5 overflow-visible">
<CallToAction
:id="$page.markdownPage.id"
v-if="
$page.markdownPage.cta && $page.markdownPage.id == 'why'
"
v-if="$page.markdownPage.cta && $page.markdownPage.id == 'why'"
:cta="$page.markdownPage.cta"
/>
@@ -190,9 +201,6 @@
:products="$page.markdownPage.productData"
/>
<Partenerships
v-if="
$page.markdownPage.partnerships &&