152/last adjustments (#153)

* copys corrected * modify cta color, and button's width * show link for casos-de-uso * delete console.logs * add images using github link * remove general styles * change classnames and move styles to common.css dialog and scroll link/arrow * modify background images for lavender ones * fix click app-button * fix padding mobile button * change blue for lavender, delete timeline animation, add padding on team section, reduce width h1, update size core-team images * add new use case * move allies svg in order to remove white space, fix max-width for cta svg, fix whitepaper button position for bigger screens, separate key_features--title from bottom
virto-network · Jun 25, 2024 · db46abd · db46abd
1 parent 65f5943
commit db46abd
Show file tree

Hide file tree

Showing 16 changed files with 194 additions and 227 deletions.
diff --git a/_data/index.yml b/_data/index.yml
@@ -58,10 +58,10 @@ home_sections:
     - id: testimonials
       title: Testimonios
       testimonials:
-          - avatar: "/../img/david.jpeg"
+          - avatar: https://avatars.githubusercontent.com/u/5241972?v=4
             person: David Barinas, YCombinator Founder
             message: A través de Virto abrí la cuenta organizacional de mi empresa de manera rápida, lo que me permitió recibir y realizar pagos de manera eficiente sin limitaciones.
-          - avatar: "/../img/dani.jpeg"
+          - avatar: https://avatars.githubusercontent.com/u/1329925?v=4
             person: Daniel Olano, CEO de Virto
             message: Como fundador de Virto, he experimentado de primera mano los beneficios de utilizar nuestra tecnología blockchain. Ha facilitado nuestro proceso de toma de decisiones, automatizado el manejo de mi equipo y pagos, y aumentado la transparencia en toda nuestra organización.
     - id: qa
@@ -72,13 +72,13 @@ home_sections:
           - question: ¿Quién puede usar Virto?
             answer: Virto está diseñado para cualquier tipo de organización, desde pequeñas empresas y startups hasta grandes corporaciones y organizaciones sin fines de lucro que necesiten una solución para la administración de sus fondos de manera colaborativa. <a href="/casos-de-uso/">Conoce nuestros casos de uso.</a>
           - question: ¿Es seguro utilizar Virto para transacciones financieras?
-            answer: Sí, Virto  usa cryptografia avanzada en su tecnologia blockhain para proteger la información financiera y las transacciones de la organización.
+            answer: Sí, Virto  usa criptografia avanzada en su tecnologia blockhain para proteger la información financiera y las transacciones de la organización.
           - question: ¿Cómo se realiza la configuración inicial de una cuenta en Virto?
             answer: La configuración inicial de una cuenta en Virto es sencilla. Solo necesitas registrarte, agregar los miembros de tu organización, y empezar a utilizar la plataforma para gestionar los fondos.
           - question: ¿Cómo puedo recargar fondos en mi cuenta Virto?
             answer: Para recargar fondos en tu cuenta Virto, inicia sesión en tu cuenta, selecciona la opción "Recargar fondos", elige el método de pago que prefieras (transferencia bancaria, tarjeta de crédito, etc.), ingresa el monto que deseas recargar y confirma la transacción.
           - question: ¿Qué se necesita para abrir una cuenta con Virto?
-            answer: Para abrir una cuenta con Virto, necesitas proporcionar información básica sobre tu organización, incluyendo nombre, sector, descripción. Además podrás configurar tu cuenta y agregar miembros de tu organización.
+            answer: Para abrir una cuenta con Virto, necesitas proporcionar información básica sobre tu organización, incluyendo nombre, sector y descripción. Además podrás configurar tu cuenta y agregar miembros de tu organización.
     - id: virto-supporters
       title: Conoce a Quienes nos Apoyan
       supporters:
@@ -208,6 +208,14 @@ use_cases:
         tag_class: blue
         example: Imagina un equipo de producto dentro de tu empresa utilizando Virto para recibir su presupuesto. Con nuestra plataforma, el equipo puede tomar decisiones sobre cómo utilizar estos recursos, ya sea para proyectos específicos o para optimizar operaciones, asegurando así una gestión eficiente y transparente.
         img: "../img/equipos.jpg"
+      - title: Creación y administración de token
+        subtitle: <strong>¡Lleva la innovación financiera a un siguiente nivel con Virto!</strong>
+        description: Crea y administra tu propio token usando la plataforma de Virto. Haz click en Ver más para conocer todos los beneficios.
+        tag_one: Startups
+        tag_two: Tokens
+        tag_class: green
+        example: Imagina que tu startup crea un token para su plataforma de ecommerce. Este token te permite reducir los costos transaccionales en comparación con los mercados tradicionales. Usando Virto, puedes tomar decisiones clave sobre la emisión y las políticas de uso del token. Esto optimiza tus operaciones y asegura una gestión transparente y participativa de tus recursos digitales. Además, puedes ofrecer recompensas y descuentos exclusivos a tus clientes, fomentando la lealtad y atrayendo a nuevos usuarios interesados en beneficios únicos. 
+        img: "../img/token.jpg"
   - id: cta
     eyebrow: Comienza ahora <br> <span class="dark-lavender-text"> Da el primer paso hacia el éxito de tu organización con Virto</span>
     title: ¿Quieres explorar un nuevo caso de uso? <br> ¡Agenda una llamada con nuestro equipo!
@@ -247,7 +255,7 @@ services:
           img: 'rol_managment.svg'
   - id: allies
     title: <span class="dark-green-text">Tu Aliado en la Gestión Remota</span>
-    paragraph: Somos Virto, pioneros en implementar infraestructura web 3 para proporcionar una plataforma robusta y segura.
+    paragraph: Somos Virto, <strong>pioneros en implementar infraestructura web 3</strong> para proporcionar una plataforma robusta y segura.
     strong_paragraph: Nuestras herramientas están diseñadas para superar los desafíos de la gestión remota, reduciendo costos y elevando la seguridad en todas tus operaciones organizacionales.
     cta: Conoce nuestro Protocolo
     href: ./../docs/whitepaper.html

diff --git a/_includes/Happy person.svg → _includes/dancingperson.svg b/_includes/Happy person.svg → _includes/dancingperson.svg
diff --git a/_includes/footer.liquid b/_includes/footer.liquid
@@ -5,12 +5,11 @@
         <nav>
             <ul class="nav-links bolder">
 			<div class="hide">
-				<li><a href="/casos-de-uso/" >Casos de uso</a></li>
                 <li><a href="/comunidades-locales/">Comunidades locales</a></li>
-                <li><a href="#">Contacto</a></li>
 			</div>
 				<li><a href="/sobre-virto/" >Sobre Nosotros</a></li>
 				<li><a href="/servicios/" >Servicios</a></li>
+				<li><a href="/casos-de-uso/" >Casos de uso</a></li>
                 <li><a href="/blog/" >Blog</a></li>
                 <li><a href="/docs/whitepaper.html" >Whitepaper</a></li>
             </ul>

diff --git a/_includes/nav.liquid b/_includes/nav.liquid
@@ -26,7 +26,7 @@
 			Blog
 		</a>
 		<button class="app-button">
-			<a href="https://virto.app/">
+			<a class="app-button-link" href="https://virto.app/">
 			Ingresar a la app
 			</a>
 		</button>

diff --git a/_layouts/index.liquid b/_layouts/index.liquid
@@ -54,8 +54,6 @@ const apiKeyAirtable = '{{ env.AIRTABLE_API_KEY }}';
 const baseId = '{{ env.AIRTABLE_BASE_ID }}';
 const table = '{{ env.AIRTABLE_TABLE_ID }}';
 
-console.log(baseId, table);
-
 const mailForm = document.getElementById('mail-form');
 const modal = document.querySelector('[data-modal]')
 const mailButton = document.getElementById('mail-button');

diff --git a/about.liquid b/about.liquid
@@ -10,12 +10,6 @@ data:
 body {
 	overflow-x: hidden !important;
 }
-/*Dark Nav*/
-#nav { background-color: var(--clr-blue-light); }
-#nav a { color: var(--clr-olive-darker); }
-#menu-dropdown a { color: var(--clr-green-darker); }
-#menu-icon svg line { stroke: var(--clr-olive-darker); }
-#virto-logo svg path { fill: var(--clr-olive-darker); }
 
 section { padding: 2em;}
 #hero {
@@ -24,7 +18,7 @@ section { padding: 2em;}
   	background-repeat: no-repeat;
   	background-attachment: fixed;
   	background-size: cover;
-	background-color: var(--clr-blue-light);
+	background-color: var(--clr-lavender-lightest);
 }
 
 section >  article {
@@ -57,17 +51,6 @@ section >  article {
 	max-width: 900px;
 }
 
-.timeline-content h2 {
-  animation-delay: 0.2s;
-}
-
-.timeline-content h3:nth-child(1) {
-  animation-delay: 0.4s;
-}
-
-.timeline-content h3:nth-child(2) {
-  animation-delay: 0.6s;
-}
 
 #action-plan ul.step-list {
     display: flex;
@@ -105,7 +88,7 @@ section >  article {
 }
 
 #core-team, #team h2, #team h3 {
-	padding-left: 28px;
+	padding: 0 32px;
 }
 
 #core-team span { color: var(--clr-green-darker); }
