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

update products

Browse Source
This commit is contained in:
Ehab Hassan
2021-02-09 11:06:40 +02:00
parent 4edc90a58d
commit f6f1873984
18 changed files with 87 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,35 +1,26 @@
<template>
<div>
<div
class="bannerFondo bg-green-800 bg-left-top bg-auto bg-repeat-x"
style="background-image: url(./img/continuartl_4.png)"
></div>
<div class="py-8 mb-5">
<div class="w-full text-center">
<p class="text-sm tracking-widest text-gray-700">{{ main.subtitle }}</p>
<h1 class="text-4xl mt-2 mb-6 leading-tight font-heading">
{{ main.title }}
</h1>
<g-image :src="img(main.image)" class="hidden md:block" />
</div>
<div class="-mt-64">
<div class="w-full text-center">
<p class="text-sm tracking-widest text-white">{{ main.subtitle }}</p>
<h1 class="font-bold text-5xl text-white">{{ main.title }}</h1>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:hidden">
<div
v-for="(product, idx) in products"
:key="idx"
class="p-2 sm:p-0 text-center cursor-pointer"
>
<div
v-for="(product, idx) in products"
:key="idx"
class="p-2 sm:p-10 text-center cursor-pointer"
class="m-auto max-w-sm rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white"
>
<div
class="py-16 max-w-sm rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white"
>
<div class="space-y-10">
<i class="fa fa-spa" style="font-size: 48px"></i>
<div class="px-6 py-4">
<div class="space-y-5">
<div class="font-bold text-xl mb-2">{{ product.title }}</div>
<p class="text-gray-700 text-base">{{ product.excerpt }}</p>
</div>
</div>
</div>
<div class="px-2 py-2">
<g-image :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>
</div>
@@ -41,6 +32,13 @@
<script>
export default {
props: ["products", "main"],
methods: {
img(image) {
if (!image) return "";
if (image.src) return image.src;
return image;
},
},
};
</script>