feat(translate): integrated logico for translations with i18next

package.json

@@ -36,7 +36,7 @@
 		"eslint-plugin-react": "^7.33.1",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-react-refresh": "^0.4.3",
-		"vite": "^4.5.14"
+		"vite": "^7.0.4"
 	},
 	"babel": {
 		"presets": [
@@ -59,9 +59,13 @@
 		"@fortawesome/free-solid-svg-icons": "^6.7.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
 		"bootstrap": "^5.3.7",
+		"i18next": "^25.3.2",
+		"i18next-browser-languagedetector": "^8.2.0",
+		"i18next-http-backend": "^3.0.2",
 		"prop-types": "^15.8.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-i18next": "^15.6.0",
 		"react-router-dom": "^6.18.0"
 	}
 }

public/locales/en/translation.json

@@ -0,0 +1,64 @@
+{
+  "services": {
+    "sectionTitle": "Discover Our Services",
+    "sectionDescription": "Each of our services is designed to build and amplify your digital presence, transforming your ideas into measurable products and results. Explore how we can shape your online universe.",
+    "webDevelopmentTitle": "Web Development",
+    "webDevelopmentSubtitle": "Building your digital universe",
+    "communicationTitle": "Communication",
+    "communicationSubtitle": "Bringing your audiences together",
+    "softwareSolutionsTitle": "Software Solutions",
+    "softwareSolutionsSubtitle": "Empowering your capabilities",
+    "card": {
+      "wordpress": {
+        "title": "Wordpress",
+        "description": "Potencia tu presencia con la plataforma CMS más versátil y popular. Diseñamos y desarrollamos sitios WordPress a medida, fáciles de gestionar y optimizados para el crecimiento de tu marca.",
+        "link": "Tu web con WordPress"
+      },
+      "webdev": {
+        "title": "Web Dev",
+        "description": "Para soluciones únicas y necesidades específicas. Construimos desarrollos web personalizados con las últimas tecnologías, garantizando funcionalidad, escalabilidad y rendimiento excepcional.",
+        "link": "Explora el desarrollo a medida"
+      },
+      "ecommerce": {
+        "title": "E-commerce",
+        "description": "Lanza y comienza a vender con tu tienda online gracias a un diseño intuitivo y funcionalidades avanzadas. Creamos experiencias de compra que convierten visitantes en clientes fieles y aumentan tus ventas.",
+        "link": "Impulsa tu E-commerce"
+      },
+      "webflow": {
+        "title": "WebFlow",
+        "description": "Diseñamos sitios web visualmente impresionantes y altamente funcionales sin código complejo. Ideal para proyectos que demandan diseño de vanguardia y autonomía en la gestión.",
+        "link": "Descubre Webflow"
+      },
+      "socialMedia": {
+        "title": "Manejo de redes",
+        "description": "Gestionamos tus plataformas sociales con estrategia y creatividad. Construimos comunidades, aumentamos el engagement y fortalecemos la presencia de tu marca e interacción con tu público.",
+        "link": "Impulsa tu marca en redes"
+      },
+      "copyWriting": {
+        "title": "Copywriting",
+        "description": "Creamos textos persuasivos y optimizados para web, blogs, redes sociales y campañas que captan la atención, transmiten un mensaje claro y convierten visitantes y seguidores en clientes.",
+        "link": "Escríbenos"
+      },
+      "contentProduction": {
+        "title": "Producción de contenido",
+        "description": "Contamos tu historia con videos, post de redes sociales, artículos de blog y más. Generamos contenido de valor que posiciona tu marca como referente en tu sector.",
+        "link": "Crea con nosotros"
+      },
+      "communicationStrategy": {
+        "title": "Estrategia de comunicación",
+        "description": "Planificamos la hoja de ruta de tu comunicación digital. Investigamos, definimos tu voz y creamos un plan integral que reúne todo tu universo digital para cumplir tus objetivos.",
+        "link": "Descubre tu potencial"
+      },
+      "autocadLt": {
+        "title": "AutoCAD LT",
+        "description": "Transforma tus ideas en planos precisos con el software de dibujo 2D líder en la industria. Crea, edita y documenta tus diseños con eficiencia, optimizando tu flujo de trabajo y entrega tus proyectos en tiempo récord.",
+        "link": "Potencia tu diseño 2D"
+      },
+      "autocadIst": {
+        "title": "AutoCAD IST",
+        "description": "Diseña sin límites en 2D y 3D con la herramienta más completa para arquitectos e ingenieros. Acelera tus flujos de trabajo y crea diseños impactantes con potentes funciones de modelado, visualización y automatización.",
+        "link": "Adquirir licencia completa"
+      }
+    }
+  }
+}

public/locales/es/translation.json

