Merge branch 'development' of github.com:threefoldfoundation/www_threefold_io into development
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 5.9 KiB |
BIN
content/page/home/carbon_neutral.png
Normal file
|
After Width: | Height: | Size: 105 KiB |
@@ -1,14 +1,19 @@
|
|||||||
---
|
---
|
||||||
id: home_header
|
id: carbon_neutral
|
||||||
title: ''
|
title: ''
|
||||||
subtitle: Welcome to ThreeFold
|
subtitle: Truly Better for Our Planet #Welcome to ThreeFold
|
||||||
btn1: ''
|
btn1: ''
|
||||||
link1: ''
|
link1: ''
|
||||||
btn2: ''
|
btn2: ''
|
||||||
link2: ''
|
link2: ''
|
||||||
---
|
---
|
||||||
|
|
||||||
With our game-changing technology and incredible partners, together we are building a better Internet – for humanity and for our planet.
|
ThreeFold’s peer-to-peer nature brings considerable energy efficiencies as compared to current solutions.
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
The remaining carbon footprint of the grid will be converted into carbon credits and invested in planet positive projects to enable the world’s first carbon neutral grid.
|
||||||
|
|
||||||
|
<!-- With our game-changing technology and incredible partners, together we are building a better Internet – for humanity and for our planet.
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
The ThreeFold peer-to-peer (P2P) Internet delivers on privacy and security, gives us all back ownership of our digital lives, can be made available everywhere in the world, and uses much less energy than today's solution.
|
The ThreeFold peer-to-peer (P2P) Internet delivers on privacy and security, gives us all back ownership of our digital lives, can be made available everywhere in the world, and uses much less energy than today's solution.
|
||||||
@@ -16,6 +21,6 @@ The ThreeFold peer-to-peer (P2P) Internet delivers on privacy and security, give
|
|||||||
<br/>
|
<br/>
|
||||||
It is the foundation for a more fair and equal tomorrow.
|
It is the foundation for a more fair and equal tomorrow.
|
||||||
<br/>
|
<br/>
|
||||||
And it is available, today!
|
And it is available, today! -->
|
||||||
|
|
||||||
<!-- We are building the next generation peer-to-peer internet infrastructure. After creating a powerful and super sustainable operating system that can host all of humanity's digital needs and data in smart contracts, we are now creating a fair, equal and private Internet experience to free humanity from the tech giants that exploit our data.
|
<!-- We are building the next generation peer-to-peer internet infrastructure. After creating a powerful and super sustainable operating system that can host all of humanity's digital needs and data in smart contracts, we are now creating a fair, equal and private Internet experience to free humanity from the tech giants that exploit our data.
|
||||||
@@ -15,7 +15,6 @@ brandPanel: fix_internet
|
|||||||
brandPanel2: grid_solution
|
brandPanel2: grid_solution
|
||||||
cta3: home_cta3
|
cta3: home_cta3
|
||||||
cta4: home_cta4
|
cta4: home_cta4
|
||||||
solution_image3: ./bg3.png
|
|
||||||
cta5: home_cta5
|
cta5: home_cta5
|
||||||
comparisonMain: comparison
|
comparisonMain: comparison
|
||||||
comparisonSecs: [private, equal, sustainable]
|
comparisonSecs: [private, equal, sustainable]
|
||||||
@@ -28,3 +27,6 @@ cta: home_cta
|
|||||||
<!-- header: home_header
|
<!-- header: home_header
|
||||||
solution_image: ./home_header.png -->
|
solution_image: ./home_header.png -->
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
|
<!-- solution_image3: ./carbon_neutral.png
|
||||||
|
header: carbon_neutral -->
|
||||||
|
|||||||
16
package.json
@@ -7,6 +7,10 @@
|
|||||||
"explore": "gridsome explore"
|
"explore": "gridsome explore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
||||||
|
"@fortawesome/free-brands-svg-icons": "^5.14.0",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^5.14.0",
|
||||||
|
"@fortawesome/vue-fontawesome": "^2.0.0",
|
||||||
"@gridsome/source-filesystem": "^0.6.2",
|
"@gridsome/source-filesystem": "^0.6.2",
|
||||||
"@gridsome/transformer-remark": "^0.6.2",
|
"@gridsome/transformer-remark": "^0.6.2",
|
||||||
"@noxify/gridsome-remark-classes": "^1.0.0",
|
"@noxify/gridsome-remark-classes": "^1.0.0",
|
||||||
@@ -21,18 +25,16 @@
|
|||||||
"gridsome-source-graphql": "^1.0.2",
|
"gridsome-source-graphql": "^1.0.2",
|
||||||
"gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
|
"gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
|
||||||
"lodash": "^4.17.20",
|
"lodash": "^4.17.20",
|
||||||
|
"node-sass": "^5.0.0",
|
||||||
"pluralize": "^8.0.0",
|
"pluralize": "^8.0.0",
|
||||||
"sass-loader": "^10.0.2",
|
"sass-loader": "^10.0.2",
|
||||||
"tailwindcss": "^1.8.4",
|
"tailwindcss": "^1.8.4",
|
||||||
"tailwindcss-gradients": "^3.0.0",
|
"tailwindcss-gradients": "^3.0.0",
|
||||||
"tailwindcss-tables": "^0.4.0",
|
"tailwindcss-tables": "^0.4.0",
|
||||||
"v-tooltip": "^2.0.3",
|
"v-tooltip": "^2.0.3",
|
||||||
"vue-markdown": "^2.2.4",
|
"vue-markdown": "^2.1.2"
|
||||||
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
|
||||||
"@fortawesome/free-brands-svg-icons": "^5.14.0",
|
|
||||||
"@fortawesome/free-solid-svg-icons": "^5.14.0",
|
|
||||||
"@fortawesome/vue-fontawesome": "^2.0.0",
|
|
||||||
"node-sass": "^5.0.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {}
|
"devDependencies": {
|
||||||
|
"@tailwindcss/aspect-ratio": "^0.2.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,314 +1,322 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
|
@font-face {
|
||||||
|
font-family: "Roboto";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url("https://fonts.googleapis.com/css2?family=Roboto");
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
@apply border-l;
|
@apply border-l;
|
||||||
@apply border-l-4;
|
@apply border-l-4;
|
||||||
@apply border-l-blue-500;
|
@apply border-l-blue-500;
|
||||||
@apply pl-4;
|
@apply pl-4;
|
||||||
@apply italic;
|
@apply italic;
|
||||||
@apply my-8;
|
@apply my-8;
|
||||||
p {
|
p {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body h2 {
|
body h2 {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body p {
|
body p {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.act-link {
|
.act-link {
|
||||||
@apply bg-gray-300;
|
@apply bg-gray-300;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
@apply border-l;
|
@apply border-l;
|
||||||
@apply border-l-2;
|
@apply border-l-2;
|
||||||
@apply border-l-gray-500;
|
@apply border-l-gray-500;
|
||||||
@apply pl-4;
|
@apply pl-4;
|
||||||
@apply mt-4;
|
@apply mt-4;
|
||||||
@apply text-base;
|
@apply text-base;
|
||||||
@apply break-words;
|
@apply break-words;
|
||||||
@apply overflow-x-auto;
|
@apply overflow-x-auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
@apply list-decimal;
|
@apply list-decimal;
|
||||||
@apply ml-5;
|
@apply ml-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@apply list-disc;
|
@apply list-disc;
|
||||||
@apply ml-5;
|
@apply ml-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(pre)>code {
|
:not(pre) > code {
|
||||||
@apply text-red-600;
|
@apply text-red-600;
|
||||||
@apply text-base;
|
@apply text-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
@responsive {
|
@responsive {
|
||||||
.pxi-0 {
|
.pxi-0 {
|
||||||
@apply px-0 #{!important};
|
@apply px-0 #{!important};
|
||||||
}
|
}
|
||||||
.pyi-0 {
|
.pyi-0 {
|
||||||
@apply py-0 #{!important};
|
@apply py-0 #{!important};
|
||||||
}
|
}
|
||||||
.pi-0 {
|
.pi-0 {
|
||||||
@apply p-0 #{!important};
|
@apply p-0 #{!important};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.animated-link:after {
|
.animated-link:after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 0px;
|
width: 0px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
display: block;
|
display: block;
|
||||||
transition: 300ms;
|
transition: 300ms;
|
||||||
@apply bg-gray-500;
|
@apply bg-gray-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footerlink {
|
.footerlink {
|
||||||
margin-left: 0rem !important;
|
margin-left: 0rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .animated-link:hover:after {
|
// .animated-link:hover:after {
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
// }
|
// }
|
||||||
.height-30px {
|
.height-30px {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-3xl {
|
.text-3xl {
|
||||||
font-size: 2.50rem
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-border {
|
.no-border {
|
||||||
border-width: 0px !important;
|
border-width: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-post {
|
.flex-post {
|
||||||
@apply border-b;
|
@apply border-b;
|
||||||
@apply border-b-gray-300;
|
@apply border-b-gray-300;
|
||||||
@apply flex-col;
|
@apply flex-col;
|
||||||
|
@apply w-full;
|
||||||
|
.post-card-image {
|
||||||
|
// @apply h-56;
|
||||||
|
@apply h-full;
|
||||||
@apply w-full;
|
@apply w-full;
|
||||||
.post-card-image {
|
@apply object-cover;
|
||||||
// @apply h-56;
|
@apply rounded;
|
||||||
@apply h-full;
|
@apply relative;
|
||||||
@apply w-full;
|
}
|
||||||
@apply object-cover;
|
.post-card-title {
|
||||||
@apply rounded;
|
@apply leading-none;
|
||||||
@apply relative;
|
@apply text-2xl;
|
||||||
}
|
@apply font-medium;
|
||||||
.post-card-title {
|
}
|
||||||
@apply leading-none;
|
.post-card-excerpt {
|
||||||
@apply text-2xl;
|
@apply font-serif;
|
||||||
@apply font-medium;
|
}
|
||||||
}
|
|
||||||
.post-card-excerpt {
|
|
||||||
@apply font-serif;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-list-item:nth-child(n + 2) {
|
.author-list-item:nth-child(n + 2) {
|
||||||
@apply -ml-3;
|
@apply -ml-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus {
|
button:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.telegram_icon {
|
.telegram_icon {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-content a {
|
.post-content a {
|
||||||
color: #4ec48f;
|
color: #4ec48f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-8xl {
|
.text-8xl {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-family: 'Lato', sans-serif !important;
|
font-family: "Roboto", sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
text-6xl {
|
text-6xl {
|
||||||
font-family: 'Lato', sans-serif !important;
|
font-family: "Roboto", sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
text-5xl {
|
text-5xl {
|
||||||
font-family: 'Lato', sans-serif !important;
|
font-family: "Roboto", sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 375px) {
|
@media (min-width: 375px) {
|
||||||
.text-3xl {
|
.text-3xl {
|
||||||
font-size: 2.25rem
|
font-size: 2.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.with-large>.flex-post:nth-child(5n),
|
.with-large > .flex-post:nth-child(5n),
|
||||||
.with-large>.flex-post:nth-child(5n-1) {
|
.with-large > .flex-post:nth-child(5n-1) {
|
||||||
// @apply flex-100;
|
// @apply flex-100;
|
||||||
flex: 1 1 50%;
|
flex: 1 1 50%;
|
||||||
@apply flex-col;
|
@apply flex-col;
|
||||||
.post-card-image-link {
|
.post-card-image-link {
|
||||||
@apply relative;
|
@apply relative;
|
||||||
min-height: 400px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.news>.flex-post:nth-child(5n),
|
.post-card-image {
|
||||||
.news>.flex-post:nth-child(5n-1) {
|
@apply absolute;
|
||||||
// @apply flex-100;
|
@apply h-full;
|
||||||
flex: 1 1 50%;
|
@apply w-full;
|
||||||
@apply flex-col;
|
@apply object-cover;
|
||||||
.post-card-image-link {
|
@apply rounded-lg;
|
||||||
@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 {
|
.post-card-content {
|
||||||
font-size: 2.50rem
|
// @apply flex-post-large-content;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
@apply self-center;
|
||||||
}
|
}
|
||||||
// .news>.flex-post:nth-child(9n+1),
|
.post-card-title {
|
||||||
// .news>.flex-post:nth-child(9n+2) {
|
@apply text-4xl;
|
||||||
// // @apply flex-100;
|
}
|
||||||
// flex: 1 1 50%;
|
.post-card-excerpt {
|
||||||
// @apply flex-col;
|
@apply text-xl;
|
||||||
// .post-card-image-link {
|
}
|
||||||
// @apply relative;
|
}
|
||||||
// min-height: 300px;
|
.news > .flex-post:nth-child(5n),
|
||||||
// }
|
.news > .flex-post:nth-child(5n-1) {
|
||||||
// .post-card-image {
|
// @apply flex-100;
|
||||||
// @apply absolute;
|
flex: 1 1 50%;
|
||||||
// @apply h-full;
|
@apply flex-col;
|
||||||
// @apply w-full;
|
.post-card-image-link {
|
||||||
// @apply object-cover;
|
@apply relative;
|
||||||
// @apply rounded-lg;
|
min-height: 300px;
|
||||||
// }
|
}
|
||||||
// .post-card-content {
|
.post-card-image {
|
||||||
// // @apply flex-post-large-content;
|
@apply absolute;
|
||||||
// flex: 0 1 auto;
|
@apply h-full;
|
||||||
// @apply self-center;
|
@apply w-full;
|
||||||
// }
|
@apply object-cover;
|
||||||
// .post-card-title {
|
@apply rounded-lg;
|
||||||
// @apply text-4xl;
|
}
|
||||||
// }
|
.post-card-content {
|
||||||
// .post-card-excerpt {
|
// @apply flex-post-large-content;
|
||||||
// @apply text-xl;
|
flex: 0 1 auto;
|
||||||
// }
|
@apply self-center;
|
||||||
// }
|
}
|
||||||
// .news>.flex-post:nth-child(9n+3),
|
.post-card-title {
|
||||||
// .news>.flex-post:nth-child(9n+4),
|
@apply text-4xl;
|
||||||
// .news>.flex-post:nth-child(9n+5) {
|
}
|
||||||
// // @apply flex-100;
|
.post-card-excerpt {
|
||||||
// flex: 1 1 300px;
|
@apply text-xl;
|
||||||
// @apply flex-col;
|
}
|
||||||
// .post-card-image-link {
|
}
|
||||||
// @apply relative;
|
.text-3xl {
|
||||||
// min-height: 180px;
|
font-size: 2.5rem;
|
||||||
// }
|
}
|
||||||
// .post-card-image {
|
// .news>.flex-post:nth-child(9n+1),
|
||||||
// @apply absolute;
|
// .news>.flex-post:nth-child(9n+2) {
|
||||||
// @apply h-full;
|
// // @apply flex-100;
|
||||||
// @apply w-full;
|
// flex: 1 1 50%;
|
||||||
// @apply object-cover;
|
// @apply flex-col;
|
||||||
// @apply rounded-lg;
|
// .post-card-image-link {
|
||||||
// }
|
// @apply relative;
|
||||||
// .post-card-content {
|
// min-height: 300px;
|
||||||
// // @apply flex-post-large-content;
|
// }
|
||||||
// flex: 0 1 auto;
|
// .post-card-image {
|
||||||
// @apply self-center;
|
// @apply absolute;
|
||||||
// }
|
// @apply h-full;
|
||||||
// .post-card-title {
|
// @apply w-full;
|
||||||
// @apply text-4xl;
|
// @apply object-cover;
|
||||||
// }
|
// @apply rounded-lg;
|
||||||
// .post-card-excerpt {
|
// }
|
||||||
// @apply text-xl;
|
// .post-card-content {
|
||||||
// }
|
// // @apply flex-post-large-content;
|
||||||
// }
|
// flex: 0 1 auto;
|
||||||
// .news>.flex-post:nth-child(9n+6),
|
// @apply self-center;
|
||||||
// .news>.flex-post:nth-child(9n+7),
|
// }
|
||||||
// .news>.flex-post:nth-child(9n+8),
|
// .post-card-title {
|
||||||
// .news>.flex-post:nth-child(9n+9) {
|
// @apply text-4xl;
|
||||||
// // @apply flex-100;
|
// }
|
||||||
// flex: 1 1 250px;
|
// .post-card-excerpt {
|
||||||
// @apply flex-col;
|
// @apply text-xl;
|
||||||
// .post-card-image-link {
|
// }
|
||||||
// @apply relative;
|
// }
|
||||||
// min-height: 300px;
|
// .news>.flex-post:nth-child(9n+3),
|
||||||
// }
|
// .news>.flex-post:nth-child(9n+4),
|
||||||
// .post-card-image {
|
// .news>.flex-post:nth-child(9n+5) {
|
||||||
// @apply absolute;
|
// // @apply flex-100;
|
||||||
// @apply h-full;
|
// flex: 1 1 300px;
|
||||||
// @apply w-full;
|
// @apply flex-col;
|
||||||
// @apply object-cover;
|
// .post-card-image-link {
|
||||||
// @apply rounded-lg;
|
// @apply relative;
|
||||||
// }
|
// min-height: 180px;
|
||||||
// .post-card-content {
|
// }
|
||||||
// // @apply flex-post-large-content;
|
// .post-card-image {
|
||||||
// flex: 0 1 auto;
|
// @apply absolute;
|
||||||
// @apply self-center;
|
// @apply h-full;
|
||||||
// }
|
// @apply w-full;
|
||||||
// .post-card-title {
|
// @apply object-cover;
|
||||||
// @apply text-4xl;
|
// @apply rounded-lg;
|
||||||
// }
|
// }
|
||||||
// .post-card-excerpt {
|
// .post-card-content {
|
||||||
// @apply text-xl;
|
// // @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"] {
|
// body[data-theme="dark"] {
|
||||||
|
|||||||
@@ -1,35 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div @click="handleClose">
|
||||||
<div
|
<div
|
||||||
v-if="showModal"
|
v-if="showModal"
|
||||||
class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
|
class="fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
|
||||||
>
|
>
|
||||||
<div class="relative w-auto my-6 mx-auto max-w-6xl">
|
<div
|
||||||
<button
|
class="iframe-container relative h-0 w-1/2"
|
||||||
class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
|
style="padding-bottom: 56.25%"
|
||||||
@click="handleClose"
|
>
|
||||||
>
|
<iframe
|
||||||
<span
|
:src="link"
|
||||||
class="bg-transparent text-white opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
|
frameborder="0"
|
||||||
>
|
width="640"
|
||||||
×
|
height="360"
|
||||||
</span>
|
allowfullscreen
|
||||||
</button>
|
class="absolute top-0 left-0 w-full h-full"
|
||||||
<div
|
></iframe>
|
||||||
class="border-0 rounded-lg relative flex flex-col w-full outline-none focus:outline-none"
|
|
||||||
>
|
|
||||||
<div class="relative flex-auto">
|
|
||||||
<iframe
|
|
||||||
width="800"
|
|
||||||
height="450"
|
|
||||||
:src="link"
|
|
||||||
frameborder="0"
|
|
||||||
allow="accelerometer; autoplay; encrypted-media; gyroscope;
|
|
||||||
picture-in-picture"
|
|
||||||
allowfullscreen
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
|
<div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
|
||||||
@@ -47,3 +33,10 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.iframe-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -12,10 +12,7 @@
|
|||||||
>
|
>
|
||||||
{{ cta.slogan }}
|
{{ cta.slogan }}
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></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">
|
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||||
<a
|
<a
|
||||||
@click="toggleModal"
|
@click="toggleModal"
|
||||||
@@ -37,7 +34,8 @@
|
|||||||
>{{ cta.button2 }}</g-link
|
>{{ cta.button2 }}</g-link
|
||||||
>
|
>
|
||||||
<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"
|
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"
|
:to="cta.link3"
|
||||||
>{{ cta.button3 }}</g-link
|
>{{ cta.button3 }}</g-link
|
||||||
>
|
>
|
||||||
@@ -50,14 +48,11 @@
|
|||||||
>
|
>
|
||||||
{{ cta.title }}
|
{{ cta.title }}
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></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">
|
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||||
<a
|
<a
|
||||||
@click="toggleModal"
|
@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"
|
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
|
>{{ cta.video_button }}</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -66,5 +66,6 @@ export default {
|
|||||||
|
|
||||||
.take_apart {
|
.take_apart {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
|
max-height: 570px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
class="col-span-1 flex justify-center m-1 bg-gray-100"
|
class="col-span-1 flex justify-center m-1 bg-gray-100"
|
||||||
>
|
>
|
||||||
<img class="" :src="img(partner.logo)" />
|
<img :src="img(partner.logo)" />
|
||||||
</g-link>
|
</g-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,11 +13,6 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
|
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
|
||||||
<!-- <SolutionsHeader
|
|
||||||
v-if="$page.markdownPage.header"
|
|
||||||
:header="$page.markdownPage.header"
|
|
||||||
/> -->
|
|
||||||
|
|
||||||
<g-image
|
<g-image
|
||||||
class="m-auto w-2/4 lg:mt-20"
|
class="m-auto w-2/4 lg:mt-20"
|
||||||
v-if="$page.markdownPage.solution_image2"
|
v-if="$page.markdownPage.solution_image2"
|
||||||
@@ -29,6 +24,17 @@
|
|||||||
:cta="$page.markdownPage.cta2"
|
:cta="$page.markdownPage.cta2"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- <g-image
|
||||||
|
class="m-auto w-2/4 lg:mt-20"
|
||||||
|
v-if="$page.markdownPage.solution_image3"
|
||||||
|
:src="$page.markdownPage.solution_image3.src"
|
||||||
|
/> -->
|
||||||
|
|
||||||
|
<!-- <SolutionsHeader
|
||||||
|
v-if="$page.markdownPage.header"
|
||||||
|
:header="$page.markdownPage.header"
|
||||||
|
/> -->
|
||||||
|
|
||||||
<ShowcaseProducts
|
<ShowcaseProducts
|
||||||
:main="$page.markdownPage.productsMain"
|
:main="$page.markdownPage.productsMain"
|
||||||
:products="$page.markdownPage.productData"
|
:products="$page.markdownPage.productData"
|
||||||
@@ -48,11 +54,6 @@
|
|||||||
:cta="$page.markdownPage.cta4"
|
:cta="$page.markdownPage.cta4"
|
||||||
/> -->
|
/> -->
|
||||||
|
|
||||||
<!-- <g-image
|
|
||||||
v-if="$page.markdownPage.solution_image3"
|
|
||||||
:src="$page.markdownPage.solution_image3.src"
|
|
||||||
/> -->
|
|
||||||
|
|
||||||
<!-- <CallToAction
|
<!-- <CallToAction
|
||||||
v-if="$page.markdownPage.cta5"
|
v-if="$page.markdownPage.cta5"
|
||||||
:cta="$page.markdownPage.cta5"
|
:cta="$page.markdownPage.cta5"
|
||||||
@@ -132,7 +133,7 @@
|
|||||||
link
|
link
|
||||||
solution_image
|
solution_image
|
||||||
solution_image2
|
solution_image2
|
||||||
solution_image3
|
# solution_image3
|
||||||
header{
|
header{
|
||||||
title
|
title
|
||||||
subtitle
|
subtitle
|
||||||
|
|||||||
@@ -5,95 +5,97 @@ var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').de
|
|||||||
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
|
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
|
||||||
theme: {
|
theme: {
|
||||||
borderWidth: {
|
borderWidth: {
|
||||||
default: '1px',
|
default: '1px',
|
||||||
'0': '0',
|
'0': '0',
|
||||||
'2': '2px',
|
'2': '2px',
|
||||||
'3': '3px',
|
'3': '3px',
|
||||||
'4': '4px',
|
'4': '4px',
|
||||||
'6': '6px',
|
'6': '6px',
|
||||||
'8': '8px'
|
'8': '8px'
|
||||||
},
|
},
|
||||||
flex: {
|
flex: {
|
||||||
'1': '1 1 0%',
|
'1': '1 1 0%',
|
||||||
auto: '1 1 auto',
|
auto: '1 1 auto',
|
||||||
initial: '0 1 auto',
|
initial: '0 1 auto',
|
||||||
none: 'none',
|
none: 'none',
|
||||||
'post': '1 1 300px',
|
'post': '1 1 300px',
|
||||||
'100': '1 1 100%',
|
'100': '1 1 100%',
|
||||||
'post-large-content': '0 1 361px',
|
'post-large-content': '0 1 361px',
|
||||||
},
|
},
|
||||||
zIndex: {
|
zIndex: {
|
||||||
'-10': '-10',
|
'-10': '-10',
|
||||||
'0': 0,
|
'0': 0,
|
||||||
'10': 10,
|
'10': 10,
|
||||||
'20': 20,
|
'20': 20,
|
||||||
'30': 30,
|
'30': 30,
|
||||||
'40': 40,
|
'40': 40,
|
||||||
'50': 50,
|
'50': 50,
|
||||||
'25': 25,
|
'25': 25,
|
||||||
'50': 50,
|
'50': 50,
|
||||||
'75': 75,
|
'75': 75,
|
||||||
'100': 100,
|
'100': 100,
|
||||||
'1000': 1000,
|
'1000': 1000,
|
||||||
'auto': 'auto',
|
'auto': 'auto',
|
||||||
},
|
},
|
||||||
corePlugins: {
|
corePlugins: {
|
||||||
container: false
|
container: false
|
||||||
},
|
},
|
||||||
extend: {},
|
extend: {},
|
||||||
radialGradients: {
|
radialGradients: {
|
||||||
shapes: { // defaults to this value
|
shapes: { // defaults to this value
|
||||||
'default': 'ellipse',
|
'default': 'ellipse',
|
||||||
},
|
},
|
||||||
sizes: { // defaults to this value
|
sizes: { // defaults to this value
|
||||||
'default': '',
|
'default': '',
|
||||||
},
|
},
|
||||||
positions: { // defaults to these values
|
positions: { // defaults to these values
|
||||||
'default': 'center',
|
'default': 'center',
|
||||||
't': 'top'
|
't': 'top'
|
||||||
},
|
},
|
||||||
colors: { // defaults to {}
|
colors: { // defaults to {}
|
||||||
'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
|
'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {},
|
variants: {},
|
||||||
plugins: [
|
plugins: [
|
||||||
function({
|
require('@tailwindcss/aspect-ratio'),
|
||||||
addComponents
|
|
||||||
}) {
|
|
||||||
addComponents({
|
|
||||||
'.container': {
|
|
||||||
maxWidth: '100%',
|
|
||||||
'@screen sm': {
|
|
||||||
maxWidth: '640px',
|
|
||||||
},
|
|
||||||
'@screen md': {
|
|
||||||
maxWidth: '768px',
|
|
||||||
},
|
|
||||||
'@screen lg': {
|
|
||||||
maxWidth: '1024px',
|
|
||||||
},
|
|
||||||
'@screen xl': {
|
|
||||||
maxWidth: '1040px',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
function({
|
|
||||||
addUtilities,
|
|
||||||
e,
|
|
||||||
theme,
|
|
||||||
variants
|
|
||||||
}) {
|
|
||||||
const colors = flattenColorPalette(theme('borderColor'))
|
|
||||||
|
|
||||||
const utilities = _.flatMap(_.omit(colors, 'default'), (value, modifier) => ({
|
function ({
|
||||||
|
addComponents
|
||||||
|
}) {
|
||||||
|
addComponents({
|
||||||
|
'.container': {
|
||||||
|
maxWidth: '100%',
|
||||||
|
'@screen sm': {
|
||||||
|
maxWidth: '640px',
|
||||||
|
},
|
||||||
|
'@screen md': {
|
||||||
|
maxWidth: '768px',
|
||||||
|
},
|
||||||
|
'@screen lg': {
|
||||||
|
maxWidth: '1024px',
|
||||||
|
},
|
||||||
|
'@screen xl': {
|
||||||
|
maxWidth: '1040px',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
function ({
|
||||||
|
addUtilities,
|
||||||
|
e,
|
||||||
|
theme,
|
||||||
|
variants
|
||||||
|
}) {
|
||||||
|
const colors = flattenColorPalette(theme('borderColor'))
|
||||||
|
|
||||||
[`.${e(`border-t-${modifier}`)}`]: {
|
const utilities = _.flatMap(_.omit(colors, 'default'), (value, modifier) => ({
|
||||||
|
|
||||||
|
[`.${e(`border-t-${modifier}`)}`]: {
|
||||||
borderTopColor: `${value}`
|
borderTopColor: `${value}`
|
||||||
},
|
},
|
||||||
[`.${e(`border-r-${modifier}`)}`]: {
|
[`.${e(`border-r-${modifier}`)}`]: {
|
||||||
|
|||||||