diff --git a/src/assets/svgs/court.svg b/src/assets/svgs/court.svg new file mode 100644 index 0000000..ca87acc --- /dev/null +++ b/src/assets/svgs/court.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/dispute-resolver-page.svg b/src/assets/svgs/dispute-resolver-page.svg new file mode 100644 index 0000000..e5d8bc5 --- /dev/null +++ b/src/assets/svgs/dispute-resolver-page.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/education-hero.svg b/src/assets/svgs/education-hero.svg new file mode 100644 index 0000000..3e18f60 --- /dev/null +++ b/src/assets/svgs/education-hero.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/svgs/professor.svg b/src/assets/svgs/professor.svg new file mode 100644 index 0000000..c8b53f4 --- /dev/null +++ b/src/assets/svgs/professor.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svgs/search.svg b/src/assets/svgs/search.svg new file mode 100644 index 0000000..825bf6e --- /dev/null +++ b/src/assets/svgs/search.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svgs/speaker.svg b/src/assets/svgs/speaker.svg new file mode 100644 index 0000000..d8f3b74 --- /dev/null +++ b/src/assets/svgs/speaker.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svgs/third-party-logos/blockchain-gov/blockchain-gov.svg b/src/assets/svgs/third-party-logos/blockchain-gov/blockchain-gov.svg new file mode 100644 index 0000000..7e606fd --- /dev/null +++ b/src/assets/svgs/third-party-logos/blockchain-gov/blockchain-gov.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/university.svg b/src/assets/svgs/university.svg new file mode 100644 index 0000000..abb9ea3 --- /dev/null +++ b/src/assets/svgs/university.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/footer.js b/src/components/footer.js index 430d173..538c68f 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -132,6 +132,9 @@ const Footer = ({ intl }) => ( + + + diff --git a/src/components/header.js b/src/components/header.js index 54bbd25..50793da 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -171,6 +171,9 @@ class Header extends React.Component { + + + diff --git a/src/components/sponsors.js b/src/components/sponsors.js index 48e1ec2..cdd1598 100644 --- a/src/components/sponsors.js +++ b/src/components/sponsors.js @@ -2,6 +2,7 @@ import React from "react"; import ThomsonReuters from "src/assets/images/third-party-logos/hosted-thomson-colored.png"; import EU from "src/assets/svgs/eu-winner-dark.svg"; import BPI from "src/assets/svgs/third-party-logos/bpi/logo-footer.svg"; +import BlockchainGov from "src/assets/svgs/third-party-logos/blockchain-gov/blockchain-gov.svg"; import styles from "./styles/sponsors.module.css"; @@ -12,6 +13,11 @@ export default ({ extraClass, variant }) => ( +
+ + + +
diff --git a/src/components/styles/sponsors.module.css b/src/components/styles/sponsors.module.css index 95046e7..1a9a016 100644 --- a/src/components/styles/sponsors.module.css +++ b/src/components/styles/sponsors.module.css @@ -18,6 +18,9 @@ .sponsors .eu { } +.sponsors .blockchain{ +} + .sponsors div { align-self: flex-end; } @@ -29,14 +32,18 @@ } .sponsors .bpi { - verticalalign: middle; + vertical-align: middle; padding: 1rem; } .sponsors .euContainer { display: block; - width: 100%; + width: 60%; +} +.sponsors .blockchainGovContainer { + display: block; + width: 30%; } .sponsors .bpiContainer { @@ -55,7 +62,12 @@ @media (min-width: 1000px) { .euContainer { - width: 70% !important; + position: relative; + left: 10%; + width: 40% !important; + } + .blockchainGovContainer { + width: 40% !important; } .bpiContainer { diff --git a/src/intl/en.json b/src/intl/en.json index 94c9691..526e69e 100644 --- a/src/intl/en.json +++ b/src/intl/en.json @@ -31,6 +31,7 @@ "moderate": "Kleros Moderate", "career": "Careers", "incubator": "Incubator", + "education": "Education", "curate": "Curation", "fellowship": "Fellowship", "community": "Community", @@ -943,7 +944,7 @@ }, "4": { "q": "How is the program structured?", - "a": "The program consists in a series of weekly workshops covering the different aspects of building a blockchain project.\n\nWeek 1. Welcome and Orientation.\nWeek 2. Lean Canvas: Strategy Design.\nWeek 3. User Interviews: Strategy Validation.\nWeek 4. Prototyping\n\nWeek 5. UX/UI for Web3\nWeek 6. Smart Contract Security (part 1)\nWeek 7. Smart Contract Security (part 2)\nWeek 8. Web3 Implementation\n\nWeek 9. Marketing & Community Building\nWeek 10. Building an Investment Deck\nWeek 11. Fundraising Tactics and Legal\nWeek 12. Final Rehearsal & Demo Day" + "a": "The program consists in a series of weekly workshops covering the different aspects of building a blockchain project.\n\nWeek 1. Welcome and Orientation.\n\nWeek 2. Lean Canvas: Strategy Design.\n\nWeek 3. User Interviews: Strategy Validation.\n\nWeek 4. Prototyping\n\nWeek 5. UX/UI for Web3\n\nWeek 6. Smart Contract Security (part 1)\n\nWeek 7. Smart Contract Security (part 2)\n\nWeek 8. Web3 Implementation\n\nWeek 9. Marketing & Community Building\n\nWeek 10. Building an Investment Deck\n\nWeek 11. Fundraising Tactics and Legal\n\nWeek 12. Final Rehearsal & Demo Day" }, "5": { "q": "Who can apply?", @@ -995,6 +996,46 @@ } } }, + "education": { + "seo-title": "Kleros Education", + + "section-hero": { + "h1": "Kleros Education", + "h2": "Experience how disputes are resolved using Blockchain and Game Theory." + }, + "sash": { + "first": { + "title": "Students", + "paragraph": "Gain practical knowledge and deepen understanding of Web 3.\n\nExperience real-life examples to understand game theory & crypto economic incentives.\n\nHigh engagement by creating case studies for students of any field.\n\nFirst step to work in Web3." + }, + "second": { + "title": "Universities", + "paragraph": "Provide access to the best Web3 technology for your students.\n\nMaintain high quality content and adaptability to new eras → + Reputation.\n\nGenerate organic marketing opportunities from the program, resulting in more future students and media exposure." + }, + "third": { + "title": "Professors", + "paragraph": "Learning about new technologies.\n\nCreate cases to explain the content of their course using Kleros Demo Court.\n\nWorking with a motivated group of students.\n\nThere are plenty of cases across different universities in which Blockchain related optative courses have an exponential higher demand that any other." + } + }, + + "section-3": { + "h1": "Benefits & Objectives", + "h2": "Whether you’re a student or an academic, Kleros offers a unique opportunity to explore real-world use cases in your chosen field. Enhance student engagement by seamlessly integrating Kleros into your coursework. Imagine you’re studying marketing. With Kleros, you can create captivating scenarios like a dispute between a freelance startup service provider and a client, involving a discussion on the tools employed by the provider." + }, + + "instances": { + "h1": "There are ", + "h2": "4 different instances:", + "card-1-title": "1. Evidence Period", + "card-1-text": "Anyone can submit evidence to the case.", + "card-2-title": "2. Voting Period", + "card-2-text": "Jurors analyze evidence and vote.", + "card-3-title": "3. Appeal", + "card-3-text": "Avoided in the demo, but in real Court an appeal could be created.", + "card-4-title": "4. Execution", + "card-4-text": "Jurors decision is enforced and rewards can be tracked on Etherscan." + } + }, "bio": { "section-main": "Download the Report", diff --git a/src/intl/es.json b/src/intl/es.json index 9c9ae76..4f39cee 100644 --- a/src/intl/es.json +++ b/src/intl/es.json @@ -218,7 +218,6 @@ "card-2-text": "Ponte en contacto con nosotros para integrar Kleros Escrow en tu proyecto.", "card-2-button": "Contáctanos" } - }, "governance": { "seo-title": "Governance", @@ -271,7 +270,6 @@ "card-3-text": "Al utilizar el módulo de gobernanza SafeSnap de Gnosis Safe junto con Kleros Court como árbitro final, cualquier DAO puede implementar su decisión de gobernanza fuera de la Blockchain sin tener que depender de ninguna parte de confianza para ejecutarlas en la Blockchain.", "card-3-button": "Pruebe SafeSnap" } - }, "oracle": { "seo-title": "Oracle", @@ -851,7 +849,10 @@ "h2": "Mira nuestras búsquedas abiertas. ¡Queremos conocerte!", "button-primary": "Explorar Posiciones Abiertas" }, - "section-mission": { "h1": "Misión", "h2": "Nuestra misión es desarrollar software que facilite el acceso a la justicia y a la libertad individual." }, + "section-mission": { + "h1": "Misión", + "h2": "Nuestra misión es desarrollar software que facilite el acceso a la justicia y a la libertad individual." + }, "section-culture": { "h1": "Cultura", "h2": "Somos un equipo internacional y multidisciplinario apasionado por el blockchain y su potencial para transformar las leyes y el gobierno.", @@ -864,7 +865,10 @@ "bottom-right": "Pasión" } }, - "section-positions": { "h1": "Open Positions", "h2": "Revisa nuestras búsquedas abiertas y aplica aquí abajo." } + "section-positions": { + "h1": "Open Positions", + "h2": "Revisa nuestras búsquedas abiertas y aplica aquí abajo." + } }, "incubator": { "seo-title": "Incubadora", @@ -873,7 +877,10 @@ "h2": "Un programa que ofrece asesoramiento en construcción de empresas, gastos pagos y hasta $50,000 en financiamiento para equipos que quieran crear proyectos o Dapps conectados al protocolo Kleros. Un fondo de $1 millón está disponible para brindar financiamiento adicional a los equipos más prometedores que se gradúen del programa.", "button-primary": "Aplica Ahora" }, - "section-apply": { "h1": "Quién Puede Aplicar", "h2": "Equipos que están construyendo aplicaciones descentralizadas u otras herramientas que contribuyan a incrementar la adopción del protocolo Kleros." }, + "section-apply": { + "h1": "Quién Puede Aplicar", + "h2": "Equipos que están construyendo aplicaciones descentralizadas u otras herramientas que contribuyan a incrementar la adopción del protocolo Kleros." + }, "section-how-it-works": { "h1": "Cómo Funciona", "h2": "El programa tiene una duración de 12 semanas durante las cuales los participantes tienen una serie de talleres que cubren distintos aspectos sobre la construcción de un proyecto en la industria del blockchain.", @@ -891,21 +898,37 @@ "items": { "5": { "header": "Semana 5", "body": "Diseño de Mecanismos" }, "6": { "header": "Semana 6", "body": "Ataques Económicos" }, - "7": { "header": "Semana 7", "body": "Introducción a los Smart Contracts" }, - "8": { "header": "Semana 8", "body": "Seguridad en los Smart Contracts" } + "7": { + "header": "Semana 7", + "body": "Introducción a los Smart Contracts" + }, + "8": { + "header": "Semana 8", + "body": "Seguridad en los Smart Contracts" + } } }, "div-grow": { "title": "Crecer", "items": { - "9": { "header": "Semana 9", "body": "Evaluación de Riesgos Legales" }, + "9": { + "header": "Semana 9", + "body": "Evaluación de Riesgos Legales" + }, "10": { "header": "Semana 10", "body": "Conseguir Fondos" }, "11": { "header": "Semana 11", "body": "Demo Day" } } } }, - "section-where": { "h1": "Dónde Se Desarrolla", "h2": "El programa de incubación se desarrolla en el espacio de co-working The Block en la hermosa ciudad de Lisboa. 🇵🇹", "button-primary": "Apply Now" }, - "section-contact": { "title": "¡Sé parte de la revolución de la justicia!", "button-primary": "Aplica Ahora" }, + "section-where": { + "h1": "Dónde Se Desarrolla", + "h2": "El programa de incubación se desarrolla en el espacio de co-working The Block en la hermosa ciudad de Lisboa. 🇵🇹", + "button-primary": "Apply Now" + }, + "section-contact": { + "title": "¡Sé parte de la revolución de la justicia!", + "button-primary": "Aplica Ahora" + }, "section-faq": { "1": { "q": "What is the Kleros Incubator?", @@ -973,6 +996,43 @@ } } }, + "education": { + "seo-title": "Educación de Kleros", + + "section-hero": { + "h1": "Educación de Kleros", + "h2": "Experimente cómo se resuelven las disputas usando Blockchain y Teoría de Juegos" + }, + "sash": { + "first": { + "title": "Estudiantes", + "paragraph": "Adquiere conocimientos prácticos y profundiza tu entendimiento sobre Web3. Experimenta ejemplos de la vida real para entender la teoría de juegos y los incentivos económicos de las criptomonedas. Aumenta la participación al crear estudios de caso para estudiantes de cualquier campo. Primer paso para trabajar en Web3." + }, + "second": { + "title": "Universidades", + "paragraph": "Proporciona acceso a la mejor tecnología de Web3 para tus estudiantes. Mantén contenido de alta calidad y adaptabilidad a nuevas eras → + Reputación. Genera oportunidades de marketing orgánico a partir del programa, resultando en más estudiantes futuros y exposición mediática." + }, + "third": { + "title": "Profesores", + "paragraph": "Aprendizaje sobre nuevas tecnologías. Crea casos para explicar el contenido de su curso utilizando Kleros Demo Court. Trabajando con un grupo de estudiantes motivados. Hay una gran cantidad de casos en diferentes universidades en los que los cursos optativos relacionados con Blockchain tienen una demanda exponencialmente mayor que cualquier otra." + } + }, + + "section-3": { + "h1": "Beneficios & Objetivos", + "h2": "Ya seas estudiante o académico, Kleros ofrece una oportunidad única para explorar casos de uso reales en tu campo elegido. Mejora la participación de los estudiantes integrando sin problemas Kleros en tu plan de estudios. Imagina que estás estudiando marketing. Con Kleros, puedes crear escenarios cautivadores como una disputa entre un proveedor de servicios de inicio independiente y un cliente, que implica una discusión sobre las herramientas empleadas por el proveedor." + }, + + "start-now": { + "h1": "Existen 4 instancias diferentes:", + "card-1-title": "Integra Kleros Governor", + "card-1-text": "Ponte en contacto para integrar Kleros Governor en tu DAO.", + "card-2-title": "Governor", + "card-2-text": "Como sistema de arbitraje abierto y neutral, Kleros puede ser una herramienta útil para integrar con la gobernanza de las DAOs que quieren asegurarse de que su proceso está completamente descentralizado.", + "card-3-title": "Gnosis SafeSnap", + "card-3-text": "Utilizando el módulo de gobernanza SafeSnap de Gnosis Safe en conjunto con Kleros Court como árbitro final, cualquier DAO puede ahora implementar su decisión de gobernanza fuera de la cadena sin tener que depender de ninguna parte de confianza para ejecutarlas en la cadena." + } + }, "bio": { "section-main": "Descargar el Informe", "section-contact": { diff --git a/src/pages/education.js b/src/pages/education.js new file mode 100644 index 0000000..c741f13 --- /dev/null +++ b/src/pages/education.js @@ -0,0 +1,166 @@ +import React from 'react'; +import Layout from '../components/layout' +import SEO from '../components/seo' + +import { Container } from 'react-bootstrap' +import { FormattedMessage, injectIntl } from 'gatsby-plugin-intl' +import UseCasesHero from 'src/components/usecases-hero.js'; +import EducationHero from 'src/assets/svgs/education-hero.svg'; +import Sash from 'src/components/sash'; +import Professor from 'src/assets/svgs/professor.svg'; +import University from 'src/assets/svgs/university.svg'; +import Gavel from 'src/assets/svgs/icon-gavel.svg'; +import Community from 'src/assets/svgs/icon-community.svg'; +import Balance from 'src/assets/svgs/hex-icon-balance.svg' +import Search from 'src/assets/svgs/search.svg' +import Speaker from 'src/assets/svgs/speaker.svg'; +import Court from "src/assets/svgs/court.svg" +import DisputeResolver from "src/assets/svgs/dispute-resolver-page.svg" +import styles from './styles/education.module.css' + +import Contact from '../components/contact'; + +const Education = ({ intl }) => ( + + + + + +
+ +
+ +
+ +
+
+ +
+ + + +
+

+ +

+

+ +

+ +
+ + +
+

+ + +

+ + + + +
+ + + +
+ +
+ +
+
+) + +export default injectIntl(Education) diff --git a/src/pages/styles/education.module.css b/src/pages/styles/education.module.css new file mode 100644 index 0000000..b519d1d --- /dev/null +++ b/src/pages/styles/education.module.css @@ -0,0 +1,49 @@ +.education .dappImage svg { + border-radius: 12px; + } + + .education .buttonWrapper { + display: flex; + flex-wrap: wrap; + margin: auto; + justify-content: space-around; + align-content: space-between; + } + + .education .benefits{ + background: linear-gradient(180deg, #1E075F 0%, #9013FE 100%); + } + + .education .helper { + /* https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div */ + display: inline-block; + height: 100%; + vertical-align: middle; + } + .education .instances { + font-weight: 400; + } + .education .bold { + font-weight: 600; + } + + .education .badge { + margin-top: 1.5rem; + max-width: 30rem; + height: 9rem; + background-color: white; + padding: 1rem 3rem; + border-radius: 12px; + } + + .education .h1 { + margin-bottom: 2rem; + } + + .education .list{ + white-space: pre-line; + + } + + + \ No newline at end of file