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

add 3Node section

Browse Source
This commit is contained in:
Ehab Hassan
2021-05-23 13:34:56 +02:00
parent 26b7996549
commit 7bebd891dd
12 changed files with 168 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/custom/sections/Features.vue
View File

@@ -1,8 +1,52 @@
<template>
<section class="py-12 px-4">
<h2 class="text-4xl text-center mb-12 font-semibold font-heading">
<section class="py-12 px-4 text-center" v-if="id == 'home'">
<h2 class="text-4xl font-normal leading-tight font-heading">
{{ main.title }}
</h2>
<p v-if="main.subtitle" class="mb-6 text-2xl text-gray-800">
{{ main.subtitle }}
</p>
<div class="flex flex-wrap items-center -mx-4 mb-6">
<div
v-for="(feature, index) in features"
:key="index"
class="lg:w-1/3 mt-5 lg:mt-0 feature px-4 text-center"
>
<div v-if="index == 1">
<div class="w-1/2 lg:w-full lg:h-full mx-auto px-2 order-1">
<g-image :src="feature.svg" :alt="feature.title" />
</div>
</div>
<div v-else>
<span v-if="index !== 4" class="img-border"></span>
<h2 class="text-x2 mt-5 mb-3 font-normal font-heading leading-9">
{{ feature.title }}
</h2>
<div
v-html="feature.content"
class="text-lg text-gray-700 leading-relaxed"
></div>
</div>
</div>
</div>
<div class="border-wrap mx-auto mt-20" v-if="main.btn">
<g-link
class="inline-block py-2 module px-2 leading-none text-white hover:bg-gray-700 rounded shadow"
:to="main.link"
>{{ main.btn }}</g-link
>
<!-- <div v-html="main.content" class="text-sm text-gray-400 mt-5"></div> -->
</div>
</section>
<section class="py-12 px-4" v-else>
<h2 class="text-4xl text-center mb-12 font-normal font-heading">
{{ main.title }}
</h2>
<p v-if="main.subtitle" class="mb-6 text-2xl text-center font-ligh text-gray-800">
{{ main.subtitle }}
</p>
<div class="flex flex-wrap -mx-4 mb-6">
<div
v-for="feature in features"
@@ -10,17 +54,17 @@
class="lg:w-1/2 px-4 mb-6 text-center"
>
<g-image
class="w-10 h-10 mx-auto"
class="w-1/3 mx-auto"
v-if="feature.svg"
:src="feature.svg.src"
:alt="feature.svg"
></g-image>
<h3 class="text-xl my-3 font-semibold font-heading">
<h2 class="text-3xl mt-5 mb-3 font-normal font-heading">
{{ feature.title }}
</h3>
</h2>
<div
v-html="feature.content"
class="text-sm text-gray-700 leading-relaxed"
class="text-lg text-gray-700 leading-relaxed"
></div>
</div>
</div>
@@ -37,6 +81,36 @@
<script>
export default {
props: ["main", "features"],
props: ["id", "main", "features"],
};
</script>
</script>
<style scoped>
.img-border {
display: block;
width: 50px;
margin: auto;
height: 5px;
background: linear-gradient(to right, #b8a5e9, #2e3192);
}
.border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, #b8a5e9, #23256e);
padding: 3px;
border-radius: 20px;
}
.module {
width: 245px;
background: #252e6e;
color: white;
text-align: center;
border-radius: 20px;
}
.feature {
max-height: 315px !important;
}
</style>