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

update farming page

Browse Source
This commit is contained in:
Ehab Hassan
2021-10-26 22:25:28 +02:00
parent f26643d6ee
commit 8d894e480f
26 changed files with 621 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -191,6 +191,144 @@
>
</div>
<!-- farm -->
<div
class="w-full mx-auto lg:mt-20 lg:py-20"
v-else-if="id == 'farm' && !lastCta"
>
<h2
v-if="cta.title"
class="
lg:text-6xl
text-center
uppercase
mb-2
leading-none
font-bold font-heading
"
>
{{ cta.title }}
</h2>
<div v-html="cta.content" class="mt-6 mb-8 lg:text-2xl"></div>
<g-image :src="cta.image" class="lg:my-20 mx-auto" />
<!-- <a
class="
inline-block
bg-white
text-lg
learn-button
hover:bg-gray-400
px-12
py-1
mr-5
my-4
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button && cta.link.includes('http')"
:href="cta.link"
>{{ cta.button }}</a
>
<a
class="
inline-block
bg-white
text-lg
learn-button
hover:bg-gray-400
px-12
py-1
mr-5
my-4
border-2
shadow
border-black
"
v-else
:href="cta.link"
>{{ cta.button }}</a
> -->
</div>
<div class="w-full mx-auto py-20" v-else-if="id == 'farm' && lastCta">
<h2
v-if="cta.title"
class="
lg:text-6xl
text-center
uppercase
mb-2
leading-none
font-normal font-heading
"
>
{{ cta.title }}
<span class="font-bold">{{ cta.subtitle }}</span>
</h2>
<!-- <h2
v-if="cta.subtitle"
class="
lg:text-5xl
text-center
uppercase
mb-2
leading-none
font-bold font-heading
"
>
{{ cta.subtitle }}
</h2> -->
<div
v-html="cta.content"
class="mt-6 mb-8 text-xl max-w-6xl mx-auto"
></div>
<g-image :src="cta.image" class="lg:my-20 mx-auto" />
<!-- <a
class="
inline-block
bg-white
text-lg
learn-button
hover:bg-gray-400
px-12
py-1
mr-5
my-4
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button && cta.link.includes('http')"
:href="cta.link"
>{{ cta.button }}</a
>
<a
class="
inline-block
bg-white
text-lg
learn-button
hover:bg-gray-400
px-12
py-1
mr-5
my-4
border-2
shadow
border-black
"
v-else
:href="cta.link"
>{{ cta.button }}</a
> -->
</div>
<!-- home -->
<div

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

