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

Init why page header

Browse Source
This commit is contained in:
samaradel
2021-04-04 15:46:23 +02:00
parent fbc26b0b72
commit f7477ca393
9 changed files with 135 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<div class="fixed inset-0 h-16 bg-white">
<header
class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
class="inline-flex items-center justify-between flex-wrap container-fluid mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
:class="{
'opacity-100': !disableScroll && scrollPosition > headerHeight,
'opacity-0': !disableScroll && scrollPosition < headerHeight,
@@ -336,6 +336,13 @@ export default {
};
</script>
<style scoped>
.container-fluid {
width: 100%;
padding-right: 160px;
padding-left: 160px;
margin-right: auto;
margin-left: auto;
}
input:focus,
button:focus {
outline: 0;
@@ -361,5 +368,10 @@ a.active--exact.active {
.navbar {
width: 100%;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
}
}
</style>
</style>

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

@@ -1,10 +1,51 @@
<template>
<section class="py-20 mb-10 px-4 lg:mx-40">
<div class="flex flex-wrap text-center lg:text-left -mx-2">
<section class="py-15 mb-10 px-4 lg:mx-40">
<div
class="flex flex-wrap text-center lg:text-left -mx-2"
v-if="id == 'why'"
>
<div class="lg:w-3/5 px-2"><g-image :src="img" :alt="altImg" /></div>
<div class="lg:w-2/5 px-2 py-20 lg:pr-20 lg:mt-10 order-1 lg:order-none">
<h1
class="flex text-center uppercase mb-6 mt-20 leading-none text-5xl font-light font-heading"
>
{{ title }}
</h1>
<span
class="flex text-center uppercase mb-6 leading-none text-5xl font-black font-heading"
>
{{ slogan }}
</span>
<div
class="mb-8 text-center text-2xl text-gray-800"
v-html="excerpt"
></div>
<div v-if="button">
<a
v-if="link.includes('http')"
target="_blank"
class="nline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
:href="link"
>{{ button }}</a
>
<a
v-else
class="nline-block bg-blue-900 text-md learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
:href="link"
>{{ button }}</a
>
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
</div>
</div>
</div>
<div class="flex flex-wrap text-center lg:text-left -mx-2" v-else>
<div class="lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
<h2 class="text-8xl mb-6 mt-20 leading-none font-extrabold font-heading">
<span class="text-blue-600">{{ slogan }}</span
> {{ title }}
<h2
class="text-8xl mb-6 mt-20 leading-none font-extrabold font-heading"
>
<span class="text-blue-600">{{ slogan }}</span> {{ title }}
</h2>
<div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
<div v-if="button">
@@ -31,7 +72,16 @@
<script>
export default {
props: ["title", "slogan", "excerpt", "altImg", "image", "button", "link"],
props: [
"title",
"id",
"slogan",
"excerpt",
"altImg",
"image",
"button",
"link",
],
computed: {
img: function () {
if (!this.image) return "";

25
src/pages/Index.vue
View File

@@ -1,24 +1,23 @@
<template>
<Layout :hideHeader="true" :disableScroll="true">
<div class="container-fluid mx-20 sm:pxi-0 overflow-x-hidden">
<Header
: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"
/>
</div>
<div class="container-fluid mx-20 sm:pxi-0 overflow-x-hidden">
<Header
: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"
/>
</div>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
<!-- <SolutionsHeader
v-if="$page.markdownPage.header"
:header="$page.markdownPage.header"
/> -->
<g-image
class="m-auto w-2/4"
v-if="$page.markdownPage.solution_image2"

28
src/templates/MarkdownPage.vue
View File

@@ -1,18 +1,21 @@
<template>
<Layout :hideHeader="true" :disableScroll="true">
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden py-5">
<Header
v-if="
$page.markdownPage.id !== 'contact' &&
$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"
/>
</div>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
<SignUp
v-if="$page.markdownPage.signup"
:signup="$page.markdownPage.signup"
@@ -27,23 +30,24 @@
:sections="$page.markdownPage.comparisonSecs"
/>
<CallToAction
v-if="$page.markdownPage.cta"
:cta="$page.markdownPage.cta"
/>
<g-image
<g-image
class="w-3/4 mx-auto mt-10"
v-if="$page.markdownPage.solution_image"
:src="$page.markdownPage.solution_image.src"
/>
<ShowcaseProducts
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
<CallToAction
v-if="$page.markdownPage.cta"
:cta="$page.markdownPage.cta"
/>
<ShowcaseProducts
v-if="
$page.markdownPage.productData &&
$page.markdownPage.productData.length > 0
"
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/>
</div>
</Layout>
@@ -59,6 +63,7 @@
header_altImg
header_title
header_image
header_slogan
solution_image
productsMain{
id
@@ -93,6 +98,7 @@
cta{
id
title
slogan
content
button
link