Traducir y ajustar componentes

2024-10-14 15:38:20 -07:00 · 2024-10-14 15:38:20 -07:00 · 21f1c24d88
commit 21f1c24d88
parent 40095265bb
18 changed files with 300 additions and 139 deletions
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@ -0,0 +1,10 @@
+import React from 'react';
+import LanguageProvider from './src/context/LanguageContext';
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <LanguageProvider>
+      {element}
+    </LanguageProvider>
+  );
+};
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@ -1,7 +1,8 @@
 import React from "react";
+import LanguageProvider from './src/context/LanguageContext';

 const HtmlAttributes = {
-  lang: "en"
+  lang: "es"
 }

 const HeadComponents = [
@ -28,3 +29,11 @@ export const onRenderBody = ({ setHeadComponents, setHtmlAttributes }) => {
  setHtmlAttributes(HtmlAttributes);
  setHeadComponents(HeadComponents);
 }
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <LanguageProvider>
+      {element}
+    </LanguageProvider>
+  );
+}
--- a/src/components/IntlProviderWrapper.jsx
+++ b/src/components/IntlProviderWrapper.jsx
@ -0,0 +1,12 @@
+import React from 'react';
+import LanguageProvider from '../../../context/LanguageContext';
+
+const IntlProviderWrapper = ({ children }) => {
+  return (
+    <LanguageProvider>
+      {children}
+    </LanguageProvider>
+  );
+};
+
+export default IntlProviderWrapper;
--- a/src/components/Navbars/LanguageSelector/LanguageSwitcher.jsx
+++ b/src/components/Navbars/LanguageSelector/LanguageSwitcher.jsx
@ -1,52 +1,29 @@
-import React, { useEffect, useState } from 'react';
-import { IntlProvider,  useIntl } from 'gatsby-plugin-intl';
-import { navigate } from 'gatsby';
+import React, { useContext } from 'react';
+import { LanguageContext } from '../../../context/LanguageContext';

 const LanguageSwitcher = () => {
-  const [messages, setMessages] = useState({});
-  const [languages, setLanguages] = useState([]);
-  const intl = useIntl();
-  const currentLanguage = intl.locale;
+  const { languages, currentLanguage, changeLanguage } = useContext(LanguageContext);

-  useEffect(() => {
-    const fetchMessages = async () => {
-      try {
-        const response = await fetch('/data/language/languages.json');
-        const data = await response.json();
-        setMessages(data);
-        setLanguages(Object.keys(data));
-      } catch (error) {
-        console.error('Error fetching texts:', error);
-      }
-    };
-
-    fetchMessages();
-  }, []);
-
-  const handleLanguageChange = (newLanguage) => {
-    const path = window.location.pathname;
-    const newPath = `/${newLanguage}${path.substring(3)}`;
-    navigate(newPath);
-  };
+  if (!languages || languages.length === 0) {
+    return <div>Loading...</div>;
+  }

  return (
-    <IntlProvider locale={currentLanguage} messages={messages[currentLanguage]}>
-      <div>
+    <div>
      <button className="icon-35 dropdown-toggle p-0 border-0 bg-transparent rounded-circle img-cover text-white" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
-            <img src={currentLanguage === 'en' ? '/assets/img/lang.png' : '/assets/img/lang-es.png'} alt="Language flag" />
+        <img src={currentLanguage === 'en' ? '/assets/img/lang.png' : '/assets/img/lang-es.png'} alt="Language flag" />
+      </button>
+      <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+        {languages.map((lang) => (
+          <button className="dropdown-item"
+            key={lang}
+            onClick={() => changeLanguage(lang)}
+            disabled={lang === currentLanguage}>
+            {lang === 'en' ? 'English' : 'Español'}
          </button>
-          <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-          {languages.map((lang) => (
-              <button className="dropdown-item"
-                key={lang}
-                onClick={() => handleLanguageChange(lang)}
-                disabled={lang === currentLanguage}>
-                {lang === 'en' ? 'English' : 'Español'}
-              </button>
-          ))}
-          </ul>
-      </div>
-    </IntlProvider>
+        ))}
+      </ul>
+    </div>
  );
 };