@@ -117,11 +100,13 @@ section >  article {
 
 #core-team div { border-left: 3px solid var(--clr-green-darker); padding-left: 10px; }
 #core-team img {
-	width: 250px;
-	height: 250px;
-	border-radius: 50%;
-	margin-right: 10px;
-	background-color: var(--clr-green-darker);
+    width: 100%;
+    max-width: 20vw;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    margin-right: 10px;
+	background-color: var(--clr-whitest);
 }
 
 #team-members {
@@ -157,7 +142,7 @@ section >  article {
 
 	<section {% if about.id == "hero" %} id="hero" class="left dark-olive-text">
 		<article class="animated">
-			<h1>{{ about.title }}</h1>
+			<h1 class="maxwidth--text_desktop">{{ about.title }}</h1>
 		</article>
 	</section>
 {% endif %}
@@ -241,23 +226,4 @@ section >  article {
 {% endif %}
 
 {% endfor %}
-
-<script>
-
-const observerTimeline = new IntersectionObserver(entries => {
-  		entries.forEach(entry => {
-			if (entry.intersectionRatio > 0) {
-				entry.target.classList.add('animate');
-				observer.unobserve(entry.target);
-			}
-  		});
-	}, { threshold: 0.3 }); 
-
-	const animatedTimelineElements = document.querySelectorAll('.');
-
-	animatedTimelineElements.forEach(element => {
-		observerTimeline.observe(element);
-	});
-
-</script>
 </body>
diff --git a/css/common.css b/css/common.css
@@ -168,3 +168,67 @@ a:focus-visible {
 textarea:focus, input:focus {
     outline: none;
 }
+
+.scroll-link {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .scroll-arrow {
+    animation: bounce 1s ease-in-out infinite;
+  }
+
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-10px);
+    }
+    60% {
+      transform: translateY(-5px);
+    }
+  }
+
+dialog::backdrop {
+    background-color: hsla(163, 49%, 14%, 0.97);
+}
+
+dialog {
+    padding: 20px;
+    background: none;
+    border-radius: 35px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
+    max-width: 700px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+dialog img {
+    width: 120px;
+}
+
+#modal-message * {
+    padding: .5em;
+}
+
+.close-button {
+    color: var(--clr-olive-darker);
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: var(--clr-green-darker);
+    text-decoration: none;
+    cursor: pointer;
+}
+
diff --git a/css/index.css b/css/index.css
@@ -260,67 +260,3 @@ figure.logo svg {
 #mail-cta * {
     width: 90%;
 }
-
-/*move to common css and set a more general name classes*/
-.services-section__scroll-link {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .services-section__scroll-arrow {
-    animation: bounce 1s ease-in-out infinite;
-  }
-
-  @keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
-      transform: translateY(0);
-    }
-    40% {
-      transform: translateY(-10px);
-    }
-    60% {
-      transform: translateY(-5px);
-    }
-  }
-
-dialog::backdrop {
-    background-color: hsla(163, 49%, 14%, 0.97);
-}
-
-dialog {
-    padding: 20px;
-    background: none;
-    border-radius: 35px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
-    max-width: 700px;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-dialog img {
-    width: 120px;
-}
-
-#modal-message * {
-    padding: .5em;
-}
-
-.close-button {
-    color: var(--clr-olive-darker);
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    font-size: 24px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.close-button:hover,
-.close-button:focus {
-    color: var(--clr-green-darker);
-    text-decoration: none;
-    cursor: pointer;
-}
diff --git a/css/layout.css b/css/layout.css
@@ -59,10 +59,6 @@ nav a {
   color: var(--clr-lavender-darker) !important;
 }
 
-nav button a {
-  height: auto !important;
-}
-
 #virto-logo {
   margin-right: auto;
   display: flex;
@@ -88,13 +84,22 @@ nav a:not(.logo) {
 #virto-logo:focus {
   outline: 3px solid var(--clr-lavender-darker);
 }
-.top-nav a:not(.logo) {
+.top-nav a:not(.logo)  {
   color: var(--clr-lavender-lightest);
   height: var(--nav-height);
   position: relative;
   font-size: clamp(1rem, calc(0.9rem + 0.7vw), 1.3rem);
 }
 
+.top-nav a.app-button-link  {
+  height: 6vh;
+  border-radius:50px;
+}
+
+.app-button, .app-button-mobile {
+  padding: 0;
+}
+
 @media screen and (max-width: 1300px) {
   .top-nav a:not(.menu-icon), .app-button {
     display: none;