update site with new design
This commit is contained in:
hossnys
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 428 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 MiB |
@@ -1,374 +1,279 @@
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("https://fonts.googleapis.com/css2?family=Roboto");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;600&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
blockquote {
|
||||
// @apply border-l;
|
||||
@apply border-l-4;
|
||||
@apply border-l-blue-500;
|
||||
@apply pl-4;
|
||||
@apply italic;
|
||||
@apply my-8;
|
||||
p {
|
||||
padding: 0 !important;
|
||||
}
|
||||
@apply border-l;
|
||||
@apply border-l-4;
|
||||
@apply border-l-blue-500;
|
||||
@apply pl-4;
|
||||
@apply italic;
|
||||
@apply my-8;
|
||||
p {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
body h2 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
body p {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
// tft page
|
||||
|
||||
.tft_section h1{
|
||||
font-family: 'Oswald', sans-serif !important;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.tft_section h2{
|
||||
font-family: 'Oswald', sans-serif !important;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.tft_section2 h2{
|
||||
font-family: 'Oswald', sans-serif !important;
|
||||
|
||||
}
|
||||
|
||||
.tft_section h3{
|
||||
font-family: 'Oswald', sans-serif !important;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.tft_subtitle{
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 400 !important;
|
||||
|
||||
}
|
||||
|
||||
.post-card-excerpt,
|
||||
.post-content-text {
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.post-content-text h2 {
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
|
||||
.act-link {
|
||||
@apply bg-gray-300;
|
||||
@apply bg-gray-300;
|
||||
}
|
||||
|
||||
pre {
|
||||
// @apply border-l;
|
||||
@apply border-l-2;
|
||||
@apply border-l-gray-500;
|
||||
@apply pl-4;
|
||||
@apply mt-4;
|
||||
@apply text-base;
|
||||
@apply break-words;
|
||||
@apply overflow-x-auto;
|
||||
@apply border-l;
|
||||
@apply border-l-2;
|
||||
@apply border-l-gray-500;
|
||||
@apply pl-4;
|
||||
@apply mt-4;
|
||||
@apply text-base;
|
||||
@apply break-words;
|
||||
@apply overflow-x-auto;
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
ol {
|
||||
@apply list-decimal;
|
||||
@apply ml-5;
|
||||
@apply list-decimal;
|
||||
@apply ml-5;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-disc;
|
||||
@apply ml-5;
|
||||
@apply list-disc;
|
||||
@apply ml-5;
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
@apply text-red-600;
|
||||
@apply text-base;
|
||||
:not(pre)>code {
|
||||
@apply text-red-600;
|
||||
@apply text-base;
|
||||
}
|
||||
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@responsive {
|
||||
.pxi-0 {
|
||||
@apply px-0 #{!important};
|
||||
}
|
||||
.pyi-0 {
|
||||
@apply py-0 #{!important};
|
||||
}
|
||||
.pi-0 {
|
||||
@apply p-0 #{!important};
|
||||
}
|
||||
.pxi-0 {
|
||||
@apply px-0 #{!important};
|
||||
}
|
||||
.pyi-0 {
|
||||
@apply py-0 #{!important};
|
||||
}
|
||||
.pi-0 {
|
||||
@apply p-0 #{!important};
|
||||
}
|
||||
}
|
||||
|
||||
.animated-link:after {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 1px;
|
||||
display: block;
|
||||
transition: 300ms;
|
||||
@apply bg-gray-500;
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 1px;
|
||||
display: block;
|
||||
transition: 300ms;
|
||||
@apply bg-gray-500;
|
||||
}
|
||||
|
||||
.footerlink {
|
||||
margin-left: 0rem !important;
|
||||
margin-left: 0rem !important;
|
||||
}
|
||||
|
||||
// .animated-link:hover:after {
|
||||
// width: 100%;
|
||||
// }
|
||||
.height-30px {
|
||||
height: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 2.5rem;
|
||||
.brandpanel {
|
||||
background-color: #C2AEEC;
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border-width: 0px !important;
|
||||
border-width: 0px !important;
|
||||
}
|
||||
|
||||
.flex-post {
|
||||
// @apply border-b;
|
||||
@apply border-b-gray-300;
|
||||
@apply flex-col;
|
||||
@apply w-full;
|
||||
.post-card-image {
|
||||
// @apply h-56;
|
||||
@apply h-full;
|
||||
@apply border-b;
|
||||
@apply border-b-gray-300;
|
||||
@apply flex-col;
|
||||
@apply w-full;
|
||||
@apply object-cover;
|
||||
@apply rounded;
|
||||
@apply relative;
|
||||
}
|
||||
.post-card-title {
|
||||
@apply leading-none;
|
||||
@apply text-2xl;
|
||||
@apply font-medium;
|
||||
}
|
||||
.post-card-excerpt {
|
||||
@apply font-serif;
|
||||
}
|
||||
.post-card-image {
|
||||
@apply h-56;
|
||||
@apply w-full;
|
||||
@apply object-cover;
|
||||
@apply rounded;
|
||||
@apply relative;
|
||||
}
|
||||
.post-card-title {
|
||||
@apply leading-none;
|
||||
@apply text-2xl;
|
||||
@apply font-medium;
|
||||
}
|
||||
.post-card-excerpt {
|
||||
@apply font-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.author-list-item:nth-child(n + 2) {
|
||||
@apply -ml-3;
|
||||
@apply -ml-3;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.telegram_icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.post-content a {
|
||||
color: #4ec48f;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.text-8xl {
|
||||
font-size: 5rem;
|
||||
line-height: 1;
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
.text-9xl {
|
||||
font-size: 8rem;
|
||||
line-height: 1;
|
||||
|
||||
}
|
||||
|
||||
.text-6xl {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
@media (min-width: 375px) {
|
||||
.text-3xl {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.tft_section h1{
|
||||
font-size: 4rem;
|
||||
}
|
||||
.tft_section h2{
|
||||
font-size: 3rem;
|
||||
}
|
||||
font-size: 5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.with-large > .flex-post:nth-child(5n),
|
||||
.with-large > .flex-post:nth-child(5n-1) {
|
||||
// @apply flex-100;
|
||||
flex: 1 1 50%;
|
||||
@apply flex-col;
|
||||
.post-card-image-link {
|
||||
@apply relative;
|
||||
min-height: 400px;
|
||||
.with-large>.flex-post:nth-child(5n),
|
||||
.with-large>.flex-post:nth-child(5n-1) {
|
||||
// @apply flex-100;
|
||||
flex: 1 1 50%;
|
||||
@apply flex-col;
|
||||
.post-card-image-link {
|
||||
@apply relative;
|
||||
min-height: 400px;
|
||||
}
|
||||
.post-card-image {
|
||||
@apply absolute;
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
@apply object-cover;
|
||||
@apply rounded-lg;
|
||||
}
|
||||
.post-card-content {
|
||||
// @apply flex-post-large-content;
|
||||
flex: 0 1 auto;
|
||||
@apply self-center;
|
||||
}
|
||||
.post-card-title {
|
||||
@apply text-4xl;
|
||||
}
|
||||
.post-card-excerpt {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
.post-card-image {
|
||||
@apply absolute;
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
@apply object-cover;
|
||||
@apply rounded-lg;
|
||||
.news>.flex-post:nth-child(5n),
|
||||
.news>.flex-post:nth-child(5n-1) {
|
||||
// @apply flex-100;
|
||||
flex: 1 1 50%;
|
||||
@apply flex-col;
|
||||
.post-card-image-link {
|
||||
@apply relative;
|
||||
min-height: 300px;
|
||||
}
|
||||
.post-card-image {
|
||||
@apply absolute;
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
@apply object-cover;
|
||||
@apply rounded-lg;
|
||||
}
|
||||
.post-card-content {
|
||||
// @apply flex-post-large-content;
|
||||
flex: 0 1 auto;
|
||||
@apply self-center;
|
||||
}
|
||||
.post-card-title {
|
||||
@apply text-4xl;
|
||||
}
|
||||
.post-card-excerpt {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
.post-card-content {
|
||||
// @apply flex-post-large-content;
|
||||
flex: 0 1 auto;
|
||||
@apply self-center;
|
||||
}
|
||||
.post-card-title {
|
||||
@apply text-4xl;
|
||||
}
|
||||
.post-card-excerpt {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
.news > .flex-post:nth-child(5n),
|
||||
.news > .flex-post:nth-child(5n-1) {
|
||||
// @apply flex-100;
|
||||
flex: 1 1 50%;
|
||||
@apply flex-col;
|
||||
.post-card-image-link {
|
||||
@apply relative;
|
||||
min-height: 300px;
|
||||
}
|
||||
.post-card-image {
|
||||
@apply absolute;
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
@apply object-cover;
|
||||
@apply rounded-lg;
|
||||
}
|
||||
.post-card-content {
|
||||
// @apply flex-post-large-content;
|
||||
flex: 0 1 auto;
|
||||
@apply self-center;
|
||||
}
|
||||
.post-card-title {
|
||||
@apply text-4xl;
|
||||
}
|
||||
.post-card-excerpt {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
.text-3xl {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
// .news>.flex-post:nth-child(9n+1),
|
||||
// .news>.flex-post:nth-child(9n+2) {
|
||||
// // @apply flex-100;
|
||||
// flex: 1 1 50%;
|
||||
// @apply flex-col;
|
||||
// .post-card-image-link {
|
||||
// @apply relative;
|
||||
// min-height: 300px;
|
||||
// }
|
||||
// .post-card-image {
|
||||
// @apply absolute;
|
||||
// @apply h-full;
|
||||
// @apply w-full;
|
||||
// @apply object-cover;
|
||||
// @apply rounded-lg;
|
||||
// }
|
||||
// .post-card-content {
|
||||
// // @apply flex-post-large-content;
|
||||
// flex: 0 1 auto;
|
||||
// @apply self-center;
|
||||
// }
|
||||
// .post-card-title {
|
||||
// @apply text-4xl;
|
||||
// }
|
||||
// .post-card-excerpt {
|
||||
// @apply text-xl;
|
||||
// }
|
||||
// }
|
||||
// .news>.flex-post:nth-child(9n+3),
|
||||
// .news>.flex-post:nth-child(9n+4),
|
||||
// .news>.flex-post:nth-child(9n+5) {
|
||||
// // @apply flex-100;
|
||||
// flex: 1 1 300px;
|
||||
// @apply flex-col;
|
||||
// .post-card-image-link {
|
||||
// @apply relative;
|
||||
// min-height: 180px;
|
||||
// }
|
||||
// .post-card-image {
|
||||
// @apply absolute;
|
||||
// @apply h-full;
|
||||
// @apply w-full;
|
||||
// @apply object-cover;
|
||||
// @apply rounded-lg;
|
||||
// }
|
||||
// .post-card-content {
|
||||
// // @apply flex-post-large-content;
|
||||
// flex: 0 1 auto;
|
||||
// @apply self-center;
|
||||
// }
|
||||
// .post-card-title {
|
||||
// @apply text-4xl;
|
||||
// }
|
||||
// .post-card-excerpt {
|
||||
// @apply text-xl;
|
||||
// }
|
||||
// }
|
||||
// .news>.flex-post:nth-child(9n+6),
|
||||
// .news>.flex-post:nth-child(9n+7),
|
||||
// .news>.flex-post:nth-child(9n+8),
|
||||
// .news>.flex-post:nth-child(9n+9) {
|
||||
// // @apply flex-100;
|
||||
// flex: 1 1 250px;
|
||||
// @apply flex-col;
|
||||
// .post-card-image-link {
|
||||
// @apply relative;
|
||||
// min-height: 300px;
|
||||
// }
|
||||
// .post-card-image {
|
||||
// @apply absolute;
|
||||
// @apply h-full;
|
||||
// @apply w-full;
|
||||
// @apply object-cover;
|
||||
// @apply rounded-lg;
|
||||
// }
|
||||
// .post-card-content {
|
||||
// // @apply flex-post-large-content;
|
||||
// flex: 0 1 auto;
|
||||
// @apply self-center;
|
||||
// }
|
||||
// .post-card-title {
|
||||
// @apply text-4xl;
|
||||
// }
|
||||
// .post-card-excerpt {
|
||||
// @apply text-xl;
|
||||
// }
|
||||
// }
|
||||
// .news>.flex-post:nth-child(9n+1),
|
||||
// .news>.flex-post:nth-child(9n+2) {
|
||||
// // @apply flex-100;
|
||||
// flex: 1 1 50%;
|
||||
// @apply flex-col;
|
||||
// .post-card-image-link {
|
||||
// @apply relative;
|
||||
// min-height: 300px;
|
||||
// }
|
||||
// .post-card-image {
|
||||
// @apply absolute;
|
||||
// @apply h-full;
|
||||
// @apply w-full;
|
||||
// @apply object-cover;
|
||||
// @apply rounded-lg;
|
||||
// }
|
||||
// .post-card-content {
|
||||
// // @apply flex-post-large-content;
|
||||
// flex: 0 1 auto;
|
||||
// @apply self-center;
|
||||
// }
|
||||
// .post-card-title {
|
||||
// @apply text-4xl;
|
||||
// }
|
||||
// .post-card-excerpt {
|
||||
// @apply text-xl;
|
||||
// }
|
||||
// }
|
||||
// .news>.flex-post:nth-child(9n+3),
|
||||
// .news>.flex-post:nth-child(9n+4),
|
||||
// .news>.flex-post:nth-child(9n+5) {
|
||||
// // @apply flex-100;
|
||||
// flex: 1 1 300px;
|
||||
// @apply flex-col;
|
||||
// .post-card-image-link {
|
||||
// @apply relative;
|
||||
// min-height: 180px;
|
||||
// }
|
||||
// .post-card-image {
|
||||
// @apply absolute;
|
||||
// @apply h-full;
|
||||
// @apply w-full;
|
||||
// @apply object-cover;
|
||||
// @apply rounded-lg;
|
||||
// }
|
||||
// .post-card-content {
|
||||
// // @apply flex-post-large-content;
|
||||
// flex: 0 1 auto;
|
||||
// @apply self-center;
|
||||
// }
|
||||
// .post-card-title {
|
||||
// @apply text-4xl;
|
||||
// }
|
||||
// .post-card-excerpt {
|
||||
// @apply text-xl;
|
||||
// }
|
||||
// }
|
||||
// .news>.flex-post:nth-child(9n+6),
|
||||
// .news>.flex-post:nth-child(9n+7),
|
||||
// .news>.flex-post:nth-child(9n+8),
|
||||
// .news>.flex-post:nth-child(9n+9) {
|
||||
// // @apply flex-100;
|
||||
// flex: 1 1 250px;
|
||||
// @apply flex-col;
|
||||
// .post-card-image-link {
|
||||
// @apply relative;
|
||||
// min-height: 300px;
|
||||
// }
|
||||
// .post-card-image {
|
||||
// @apply absolute;
|
||||
// @apply h-full;
|
||||
// @apply w-full;
|
||||
// @apply object-cover;
|
||||
// @apply rounded-lg;
|
||||
// }
|
||||
// .post-card-content {
|
||||
// // @apply flex-post-large-content;
|
||||
// flex: 0 1 auto;
|
||||
// @apply self-center;
|
||||
// }
|
||||
// .post-card-title {
|
||||
// @apply text-4xl;
|
||||
// }
|
||||
// .post-card-excerpt {
|
||||
// @apply text-xl;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// body[data-theme="dark"] {
|
||||
@@ -438,4 +343,4 @@ button:focus {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<div class="text-center mx-auto my-4">
|
||||
<h1 class="text-4xl text-gray-900 font-light sm:text-9xl sm:leading-10">
|
||||
{{ main.title }} <span class="font-extrabold">{{ main.slogan }}</span>
|
||||
</h1>
|
||||
<div
|
||||
class="mt-3 max-w-2xl mx-auto text-gray-600 sm:mt-4"
|
||||
v-html="main.content"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="flex w-1/2 app px-0 sm:px-4 pb-4"
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
>
|
||||
<div class="post-card-image-link px-1">
|
||||
<g-link :to="product.link">
|
||||
<g-image
|
||||
:src="img(product.image)"
|
||||
:alt="product.title"
|
||||
class="post-card-image"
|
||||
></g-image>
|
||||
</g-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["products", "main"],
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.post-card-excerpt {
|
||||
font-family: "Roboto", sans-serif;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.post-card-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.app:last-child {
|
||||
width: auto !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -21,20 +21,7 @@
|
||||
v-for="membership in record.memberships"
|
||||
:key="membership.id"
|
||||
:to="membership.path"
|
||||
class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-blue-700
|
||||
py-1
|
||||
px-2
|
||||
mr-1
|
||||
border
|
||||
hover:border-blue-500
|
||||
border-gray-600
|
||||
text-gray-700
|
||||
rounded-full
|
||||
mb-2
|
||||
"
|
||||
class="text-xs bg-transparent hover:text-blue-700 py-1 px-2 mr-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full mb-2"
|
||||
>{{ membership.title }}</g-link
|
||||
>
|
||||
</section>
|
||||
@@ -54,13 +41,7 @@
|
||||
<g-image
|
||||
:src="author.image"
|
||||
:alt="author.name"
|
||||
class="
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border-2 border-white
|
||||
"
|
||||
class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
|
||||
/>
|
||||
</g-link>
|
||||
</li>
|
||||
@@ -85,27 +66,12 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<section
|
||||
class="post-tags container mx-auto relative py-3"
|
||||
v-if="displaytags()"
|
||||
>
|
||||
<g-link
|
||||
<section class="post-tags container mx-auto relative py-3" v-if="displaytags()">
|
||||
<g-link
|
||||
v-for="tag in record.tags"
|
||||
:key="tag.id"
|
||||
:to="tag.path"
|
||||
class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-blue-700
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-blue-500
|
||||
border-gray-600
|
||||
text-gray-700
|
||||
rounded-full
|
||||
"
|
||||
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
|
||||
>{{ tag.title }}</g-link
|
||||
>
|
||||
</section>
|
||||
@@ -126,14 +92,15 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
displaytags() {
|
||||
return this.showtags;
|
||||
},
|
||||
},
|
||||
};
|
||||
displaytags(){
|
||||
return this.showtags
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-card-excerpt {
|
||||
font-family: "Roboto", sans-serif;
|
||||
line-height: 1.2;
|
||||
|
||||
@@ -92,6 +92,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-card-excerpt {
|
||||
font-family: "Roboto", sans-serif;
|
||||
line-height: 1.2;
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
<template>
|
||||
<div class="alert-banner w-full fixed left-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="hidden"
|
||||
id="banneralert"
|
||||
v-model="bannerChecked"
|
||||
@click="linkCopied"
|
||||
/>
|
||||
|
||||
<label
|
||||
class="
|
||||
close
|
||||
cursor-pointer
|
||||
flex
|
||||
items-center
|
||||
justify-between
|
||||
w-full
|
||||
p-2
|
||||
bg-gray-500
|
||||
shadow
|
||||
text-white
|
||||
"
|
||||
title="close"
|
||||
for="banneralert"
|
||||
>
|
||||
Link Copied!
|
||||
|
||||
<svg
|
||||
class="fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
|
||||
></path>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bannerChecked: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
linkCopied() {
|
||||
this.$emit("clicked", this.bannerChecked);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/*Banner open/load animation*/
|
||||
.alert-banner {
|
||||
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
top: 75px;
|
||||
}
|
||||
|
||||
/*Banner close animation*/
|
||||
.alert-banner input:checked ~ * {
|
||||
-webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
|
||||
both;
|
||||
animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-in-top {
|
||||
0% {
|
||||
-webkit-transform: translateY(-1000px);
|
||||
transform: translateY(-1000px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slide-in-top {
|
||||
0% {
|
||||
-webkit-transform: translateY(-1000px);
|
||||
transform: translateY(-1000px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slide-out-top {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-1000px);
|
||||
transform: translateY(-1000px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slide-out-top {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-1000px);
|
||||
transform: translateY(-1000px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,29 +3,29 @@
|
||||
class="flex flex-post px-0 sm:px-4 pb-8 mb-8"
|
||||
v-bind:class="{ 'no-border': !border }"
|
||||
>
|
||||
<a :href="path" class="post-card-image-link">
|
||||
<g-link :to="path" class="post-card-image-link">
|
||||
<g-image
|
||||
:src="img(record.image)"
|
||||
:alt="record.title"
|
||||
class="post-card-image"
|
||||
></g-image>
|
||||
</a>
|
||||
</g-link>
|
||||
<div>
|
||||
<a :href="path">
|
||||
<g-link :to="path">
|
||||
<h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2>
|
||||
<p class="post-card-excerpt text-gray-700">{{ record.excerpt }}</p>
|
||||
<section
|
||||
class="flex flex-wrap post-tags container mx-auto relative py-1"
|
||||
>
|
||||
<a
|
||||
v-for="membership in record.memberships"
|
||||
<g-link
|
||||
v-for="membership in memberships"
|
||||
:key="membership.id"
|
||||
:href="membership.path"
|
||||
:to="membership.path"
|
||||
class="text-xs bg-transparent hover:text-blue-700 py-1 px-2 mr-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full mb-2"
|
||||
>{{ membership.title }}</a
|
||||
>{{ membership.title }}</g-link
|
||||
>
|
||||
</section>
|
||||
</a>
|
||||
</g-link>
|
||||
|
||||
<div class="w-full post-card-meta pt-2">
|
||||
<div class="avatars">
|
||||
@@ -37,31 +37,31 @@
|
||||
:key="author.id"
|
||||
class="author-list-item"
|
||||
>
|
||||
<a :href="author.path" v-tooltip="author.name">
|
||||
<g-link :to="author.path" v-tooltip="author.name">
|
||||
<g-image
|
||||
:src="img(author.image)"
|
||||
:alt="author.name"
|
||||
class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
|
||||
/>
|
||||
</a>
|
||||
</g-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col text-xs leading-none uppercase">
|
||||
<p>
|
||||
<a :href="path">
|
||||
<g-link :to="path">
|
||||
<time :datetime="record.datetime">{{
|
||||
record.humanTime
|
||||
}}</time>
|
||||
</a>
|
||||
</g-link>
|
||||
</p>
|
||||
<p>
|
||||
<a :href="path">
|
||||
<g-link :to="path">
|
||||
<time :datetime="record.datetime">{{
|
||||
record.startDate
|
||||
}}</time>
|
||||
</a>
|
||||
</g-link>
|
||||
{{ record.status }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -70,12 +70,12 @@
|
||||
class="post-tags container mx-auto relative py-3"
|
||||
v-if="displaytags()"
|
||||
>
|
||||
<a
|
||||
<g-link
|
||||
v-for="tag in record.tags"
|
||||
:key="tag.id"
|
||||
:href="tag.path"
|
||||
class="inline-block text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
|
||||
>{{ tag.title.replace("_", " ") }}</a
|
||||
:to="tag.path"
|
||||
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
|
||||
>{{ tag.title }}</g-link
|
||||
>
|
||||
</section>
|
||||
</div>
|
||||
@@ -101,6 +101,20 @@ export default {
|
||||
if (this.pathPrefix) return this.pathPrefix + "/" + this.record.id;
|
||||
return this.record.path;
|
||||
},
|
||||
|
||||
memberships() {
|
||||
var res = [];
|
||||
var memberships = this.record.memberships;
|
||||
if (!memberships) {
|
||||
return [];
|
||||
}
|
||||
memberships.forEach(function (membership) {
|
||||
if(["foundation", "tech", "cofounders"].includes(membership.title)){
|
||||
res.push(membership);
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
displaytags() {
|
||||
@@ -116,6 +130,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-card-excerpt {
|
||||
font-family: "Roboto", sans-serif;
|
||||
line-height: 1.2;
|
||||
|
||||
@@ -115,6 +115,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-card-excerpt {
|
||||
font-family: "Roboto", sans-serif;
|
||||
line-height: 1.2;
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<div class="inline-flex md:ml-auto">
|
||||
<header
|
||||
class="
|
||||
inline-flex
|
||||
flex-wrap
|
||||
container
|
||||
px-4
|
||||
py-1
|
||||
sm:px-0
|
||||
transition-all transition-500
|
||||
"
|
||||
>
|
||||
<ul
|
||||
class="
|
||||
list-none
|
||||
m-0
|
||||
sm:flex
|
||||
justify-left
|
||||
capitalize
|
||||
transition-all transition-500
|
||||
"
|
||||
>
|
||||
<!-- Topics -->
|
||||
<li class="py-1 mx-5">
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(0)"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
"
|
||||
>
|
||||
<span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
:class="{
|
||||
'rotate-180': active == 0,
|
||||
'rotate-0': !active == 0,
|
||||
}"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="active == 0"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="
|
||||
w-64
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
>
|
||||
<a
|
||||
class="
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
mt-2
|
||||
text-sm
|
||||
font-semibold
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
v-for="topic in topics"
|
||||
:key="topic"
|
||||
@click.self="
|
||||
setTopic(topic);
|
||||
open = false;
|
||||
"
|
||||
>{{ topic.replace(/_/g, " ") }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* I'm a lazy guy, so i used this script
|
||||
* https://codepen.io/ninaregli/pen/OjeMLP
|
||||
* to calculate the current scroll position
|
||||
*
|
||||
* Will be used to add/remove the additional
|
||||
* css classes to show the sticky navbar
|
||||
*/
|
||||
|
||||
export default {
|
||||
props: ["topics"],
|
||||
data: function () {
|
||||
return {
|
||||
isOpen: false,
|
||||
open: false,
|
||||
active: null,
|
||||
listArchive: false,
|
||||
topic: "Popular Topics",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
setActive(index) {
|
||||
this.active = index;
|
||||
this.open = !this.open;
|
||||
},
|
||||
setTopic(event) {
|
||||
this.$emit("selectedTopic", event);
|
||||
this.topic = event;
|
||||
},
|
||||
close(e) {
|
||||
if (!this.$el.contains(e.target)) {
|
||||
this.open = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.addEventListener("click", this.close);
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener("click", this.close);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div @click="handleClose">
|
||||
<div
|
||||
v-if="showModal"
|
||||
class="fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
|
||||
>
|
||||
<div
|
||||
class="iframe-container relative h-0 w-1/2"
|
||||
style="padding-bottom: 56.25%"
|
||||
>
|
||||
<iframe
|
||||
:src="link"
|
||||
frameborder="0"
|
||||
width="640"
|
||||
height="360"
|
||||
allowfullscreen
|
||||
class="absolute top-0 left-0 w-full h-full"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Modal",
|
||||
props: ["showModal", "link"],
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$emit("onClose");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@media (max-width: 768px) {
|
||||
.iframe-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="grid grid-cols-1 gap-16">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
<h2 class="text-4xl mb-6 leading-tight font-semibold font-heading">
|
||||
E-mail us
|
||||
Get in touch
|
||||
</h2>
|
||||
<div
|
||||
class="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2"
|
||||
|
||||
@@ -1,18 +1,7 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 h-16 bg-white">
|
||||
<header
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
justify-between
|
||||
flex-wrap
|
||||
container-fluid
|
||||
mx-auto
|
||||
px-
|
||||
sm:px-0
|
||||
py-4
|
||||
transition-all transition-500
|
||||
"
|
||||
class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
|
||||
:class="{
|
||||
'opacity-100': !disableScroll && scrollPosition > headerHeight,
|
||||
'opacity-0': !disableScroll && scrollPosition < headerHeight,
|
||||
@@ -20,10 +9,18 @@
|
||||
>
|
||||
<div class="flex items-center justify-between px-4 py-3 sm:p-0">
|
||||
<div class="inline-flex items-center flex-shrink-0">
|
||||
<a href="/">
|
||||
<a href="/" class="flex">
|
||||
<g-image
|
||||
:src="require(`!!assets-loader!@images/tfn_black.svg`)"
|
||||
class="mr-3 fill-current logo"
|
||||
:src="require(`!!assets-loader!@images/TFN_black.svg`)"
|
||||
class="mr-3 fill-current w-3/5"
|
||||
v-if="theme == 'light'"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<g-image
|
||||
:src="require(`!!assets-loader!@images/TFN_black.svg`)"
|
||||
class="mr-3 fill-current w-3/5"
|
||||
v-else
|
||||
alt=""
|
||||
/>
|
||||
|
||||
@@ -34,11 +31,11 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="lg:hidden ml-auto">
|
||||
<div class="sm:hidden ml-auto">
|
||||
<button
|
||||
@click="isOpen = !isOpen"
|
||||
type="button"
|
||||
class="block ml-auto text-gray-900 focus:outline-none"
|
||||
class="block text-gray-500 focus:outline-none"
|
||||
>
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
|
||||
<path
|
||||
@@ -54,17 +51,17 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-gray-900 sm:block md:hidden">
|
||||
<div class="text-gray-400 sm:block md:hidden">
|
||||
<ul class="list-none flex justify-center md:justify-end">
|
||||
<!-- <li class="mr-0 sm:mr-6">
|
||||
<li class="mr-0 sm:mr-6">
|
||||
<theme-switcher v-on="$listeners" :theme="theme" />
|
||||
</li> -->
|
||||
</li>
|
||||
<li
|
||||
:key="element.name"
|
||||
v-for="(element, index) in navigation.social"
|
||||
class="hover:text-white sm:block"
|
||||
:class="{
|
||||
'px-1 mr-4': index != Object.keys(navigation.navLinks).length,
|
||||
'px-2 mr-2': index != Object.keys(navigation.navLinks).length,
|
||||
}"
|
||||
>
|
||||
<span class="telegram_icon">
|
||||
@@ -77,47 +74,13 @@
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a
|
||||
href="javascript:;"
|
||||
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="far"
|
||||
data-icon="envelope"
|
||||
class="h-5 w-5 mt-1"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
:class="isOpen ? 'block' : 'hidden'"
|
||||
class="
|
||||
bg-white
|
||||
navbar
|
||||
xl:order-2
|
||||
px-2
|
||||
pt-2
|
||||
ml-auto
|
||||
pb-4
|
||||
lg:flex
|
||||
lg:p-0
|
||||
lg:w-100
|
||||
xs:bg-transparent
|
||||
"
|
||||
class="navbar md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 sm:w-100 bg-white"
|
||||
>
|
||||
<div
|
||||
:key="index"
|
||||
@@ -131,19 +94,9 @@
|
||||
>
|
||||
<button
|
||||
@click="setActive(index)"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
mr-1
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-2
|
||||
animated-link
|
||||
"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
>
|
||||
<span class="uppercase py-1">{{ element.name }}</span>
|
||||
<span class="uppercase py-1 pl-2">{{ element.name }}</span>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -151,17 +104,7 @@
|
||||
'rotate-180': active == index,
|
||||
'rotate-0': active == !index,
|
||||
}"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -179,16 +122,7 @@
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="
|
||||
absolute
|
||||
w-auto
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
class="absolute w-auto mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
@@ -197,27 +131,7 @@
|
||||
<div v-for="(link, i) in element.submenu" :key="i">
|
||||
<a
|
||||
v-if="link.external"
|
||||
class="
|
||||
block
|
||||
px-4
|
||||
py-1
|
||||
text-sm
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
@click="open = false"
|
||||
:href="link.path"
|
||||
target="_blank"
|
||||
@@ -225,29 +139,9 @@
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
block
|
||||
px-4
|
||||
py-1
|
||||
text-sm
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
@click="open = false"
|
||||
:href="link.path"
|
||||
:href="$url(link.path)"
|
||||
>{{ link.title }}</a
|
||||
>
|
||||
</div>
|
||||
@@ -255,20 +149,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
<g-link
|
||||
v-else-if="element.external"
|
||||
:href="element.link"
|
||||
@click="clicked"
|
||||
:to="element.link"
|
||||
@click.native="clicked"
|
||||
target="_blank"
|
||||
class="inline-flex sm:flex uppercase p-2 mr-2 animated-link"
|
||||
>{{ element.name }}</a
|
||||
class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
|
||||
>{{ element.name }}</g-link
|
||||
>
|
||||
<a
|
||||
<g-link
|
||||
v-else
|
||||
:href="element.link"
|
||||
@click="clicked"
|
||||
class="inline-flex sm:flex uppercase p-2 mr-2 animated-link"
|
||||
>{{ element.name }}</a
|
||||
:to="element.link"
|
||||
@click.native="clicked"
|
||||
class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
|
||||
>{{ element.name }}</g-link
|
||||
>
|
||||
</div>
|
||||
<!-- <div
|
||||
@@ -286,7 +180,7 @@
|
||||
/>
|
||||
</div> -->
|
||||
</nav>
|
||||
<div class="hidden ml-0 md:ml-auto md:inline-block md:order-last">
|
||||
<div class="hidden md:ml-auto md:inline-block md:order-last">
|
||||
<!-- <div class="inline-flex rounded-full border-2 border-gray-200 w-1/2">
|
||||
<span class="w-auto flex justify-end items-center p-2">
|
||||
<font-awesome :icon="['fas', 'search']" />
|
||||
@@ -299,16 +193,16 @@
|
||||
@keyup.enter="result"
|
||||
/>
|
||||
</div> -->
|
||||
<ul class="list-none inline-flex justify-center md:ml-0 md:justify-end">
|
||||
<!-- <li class="mr-0 sm:mr-2">
|
||||
<ul class="list-none inline-flex justify-center md:justify-end">
|
||||
<li class="mr-0 sm:mr-6">
|
||||
<ThemeSwitcher v-on="$listeners" :theme="theme" />
|
||||
</li> -->
|
||||
</li>
|
||||
<li
|
||||
:key="element.name"
|
||||
v-for="(element, index) in navigation.social"
|
||||
class="mr-1 sm:block"
|
||||
class="sm:block"
|
||||
v-bind:class="{
|
||||
'mr-2': index != Object.keys(navigation.social).length - 1,
|
||||
'mr-6': index != Object.keys(navigation.social).length - 1,
|
||||
}"
|
||||
>
|
||||
<span class="telegram_icon">
|
||||
@@ -317,28 +211,6 @@
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ml-4 mt-1">
|
||||
<a
|
||||
href="javascript:;"
|
||||
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="far"
|
||||
data-icon="envelope"
|
||||
class="h-5 w-5"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
@@ -400,7 +272,7 @@ export default {
|
||||
if (!this.$el.contains(e.target)) {
|
||||
this.open = false;
|
||||
this.active = !this.active;
|
||||
// this.isOpen = !this.isOpen;
|
||||
this.isOpen = !this.isOpen;
|
||||
}
|
||||
},
|
||||
clicked() {
|
||||
@@ -421,13 +293,6 @@ 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;
|
||||
@@ -446,37 +311,9 @@ a.active--exact.active {
|
||||
.navbar {
|
||||
width: auto;
|
||||
}
|
||||
.logo {
|
||||
max-width: 180px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.navbar {
|
||||
width: auto;
|
||||
}
|
||||
.container-fluid {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.navbar {
|
||||
width: 100%;
|
||||
}
|
||||
.container-fluid {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,7 @@
|
||||
<template>
|
||||
<div class="top-16 left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
|
||||
<div class="fixed top-16 left-0 z-50 mb-5 h-16 bg-gray-100 w-full">
|
||||
<header
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
justify-between
|
||||
flex-wrap
|
||||
container
|
||||
mx-auto
|
||||
px-4
|
||||
py-1
|
||||
sm:px-0
|
||||
transition-all transition-500
|
||||
"
|
||||
class="flex items-center justify-between flex-wrap container mx-auto px-4 py-1 sm:px-0 transition-all transition-500"
|
||||
>
|
||||
<div class="flex items-center justify-between px-4 py-2 sm:p-0">
|
||||
<div class="sm:hidden ml-auto">
|
||||
@@ -48,34 +37,19 @@
|
||||
|
||||
<nav
|
||||
:class="isOpen ? 'flex' : 'hidden'"
|
||||
class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0"
|
||||
class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-gray-100"
|
||||
>
|
||||
<ul
|
||||
class="
|
||||
list-none
|
||||
sm:flex
|
||||
justify-left
|
||||
capitalize
|
||||
transition-all transition-500
|
||||
"
|
||||
class="list-none sm:flex justify-left capitalize transition-all transition-500"
|
||||
>
|
||||
<!-- Topics -->
|
||||
<li class="py-1 mx-5">
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(0)"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
>
|
||||
<span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
|
||||
<span class="capitalize">{{ topic }}</span>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -83,17 +57,7 @@
|
||||
'rotate-180': active == 0,
|
||||
'rotate-0': !active == 0,
|
||||
}"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -111,61 +75,21 @@
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="
|
||||
w-64
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
class="w-64 max-h-10 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
|
||||
>
|
||||
<a
|
||||
v-for="topic in topics"
|
||||
:key="topic"
|
||||
class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
@click.self="
|
||||
setTopic(topic);
|
||||
open = false;
|
||||
"
|
||||
class="
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
mt-2
|
||||
text-sm
|
||||
font-semibold
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
>{{ topic.replace(/_/g, " ") }}</a
|
||||
>{{ topic }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,16 +101,7 @@
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(1)"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
>
|
||||
<span class="capitalize">{{ year }}</span>
|
||||
<svg
|
||||
@@ -196,17 +111,7 @@
|
||||
'rotate-180': active == 1,
|
||||
'rotate-0': !active == 1,
|
||||
}"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -224,56 +129,16 @@
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="
|
||||
w-64
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
|
||||
>
|
||||
<a
|
||||
v-for="year in years"
|
||||
:key="year"
|
||||
class="
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
mt-2
|
||||
text-sm
|
||||
font-semibold
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
@click.self="
|
||||
setYear(year);
|
||||
open = false;
|
||||
@@ -290,16 +155,7 @@
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(2)"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
>
|
||||
<span class="capitalize">{{ month }}</span>
|
||||
<svg
|
||||
@@ -309,17 +165,7 @@
|
||||
'rotate-180': active == 2,
|
||||
'rotate-0': !active == 2,
|
||||
}"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -337,58 +183,16 @@
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="
|
||||
w-64
|
||||
overflow-y-auto
|
||||
h-40
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
class="w-64 overflow-y-auto h-40 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
|
||||
>
|
||||
<a
|
||||
v-for="month in months"
|
||||
:key="month"
|
||||
class="
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
mt-2
|
||||
text-sm
|
||||
font-semibold
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
@click.self="
|
||||
setMonth(month);
|
||||
open = false;
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div class="inline-flex rounded-full border-grey-light test m-auto lg:m-0 mr-5">
|
||||
<button>
|
||||
<span class="w-auto inline-flex justify-end items-center text-grey p-2">
|
||||
<font-awesome :icon="['fas', 'search']" />
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
class="w-full rounded mr-4"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
:value="value"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["value"],
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
svg {
|
||||
color: #9fa3b6;
|
||||
}
|
||||
|
||||
.test {
|
||||
border: 1px solid #9fa3b6;
|
||||
/* width: 10%; */
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div class="my-20 tft_section px-10">
|
||||
<div v-if="main" class="text-center mx-2">
|
||||
<h2 class="text-8xl uppercase leading-none font-heading my-0">{{ main.title }}</h2>
|
||||
<h2 v-if="main.subtitle" class="text-8xl uppercase leading-none font-heading mt-0">{{ main.subtitle }}</h2>
|
||||
<div
|
||||
class="my-10 text-2xl mx-auto text-gray-800 sm:mt-4 tft_subtitle"
|
||||
v-html="main.content"
|
||||
></div>
|
||||
</div>
|
||||
<VueSlickCarousel v-bind="settings">
|
||||
<div
|
||||
class="px-2"
|
||||
v-for="(slide, index) in slides"
|
||||
:key="`${slide}-${index}`"
|
||||
>
|
||||
<img :src="img(slide.img)" class="h-100" />
|
||||
</div>
|
||||
</VueSlickCarousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "vue-slick-carousel/dist/vue-slick-carousel.css";
|
||||
export default {
|
||||
props: ["main", "slides"],
|
||||
data() {
|
||||
return {
|
||||
settings: {
|
||||
arrows: true,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
initialSlide: 2,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
img(slide) {
|
||||
if (!slide) return "";
|
||||
if (slide.src) return slide.src;
|
||||
return slide;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.slick-prev:before,
|
||||
.slick-next:before {
|
||||
color: black !important;
|
||||
z-index: 999999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,7 @@
|
||||
<template>
|
||||
<div class="left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
|
||||
<div class="fixed top-16 left-0 z-50 mb-5 h-16 bg-gray-100 w-full">
|
||||
<header
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
flex-wrap
|
||||
container
|
||||
mx-auto
|
||||
pt-1
|
||||
pb-0
|
||||
sm:px-0
|
||||
transition-all transition-500
|
||||
"
|
||||
class="flex items-center flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500"
|
||||
>
|
||||
<div class="flex items-center justify-between px-4 sm:p-0">
|
||||
<div class="inline-flex items-center flex-shrink-0">
|
||||
@@ -19,72 +9,35 @@
|
||||
>filter:</span
|
||||
>
|
||||
</div>
|
||||
<!-- <div class="sm:block md:hidden">
|
||||
<div class="sm:block md:hidden">
|
||||
<ul class="list-none inline-flex justify-center md:justify-end">
|
||||
<li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
:class="isOpen ? 'block' : 'hidden'"
|
||||
class="
|
||||
inline-flex
|
||||
md:order-2
|
||||
px-2
|
||||
pt-2
|
||||
pb-4
|
||||
sm:flex
|
||||
sm:p-0
|
||||
bg-transparent
|
||||
"
|
||||
class="inline-flex md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
|
||||
>
|
||||
<ul
|
||||
class="
|
||||
list-none
|
||||
sm:flex
|
||||
justify-left
|
||||
capitalize
|
||||
transition-all transition-500
|
||||
"
|
||||
class="list-none sm:flex justify-left capitalize transition-all transition-500"
|
||||
>
|
||||
<!-- Tags -->
|
||||
<li class="pt-2 mx-5">
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(0)"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
>
|
||||
<span class="capitalize">{{
|
||||
selected.replace(/_/g, " ")
|
||||
}}</span>
|
||||
<span class="capitalize">{{ selected }}</span>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
:class="{
|
||||
'rotate-180': active == 0,
|
||||
'rotate-0': active == !0,
|
||||
'rotate-0': !active == 0,
|
||||
}"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -94,7 +47,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="open"
|
||||
v-if="active == 0"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
@@ -102,59 +55,19 @@
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="
|
||||
w-64
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
class="w-64 max-h-10 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
|
||||
>
|
||||
<a
|
||||
v-for="tag in tags"
|
||||
:key="tag.path"
|
||||
class="
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
mt-2
|
||||
text-sm
|
||||
font-semibold
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
:href="$url(tag.path)"
|
||||
@click="open = false"
|
||||
>{{ tag.title.replace(/_/g, " ") }}</a
|
||||
@click.self="open = false"
|
||||
>{{ tag.title }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -162,11 +75,11 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- <div class="hidden md:ml-auto md:inline-block md:order-last">
|
||||
<div class="hidden md:ml-auto md:inline-block md:order-last">
|
||||
<ul class="list-none inline-flex justify-center md:justify-end">
|
||||
<li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
@@ -191,22 +104,21 @@ export default {
|
||||
active: null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
setActive(index) {
|
||||
this.active = !this.active;
|
||||
this.active = index;
|
||||
this.open = !this.open;
|
||||
},
|
||||
close(e) {
|
||||
if (!this.$el.contains(e.target)) {
|
||||
this.open = false;
|
||||
this.active = !this.active;
|
||||
}
|
||||
},
|
||||
resetAll() {
|
||||
this.$emit("resetAll", true);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.addEventListener("click", this.close);
|
||||
},
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<div class="py-10 lg:flex lg:justify-center flex flex-col">
|
||||
<div class="lg:flex lg:rounded-lg">
|
||||
<div class="lg:w-1/2">
|
||||
<div class="aspect-w-16 aspect-h-9">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
:src="card.video"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 lg:w-1/2">
|
||||
<h2
|
||||
class="text-4xl leading-tight my-0 font-bold font-heading uppercase"
|
||||
>
|
||||
{{ card.title }}
|
||||
</h2>
|
||||
<div class="mt-2 text-gray-700" v-html="card.content"></div>
|
||||
<div class="mx-auto mt-4 mb-6" v-if="card.btn">
|
||||
<a
|
||||
v-if="card.link.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="card.link"
|
||||
target="_blank"
|
||||
>{{ card.btn }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="card.link"
|
||||
>{{ card.btn }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["card"],
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.video_bg {
|
||||
background-color: #ebfefd;
|
||||
}
|
||||
</style>
|
||||
@@ -1,557 +1,49 @@
|
||||
<template>
|
||||
<section class="pb-10 px-4 bg-cover text-center">
|
||||
<!-- why -->
|
||||
<div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
|
||||
<h2
|
||||
v-if="cta.title"
|
||||
class="
|
||||
text-4xl text-center
|
||||
uppercase
|
||||
mb-2
|
||||
leading-none
|
||||
font-light font-heading
|
||||
"
|
||||
>
|
||||
{{ cta.title }}
|
||||
</h2>
|
||||
<span
|
||||
class="
|
||||
text-center
|
||||
uppercase
|
||||
leading-none
|
||||
text-4xl text-gray-800
|
||||
font-black font-heading
|
||||
"
|
||||
>
|
||||
{{ cta.slogan }}
|
||||
</span>
|
||||
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<g-link
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:to="cta.link"
|
||||
>{{ cta.button }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- home -->
|
||||
|
||||
<div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'home'">
|
||||
<h2
|
||||
v-if="cta.title"
|
||||
class="text-3xl mb-2 uppercase leading-tight font-semibold font-heading"
|
||||
>
|
||||
{{ cta.title }}
|
||||
</h2>
|
||||
<div v-html="cta.content" class="mt-6 mb-8 text-gray-800"></div>
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="
|
||||
inline-block
|
||||
cursor-pointer
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button && cta.link.includes('http')"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-else
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button2 && cta.link2.includes('http')"
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-else
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button3 && cta.link3.includes('http')"
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-else
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button4 && cta.link4.includes('http')"
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-else
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- tft -->
|
||||
<div
|
||||
class="w-full lg:max-w-4xl mx-auto lg:mt-20 lg:px-16 lg:py-10 tft_section"
|
||||
v-else-if="id == 'tft'"
|
||||
>
|
||||
<h2
|
||||
v-if="cta.title"
|
||||
class="
|
||||
lg:max-w-lg
|
||||
text-8xl
|
||||
mb-6
|
||||
mt-20
|
||||
leading-none
|
||||
font-heading
|
||||
mx-auto
|
||||
"
|
||||
>
|
||||
<section class="pb-20 px-4 bg-cover text-center bg-hero">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div class="w-full max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl leading-tight font-semibold font-heading">
|
||||
{{ cta.title }}
|
||||
</h2>
|
||||
<div
|
||||
v-html="cta.content"
|
||||
class="
|
||||
mt-6
|
||||
mb-8
|
||||
text-2xl
|
||||
leading-tight
|
||||
tracking-wide
|
||||
tft_subtitle
|
||||
text-gray-800
|
||||
"
|
||||
class="mt-6 mb-8 text-gray-700 leading-relaxed"
|
||||
></div>
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
>
|
||||
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
v-if="cta.button4"
|
||||
:to="cta.link4"
|
||||
>{{ cta.button4 }}</g-link
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-7xl mx-auto" v-else>
|
||||
<h2
|
||||
v-if="cta.title"
|
||||
class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
|
||||
>
|
||||
{{ cta.title }}
|
||||
</h2>
|
||||
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="
|
||||
inline-block
|
||||
cursor-pointer
|
||||
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
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
<g-link
|
||||
class="inline-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"
|
||||
v-if="cta.button"
|
||||
:to="cta.link"
|
||||
>{{ cta.button }}</g-link
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="inline-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"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="inline-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"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
>
|
||||
|
||||
|
||||
</div>
|
||||
<Modal
|
||||
:link="cta.video_link"
|
||||
:showModal="showModal"
|
||||
@onClose="handleClose"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from "~/components/custom/Modal.vue";
|
||||
|
||||
export default {
|
||||
props: ["cta", "id"],
|
||||
data() {
|
||||
return {
|
||||
showModal: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
methods: {
|
||||
toggleModal() {
|
||||
this.showModal = !this.showModal;
|
||||
},
|
||||
handleClose() {
|
||||
this.showModal = false;
|
||||
},
|
||||
},
|
||||
props: ["cta"],
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.bg-hero {
|
||||
background-image: url("~@/assets/images/bottom_cta.png");
|
||||
}
|
||||
</style>
|
||||
@@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<section class="px-4 bg-cover text-center">
|
||||
<div class="w-full mx-auto tft_section2">
|
||||
<h2 class="text-9xl mb-2 leading-none font-heading mx-auto">
|
||||
{{ cta.title1 }}
|
||||
<br />
|
||||
{{ cta.title2 }}
|
||||
</h2>
|
||||
<div
|
||||
v-html="cta.content"
|
||||
class="text-gray-800 mb-4 text-2xl tft_subtitle"
|
||||
></div>
|
||||
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["cta"],
|
||||
};
|
||||
</script>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<section class="pb-20 px-4 bg-cover bg-hero text-center">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div class="w-full max-w-7xl mx-auto">
|
||||
<h3 class="uppercase">{{ cta.subtitle }}</h3>
|
||||
<h2 class="text-6xl mb-6 leading-none font-extrabold font-heading uppercase">
|
||||
<span class="text-blue-600">{{ cta.slogan }}</span
|
||||
> {{ cta.title1 }}
|
||||
<br>
|
||||
{{ cta.title2 }}
|
||||
</h2>
|
||||
<div
|
||||
v-html="cta.content"
|
||||
class="mt-6 mb-8 text-gray-700 leading-relaxed"
|
||||
></div>
|
||||
|
||||
|
||||
<a
|
||||
class="inline-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"
|
||||
target="_blank"
|
||||
v-if="cta.button"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<g-link
|
||||
class="inline-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"
|
||||
v-if="cta.button2"
|
||||
:to="cta.link2"
|
||||
>{{ cta.button2 }}</g-link
|
||||
>
|
||||
<g-link
|
||||
class="inline-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"
|
||||
v-if="cta.button3"
|
||||
:to="cta.link3"
|
||||
>{{ cta.button3 }}</g-link
|
||||
>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["cta"],
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.bg-hero {
|
||||
background-image: url("~@/assets/images/bg2.png");
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +1,10 @@
|
||||
<template>
|
||||
<section class="py-24 px-4 text-center">
|
||||
<section class="py-12 px-4 text-center">
|
||||
<h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
|
||||
{{ main.title }}
|
||||
</h2>
|
||||
<p class="text-gray-600">{{ main.description }}</p>
|
||||
<div class="flex flex-wrap -mx-8 mt-12 mb-2" v-if="id == 'home'">
|
||||
<div
|
||||
class="lg:w-1/3 px-6 mb-10"
|
||||
v-for="(section, index) in sections"
|
||||
:key="index"
|
||||
>
|
||||
<!-- <g-link :to="section.link"> -->
|
||||
<g-image
|
||||
class="mx-auto"
|
||||
:src="section.svg.src"
|
||||
:alt="section.title"
|
||||
/>
|
||||
<div class="part py-1">
|
||||
<h3 class="text-2xl font-semibold font-heading">
|
||||
<!-- <span
|
||||
class="inline-flex items-center justify-center h-12 w-12 mr-2 border rounded-full"
|
||||
>{{ index + 1 }}</span
|
||||
> -->
|
||||
{{ section.title }}
|
||||
</h3>
|
||||
<div
|
||||
class="mb-4 px-5 text-black-700"
|
||||
v-html="section.content"
|
||||
></div>
|
||||
</div>
|
||||
<!-- </g-link> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center -mx-8 mt-12 mb-2" v-else>
|
||||
<div class="flex flex-wrap items-center -mx-8 mt-12 mb-2">
|
||||
<div
|
||||
class="lg:w-1/3 px-6 mb-2"
|
||||
v-for="(section, index) in sections"
|
||||
@@ -54,20 +25,12 @@
|
||||
<div class="text-gray-700" v-html="section.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="main.button">
|
||||
<a
|
||||
v-if="main.link.includes('http')"
|
||||
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>
|
||||
<g-link
|
||||
v-if="main.button"
|
||||
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
|
||||
:to="main.link"
|
||||
>{{ main.button }}</g-link
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
@@ -75,15 +38,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["main", "sections", "id"],
|
||||
props: ["main", "sections"],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.part {
|
||||
height: 160px;
|
||||
background-color: #66efc5;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header section banner" v-if="header">
|
||||
<div class="center">
|
||||
<h1 class="text-8xl">
|
||||
<strong>{{ title }}</strong>
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="back"
|
||||
:style="{ 'background-image': 'url(' + image.src + ')' }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<g-link :to="link" class="section banner" v-else>
|
||||
<div class="center">
|
||||
<h2 class="h1">
|
||||
<strong>{{ title }}</strong>
|
||||
<font-awesome :icon="['fas', 'long-arrow-alt-right']" />
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="back"
|
||||
:style="{ 'background-image': 'url(' + image.src + ')' }"
|
||||
></div>
|
||||
</g-link>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["link", "title", "image", "header"],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.banner {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 120px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: #fff !important;
|
||||
letter-spacing: 0.5px;
|
||||
overflow: hidden;
|
||||
background: #00838d;
|
||||
transition: 1.5s;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: auto;
|
||||
background: none;
|
||||
padding: 200px 0;
|
||||
}
|
||||
|
||||
.banner h2,
|
||||
.header h1 {
|
||||
margin: auto;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
transition: 0.3s;
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #000;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.banner h2 svg {
|
||||
font-size: 40px;
|
||||
margin-left: 15px;
|
||||
position: absolute;
|
||||
top: 55%;
|
||||
transform: translateY(-50%) scale(0.5);
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.banner .back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
filter: grayscale(1) contrast(1.4);
|
||||
opacity: 0.25;
|
||||
transition: 1.5s;
|
||||
}
|
||||
|
||||
.header .back {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
background-position: center;
|
||||
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.banner:hover {
|
||||
background: #4b3a92;
|
||||
}
|
||||
|
||||
.header:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.banner:hover h2 svg {
|
||||
transform: translateY(-50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.banner:hover h2 {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.header:hover h1 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.banner:hover .back {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.header:hover .back {
|
||||
transform: none;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.banner h2 {
|
||||
font: 600 7vw/10vw;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.banner h2 svg {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.banner,
|
||||
.header {
|
||||
padding: 80px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,171 +1,8 @@
|
||||
<template>
|
||||
<section class="py-12 px-4 text-center" v-if="id == 'home'">
|
||||
<h2 class="text-4xl leading-tight mb-6 font-bold font-heading uppercase">
|
||||
<section class="py-12 px-4">
|
||||
<h2 class="text-4xl text-center mb-12 font-semibold font-heading">
|
||||
{{ main.title }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="main.content"
|
||||
class="mb-6 text-gray-700"
|
||||
v-html="main.content"
|
||||
></div>
|
||||
<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>
|
||||
<h5 class="capitalize">
|
||||
{{ feature.title }}
|
||||
</h5>
|
||||
<div v-html="feature.content" class="text-gray-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-20" v-if="main.btn">
|
||||
<a
|
||||
v-if="main.link.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link"
|
||||
target="_blank"
|
||||
>{{ main.btn }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link"
|
||||
>{{ main.btn }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="main.link2.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link2"
|
||||
target="_blank"
|
||||
>{{ main.btn2 }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link2"
|
||||
>{{ main.btn2 }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="main.link3.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link3"
|
||||
target="_blank"
|
||||
>{{ main.btn3 }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link3"
|
||||
>{{ main.btn3 }}
|
||||
</a>
|
||||
<!-- <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"
|
||||
@@ -173,34 +10,23 @@
|
||||
class="lg:w-1/2 px-4 mb-6 text-center"
|
||||
>
|
||||
<g-image
|
||||
class="w-1/3 mx-auto"
|
||||
class="w-10 h-10 mx-auto"
|
||||
v-if="feature.svg"
|
||||
:src="feature.svg.src"
|
||||
:alt="feature.svg"
|
||||
></g-image>
|
||||
<h2 class="text-3xl mt-5 mb-3 font-normal font-heading">
|
||||
<h3 class="text-xl my-3 font-semibold font-heading">
|
||||
{{ feature.title }}
|
||||
</h2>
|
||||
</h3>
|
||||
<div
|
||||
v-html="feature.content"
|
||||
class="text-lg text-gray-700 leading-relaxed"
|
||||
class="text-sm text-gray-700 leading-relaxed"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center" v-if="main.btn">
|
||||
<g-link
|
||||
class="
|
||||
bg-gray-900
|
||||
learn-button
|
||||
hover:bg-gray-700
|
||||
text-gray-100
|
||||
px-5
|
||||
py-3
|
||||
mr-3
|
||||
font-semibold
|
||||
rounded
|
||||
shadow
|
||||
"
|
||||
class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
|
||||
:to="main.link"
|
||||
>{{ main.btn }}</g-link
|
||||
>
|
||||
@@ -211,36 +37,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["id", "main", "features"],
|
||||
props: ["main", "features"],
|
||||
};
|
||||
</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>
|
||||
</script>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section class="py-8 px-4">
|
||||
<div class="flex flex-wrap items-center mt-8 mx-2">
|
||||
<div class="flex flex-wrap items-center -mx-4">
|
||||
<div class="w-full lg:w-4/6 px-4 mb-8 lg:mb-0 text-center lg:text-left">
|
||||
<h2 class="text-xl font-semibold font-heading">
|
||||
{{ signup.title }}
|
||||
@@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<div class="w-full lg:w-2/6 px-4 text-center">
|
||||
<g-link
|
||||
class="inline-block bg-green-500 text-sm text-white learn-button hover:bg-green-600 px-8 py-2 mr-2 my-0 rounded shadow rounded-full active--exact active"
|
||||
class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
|
||||
:to="signup.link1"
|
||||
>{{ signup.button1 }}</g-link
|
||||
><g-link
|
||||
|
||||
@@ -1,51 +1,22 @@
|
||||
<template>
|
||||
<section class="py-12 px-4 text-center">
|
||||
<div class="w-full mx-auto">
|
||||
<div class="w-full max-w-2xl mx-auto">
|
||||
<span class="text-sm font-semibold">{{ header.title }}</span>
|
||||
<h2 class="text-4xl mt-2 mb-6 leading-tight font-heading">
|
||||
{{ header.subtitle }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="header.content"
|
||||
v-html="header.content"
|
||||
class="post-content mb-8 text-gray-700 leading-relaxed"
|
||||
class="mb-8 text-gray-700 leading-relaxed"
|
||||
></div>
|
||||
<div>
|
||||
<g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-green-500
|
||||
text-sm text-white
|
||||
learn-button
|
||||
hover:bg-green-600
|
||||
px-8
|
||||
py-2
|
||||
mr-2
|
||||
my-0
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
active--exact active
|
||||
"
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 my-2 rounded shadow rounded-full"
|
||||
v-if="header.btn1"
|
||||
:to="header.link1"
|
||||
>{{ header.btn1 }}</g-link
|
||||
><g-link
|
||||
class="
|
||||
inline-block
|
||||
bg-teal-300
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-teal-400
|
||||
text-gray-900
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
my-2
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
class="inline-block bg-teal-300 text-sm learn-button hover:bg-teal-400 text-gray-900 px-12 py-2 mr-3 my-2 rounded shadow rounded-full"
|
||||
v-if="header.btn2"
|
||||
:to="header.link2"
|
||||
>{{ header.btn2 }}</g-link
|
||||
@@ -60,3 +31,6 @@ export default {
|
||||
props: ["header"],
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div class="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div class="absolute inset-0">
|
||||
<div class="bg-white h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="text-center">
|
||||
<h2
|
||||
class="
|
||||
text-4xl
|
||||
leading-tight
|
||||
mb-6
|
||||
font-bold font-heading
|
||||
uppercase
|
||||
sm:text-4xl
|
||||
sm:leading-10
|
||||
"
|
||||
>
|
||||
{{ main.title }}
|
||||
</h2>
|
||||
<div
|
||||
class="mt-3 max-w-2xl mx-auto text-gray-700 sm:mt-4"
|
||||
v-html="main.content"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col rounded-lg shadow-lg overflow-hidden"
|
||||
v-for="blog in blogs"
|
||||
:key="blog.id"
|
||||
>
|
||||
<div class="flex-shrink-0">
|
||||
<g-image
|
||||
class="h-48 w-full object-cover"
|
||||
:src="img(blog.image)"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<!-- <p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
<a :href="blog.tagUrl" class="hover:underline">
|
||||
{{ blog.tag }}
|
||||
</a>
|
||||
</p> -->
|
||||
<a :href="path(blog)" class="block">
|
||||
<h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
|
||||
{{ blog.title }}
|
||||
</h3>
|
||||
<div
|
||||
v-html="blog.excerpt"
|
||||
class="mt-3 text-base leading-6 text-gray-500"
|
||||
></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<a :href="blog.autherUrl">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="img(blog.authorImg)"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm leading-5 font-medium text-gray-900">
|
||||
<a :href="blog.autherUrl" class="hover:underline">
|
||||
{{ blog.author }}
|
||||
</a>
|
||||
</p>
|
||||
<!-- <div class="flex text-sm leading-5 text-gray-500">
|
||||
<time :datetime="blog.created"> {{ blog.created }} </time>
|
||||
<span class="mx-1"> · </span>
|
||||
<span> 6 min read </span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["main", "blogs"],
|
||||
methods: {
|
||||
path(blog) {
|
||||
if (this.pathPrefix) return this.pathPrefix + "/" + blog.id;
|
||||
return blog.path;
|
||||
},
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,191 +1,15 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="max-w-screen-xl mx-auto py-10">
|
||||
<!-- token -->
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16">
|
||||
<div
|
||||
v-if="id == 'token'"
|
||||
class="
|
||||
brandpanel
|
||||
rounded-lg
|
||||
shadow-xl
|
||||
overflow-hidden
|
||||
lg:grid lg:grid-cols-2
|
||||
lg:gap-4
|
||||
"
|
||||
class="brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
|
||||
>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<g-image
|
||||
class="
|
||||
absolute
|
||||
brandpanel
|
||||
inset-0
|
||||
w-full
|
||||
h-full
|
||||
translate-x-0 translate-y-center
|
||||
rounded-md
|
||||
object-fill object-left-top
|
||||
sm:translate-x-0
|
||||
lg:translate-y-20
|
||||
"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
pt-10
|
||||
pb-10
|
||||
px-6
|
||||
sm:pt-16
|
||||
sm:px-10
|
||||
lg:py-16
|
||||
lg:pr-0
|
||||
xl:py-20
|
||||
xl:px-15
|
||||
"
|
||||
class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
class="
|
||||
text-4xl
|
||||
mb-2
|
||||
uppercase
|
||||
leading-tight
|
||||
font-semibold 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-gray-600" v-html="brand.content"></div>
|
||||
<a
|
||||
v-if="brand.btnTxt"
|
||||
target="_blank"
|
||||
:href="brand.sourceUrl"
|
||||
class="
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-white
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- why -->
|
||||
<div
|
||||
v-else-if="id == 'why'"
|
||||
class="
|
||||
whybrand
|
||||
brandpanel
|
||||
rounded-lg
|
||||
shadow-xl
|
||||
overflow-hidden
|
||||
lg:grid lg:grid-cols-2
|
||||
lg:gap-4
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
pt-10
|
||||
pb-12
|
||||
px-6
|
||||
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">
|
||||
<h2
|
||||
class="
|
||||
text-4xl
|
||||
mb-2
|
||||
uppercase
|
||||
leading-tight
|
||||
font-semibold 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 mx-4 text-black" v-html="brand.content"></div>
|
||||
<a
|
||||
:href="brand.sourceUrl"
|
||||
class="
|
||||
bg-gray-700
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-57EEF8-400
|
||||
text-white
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<g-image
|
||||
class="
|
||||
absolute
|
||||
brandpanel
|
||||
inset-0
|
||||
w-full
|
||||
h-full
|
||||
transform
|
||||
translate-x-0 translate-y-6
|
||||
rounded-md
|
||||
object-fill object-left-top
|
||||
sm:translate-x-0
|
||||
lg:translate-y-20
|
||||
"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- home -->
|
||||
<div v-else-if="id == 'home'" class="brandpanel lg:grid lg:grid-cols-2">
|
||||
<div
|
||||
class="
|
||||
py-12
|
||||
px-6
|
||||
sm:pt-16
|
||||
sm:px-16
|
||||
lg:py-16
|
||||
lg:pr-0
|
||||
xl:py-20
|
||||
xl:px-15
|
||||
"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
class="
|
||||
text-4xl
|
||||
leading-tight
|
||||
mb-6
|
||||
font-bold font-heading
|
||||
uppercase
|
||||
"
|
||||
class="text-3xl leading-9 font-extrabold text-white sm:text-3xl sm:leading-10"
|
||||
>
|
||||
<span class="block">{{ brand.title }}</span>
|
||||
<span class="block" v-if="brand.subtitle">{{
|
||||
@@ -193,218 +17,19 @@
|
||||
}}</span>
|
||||
</h2>
|
||||
<div
|
||||
class="mt-4 mx-4 mb-10 text-black"
|
||||
class="py-6 mt-4 text-lg leading-6 text-white"
|
||||
v-html="brand.content"
|
||||
></div>
|
||||
<a
|
||||
v-if="brand.sourceUrl.includes('http')"
|
||||
:href="brand.sourceUrl"
|
||||
target="_blank"
|
||||
class="
|
||||
bg-teal-300
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-57EEF8-400
|
||||
text-gray-900
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="brand.sourceUrl"
|
||||
class="
|
||||
bg-teal-300
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-57EEF8-400
|
||||
text-gray-900
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative -mt-6">
|
||||
<g-image
|
||||
class="relative brandpanel inset-0 transform rounded-md object-fill"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tft -->
|
||||
<div
|
||||
v-else-if="id == 'tft' && !diveInto"
|
||||
class="flex flex-wrap text-center tft_section lg:text-left "
|
||||
|
||||
>
|
||||
<div class="lg:w-1/2 px-2 self-center">
|
||||
<g-image
|
||||
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-center
|
||||
"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
class="
|
||||
text-6xl mb-6 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-gray-900 text-2xl leading-tight tft_subtitle tracking-wide" v-html="brand.content"></div>
|
||||
<a
|
||||
v-if="brand.btnTxt"
|
||||
target="_blank"
|
||||
:href="brand.sourceUrl"
|
||||
class="
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-white
|
||||
px-12
|
||||
py-2
|
||||
mr-3
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="id == 'tft' && diveInto"
|
||||
class="flex flex-wrap tft_section lg:text-left lg:pt-16 px-4 "
|
||||
|
||||
>
|
||||
<div class="lg:w-1/2 px-2 self-center">
|
||||
<g-image
|
||||
|
||||
: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="
|
||||
text-6xl 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="pb-6 text-gray-900 text-2xl leading-tight tft_subtitle tracking-wide" v-html="brand.content"></div>
|
||||
<a
|
||||
v-if="brand.btnTxt"
|
||||
target="_blank"
|
||||
:href="brand.sourceUrl"
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-widev
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="
|
||||
brandpanel
|
||||
bg-gray-900
|
||||
rounded-lg
|
||||
shadow-xl
|
||||
overflow-hidden
|
||||
lg:grid lg:grid-cols-2
|
||||
lg:gap-4
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
pt-10
|
||||
pb-12
|
||||
px-6
|
||||
sm:pt-16
|
||||
sm:px-16
|
||||
lg:py-16
|
||||
lg:pr-0
|
||||
xl:py-20
|
||||
xl:px-15
|
||||
"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
class="text-3xl leading-9 font-extrabold text-white sm:leading-10"
|
||||
>
|
||||
<span class="block">{{ brand.title }}</span>
|
||||
<span class="block" v-if="brand.subtitle">{{
|
||||
brand.subtitle
|
||||
}}</span>
|
||||
</h2>
|
||||
<div class="py-6 mt-4 mx-4 text-white" v-html="brand.content"></div>
|
||||
<!-- <a
|
||||
:href="brand.sourceUrl"
|
||||
<g-link
|
||||
:to="brand.sourceUrl"
|
||||
class="bg-teal-300 text-sm learn-button hover:bg-57EEF8-400 text-gray-900 px-12 py-2 mr-3 rounded shadow rounded-full"
|
||||
>{{ brand.btnTxt }}</a
|
||||
> -->
|
||||
>{{ brand.btnTxt }}</g-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<g-image
|
||||
class="
|
||||
absolute
|
||||
brandpanel
|
||||
inset-0
|
||||
w-full
|
||||
h-full
|
||||
transform
|
||||
translate-x-0 translate-y-6
|
||||
rounded-md
|
||||
object-fill object-left-top
|
||||
sm:translate-x-0
|
||||
lg:translate-y-20
|
||||
"
|
||||
class="absolute brandpanel inset-0 w-full h-full transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
@@ -416,7 +41,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["brand", "id" , "diveInto"],
|
||||
props: ["brand"],
|
||||
computed: {
|
||||
image() {
|
||||
return this.brand.image.src
|
||||
@@ -425,10 +50,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.whybrand {
|
||||
background-image: linear-gradient(#c2aeef, #82f3fe);
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="max-w-screen-xl mx-auto py-2">
|
||||
<div
|
||||
class="brandpanel bg-white rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
|
||||
>
|
||||
<div
|
||||
class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-10"
|
||||
>
|
||||
<div class="lg:self-center">
|
||||
<h2
|
||||
class="text-4xl mb-2 uppercase leading-tight font-semibold 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-gray-600" v-html="brand.content"></div>
|
||||
<a
|
||||
v-if="brand.sourceUrl.includes('http')"
|
||||
target="_blank"
|
||||
:href="brand.sourceUrl"
|
||||
class="inline-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"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="brand.sourceUrl"
|
||||
class="inline-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"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
<a
|
||||
v-if="brand.sourceUrl2.includes('http')"
|
||||
target="_blank"
|
||||
:href="brand.sourceUrl2"
|
||||
class="inline-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"
|
||||
>{{ brand.btnTxt2 }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="brand.sourceUrl2"
|
||||
class="inline-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"
|
||||
>{{ brand.btnTxt2 }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<g-image
|
||||
class="absolute brandpanel inset-0 w-full h-full transform translate-x-0 translate-y-6 rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
|
||||
:src="image"
|
||||
:alt="brand.title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["brand"],
|
||||
computed: {
|
||||
image() {
|
||||
return this.brand.image.src
|
||||
? this.brand.image.src
|
||||
: require(`!!assets-loader!@images/brandPanel/${this.brand.image}`);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -5,7 +5,7 @@
|
||||
<template>
|
||||
<footer class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div class="xl:grid xl:grid-cols-4 xl:gap-2">
|
||||
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
|
||||
<div class="space-y-8 xl:col-span-1">
|
||||
<g-image
|
||||
class="h-10"
|
||||
@@ -21,7 +21,7 @@
|
||||
v-else
|
||||
/>
|
||||
|
||||
<p class="text-gray-500 font-bold text-base leading-6">
|
||||
<p class="text-gray-500 text-base leading-6">
|
||||
{{ record.description }}
|
||||
</p>
|
||||
<div class="flex space-x-6">
|
||||
@@ -98,30 +98,6 @@
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
v-if="record.telegram != '#'"
|
||||
:href="record.telegram"
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span class="sr-only">telegram</span>
|
||||
<!-- <svg
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg> -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
v-if="record.dribbble != '#'"
|
||||
@@ -142,43 +118,21 @@
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
href="javascript:;"
|
||||
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="far"
|
||||
data-icon="envelope"
|
||||
class="h-5 w-5 mt-0"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-12 grid md:grid-cols-4 sm:grid-cols-2 xl:mt-0 xl:col-span-3"
|
||||
class="mt-12 grid md:grid-cols-4 sm:grid-cols-2 xl:mt-0 xl:col-span-2"
|
||||
>
|
||||
<!-- class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2" -->
|
||||
|
||||
<div
|
||||
v-for="footerLink in record.items"
|
||||
:key="footerLink.title"
|
||||
class=""
|
||||
class="md:grid md:grid-cols-3"
|
||||
>
|
||||
<div>
|
||||
<h4
|
||||
class="text-sm leading-5 font-semibold text-gray-600 tracking-wider uppercase"
|
||||
class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase"
|
||||
>
|
||||
{{ footerLink.title }}
|
||||
</h4>
|
||||
@@ -188,14 +142,14 @@
|
||||
v-if="item.link.includes('http')"
|
||||
:href="item.link"
|
||||
target="_blank"
|
||||
class="text-base leading-5 text-gray-500 hover:text-gray-900"
|
||||
class="text-base leading-6 text-gray-500 hover:text-gray-900"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
:href="item.link"
|
||||
class="text-base leading-5 text-gray-500 hover:text-gray-900"
|
||||
class="text-base leading-6 text-gray-500 hover:text-gray-900"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
@@ -208,24 +162,6 @@
|
||||
<div class="mt-12 border-t border-gray-200 pt-8">
|
||||
<p class="text-base leading-6 text-gray-400 xl:text-center">
|
||||
© 2021 ThreeFold, All rights reserved.
|
||||
<a
|
||||
class="leading-6 text-gray-500 hover:text-gray-900"
|
||||
target="_blank"
|
||||
href="https://library.threefold.me/info/legal#/legal__terms_conditions_websites"
|
||||
>Terms & Conditions |
|
||||
</a>
|
||||
<a
|
||||
class="leading-6 text-gray-500 hover:text-gray-900"
|
||||
target="_blank"
|
||||
href="https://library.threefold.me/info/legal#/legal__privacypolicy"
|
||||
>Privacy Policy |
|
||||
</a>
|
||||
<a
|
||||
class="leading-6 text-gray-500 hover:text-gray-900"
|
||||
target="_blank"
|
||||
href="#"
|
||||
>Impressum</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,5 +177,5 @@ export default {
|
||||
<style scoped>
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
};
|
||||
</style>
|
||||
|
||||
@@ -1,298 +1,37 @@
|
||||
<template>
|
||||
<section class="py-15 mb-10 px-4">
|
||||
<div
|
||||
class="flex flex-wrap text-center items-center pb-20 lg:text-left -mx-2"
|
||||
v-if="id == 'why'"
|
||||
>
|
||||
<div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
|
||||
<div class="lg:w-1/2 px-2 lg:pr-20 order-1 lg:order-none">
|
||||
<h1
|
||||
class="
|
||||
flex
|
||||
text-center
|
||||
uppercase
|
||||
mb-6
|
||||
mt-10
|
||||
leading-none
|
||||
text-5xl
|
||||
font-light font-heading
|
||||
"
|
||||
>
|
||||
<section class="py-12 px-4">
|
||||
<div class="flex flex-wrap items-center text-center lg:text-left -mx-2">
|
||||
<div class="lg:w-1/2 px-2 lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none">
|
||||
<h2 class="text-8xl mb-6 leading-tight font-semibold font-heading">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<span
|
||||
class="
|
||||
flex
|
||||
text-center
|
||||
uppercase
|
||||
mb-6
|
||||
leading-none
|
||||
text-6xl
|
||||
font-black font-heading
|
||||
"
|
||||
>
|
||||
{{ slogan }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="mb-8 text-center text-md mx-10 text-gray-600"
|
||||
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 items-center lg:text-left lg:mt-4 -mx-2"
|
||||
v-else-if="id == 'token'"
|
||||
>
|
||||
<div class="lg:w-1/2 px-2 lg:pr-10 lg:mt-10 order-1 lg:order-none">
|
||||
<h1
|
||||
v-if="id == 'token'"
|
||||
class="
|
||||
text-center
|
||||
uppercase
|
||||
mb-6
|
||||
mt-10
|
||||
leading-none
|
||||
text-4xl
|
||||
font-light font-heading
|
||||
"
|
||||
>
|
||||
{{ title }} <br />
|
||||
<span
|
||||
class="
|
||||
text-center
|
||||
uppercase
|
||||
mb-6
|
||||
leading-none
|
||||
text-4xl
|
||||
font-black font-heading
|
||||
"
|
||||
>{{ slogan }}</span
|
||||
>
|
||||
</h1>
|
||||
<div
|
||||
class="mb-8 text-center text-gray-600 leading-relaxed"
|
||||
v-html="excerpt"
|
||||
></div>
|
||||
<div v-if="button" class="block text-center">
|
||||
<a
|
||||
v-if="link.includes('http')"
|
||||
target="_blank"
|
||||
class="
|
||||
bg-blue-900
|
||||
text-md
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="link"
|
||||
>{{ button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
bg-blue-900
|
||||
text-md
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="link"
|
||||
>{{ button }}</a
|
||||
>
|
||||
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
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">
|
||||
<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 v-if="button">
|
||||
<a
|
||||
v-if="link.includes('http')"
|
||||
target="_blank"
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
:href="link"
|
||||
>{{ button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
:href="link"
|
||||
>{{ button }}</a
|
||||
>
|
||||
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/2 px-2 self-center">
|
||||
<g-image :src="img" :alt="altImg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
|
||||
v-else
|
||||
>
|
||||
<div class="lg:w-2/5 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
|
||||
<h2 class="text-6xl mb-6 mt-20 leading-none 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">
|
||||
<a
|
||||
v-if="link.includes('http')"
|
||||
target="_blank"
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
class="inline-block py-4 px-8 mr-6 leading-none text-white bg-gray-900 hover:bg-gray-700 font-semibold rounded shadow"
|
||||
:href="link"
|
||||
>{{ button }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-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
|
||||
"
|
||||
class="inline-block py-4 px-8 mr-6 leading-none text-white bg-gray-900 hover:bg-gray-700 font-semibold rounded shadow"
|
||||
:href="link"
|
||||
>{{ button }}</a
|
||||
>
|
||||
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-3/5 px-2 self-center">
|
||||
<g-image :src="img" :alt="altImg" />
|
||||
</div>
|
||||
<div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
"title",
|
||||
"id",
|
||||
"slogan",
|
||||
"excerpt",
|
||||
"altImg",
|
||||
"image",
|
||||
"button",
|
||||
"link",
|
||||
],
|
||||
props: ["title", "excerpt", "altImg", "image", "button", "link"],
|
||||
computed: {
|
||||
img: function () {
|
||||
if (!this.image) return "";
|
||||
@@ -301,5 +40,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
</script>
|
||||
@@ -1,109 +1,30 @@
|
||||
<template>
|
||||
<div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
|
||||
<div
|
||||
v-if="id == 'tft'"
|
||||
class="bg-white lg:mx-8 lg:flex lg:rounded-lg tft_section lg:py-20"
|
||||
>
|
||||
<div class="py-2 px-6 max-w-xl lg:max-w-5xl lg:w-1/2 text-center ">
|
||||
<h2 class="text-8xl mb-6 leading-none font-heading">{{ card.title }}</h2>
|
||||
<div class="mt-4 text-gray-900 text-2xl tft_subtitle tracking-wide" v-html="card.content"></div>
|
||||
<div class="mt-8" v-if="card.button">
|
||||
<a
|
||||
v-if="card.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="card.link"
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="card.link"
|
||||
class="
|
||||
inline-block
|
||||
bg-gray-900
|
||||
text-2xl
|
||||
learn-button
|
||||
hover:bg-gray-800
|
||||
text-gray-100
|
||||
px-16
|
||||
py-1
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
tft_subtitle
|
||||
tracking-wide
|
||||
"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
<div>
|
||||
<div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
|
||||
<div
|
||||
class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"
|
||||
>
|
||||
<div class="lg:w-1/2">
|
||||
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" :style="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-3/4">
|
||||
<div
|
||||
class="h-64 bg-cover lg:rounded-lg lg:h-full"
|
||||
:style="{ 'background-image': 'url(' + img(card.img) + ')' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"
|
||||
>
|
||||
<div class="lg:w-1/2">
|
||||
<div
|
||||
class="h-64 bg-cover lg:rounded-lg lg:h-full"
|
||||
:style="{ 'background-image': 'url(' + img(card.img) + ')' }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
|
||||
<div class="mt-4 text-gray-700" v-html="card.content"></div>
|
||||
<div class="mt-8" v-if="card.button">
|
||||
<a
|
||||
v-if="card.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="card.link"
|
||||
class="
|
||||
bg-gray-900
|
||||
learn-button
|
||||
hover:bg-gray-700
|
||||
text-gray-100
|
||||
px-5
|
||||
py-3
|
||||
font-semibold
|
||||
rounded
|
||||
"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="card.link"
|
||||
class="
|
||||
bg-gray-900
|
||||
learn-button
|
||||
hover:bg-gray-700
|
||||
text-gray-100
|
||||
px-5
|
||||
py-3
|
||||
font-semibold
|
||||
rounded
|
||||
"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
|
||||
<div class="mt-4 text-gray-700" v-html="card.content"></div>
|
||||
<div class="mt-8" v-if="card.button">
|
||||
<a
|
||||
v-if="card.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="card.link"
|
||||
class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="card.link"
|
||||
class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded"
|
||||
>{{ card.button }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,13 +33,14 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["id", "card"],
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
computed: {
|
||||
img: function () {
|
||||
if (this.card.image.src)
|
||||
return "background-image:url(" + this.card.image.src + ")";
|
||||
return this.card.image;
|
||||
},
|
||||
},
|
||||
|
||||
props: ["card"],
|
||||
};
|
||||
</script>
|
||||
@@ -1,294 +1,29 @@
|
||||
<template>
|
||||
<div class="py-0 mb-5 mx-4">
|
||||
<div class="text-center mx-auto my-4" v-if="id == 'why'">
|
||||
<h1 class="text-4xl text-gray-900 font-light sm:text-9xl sm:leading-10">
|
||||
{{ main.title }} <span class="font-extrabold">{{ main.subtitle }}</span>
|
||||
</h1>
|
||||
<div
|
||||
class="mt-3 max-w-2xl mx-auto text-gray-600 sm:mt-4"
|
||||
v-html="main.content"
|
||||
></div>
|
||||
</div>
|
||||
<div class="w-full text-center" v-else>
|
||||
<h2
|
||||
v-if="main !== null && main.title"
|
||||
class="text-4xl font-semibold leading-tight font-heading"
|
||||
>
|
||||
<div class="py-12 mb-5">
|
||||
<div class="w-full text-center">
|
||||
<p v-if="main !== null" class="text-sm tracking-widest text-gray-700">{{ main.subtitle }}</p>
|
||||
<h2 v-if="main !== null" class="text-4xl mt-2 mb-6 font-semibold leading-tight font-heading">
|
||||
{{ main.title }}
|
||||
</h2>
|
||||
<p v-if="main !== null && main.subtitle" class="mb-6 text-gray-600">
|
||||
{{ main.subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- token -->
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
|
||||
v-if="id == 'token'"
|
||||
>
|
||||
<a
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
|
||||
<g-link
|
||||
v-for="(product, idx) in products"
|
||||
target="_blank"
|
||||
:key="idx"
|
||||
:href="product.url"
|
||||
class="m-auto rounded overflow-hidden transition duration-500"
|
||||
>
|
||||
<div class="px-2 py-2">
|
||||
<g-image class="py-4" :src="img(product.image)" />
|
||||
<div class="font-bold text-xl mb-2 uppercase">
|
||||
{{ product.title }}
|
||||
:to="product.url"
|
||||
class="m-auto rounded overflow-hidden transition duration-500"
|
||||
>
|
||||
|
||||
<div class="px-2 py-2">
|
||||
<g-image class="py-4" :src="img(product.image)" />
|
||||
<!-- <div class="font-bold text-xl mb-2">{{ product.title }}</div> -->
|
||||
<p v-html="product.content" class="text-gray-700 text-base"></p>
|
||||
</div>
|
||||
<div v-html="product.content" class="text-gray-600"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- universe -->
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"
|
||||
v-else-if="id == 'universe'"
|
||||
>
|
||||
<div
|
||||
v-for="(product, idx) in products"
|
||||
target="_blank"
|
||||
:key="idx"
|
||||
:href="product.link"
|
||||
class="
|
||||
m-auto
|
||||
rounded
|
||||
overflow-hidden
|
||||
transition
|
||||
duration-500
|
||||
bg-gray-100
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<g-image :src="img(product.image)" />
|
||||
<div class="font-bold text-xl pt-5 mx-4">
|
||||
{{ product.title }}
|
||||
</div>
|
||||
<div v-html="product.content" class="py-2 text-gray-600 mx-4"></div>
|
||||
<div v-if="product.button" class="mb-2 py-5 text-center">
|
||||
<a
|
||||
v-if="product.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="product.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
|
||||
"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="product.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
|
||||
"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- why -->
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"
|
||||
v-else-if="id == 'why'"
|
||||
>
|
||||
<div
|
||||
v-for="(product, idx) in products"
|
||||
target="_blank"
|
||||
:key="idx"
|
||||
:href="product.link"
|
||||
class="m-auto rounded overflow-hidden transition duration-500"
|
||||
>
|
||||
<div>
|
||||
<g-image :src="img(product.image)" />
|
||||
<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-if="product.button" class="product mb-3 py-5 text-center">
|
||||
<a
|
||||
v-if="product.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="product.link"
|
||||
class="
|
||||
bg-gray-800
|
||||
text-sm
|
||||
learn-button
|
||||
border-gray-900
|
||||
text-white
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="product.link"
|
||||
class="
|
||||
bg-gray-800
|
||||
text-sm
|
||||
learn-button
|
||||
border-gray-900
|
||||
text-white
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Support -->
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
|
||||
v-else-if="id == 'support'"
|
||||
>
|
||||
<a
|
||||
v-for="(product, idx) in products"
|
||||
target="_blank"
|
||||
:key="idx"
|
||||
:href="product.url"
|
||||
class="m-auto rounded overflow-hidden transition duration-500"
|
||||
>
|
||||
<div class="px-2 py-2">
|
||||
<g-image class="py-4" :src="img(product.image)" />
|
||||
<div class="font-bold text-xl mb-2">{{ product.title }}</div>
|
||||
<div v-html="product.content" class="text-gray-700 text-base"></div>
|
||||
<div v-if="product.button" class="my-5 text-center">
|
||||
<a
|
||||
v-if="product.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="product.link"
|
||||
class="
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="product.link"
|
||||
class="
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center" v-else>
|
||||
<a
|
||||
v-for="(product, idx) in products"
|
||||
target="_blank"
|
||||
:key="idx"
|
||||
:href="product.url"
|
||||
class="m-auto rounded overflow-hidden transition duration-500"
|
||||
>
|
||||
<div class="px-2 py-2">
|
||||
<g-image class="py-4" :src="img(product.image)" />
|
||||
<div class="font-bold text-xl mb-2">{{ product.title }}</div>
|
||||
<div v-html="product.content" class="text-gray-700 text-base"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="main.button" class="my-10 text-center">
|
||||
<!-- <a
|
||||
v-if="main.button"
|
||||
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
|
||||
:href="main.link"
|
||||
>{{ main.button }}</a
|
||||
> -->
|
||||
|
||||
<a
|
||||
v-if="main.link.includes('http')"
|
||||
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
|
||||
rounded
|
||||
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
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
>{{ main.button }}</a
|
||||
>
|
||||
|
||||
</g-link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -296,7 +31,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["products", "main", "id"],
|
||||
props: ["products", "main"],
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
@@ -311,7 +46,4 @@ export default {
|
||||
.bannerFondo {
|
||||
height: 400px;
|
||||
}
|
||||
.product {
|
||||
background-color: #ebfefd;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div class="py-10 mb-5" id="home">
|
||||
<div class="w-full max-w-7xl mx-auto mt-10 px-16 text-center">
|
||||
<h2
|
||||
v-if="main !== null"
|
||||
class="text-4xl font-semibold leading-tight font-heading"
|
||||
>
|
||||
{{ main.title }}
|
||||
</h2>
|
||||
<p v-if="main !== null" class="mb-6 text-gray-700">
|
||||
{{ main.subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<a
|
||||
v-for="(product, idx) in products"
|
||||
target="_blank"
|
||||
:key="idx"
|
||||
:href="product.url"
|
||||
class="m-auto rounded overflow-hidden transition duration-500"
|
||||
>
|
||||
<div class="take_apart text-center pb-8 my-5">
|
||||
<g-image :src="img(product.image)" />
|
||||
<h3 class="font-bold text-2xl">{{ product.title }}</h3>
|
||||
<div v-html="product.content" class="pb-4 px-5 text-gray-600"></div>
|
||||
|
||||
<div v-if="product.button">
|
||||
<a
|
||||
v-if="product.url.includes('http')"
|
||||
target="_blank"
|
||||
:href="product.url"
|
||||
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mb-5 shadow rounded-full"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="product.url"
|
||||
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mb-5 shadow rounded-full"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["products", "main"],
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bannerFondo {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.take_apart {
|
||||
background-color: #f5f5f5;
|
||||
max-height: 570px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<section class="px-2">
|
||||
<div class="flex blue flex-wrap p-12 text-center lg:text-left -mx-2">
|
||||
<div
|
||||
class="
|
||||
lg:w-1/4
|
||||
light-blue
|
||||
text-center
|
||||
rounded-lg
|
||||
py-10
|
||||
mt-10
|
||||
lg:mt-0
|
||||
order-1
|
||||
lg:order-none
|
||||
"
|
||||
>
|
||||
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<dl class="">
|
||||
<div
|
||||
v-for="(item, index) in stats"
|
||||
:key="index"
|
||||
class="flex flex-col p-6 text-center"
|
||||
>
|
||||
<div v-for="(value, key) in item" :key="key">
|
||||
<dd
|
||||
class="leading-none font-bold green-color"
|
||||
:class="{ green: index % 2 !== 0 }"
|
||||
aria-describedby="item-1"
|
||||
>
|
||||
{{ value }}
|
||||
</dd>
|
||||
<dt class="mt-2 leading-6 text-white uppercase" id="item-1">
|
||||
{{ key }}
|
||||
</dt>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
lg:w-3/4
|
||||
text-center
|
||||
rounded
|
||||
lg:px-6
|
||||
mt-10
|
||||
lg:mt-0
|
||||
order-1
|
||||
lg:order-none
|
||||
"
|
||||
>
|
||||
<h2
|
||||
class="
|
||||
text-4xl text-white
|
||||
leading-tight
|
||||
mb-6
|
||||
font-bold font-heading
|
||||
uppercase
|
||||
"
|
||||
>
|
||||
{{ section.title }}
|
||||
</h2>
|
||||
<div class="text-white mt-4" v-html="section.content"></div>
|
||||
<g-image
|
||||
class="lg:w-3/4 mx-auto"
|
||||
:src="img(section.image)"
|
||||
:alt="section.title"
|
||||
/>
|
||||
<div class="mx-auto mt-6">
|
||||
<a
|
||||
v-if="section.link1.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
green
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="section.link1"
|
||||
target="_blank"
|
||||
>{{ section.btn1 }}
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
green
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="section.link1"
|
||||
>{{ section.btn1 }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
v-if="section.link2.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
green
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="section.link2"
|
||||
target="_blank"
|
||||
>{{ section.btn2 }}
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
green
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="section.link2"
|
||||
>{{ section.btn2 }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
v-if="section.link3.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
green
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="section.link3"
|
||||
target="_blank"
|
||||
>{{ section.btn3 }}
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
green
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="section.link3"
|
||||
>{{ section.btn3 }}</a
|
||||
>
|
||||
<!-- <div v-html="main.content" class="text-sm text-gray-400 mt-5"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
props: ["section"],
|
||||
data() {
|
||||
return {
|
||||
stats: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const getFarms = await axios.get(
|
||||
"https://explorer.threefold.io/api/farms?network=all"
|
||||
);
|
||||
const results = await axios.get(
|
||||
"https://explorer.threefold.io/api/stats"
|
||||
);
|
||||
let farms = getFarms.data.length;
|
||||
let hru = (results.data.hru / 1000).toFixed();
|
||||
let cru = results.data.cru.toFixed();
|
||||
this.stats.push(
|
||||
{ farms: farms },
|
||||
{ "Storage TB": hru },
|
||||
{ "Compute Cores": cru }
|
||||
);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blue {
|
||||
background-color: #313f92;
|
||||
}
|
||||
|
||||
.light-blue {
|
||||
background-color: #48489f;
|
||||
}
|
||||
|
||||
dd {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
border: 3px solid #847fc2;
|
||||
background-color: #313f92;
|
||||
color: #dacef5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #92f5d9;
|
||||
color: #313f92;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +1,27 @@
|
||||
<template>
|
||||
<section class="py-10 pb-8 px-4 text-center">
|
||||
<div class="max-w-2xl mx-auto mb-16" v-if="main">
|
||||
<h2 class="text-4xl leading-tight mb-6 font-bold font-heading">
|
||||
{{ main.title }}
|
||||
<section class="pt-8 px-4 text-center">
|
||||
<div class="max-w-2xl mx-auto mb-8">
|
||||
<h2 class="text-4xl leading-tight mb-6 font-semibold font-heading">
|
||||
Meet some of our partners
|
||||
</h2>
|
||||
<p class="text-gray-400 leading-relaxed"></p>
|
||||
</div>
|
||||
<div
|
||||
v-if="id == 'support' || id == 'community'"
|
||||
class="flex flex-wrap mx-2"
|
||||
>
|
||||
<div
|
||||
v-for="(logo, idx) in logos"
|
||||
class="w-1/2 md:w-1/4 px-12 mb-8"
|
||||
:key="idx"
|
||||
>
|
||||
<a v-if="logo.url.includes('http')" target="_blank" :href="logo.url">
|
||||
<g-image :src="img(logo.image)" />
|
||||
</a>
|
||||
|
||||
<g-link v-else :href="logo.url">
|
||||
<g-image :src="img(logo.image)" />
|
||||
</g-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-wrap -mx-8">
|
||||
<a
|
||||
<div class="flex flex-wrap -mx-8">
|
||||
<g-link
|
||||
v-for="(logo, idx) in logos"
|
||||
:key="idx"
|
||||
:href="logo.url"
|
||||
:to="logo.url"
|
||||
class="w-1/2 md:w-1/6 px-8 mb-8"
|
||||
>
|
||||
<g-image :src="img(logo.image)" />
|
||||
</a>
|
||||
</g-link>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["id", "logos", "main"],
|
||||
props: ["logos"],
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div class="bg-gray-50">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:py-2 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2
|
||||
v-if="main"
|
||||
class="
|
||||
text-center text-3xl
|
||||
leading-9
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
sm:text-4xl
|
||||
sm:leading-10
|
||||
"
|
||||
>
|
||||
{{ main.title }}
|
||||
</h2>
|
||||
<div class="mt-6 border-t-2 border-gray-200 pt-6">
|
||||
<dl>
|
||||
<div
|
||||
v-for="(faq, index) in faqs"
|
||||
:key="index"
|
||||
:class="{ 'mt-6 border-t border-gray-200 pt-6': index !== 0 }"
|
||||
>
|
||||
<dt class="text-lg leading-7">
|
||||
<!-- Expand/collapse question button -->
|
||||
<button
|
||||
class="
|
||||
text-left
|
||||
w-full
|
||||
flex
|
||||
justify-between
|
||||
items-start
|
||||
text-gray-400
|
||||
focus:outline-none
|
||||
focus:text-gray-900
|
||||
"
|
||||
@click="setActive(index)"
|
||||
>
|
||||
<span class="font-medium text-gray-900">
|
||||
{{ faq.question }}
|
||||
</span>
|
||||
<span class="ml-6 h-7 flex items-center">
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg
|
||||
class="h-6 w-6 transform"
|
||||
:class="{
|
||||
'-rotate-180': active == index,
|
||||
'rotate-0': !active == index,
|
||||
}"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd class="mt-6 pr-12" v-if="active == index">
|
||||
<div
|
||||
class="text-base leading-6 text-gray-600 post-content"
|
||||
v-html="faq.content"
|
||||
></div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["main", "faqs"],
|
||||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
active: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setActive(index) {
|
||||
this.active = index;
|
||||
this.open = !this.open;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-24 lg:px-2">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div
|
||||
v-html="news.content"
|
||||
class="text-center text-4xl font-semibold leading-tight font-heading"
|
||||
class="text-center text-base leading-6 font-semibold uppercase text-gray-600 tracking-wider"
|
||||
></div>
|
||||
<div class="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
|
||||
<g-link
|
||||
@@ -11,9 +11,9 @@
|
||||
:key="partner.id"
|
||||
:to="partner.path"
|
||||
target="_blank"
|
||||
class="col-span-1 flex justify-center m-1 bg-gray-100"
|
||||
class="col-span-1 flex justify-center py-8 px-8 m-1 bg-gray-100"
|
||||
>
|
||||
<img :src="img(partner.logo)" />
|
||||
<img class="max-h-12" :src="img(partner.logo)" />
|
||||
</g-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="sm:flex sm:flex-col sm:align-center" v-if="main.title">
|
||||
<h1 class="text-4xl mt-2 mb-6 leading-tight font-heading text-center">
|
||||
<div class="max-w-screen-xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
|
||||
<div class="sm:flex sm:flex-col sm:align-center">
|
||||
<h1
|
||||
class="text-5xl leading-none font-extrabold text-gray-900 sm:text-center"
|
||||
>
|
||||
{{ main.title }}
|
||||
</h1>
|
||||
<p class="mb-8 text-gray-700 leading-relaxed text-center">
|
||||
<p class="mt-5 text-xl leading-7 text-gray-500 sm:text-center">
|
||||
{{ main.excerpt }}
|
||||
</p>
|
||||
<!-- <div
|
||||
<div
|
||||
class="relative self-center mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8"
|
||||
>
|
||||
<button
|
||||
@@ -23,93 +25,71 @@
|
||||
>
|
||||
{{ main.button2 }}
|
||||
</button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
mt-12
|
||||
space-y-4
|
||||
sm:mt-8
|
||||
sm:space-y-0
|
||||
sm:grid sm:grid-cols-2
|
||||
sm:gap-6
|
||||
lg:max-w-4xl
|
||||
lg:mx-auto
|
||||
xl:max-w-none
|
||||
xl:mx-0
|
||||
xl:grid-cols-4
|
||||
"
|
||||
class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4"
|
||||
>
|
||||
<div
|
||||
v-for="(plan, index) in pricingPlans"
|
||||
:key="index"
|
||||
class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
"
|
||||
class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"
|
||||
>
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg leading-6 font-medium font-extrabold text-gray-900">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{{ plan.title }}
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
<p class="mt-4 text-sm leading-5 text-gray-500">
|
||||
{{ plan.excerpt }}
|
||||
</p>
|
||||
<!-- <p class="mt-8">
|
||||
<p class="mt-8">
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">{{
|
||||
plan.price
|
||||
}}</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500"
|
||||
>/{{ plan.duration }}</span
|
||||
>
|
||||
</p> -->
|
||||
</p>
|
||||
<g-link
|
||||
type="button"
|
||||
:to="plan.link"
|
||||
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-8 py-2 mr-2 my-0 rounded shadow rounded-full"
|
||||
class="mt-8 w-full text-center bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out"
|
||||
>
|
||||
{{ plan.button }}
|
||||
</g-link>
|
||||
</div>
|
||||
<!-- <div class="pt-6 pb-8 px-6"> -->
|
||||
<h3
|
||||
v-if="plan.includeTitle"
|
||||
class="
|
||||
text-xs
|
||||
leading-4
|
||||
font-medium
|
||||
text-gray-900
|
||||
tracking-wide
|
||||
uppercase
|
||||
"
|
||||
>
|
||||
{{ plan.includeTitle }}
|
||||
</h3>
|
||||
<ul class="mt-6 space-y-4" v-if="plan.options.length > 0">
|
||||
<li
|
||||
class="flex space-x-3"
|
||||
v-for="option in plan.options"
|
||||
:key="option.id"
|
||||
<div class="pt-6 pb-8 px-6">
|
||||
<h3
|
||||
class="text-xs leading-4 font-medium text-gray-900 tracking-wide uppercase"
|
||||
>
|
||||
<!-- Heroicon name: check -->
|
||||
<svg
|
||||
class="flex-shrink-0 h-5 w-5 text-green-500"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
{{ plan.includeTitle }}
|
||||
</h3>
|
||||
<ul class="mt-6 space-y-4">
|
||||
<li
|
||||
class="flex space-x-3"
|
||||
v-for="option in plan.options"
|
||||
:key="option.id"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">{{ option }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Heroicon name: check -->
|
||||
<svg
|
||||
class="flex-shrink-0 h-5 w-5 text-green-500"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">{{
|
||||
option
|
||||
}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="max-w-screen-xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-0"
|
||||
>
|
||||
<div class="space-y-12">
|
||||
<div class="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">
|
||||
<h2
|
||||
class="text-4xl leading-tight mb-6 font-bold font-heading uppercase"
|
||||
>
|
||||
{{ main.title }} <span class="font-extrabold">{{ main.slogan }}</span>
|
||||
</h2>
|
||||
<div class="mt-3 text-gray-700 sm:mt-4" v-html="main.content"></div>
|
||||
</div>
|
||||
<div
|
||||
v-if="id == 'home'"
|
||||
class="mx-auto grid-cols-2 sm:grid sm:grid-cols-1 lg:grid-cols-2 lg:max-w-5xl"
|
||||
>
|
||||
<div
|
||||
class="my-5 mx-5"
|
||||
v-for="partnership in partnerships"
|
||||
:key="partnership.id"
|
||||
>
|
||||
<img
|
||||
class="mx-auto"
|
||||
:src="partnership.img.src"
|
||||
:alt="partnership.id"
|
||||
/>
|
||||
<div class="space-y-2">
|
||||
<div class="text-lg leading-6 font-medium space-y-1">
|
||||
<h5>{{ partnership.title }}</h5>
|
||||
<div
|
||||
class="text-base text-gray-600"
|
||||
v-html="partnership.content"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="mx-auto grid-cols-2 sm:grid sm:grid-cols-1 lg:grid-cols-2 lg:max-w-5xl"
|
||||
>
|
||||
<div
|
||||
class="my-5 mx-5"
|
||||
v-for="partnership in partnerships"
|
||||
:key="partnership.id"
|
||||
>
|
||||
<img
|
||||
class="mx-auto"
|
||||
:src="partnership.img.src"
|
||||
:alt="partnership.id"
|
||||
/>
|
||||
<div class="space-y-2">
|
||||
<div class="text-lg leading-6 font-medium space-y-1">
|
||||
<h4>{{ partnership.title }}</h4>
|
||||
<div
|
||||
class="text-base text-gray-600"
|
||||
v-html="partnership.content"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="main.button || main.button2">
|
||||
<a
|
||||
v-if="main.link.includes('http')"
|
||||
target="_blank"
|
||||
:href="main.link"
|
||||
class="inline-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"
|
||||
>{{ main.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="main.link"
|
||||
class="inline-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"
|
||||
>{{ main.button }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
v-if="main.link2.includes('http')"
|
||||
target="_blank"
|
||||
:href="main.link2"
|
||||
class="inline-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"
|
||||
>{{ main.button2 }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="main.link2"
|
||||
class="inline-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"
|
||||
>{{ main.button2 }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["id", "partnerships", "main"],
|
||||
};
|
||||
</script>
|
||||
@@ -1,267 +0,0 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<div
|
||||
v-if="id == 'tft' && !farmingProcess && !cultivationProcess"
|
||||
class="
|
||||
mx-auto
|
||||
lg:py-16
|
||||
px-4
|
||||
max-w-screen-xl
|
||||
sm:px-6
|
||||
lg:px-8
|
||||
tft_section
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
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="p-5">
|
||||
<div class="leading-6">
|
||||
<h1 class="text-9xl font-bold uppercase mt-0" v-if="section.title">
|
||||
{{ section.title }}
|
||||
</h1>
|
||||
<div
|
||||
v-if="section.content"
|
||||
class="text-2xl tft_subtitle tracking-wide leading-9"
|
||||
v-html="section.content"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<g-image class="mt-0" :src="main.image" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="id == 'tft' && (farmingProcess || cultivationProcess)"
|
||||
class="mx-auto lg:py-16 px-4 max-w-screen-xl sm:px-6 lg:px-8 tft_section"
|
||||
>
|
||||
<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
|
||||
"
|
||||
>
|
||||
<h3 class="text-4xl mb-2 leading-tight font-heading">
|
||||
{{ main.title }}
|
||||
</h3>
|
||||
<h2 class="text-8xl mb-2 leading-tight font-heading">
|
||||
{{ main.subtitle }}
|
||||
</h2>
|
||||
</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">
|
||||
<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 class="text-gray-900 text-2xl leading-tight tft_subtitle tracking-wide" v-html="section.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="mx-auto py-10 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>
|
||||
<p class="text-gray-600">
|
||||
{{ main.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
space-y-12
|
||||
sm:grid sm:grid-cols-2
|
||||
sm:gap-x-6 sm:gap-y-12
|
||||
sm:space-y-0
|
||||
lg:grid-cols-2
|
||||
lg:gap-x-8
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(section, index) in sections"
|
||||
:key="index"
|
||||
class="tft_fuel space-y-4 p-5"
|
||||
:class="{ active: index % 2 !== 0 }"
|
||||
>
|
||||
<div class="relative">
|
||||
<g-image
|
||||
class="object-cover mb-8 h-full w-full"
|
||||
:src="img(section.svg)"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["id", "farmingProcess", "cultivationProcess", "main", "sections"],
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
},
|
||||
urlChecker(link) {
|
||||
var urlCheck = new RegExp(
|
||||
"([a-zA-Zd]+://)?(w+:w+@)?([a-zA-Zd.-]+.[A-Za-z]{2,4})(:d+)?(/.*)?",
|
||||
"i"
|
||||
);
|
||||
if (urlCheck.test(link)) {
|
||||
return link;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.tft_fuel {
|
||||
background-color: #66efc5;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.active {
|
||||
background-color: #ff8acf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
google-site-verification: google9dcad2debe4b606f.html
|
||||
@@ -3,92 +3,15 @@
|
||||
|
||||
<head>
|
||||
${head}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Nunito:wght@700&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
|
||||
<script
|
||||
type="text/javascript">window.$crisp = []; window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0"; (function () { d = document; s = d.createElement("script"); s.src = "https://client.crisp.chat/l.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })();</script>
|
||||
|
||||
|
||||
<!-- <script type="text/javascript">
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement("script");
|
||||
s.src = "https://client.crisp.chat/l.js";
|
||||
s.async = 1;
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
</script> -->
|
||||
|
||||
|
||||
<!-- Cookie Consent by https://www.FreePrivacyPolicy.com -->
|
||||
<script type="text/javascript"
|
||||
src="//www.freeprivacypolicy.com/public/cookie-consent/3.1.0/cookie-consent.js"></script>
|
||||
<script
|
||||
type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { cookieconsent.run({ "notice_banner_type": "headline", "consent_type": "express", "palette": "light", "language": "en", "website_name": "https://www.threefold.io", "website_privacy_policy_url":"https://library.threefold.me/info/legal#/legal__privacypolicy" }); });</script>
|
||||
|
||||
<!-- Crisp -->
|
||||
<script type="text/plain" cookie-consent="functionality">
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement("script");
|
||||
s.src = "https://client.crisp.chat/l.js";
|
||||
s.async = 1;
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
<!-- end of Crisp-->
|
||||
|
||||
<!-- Matomo Tag Manager -->
|
||||
<script type="text/javascript">
|
||||
var _mtm = window._mtm = window._mtm || [];
|
||||
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='text/javascript'; g.async=true; g.src='https://analytics.threefold.io/js/container_KIcuIdn4.js'; s.parentNode.insertBefore(g,s);
|
||||
</script>
|
||||
<!-- End Matomo Tag Manager -->
|
||||
|
||||
<!-- Matomo -->
|
||||
<script type="text/plain" cookie-consent="tracking">
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.threefold.io/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '5']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- end of Matomo-->
|
||||
|
||||
<noscript>Cookie Consent by <a href="https://www.FreePrivacyPolicy.com/free-cookie-consent/" rel="nofollow noopener">FreePrivacyPolicy.com</a></noscript>
|
||||
<!-- End Cookie Consent -->
|
||||
|
||||
<!-- MailerLite Universal -->
|
||||
<script>
|
||||
(function (m, a, i, l, e, r) {
|
||||
m['MailerLiteObject'] = e; function f() {
|
||||
var c = { a: arguments, q: [] }; var r = this.push(c); return "number" != typeof r ? r : f.bind(c.q);
|
||||
}
|
||||
f.q = f.q || []; m[e] = m[e] || f.bind(f.q); m[e].q = m[e].q || f.q; r = a.createElement(i);
|
||||
var _ = a.getElementsByTagName(i)[0]; r.async = 1; r.src = l + '?v' + (~~(new Date().getTime() / 1000000));
|
||||
_.parentNode.insertBefore(r, _);
|
||||
})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
|
||||
|
||||
var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
|
||||
</script>
|
||||
<!-- End MailerLite Universal -->
|
||||
</head>
|
||||
|
||||
<body ${bodyAttrs}>
|
||||
|
||||
<script>
|
||||
// Add dark / light detection that runs before Vue.js load. Borrowed from overreacted.io
|
||||
// for this starter, i used the code from gridsome.org
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<NavBar
|
||||
<!-- <NavBar
|
||||
:navigation="$static.navigation"
|
||||
@setTheme="setTheme"
|
||||
:theme="this.theme"
|
||||
/>
|
||||
/> -->
|
||||
<slot />
|
||||
<Footer
|
||||
<!-- <Footer
|
||||
:record="$static.footer"
|
||||
@setTheme="setTheme"
|
||||
:theme="this.theme" />
|
||||
:theme="this.theme" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -64,7 +64,6 @@ query {
|
||||
twitter
|
||||
dribbble
|
||||
instagram
|
||||
telegram
|
||||
description
|
||||
items{
|
||||
title
|
||||
|
||||
@@ -11,11 +11,6 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
|
||||
import { fab } from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
import '@fortawesome/fontawesome-svg-core/styles.css';
|
||||
import shareIt from 'vue-share-it';
|
||||
|
||||
import VueSlickCarousel from "vue-slick-carousel";
|
||||
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
|
||||
|
||||
require("gridsome-plugin-remark-prismjs-all/themes/night-owl.css");
|
||||
require("prismjs/themes/prism-solarizedlight.css");
|
||||
|
||||
@@ -23,14 +18,12 @@ config.autoAddCss = false;
|
||||
library.add(fas);
|
||||
library.add(fab);
|
||||
|
||||
export default function (Vue, { router, head, isClient }) {
|
||||
export default function(Vue, { router, head, isClient }) {
|
||||
// Set default layout as a global component
|
||||
Vue.component('Layout', DefaultLayout)
|
||||
Vue.component('font-awesome', FontAwesomeIcon)
|
||||
Vue.component('VueSlickCarousel', VueSlickCarousel)
|
||||
Vue.use(VTooltip, {
|
||||
defaultPlacement: 'top-end',
|
||||
defaultClass: 'bg-black text-xs px-2 leading-normal py-1 rounded absolute text-gray-400 max-w-xs mb-1'
|
||||
})
|
||||
Vue.use(shareIt)
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<!-- <NewsFilterHeader
|
||||
<NewsFilterHeader
|
||||
@selectedTopic="setTopic"
|
||||
@selectedYear="setYear"
|
||||
@selectedMonth="setMonth"
|
||||
@@ -8,30 +8,12 @@
|
||||
:topics="topics"
|
||||
:years="years"
|
||||
:months="months"
|
||||
/> -->
|
||||
<div class="container sm:pxi-0 mx-auto overflow-hidden">
|
||||
<div class="flex my-5">
|
||||
<FilterDropdown
|
||||
class="xs:w-2/3"
|
||||
@selectedTopic="setTopic"
|
||||
:topics="topics"
|
||||
/>
|
||||
<SearchBox class="xs:w-1/3" v-model="search" />
|
||||
</div>
|
||||
|
||||
<div v-if="search !== ''">
|
||||
<div v-if="searchResults.length > 0">
|
||||
<div class="flex flex-wrap news pt-12 pb-8 mt-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="post in searchResults"
|
||||
:key="post.node.id"
|
||||
:record="post.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-wrap news pt-12 pb-8 mt-8 mx-4 sm:-mx-4">
|
||||
/>
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto mt-8"
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap news pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="post in blogs.edges"
|
||||
:key="post.node.id"
|
||||
@@ -39,25 +21,13 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center"
|
||||
v-if="
|
||||
blogs.edges.length == 0 ||
|
||||
searchResults.length == 0 ||
|
||||
searchResults == ''
|
||||
"
|
||||
>
|
||||
<h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">
|
||||
Your search didn't return any results. Please try again.
|
||||
</h2>
|
||||
</div>
|
||||
<div class="pagination flex justify-center mb-8">
|
||||
<Pagination
|
||||
:baseUrl="baseurl"
|
||||
:currentPage="blogs.pageInfo.currentPage"
|
||||
:totalPages="blogs.pageInfo.totalPages"
|
||||
:maxVisibleButtons="5"
|
||||
v-if="searchResults.length > 7 && blogs.edges.length > 7"
|
||||
v-if="blogs.pageInfo.totalPages > 1 && blogs.edges.length > 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,7 +36,7 @@
|
||||
<page-query>
|
||||
|
||||
query($page: Int){
|
||||
entries: allBlog(perPage: 10, page: $page, sortBy: "created", order: DESC, filter: {category: { contains: ["foundation"]}}) @paginate{
|
||||
entries: allBlog(perPage: 10, page: $page, sortBy: "created", order: DESC, filter: {category: { id: {in: ["tech", "foundation"]}}}) @paginate{
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
@@ -99,12 +69,7 @@ query($page: Int){
|
||||
}
|
||||
}
|
||||
|
||||
markdownPage(id: "home") {
|
||||
id
|
||||
metaImg
|
||||
}
|
||||
|
||||
topics: allBlogTag {
|
||||
topics: allBlogTag{
|
||||
edges{
|
||||
node{
|
||||
title
|
||||
@@ -118,8 +83,7 @@ query($page: Int){
|
||||
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
|
||||
import Pagination from "~/components/custom/Pagination.vue";
|
||||
import NewsFilterHeader from "~/components/custom/NewsFilterHeader.vue";
|
||||
import SearchBox from "~/components/custom/SearchBox.vue";
|
||||
import FilterDropdown from "~/components/custom/FilterDropdown.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const allMonths = [
|
||||
@@ -143,69 +107,23 @@ export default {
|
||||
r.forEach((year) => years.push(String(year)));
|
||||
|
||||
return {
|
||||
selectedTopic: "Popular Topics",
|
||||
selectedTopic: "All Topics",
|
||||
selectedYear: "All Years",
|
||||
selectedMonth: "All Months",
|
||||
months: allMonths,
|
||||
years: years,
|
||||
listArchive: false,
|
||||
archiveButtonText: "Archive",
|
||||
search: "",
|
||||
};
|
||||
},
|
||||
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: "ThreeFold | Blog",
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content:
|
||||
"A collection of posts from the ThreeFold Foundation team about our products, our technology, our ecosystem, our why, and more.",
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: "ThreeFold | Blog",
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content:
|
||||
"A collection of posts from the ThreeFold Foundation team about our products, our technology, our ecosystem, our why, and more.",
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content:
|
||||
"A collection of posts from the ThreeFold Foundation team about our products, our technology, our ecosystem, our why, and more.",
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: "ThreeFold | Blog",
|
||||
},
|
||||
],
|
||||
};
|
||||
metaInfo: {
|
||||
title: "Blog",
|
||||
},
|
||||
components: {
|
||||
PostListItem,
|
||||
Pagination,
|
||||
NewsFilterHeader,
|
||||
SearchBox,
|
||||
FilterDropdown,
|
||||
},
|
||||
methods: {
|
||||
setTopic: function (topic) {
|
||||
@@ -218,7 +136,7 @@ export default {
|
||||
this.selectedMonth = month;
|
||||
},
|
||||
resetAll() {
|
||||
this.selectedTopic = "Popular Topics";
|
||||
this.selectedTopic = "All Topics";
|
||||
this.selectedYear = "All Years";
|
||||
this.selectedMonth = "All Months";
|
||||
},
|
||||
@@ -269,7 +187,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
topics: function () {
|
||||
var res = ["Popular Topics"];
|
||||
var res = ["All Topics"];
|
||||
this.$page.topics.edges.forEach((edge) => res.push(edge.node.title));
|
||||
return res;
|
||||
},
|
||||
@@ -278,13 +196,6 @@ export default {
|
||||
return window.innerHeight - 100;
|
||||
}
|
||||
},
|
||||
getImg() {
|
||||
let img = "";
|
||||
if (process.isClient) {
|
||||
img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
|
||||
}
|
||||
return img;
|
||||
},
|
||||
|
||||
blogs() {
|
||||
var res = {};
|
||||
@@ -297,7 +208,7 @@ export default {
|
||||
var node = old.edges[i].node;
|
||||
|
||||
// Now check topic
|
||||
var topics = ["Popular Topics"];
|
||||
var topics = ["All Topics"];
|
||||
node.tags.forEach((tag) => topics.push(tag.title));
|
||||
|
||||
var nodeDate = new Date(node.datetime);
|
||||
@@ -318,13 +229,6 @@ export default {
|
||||
baseurl() {
|
||||
return "/blog/";
|
||||
},
|
||||
searchResults() {
|
||||
return this.$page.entries.edges.filter((blog) => {
|
||||
return blog.node.title
|
||||
.toLowerCase()
|
||||
.includes(this.search.toLowerCase().trim());
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,38 +1,15 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container mx-auto 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 class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
<g-image
|
||||
v-if="$page.markdownPage.solution_image"
|
||||
:src="$page.markdownPage.solution_image.src"
|
||||
/>
|
||||
|
||||
<VideoPanel :card="$page.markdownPage.videoPanel" />
|
||||
|
||||
<Map
|
||||
v-if="$page.markdownPage.stats"
|
||||
:section="$page.markdownPage.stats"
|
||||
/>
|
||||
<Features
|
||||
:id="$page.markdownPage.id"
|
||||
:main="$page.markdownPage.featuresMain2"
|
||||
:features="$page.markdownPage.features2"
|
||||
/>
|
||||
|
||||
<Partenerships
|
||||
class="lg:mt-20"
|
||||
v-if="
|
||||
$page.markdownPage.partnerships &&
|
||||
$page.markdownPage.partnerships.length > 0
|
||||
"
|
||||
:main="$page.markdownPage.partenershipsMain"
|
||||
:partnerships="$page.markdownPage.partnerships"
|
||||
:id="$page.markdownPage.id"
|
||||
</div>
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
|
||||
<SolutionsHeader
|
||||
v-if="$page.markdownPage.header"
|
||||
:header="$page.markdownPage.header"
|
||||
/>
|
||||
|
||||
<logoShowcase
|
||||
@@ -40,44 +17,44 @@
|
||||
:logos="$page.markdownPage.logos"
|
||||
/>
|
||||
|
||||
<BrandPanel
|
||||
:brand="$page.markdownPage.brandPanel"
|
||||
:id="$page.markdownPage.id"
|
||||
v-if="$page.markdownPage.brandPanel"
|
||||
/>
|
||||
|
||||
<!-- <CallToAction
|
||||
v-if="$page.markdownPage.cta2"
|
||||
:cta="$page.markdownPage.cta2"
|
||||
:id="$page.markdownPage.id"
|
||||
/> -->
|
||||
|
||||
<ShowcaseProducts
|
||||
:main="$page.markdownPage.productsMain"
|
||||
:products="$page.markdownPage.productData"
|
||||
v-if="
|
||||
$page.markdownPage.productData &&
|
||||
$page.markdownPage.productData.length > 0
|
||||
"
|
||||
:id="$page.markdownPage.id"
|
||||
:main="$page.markdownPage.productsMain"
|
||||
:products="$page.markdownPage.productData"
|
||||
/>
|
||||
<!-- <g-image
|
||||
class="mx-auto"
|
||||
v-if="$page.markdownPage.solution_image2"
|
||||
:src="$page.markdownPage.solution_image2.src"
|
||||
/> -->
|
||||
<!-- <CallToAction
|
||||
v-if="$page.markdownPage.cta3"
|
||||
:cta="$page.markdownPage.cta3"
|
||||
:id="$page.markdownPage.id"
|
||||
/> -->
|
||||
|
||||
<Blogs
|
||||
v-if="$page.markdownPage.blogs || $page.markdownPage.BlogsMain"
|
||||
:main="$page.markdownPage.BlogsMain"
|
||||
:blogs="$page.markdownPage.blogs"
|
||||
<Header
|
||||
:title="$page.markdownPage.header_title"
|
||||
:image="$page.markdownPage.header_image"
|
||||
:altImg="$page.markdownPage.header_altImg"
|
||||
:excerpt="$page.markdownPage.header_excerpt"
|
||||
:button="$page.markdownPage.button"
|
||||
:link="$page.markdownPage.link"
|
||||
/>
|
||||
|
||||
<Comparison
|
||||
v-if="
|
||||
$page.markdownPage.comparisonSecs &&
|
||||
$page.markdownPage.comparisonSecs.length > 0
|
||||
"
|
||||
:main="$page.markdownPage.comparisonMain"
|
||||
:sections="$page.markdownPage.comparisonSecs"
|
||||
/>
|
||||
|
||||
<BrandPanel
|
||||
:brand="$page.markdownPage.brandPanel"
|
||||
v-if="$page.markdownPage.brandPanel"
|
||||
/>
|
||||
|
||||
<!-- <NewCard
|
||||
v-for="card in $page.markdownPage.cards"
|
||||
:key="card.id"
|
||||
:card="card"
|
||||
/> -->
|
||||
|
||||
<InTheNews
|
||||
v-if="$page.markdownPage.inTheNews"
|
||||
:news="$page.markdownPage.inTheNews"
|
||||
@@ -86,17 +63,16 @@
|
||||
<!-- <SignUp
|
||||
v-if="$page.markdownPage.signup"
|
||||
:signup="$page.markdownPage.signup"
|
||||
/> -->
|
||||
|
||||
/> -->
|
||||
</div>
|
||||
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
<g-image
|
||||
class="m-auto w-3/4 mt-8"
|
||||
v-if="$page.markdownPage.solution_image"
|
||||
:src="$page.markdownPage.solution_image.src"
|
||||
v-if="$page.markdownPage.solution_image2"
|
||||
:src="$page.markdownPage.solution_image2.src"
|
||||
/>
|
||||
|
||||
<CallToAction
|
||||
v-if="$page.markdownPage.cta"
|
||||
:id="$page.markdownPage.id"
|
||||
:cta="$page.markdownPage.cta"
|
||||
/>
|
||||
</div>
|
||||
@@ -108,10 +84,6 @@
|
||||
markdownPage(id: "home") {
|
||||
id
|
||||
path
|
||||
metaTitle
|
||||
metaDesc
|
||||
metaImg
|
||||
header_slogan
|
||||
header_title
|
||||
header_image
|
||||
header_excerpt
|
||||
@@ -119,8 +91,7 @@
|
||||
button
|
||||
link
|
||||
solution_image
|
||||
# solution_image2
|
||||
# solution_image3
|
||||
solution_image2
|
||||
header{
|
||||
title
|
||||
subtitle
|
||||
@@ -141,9 +112,17 @@
|
||||
title
|
||||
content
|
||||
image
|
||||
button
|
||||
url
|
||||
}
|
||||
cards{
|
||||
id
|
||||
title
|
||||
image
|
||||
button
|
||||
link
|
||||
order
|
||||
content
|
||||
}
|
||||
cta{
|
||||
id
|
||||
title
|
||||
@@ -151,97 +130,9 @@
|
||||
button
|
||||
button2
|
||||
button3
|
||||
button4
|
||||
link
|
||||
link2
|
||||
link3
|
||||
link4
|
||||
}
|
||||
BlogsMain{
|
||||
id
|
||||
title
|
||||
content
|
||||
}
|
||||
blogs{
|
||||
id
|
||||
image
|
||||
tags
|
||||
title
|
||||
path
|
||||
author
|
||||
autherUrl
|
||||
authorImg
|
||||
excerpt
|
||||
created
|
||||
}
|
||||
cta2{
|
||||
id
|
||||
title
|
||||
content
|
||||
video_button
|
||||
video_link
|
||||
button
|
||||
button2
|
||||
button3
|
||||
link
|
||||
link2
|
||||
link3
|
||||
}
|
||||
cta3{
|
||||
id
|
||||
title
|
||||
title2
|
||||
content
|
||||
button
|
||||
button2
|
||||
button3
|
||||
link
|
||||
link2
|
||||
link3
|
||||
}
|
||||
cta4{
|
||||
id
|
||||
title
|
||||
title2
|
||||
subtitle
|
||||
slogan
|
||||
content
|
||||
button
|
||||
button2
|
||||
button3
|
||||
link
|
||||
link2
|
||||
link3
|
||||
}
|
||||
|
||||
cta5{
|
||||
id
|
||||
title
|
||||
content
|
||||
button
|
||||
button2
|
||||
button3
|
||||
link
|
||||
link2
|
||||
link3
|
||||
}
|
||||
featuresMain2{
|
||||
id
|
||||
title
|
||||
subtitle
|
||||
btn
|
||||
link
|
||||
btn2
|
||||
link2
|
||||
btn3
|
||||
link3
|
||||
content
|
||||
}
|
||||
features2{
|
||||
id
|
||||
title
|
||||
svg
|
||||
content
|
||||
}
|
||||
comparisonMain{
|
||||
id
|
||||
@@ -254,7 +145,6 @@
|
||||
id
|
||||
svg
|
||||
title
|
||||
link
|
||||
content
|
||||
}
|
||||
brandPanel{
|
||||
@@ -265,17 +155,6 @@
|
||||
sourceUrl
|
||||
btnTxt
|
||||
image
|
||||
}
|
||||
brandPanel2{
|
||||
id
|
||||
title
|
||||
subtitle
|
||||
content
|
||||
sourceUrl
|
||||
btnTxt
|
||||
sourceUrl2
|
||||
btnTxt2
|
||||
image
|
||||
}
|
||||
logos{
|
||||
id
|
||||
@@ -290,165 +169,53 @@
|
||||
logo
|
||||
}
|
||||
}
|
||||
videoPanel {
|
||||
id
|
||||
video
|
||||
title
|
||||
content
|
||||
btn
|
||||
link
|
||||
}
|
||||
partenershipsMain{
|
||||
id
|
||||
title
|
||||
slogan
|
||||
content
|
||||
link
|
||||
link2
|
||||
button
|
||||
button2
|
||||
}
|
||||
partnerships {
|
||||
id
|
||||
title
|
||||
img
|
||||
content
|
||||
}
|
||||
stats {
|
||||
signup{
|
||||
id
|
||||
title
|
||||
content
|
||||
button
|
||||
link
|
||||
btn1
|
||||
btn2
|
||||
button1
|
||||
link1
|
||||
button2
|
||||
link2
|
||||
link3
|
||||
btn3
|
||||
image
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</page-query>
|
||||
|
||||
<static-query>
|
||||
query {
|
||||
metadata {
|
||||
siteUrl
|
||||
}
|
||||
}
|
||||
</static-query>
|
||||
<script>
|
||||
import Header from "~/components/marketing/sections/cta-sections/Header.vue";
|
||||
import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
|
||||
import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue";
|
||||
import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProducts.vue";
|
||||
import Comparison from "~/components/custom/sections/Comparison.vue";
|
||||
import Blogs from "~/components/marketing/sections/blog-sections/3_column_cards.vue";
|
||||
import Features from "~/components/custom/sections/Features.vue";
|
||||
import Map from "~/components/marketing/sections/cta-sections/StateMap.vue";
|
||||
import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
|
||||
import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
|
||||
import BrandPanel2 from "~/components/marketing/sections/cta-sections/BrandPanel2.vue";
|
||||
import CallToAction from "~/components/custom/sections/CallToAction.vue";
|
||||
import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
|
||||
import CallToActionbg2 from "~/components/custom/sections/CallToActionbg2.vue";
|
||||
import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
|
||||
import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_grid.vue";
|
||||
import SignUp from "~/components/custom/sections/SignUp.vue";
|
||||
import VideoPanel from "~/components/custom/VideoPanel.vue";
|
||||
import Partenerships from "~/components/marketing/sections/team-sections/grid_with_large_round_images.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Features,
|
||||
Map,
|
||||
SolutionsHeader,
|
||||
ShowcaseProducts,
|
||||
Comparison,
|
||||
NewCard,
|
||||
BrandPanel,
|
||||
BrandPanel2,
|
||||
logoShowcase,
|
||||
CallToAction,
|
||||
CallToActionbg1,
|
||||
CallToActionbg2,
|
||||
InTheNews,
|
||||
SignUp,
|
||||
Blogs,
|
||||
VideoPanel,
|
||||
Partenerships,
|
||||
},
|
||||
computed: {
|
||||
getImg() {
|
||||
let img = "";
|
||||
if (process.isClient) {
|
||||
img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
|
||||
}
|
||||
return img;
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: "ThreeFold | Welcome",
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content: this.$page.markdownPage.metaDesc,
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: this.$page.markdownPage.metaTitle,
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content: this.$page.markdownPage.metaDesc,
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content: this.$page.markdownPage.metaDesc,
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: this.$page.markdownPage.metaTitle,
|
||||
},
|
||||
],
|
||||
title: this.$page.markdownPage.title,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
<g-image
|
||||
v-if="$page.markdownPage.solution_image"
|
||||
:src="$page.markdownPage.solution_image.src"
|
||||
/>
|
||||
</div> -->
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<!-- <NewsFilterHeader
|
||||
<NewsFilterHeader
|
||||
@selectedTopic="setTopic"
|
||||
@selectedYear="setYear"
|
||||
@selectedMonth="setMonth"
|
||||
@@ -8,47 +8,22 @@
|
||||
:topics="topics"
|
||||
:years="years"
|
||||
:months="months"
|
||||
/> -->
|
||||
/>
|
||||
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto overflow-hidden"
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex my-5">
|
||||
<FilterDropdown
|
||||
class="xs:w-2/3"
|
||||
@selectedTopic="setTopic"
|
||||
:topics="topics"
|
||||
/>
|
||||
<SearchBox class="xs:w-1/3" v-model="search" />
|
||||
</div>
|
||||
|
||||
<div v-if="search !== ''">
|
||||
<div v-if="searchResults.length > 0">
|
||||
<div class="flex flex-wrap news pt-12 pb-8 mt-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="post in searchResults"
|
||||
:key="post.node.id"
|
||||
:record="post.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-wrap news pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<div class="flex flex-wrap news pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
:showtags="true"
|
||||
v-for="edge in news.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="text-center"
|
||||
v-if="news.edges.length == 0 || searchResults.length == 0"
|
||||
>
|
||||
<h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">
|
||||
Your search didn't return any results. Please try again.
|
||||
</h2>
|
||||
<div class="text-center" v-if="news.edges.length == 0">
|
||||
<h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">No results</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination flex justify-center mb-8">
|
||||
@@ -57,7 +32,7 @@
|
||||
:currentPage="$page.entries.pageInfo.currentPage"
|
||||
:totalPages="$page.entries.pageInfo.totalPages"
|
||||
:maxVisibleButtons="5"
|
||||
v-if="searchResults.length > 7 && news.edges.length > 7"
|
||||
v-if="$page.entries.pageInfo.totalPages > 1 && news.edges.length > 0"
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -65,7 +40,7 @@
|
||||
|
||||
<page-query>
|
||||
query($page: Int){
|
||||
entries: allNews(perPage: 10, page: $page, sortBy: "created", order: DESC, filter: {category: { contains: ["foundation"]}}) @paginate{
|
||||
entries: allNews(perPage: 10, page: $page, sortBy: "created", order: DESC, filter: {category: { id: {in: ["tech", "foundation"]}}}) @paginate{
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
@@ -91,12 +66,8 @@ query($page: Int){
|
||||
}
|
||||
}
|
||||
}
|
||||
markdownPage(id: "home") {
|
||||
id
|
||||
metaImg
|
||||
}
|
||||
|
||||
topics: allNewsTag(filter: { title: {in: ["blockchain", "experience", "technology", "farming", "community", "infrastructure", "impact"]}}) {
|
||||
topics: allNewsTag {
|
||||
edges{
|
||||
node{
|
||||
title
|
||||
@@ -111,8 +82,7 @@ query($page: Int){
|
||||
import NewsFilterHeader from "~/components/custom/NewsFilterHeader.vue";
|
||||
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
|
||||
import Pagination from "~/components/custom/Pagination.vue";
|
||||
import SearchBox from "~/components/custom/SearchBox.vue";
|
||||
import FilterDropdown from "~/components/custom/FilterDropdown.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const allMonths = [
|
||||
@@ -136,66 +106,23 @@ export default {
|
||||
r.forEach((year) => years.push(String(year)));
|
||||
|
||||
return {
|
||||
selectedTopic: "Popular Topics",
|
||||
selectedTopic: "All Topics",
|
||||
selectedYear: "All Years",
|
||||
selectedMonth: "All Months",
|
||||
months: allMonths,
|
||||
years: years,
|
||||
listArchive: false,
|
||||
archiveButtonText: "Archive",
|
||||
search: "",
|
||||
};
|
||||
},
|
||||
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: "ThreeFold | News",
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content: "Updates and announcements from the ThreeFold Foundation.",
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: "ThreeFold | News",
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content: "Updates and announcements from the ThreeFold Foundation.",
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content: "Updates and announcements from the ThreeFold Foundation.",
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: "ThreeFold | News",
|
||||
},
|
||||
],
|
||||
};
|
||||
metaInfo: {
|
||||
title: "Newsroom",
|
||||
},
|
||||
components: {
|
||||
PostListItem,
|
||||
Pagination,
|
||||
NewsFilterHeader,
|
||||
SearchBox,
|
||||
FilterDropdown,
|
||||
},
|
||||
methods: {
|
||||
setTopic: function (topic) {
|
||||
@@ -208,7 +135,7 @@ export default {
|
||||
this.selectedMonth = month;
|
||||
},
|
||||
resetAll() {
|
||||
this.selectedTopic = "Popular Topics";
|
||||
this.selectedTopic = "All Topics";
|
||||
this.selectedYear = "All Years";
|
||||
this.selectedMonth = "All Months";
|
||||
},
|
||||
@@ -275,7 +202,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
topics: function () {
|
||||
var res = ["Popular Topics"];
|
||||
var res = ["All Topics"];
|
||||
this.$page.topics.edges.forEach((edge) => res.push(edge.node.title));
|
||||
return res;
|
||||
},
|
||||
@@ -307,7 +234,7 @@ export default {
|
||||
// if (!selected) continue;
|
||||
|
||||
// Now check topic
|
||||
var topics = ["Popular Topics"];
|
||||
var topics = ["All Topics"];
|
||||
node.tags.forEach((tag) => topics.push(tag.title));
|
||||
|
||||
if (!topics.includes(this.selectedTopic)) continue;
|
||||
@@ -329,20 +256,6 @@ export default {
|
||||
return window.innerHeight - 570;
|
||||
}
|
||||
},
|
||||
getImg() {
|
||||
let img = "";
|
||||
if (process.isClient) {
|
||||
img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
|
||||
}
|
||||
return img;
|
||||
},
|
||||
searchResults() {
|
||||
return this.$page.entries.edges.filter((post) => {
|
||||
return post.node.excerpt
|
||||
.toLowerCase()
|
||||
.includes(this.search.toLowerCase().trim());
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-20 px-4">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-20">
|
||||
<div class="pt-8">
|
||||
<Alert v-if="showAlert" @clicked="linkCopied" />
|
||||
<section class="post-header container mx-auto px-0 mb-4 border-b">
|
||||
<h1 class="text-5xl font-medium leading-none mt-0">
|
||||
{{ $page.blog.title }}
|
||||
@@ -25,15 +24,7 @@
|
||||
<g-image
|
||||
:src="author.image"
|
||||
:alt="author.name"
|
||||
class="
|
||||
h-8
|
||||
w-8
|
||||
sm:h-10
|
||||
sm:w-10
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border-2 border-white
|
||||
"
|
||||
class="h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-gray-200 border-2 border-white"
|
||||
/>
|
||||
</g-link>
|
||||
</li>
|
||||
@@ -70,18 +61,6 @@
|
||||
</g-link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<share-it
|
||||
icons
|
||||
:targets="['twitter', 'linkedin', 'facebook']"
|
||||
class="ml-auto"
|
||||
/>
|
||||
|
||||
<font-awesome
|
||||
:icon="['fas', 'link']"
|
||||
class="cursor-pointer"
|
||||
@click="copyLink"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -91,17 +70,10 @@
|
||||
|
||||
<div class="py-12">
|
||||
<section
|
||||
class="
|
||||
post-content
|
||||
container
|
||||
mx-auto
|
||||
relative
|
||||
font-serif
|
||||
text-gray-700
|
||||
"
|
||||
class="post-content container mx-auto relative font-serif text-gray-700"
|
||||
>
|
||||
<div
|
||||
class="post-content-text text-lg"
|
||||
class="post-content-text text-xl"
|
||||
v-html="$page.blog.content"
|
||||
></div>
|
||||
</section>
|
||||
@@ -111,19 +83,7 @@
|
||||
v-for="tag in $page.blog.tags"
|
||||
:key="tag.id"
|
||||
:to="tag.path"
|
||||
class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-blue-700
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-blue-500
|
||||
border-gray-600
|
||||
text-gray-700
|
||||
rounded-full
|
||||
"
|
||||
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
|
||||
>{{ tag.title }}</g-link
|
||||
>
|
||||
</section>
|
||||
@@ -207,104 +167,34 @@
|
||||
path
|
||||
}
|
||||
}
|
||||
metadata {
|
||||
siteUrl
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
|
||||
import Alert from "~/components/custom/Alert.vue";
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PostListItem,
|
||||
Alert,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAlert: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
copyLink() {
|
||||
const el = document.createElement("input");
|
||||
el.value = window.location.href;
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(el);
|
||||
this.showAlert = true;
|
||||
},
|
||||
linkCopied(val) {
|
||||
this.showAlert = val;
|
||||
},
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
getCoverImage() {
|
||||
let coverImage = "";
|
||||
const cover = this.$page.blog.image;
|
||||
if (cover != null) {
|
||||
coverImage = `${this.getBaseUrl}${this.$page.blog.image.src}`;
|
||||
}
|
||||
return coverImage;
|
||||
},
|
||||
getBaseUrl() {
|
||||
return this.$page.metadata.siteUrl;
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: `ThreeFold | ${this.$page.blog.title}`,
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content: this.$page.blog.excerpt,
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: this.$page.blog.title,
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content: this.$page.blog.excerpt,
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.getCoverImage,
|
||||
},
|
||||
{
|
||||
name: "twitter:description",
|
||||
property: "twitter:description",
|
||||
content: this.$page.blog.excerpt,
|
||||
},
|
||||
{
|
||||
name: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.getCoverImage,
|
||||
},
|
||||
{
|
||||
name: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: this.$page.blog.title,
|
||||
},
|
||||
{
|
||||
name: "twitter:card",
|
||||
property: "twitter:card",
|
||||
content: "summary_large_image",
|
||||
},
|
||||
],
|
||||
title: this.$page.blog.title,
|
||||
};
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-card-excerpt,
|
||||
.post-content-text {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,112 +0,0 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto min-h-screen pt-24">
|
||||
<div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
|
||||
<div class="w-full md:w-5/6 md:pl-8 lg:pl-0">
|
||||
<h1
|
||||
class="
|
||||
uppercase
|
||||
leading-none
|
||||
text-4xl text-gray-800
|
||||
font-black font-heading
|
||||
"
|
||||
>
|
||||
{{ $page.job.title }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<section class="post-content mx-auto relative font-serif text-gray-700">
|
||||
<div class="mt-6 mb-8 text-gray-900" v-html="$page.job.content"></div>
|
||||
<a
|
||||
:href="$page.job.link"
|
||||
target="_blank"
|
||||
aria-current="page"
|
||||
class="
|
||||
inline-block
|
||||
bg-green-500
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-green-600
|
||||
px-8
|
||||
py-2
|
||||
mr-2
|
||||
my-0
|
||||
rounded
|
||||
shadow
|
||||
rounded-full
|
||||
active--exact active
|
||||
"
|
||||
type="button"
|
||||
>
|
||||
{{ $page.job.button }}
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="container-fluid mx-auto pt-24"
|
||||
v-for="edge in $page.allCustomCta.edges"
|
||||
:key="edge.node.id"
|
||||
>
|
||||
<CustomCTA
|
||||
v-if="edge.node.id == 'careers'"
|
||||
:title="edge.node.title"
|
||||
:link="edge.node.link"
|
||||
:image="edge.node.image"
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query($id: ID!) {
|
||||
job(id: $id) {
|
||||
id
|
||||
title
|
||||
content
|
||||
button
|
||||
link
|
||||
}
|
||||
allCustomCta {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
title
|
||||
link
|
||||
image
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import CustomCTA from "~/components/custom/sections/CustomCTA.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomCTA,
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$page.job.title,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.post-content {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
|
||||
.learn-button {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -1,300 +1,40 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div
|
||||
class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden py-5"
|
||||
v-if="
|
||||
$page.markdownPage.id == 'careers' ||
|
||||
$page.markdownPage.id == 'community'
|
||||
"
|
||||
>
|
||||
<CustomCTA
|
||||
:header="true"
|
||||
:image="$page.markdownPage.pageHeader.image"
|
||||
:title="$page.markdownPage.pageHeader.title"
|
||||
/>
|
||||
<!-- <div class="singlePic">
|
||||
<g-image
|
||||
class="w-100 mx-auto"
|
||||
v-if="$page.markdownPage.solution_image"
|
||||
:src="$page.markdownPage.solution_image.src"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto overflow-x-hidden py-5"
|
||||
v-if="
|
||||
$page.markdownPage.id !== 'careers' &&
|
||||
$page.markdownPage.id !== 'community' &&
|
||||
$page.markdownPage.id !== 'tft'
|
||||
"
|
||||
>
|
||||
<div class="container 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"
|
||||
:button="$page.markdownPage.button"
|
||||
:link="$page.markdownPage.link"
|
||||
/>
|
||||
<!-- <SignUp
|
||||
v-if="$page.markdownPage.signup"
|
||||
:signup="$page.markdownPage.signup"
|
||||
/> -->
|
||||
|
||||
<!-- <Comparison
|
||||
v-if="
|
||||
$page.markdownPage.comparisonSecs &&
|
||||
$page.markdownPage.comparisonSecs.length > 0
|
||||
"
|
||||
:main="$page.markdownPage.comparisonMain"
|
||||
:sections="$page.markdownPage.comparisonSecs"
|
||||
/> -->
|
||||
|
||||
<TFTFuel
|
||||
v-if="
|
||||
$page.markdownPage.comparisonSecs &&
|
||||
$page.markdownPage.comparisonSecs.length > 0
|
||||
"
|
||||
:main="$page.markdownPage.comparisonMain"
|
||||
:sections="$page.markdownPage.comparisonSecs"
|
||||
/>
|
||||
</div>
|
||||
<!-- <g-image
|
||||
v-if="
|
||||
$page.markdownPage.id !== 'careers' && $page.markdownPage.solution_image
|
||||
"
|
||||
class="mx-auto mt-10"
|
||||
:src="$page.markdownPage.solution_image.src"
|
||||
/> -->
|
||||
|
||||
<!-- tft page -->
|
||||
<div
|
||||
class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5"
|
||||
v-if="$page.markdownPage.id == 'tft'"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<CallToAction
|
||||
:id="$page.markdownPage.id"
|
||||
v-if="$page.markdownPage.id == 'tft'"
|
||||
:cta="$page.markdownPage.cta"
|
||||
/>
|
||||
|
||||
<BrandPanel
|
||||
:id="$page.markdownPage.id"
|
||||
:brand="$page.markdownPage.brandPanel"
|
||||
v-if="$page.markdownPage.brandPanel"
|
||||
:diveInto="false"
|
||||
/>
|
||||
|
||||
<NewCard
|
||||
v-if="$page.markdownPage.card"
|
||||
:id="$page.markdownPage.id"
|
||||
:card="$page.markdownPage.card"
|
||||
/>
|
||||
|
||||
<Slider
|
||||
v-if="$page.markdownPage.carousel"
|
||||
:slides="$page.markdownPage.carousel"
|
||||
:main="$page.markdownPage.sliderMain"
|
||||
/>
|
||||
|
||||
<TFTFuel
|
||||
v-if="$page.markdownPage.tftUses.length > 0"
|
||||
:id="$page.markdownPage.id"
|
||||
:main="$page.markdownPage.useTftMain"
|
||||
:sections="$page.markdownPage.tftUses"
|
||||
:farmingProcess="false"
|
||||
/>
|
||||
|
||||
<TFTFuel
|
||||
v-if="$page.markdownPage.farmingProcess.length > 0"
|
||||
:id="$page.markdownPage.id"
|
||||
:main="$page.markdownPage.farmingMain"
|
||||
:sections="$page.markdownPage.farmingProcess"
|
||||
:farmingProcess="true"
|
||||
/>
|
||||
|
||||
<TFTFuel
|
||||
v-if="$page.markdownPage.cultivationProcess.length > 0"
|
||||
:id="$page.markdownPage.id"
|
||||
:main="$page.markdownPage.cultivationMain"
|
||||
:sections="$page.markdownPage.cultivationProcess"
|
||||
:cultivationProcess="true"
|
||||
/>
|
||||
|
||||
<g-image class ="lg:py-10"
|
||||
v-if="$page.markdownPage.solution_image"
|
||||
:src="$page.markdownPage.solution_image"
|
||||
/>
|
||||
|
||||
<BrandPanel
|
||||
:id="$page.markdownPage.id"
|
||||
:brand="$page.markdownPage.brandPanel2"
|
||||
v-if="$page.markdownPage.brandPanel2"
|
||||
:diveInto="true"
|
||||
/>
|
||||
|
||||
<CallToActionbg1
|
||||
v-if="$page.markdownPage.cta4"
|
||||
: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'
|
||||
|
||||
"
|
||||
:cta="$page.markdownPage.cta"
|
||||
/>
|
||||
|
||||
<AppListItem
|
||||
v-if="
|
||||
$page.markdownPage.appData && $page.markdownPage.appData.length > 0
|
||||
"
|
||||
:products="$page.markdownPage.appData"
|
||||
:main="$page.markdownPage.appsMain"
|
||||
/>
|
||||
<ShowcaseProducts
|
||||
v-if="
|
||||
$page.markdownPage.productData &&
|
||||
$page.markdownPage.productData.length > 0
|
||||
"
|
||||
:id="$page.markdownPage.id"
|
||||
:main="$page.markdownPage.productsMain"
|
||||
:products="$page.markdownPage.productData"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
<Partenerships
|
||||
v-if="
|
||||
$page.markdownPage.partnerships &&
|
||||
$page.markdownPage.partnerships.length > 0
|
||||
"
|
||||
:id="$page.markdownPage.id"
|
||||
:main="$page.markdownPage.partenershipsMain"
|
||||
:partnerships="$page.markdownPage.partnerships"
|
||||
/>
|
||||
|
||||
<CenteredAccordion
|
||||
v-if="$page.markdownPage.faqContent && $page.markdownPage.id == 'faq'"
|
||||
:main="$page.markdownPage.faqMain"
|
||||
:faqs="$page.markdownPage.faqContent"
|
||||
/>
|
||||
|
||||
<CallToAction
|
||||
class="mt-20"
|
||||
:id="$page.markdownPage.id"
|
||||
v-if="$page.markdownPage.cta3"
|
||||
:cta="$page.markdownPage.cta3"
|
||||
/>
|
||||
<CallToAction
|
||||
:id="$page.markdownPage.id"
|
||||
v-if="$page.markdownPage.cta2"
|
||||
:cta="$page.markdownPage.cta2"
|
||||
/>
|
||||
|
||||
<!-- <ShowcaseProducts
|
||||
class="my-20"
|
||||
v-if="
|
||||
$page.markdownPage.productData &&
|
||||
$page.markdownPage.productData.length > 0
|
||||
"
|
||||
:id="$page.markdownPage.id"
|
||||
:main="$page.markdownPage.productsMain"
|
||||
:products="$page.markdownPage.productData"
|
||||
/> -->
|
||||
|
||||
<SolutionsHeader
|
||||
class="mt-0"
|
||||
v-if="$page.markdownPage.header"
|
||||
:header="$page.markdownPage.header"
|
||||
/>
|
||||
|
||||
<g-image
|
||||
v-if="$page.markdownPage.solution_image2"
|
||||
:src="$page.markdownPage.solution_image2.src"
|
||||
/>
|
||||
|
||||
<SolutionsHeader
|
||||
v-if="$page.markdownPage.header2"
|
||||
:header="$page.markdownPage.header2"
|
||||
/>
|
||||
|
||||
<!-- <SolutionsHeader
|
||||
v-if="$page.markdownPage.header3"
|
||||
:header="$page.markdownPage.header3"
|
||||
/> -->
|
||||
|
||||
<logoShowcase
|
||||
v-if="$page.markdownPage.logos.length > 0"
|
||||
:id="$page.markdownPage.id"
|
||||
:logos="$page.markdownPage.logos"
|
||||
:main="$page.markdownPage.logosMain"
|
||||
/>
|
||||
|
||||
<FourTiersWithToggle
|
||||
v-if="$page.markdownPage.jobs.length > 0"
|
||||
:pricingPlans="$page.markdownPage.jobs"
|
||||
:main="$page.markdownPage.jobsMain"
|
||||
/>
|
||||
|
||||
<SolutionsHeader
|
||||
class="mt-0"
|
||||
v-if="$page.markdownPage.header4"
|
||||
:header="$page.markdownPage.header4"
|
||||
/>
|
||||
|
||||
<GetInTouch
|
||||
v-if="
|
||||
$page.markdownPage.contactData &&
|
||||
$page.markdownPage.contactData.length > 0
|
||||
"
|
||||
:contacts="$page.markdownPage.contactData"
|
||||
/>
|
||||
|
||||
<SignUp
|
||||
v-if="$page.markdownPage.signup"
|
||||
:signup="$page.markdownPage.signup"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="container-fluid mx-auto"
|
||||
v-for="edge in $page.allCustomCta.edges"
|
||||
:key="edge.node.id"
|
||||
>
|
||||
<CustomCTA
|
||||
v-if="edge.node.id == $page.markdownPage.id"
|
||||
:title="edge.node.title"
|
||||
:link="edge.node.link"
|
||||
:image="edge.node.image"
|
||||
|
||||
<Comparison
|
||||
v-if="
|
||||
$page.markdownPage.comparisonSecs &&
|
||||
$page.markdownPage.comparisonSecs.length > 0
|
||||
"
|
||||
:main="$page.markdownPage.comparisonMain"
|
||||
:sections="$page.markdownPage.comparisonSecs"
|
||||
/>
|
||||
|
||||
<CallToAction
|
||||
v-if="$page.markdownPage.cta"
|
||||
:cta="$page.markdownPage.cta"
|
||||
/>
|
||||
|
||||
<g-image
|
||||
v-if="$page.markdownPage.solution_image"
|
||||
:src="$page.markdownPage.solution_image.src"
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -306,61 +46,15 @@
|
||||
id
|
||||
path
|
||||
excerpt
|
||||
metaTitle
|
||||
metaDesc
|
||||
metaImg
|
||||
header_excerpt
|
||||
header_altImg
|
||||
header_title
|
||||
header_image
|
||||
header_slogan
|
||||
button
|
||||
link
|
||||
solution_image
|
||||
solution_image2
|
||||
header{
|
||||
title
|
||||
subtitle
|
||||
content
|
||||
btn1
|
||||
link1
|
||||
btn2
|
||||
link2
|
||||
}
|
||||
header2{
|
||||
title
|
||||
subtitle
|
||||
content
|
||||
btn1
|
||||
link1
|
||||
btn2
|
||||
link2
|
||||
}
|
||||
header4{
|
||||
title
|
||||
subtitle
|
||||
content
|
||||
btn1
|
||||
link1
|
||||
btn2
|
||||
link2
|
||||
}
|
||||
productsMain{
|
||||
id
|
||||
title
|
||||
subtitle
|
||||
content
|
||||
button
|
||||
link
|
||||
# image
|
||||
}
|
||||
productData{
|
||||
id
|
||||
title
|
||||
content
|
||||
image
|
||||
button
|
||||
link
|
||||
}
|
||||
comparisonMain{
|
||||
id
|
||||
@@ -368,8 +62,6 @@
|
||||
description
|
||||
button
|
||||
link
|
||||
button2
|
||||
link2
|
||||
}
|
||||
comparisonSecs{
|
||||
id
|
||||
@@ -377,44 +69,17 @@
|
||||
title
|
||||
content
|
||||
}
|
||||
logosMain {
|
||||
id
|
||||
title
|
||||
}
|
||||
logos{
|
||||
id
|
||||
image
|
||||
url
|
||||
}
|
||||
cta{
|
||||
title
|
||||
slogan
|
||||
content
|
||||
button
|
||||
link
|
||||
}
|
||||
cta2{
|
||||
title
|
||||
slogan
|
||||
content
|
||||
button
|
||||
link
|
||||
}
|
||||
cta3{
|
||||
id
|
||||
title
|
||||
content
|
||||
button
|
||||
link
|
||||
}
|
||||
cta4{
|
||||
title1
|
||||
title2
|
||||
slogan
|
||||
content
|
||||
button
|
||||
link
|
||||
}
|
||||
|
||||
brandPanel{
|
||||
id
|
||||
title
|
||||
@@ -424,130 +89,6 @@
|
||||
btnTxt
|
||||
image
|
||||
}
|
||||
brandPanel2{
|
||||
id
|
||||
title
|
||||
subtitle
|
||||
content
|
||||
sourceUrl
|
||||
btnTxt
|
||||
image
|
||||
}
|
||||
partenershipsMain{
|
||||
id
|
||||
title
|
||||
slogan
|
||||
content
|
||||
link
|
||||
link2
|
||||
button
|
||||
button2
|
||||
}
|
||||
partnerships {
|
||||
id
|
||||
title
|
||||
img
|
||||
content
|
||||
}
|
||||
faqMain{
|
||||
id
|
||||
title
|
||||
}
|
||||
faqContent{
|
||||
id
|
||||
question
|
||||
content
|
||||
}
|
||||
jobsMain{
|
||||
id
|
||||
# title
|
||||
# button1
|
||||
# button2
|
||||
excerpt
|
||||
}
|
||||
jobs{
|
||||
id
|
||||
title
|
||||
excerpt
|
||||
price
|
||||
duration
|
||||
button
|
||||
link
|
||||
includeTitle
|
||||
options
|
||||
}
|
||||
contactData{
|
||||
id
|
||||
title
|
||||
mail
|
||||
phone
|
||||
}
|
||||
pageHeader {
|
||||
id
|
||||
title
|
||||
image
|
||||
}
|
||||
|
||||
carousel {
|
||||
id
|
||||
img
|
||||
}
|
||||
|
||||
sliderMain {
|
||||
id
|
||||
title
|
||||
subtitle
|
||||
content
|
||||
}
|
||||
|
||||
card{
|
||||
id
|
||||
img
|
||||
title
|
||||
content
|
||||
button
|
||||
link
|
||||
}
|
||||
useTftMain {
|
||||
id
|
||||
image
|
||||
}
|
||||
tftUses{
|
||||
id
|
||||
title
|
||||
content
|
||||
}
|
||||
farmingMain {
|
||||
id
|
||||
title
|
||||
subtitle
|
||||
}
|
||||
farmingProcess{
|
||||
id
|
||||
image
|
||||
content
|
||||
}
|
||||
|
||||
cultivationMain {
|
||||
id
|
||||
title
|
||||
subtitle
|
||||
}
|
||||
cultivationProcess{
|
||||
id
|
||||
image
|
||||
content
|
||||
}
|
||||
}
|
||||
allCustomCta {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
title
|
||||
link
|
||||
image
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -558,25 +99,17 @@ import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
|
||||
import Header from "~/components/marketing/sections/cta-sections/Header.vue";
|
||||
import VerticalNav from "~/components/custom/Navbar/VerticalNav.vue";
|
||||
import GetInTouch from "~/components/custom/Navbar/Getintouch.vue";
|
||||
import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProducts.vue";
|
||||
import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
|
||||
import HowItWorks from "~/components/custom/sections/HowItWorks.vue";
|
||||
import Features from "~/components/custom/sections/Features.vue";
|
||||
import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
|
||||
import CallToAction from "~/components/custom/sections/CallToAction.vue";
|
||||
import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
|
||||
import SignUp from "~/components/custom/sections/SignUp.vue";
|
||||
import Comparison from "~/components/custom/sections/Comparison.vue";
|
||||
import TFTFuel from "~/components/marketing/sections/team-sections/with_large_images.vue";
|
||||
import Roadmap from "~/components/custom/sections/Roadmap.vue";
|
||||
import FourTiersWithToggle from "~/components/marketing/sections/pricing/four_tiers_with_toggle.vue";
|
||||
import WithComparisonTable from "~/components/marketing/sections/pricing/with_comparison_table.vue";
|
||||
import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
|
||||
import AppListItem from "~/components/AppListItem.vue";
|
||||
import Partenerships from "~/components/marketing/sections/team-sections/grid_with_large_round_images.vue";
|
||||
import CenteredAccordion from "~/components/marketing/sections/faq-sections/CenteredAccordion.vue";
|
||||
import CustomCTA from "~/components/custom/sections/CustomCTA.vue";
|
||||
import Slider from "~/components/custom/Slider.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -585,82 +118,30 @@ export default {
|
||||
VerticalNav,
|
||||
GetInTouch,
|
||||
SolutionsHeader,
|
||||
ShowcaseProducts,
|
||||
HowItWorks,
|
||||
Features,
|
||||
logoShowcase,
|
||||
CallToAction,
|
||||
CallToActionbg1,
|
||||
SignUp,
|
||||
Comparison,
|
||||
TFTFuel,
|
||||
Roadmap,
|
||||
FourTiersWithToggle,
|
||||
WithComparisonTable,
|
||||
BrandPanel,
|
||||
AppListItem,
|
||||
Partenerships,
|
||||
CenteredAccordion,
|
||||
CustomCTA,
|
||||
Slider,
|
||||
},
|
||||
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.pageName,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getImg() {
|
||||
let img = "";
|
||||
if (process.isClient) {
|
||||
img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
|
||||
}
|
||||
return img;
|
||||
},
|
||||
pageName() {
|
||||
let path = this.$route.path.substring(1);
|
||||
let name = path[0].toUpperCase() + path.slice(1);
|
||||
return name;
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: this.$page.markdownPage.metaTitle,
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content: this.$page.markdownPage.metaDesc,
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: this.$page.markdownPage.metaTitle,
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content: this.$page.markdownPage.metaDesc,
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content: this.$page.markdownPage.metaDesc,
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: this.$page.markdownPage.metaTitle,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@@ -706,4 +187,4 @@ export default {
|
||||
.gridsome-highlight pre[class*="language-"].line-numbers {
|
||||
padding-left: 2.8em;
|
||||
}
|
||||
</style>
|
||||
</style> >
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<TagFilterHeader
|
||||
:tags="memberships"
|
||||
:selected="$page.membership.title"
|
||||
v-if="$page.allMembership.edges.length > 1"
|
||||
/>
|
||||
<TagFilterHeader :tags="memberships" :selected="$page.membership.title" v-if="$page.allMembership.edges.length > 1"/>
|
||||
<div class="container sm:pxi-0 mx-auto mt-8 overflow-x-hidden">
|
||||
<div class="mx-4 sm:mx-0">
|
||||
<h1 class="pb-0 mb-0 text-5xl font-medium capitalize">
|
||||
{{ $page.membership.title.replace("_", " ") }}
|
||||
{{ $page.membership.title }}
|
||||
</h1>
|
||||
<p class="text-gray-700 text-xl">
|
||||
<span class="self-center">{{ items.length }} People</span>
|
||||
<span class="self-center"
|
||||
>{{ $page.membership.belongsTo.totalCount }} People</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -19,10 +17,9 @@
|
||||
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
:showtags="true"
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:record="item"
|
||||
v-for="edge in $page.membership.belongsTo.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,14 +53,13 @@
|
||||
cities
|
||||
private
|
||||
image
|
||||
category
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
allMembership(filter: {title: {in: ["cofounders", "tech", "foundation", "ambassadors", "matchmakers", "farmers", "aci_members", "partners", "wisdom_council", "technology_council", "grid_guardians"]}}){
|
||||
allMembership(filter: {title: {in: ["foundation", "tech"]}}){
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
@@ -88,20 +84,12 @@ export default {
|
||||
|
||||
computed: {
|
||||
memberships() {
|
||||
var res = [{ title: "All", path: "/people" }];
|
||||
var res = [{ title: "All", path: "/team" }];
|
||||
this.$page.allMembership.edges.forEach((edge) =>
|
||||
res.push({ title: edge.node.title, path: edge.node.path })
|
||||
);
|
||||
return res;
|
||||
},
|
||||
items() {
|
||||
let foundationItems = [];
|
||||
this.$page.membership.belongsTo.edges.map((edge) => {
|
||||
if (edge.node.category.includes("foundation"))
|
||||
foundationItems.push(edge.node);
|
||||
});
|
||||
return foundationItems;
|
||||
},
|
||||
},
|
||||
|
||||
metaInfo() {
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-20 px-4">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-20">
|
||||
<div class="pt-8">
|
||||
<Alert v-if="showAlert" @clicked="linkCopied" />
|
||||
|
||||
<section class="post-header container mx-auto px-0 mb-4 border-b">
|
||||
<h1 class="text-5xl font-medium leading-none mt-0">
|
||||
{{ $page.news.title }}
|
||||
@@ -26,15 +24,7 @@
|
||||
<g-image
|
||||
:src="author.image"
|
||||
:alt="author.name"
|
||||
class="
|
||||
h-8
|
||||
w-8
|
||||
sm:h-10
|
||||
sm:w-10
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border-2 border-white
|
||||
"
|
||||
class="h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-gray-200 border-2 border-white"
|
||||
/>
|
||||
</g-link>
|
||||
</li>
|
||||
@@ -71,16 +61,6 @@
|
||||
</g-link>
|
||||
</p>
|
||||
</div>
|
||||
<share-it
|
||||
icons
|
||||
:targets="['twitter', 'linkedin', 'facebook']"
|
||||
class="ml-auto"
|
||||
/>
|
||||
<font-awesome
|
||||
:icon="['fas', 'link']"
|
||||
class="cursor-pointer"
|
||||
@click="copyLink"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -90,14 +70,7 @@
|
||||
|
||||
<div class="py-12">
|
||||
<section
|
||||
class="
|
||||
post-content
|
||||
container
|
||||
mx-auto
|
||||
relative
|
||||
font-serif
|
||||
text-gray-700
|
||||
"
|
||||
class="post-content container mx-auto relative font-serif text-gray-700"
|
||||
>
|
||||
<div
|
||||
class="post-content-text text-xl"
|
||||
@@ -110,19 +83,7 @@
|
||||
v-for="tag in $page.news.tags"
|
||||
:key="tag.id"
|
||||
:to="tag.path"
|
||||
class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-blue-700
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-blue-500
|
||||
border-gray-600
|
||||
text-gray-700
|
||||
rounded-full
|
||||
"
|
||||
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
|
||||
>{{ tag.title }}</g-link
|
||||
>
|
||||
</section>
|
||||
@@ -202,97 +163,33 @@
|
||||
path
|
||||
}
|
||||
}
|
||||
|
||||
metadata {
|
||||
siteUrl
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
|
||||
import Alert from "~/components/custom/Alert.vue";
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PostListItem,
|
||||
Alert,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAlert: false,
|
||||
};
|
||||
},
|
||||
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: `ThreeFold | ${this.$page.news.title}`,
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content: this.$page.news.excerpt,
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: this.$page.news.title,
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content: this.$page.news.excerpt,
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.getCoverImage,
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content: this.$page.news.excerpt,
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.getCoverImage,
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: this.$page.news.title,
|
||||
},
|
||||
],
|
||||
title: this.$page.news.title,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
copyLink() {
|
||||
const el = document.createElement("input");
|
||||
el.value = window.location.href;
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(el);
|
||||
this.showAlert = true;
|
||||
},
|
||||
linkCopied(val) {
|
||||
this.showAlert = val;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
getCoverImage() {
|
||||
let coverImage = "";
|
||||
const cover = this.$page.news.image;
|
||||
if (cover != null) {
|
||||
coverImage = `${this.getBaseUrl}${this.$page.news.image.src}`;
|
||||
}
|
||||
return coverImage;
|
||||
},
|
||||
getBaseUrl() {
|
||||
return this.$page.metadata.siteUrl;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-card-excerpt,
|
||||
.post-content-text {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,9 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<TagFilterHeader
|
||||
:tags="tags"
|
||||
selected="all"
|
||||
v-if="$page.tags.edges.length > 1"
|
||||
/>
|
||||
<TagFilterHeader :tags="tags" selected="all" v-if="$page.tags.edges.length > 1"/>
|
||||
<div class="container mt-8 sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
:showtags="true"
|
||||
v-for="partner in $page.entries.edges"
|
||||
:key="partner.id"
|
||||
:record="partner.node"
|
||||
@@ -21,7 +16,7 @@
|
||||
|
||||
<page-query>
|
||||
query ($private: Int){
|
||||
entries: allProject (sortBy: "rank", order: ASC, filter: { private: { ne: $private }, category: { contains: ["foundation"]}}){
|
||||
entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }, tags: { id: {in: ["tech", "foundation"]}}}){
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
@@ -40,31 +35,21 @@ query ($private: Int){
|
||||
image(width:800)
|
||||
timeToRead
|
||||
logo
|
||||
category
|
||||
tags{
|
||||
id
|
||||
path
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
markdownPage(id: "home") {
|
||||
id
|
||||
metaImg
|
||||
}
|
||||
|
||||
tags: allProjectTag (filter: { title: {in: ["blockchain", "experience", "technology", "farming", "community", "infrastructure", "impact"]}}) {
|
||||
tags: allProjectTag (filter: { title: {in: ["tech", "foundation"]}}) {
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
@@ -84,65 +69,9 @@ export default {
|
||||
);
|
||||
return res;
|
||||
},
|
||||
getImg() {
|
||||
let image = "";
|
||||
if (process.isClient) {
|
||||
image = `${window.location.origin}${this.img}`;
|
||||
}
|
||||
return image;
|
||||
},
|
||||
img() {
|
||||
if (!this.$page.markdownPage.metaImg) return "";
|
||||
if (this.$page.markdownPage.metaImg.src)
|
||||
return this.$page.markdownPage.metaImg.src;
|
||||
return this.$page.markdownPage.metaImg;
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: "ThreeFold | Partners",
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content:
|
||||
"Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: "ThreeFold | Partners",
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content:
|
||||
"Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content:
|
||||
"Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: "ThreeFold | Partners",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.$page)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,48 +1,28 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<TagFilterHeader
|
||||
:tags="memberships"
|
||||
selected="all"
|
||||
v-if="$page.memberships.edges.length > 1"
|
||||
/>
|
||||
<div class="container sm:pxi-0 mx-auto mt-8 overflow-x-hidden">
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto overflow-x-hidden"
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
:showtags="true"
|
||||
v-for="person in $page.entries.edges"
|
||||
:key="person.id"
|
||||
:record="person.node"
|
||||
v-for="edge in $page.entries.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-center" v-if="$page.entries.edges.length == 0">
|
||||
<h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">No results</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination flex justify-center mb-8">
|
||||
<Pagination
|
||||
:baseUrl="baseurl"
|
||||
:currentPage="$page.entries.pageInfo.currentPage"
|
||||
:totalPages="$page.entries.pageInfo.totalPages"
|
||||
:maxVisibleButtons="5"
|
||||
v-if="$page.entries.pageInfo.totalPages > 1 && $page.entries.edges.length > 0"
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query($page: Int){
|
||||
entries: allPerson (perPage: 25, page: $page, sortBy: "rank", order: ASC, filter: {category: { contains: ["foundation"]}}) @paginate{
|
||||
query ($private: Int){
|
||||
entries: allPerson (sortBy: "rank", order: DESC, filter: { private: { ne: $private }}){
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
currentPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
path
|
||||
content
|
||||
excerpt
|
||||
content
|
||||
name
|
||||
rank
|
||||
bio
|
||||
@@ -52,21 +32,11 @@ query($page: Int){
|
||||
cities
|
||||
image(width:800)
|
||||
private
|
||||
memberships {
|
||||
id
|
||||
path
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
markdownPage(id: "home") {
|
||||
id
|
||||
metaImg
|
||||
}
|
||||
|
||||
memberships: allMembership(filter: {title: {in: ["cofounders", "tech", "foundation", "ambassadors", "matchmakers", "farmers", "aci_members", "partners", "wisdom_council", "technology_council", "grid_guardians"]}}){
|
||||
memberships: allMembership{
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
@@ -76,80 +46,30 @@ query($page: Int){
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
|
||||
import TagFilterHeader from "~/components/custom/TagFilterHeader.vue";
|
||||
import Pagination from "~/components/custom/Pagination.vue";
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
|
||||
export default {
|
||||
metaInfo: {
|
||||
title: "People",
|
||||
},
|
||||
components: {
|
||||
PostListItem,
|
||||
TagFilterHeader,
|
||||
Pagination
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: "ThreeFold | People",
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content: "Meet the wide range of passionate and dedicated individuals involved in the ThreeFold movement.",
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: "ThreeFold | People",
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content: "Meet the wide range of passionate and dedicated individuals involved in the ThreeFold movement.",
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content: "Meet the wide range of passionate and dedicated individuals involved in the ThreeFold movement.",
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.getImg,
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: "ThreeFold | People",
|
||||
},
|
||||
],
|
||||
};
|
||||
Pagination,
|
||||
},
|
||||
computed: {
|
||||
memberships() {
|
||||
var res = [{ title: "All", path: "/people" }];
|
||||
this.$page.memberships.edges.forEach((edge) =>
|
||||
res.push({ title: edge.node.title, path: edge.node.path })
|
||||
);
|
||||
return res;
|
||||
},
|
||||
getImg() {
|
||||
let img = "";
|
||||
if (process.isClient) {
|
||||
img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
|
||||
}
|
||||
return img;
|
||||
},
|
||||
baseurl: function () {
|
||||
return "/people/";
|
||||
},
|
||||
contentHeight() {
|
||||
if (process.isClient) {
|
||||
return window.innerHeight - 100;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,28 +1,17 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto min-h-screen overflow-x-hidden pt-24"
|
||||
>
|
||||
<div class="container sm:pxi-0 mx-auto min-h-screen overflow-x-hidden pt-24">
|
||||
<div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
|
||||
<div class="w-full md:w-1/6 mx-auto sm:mx-0">
|
||||
<g-image
|
||||
:src="$page.person.image"
|
||||
class="
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
w-32
|
||||
h-32
|
||||
border-4 border-gray-400
|
||||
mx-auto
|
||||
md:mx-0
|
||||
"
|
||||
class="rounded-full bg-gray-200 w-32 h-32 border-4 border-gray-400 mx-auto md:mx-0"
|
||||
></g-image>
|
||||
</div>
|
||||
<div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
|
||||
<h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">
|
||||
{{ $page.person.name }}
|
||||
<a
|
||||
v-if="$page.person.linkedin"
|
||||
:href="$page.person.linkedin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
@@ -35,55 +24,33 @@
|
||||
<p class="text-gray-700 text-xl" v-if="$page.person.bio">
|
||||
{{ $page.person.bio }}
|
||||
</p>
|
||||
<div class="author-social"></div>
|
||||
<section>
|
||||
<div class="avatars">
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none flex author-list m-0 py-2">
|
||||
<li
|
||||
v-for="project in $page.person.projects"
|
||||
:key="project.id"
|
||||
class="author-list-item"
|
||||
>
|
||||
<g-link :to="project.path" v-tooltip="project.title">
|
||||
<g-image
|
||||
:src="project.logo"
|
||||
:alt="project.title"
|
||||
class="
|
||||
w-20
|
||||
h-20
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border-2 border-white
|
||||
"
|
||||
/>
|
||||
</g-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="author-social">
|
||||
|
||||
</div>
|
||||
<section>
|
||||
<div class="avatars">
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none flex author-list m-0 py-2">
|
||||
<li
|
||||
v-for="project in $page.person.projects"
|
||||
:key="project.id"
|
||||
class="author-list-item"
|
||||
>
|
||||
<g-link :to="project.path" v-tooltip="project.title">
|
||||
<g-image
|
||||
:src="project.logo"
|
||||
:alt="project.title"
|
||||
class="w-20 h-20 rounded-full bg-gray-200 border-2 border-white"
|
||||
/>
|
||||
</g-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<g-link
|
||||
v-for="membership in $page.person.memberships"
|
||||
:key="membership.id"
|
||||
:to="membership.path"
|
||||
class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-blue-700
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-blue-500
|
||||
border-gray-600
|
||||
text-gray-700
|
||||
rounded-full
|
||||
"
|
||||
>{{ membership.title }}</g-link
|
||||
>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -99,14 +66,16 @@
|
||||
</section>
|
||||
|
||||
<div class="pt-8 border-b mx-4 sm:-mx-4"></div>
|
||||
<!--
|
||||
|
||||
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.person.belongsTo.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
@@ -175,7 +144,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
memberships: allMembership{
|
||||
memberships: allMembership(filter: {title: {in: ["foundation", "tech"]}}){
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
@@ -202,60 +171,22 @@ export default {
|
||||
return pluralize("post", this.$page.person.belongsTo.totalCount);
|
||||
},
|
||||
|
||||
memberships() {
|
||||
var all = [];
|
||||
this.$page.memberships.edges.forEach((edgs) => all.push(edge.node.title));
|
||||
var res = [];
|
||||
this.$page.person.memberships.forEach(function (membership) {
|
||||
if (all.includes(membership.title)) {
|
||||
res.push(membership);
|
||||
memberships(){
|
||||
var all = []
|
||||
this.$page.memberships.edges.forEach((edgs) => all.push(edge.node.title))
|
||||
var res = []
|
||||
this.$page.person.memberships.forEach(function(membership){
|
||||
if (all.includes(membership.title)){
|
||||
res.push(membership)
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
return res
|
||||
}
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: `ThreeFold | ${this.$page.person.name}`,
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content: this.$page.person.excerpt,
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: this.$page.person.name,
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content: this.$page.person.excerpt,
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.$page.person.image.src,
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content: this.$page.person.excerpt,
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.$page.person.image.src,
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: this.$page.person.name,
|
||||
},
|
||||
],
|
||||
title: this.$page.person.name,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -5,28 +5,20 @@
|
||||
<div class="w-full md:w-1/6 mx-auto sm:mx-0">
|
||||
<g-image
|
||||
:src="$page.project.logo"
|
||||
class="
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
w-32
|
||||
h-32
|
||||
border-4 border-gray-400
|
||||
mx-auto
|
||||
md:mx-0
|
||||
"
|
||||
class="rounded-full bg-gray-200 w-32 h-32 border-4 border-gray-400 mx-auto md:mx-0"
|
||||
></g-image>
|
||||
</div>
|
||||
<div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
|
||||
<h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">
|
||||
{{ $page.project.title }}
|
||||
<!-- <a
|
||||
<a
|
||||
:href="$page.project.linkedin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black"
|
||||
>
|
||||
<font-awesome :icon="['fab', 'linkedin']" />
|
||||
</a> -->
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<p class="text-gray-700 text-xl" v-if="$page.project.bio">
|
||||
@@ -43,17 +35,11 @@
|
||||
:key="member.id"
|
||||
class="author-list-item"
|
||||
>
|
||||
<g-link :to="member.path">
|
||||
<g-link :to="member.path" v-tooltip="member.name">
|
||||
<g-image
|
||||
:src="member.image"
|
||||
:alt="member.name"
|
||||
class="
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border-2 border-white
|
||||
"
|
||||
class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
|
||||
/>
|
||||
</g-link>
|
||||
</li>
|
||||
@@ -62,54 +48,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto py-2">
|
||||
<ul class="list-none flex author-list m-0">
|
||||
<!-- <li class="mx-2">
|
||||
<g-image
|
||||
:src="$page.project.logo"
|
||||
class="rounded-full bg-gray-200 w-8 h-8 border-2 border-gray-400 mx-auto md:mx-0"
|
||||
></g-image>
|
||||
</li> -->
|
||||
<li v-if="$page.project.websites">
|
||||
<a
|
||||
:href="$page.project.websites"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black linkedin_size mx-1"
|
||||
>
|
||||
<font-awesome :icon="['fas', 'globe']" />
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="$page.project.linkedin">
|
||||
<a
|
||||
:href="$page.project.linkedin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black linkedin_size mx-1"
|
||||
>
|
||||
<font-awesome :icon="['fab', 'linkedin']" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<section class="post-tags container mx-auto relative py-5">
|
||||
<g-link
|
||||
v-for="tag in $page.project.tags"
|
||||
:key="tag.id"
|
||||
:to="tag.path"
|
||||
class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-blue-700
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-blue-500
|
||||
border-gray-600
|
||||
text-gray-700
|
||||
rounded-full
|
||||
"
|
||||
>{{ tag.title }}</g-link
|
||||
v-for="edge in $page.tags.edges"
|
||||
:key="edge.node.id"
|
||||
:to="edge.node.path"
|
||||
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
|
||||
>{{ edge.node.title }}</g-link
|
||||
>
|
||||
</section>
|
||||
</div>
|
||||
@@ -182,11 +127,6 @@
|
||||
path
|
||||
logo
|
||||
image
|
||||
tags {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -194,15 +134,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
tags: allProjectTag (filter: { title: {in: ["foundation"]}}) {
|
||||
tags: allProjectTag (filter: { title: {in: ["tech", "foundation"]}}) {
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</page-query>
|
||||
@@ -211,6 +153,7 @@
|
||||
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
|
||||
import Pagination from "~/components/custom/Pagination.vue";
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
@@ -222,70 +165,17 @@ export default {
|
||||
return pluralize("post", this.$page.project.belongsTo.totalCount);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
img(image) {
|
||||
if (!image) return "";
|
||||
if (image.src) return image.src;
|
||||
return image;
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: "",
|
||||
titleTemplate: `ThreeFold | ${this.$page.project.title}`,
|
||||
meta: [
|
||||
{
|
||||
key: "description",
|
||||
name: "description",
|
||||
content: this.$page.project.excerpt,
|
||||
},
|
||||
{
|
||||
key: "og:title",
|
||||
property: "og:title",
|
||||
content: this.$page.project.title,
|
||||
},
|
||||
{
|
||||
key: "og:description",
|
||||
property: "og:description",
|
||||
content: this.$page.project.excerpt,
|
||||
},
|
||||
{
|
||||
key: "og:image",
|
||||
property: "og:image",
|
||||
content: this.img(this.$page.project.image),
|
||||
},
|
||||
{
|
||||
key: "twitter:description",
|
||||
name: "twitter:description",
|
||||
content: this.$page.project.excerpt,
|
||||
},
|
||||
{
|
||||
key: "twitter:image",
|
||||
property: "twitter:image",
|
||||
content: this.img(this.$page.project.image),
|
||||
},
|
||||
{
|
||||
key: "twitter:title",
|
||||
property: "twitter:title",
|
||||
content: this.$page.project.title,
|
||||
},
|
||||
{
|
||||
key: "twitter:card",
|
||||
name: "twitter:card",
|
||||
content: this.$page.project.excerpt,
|
||||
},
|
||||
],
|
||||
title: this.$page.project.title,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-content-text {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.linkedin_size {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
</style>
|
||||
80
src/templates/Projects.vue
Normal file
80
src/templates/Projects.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto overflow-x-hidden"
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap with-large projects pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.entries.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
|
||||
query ($private: Int){
|
||||
entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }}, tags: { id: {in: ["tech", "foundation"]}}){
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
path
|
||||
members {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
},
|
||||
rank
|
||||
linkedin
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
logo
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
memberships: allProjectTag{
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
|
||||
export default {
|
||||
metaInfo: {
|
||||
title: "Projects",
|
||||
},
|
||||
components: {
|
||||
PostListItem,
|
||||
Pagination,
|
||||
},
|
||||
computed: {
|
||||
baseurl: function () {
|
||||
return "/projects/";
|
||||
},
|
||||
contentHeight() {
|
||||
if (process.isClient) {
|
||||
return window.innerHeight - 100;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -60,7 +60,7 @@ query ($private: Int){
|
||||
}
|
||||
}
|
||||
|
||||
people: allPerson(filter: { private: { ne: $private }}) {
|
||||
people: allPerson(filter: { private: { ne: $private }, memberships: { id: {in: ["foundation", "tech"]}}}) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
@@ -69,11 +69,11 @@ query ($private: Int){
|
||||
content
|
||||
name
|
||||
rank
|
||||
# memberships{
|
||||
# id
|
||||
# title
|
||||
# path
|
||||
# }
|
||||
memberships{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
bio
|
||||
linkedin
|
||||
websites
|
||||
|
||||
@@ -12,7 +12,9 @@
|
||||
{{ tags.title }}
|
||||
</h1>
|
||||
<p class="text-gray-700 text-xl">
|
||||
<span class="self-center">{{ items.length }} {{ item }}</span>
|
||||
<span class="self-center"
|
||||
>{{ tags.belongsTo.totalCount }} {{ item }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +22,6 @@
|
||||
|
||||
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
:showtags="true"
|
||||
v-for="edge in tags.belongsTo.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
@@ -59,11 +60,7 @@
|
||||
image(width:800)
|
||||
path
|
||||
datetime : created
|
||||
tags{
|
||||
id
|
||||
path
|
||||
title
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -132,7 +129,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
allProjectTag(filter: { title: {in: ["blockchain", "experience", "technology", "farming", "community", "infrastructure", "impact"]}}){
|
||||
allProjectTag(filter: { title: {in: ["tech", "foundation"]}}){
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
@@ -222,18 +219,6 @@ export default {
|
||||
return "post";
|
||||
}
|
||||
},
|
||||
items() {
|
||||
let foundationItems = [];
|
||||
this.tags.belongsTo.edges.map((edge) => {
|
||||
if (Array.isArray(edge.node.category)) {
|
||||
if (edge.node.category.includes("foundation"))
|
||||
foundationItems.push(edge.node);
|
||||
} else {
|
||||
foundationItems.push(edge.node);
|
||||
}
|
||||
});
|
||||
return foundationItems;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
69
src/templates/Team.vue
Normal file
69
src/templates/Team.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<!-- <TagFilterHeader :tags="memberships" selected="all" v-if="$page.memberships.edges.length > 1"/> -->
|
||||
<div class="container sm:pxi-0 mx-auto mt-8 overflow-x-hidden">
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="person in $page.entries.edges"
|
||||
:key="person.id"
|
||||
:record="person.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query ($private: Int){
|
||||
entries: allPerson (sortBy: "rank", order: DESC, filter: { private: { ne: $private }, memberships: { id: {in: ["foundation", "tech"]}}}){
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
path
|
||||
content
|
||||
excerpt
|
||||
name
|
||||
rank
|
||||
bio
|
||||
linkedin
|
||||
websites
|
||||
countries
|
||||
cities
|
||||
image(width:800)
|
||||
private
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
memberships: allMembership(filter: {title: {in: ["foundation", "tech"]}}){
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
|
||||
import TagFilterHeader from "~/components/custom/TagFilterHeader.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PostListItem,
|
||||
TagFilterHeader,
|
||||
},
|
||||
computed: {
|
||||
memberships() {
|
||||
var res = [{ title: "All", path: "/team" }];
|
||||
this.$page.memberships.edges.forEach((edge) =>
|
||||
res.push({ title: edge.node.title, path: edge.node.path })
|
||||
);
|
||||
return res;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user