Feature/80 add servicios section (#88)

* First commit Servicios

* Change color dropdown menu

* Add content

style not defined

* Add Services section first version

This commits adds the final details to the services section with some changes that will be incorporated to our common.css file to enhance code reusability. It also adds a new class for a different background color.

---------

Co-authored-by: ailen grimaldi <[email protected]>

_data/index.yml

@@ -100,4 +100,21 @@ cubo_benefits:
     description: Olvidate de trámites engorrosos. Cubo se encarga de todo el proceso por ti.
   - title: Seguridad y confianza
     icon: 🔐
-    description: Cubo ofrece transparencia, al usar tecnología blockchain las transacciones son públicas.
+    description: Cubo ofrece transparencia, al usar tecnología blockchain las transacciones son públicas.
+
+services:
+  - icon:
+      url: '/../img/mobile.svg'
+      alt: Aplicacion móvil
+    title: Desarrollo de<br> dApps
+    description: Construimos <strong>aplicaciones descentralizadas</strong> robustas, aprovechando la seguridad y transparencia de la tecnología blockchain.
+  - icon:
+      url: ../img/payments.svg
+      alt: Billetera
+    title: Pasarelas de pago descentralizadas
+    description: Agiliza tus transacciones con <strong>sistemas de pago rápidos, fáciles y seguros</strong>, operando en una red blockchain.
+  - icon:
+      url: ../img/puzzle.svg
+      alt: Rompecabezas
+    title: Gestión de comunidades
+    description: Te ofrecemos <strong>soluciones personalizadas</strong> dependiendo tus necesidades para gestionar y hacer crecer tu comunidad en línea, <strong>desde plataformas de chat especializado</strong> para que crees los canales que necesites, pasando por tener tu propio dominio y servidor para que tus usuarios se registren directamente en tu plataforma, hacer tu tienda virtual o website, <strong>hasta sistemas de gobernanza, votaciones y decisiones comunitarias en entornos descentralizados.</strong>

_includes/nav.liquid

@@ -12,7 +12,10 @@
 			Sobre Virto
 		</a>
 		<a {% if page.data.route == "casos-de-uso"%}current{%endif%}" href="/casos-de-uso/" role="menuitem" aria-label="Casos de uso">
-				Casos de uso
+			Casos de uso
+		</a>
+		<a {% if page.data.route == "servicios"%}current{%endif%}" href="/servicios/" role="menuitem" aria-label="Servicios">
+			Servicios
 		</a>
 		<div class="hide">
 			<a {% if page.data.route == "comunidades"%}current{%endif%}" href="/comunidades/" role="menuitem" aria-label="Comunidades locales">
@@ -44,6 +47,9 @@
 			<a {% if page.data.route == "casos-de-uso"%}current{%endif%}" href="/casos-de-uso/" role="menuitem" aria-label="Casos de uso">
 				Casos de uso
 			</a>
+			<a {% if page.data.route == "servicios"%}current{%endif%}" href="/servicios/" role="menuitem" aria-label="Servicios">
+				Servicios
+			</a>
 			<div class="hide">
 			<a {% if page.data.route == "comunidades"%}current{%endif%}" href="/comunidades/" role="menuitem" aria-label="Comunidades locales">
 				Comunidades locales

css/common.css

@@ -66,11 +66,15 @@ span { font-family: inherit; }
 .dark-olive-bg { background-color: var(--clr-olive-darker); }
 .light-green-bg { background-color: var(--clr-green-lighter); }
 .light-lavender-bg { background-color: var(--clr-lavender-lightest); }
+.medium-lavender-bg { background-color: var(--clr-lavender-lighter); }
 .dark-lavender-bg { background-color: var(--clr-lavender-darker); }
+.light-blue-bg { background-color: var(--clr-blue-light); }
+.dark-blue-bg { background-color: var(--clr-blue-dark); }
 
 /*Add one of this classes to your element to add a text-color*/
 .white-text { color: var(--clr-white); }
 .grey-text { color: var(--clr-grey); }
+.light-blue-text { color: var(--clr-blue-light); }
 .dark-olive-text { color: var(--clr-olive-darker); }
 .dark-green-text { color: var(--clr-green-darker); }
 .light-green-text { color: var(--clr-green-lighter); }