landing page and subscribe footer translated to spanish (#154)

public/locales/en/translation.json

@@ -48,9 +48,12 @@
       }
     },
     "NewsletterCTA": {
-      "title": "Stay updated on the latest Scroll news",
-      "placeholder": "Enter your email address",
-      "buttonText": "Sign up"
+      "title": "Stay up-to-date on the latest Scroll Developer news",
+      "text": "Roadmap updates, virtual and live events, ecosystem opportunities and more",
+      "placeholder": "your email address here",
+      "thankYouForSubscribing": "Thank you for subscribing!",
+      "correctEmail": "Please use a correct email address.",
+      "pleaseInsertEmail": "Please insert your email."
     }
   },
   "sidebar": {

public/locales/es/translation.json

@@ -48,9 +48,12 @@
       }
     },
     "NewsletterCTA": {
-      "title": "Stay updated on the latest Scroll news",
-      "placeholder": "Enter your email address",
-      "buttonText": "Sign up"
+      "title": "Mantente actualizado con las más recientes noticias sobre el Desarrollo de Scroll",
+      "text": "Roadmap, actualizaciones, eventos virtuales y presenciales, oportunidades en el ecosistema y más",
+      "placeholder": "tu correo electrónico aquí",
+      "thankYouForSubscribing": "¡Gracias por suscribirte!",
+      "correctEmail": "Porfavor usa un correo electrónico válido.",
+      "pleaseInsertEmail": "Porfavor ingresa tu correo electrónico."
     }
   },
   "sidebar": {

src/components/Footer/Subscribe/EmailInput.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import styles from "./EmailInput.module.css"
 import ArrowSvg from "~/assets/svgs/footer/arrow-right.svg?react"
 import { clsx } from "~/lib"
+import { t } from "i18next"
 
 const EmailInput = (props) => {
   const { end, onClick, onEnter, ...restProps } = props
@@ -23,7 +24,7 @@ const EmailInput = (props) => {
         <button className={clsx(styles.iconButton, "dark:text-black")} onClick={onClick} disabled={end}>
           <ArrowSvg></ArrowSvg>
         </button>
-        <div className={clsx(styles.success, "dark:text-black", "dark:bg-white")}>Thank you for subscribing!</div>
+        <div className={clsx(styles.success, "dark:text-black", "dark:bg-white")}>{ t("landing.NewsletterCTA.thankYouForSubscribing") }</div>
       </div>
       <input
         placeholder="your email address here"

src/components/Footer/Subscribe/Subscribe.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "preact/hooks"
 import MailchimpSubscribe from "react-mailchimp-subscribe"
 import SubscribeSvg from "~/assets/svgs/footer/subscribe.svg?react"
 import { clsx } from "~/lib"
+import { t } from "i18next"
 
 import EmailInput from "./EmailInput.tsx"
 import styles from "./Subscribe.module.css"
@@ -26,9 +27,9 @@ export default function Subscribe() {
 
   const handleSubmit = (subscribe) => {
     if (!email) {
-      setCustomMessage("Please insert your email.")
+      setCustomMessage(t("landing.NewsletterCTA.pleaseInsertEmail"))
     } else if (!emailValid) {
-      setCustomMessage("Please use a correct email address.")
+      setCustomMessage(t("landing.NewsletterCTA.correctEmail"))
     } else {
       subscribe({ EMAIL: email })
       setEmail("")
@@ -47,9 +48,9 @@ export default function Subscribe() {
         </span>
 
         <div className={styles.copyBox}>
-          <div className={styles.subscribeTitle}>Stay up-to-date on the latest Scroll Developer news</div>
+          <div className={styles.subscribeTitle}>{ t("landing.NewsletterCTA.title") }</div>
           <div className={styles.subscribeText}>
-            Roadmap updates, virtual and live events, ecosystem opportunities and more
+          { t("landing.NewsletterCTA.text") }
           </div>
         </div>
         <MailchimpSubscribe
@@ -62,7 +63,7 @@ export default function Subscribe() {
                 onChange={handleChangeEmail}
                 onClick={() => handleSubmit(subscribe)}
                 onEnter={() => handleSubmit(subscribe)}
-                placeholder="your email address here"
+                placeholder= { t("landing.NewsletterCTA.placeholder") }
                 end={status === "success"}
               />
               {customMessage && <div className={styles.errorMessage}>{customMessage}</div>}

src/pages/es/home/ConnectUs.astro

@@ -8,29 +8,29 @@ import ContributeSvg from "~/assets/svgs/home/Contribute.svg?raw"
 const mediaList = [
   {
     icon: DiscordSvg,
-    name: "Join our Discord",
-    content: "Connect with other Scroll developers and users.",
+    name: "Únete a nuestro Discord",
+    content: "Conecta con otros desarradores y usuarios de Scroll.",
     link: "https://discord.gg/scroll",
   },
   {
     icon: ForumSvg,
-    name: "Community Forum",
-    content: "Discuss and propose changes to Scroll’s core protocols.",
+    name: "Foro de la Comunidad",
+    content: "Conversa y propón cambios a los protocolos fundamentales de Scroll.",
     link: "http://community.scroll.io/",
   },
   {
     icon: ContributeSvg,
-    name: "Contribute to Scroll",
-    content: "Build with other developers.",
+    name: "Contribuye a Scroll",
+    content: "Construye con otros desarrolladores.",
     link: "https://github.com/scroll-tech/contribute-to-scroll",
   },
 ]
 ---
 
 <div class="connect-us">
   <SectionHeader
-    title="Connect with us"
-    content="Keep up to date with the latest news and developments from the Scroll Community."
+    title="Conecta con nosotros"
+    content="Mantente al tanto de las noticias y desarrollores por parte de la comunidad de Scroll."
   />
   <div class="medias">
     {

src/pages/es/home/Navigate.astro

@@ -9,33 +9,33 @@ import SectionHeader from "~/components/SectionHeader/index.astro"
 const navList = [
   {
     icon: StartSvg,
-    name: "Getting started",
-    content: "Bridge into Scroll and explore our dApp Ecosystem.",
-    link: "/en/getting-started/overview",
+    name: "¿Cómo empezar?",
+    content: "Migra hacia Scroll usando el Bridge y explora el Ecosistema de dApps.",
+    link: "/es/getting-started/overview",
   },
   {
     icon: DevelopSvg,
-    name: "Developers",
-    content: "Dive into Scroll’s developer documentation.",
-    link: "/en/developers",
+    name: "Desarrolladores",
+    content: "Sumérgete en la documentación para desarrolladores de Scroll.",
+    link: "/es/developers",
   },
   {
     icon: TechnologySvg,
-    name: "Technology",
-    content: "An overview of Scroll’s zkEVM Architecture.",
-    link: "/en/technology",
+    name: "Tecnología",
+    content: "Un vistazo general a la arquitectura de la zkEVM de Scroll.",
+    link: "/es/technology",
   },
   {
     icon: LearnSvg,
-    name: "Learn",
-    content: "An introduction to the world of ZK and Scalability.",
-    link: "/en/learn",
+    name: "Aprende",
+    content: "Una introducción al mundo de ZK y de la escalabilidad.",
+    link: "/es/learn",
   },
 ]
 ---
 
 <div class="navigate">
-  <SectionHeader title="Navigate the Docs" content="Start developing on Scroll today." />
+  <SectionHeader title="Navega la Documentación" content="Inicia tu desarrollo en Scroll hoy." />
   <div class="navs">
     {navList.map(({ icon, name, content, link }) => <NavCard icon={icon} name={name} content={content} link={link} />)}
   </div>

src/pages/es/home/QuickStart.astro

@@ -20,8 +20,8 @@ const toolList = [
 
 <div>
   <SectionHeader
-    title="Developer Quickstart"
-    content="Start developing on Scroll with all of your favourite tools for building and testing smart contracts."
+    title="Inicio rápido para Desarrolladores"
+    content="Comienza a construir en Scroll con todas tus herramientas favoritas de desarollo y de testing de Smart Contracts."
   />
   <div class="tools">
     {

src/pages/es/home/index.astro

@@ -12,7 +12,7 @@ changeLanguage("es")
 <HomeLayout>
   <div class="header bg-black">
     <div class="inner">
-      <p class="header-title text-white">Welcome to<br /> Scroll Documentation</p>
+      <p class="header-title text-white">Bienvenido a la<br /> Documentación de Scroll</p>
       <Search client:visible />
     </div>
   </div>