--- a/src/components/Software/About.jsx
+++ b/src/components/Software/About.jsx
@ -35,7 +35,7 @@ const About = () => {
              <div className="info-circle" key={index}>
                <div className="cont">
                  <h2>{ number.value }</h2>
-                  <small>{ number.title }</small>
+                  <small>{intl.locale === 'en' ?  number.title2  :  number.title }</small>
                </div>
              </div>
            ))
@ -78,7 +78,7 @@ const About = () => {
                </div>
                <ul>
                  {
-                    dataAbout.features.map((feature, index) => (<li key={index}> <i className="bi bi-star-fill me-3"></i> { feature }</li>))
+                    dataAbout.features.map((feature, index) => (<li key={index}> <i className="bi bi-star-fill me-3"></i> {intl.locale === 'en' ? feature.titleEn : feature.titleEs}</li>))
                  }
                </ul>
                <Link to={urlHelper.getLocalizedUrl('/page-about-5')} className="btn rounded-pill border-blue2 hover-blue2 mt-60 sm-butn">
--- a/src/components/Software/Blog.jsx
+++ b/src/components/Software/Blog.jsx
@ -7,9 +7,9 @@ import api from '../../common/api';

 const Blog = () => {
  const intl = useIntl();
-  const blog_title1= DOMPurify.sanitize(intl.formatMessage({ id: "blog_title1" }).trim().replace(/^"|"$/g, ''));
-
-  const [dataBlog, setBlogs] = useState({blogs: [], faq: [],clients: []});
+  //const blog_title1= DOMPurify.sanitize(intl.formatMessage({ id: "blog_title1" }).trim().replace(/^"|"$/g, ''));
+  const [dataBlog, setBlogs] = useState({blogs: [], faq: [],clients: [],text_traductions:[]});
+  const blog_titleResult = intl.locale === 'es' ? dataBlog.text_traductions.blog_title1_es : dataBlog.text_traductions.en.blog_title1_en;

  useEffect(() => {
    const fetchData = async () => {
@ -30,8 +30,8 @@ const Blog = () => {
          <div className="col-lg-5">
            <div className="blog-content">
              <div className="section-head style-3 d-flex align-items-center mb-50" >
-                <div dangerouslySetInnerHTML={{ __html: blog_title1 }}></div>
-               <Link to="/page-blog-5" className="text-muted ms-5 ps-5 mt-2">{intl.formatMessage({ id: "all_articles" })} <i className="bi bi-chevron-right ms-1"></i></Link>
+                <div dangerouslySetInnerHTML={{ __html: blog_titleResult }}></div>
+               <Link to="/page-blog-5" className="text-muted ms-5 ps-5 mt-2">{intl.locale === 'es' ? dataBlog.text_traductions.all_articles_es : dataBlog.text_traductions.all_articles_en} <i className="bi bi-chevron-right ms-1"></i></Link>
              </div>
              {
                dataBlog.blogs.map((post, i) => (
@ -45,18 +45,18 @@ const Blog = () => {
                      <div className="col-lg-8">
                        <div className="card-body p-0">
                          <small className="d-block date text">
-                            <a href="#" className="text-uppercase border-end brd-light pe-3 me-3 color-blue2 fw-bold">{ post.type }</a>
+                            <a href="#" className="text-uppercase border-end brd-light pe-3 me-3 color-blue2 fw-bold">{ intl.locale === 'es' ? post.type.es : post.type.en }</a>
                            <i className="bi bi-clock me-1"></i>
-                            <a href="#" className="op-8">{ post.time }</a>
+                            <a href="#" className="op-8">{ intl.locale === 'es' ? post.time_es : post.time_en }</a>
                          </small>
-                          <h6 className="card-title"><Link to="/page-single-post-5">{ post.title }</Link></h6>
+                          <h6 className="card-title"><Link to="/page-single-post-5">{ intl.locale === 'es' ? post.title_es : post.title_en }</Link></h6>
                          <div className="d-flex small mt-20 align-items-center justify-content-between op-9">
                            <div className="l_side d-flex align-items-center">
                              <span className="icon-10 rounded-circle d-inline-flex justify-content-center align-items-center text-uppercase bg-blue2 p-2 me-2 text-white">
                                { post.userImage }
                              </span>
                              <a href="#">
-                                <small className="text-muted">By</small> { post.username }
+                                <small className="text-muted">{intl.locale === 'es' ? dataBlog.text_traductions.by_es : dataBlog.text_traductions.by_en}</small> { post.username }
                              </a>
                            </div>
                            <div className="r-side mt-1">
@ -97,7 +97,7 @@ const Blog = () => {
                  ))
                }
                <Link to="/page-contact-5" className="text-muted text-uppercase mt-50 small">
-                  See More <i className="bi bi-chevron-right ms-1"></i>
+                  {intl.locale === 'es' ? dataBlog.text_traductions.see_more_es : dataBlog.text_traductions.see_more_en} <i className="bi bi-chevron-right ms-1"></i>
                </Link>
              </div>
            </div>
--- a/src/components/Software/Header.jsx
+++ b/src/components/Software/Header.jsx
@ -1,39 +1,55 @@
-import React from 'react';
-import DOMPurify from 'dompurify';
+import React, { useEffect, useState } from 'react';
 import { useIntl } from "gatsby-plugin-intl";
+import api from '../../common/api';

 const Header = () => {
  const intl = useIntl();
-  const header_1= DOMPurify.sanitize(intl.formatMessage({ id: "header_1" }).trim().replace(/^"|"$/g, ''));
+  const [headers, setHeaders] = useState({es:[], en:[]});
+  //const header_1= DOMPurify.sanitize(intl.formatMessage({ id: "header_1" }).trim().replace(/^"|"$/g, ''));
+  const header_1Result = intl.locale === 'es' ? headers.es.header_1 : headers.en.header_1
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await api.get('headers', 'header.json');
+        setHeaders(response);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchData();
+  }, []);

  return (
+
    <header className="style-3 overflow-hidden" data-scroll-index="0">
      <div className="container">
        <div className="content section-padding">
          <div className="row">
            <div className="col-lg-5">
              <div className="info">
-              <h1 className="h1" dangerouslySetInnerHTML={{ __html: header_1 }}></h1>
-                <p className="p">{intl.formatMessage({ id: "header_2" })}</p>
-                <h5 className="h5">{intl.formatMessage({ id: "get_free_quotes" })} <span className="fw-normal ms-1">{intl.formatMessage({ id: "header_3" })}</span></h5>
+                <h1 className="h1" dangerouslySetInnerHTML={{ __html: header_1Result }}></h1>
+                <p className="p"></p>
+                <h5 className="h5">{intl.locale === 'es' ? headers.es.header_2 : headers.en.header_2}<span className="fw-normal ms-1">{intl.locale === 'es' ? headers.es.header_3 : headers.en.header_3}</span></h5>
                <form action="contact.php" className="form mt-30" method="post">
                  <div className="row gx-3">
                    <div className="col-6">
                      <div className="form-group input-with-icon">
-                        <input type="text" className="form-control" placeholder={intl.formatMessage({ id: "your_email" })} />
+                        <input type="text" className="form-control" placeholder={intl.locale === 'es' ? headers.es.your_email : headers.en.your_email} />
                        <span className="input-icon"><i className="far fa-envelope"></i></span>
                      </div>
                    </div>
                    <div className="col-6">
                      <div className="form-group">
                        <select className="form-select" defaultValue={"Your inquiry about"}>
-                          <option value="">{intl.formatMessage({ id: "inquiry_about" })}</option>
+                          <option value="">{intl.locale === 'es' ? headers.es.inquiry_about : headers.en.inquiry_about}</option>
                        </select>
                      </div>
                    </div>
                    <div className="col-12">
                      <button className="btn dark-butn hover-darkBlue rounded-pill w-100 mt-3">
-                        <span>{intl.formatMessage({ id: "request_a_consultation" })}</span>
+                        <span>{intl.locale === 'es' ? headers.es.request_a_consultation : headers.en.request_a_consultation}</span>
                      </button>
                    </div>
                  </div>
--- a/src/components/Software/Services.jsx
+++ b/src/components/Software/Services.jsx
@ -1,10 +1,26 @@
-import React from 'react';
+import React ,{ useEffect, useState }from 'react';
 import { Link } from 'gatsby';
 import { useIntl } from "gatsby-plugin-intl";
-import services from 'data/Software/services.json';
+//import services from '/static/data/services.json';
+import api from '../../common/api';

 const Services = () => {
  const intl = useIntl();
+
+  const [services, setServices] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await api.get('services','services.json');
+        setServices(response);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchData();
+  }, []);
  return (
    <section className="services style-3 section-padding pb-70" data-scroll-index="2">
      <div className="container">
@ -20,9 +36,9 @@ const Services = () => {
                    <img src={service.icon} alt="" />
                  </div>
                  <div className="info">
-                    <h5 className="title">{ service.title }</h5>
+                    <h5 className="title">{ intl.locale === 'en' ? service.title_en : service.title_es }</h5>
                    <div className="text">
-                      { service.details }
+                      {intl.locale === 'en' ?  service.details_en : service.details_es}
                    </div>
                    <Link to="/page-portfolio-5"><span>{intl.formatMessage({ id: "see_projects" })}</span> <i className="bi bi-chevron-right ms-1"></i></Link>
                  </div>
--- a/src/context/LanguageContext.js
+++ b/src/context/LanguageContext.js
@ -0,0 +1,43 @@
+import React, { createContext, useState, useEffect } from 'react';
+import { IntlProvider } from 'gatsby-plugin-intl';
+import { navigate } from 'gatsby';
+export const LanguageContext = createContext();
+
+const LanguageProvider = ({ children }) => {
+  const [messages, setMessages] = useState({});
+  const [languages, setLanguages] = useState([]);
+  const [currentLanguage, setCurrentLanguage] = useState('es');
+
+
+  useEffect(() => {
+    const fetchMessages = async () => {
+      try {
+        const response = await fetch('/data/language/languages.json');
+        const data = await response.json();
+        setMessages(data);
+        setLanguages(Object.keys(data));
+      } catch (error) {
+        console.error('Error fetching texts:', error);
+      }
+    };
+
+    fetchMessages();
+  }, []);
+
+  const changeLanguage = (newLanguage) => {
+    setCurrentLanguage(newLanguage);
+    const path = window.location.pathname;
+    const newPath = `/${newLanguage}${path.substring(3)}`;
+    navigate(newPath);
+  };
+
+  return (
+    <LanguageContext.Provider value={{ messages, languages, currentLanguage, changeLanguage }}>
+      <IntlProvider locale={currentLanguage} messages={messages[currentLanguage]}>
+        {children}
+      </IntlProvider>
+    </LanguageContext.Provider>
+  );
+};
+
+export default LanguageProvider;
--- a/src/data/Software/services.json
+++ b/src/data/Software/services.json
@ -1,22 +1,32 @@
-[
+{
+ "services":[
  {
    "icon": "/assets/img/icons/serv_icons/10.png",
-    "title": "IT Consultation",
-    "details": "We provide best IT solutions for any type of business as stragegy, management."
+    "title_es": "Consulta de TI",
+    "details_es": "Brindamos las mejores soluciones de TI para cualquier tipo de negocio como estrategia y gestión.",
+        "title_en": "IT Consultation",
+    "details_en": "We provide best IT solutions for any type of business as stragegy, management."
  },
  {
    "icon": "/assets/img/icons/serv_icons/11.png",
-    "title": "Software Development",
-    "details": "We bring methods for design and development as website, mobile app, etc"
+    "title_es": "Desarrollo de software",
+    "details_es": "Aportamos métodos para el diseño y desarrollo como sitio web, aplicación móvil, etc.",
+        "title_en": "Software Development",
+    "details_en": "We bring methods for design and development as website, mobile app, etc"
  },
  {
    "icon": "/assets/img/icons/serv_icons/12.png",
-    "title": "Data Security",
-    "details": "Analys & Management Big Data alway big issue of companies management."
+    "title_es": "Seguridad de datos",
+    "details_es": "Análisis y Gestión Big Data siempre es un gran tema en la gestión de las empresas.",
+        "title_en": "Data Security",
+    "details_en": "Analys & Management Big Data alway big issue of companies management."
  },
  {
    "icon": "/assets/img/icons/serv_icons/13.png",
-    "title": "AI Machine Learning",
-    "details": "Turn AI & Machine Learning in the life. Enhance the quality and the effeciency"
+    "title_es": "Aprendizaje automático de IA",
+    "details_es": "Convierta la IA y el aprendizaje automático en la vida. Mejorar la calidad y la eficiencia.",
+        "title_en": "AI Machine Learning",
+    "details_en": "Turn AI & Machine Learning in the life. Enhance the quality and the effeciency"
  }
 ]
+}
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@ -25,7 +25,7 @@ const HomeSoftwareCompanyOnePage = () => {
        <About />
        <Projects />
        <Pricing />
-        <Team />
+        {/* <Team /> */}
        <Blog />
        <ChatBanner />
      </main>
--- a/static/assets/css/elements/_header.css
+++ b/static/assets/css/elements/_header.css
@ -194,7 +194,7 @@ header.style-3::before {
 header.style-3 .main-img {
  position: absolute;
  right: 0;
-  top: 200px;
+  top: 150px;
  width: 55%;
  height: calc(100% - 300px);
  -o-object-fit: contain;
@ -222,7 +222,7 @@ header.style-3 .main-img .circle {

 header.style-3 .main-img .logo_shap {
  position: absolute;
-  top: 37%;
+  top: 45%;
  right: 39%;
  width: 17%;
 }
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@ -2870,7 +2870,7 @@ header.style-3 {
  header.style-3 .main-img {
    position: absolute;
    right: 0;
-    top: 200px;
+    top: 150px;
    width: 55%;
    height: calc(100% - 300px);
    -o-object-fit: contain;
@ -2892,7 +2892,7 @@ header.style-3 {
      animation: rotate-center 100s linear infinite both; }
    header.style-3 .main-img .logo_shap {
      position: absolute;
-      top: 37%;
+      top: 45%;
      right: 39%;
      width: 17%; }
  header.style-3 .content .info .h1 {
--- a/static/data/about.json
+++ b/static/data/about.json
@ -2,27 +2,39 @@
  "about": {
    "numbers": [
      {
-        "value": "1,2k",
-        "title": "Projects done"
+        "value": "50",
+        "title": "Proyectos realizados",
+        "title2":"Projects done"
      },
      {
        "value": "165",
-        "title": "satisfied clients"
+        "title": "Clientes satisfechos",
+        "title2":"satisfied clients"
      },
      {
-        "value": "26",
-        "title": "awards winner"
-      },
-      {
-        "value": "15",
-        "title": "years of experience"
+        "value": "5",
+        "title": "años de experiencia",
+        "title2":"years of experience"
      }
    ],
    "features": [
-      "Latest IT Solutions & Integration With Blockchain",
-      "Over 100+ Payment Gateways Support",
-      "AI Machine & Deep Learning",
-      "Dedicated Support 24/7"
+      {
+      "titleEs":"Últimas soluciones de TI e integración con Blockchain",
+      "titleEn":"Latest IT Solutions & Integration With Blockchain"
+      },
+      {
+      "titleEs":"Soporte para más de 100 pasarelas de pago",
+      "titleEn":"Over 100+ Payment Gateways Support"
+      },
+      {
+      "titleEs":"Máquina de IA y aprendizaje profundo",  
+      "titleEn":"AI Machine & Deep Learning"
+      },
+      {
+      "titleEs":"Soporte dedicado 24/7",  
+      "titleEn":"Dedicated Support 24/7"
+      }  
+      
    ]
  }
 }
--- a/static/data/blog.json
+++ b/static/data/blog.json
@ -3,33 +3,39 @@
  "blogs": [
    {
      "cover": "/assets/img/blog/6.png",
-      "type": "tips & tricks",
-      "time": "12 Days ago",
-      "title": "How To Become A Python Develop Expert",
+      "type": {
+        "en": "tips & tricks",
+        "es": "trucos & tips"
+      },
+      "time_en": "12 Days ago",
+      "title_en": "How To Become A Python Develop Expert",
+      "type_es": "trucos & tips",
+      "time_es": "Hace 12 días",
+      "title_es": "Cómo convertirse en un experto en desarrollo de Python",
      "userImage": "a",
-      "username": "Admin",
-      "comments": "24",
-      "views": "774k"
+      "username": "Admin"
    },
    {
      "cover": "/assets/img/blog/7.png",
-      "type": "News",
-      "time": "5 Days ago",
-      "title": "AI With Fingerprint",
+      "type_en": "News",
+      "time_en": "5 Days ago",
+      "title_en": "AI With Fingerprint",
+      "type_es": "Noticias",
+      "time_es": "Hace 5 días",
+      "title_es": "IA con huella digital",
      "userImage": "a",
-      "username": "David",
-      "comments": "24",
-      "views": "774k"
+      "username": "Admin"
    },
    {
      "cover": "/assets/img/blog/8.png",
-      "type": "tips & tricks",
-      "time": "1 month ago",
-      "title": "Solutions For Big Data Issue, Expert Perspective",
+      "type_en": "tips & tricks",
+      "time_en": "1 month ago",
+      "title_en": "Solutions For Big Data Issue, Expert Perspective",
+      "type_es": "trucos & tips",
+      "time_es": "Hace 1 mes",
+      "title_es": "Soluciones para el problema de Big Data, perspectiva de expertos",
      "userImage": "a",
-      "username": "Moussa",
-      "comments": "24",
-      "views": "774k"
+      "username": "Admin"
    }
  ],
  "faq": [
@ -61,6 +67,17 @@
    "/assets/img/logos/4.png",
    "/assets/img/logos/5.png",
    "/assets/img/logos/6.png"
-  ]
+  ],
+  "text_traductions":{
+      "blog_title1_es":"<h3>Nextream <span>Noticias</span></h3> ",
+      "all_articles_es":"Ver artículos",
+      "by_es":"Por",
+      "see_more_es":"Ver Más",
+      "blog_title1_en":"<h3>Nextream's <span>Journal</span></h3>",
+      "all_articles_en":"All Articles",
+      "by_en":"By",
+      "see_more_en":"See More"
+    }
+
 }
 }
--- a/static/data/header.json
+++ b/static/data/header.json
@ -0,0 +1,23 @@
+
+    {
+        "headers":{
+            "es": {
+                "header_1":"Haz tu vida más fácil con la ayuda de <span>Nextream</span>",
+                "header_2":"Ayudamos a las empresas a aumentar su valor mediante el desarrollo de software personalizado, diseño de productos, control de calidad y servicios de consultoría.",
+                "header_3":"Nos pondremos en contacto en 24h.",
+                "get_free_quotes": "¡Obtenga una cotización gratuita!",
+                "your_email":"Su correo electrónico *",
+                "inquiry_about":"Su consulta sobre",
+                "request_a_consultation":"¡Solicite una consulta!"
+            },
+            "en": {
+                "get_free_quotes": "Get Free Quotes!",
+                "header_1":" Make your life easier with help from <span>Nextream</span>",
+                "header_2":"We help businesses elevate their value through custom software development, product design, QA & consultancy services.",
+                "header_3":"We’ll contact back in 24h",
+                "your_email":"Su correo electrónico *",
+                "inquiry_about":"Your inquiry about",
+                "request_a_consultation":"Request a consultation!"
+            }
+        }
+}
--- a/static/data/services.json
+++ b/static/data/services.json
@ -1,22 +1,32 @@
-[
-  {
-    "icon": "/assets/img/icons/serv_icons/10.png",
-    "title": "IT Consultation",
-    "details": "We provide best IT solutions for any type of business as stragegy, management."
-  },
-  {
-    "icon": "/assets/img/icons/serv_icons/11.png",
-    "title": "Software Development",
-    "details": "We bring methods for design and development as website, mobile app, etc"
-  },
-  {
-    "icon": "/assets/img/icons/serv_icons/12.png",
-    "title": "Data Security",
-    "details": "Analys & Management Big Data alway big issue of companies management."
-  },
-  {
-    "icon": "/assets/img/icons/serv_icons/13.png",
-    "title": "AI Machine Learning",
-    "details": "Turn AI & Machine Learning in the life. Enhance the quality and the effeciency"
-  }
-]
+{
+  "services":[
+   {
+     "icon": "/assets/img/icons/serv_icons/10.png",
+     "title_es": "Consulta de TI",
+     "details_es": "Brindamos las mejores soluciones de TI para cualquier tipo de negocio como estrategia y gestión.",
+         "title_en": "IT Consultation",
+     "details_en": "We provide best IT solutions for any type of business as stragegy, management."
+   },
+   {
+     "icon": "/assets/img/icons/serv_icons/11.png",
+     "title_es": "Desarrollo de software",
+     "details_es": "Aportamos métodos para el diseño y desarrollo como sitio web, aplicación móvil, etc.",
+         "title_en": "Software Development",
+     "details_en": "We bring methods for design and development as website, mobile app, etc"
+   },
+   {
+     "icon": "/assets/img/icons/serv_icons/12.png",
+     "title_es": "Seguridad de datos",
+     "details_es": "Análisis y Gestión Big Data siempre es un gran tema en la gestión de las empresas.",
+         "title_en": "Data Security",
+     "details_en": "Analys & Management Big Data alway big issue of companies management."
+   },
+   {
+     "icon": "/assets/img/icons/serv_icons/13.png",
+     "title_es": "Aprendizaje automático de IA",
+     "details_es": "Convierta la IA y el aprendizaje automático en la vida. Mejorar la calidad y la eficiencia.",
+         "title_en": "AI Machine Learning",
+     "details_en": "Turn AI & Machine Learning in the life. Enhance the quality and the effeciency"
+   }
+ ]
+ }
--- a/static/data/testimonials.json
+++ b/static/data/testimonials.json
@ -17,6 +17,12 @@
    "image": "/assets/img/testimonials/user2.jpeg",
    "author": "Lucas Digne",
    "positon": "Product Management at Invisionapp"
+  },
+  {
+    "text": "“Iteck’s Experts really is amazing! high speciality, professional and friendly. Our profit increased so much. Really very satisfied!”",
+    "image": "/assets/img/testimonials/user2.jpeg",
+    "author": "Cesar Mendivil",
+    "positon": "Product Management at Invisionapp"
  }
  ]
 }