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

Convert why page hardcoded imgs

Browse Source
This commit is contained in:
samaradel
2021-04-07 12:19:53 +02:00
parent bd149db182
commit 558ab10929
12 changed files with 114 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
<template>
<div class="">
<div class="max-w-screen-xl mx-auto py-24">
<!-- token -->
<div
v-if="id == 'token'"
class="brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
@@ -36,6 +37,40 @@
</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-5xl leading-9 font-semibold text-black 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-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>
<div
v-else
class="brandpanel bg-gray-900 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
@@ -83,4 +118,10 @@ export default {
},
},
};
</script>
</script>
<style scoped>
.whybrand {
background-image: linear-gradient(#c2aeef, #82f3fe);
}
</style>

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

@@ -12,6 +12,7 @@
</p>
</div>
<!-- token -->
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
v-if="id == 'token'"
@@ -31,6 +32,7 @@
</a>
</div>
<!-- universe -->
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"
v-else-if="id == 'universe'"
@@ -70,6 +72,46 @@
</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
>
<g-link
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 }}</g-link
>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center" v-else>
<a
v-for="(product, idx) in products"
@@ -121,9 +163,6 @@ export default {
return image;
},
},
mounted() {
console.log(this.products);
},
};
</script>
@@ -131,4 +170,7 @@ export default {
.bannerFondo {
height: 400px;
}
.product {
background-color: #ebfefd;
}
</style>