-
-
Valores
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est hic illo laudantium deleniti aut, quaerat nulla?
-
-
-
- {valuesContent.map(value => (
-
-
- ))}
+
+
+
{t('values.sectionTitle')}
+
{t('values.sectionDescription')}
+
+
+
+ {valuesContent.map(value => (
+
+
-
-
+ ))}
+
+
+
)
}
\ No newline at end of file
diff --git a/src/front/components/WhatsappButton.jsx b/src/front/components/WhatsappButton.jsx
new file mode 100644
index 0000000000..2d52b8bf6f
--- /dev/null
+++ b/src/front/components/WhatsappButton.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import LogoWhats from "../assets/img/LogoWhats.svg"
+import { FloatingWhatsApp } from "react-floating-whatsapp";
+import { useTranslation } from "react-i18next";
+
+export default function WhatsappButton() {
+ const { t } = useTranslation();
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/components/WorkWithUs.jsx b/src/front/components/WorkWithUs.jsx
new file mode 100644
index 0000000000..2b40909ec4
--- /dev/null
+++ b/src/front/components/WorkWithUs.jsx
@@ -0,0 +1,62 @@
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export const WorkWithUS = () => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+
{t('workWithUs.sectionTitle')}
+
+ {t('workWithUs.sectionDescription')}
+
+
+
+
+
+
+
+
+ 99
+ %
+
+
{t('workWithUs.statistics.customerSatisfaction')}
+
+
+
+
+ 18
+ K
+
+
{t('workWithUs.statistics.activeUsers')}
+
+
+
+
+ +
+ 10
+
+
{t('workWithUs.statistics.completedProjects')}
+
+
+
+
+ +
+ 5
+
+
{t('workWithUs.statistics.yearsOfExperience')}
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/i18n.js b/src/front/i18n.js
new file mode 100644
index 0000000000..8ca157fdde
--- /dev/null
+++ b/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;
diff --git a/src/front/index.css b/src/front/index.css
index 5459475abd..8b8dd4f5b4 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -6,12 +6,11 @@ body {
h1 {
font-family: "Exo 2", sans-serif;
font-weight: bold;
- color: #e2e505;
+ color: #fbff06;
}
p {
font-family: "Manrope", sans-serif;
-
}
h2,
h3,
@@ -38,14 +37,19 @@ h6 {
font-weight: bolder;
}
+.custom-modal-close-btn {
+ color: #fbff06;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fbff06'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
+}
+
/* Carousel next and prev buttons color style */
.carousel-control-prev-icon {
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fbff06'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fbff06'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
}
.carousel-control-next-icon {
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fbff06'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fbff06'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
/* Titles & text styles */
@@ -77,7 +81,7 @@ h6 {
.ct-paragraph {
font-size: 16pt;
- line-height: 180%;
+ line-height: 170%;
}
/* Cat transition effect */
@@ -147,11 +151,40 @@ h6 {
.ct-description-p {
width: 100%;
+ font-size: 16pt;
+ line-height: 170%;
+}
+
+@media (min-width: 800px) {
+ .ct-description-p {
+ width: 80%;
+ margin: auto;
+ }
}
@media (min-width: 1200px) {
.ct-description-p {
- width: 40%;
+ width: 50%;
+ margin: auto;
+ }
+}
+
+.ct-reviews {
+ width: 100%;
+ font-size: 16pt;
+ line-height: 170%;
+}
+
+@media (min-width: 800px) {
+ .ct-reviews {
+ width: 80%;
+ margin: auto;
+ }
+}
+
+@media (min-width: 1200px) {
+ .ct-reviews {
+ width: 70%;
margin: auto;
}
}
@@ -184,6 +217,32 @@ h6 {
transform: translateX(0);
}
+/* Footer links*/
+
+.footerLink {
+ color: white;
+ transition: color 0.3s ease;
+ text-decoration: none;
+}
+
+.footerLink:hover {
+ color: #fbff06;
+}
+
+/* Language switch */
+
+.flag-icon-main {
+ width: 24px;
+ height: auto;
+ vertical-align: middle;
+}
+
+.flag-icon-dropdown {
+ width: 20px;
+ height: auto;
+ margin-right: 8px;
+}
+
/* Navbar */
.btn-outline-custom-yellow {
color: #fbff06 !important;
@@ -237,12 +296,16 @@ h6 {
background-color: rgba(10, 25, 30, 0.5);
}
-.btn-outline-yellow {
+.hero-title-home {
+ color: #fbff06 !important;
+}
+
+.btn-outline {
color: #fbff06 !important;
border-color: #fbff06 !important;
}
-.btn-outline-yellow:hover {
+.btn-outline:hover {
background-color: #fbff06 !important;
color: #217b8f !important;
border-color: #fbff06 !important;
@@ -259,7 +322,7 @@ h6 {
}
.hero-subtitle-home {
- font-size: 1rem;
+ font-size: 3rem;
}
}
/* Benefits cards, components & background */
@@ -268,16 +331,65 @@ h6 {
font-weight: bold;
}
.text-ct-secondary {
- color: #60E0A5;
+ color: #60e0a5;
}
-.ct-description-p{
+.ct-description-p {
color: #ffff;
}
.card-divider {
- border: none;
- border-top: 1px solid #6ee6b9;
- opacity: 1;
+ border: none;
+ border-top: 1px solid #6ee6b9;
+ opacity: 1;
}
.card-background {
color: transparent;
}
+/* header contacto */
+.header {
+ margin-bottom: 4rem !important;
+}
+.form-label-contact {
+ color: #60e0a5 !important;
+}
+
+.btn-submit-contact {
+ background-color: #217b8f !important;
+ color: #e2e505 !important;
+ font-weight: bold;
+ border: none;
+}
+
+.btn-submit-contact:hover {
+ background-color: #2799b3 !important;
+}
+/* Work With Us */
+.text-stat-number {
+ color: #60e0a5;
+}
+.text-stat-symbol {
+ color: #fbff06;
+}
+
+/* Admin Styles */
+
+.adminOption {
+ color: white;
+ transition: color 0.3s ease;
+ text-decoration: none;
+}
+
+.adminOption:hover {
+ color: #fbff06;
+}
+
+/* Login styles */
+
+@media (max-width: 780px) {
+ .login-logo {
+ min-width: 280px;
+ }
+}
+
+.login-logo {
+ min-width: 200px;
+}
diff --git a/src/front/main.jsx b/src/front/main.jsx
index ca1026c5d2..15c01ecd4d 100644
--- a/src/front/main.jsx
+++ b/src/front/main.jsx
@@ -1,4 +1,4 @@
-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
@@ -6,22 +6,39 @@ 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 (
-
+
- );
+ );
return (
-
- {/* Provide global state to all components */}
-
- {/* Set up routing for the application */}
-
-
-
+
+
+
+