#59 Traducir Welcome page

src/app/[lang]/call-for-proposals/components/Content.js

@@ -1,29 +1,34 @@
+'use client';
+
 import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Question from './Question';
 
+import { useI18n } from '@/contexts/I18nContext';
+
 const Content = () => {
+  const i18nDictionary = useI18n();
+  const sectionData = i18nDictionary?.sections?.call_for_speakers?.content;
+
   return (
     <div className="call-for-proposals">
       <div className="content">
         <Container>
           <Row className="justify-content-center">
             <Col xs={12} md={10}>
               <p>
-                We are inviting all the Python Community to submit proposals to PyCon Colombia 2024,
-                don&apos;t hesitate to submit yours! or, if you know somebody who you think should
-                be speaking at PyCon Colombia, please send them this{' '}
+                {sectionData?.description}{' '}
                 <a
                   href="https://docs.google.com/forms/d/e/1FAIpQLSelYKA6txm_uTmpgqydOYw27uKwaY701Vy4qJac1NCzYFq7Ow/viewform"
                   target="blank_">
-                  Link
+                  {sectionData?.url_label}
                 </a>
               </p>
               <br />
               <p>
-                This CFP closes at <b>April 1st 2024</b>.
+                {sectionData?.date_text} <b>{sectionData?.date}</b>.
               </p>
             </Col>
           </Row>

src/app/[lang]/call-for-proposals/components/Technical.js

@@ -1,17 +1,23 @@
+'use client';
+
 import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Image from 'next/image';
 
+import { useI18n } from '@/contexts/I18nContext';
+
 const Technical = () => {
+  const i18nDictionary = useI18n();
+  const sectionData = i18nDictionary?.sections?.call_for_speakers;
+
   return (
     <section id="technical">
       <Container>
         <Row className="justify-content-center">
           <Col xs={10} md={8}>
-            We welcome a diverse range of proposals related to various technical topics. Share your
-            expertise on any of the following subjects:
+            {sectionData?.topics_description_1}
           </Col>
           <Col xs={12}>
             <div className="list">

src/app/[lang]/call-for-proposals/components/Title.js

@@ -1,14 +1,21 @@
+'use client';
+
 import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendar } from '@fortawesome/free-solid-svg-icons';
 
+import { useI18n } from '@/contexts/I18nContext';
+
 import Topics from './Topics';
 import Technical from './Technical';
 
 const Title = () => {
+  const i18nDictionary = useI18n();
+  const sectionData = i18nDictionary?.sections?.call_for_speakers;
+
   return (
     <div className="call-for-proposals">
       <div className="welcome">
@@ -18,14 +25,11 @@ const Title = () => {
               <Col xs={10} md={6}>
                 <div className="title-container">
                   <h2 className="title">
-                    <span className="bold">Call for proposals</span>
+                    <span className="bold">{sectionData?.title}</span>
                   </h2>
-                  <p className="text">
-                    Calling on all Python enthusiasts! Submit your proposals for PyCon Colombia 2024
-                    now. Don&apos;t miss the opportunity to share your insights
-                  </p>
+                  <p className="text">{sectionData?.description}</p>
                   <span className="closes-date">
-                    <FontAwesomeIcon icon={faCalendar} /> Closes at April 1st 2024
+                    <FontAwesomeIcon icon={faCalendar} /> {sectionData?.closes_date}
                   </span>
                 </div>
               </Col>

src/app/[lang]/call-for-proposals/components/Topics.js

@@ -1,16 +1,23 @@
+'use client';
+
 import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Image from 'next/image';
 
+import { useI18n } from '@/contexts/I18nContext';
+
 const Topics = () => {
+  const i18nDictionary = useI18n();
+  const sectionData = i18nDictionary?.sections?.call_for_speakers;
+
   return (
     <section id="topics">
       <Container>
         <Row className="justify-content-center">
           <Col xs={10} md={8}>
-            <span>Also you can talk about other general topics:</span>
+            <span>{sectionData?.topics_description_2}</span>
           </Col>
           <Col xs={12}>
             <div className="list">

src/app/[lang]/components/LandingPage/Welcome.js

@@ -1,11 +1,18 @@
+'use client';
+
 import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
 import Image from 'next/image';
 
-const Welcome = () => {
+import { useI18n } from '@/contexts/I18nContext';
+
+const Welcome = ({ params: { lang } }) => {
+  const i18nDictionary = useI18n();
+  const sectionData = i18nDictionary?.sections?.index;
+
   return (
     <section className="welcome">
       <div className="welcome-container">
@@ -15,8 +22,8 @@ const Welcome = () => {
               <Col xs={10} md={11}>
                 <div className="title-container">
                   <h2 className="title">
-                    <span className="bold">Del 7 al 9 de Junio |</span>
-                    <span> Medellín - Colombia</span>
+                    <span className="bold">{sectionData?.date} |</span>
+                    <span> {sectionData?.location}</span>
                   </h2>
                   <Image
                     src="/images/pycon-logo.svg"
@@ -32,9 +39,9 @@ const Welcome = () => {
                 <Row>
                   <Col xs={12}>
                     <div className="description">
-                      <span>Ready to journey back in time</span>
+                      <span>{sectionData?.subtitle_1}</span>
                       <br />
-                      <span className="bold">while building the future?</span>
+                      <span className="bold">{sectionData?.subtitle_2}</span>
                     </div>
                   </Col>
                 </Row>
@@ -45,7 +52,7 @@ const Welcome = () => {
                         className="btn btn-primary btn-welcome"
                         href="https://www.eventbrite.com/e/pycon-colombia-2024-tickets-824751864027"
                         target="_blank">
-                        Get your tickets
+                        {sectionData?.tickets_button}
                       </Button>
                     </div>
                   </Col>

src/app/[lang]/keynotes/components/Card.js

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import Link from 'next/link';
 import propTypes from 'prop-types';
@@ -6,6 +8,8 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Image from 'next/image';
 
+import { useI18n } from '@/contexts/I18nContext';
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle, faGlobe } from '@fortawesome/free-solid-svg-icons';
 import {
@@ -16,6 +20,8 @@ import {
 } from '@fortawesome/free-brands-svg-icons';
 
 const Card = ({ speakerData, reverse, index, lang }) => {
+  const i18nDictionary = useI18n();
+  const sectionData = i18nDictionary?.sections?.keynotes;
   const colorBorderSpeaker = ['border-pink', 'border-yellow', 'border-purple', 'border-blue'];
   // const colorBerderTextSpeaker = [
   //   'text-border-pink',
@@ -126,7 +132,7 @@ const Card = ({ speakerData, reverse, index, lang }) => {
           </Col> */}
           <Col xs={12} md={{ span: 3, order: reverse ? 'last' : 'first' }}>
             <Link href={`/${lang}/keynotes/${speakerData.id}`} className="more-info">
-              More info
+              {sectionData?.more_info}
             </Link>
           </Col>
         </Row>

src/app/[lang]/page.js

@@ -14,7 +14,7 @@ import Sponsors from '@/app/[lang]/sponsors/page';
 export default async function Page({ params: { lang } }) {
   return (
     <>
-      <Welcome />
+      <Welcome params={{ lang }} />
       {/* <Technologies />
       <Speakers />
       <Sponsors /> */}

src/data/dictionaries/en.json

@@ -11,9 +11,30 @@
     "cfp": "Call for Proposals"
   },
   "sections": {
+    "index": {
+      "date": "June 7 to 9, 2024",
+      "location": "Medellin - Colombia",
+      "subtitle_1": "Ready to journey back in time",
+      "subtitle_2": "while building the future?",
+      "tickets_button": "Get your tickets"
+    },
     "keynotes": {
       "title": "Keynotes",
-      "description": "We are the new voices"
+      "description": "We are the new voices",
+      "more_info": "More Info"
+    },
+    "call_for_speakers": {
+      "title": "Call for proposals",
+      "description": "Calling on all Python enthusiasts! Submit your proposals for PyCon Colombia 2024 now. Don't miss the opportunity to share your insights",
+      "closes_date": "Closes at April 1st 2024",
+      "topics_description_1": "We welcome a diverse range of proposals related to various technical topics. Share your expertise on any of the following subjects:",
+      "topics_description_2": "Also you can talk about other general topics:",
+      "content": {
+        "description": "We are inviting all the Python Community to submit proposals to PyCon Colombia 2024, don't hesitate to submit yours! or, if you know somebody who you think should be speaking at PyCon Colombia, please send them this",
+        "url_label": "Link",
+        "date_text": "This CFP closes at",
+        "date": "April 1st, 2024"
+      }
     },
     "sponsors": {
       "title": "Sponsors",

src/data/dictionaries/es.json

@@ -11,9 +11,30 @@
     "cfp": "Llamado a ponentes"
   },
   "sections": {
+    "index": {
+      "date": "Del 7 al 9 de Junio",
+      "location": "Medellín - Colombia",
+      "subtitle_1": "¿Listo para viajar en el tiempo",
+      "subtitle_2": "mientras construyes el futuro?",
+      "tickets_button": "Consigue tus entradas"
+    },
     "keynotes": {
       "title": "Invitados Internacionales",
-      "description": "Somos las nuevas voces"
+      "description": "Somos las nuevas voces",
+      "more_info": "Más info"
+    },
+    "call_for_speakers": {
+      "title": "Convocatoria de propuestas",
+      "description": "¡Llamado a todos los entusiastas de Python! Envía ahora tus propuestas para PyCon Colombia 2024. No pierdas la oportunidad de compartir tus conocimientos",
+      "closes_date": "Cierra el 1 de Abril de 2024",
+      "topics_description_1": "Acogemos con satisfacción una amplia gama de propuestas relacionadas con diversos temas técnicos. Comparta sus conocimientos sobre cualquiera de los siguientes temas:",
+      "topics_description_2": "También puede hablar de otros temas generales:",
+      "content": {
+        "description": "Estamos invitando a toda la Comunidad Python a presentar propuestas para PyCon Colombia 2024, ¡no dudes en enviar la tuya! o, si conoces a alguien que crees que debería hablar en PyCon Colombia, por favor envíale este",
+        "url_label": "Enlace",
+        "date_text": "Este CFP cierra el",
+        "date": "1 de Abril de 2024"
+      }
     },
     "sponsors": {
       "title": "Patrocinadores",

src/styles/partials/_index.sass

@@ -59,7 +59,7 @@ $duration: 10s
 
 .description
     color: white
-    font-size: 50px
+    font-size: 48px
     font-style: normal
     font-weight: 400
     letter-spacing: 7.56px