wip migration
This commit is contained in:
María
233
pages/page/info.vue
Normal file
233
pages/page/info.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="header col-12" align="center">
|
||||
<h1 class="title">Sobre nosotros</h1>
|
||||
<img src="@/assets/img/latienda-lineapuntos-2.svg" alt="" class="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-proj row justify-content-center">
|
||||
<div class="col-md-4" align="center">
|
||||
<img class="image" src="@/assets/img/footer-bolsa.svg" alt="" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p>
|
||||
Nueva plataforma creada por COCETA para facilitar que cualquier
|
||||
persona pueda encontrar de forma sencilla los productos y servicios
|
||||
ofrecidos por las cooperativas de trabajo de España.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-proj tienda row col-md-12 justify-content-center">
|
||||
<div class="col-md-4 tienda-content" align="center">
|
||||
<p>
|
||||
<b>latienda.coop</b> es un gran escaparate virtual que COCETA pone a
|
||||
disposición de todas las cooperativas de trabajo para facilitar la
|
||||
digitalización de su proceso de venta, así cómo para fomentar el
|
||||
consumo de productos y servicios cooperativos.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4" align="center">
|
||||
<img
|
||||
class="image-escaparate"
|
||||
src="@/assets/img/latienda-escaparate.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row options">
|
||||
<div class="col-md-4 option" align="center">
|
||||
<h1 class="options-title">Buscador inteligente</h1>
|
||||
<p class="options-text">
|
||||
Una vez encuentra el producto o servicio deseado la plataforma lo
|
||||
redirige a la tienda de la cooperativa para realizar el proceso de
|
||||
compra. En caso de que la cooperativa no cuente con una tienda online,
|
||||
se le facilitará un formulario para que haga su pedido.
|
||||
</p>
|
||||
<img
|
||||
src="@/assets/img/latienda-sobrenosotros-1.svg"
|
||||
alt=""
|
||||
class="options-image h-image"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-4 option" align="center">
|
||||
<h1 class="options-title">Venta directa</h1>
|
||||
<p class="options-text">
|
||||
Funciona a modo de una gran buscador de productos y servicios
|
||||
cooperativos, en el que usuario puede buscar lo que necesite,
|
||||
filtrando por diferentes criterios.
|
||||
</p>
|
||||
<img
|
||||
src="@/assets/img/latienda-sobrenosotros-2.svg"
|
||||
alt=""
|
||||
class="options-image"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-4 option" align="center">
|
||||
<h1 class="options-title">Fácil gestión</h1>
|
||||
<p class="options-text">
|
||||
Cualquier cooperativa de trabajo de España puede incluir sus productos
|
||||
o servicios en latienda.coop. Podrá gestionarlos desde el panel de
|
||||
control o configurando la sicnronización con los productos de su
|
||||
propia tienda online en <b>Woocommerce</b>.
|
||||
</p>
|
||||
<img
|
||||
src="@/assets/img/latienda-sobrenosotros-3.svg"
|
||||
alt=""
|
||||
class="options-image h-image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row woo-banner">
|
||||
<div class="col-md-12 woo-banner-content" align="center">
|
||||
<span>Compatible con</span>
|
||||
<img src="@/assets/img/latienda-woocommerce-logo.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<BannerCoop />
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
definePageMeta({
|
||||
layout: 'main',
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-fluid {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
@include mobile {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $xl;
|
||||
color: $color-navy;
|
||||
margin-bottom: 35px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-proj {
|
||||
padding: 30px 30px;
|
||||
margin: 0;
|
||||
img {
|
||||
width: 100px;
|
||||
}
|
||||
p {
|
||||
font-size: $s;
|
||||
color: $color-navy;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-escaparate {
|
||||
width: 18rem;
|
||||
|
||||
@include mobile {
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tienda {
|
||||
background-color: $color-lighter-green;
|
||||
}
|
||||
|
||||
.options {
|
||||
padding: 80px 30px;
|
||||
|
||||
.option {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.options-title {
|
||||
font-size: $s;
|
||||
font-weight: $bold;
|
||||
color: $color-navy;
|
||||
}
|
||||
.options-text {
|
||||
margin-top: 8px;
|
||||
font-family: $font-secondary;
|
||||
font-size: $xs;
|
||||
color: $color-greytext;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.options-image {
|
||||
width: 150px;
|
||||
@include mobile {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
.h-image {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.woo-banner {
|
||||
height: 150px;
|
||||
background-color: #f6eef8;
|
||||
@include mobile {
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
.woo-banner-content {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
|
||||
span {
|
||||
@include mobile {
|
||||
font-size: $s;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
@include mobile {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
justify-self: center;
|
||||
margin-right: 20px;
|
||||
font-weight: $bold;
|
||||
font-size: $l;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user