Translation texts for remaingin components

public/locales/en/translation.json

@@ -29,7 +29,7 @@
   },
   "about": {
     "sectionTitle": "Who We Are",
-    "sectionDescription": "We are a company that believes in the value of uniting creativity and technology. We combine strategy, cutting-edge design, and robust technology to create an intuitive and functional online presence. Our commitment is to generate real connections and measurable growth for your business. At CloudTech, your uniqueness comes to life in a custom-made and sophisticated digital universe. "
+    "sectionDescription": "We are a company that believes in the value of uniting creativity and technology. We combine strategy, cutting-edge design, and robust technology to create an intuitive and functional online presence."
   },
   "services": {
     "sectionTitle": "Meet Our Team",
@@ -210,24 +210,60 @@
     "sectionTitle": "Web Development Benefits",
     "sectionDescription": "Investing in a professional digital presence is key to your brand's success. A well-developed website is not just a showcase; it's a strategic tool that drives your growth and connects effectively with your audience.",
     "card": {
-      "benefit1": {},
-      "benefit2": {},
-      "benefit3": {},
-      "benefit4": {},
-      "benefit5": {},
-      "benefit6": {}
+      "benefit1": {
+        "title": "Credibility & Professionalism",
+        "description": "A modern, functional website instantly builds trust. It reinforces your brand's authority, projects a strong image, and establishes the credibility needed to attract and retain customers."
+      },
+      "benefit2": {
+        "title": "Superior User Experience (UX)",
+        "description": "Optimized UX ensures every interaction is satisfactory, keeping your audience engaged and facilitating access to information they seek about you, your brand, services, products, or catalog."
+      },
+      "benefit3": {
+        "title": "Global Visibility & Reach",
+        "description": "A website opens you to the world. It allows you to reach unlimited audiences 24/7, transcending geographical and time barriers so your brand is always accessible."
+      },
+      "benefit4": {
+        "title": "SEO Optimization for Search",
+        "description": "We boost your brand's visibility on Google and other search engines. Through integrated SEO strategies, we attract quality organic traffic, ensuring your site appears when potential clients search for your products or services."
+      },
+      "benefit5": {
+        "title": "Key Competitive Advantage",
+        "description": "Stand out in your sector with a digital presence that surpasses the competition. A strategic, updated website not only meets your objectives but also positions you as an innovative leader, clearly differentiating you in the market."
+      },
+      "benefit6": {
+        "title": "Scalability & Adaptability",
+        "description": "Your business evolves, and your website must too. We create flexible, scalable solutions that grow with you, allowing you to add new features, expand content, or integrate tools as your needs change."
+      }
     }
   },
   "values": {
     "sectionTitle": "Our Values",
     "sectionDescription": "At CloudTech, our essence is founded on solid principles that guide every project and every interaction. They are the engine that drives us to create digital universes that truly transform your vision.",
     "card": {
-      "value1": {},
-      "value2": {},
-      "value3": {},
-      "value4": {},
-      "value5": {},
-      "value6": {}
+      "value1": {
+        "title": "Constant Innovation",
+        "description": "We are committed to always being at the forefront of technology and design. We explore new solutions and trends to build digital universes that not only meet your current needs but also anticipate your brand's future in cyberspace."
+      },
+      "value2": {
+        "title": "Results Focus",
+        "description": "Every action we take is aimed at generating tangible and measurable value for your business. We are dedicated to transforming your objectives into clear metrics and sustained growth, ensuring your digital investment translates into real success and lasting connections."
+      },
+      "value3": {
+        "title": "Strategic Collaboration",
+        "description": "We firmly believe in the power of collaborative work. We establish a transparent alliance, listening to your vision and co-creating custom digital solutions. Your success is our priority, and together we mold your online presence."
+      },
+      "value4": {
+        "title": "Digital Excellence",
+        "description": "We seek the highest quality in every detail of your digital universe. From strategy to code and design, we strive to exceed expectations, guaranteeing robust, intuitive, and cutting-edge solutions that elevate your brand."
+      },
+      "value5": {
+        "title": "Passion for Development",
+        "description": "Our dedication goes beyond development. We are passionate about seeing how our digital creations transform businesses and generate real connections. We drive every project with enthusiasm, committed to your brand's success and visibility."
+      },
+      "value6": {
+        "title": "Transparency and Trust",
+        "description": "We operate with total honesty and clarity at every stage of the process. We build solid relationships based on open communication and mutual trust, ensuring you are always informed and confident in the path we take together."
+      }
     }
   },
   "contact": {

public/locales/es/translation.json

@@ -210,24 +210,60 @@
     "sectionTitle": "Beneficios del desarrollo web",
     "sectionDescription": "Invertir en una presencia digital profesional es clave para el éxito de tu marca. Un sitio web bien desarrollado no es solo una vitrina, es una herramienta estratégica que impulsa tu crecimiento y conecta de manera efectiva con tu audiencia.",
     "card": {
-      "benefit1": {},
-      "benefit2": {},
-      "benefit3": {},
-      "benefit4": {},
-      "benefit5": {},
-      "benefit6": {}
+      "benefit1": {
+        "title": "Credibilidad y Profesionalismo",
+        "description": "Un sitio web moderno y funcional genera confianza instantánea. Refuerza la autoridad de tu marca, proyecta una imagen sólida y establece la credibilidad necesaria para atraer y retener a tus clientes."
+      },
+      "benefit2": {
+        "title": "Experiencia de Usuario Superior (UX)",
+        "description": "Una UX optimizada garantiza que cada interacción sea satisfactoria, manteniendo a tu audiencia comprometida y facilitando el acceso a la información que buscan, sobre ti, tu marca, tus servicios, tus productos o tu catálogo."
+      },
+      "benefit3": {
+        "title": "Visibilidad y Alcance Global",
+        "description": "Un sitio web te abre al mundo. Te permite llegar a audiencias ilimitadas las 24 horas del día, 7 días a la semana, trascendiendo barreras geográficas y temporales para que tu marca esté siempre accesible."
+      },
+      "benefit4": {
+        "title": "Optimización SEO en Buscadores",
+        "description": "Aumentamos la visibilidad de tu marca en Google y otros buscadores. A través de estrategias SEO integradas, atraemos tráfico orgánico de calidad, asegurando que tu sitio aparezca cuando tus clientes potenciales busquen tus productos o servicios."
+      },
+      "benefit5": {
+        "title": "Ventaja Competitiva Clave",
+        "description": "Destácate en tu sector con una presencia digital que supera a la competencia. Un sitio web estratégico y actualizado no solo cumple tus objetivos, sino que te posiciona como líder innovador y te diferencia claramente en el mercado."
+      },
+      "benefit6": {
+        "title": "Escalabilidad y Adaptabilidad",
+        "description": "Tu negocio evoluciona, y tu web también debe hacerlo. Creamos soluciones flexibles y escalables que crecen contigo, permitiéndote añadir nuevas funcionalidades, expandir contenidos o integrar herramientas conforme tus necesidades cambien."
+      }
     }
   },
   "values": {
     "sectionTitle": "Valores",
     "sectionDescription": "Nuestra esencia se fundamenta en principios sólidos que guían cada proyecto y cada interacción. Son el motor que nos impulsa a crear universos digitales que verdaderamente transforman tu visión.",
     "card": {
-      "value1": {},
-      "value2": {},
-      "value3": {},
-      "value4": {},
-      "value5": {},
-      "value6": {}
+      "value1": {
+        "title": "Innovación Constante",
+        "description": "Nos comprometemos a estar siempre a la vanguardia de la tecnología y el diseño. Exploramos nuevas soluciones y tendencias para construir universos digitales que no solo satisfagan tus necesidades actuales, sino que también anticipen el futuro de tu marca en el ciberespacio."
+      },
+      "value2": {
+        "title": "Enfoque en Resultados",
+        "description": "Cada acción que tomamos está orientada a generar valor tangible y medible para tu negocio. Nos dedicamos a transformar tus objetivos en métricas claras y crecimiento sostenido, asegurando que tu inversión digital se traduzca en éxito real y conexiones duraderas."
+      },
+      "value3": {
+        "title": "Colaboración Estratégica",
+        "description": "Creemos firmemente en el poder del trabajo colaborativo. Establecemos una alianza transparente, escuchando tu visión y co-creando soluciones digitales a medida. Tu éxito es nuestra prioridad y juntos moldeamos tu presencia online."
+      },
+      "value4": {
+        "title": "Excelencia Digital",
+        "description": "Buscamos la máxima calidad en cada detalle de tu universo digital. Desde la estrategia hasta el código y el diseño, nos esforzamos por superar las expectativas, garantizando soluciones robustas, intuitivas y de vanguardia que elevan tu marca."
+      },
+      "value5": {
+        "title": "Pasión por el desarrollo",
+        "description": "Nuestra dedicación va más allá del desarrollo. Nos apasiona ver cómo nuestras creaciones digitales transforman negocios y generan conexiones reales. Impulsamos cada proyecto con entusiasmo, comprometidos con el éxito y la visibilidad de tu marca."
+      },
+      "value6": {
+        "title": "Transparencia y Confianza",
+        "description": "Operamos con total honestidad y claridad en cada etapa del proceso. Construimos relaciones sólidas basadas en la comunicación abierta y la confianza mutua, asegurando que siempre estés informado y seguro del camino que seguimos juntos."
+      }
     }
   },
   "contact": {

src/front/components/Benefits/Benefits.jsx

@@ -1,22 +1,25 @@
 import { Card } from "./Card";
 import { benefitsContent } from "../../utils/benefitsContent";
+import { useTranslation } from "react-i18next";
 
 export const Benefits = () => {
+    const { t } = useTranslation();
+
     return (
         <section className="d-flex justify-content-center mx-3 position-relative">
             <div className="container py-5">
                 <div className="d-flex flex-column text-center align-items-center mb-5">
-                    <h2 className="section-title">Beneficios del desarrollo web</h2>
-                    <p className="text-white ct-description-p">Invertir en una presencia digital profesional es clave para el éxito de tu marca. Un sitio web bien desarrollado no es solo una vitrina, es una herramienta estratégica que impulsa tu crecimiento y conecta de manera efectiva con tu audiencia.</p>
+                    <h2 className="section-title">{t('benefits.sectionTitle')}</h2>
+                    <p className="text-white ct-description-p">{t('benefits.sectionDescription')}</p>
                 </div>
 
                 <div className="row g-5">
                     {benefitsContent.map(benefit => (
                         <div key={benefit.id} className="col-12 col-md-6 col-lg-3">
                             <Card
-                                title={benefit.title}
-                                description={benefit.description}
-                                showDivider={benefit.id <= 4}
+                                title={t(benefit.title)}
+                                description={t(benefit.description)}
+                                showDivider={benefit.id <= 6}
                             />
                         </div>
                     ))}

src/front/components/Benefits/Card.jsx

@@ -2,14 +2,14 @@ import { Link } from "react-router-dom";
 
 export const Card = ({ title, description, showDivider }) => {
     return (
-            <div className="card-body row text-start">
-                <div className="flex-grow-1">
-                    <h5 className="card-title fs-4 text-ct-secondary">{title}</h5>
-                    <p className="card-text text-white mb-4">{description}</p>
-                </div>
-                {showDivider && (
-                    <hr className="card-divider mt-auto"></hr>
-                )}
+        <div className="card-body row text-start h-100">
+            <div className="flex-grow-1">
+                <h5 className="card-title mb-3 fs-4 text-ct-secondary">{title}</h5>
+                <p className="card-text text-white mb-4">{description}</p>
             </div>
+            {showDivider && (
+                <hr className="card-divider mt-auto"></hr>
+            )}
+        </div>
     )
 };

src/front/components/Values/Card.jsx

@@ -1,15 +1,13 @@
-import { Link } from "react-router-dom";
-
-export const Card = ({ title, description, showDivider}) => {
+export const Card = ({ title, description, showDivider }) => {
     return (
-        <div className="card-body row text-start">
-                <div className="flex-grow-1">
-                    <h5 className="card-title fs-4 text-ct-secondary">{title}</h5>
-                    <p className="card-text text-white mb-4">{description}</p>
-                </div>
-                {showDivider && (
-                    <hr className="card-divider mt-auto"></hr>
-                )}
+        <div className="card-body row text-start h-100">
+            <div className="flex-grow-1">
+                <h5 className="card-title fs-4 text-ct-secondary mb-3">{title}</h5>
+                <p className="card-text text-white mb-4">{description}</p>
             </div>
+            {showDivider && (
+                <hr className="card-divider mt-auto"></hr>
+            )}
+        </div>
     )
 };

src/front/components/Values/Values.jsx

@@ -1,27 +1,30 @@
 import { Card } from "./Card";
 import { valuesContent } from "../../utils/valuesContent";
+import { useTranslation } from "react-i18next";
 
 export const Values = () => {
+    const { t } = useTranslation();
+
     return (
         <section className="d-flex justify-content-center mx-3 position-relative">
-                    <div className="container py-5">
-                        <div className="d-flex flex-column text-center align-items-center mb-5">
-                            <h2 className="section-title">Valores</h2>
-                            <p className="text-white ct-description-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est hic illo laudantium deleniti aut, quaerat nulla?</p>
-                        </div>
-
-                        <div className="row g-5">
-                            {valuesContent.map(value => (
-                                <div key={value.id} className="col-12 col-md-6 col-lg-3">
-                                    <Card
-                                        title={value.title}
-                                        description={value.description}
-                                        showDivider={value.id <= 4}
-                                    />
-                                </div>
-                            ))}
+            <div className="container py-5">
+                <div className="d-flex flex-column text-center align-items-center mb-5">
+                    <h2 className="section-title">{t('values.sectionTitle')}</h2>
+                    <p className="text-white ct-description-p">{t('values.sectionDescription')}</p>
+                </div>
+
+                <div className="row g-5">
+                    {valuesContent.map(value => (
+                        <div key={value.id} className="col-12 col-md-6 col-lg-3">
+                            <Card
+                                title={t(value.title)}
+                                description={t(value.description)}
+                                showDivider={value.id <= 6}
+                            />
                         </div>
-                    </div>
-                </section>
+                    ))}
+                </div>
+            </div>
+        </section>
     )
 }

src/front/utils/benefitsContent.jsx

@@ -1,42 +1,32 @@
 export const benefitsContent = [
     {
         id: 1,
-        title: "Credibilidad y Profesionalismo",
-        description: "Un sitio web moderno y funcional genera confianza instantánea. Refuerza la autoridad de tu marca, proyecta una imagen sólida y establece la credibilidad necesaria para atraer y retener a tus clientes."
+        title: "benefits.card.benefit1.title",
+        description: "benefits.card.benefit1.description"
     },
     {
         id: 2,
-        title: "Experiencia de Usuario Superior (UX)",
-        description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero soluta omnis fugiat nulla nobis quod cupiditate numquam placeat assumenda animi maiores veniam vero quis, beatae recusandae ducimus praesentium corrupti suscipit."
+        title: "benefits.card.benefit2.title",
+        description: "benefits.card.benefit2.description"
     },
     {
         id: 3,
-        title: "Mobile App",
-        description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero soluta omnis fugiat nulla nobis quod cupiditate numquam placeat assumenda animi maiores veniam vero quis, beatae recusandae ducimus praesentium corrupti suscipit."
+        title: "benefits.card.benefit3.title",
+        description: "benefits.card.benefit3.description"
     },
     {
         id: 4,
-        title: "Mobile App",
-        description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero soluta omnis fugiat nulla nobis quod cupiditate numquam placeat assumenda animi maiores veniam vero quis, beatae recusandae ducimus praesentium corrupti suscipit."
+        title: "benefits.card.benefit4.title",
+        description: "benefits.card.benefit4.description"
     },
     {
         id: 5,
-        title: "Mobile App",
-        description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero soluta omnis fugiat nulla nobis quod cupiditate numquam placeat assumenda animi maiores veniam vero quis, beatae recusandae ducimus praesentium corrupti suscipit."
+        title: "benefits.card.benefit5.title",
+        description: "benefits.card.benefit5.description"
     },
     {
         id: 6,
-        title: "Mobile App",
-        description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero soluta omnis fugiat nulla nobis quod cupiditate numquam placeat assumenda animi maiores veniam vero quis, beatae recusandae ducimus praesentium corrupti suscipit."
-    },
-    {
-        id: 7,
-        title: "Mobile App",
-        description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero soluta omnis fugiat nulla nobis quod cupiditate numquam placeat assumenda animi maiores veniam vero quis, beatae recusandae ducimus praesentium corrupti suscipit."
-    },
-    {
-        id: 8,
-        title: "Mobile App",
-        description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero soluta omnis fugiat nulla nobis quod cupiditate numquam placeat assumenda animi maiores veniam vero quis, beatae recusandae ducimus praesentium corrupti suscipit."
-    }                        
+        title: "benefits.card.benefit6.title",
+        description: "benefits.card.benefit6.description"
+    }
 ];