@@ -0,0 +1,64 @@
+{
+  "services": {
+    "sectionTitle": "Conoce nuestros servicios",
+    "sectionDescription": "Cada uno de nuestros servicios está diseñado para construir y amplificar tu presencia digital, convirtiendo tus ideas en productos y resultados medibles. Explora cómo podemos dar forma a tu universo online.",
+    "webDevelopmentTitle": "Desarrollo Web",
+    "webDevelopmentSubtitle": "Construyendo tu universo digital",
+    "communicationTitle": "Comunicación",
+    "communicationSubtitle": "Reunimos tus audiencias",
+    "softwareSolutionsTitle": "Soluciones de software",
+    "softwareSolutionsSubtitle": "Potenciamos tus capacidades",
+    "card": {
+      "wordpress": {
+        "title": "Wordpress",
+        "description": "Potencia tu presencia con la plataforma CMS más versátil y popular. Diseñamos y desarrollamos sitios WordPress a medida, fáciles de gestionar y optimizados para el crecimiento de tu marca.",
+        "link": "Tu web con WordPress"
+      },
+      "webdev": {
+        "title": "Web Dev",
+        "description": "Para soluciones únicas y necesidades específicas. Construimos desarrollos web personalizados con las últimas tecnologías, garantizando funcionalidad, escalabilidad y rendimiento excepcional.",
+        "link": "Explora el desarrollo a medida"
+      },
+      "ecommerce": {
+        "title": "E-commerce",
+        "description": "Lanza y comienza a vender con tu tienda online gracias a un diseño intuitivo y funcionalidades avanzadas. Creamos experiencias de compra que convierten visitantes en clientes fieles y aumentan tus ventas.",
+        "link": "Impulsa tu E-commerce"
+      },
+      "webflow": {
+        "title": "WebFlow",
+        "description": "Diseñamos sitios web visualmente impresionantes y altamente funcionales sin código complejo. Ideal para proyectos que demandan diseño de vanguardia y autonomía en la gestión.",
+        "link": "Descubre Webflow"
+      },
+      "socialMedia": {
+        "title": "Manejo de redes",
+        "description": "Gestionamos tus plataformas sociales con estrategia y creatividad. Construimos comunidades, aumentamos el engagement y fortalecemos la presencia de tu marca e interacción con tu público.",
+        "link": "Impulsa tu marca en redes"
+      },
+      "copyWriting": {
+        "title": "Copywriting",
+        "description": "Creamos textos persuasivos y optimizados para web, blogs, redes sociales y campañas que captan la atención, transmiten un mensaje claro y convierten visitantes y seguidores en clientes.",
+        "link": "Escríbenos"
+      },
+      "contentProduction": {
+        "title": "Producción de contenido",
+        "description": "Contamos tu historia con videos, post de redes sociales, artículos de blog y más. Generamos contenido de valor que posiciona tu marca como referente en tu sector.",
+        "link": "Crea con nosotros"
+      },
+      "communicationStrategy": {
+        "title": "Estrategia de comunicación",
+        "description": "Planificamos la hoja de ruta de tu comunicación digital. Investigamos, definimos tu voz y creamos un plan integral que reúne todo tu universo digital para cumplir tus objetivos.",
+        "link": "Descubre tu potencial"
+      },
+      "autocadLt": {
+        "title": "AutoCAD LT",
+        "description": "Transforma tus ideas en planos precisos con el software de dibujo 2D líder en la industria. Crea, edita y documenta tus diseños con eficiencia, optimizando tu flujo de trabajo y entrega tus proyectos en tiempo récord.",
+        "link": "Potencia tu diseño 2D"
+      },
+      "autocadIst": {
+        "title": "AutoCAD IST",
+        "description": "Diseña sin límites en 2D y 3D con la herramienta más completa para arquitectos e ingenieros. Acelera tus flujos de trabajo y crea diseños impactantes con potentes funciones de modelado, visualización y automatización.",
+        "link": "Adquirir licencia completa"
+      }
+    }
+  }
+}

src/app.py

@@ -42,6 +42,10 @@
 
 # Handle/serialize errors like a JSON object
 
+@app.before_request
+def handle_options_request():
+    if request.method == 'OPTIONS':
+        return '', 204
 
 @app.errorhandler(APIException)
 def handle_invalid_usage(error):

src/front/components/Services/Services.jsx

@@ -1,8 +1,11 @@
 import { Card } from "./Card"
 import { servicesContent } from "../../utils/servicesContent"
 import serviceBg from "../../assets/img/servicesBackground.png"
