some index components changed
This commit is contained in:
María
91
components/LogosWithText.vue
Normal file
91
components/LogosWithText.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<section :id="id" class="iniciativa-section">
|
||||
<div class="iniciativa-header">
|
||||
<h3>Una iniciativa colectiva</h3>
|
||||
<p>
|
||||
kit-ECO.social es posible gracias al trabajo conjunto de organizaciones
|
||||
que apuestan por una economía social transformadora.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="iniciativa-logos">
|
||||
<li>
|
||||
<img
|
||||
src="/assets/img/logo-enreda.png"
|
||||
alt="Logo de Enreda"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="/assets/img/logo-nortes.png"
|
||||
alt="Logo de Nortes"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="/assets/img/logo-ecored.png"
|
||||
alt="Logo de Ecored"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.iniciativa-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem; // gap-12
|
||||
margin-bottom: 2rem; // mb-8
|
||||
padding: 2rem 1rem 4rem; // pt-8 px-4 pb-16
|
||||
max-width: 48rem; // max-w-3xl
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.iniciativa-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
font-size: $h3;
|
||||
font-weight: $bold;
|
||||
margin-bottom: 1.5rem; // mb-6
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.125rem; // text-lg
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.iniciativa-logos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 2rem; // gap-8
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
grid-column: span 12;
|
||||
height: 5rem; // h-20
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -23,16 +23,16 @@
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<p class="nav-text">Inicio</p>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<NuxtLink to="/catalogo" class="nuxt-link">
|
||||
<p class="nav-text">Catálogo</p>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<NuxtLink to="/productoras" class="nuxt-link">
|
||||
<p class="nav-text">Productoras</p>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<p class="nav-text">Únete</p>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<NuxtLink to="https://www.kit-eco.social/es" class="nuxt-link">
|
||||
<p class="nav-text">kit-eco.social</p>
|
||||
</NuxtLink>
|
||||
<div class="nav-buttons-line"></div>
|
||||
|
||||
@@ -27,16 +27,17 @@
|
||||
<span class="section-text">Inicio</span>
|
||||
</li>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/c">
|
||||
<NuxtLink to="/productoras">
|
||||
<li class="section" @click="isMenuOpen = !isMenuOpen">
|
||||
<img
|
||||
class="section-img"
|
||||
src="@/assets/img/latienda-tienda-nav.svg"
|
||||
alt=""
|
||||
/>
|
||||
<span class="section-text">Cooperativas</span>
|
||||
<span class="section-text">Productoras</span>
|
||||
</li>
|
||||
</NuxtLink>
|
||||
<!-- TODO: cambiar link -->
|
||||
<NuxtLink to="/page/info">
|
||||
<li class="section" @click="isMenuOpen = !isMenuOpen">
|
||||
<img
|
||||
@@ -44,7 +45,17 @@
|
||||
src="@/assets/img/latienda-bag.svg"
|
||||
alt=""
|
||||
/>
|
||||
<span class="section-text">Sobre nosotros</span>
|
||||
<span class="section-text">Únete</span>
|
||||
</li>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="https://www.kit-eco.social/es">
|
||||
<li class="section" @click="isMenuOpen = !isMenuOpen">
|
||||
<img
|
||||
class="section-img"
|
||||
src="@/assets/img/latienda-bag.svg"
|
||||
alt=""
|
||||
/>
|
||||
<span class="section-text">kit-eco.social</span>
|
||||
</li>
|
||||
</NuxtLink>
|
||||
<li class="section" @click="isMenuOpen = !isMenuOpen">
|
||||
|
||||
119
components/TextWithImageAndButton.vue
Normal file
119
components/TextWithImageAndButton.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<section class="proyecto-section">
|
||||
<div class="content">
|
||||
<h2>
|
||||
¿Tienes un proyecto con valores?<br />
|
||||
<span> Súmate a nuestra red.</span>
|
||||
</h2>
|
||||
|
||||
<div class="text-block">
|
||||
<p>
|
||||
Si elaboras productos o servicios desde una perspectiva social,
|
||||
cooperativa o sostenible, este espacio es para ti.
|
||||
<br />
|
||||
Publica tus productos, conecta con personas conscientes y crece con
|
||||
nosotras.
|
||||
</p>
|
||||
|
||||
<NuxtLink to="/busqueda" class="link">
|
||||
<ButtonCTA class="btn-primary">QUIERO REGISTRARME</ButtonCTA>
|
||||
</NuxtLink>
|
||||
|
||||
<small>
|
||||
Solo para entidades o personas con propuestas alineadas con la economía
|
||||
social y solidaria.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-wrapper">
|
||||
<img
|
||||
src="/assets/img/joven-vendedor.png"
|
||||
alt="Personas intercambiando productos"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.proyecto-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: linear-gradient($color-consumo-base-light, $color-bg-light);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
gap: 3rem;
|
||||
margin: 2rem 0 4rem;
|
||||
|
||||
@media (min-width: tablet) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
h2 {
|
||||
font-size: $h2;
|
||||
font-weight: $bold;
|
||||
line-height: 1.3;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.text-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
margin-top: 1rem;
|
||||
|
||||
p {
|
||||
font-size: $l;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: $color-button;
|
||||
color: #fff;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: $color-button;
|
||||
border: 1px solid $color-button;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: $m;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border-radius: 1rem;
|
||||
object-fit: cover;
|
||||
transform: rotate(-2deg); // para el toque inclinado que se ve en tu captura
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user