Refactor/92 consistent design (#93)

* Add general configurations for CTA class and header-0 class for biggest headers.

* Delete cta class from files

* Change about url and styles from about.liquid, add links on footer

* Delete general props in order to be moved to common.css

* Refactor: Unifying Styling Implementations

Move general css properties from section files to common.css. Add <article> tags to the index.liquid sections to establish a consistent structure and spacing. Delete unused classes. Add header-1 and header-2 classes. Change #presentacion for #presentation. Add build_machine to _includes folder

* Delete unnecessary font weight classes from index

* Condensed classes into broader elements to avoid redundancy.

* Move content to data.yml

* Closes #76 fixes cutted titles from oldest posts

* Move scroll down to index.liquid layout and css properties for scroll down and up to common.css, set temporary display none for scroll down and up

* #post centered again

* Delete duplicated img and changed css selector

---------

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

_data/index.yml

@@ -4,40 +4,32 @@ description: |
 default_message:
   Coming soon.
 
-use_cases:
-  - cubo
-  - bloque
+cards_to_sections:
+  - title: ¿Por qué Virto?
+    img: "img/build.svg"
+    alt: build
+    content: Explora cómo Virto equipa con herramientas para crear en la Web 3.0, impulsando soluciones reales en un ecosistema descentralizado.
+    href: "/sobre-virto/#benefits"
+    link: Ver más
+  - title: Quienes nos apoyan
+    img: "img/window.svg"
+    alt: window
+    content: Conoce a nuestros partners estratégicos que respaldan la visión de Virto, uniendo fuerzas para una Web 3.0 inclusiva y sostenible.
+    href: "/sobre-virto/#partners"
+    link: Ver más
+  - title: Unirte a comunidades locales
+    img: "img/group.svg"
+    alt: "community"
+    content: Descubre cómo Virto reduce costos de intermediación, fomentando democracia y colaboración en comunidades locales a través de la blockchain.
+    href: "/coming-soon/"
+    link: Ver más
 
-community: 
-
-developers: 
-  - whitepapers
-  - tools
-  - guides
-
-about_list:
-- name: Meet Virto
-  desc: unavailable
-- name: Team Virto
-  desc: unavailable
-- name: Partners
-  desc: unavailable
-- name: Why Virto
-  desc: unavailable
-
-contact:
-
-blogs:
-  -  for developers
-  -  for users
-
-
-about:
-  one: 'Virto es un revolucionario proyecto basado en el ecosistema Polkadot, diseñado para proporcionar las herramientas que necesitas para desarrollar, integrar y gestionar la tecnología blockchain, facilitando su adopción en tu negocio, no importa el tamaño o tipo.'
-  two: 'Desde nuestro ecosistema ayudamos a los negocios a reducir costos de transacción y a mejorar su eficiencia operativa. ¿Te imaginas aumentar tus ingresos y abrir nuevas oportunidades en mercados emergentes? Con Virto lo puedes lograr sin complicaciones mientras ahorras tiempo.'
-  three: 'Creamos una plataforma donde las transacciones son confiables, sin necesidad de intermediarios. Queremos que te sientas seguro al saber que estás creando un impacto positivo en tu comunidad local al permitir un comercio más directo y justo.'
-  four: 'Ahora, imagina todo lo que puedes lograr con Virto: desarrolla tu propio negocio blockchain, ahorra costos y tiempo, mejora la eficiencia de tu operación y crea un impacto positivo en tu comunidad.'
-  call_to_action: '¿Te atrae la idea? Entonces, ¡únete a nuestra comunidad hoy!'
+virto_benefits:
+  - item: <span>Aumentamos la seguridad</span> de tus transacciones.
+  - item: <span>Reducimos costos</span> de las transacciones.
+  - item: Mejoramos su <span>eficiencia operativa.</span>
+  - item: Al usar nuestras herramientas puedes <span>formar parte de comunidades.</span>
+  - item: Acercamos un <span>comercio más directo y justo</span>, con la <span>participación en la gobernanza</span> de los proyectos.
 
 team_members:
   - name: <span>Daniel</span><br> Olano

_includes/footer.liquid

@@ -4,7 +4,9 @@
         </a>
         <nav>
             <ul class="nav-links bolder">
-                <li><a href="/about/" >Sobre Virto</a></li>
+                <li><a href="/sobre-virto/" >Sobre Virto</a></li>
+				<li><a href="/casos-de-uso/" >Casos de uso</a></li>
+                <li><a href="/servicios/" >Servicios</a></li>
 				<div class="hide">
                 <li><a href="#">Comunidades locales</a></li>
                 <li><a href="#">Contacto</a></li>

_includes/nav.liquid

@@ -8,8 +8,8 @@
 		<a {% if page.data.route == "home"%}current{%endif%}" href="/" id="virto-logo" role="menuitem" aria-label="Inicio">
 			{% include "virto_logo.svg" %}
 		</a>
-		<a {% if page.data.route == "about"%}current{%endif%}" href="/about/" id="about-link" role="menuitem" aria-label="Sobre Virto">
-			Sobre Virto
+		<a {% if page.data.route == "about"%}current{%endif%}" href="/sobre-virto/" id="about-link" role="menuitem" aria-label="Sobre Virto">
+		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
@@ -41,7 +41,7 @@
 		</a>
 		<nav id="menu-dropdown" aria-label="Secundaria">
 		    <a id="close-menu" class="close-menu" aria-label="Cerrar menú"></a>
-			<a {% if page.data.route == "about"%}current{%endif%}" href="/about/" role="menuitem" aria-label="Sobre Virto">
+			<a {% if page.data.route == "about"%}current{%endif%}" href="/sobre-virto/" role="menuitem" aria-label="Sobre Virto">
 				Sobre Virto
 			</a>
 			<a {% if page.data.route == "casos-de-uso"%}current{%endif%}" href="/casos-de-uso/" role="menuitem" aria-label="Casos de uso">

_layouts/blog.liquid

@@ -11,14 +11,14 @@
 	body { display: flex; flex-direction: column; }
 	#blog { width: 100%; max-width: var(--max-width); margin: auto; }
 	main { flex: 1; padding: 1rem; }
-	figure { display: flex; align-items: center; flex-direction: column; }
+	figure { margin: 1em 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
 	figure svg {
 		height: 100%; 
 		width: 100%;
 		max-width: 200px;
 		margin: auto;
 	}
-	h1 { height: 20vh; display: flex; }
+	h1 { display: flex; }
 
 	#posts { flex: 1; margin: 0; padding: 0; list-style: none; }
 	#posts li { position: relative; width: 100%; margin: 1rem 0; }
@@ -30,7 +30,7 @@
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
-		padding-bottom: 5%;
+		padding-bottom: 10%;
 	}
 
 	#posts .card img {

_layouts/index.liquid

@@ -16,6 +16,11 @@
 <body class="hidden">
 	{% include "nav.liquid" %}
 		<main>{{ page.content }}</main>
+		<a href="#footer" class="scroll-down-link dark-olive-text center-arrow">Ir al final
+			<figure class="link-arrow">
+				{% include "down.svg" %}
+			</figure>
+	 	</a>
 	{% include "footer.liquid" %}
 	<script>
 	const observer = new IntersectionObserver(entries => {

_layouts/post.liquid

@@ -26,8 +26,8 @@
 		overflow: hidden;
 	}
 	header img { object-fit: cover; width: 100%; height: 100%; }
-	article { font-size: 1.1em; line-height: 1.8em; max-width: 700px; margin: auto; }
-	article>p, article>h3 { margin: calc(1.5rem + 2vmin) 0; }
+	#post article { font-size: 1.1em; line-height: 1.8em; max-width: 700px; margin: auto; }
+	#post article>p, article>h3 { margin: calc(1.5rem + 2vmin) 0; }
 	article strong { color: var(--clr-olive-darker); }
 	article a { color: var(--clr-lavender-darker); }
 	article ul { list-style: "⬡   "; }