diff --git a/_data/index.yml b/_data/index.yml index 64e9680..23d7b65 100644 --- 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. Conoce nuestros casos de uso. - 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: ¡Lleva la innovación financiera a un siguiente nivel con Virto! + 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
Da el primer paso hacia el éxito de tu organización con Virto title: ¿Quieres explorar un nuevo caso de uso?
¡Agenda una llamada con nuestro equipo! @@ -247,7 +255,7 @@ services: img: 'rol_managment.svg' - id: allies title: Tu Aliado en la Gestión Remota - paragraph: Somos Virto, pioneros en implementar infraestructura web 3 para proporcionar una plataforma robusta y segura. + paragraph: Somos Virto, pioneros en implementar infraestructura web 3 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 b/_includes/dancingperson.svg similarity index 63% rename from _includes/Happy person.svg rename to _includes/dancingperson.svg index d80afc9..e7c2536 100644 --- a/_includes/Happy person.svg +++ b/_includes/dancingperson.svg @@ -1,16 +1,16 @@ - + - + - - - - + + + + - + diff --git a/_includes/footer.liquid b/_includes/footer.liquid index fc88d27..94d0ce0 100644 --- a/_includes/footer.liquid +++ b/_includes/footer.liquid @@ -5,12 +5,11 @@ diff --git a/_includes/nav.liquid b/_includes/nav.liquid index f9ef3e1..101ee0c 100644 --- a/_includes/nav.liquid +++ b/_includes/nav.liquid @@ -26,7 +26,7 @@ Blog diff --git a/_layouts/index.liquid b/_layouts/index.liquid index f50ecc0..c228370 100644 --- 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 index b2835dd..e1e72a0 100644 --- 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 {
-

{{ about.title }}

+

{{ about.title }}

{% endif %} @@ -241,23 +226,4 @@ section > article { {% endif %} {% endfor %} - - \ No newline at end of file diff --git a/css/common.css b/css/common.css index 5164747..f0bbfdf 100644 --- 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 index fec3243..bac15a9 100644 --- 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 index 6f77f88..e1ab69e 100644 --- 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; diff --git a/img/about_bg.svg b/img/about_bg.svg index 6d70fdd..6f9dd58 100644 --- a/img/about_bg.svg +++ b/img/about_bg.svg @@ -1,46 +1,46 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + diff --git a/img/about_bg_sm.svg b/img/about_bg_sm.svg index a1e0928..2b687d7 100644 --- a/img/about_bg_sm.svg +++ b/img/about_bg_sm.svg @@ -1,34 +1,41 @@ - - - - - - - - - + + + + + + + + + + - - - - - - + + + + + + - - + + - + - + - - + + + + + + + + diff --git a/img/dani.jpeg b/img/dani.jpeg deleted file mode 100644 index d8a565b..0000000 Binary files a/img/dani.jpeg and /dev/null differ diff --git a/img/david.jpeg b/img/david.jpeg deleted file mode 100644 index cae170a..0000000 Binary files a/img/david.jpeg and /dev/null differ diff --git a/img/token.jpg b/img/token.jpg new file mode 100644 index 0000000..0eb9333 Binary files /dev/null and b/img/token.jpg differ diff --git a/index.liquid b/index.liquid index b487346..b7f074c 100644 --- a/index.liquid +++ b/index.liquid @@ -12,9 +12,9 @@ data:

{{ home_section.eyebrow }}

Virto: {{ home_section.title }}

{{ home_section.paragraph }}

- - {{ home_section.call_to_action }} -
+ + {{ home_section.call_to_action }} +
{% include "services_arrow.svg" %}
diff --git a/services.liquid b/services.liquid index a12e783..c69cc80 100644 --- a/services.liquid +++ b/services.liquid @@ -51,27 +51,6 @@ section { stroke-dashoffset: -10; } } -.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); - } -} #key_features { background-image: url('/img/features_bg.svg'); @@ -103,7 +82,7 @@ section { .key_features--title { position: relative; - bottom: -50px; + bottom: -20px; width: 60%; } @@ -141,6 +120,7 @@ section { #allies article { gap: 3em; + flex-direction: column; } .allies--container { @@ -151,7 +131,7 @@ section { max-width: 900px; } .allies--svg { - width: 40%; + width: 50%; } .floating-rotation { @@ -189,11 +169,13 @@ section { } .cta_services--svg { align-items: flex-start; + max-width: 90%; } #mail-button { background-color: var(--clr-lavender-lighter); color: var(--clr-olive-darker); + width: 80%; } @media (max-width: 1279px) { @@ -213,7 +195,9 @@ section { text-align: center; } .allies--svg { - height: 300px; + height: 150px; + position: relative; + bottom: 180px; } } @@ -231,9 +215,9 @@ section {

Transforma tu Gestión: {{ service.title }}

{{ service.paragraph }}

- - {{ service.call_to_action }} -
+ + {{ service.call_to_action }} +
{% include "services_arrow.svg" %}
@@ -294,12 +278,12 @@ section { {% endif %} -
+
-

{{ service.title }}

-

{{ service.subtitle }}

+

{{ service.title }}

+

{{ service.subtitle }}

-
+

{{ service.paragraph }}

{{ service.strong_paragraph }}

@@ -311,7 +295,7 @@ section {
- {% include "Happy person.svg" %} + {% include "dancingperson.svg" %}