@@ -1,5 +1,12 @@
<template>
<div :class="{ 'bg-about': id == 'mission' && brandPanel3 }">
<div
class="bg-cover"
:class="{
bg: id == 'mission' && brandPanel3,
gry: id == 'farm' && brandPanel3,
}"
>
<div class="mx-auto py-10">
<!-- oldtft -->
<div
@@ -9,8 +16,7 @@
rounded-lg
shadow-xl
overflow-hidden
lg:grid lg:grid-cols-2
lg:gap-4
lg:grid lg:grid-cols-2 lg:gap-4
"
>
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
@@ -36,12 +42,9 @@
pt-10
pb-10
px-6
sm:pt-16
sm:px-10
lg:py-16
lg:pr-0
xl:py-20
xl:px-15
sm:pt-16 sm:px-10
lg:py-16 lg:pr-0
xl:py-20 xl:px-15
"
>
<div class="lg:self-center">
@@ -91,8 +94,7 @@
rounded-lg
shadow-xl
overflow-hidden
lg:grid lg:grid-cols-2
lg:gap-4
lg:grid lg:grid-cols-2 lg:gap-4
"
>
<div
@@ -100,12 +102,9 @@
pt-10
pb-12
px-6
sm:pt-16
sm:px-16
lg:py-16
lg:pr-0
xl:py-20
xl:px-15
sm:pt-16 sm:px-16
lg:py-16 lg:pr-0
xl:py-20 xl:px-15
"
>
<div class="lg:self-center text-center">
@@ -399,7 +398,154 @@
</div>
</div>
<!-- About us -->
<!-- farm -->
<div
v-else-if="id == 'farm' && !brandPanel2 && !brandPanel3"
class="flex flex-wrap lg:text-left lg:my-10"
>
<div
class="
lg:w-1/2 lg:mt-10
order-1
lg:order-none lg:text-left
text-center
lg:px-56
self-center
"
>
<div class="lg:self-center">
<h2 class="text-9xl mb-8 uppercase leading-none font-heading">
<span class="block">{{ brand.title }}</span>
<span class="block" v-if="brand.subtitle">{{
brand.subtitle
}}</span>
</h2>
<div
class="py-6 mt-4 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
v-if="brand.btnTxt"
target="_blank"
:href="brand.sourceUrl"
class="
inline-block
bg-white
text-lg
learn-button
hover:bg-gray-400
px-12
py-1
mr-5
my-4
border-2
shadow
border-black
"
>{{ brand.btnTxt }}</a
>
</div>
</div>
<div class="lg:w-1/2 px-2 self-center text-right">
<g-image class="lg:ml-60 mx-auto" :src="image" :alt="brand.title" />
</div>
</div>
<div
v-else-if="id == 'farm' && brandPanel2"
class="
flex flex-wrap
lg:text-left
text-center
lg:pt-16
px-4
lg:mb-20 lg:px-20
"
>
<div class="lg:w-1/2 px-2 self-center">
<g-image class="mx-auto" :src="image" :alt="brand.title" />
</div>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none self-center">
<div class="lg:self-center">
<h2 class="lg:text-6xl mb-8 uppercase leading-none font-light">
<span class="block font-normal">{{ brand.title }}</span>
<span class="block font-bold" v-if="brand.subtitle">{{
brand.subtitle
}}</span>
</h2>
<div
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide lg:max-w-2xl"
v-html="brand.content"
></div>
<a
v-if="brand.btnTxt"
target="_blank"
:href="brand.sourceUrl"
class="
inline-block
bg-white
text-lg
learn-button
hover:bg-gray-400
px-12
py-1
mr-5
my-4
border-2
shadow
border-black
"
>{{ brand.btnTxt }}</a
>
</div>
</div>
</div>
<div
v-else-if="id == 'farm' && brandPanel3"
class="flex flex-wrap lg:text-left text-center lg:p-20 px-4"
>
<div class="lg:w-1/2 px-2 self-center">
<g-image class="lg:w-3/4 mx-auto" :src="image" :alt="brand.title" />
</div>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
<div class="lg:self-center">
<h2 class="lg:text-6xl mb-8 uppercase leading-none font-light">
<span class="block font-normal">{{ brand.title }}</span>
<span class="block font-bold" v-if="brand.subtitle">{{
brand.subtitle
}}</span>
</h2>
<div
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide lg:max-w-2xl"
v-html="brand.content"
></div>
<a
v-if="brand.btnTxt"
target="_blank"
:href="brand.sourceUrl"
class="
inline-block
bg-white
text-lg
learn-button
hover:bg-gray-400
px-12
py-1
mr-5
my-4
border-2
shadow
border-black
"
>{{ brand.btnTxt }}</a
>
</div>
</div>
</div>
<!-- mission -->
<div
v-else-if="id == 'mission' && !brandPanel2 && !brandPanel3"
class="flex flex-wrap text-left lg:my-10 lg:px-20"
@@ -407,7 +553,15 @@
<div class="lg:w-1/2 px-2 self-center">
<g-image class="lg:w-2/3 mx-auto" :src="image" :alt="brand.title" />
</div>
<div class="lg:w-1/2 lg:mt-10 order-1 lg:order-none lg:text-left text-center px-4">
<div
class="
lg:w-1/2 lg:mt-10
order-1
lg:order-none lg:text-left
text-center
px-4
"
>
<div class="lg:self-center">
<h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
<span class="block">{{ brand.title }}</span>
@@ -443,7 +597,14 @@
<div
v-else-if="id == 'mission' && brandPanel2"
class="flex flex-wrap lg:text-left text-center lg:pt-16 px-4 lg:mb-20 lg:px-20"
class="
flex flex-wrap
lg:text-left
text-center
lg:pt-16
px-4
lg:mb-20 lg:px-20
"
>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
<div class="lg:self-center">
@@ -537,8 +698,7 @@
>
<div
class="
lg:w-1/2
lg:mt-10
lg:w-1/2 lg:mt-10
order-1
lg:order-none
text-left
@@ -806,12 +966,9 @@
>
<div
class="
lg:w-1/2
lg:mt-5
lg:w-1/2 lg:mt-5
order-1
lg:order-none
lg:text-left
lg:self-center
lg:order-none lg:text-left lg:self-center
text-center
"
>
@@ -925,8 +1082,7 @@
rounded-lg
shadow-xl
overflow-hidden
lg:grid lg:grid-cols-2
lg:gap-4
lg:grid lg:grid-cols-2 lg:gap-4
"
>
<div
@@ -934,12 +1090,9 @@
pt-10
pb-12
px-6
sm:pt-16
sm:px-16
lg:py-16
lg:pr-0
xl:py-20
xl:px-15
sm:pt-16 sm:px-16
lg:py-16 lg:pr-0
xl:py-20 xl:px-15
"
>
<div class="lg:self-center">
@@ -997,9 +1150,13 @@ export default {
</script>
<style scoped>
.bg-about {
.bg {
background: #70dfc9;
background: -webkit-linear-gradient(to right, #70dfc9, #ea1ff7);
background: linear-gradient(to right, #70dfc9, #ea1ff7);
}
.gry{
background: #f2f2f2;
}
</style>

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

@@ -78,7 +78,6 @@
:href="link"
>{{ button }}</a
>
</div>
</div>
</div>
@@ -88,16 +87,13 @@
flex flex-wrap
text-center
items-center
lg:text-left
lg:mb-10
lg:mt-4
lg:text-left lg:mb-10 lg:mt-4
-mx-2
"
v-if="id == 'mission'"
>
<div class="lg:w-1/2 px-2 lg:pr-10 lg:mt-10 order-1 lg:order-none">
<h1
class="
text-center
uppercase
@@ -166,7 +162,95 @@
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
</div>
</div>
<div class="lg:w-1/2 px-2">
<g-image class="mx-auto" :src="img" :alt="altImg" />
</div>
</div>
<!-- Farm -->
<div
class="
flex flex-wrap
text-center
items-center
lg:text-left lg:mb-20 lg:mt-24 lg:mx-40
"
v-if="id == 'farm'"
>
<div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
<div class="lg:w-1/2 px-10 lg:mt-10 order-1 lg:order-none lg:max-w-2xl lg:mx-10">
<h1
class="
lg:text-left lg:text-6xl
font-normal
uppercase
mb-6
mt-20
leading-none
font-heading
"
>
{{ title }}
<br />
<span class="block leading-none font-bold">{{ title2 }}</span>
</h1>
<div
class="
mb-8
text-center text-2xl text-extrabold
lg:text-left
leading-tight
mx-auto
"
v-html="excerpt"
></div>
<div v-if="button" class="block lg:text-left text-center">
<a
v-if="link.includes('http')"
target="_blank"
class="
inline-block
bg-white
text-lg
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-lg
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="text-gray-600 hover:underline" href="#">Learn more</a> -->
</div>
</div>
</div>
<!-- <div
@@ -314,7 +398,11 @@
>{{ button }}</a
>
</div>
<g-image class="order-2 lg:order-none mx-auto w-full" :src="img" :alt="altImg" />
<g-image
class="order-2 lg:order-none mx-auto w-full"
:src="img"
:alt="altImg"
/>
</div>
<div
@@ -382,7 +470,11 @@
>{{ button }}</a
>
</div>
<g-image class="order-2 lg:order-none mx-auto w-full" :src="img" :alt="altImg" />
<g-image
class="order-2 lg:order-none mx-auto w-full"
:src="img"
:alt="altImg"
/>
</div>
<div
@@ -446,7 +538,6 @@
:href="link"
>{{ button }}</a
>
</div>
</div>
<div class="lg:w-1/2 px-2 self-center">

19
src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
View File

@@ -1,11 +1,12 @@
<template>
<div class="py-0 mb-5 mx-4">
<div class="text-center mx-auto my-4" v-if="id == 'why'">
<h1 class="text-5xl text-gray-900 font-light sm:text-9xl sm:leading-10">
{{ main.title }} <span class="font-extrabold">{{ main.subtitle }}</span>
<div class="my-5 lg:mx-40">
<div class="text-center mx-auto my-20" v-if="id == 'farm'">
<h1 class="text-9xl uppercase leading-none font-heading">
{{ main.title }}
</h1>
<span class="text-3xl font-normal">{{ main.subtitle }}</span>
<div
class="mt-3 max-w-2xl mx-auto text-gray-600 sm:mt-4"
class="max-w-3xl mb-10 py-2 text-xl mx-auto leading-tight tracking-wide"
v-html="main.content"
></div>
</div>
@@ -143,8 +144,8 @@
<!-- why -->
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"
v-else-if="id == 'why'"
class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center max-w-7xl mx-auto"
v-else-if="id == 'farm'"
>
<div
v-for="(product, idx) in products"
@@ -158,7 +159,7 @@
<div class="product font-bold text-2xl pt-5">
{{ product.title }}
</div>
<div v-html="product.content" class="product p-5 text-gray-600"></div>
<div v-html="product.content" class="product py-10 font-light text-xl px-2"></div>
<div v-if="product.button" class="product mb-3 py-5 text-center">
<a
v-if="product.link.includes('http')"
@@ -348,6 +349,6 @@ export default {
height: 400px;
}
.product {
background-color: #ebfefd;
background-color: #f2f2f2;
}
</style>