+import { useTranslation } from "react-i18next"
 
 export const Services = () => {
+    const { t } = useTranslation();
+
     const groupedServices = servicesContent.reduce((acc, service) => {
         if (!acc[service.id]) {
             acc[service.id] = [];
@@ -12,9 +15,21 @@ export const Services = () => {
     }, {})
 
     const sections = [
-        { id: 'web', title: 'Desarrollo Web', subtitle: 'Construyendo tu universo digital' },
-        { id: 'communication', title: 'Comunicación', subtitle: 'Reunimos tus audiencias' },
-        { id: 'software', title: 'Soluciones de software', subtitle: 'Potenciamos tus capacidades' }
+        {
+            id: 'web',
+            title: t('services.webDevelopmentTitle'),
+            subtitle: t('services.webDevelopmentSubtitle')
+        },
+        {
+            id: 'communication',
+            title: t('services.communicationTitle'),
+            subtitle: t('services.communicationSubtitle')
+        },
+        {
+            id: 'software',
+            title: t('services.softwareSolutionsTitle'),
+            subtitle: t('services.softwareSolutionsSubtitle')
+        }
     ]
 
     return (
@@ -23,21 +38,21 @@ export const Services = () => {
 
             <div className="container py-5">
                 <div className="d-flex flex-column text-center justify-content-center">
-                    <h2 className="section-title">Conoce nuestros servicios</h2>
-                    <p className="text-white ct-description-p">Cada uno de nuestros servicios está diseñado para construir y amplificar tu presencia digital, convirtiendo tus ideas en productos y resultados medibles. Explora cómo podemos dar forma a tu universo online. </p>
+                    <h2 className="section-title">{t('services.sectionTitle')}</h2>
+                    <p className="text-white ct-description-p">{t('services.sectionDescription')}</p>
                 </div>
 
                 {sections.map(section => (
                     <div className="row my-3" key={section.id}>
                         <h3 className="section-title mb-0">{section.title}</h3>
                         <h5 className="text-white mb-4 fw-normal fst-italic">{section.subtitle}</h5>
                         {groupedServices[section.id] && groupedServices[section.id].map(service => (
-                            <div key={service.id} className="col-md-6 col-lg-4 col-xl-3 mb-4">
+                            <div key={service.title} className="col-md-6 col-lg-4 col-xl-3 mb-4">
                                 <Card
-                                    title={service.title}
+                                    title={t(service.title)}
                                     icon={service.icon}
-                                    description={service.description}
-                                    link={service.link}
+                                    description={t(service.description)}
+                                    link={t(service.link)}
                                 />
                             </div>
                         ))

src/front/i18n.js

@@ -0,0 +1,21 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import Backend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    lng: "es",
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  });
+
+export default i18n;

src/front/main.jsx

@@ -1,27 +1,30 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'  // Global styles for your application
 import { RouterProvider } from "react-router-dom";  // Import RouterProvider to use the router
 import { router } from "./routes";  // Import the router configuration
 import { StoreProvider } from './hooks/useGlobalReducer';  // Import the StoreProvider for global state management
 import { BackendURL } from './components/BackendURL';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './i18n';
 
 const Main = () => {
-    
-    if(! import.meta.env.VITE_BACKEND_URL ||  import.meta.env.VITE_BACKEND_URL == "") return (
+
+    if (! import.meta.env.VITE_BACKEND_URL || import.meta.env.VITE_BACKEND_URL == "") return (
         <React.StrictMode>
-              <BackendURL/ >
+            <BackendURL />
         </React.StrictMode>
-        );
+    );
     return (
-        <React.StrictMode>  
-            {/* Provide global state to all components */}
-            <StoreProvider> 
-                {/* Set up routing for the application */} 
-                <RouterProvider router={router}>
-                </RouterProvider>
-            </StoreProvider>
+        <React.StrictMode>
+            <Suspense fallback={<div>Loading language...</div>}>
+                {/* Provide global state to all components */}
+                <StoreProvider>
+                    {/* Set up routing for the application */}
+                    <RouterProvider router={router}>
+                    </RouterProvider>
+                </StoreProvider>
+            </Suspense>
         </React.StrictMode>
     );
 }

src/front/pages/Home.jsx

@@ -12,32 +12,6 @@ export const Home = () => {
 
 	const { store, dispatch } = useGlobalReducer()
 
-	const loadMessage = async () => {
-		try {
-			const backendUrl = import.meta.env.VITE_BACKEND_URL
-
-			if (!backendUrl) throw new Error("VITE_BACKEND_URL is not defined in .env file")
-
-			const response = await fetch(backendUrl + "/api/hello")
-			const data = await response.json()
-
-			if (response.ok) dispatch({ type: "set_hello", payload: data.message })
-
-			return data
-
-		} catch (error) {
-			if (error.message) throw new Error(
-				`Could not fetch the message from the backend.
-				Please check if the backend is running and the backend port is public.`
-			);
-		}
-
-	}
-
-	useEffect(() => {
-		loadMessage()
-	}, [])
-
 	return (
 		<>
 			<HeaderHome />