123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<script>
|
|
import 'vue3-carousel/dist/carousel.css'
|
|
import ProductFlipCard from "../../components/ProductFlipCard.vue";
|
|
import Certifications from "../../components/Certifications.vue";
|
|
import ProductCarouselVue from "../../components/ProductCarousel.vue";
|
|
import BigCarousel from '../../components/BigCarousel.vue';
|
|
import { products, slides } from '../../data.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
products,
|
|
slides: slides.products
|
|
};
|
|
},
|
|
components: {
|
|
ProductFlipCard,
|
|
Certifications,
|
|
ProductCarouselVue,
|
|
BigCarousel
|
|
},
|
|
methods: {
|
|
download() {
|
|
const fileURL = new URL(`/src/assets/resources/Porfolio_V elemento_${this.$i18n.locale.toUpperCase()}.pdf`, import.meta.url).href;
|
|
window.open(fileURL);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<big-carousel :images="slides"></big-carousel>
|
|
<section class="product-section content">
|
|
<h2>{{ $t('products_page.title') }}</h2>
|
|
<h2>{{ $t('products_page.title1') }}</h2>
|
|
<p>{{ $t('products_page.subtitle1') }}</p>
|
|
<p hidden class="centered"><img src="@images/v-elemento.png" /></p>
|
|
<ProductCarouselVue :products="products" />
|
|
<h3 hidden>{{ $t('products_page.title2') }}</h3>
|
|
<div hidden class="card">
|
|
<img src="@images/kettles.png" alt="">
|
|
<div class="card-content">
|
|
<h3>Wasserkocher mit Filter</h3>
|
|
</div>
|
|
</div>
|
|
<Certifications />
|
|
<h6 class="text-centered">{{ $t('products_page.download')}}</h6>
|
|
<div class="buttons text-centered">
|
|
<button class="mt-2" @click.prevent.stop="download">{{ $t('common.download') }}</button>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.product-section.content {
|
|
h6 {
|
|
margin-top: 64px;
|
|
font-weight: 200;
|
|
font-size: 36px;
|
|
text-align: left;
|
|
line-height: 60px;
|
|
}
|
|
|
|
h2{ background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;
|
|
color: #fff;
|
|
font-size: 36px;
|
|
margin:0 auto;
|
|
font-weight: 700;
|
|
line-height: 8px;
|
|
padding: 24px;
|
|
text-align: center;
|
|
letter-spacing: 3px;
|
|
line-height: 4px;
|
|
}
|
|
h3 {
|
|
margin-top: 64px;
|
|
font-weight: 200;
|
|
font-size: 24px;
|
|
text-align: left;
|
|
line-height: 60px;
|
|
}
|
|
|
|
button {
|
|
width: 154px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
|
|
.card {
|
|
width: 200px;
|
|
height: 210px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
|
|
img {
|
|
position: absolute;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0.9;
|
|
|
|
}
|
|
|
|
h3 {
|
|
position: absolute;
|
|
inset: auto auto 30px 30px;
|
|
margin-top: 0px;
|
|
font-weight: 500;
|
|
color: #603809;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style> |