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

Add farming process

Browse Source
This commit is contained in:
samaradel
2021-08-16 12:45:10 +02:00
parent f87e507ad8
commit c0cb440ac6
11 changed files with 198 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/marketing/sections/team-sections/with_large_images.vue
View File

@@ -1,26 +1,9 @@
<template>
<div class="bg-white">
<div
v-if="id == 'tft'"
v-if="id == 'tft' && !farmingProcess"
class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24"
>
<!-- <div
class="
space-y-5
text-center
sm:space-y-4
md:max-w-xl
lg:max-w-3xl
xl:max-w-none
"
>
<h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
{{ main.title }}
</h2>
<p class="text-gray-600">
{{ main.description }}
</p>
</div> -->
<div
class="
sm:grid sm:grid-cols-3
@@ -46,6 +29,142 @@
<g-image class="mt-0" :src="main.image" />
</div>
<div
v-else-if="id == 'tft' && farmingProcess"
class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24"
>
<div class="space-y-12">
<div
class="
space-y-5
text-center
sm:space-y-4
md:max-w-xl
lg:max-w-3xl
xl:max-w-none
"
>
<h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
{{ main.title }}
</h2>
<h1 class="text-6xl mb-2 leading-tight font-extrabold font-heading">
{{ main.subtitle }}
</h1>
</div>
<div
class="
space-y-12
sm:grid sm:grid-cols-3
sm:gap-x-6 sm:gap-y-12
sm:space-y-0
lg:grid-cols-3
lg:gap-x-8
"
>
<div
v-for="(section, index) in sections"
:key="index"
class="space-y-4 p-5"
:class="{ arrowsHolder: index % 2 !== 0 }"
>
<div class="relative pb-2/3">
<g-image
class="object-cover mb-8 h-full w-full"
:src="img(section.image)"
:alt="section.title"
/>
</div>
<div class="space-y-2">
<div class="text-center leading-6 space-y-1">
<h4 class="text-xl font-normal uppercase">
{{ section.title }}
</h4>
<div v-html="section.content"></div>
</div>
</div>
</div>
</div>
<div class="text-center">
<div class="inline-flex" v-if="main.button">
<a
v-if="urlChecker(main.link)"
target="_blank"
:href="main.link"
class="
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
shadow
rounded-full
"
>{{ main.button }}</a
>
<a
v-else
:href="main.link"
class="
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
shadow
rounded-full
"
>{{ main.button }}</a
>
</div>
<div class="inline-flex" v-if="main.button2">
<a
v-if="urlChecker(main.link2)"
target="_blank"
:href="main.link2"
class="
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
shadow
rounded-full
"
>{{ main.button2 }}</a
>
<a
v-else
:href="main.link2"
class="
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
shadow
rounded-full
"
>{{ main.button2 }}</a
>
</div>
</div>
</div>
</div>
<div
v-else
class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24"
@@ -186,7 +305,7 @@
<script>
export default {
props: ["id", "main", "sections"],
props: ["id", "farmingProcess", "main", "sections"],
methods: {
img(image) {
if (!image) return "";