-
-
React Boilerplate
-
-
-
-
+ <>
+ {/* --- NAVBAR DE ESCRITORIO --- */}
+ {/*
*/}
+
+
+ {/* --- NAVBAR MÓVIL (TRIGGER Y OFFCANVAS) --- */}
+
+
+
+
+
+
+
+
+
-
+
);
};
\ No newline at end of file
diff --git a/src/front/components/Process.jsx b/src/front/components/Process.jsx
new file mode 100644
index 0000000000..889281f0a6
--- /dev/null
+++ b/src/front/components/Process.jsx
@@ -0,0 +1,132 @@
+import { useState } from "react"
+import { capacitiesData, processData } from "../utils/processContent";
+import { useTranslation } from "react-i18next";
+
+
+export const Process = () => {
+ const { t } = useTranslation();
+ const [activeSection, setActiveSection] = useState('capacidades');
+ const [activeContent, setActiveContent] = useState('capacidad1');
+
+ const activeColor = "#fbff06"
+ const inactiveColor = "#A8AB02"
+
+ const handleMainSection = (section) => {
+ setActiveSection(section);
+ if (section === 'capacidades') {
+ setActiveContent('capacidad1');
+ } else {
+ setActiveContent('paso1');
+ }
+ };
+
+ const getCurrentContent = () => {
+ let contentItem;
+ if (activeSection === 'capacidades') {
+ contentItem = capacitiesData.find(capacity => capacity.id === activeContent) || capacitiesData[0];
+ return t(contentItem.text);
+ } else {
+ contentItem = processData.find(process => process.id === activeContent) || processData[0];
+ return t(contentItem.text);
+ }
+ };
+
+ const firstColumnCapacities = capacitiesData.slice(0, Math.ceil(capacitiesData.length / 2));
+ const secondColumnCapacities = capacitiesData.slice(Math.ceil(capacitiesData.length / 2));
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeSection === 'capacidades' ? (
+ <>
+
+
+
+ {/* Primera columna de botones */}
+
+ {firstColumnCapacities.map(capacity => (
+
+ ))}
+
+ {/* Segunda columna de botones */}
+
+ {secondColumnCapacities.map(capacity => (
+
+ ))}
+
+
+
+
+
+
+
{getCurrentContent()}
+
+
+ ) : (
+ <>
+
+
+
+ {processData.map(process => (
+
+ ))}
+
+
+
+
+
+
{getCurrentContent()}
+
+
+ )
+
+ }
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/Projects.jsx b/src/front/components/Projects.jsx
new file mode 100644
index 0000000000..4a297295ab
--- /dev/null
+++ b/src/front/components/Projects.jsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { projectsContent } from "../utils/projectsContent";
+import { useTranslation } from "react-i18next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+export const Projects = ({ limit = 0 }) => {
+ const { t } = useTranslation();
+ const [showModal, setShowModal] = useState(false);
+ const [selectedImageIndex, setSelectedImageIndex] = useState(null);
+
+ const imagesToDisplay = limit > 0
+ ? projectsContent.slice(0, limit).map(project => project.images[0])
+ : projectsContent.flatMap(project => project.images);
+
+ const handleImageClick = (index) => {
+ setShowModal(true);
+ setSelectedImageIndex(index);
+ }
+
+ const handleCloseModal = () => {
+ setShowModal(false);
+ setSelectedImageIndex(null);
+ }
+
+ const handlePrev = (e) => {
+ e.stopPropagation();
+ setSelectedImageIndex(prevIndex => (prevIndex === 0 ? imagesToDisplay.length - 1 : prevIndex - 1));
+ }
+
+ const handleNext = (e) => {
+ e.stopPropagation();
+ setSelectedImageIndex(prevIndex => (prevIndex === imagesToDisplay.length - 1 ? 0 : prevIndex + 1));
+ }
+
+ const currentImage = selectedImageIndex !== null ? imagesToDisplay[selectedImageIndex] : null;
+
+ const column1Projects = imagesToDisplay.slice(0, Math.ceil(imagesToDisplay.length / 2));
+ const column2Projects = imagesToDisplay.slice(Math.ceil(imagesToDisplay.length / 2), imagesToDisplay.length);
+
+ return (
+
+
+
+
{t('projects.sectionTitle')}
+
{t('projects.sectionDescription')}
+
+
+
+
+ {column1Projects.map((image, index) => (
+
handleImageClick(index)}
+ style={{ cursor: "pointer" }}
+ />
+ ))}
+
+
+
+
+ {column2Projects.map((image, index) => (
+
handleImageClick(index)}
+ style={{ cursor: "pointer" }}
+ />
+ ))}
+
+
+
+ {limit > 0 ? (
+
+
+
+ {t('projects.sectionPortfolioButton')}
+
+
+
+ ) : (
+
+
+
+ {t('projects.sectionCTAButton')}
+
+
+
+ )}
+
+
e.stopPropagation()}>
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/ProtectedRoute.jsx b/src/front/components/ProtectedRoute.jsx
new file mode 100644
index 0000000000..abcd4327df
--- /dev/null
+++ b/src/front/components/ProtectedRoute.jsx
@@ -0,0 +1,8 @@
+import React, { Children } from 'react';
+import { Navigate } from 'react-router-dom';
+
+export const ProtectedRoute = ({ children }) => {
+ const token = localStorage.getItem('accessToken');
+
+ return token ? children :
+};
\ No newline at end of file
diff --git a/src/front/components/Services/Card.jsx b/src/front/components/Services/Card.jsx
new file mode 100644
index 0000000000..54d4959cb8
--- /dev/null
+++ b/src/front/components/Services/Card.jsx
@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom"
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
+
+export const Card = ({ title, icon, description, link }) => {
+ return (
+
+
+
{icon} {title}
+
{description}
+
+ {link}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/Services/Services.jsx b/src/front/components/Services/Services.jsx
new file mode 100644
index 0000000000..7cfd03345a
--- /dev/null
+++ b/src/front/components/Services/Services.jsx
@@ -0,0 +1,65 @@
+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] = [];
+ }
+ acc[service.id].push(service);
+ return acc;
+ }, {})
+
+ const sections = [
+ {
+ 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 (
+
+ 
+
+
+
+
{t('services.sectionTitle')}
+
{t('services.sectionDescription')}
+
+
+ {sections.map(section => (
+
+
{section.title}
+
{section.subtitle}
+ {groupedServices[section.id] && groupedServices[section.id].map(service => (
+
+
+
+ ))
+ }
+
+ ))}
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/Team/AboutUs.jsx b/src/front/components/Team/AboutUs.jsx
new file mode 100644
index 0000000000..cd53cafad6
--- /dev/null
+++ b/src/front/components/Team/AboutUs.jsx
@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18next"
+
+export const AboutUs = () => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+
{t('about.sectionTitle')}
+
{t('about.sectionDescription')}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/Team/Card.jsx b/src/front/components/Team/Card.jsx
new file mode 100644
index 0000000000..0e82943a90
--- /dev/null
+++ b/src/front/components/Team/Card.jsx
@@ -0,0 +1,30 @@
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons"
+import { faLinkedin } from "@fortawesome/free-brands-svg-icons"
+import { faGithubSquare } from "@fortawesome/free-brands-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { Link } from "react-router-dom"
+
+export const Card = ({ name, position, description, image, catImage, mailLink, linkedinLink, githubLink }) => {
+ return (
+
+
+
+
+
+
+
+
{name}
+
{position}
+
{description}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/Team/Team.jsx b/src/front/components/Team/Team.jsx
new file mode 100644
index 0000000000..8f5be00013
--- /dev/null
+++ b/src/front/components/Team/Team.jsx
@@ -0,0 +1,37 @@
+import { teamContent } from "../../utils/teamContent"
+import { Card } from "./Card"
+import teamBg from "../../assets/img/teamBackground.png"
+import { useTranslation } from "react-i18next"
+
+export const Team = () => {
+ const { t } = useTranslation();
+
+ return (
+
+ 
+ < div className="container py-4">
+
+
{t('team.sectionTitle')}
+
{t('team.sectionDescription')}
+
+ {teamContent.map(teamMember => (
+
+
+
+ ))
+ }
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/Testimonial/Card.jsx b/src/front/components/Testimonial/Card.jsx
new file mode 100644
index 0000000000..63901b6e2a
--- /dev/null
+++ b/src/front/components/Testimonial/Card.jsx
@@ -0,0 +1,24 @@
+export const Card = ({ name, position, review, profilePicture, logo }) => {
+ return (
+
+
+
+
+
+
+
+
{name}
+ {position}
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/Testimonial/Testimonials.jsx b/src/front/components/Testimonial/Testimonials.jsx
new file mode 100644
index 0000000000..578afd42e9
--- /dev/null
+++ b/src/front/components/Testimonial/Testimonials.jsx
@@ -0,0 +1,45 @@
+import { Card } from "./Card";
+import { testimonialsContent } from "../../utils/testimonialsContent";
+import { useTranslation } from "react-i18next";
+
+export const Testimonials = () => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
{t('testimonials.sectionTitle')}
+
+
+
+
+
+ {testimonialsContent.map((card, index) =>
+
+
+
+ )}
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/front/components/Values/Card.jsx b/src/front/components/Values/Card.jsx
new file mode 100644
index 0000000000..ff91158c90
--- /dev/null
+++ b/src/front/components/Values/Card.jsx
@@ -0,0 +1,13 @@
+export const Card = ({ title, description, showDivider }) => {
+ return (
+
+
+
{title}
+
{description}
+
+ {showDivider && (
+
+ )}
+
+ )
+};
\ No newline at end of file
diff --git a/src/front/components/Values/Values.jsx b/src/front/components/Values/Values.jsx
new file mode 100644
index 0000000000..374bc92e2c
--- /dev/null
+++ b/src/front/components/Values/Values.jsx
@@ -0,0 +1,30 @@
+import { Card } from "./Card";
+import { valuesContent } from "../../utils/valuesContent";
+import { useTranslation } from "react-i18next";
+
+export const Values = () => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
{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')}
+
+
+
+ {t('workWithUs.workWithUsCTA')}
+
+
+
+
+
+ 99
+ %
+
+
{t('workWithUs.statistics.customerSatisfaction')}
+
+
+
+
+ 18
+ K
+
+
{t('workWithUs.statistics.activeUsers')}
+
+
+
+
+ +
+ 10
+
+
{t('workWithUs.statistics.completedProjects')}
+
+
+
+
+ +
+ 5
+
+
{t('workWithUs.statistics.yearsOfExperience')}
+
+
+
+
+ {t('workWithUs.workWithUsCTA')}
+
+
+
+ );
+};
\ 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 e69de29bb2..6e61453715 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -0,0 +1,403 @@
+body {
+ background-image: linear-gradient(0deg, #124652, #199ab7);
+ font-family: "Manrope", sans-serif;
+ /* padding-top: 100px; */
+}
+h1 {
+ font-family: "Exo 2", sans-serif;
+ font-weight: bold;
+ color: #fbff06;
+}
+
+p {
+ font-family: "Manrope", sans-serif;
+}
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: "Outfit", sans-serif;
+}
+/* Button styles */
+
+.ct-btn-outline-accent {
+ border: 0.15rem #fbff06 solid;
+ background-color: transparent;
+ border-radius: 2rem;
+ padding: 0.5rem 5rem 0.5rem 5rem;
+ color: white;
+ font-weight: bold;
+}
+
+.ct-btn-outline-accent:hover {
+ background-color: #fbff06;
+ padding: 0.5rem 5rem 0.5rem 5rem;
+ color: #217b8f;
+ 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") !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") !important;
+}
+
+/* Titles & text styles */
+
+.text-ct-secondary {
+ color: #60e0a5;
+}
+
+.text-ct-gray {
+ color: #a6bcc2;
+}
+
+.section-title {
+ color: #fbff06;
+}
+
+.process-section-title {
+ background: none;
+ border-style: none;
+ font-size: xx-large;
+ color: #fbff06;
+ transition: 0.2s ease;
+}
+
+.process-section-title:hover {
+ color: #fbff06;
+ font-size: 2.08rem;
+}
+
+.ct-paragraph {
+ font-size: 16pt;
+ line-height: 170%;
+}
+
+/* Cat transition effect */
+
+.card-img-wrapper {
+ position: relative;
+ width: 100%;
+ padding-top: 100%;
+ overflow: hidden;
+}
+
+.card-img-wrapper .original-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 2;
+ transition: opacity 0.6s ease-in-out;
+}
+
+.card-img-wrapper .cat-image-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: var(--cat-image-url);
+ background-size: cover;
+ background-position: center;
+ z-index: 1;
+ opacity: 0;
+ transition: opacity 0.6s ease-in-out;
+}
+
+.card-img-wrapper:hover .original-image {
+ opacity: 0;
+}
+
+.card-img-wrapper:hover .cat-image-overlay {
+ opacity: 1;
+}
+
+/* Services cards, components & background */
+
+.card-text {
+ font-size: 13pt;
+}
+
+.card.card-background {
+ background-color: rgba(255, 255, 255, 0.16);
+ backdrop-filter: blur(3px);
+ border: 0.15rem solid rgb(229, 229, 229, 0.25);
+ box-shadow: 1px 2px 6px rgb(0, 0, 0, 0.29);
+}
+
+.ct-services-bg {
+ mix-blend-mode: soft-light;
+ opacity: 50%;
+}
+
+.ct-team-bg {
+ mix-blend-mode: darken;
+ opacity: 39%;
+}
+
+.card-title.text-ct-secondary {
+ color: #60e0a5;
+}
+
+.card-text {
+ font-size: 13pt;
+}
+
+.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: 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;
+ }
+}
+
+.animated-link {
+ position: relative;
+ text-decoration: none;
+ color: #60e0a5;
+ transition: color 0.3s ease-in-out;
+}
+
+.animated-link::after {
+ content: "\f061";
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ position: absolute;
+ left: 100%;
+ opacity: 0;
+ transform: translateX(-20px);
+ transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;
+ margin-left: 5px;
+}
+
+.animated-link:hover {
+ color: #88ffc8;
+}
+
+.animated-link:hover::after {
+ opacity: 1;
+ 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;
+ border: 2px solid #fbff06 !important;
+ background-color: transparent;
+}
+
+.btn-outline-custom-yellow:hover {
+ background-color: #fbff06 !important;
+ color: #217b8f !important;
+}
+
+.btn-outline-custom-yellow:hover::after {
+ color: #217b8f !important;
+ border: 2px solid #fbff06 !important;
+ background-color: #fbff06 !important;
+}
+
+.navbar .navbar-nav .nav-link:hover {
+ font-weight: bold;
+ transition: color 0.3s ease, font-weight 0.3s ease;
+}
+
+.fa-icon-yellow {
+ color: #fbff06;
+}
+
+.custom-mobile-menu {
+ border: none;
+ background-image: linear-gradient(0deg, #124652, #199ab7);
+}
+
+.bg-custom-mobile-header {
+ background-color: #199ab7;
+}
+
+/* HeaderHome */
+.hero-header-home {
+ min-height: 90vh;
+ margin-top: 4rem;
+ background-size: cover;
+ background-position: center;
+}
+
+.hero-overlay-home {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(10, 25, 30, 0.5);
+}
+
+.hero-title-home {
+ color: #fbff06 !important;
+}
+
+.btn-outline {
+ color: #fbff06 !important;
+ border-color: #fbff06 !important;
+}
+
+.btn-outline:hover {
+ background-color: #fbff06 !important;
+ color: #217b8f !important;
+ border-color: #fbff06 !important;
+}
+
+.text-warning {
+ font-weight: bold;
+ color: #e2e505 !important;
+}
+
+@media (min-width: 1200px) {
+ .hero-title-home {
+ font-size: 3rem;
+ }
+
+ .hero-subtitle-home {
+ font-size: 3rem;
+ }
+}
+/* Benefits cards, components & background */
+.section-title {
+ color: #e2e505;
+ font-weight: bold;
+}
+.text-ct-secondary {
+ color: #60e0a5;
+}
+.ct-description-p {
+ color: #ffff;
+}
+.card-divider {
+ 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 a5a3c781dc..77aff83736 100644
--- a/src/front/main.jsx
+++ b/src/front/main.jsx
@@ -1,26 +1,38 @@
-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 (
-
-
-
- );
+
return (
-
- {/* Provide global state to all components */}
-
- {/* Set up routing for the application */}
-
-
-
+
+
+
+
- {/* Display the title of the todo element dynamically retrieved from the store using theId. */}
-
Todo: {singleTodo?.title}
-
{/* A horizontal rule for visual separation. */}
-
- {/* A Link component acts as an anchor tag but is used for client-side routing to prevent page reloads. */}
-
-
- Back home
-
-
-
- );
-};
-
-// Use PropTypes to validate the props passed to this component, ensuring reliable behavior.
-Single.propTypes = {
- // Although 'match' prop is defined here, it is not used in the component.
- // Consider removing or using it as needed.
- match: PropTypes.object
-};
diff --git a/src/front/routes.jsx b/src/front/routes.jsx
index 0557df6141..8b7b25f62b 100644
--- a/src/front/routes.jsx
+++ b/src/front/routes.jsx
@@ -1,30 +1,40 @@
// Import necessary components and functions from react-router-dom.
import {
- createBrowserRouter,
- createRoutesFromElements,
- Route,
+ createBrowserRouter,
+ createRoutesFromElements,
+ Route,
} from "react-router-dom";
import { Layout } from "./pages/Layout";
import { Home } from "./pages/Home";
-import { Single } from "./pages/Single";
-import { Demo } from "./pages/Demo";
+import { About } from "./pages/About";
+import { ServicesPage } from "./pages/Services";
+import { Portfolio } from "./pages/Projects";
+import { Contact } from "./pages/Contact";
+import { Login } from "./pages/Login";
+import { Admin } from "./pages/Admin";
+import { ProtectedRoute } from "./components/ProtectedRoute";
export const router = createBrowserRouter(
- createRoutesFromElements(
+ createRoutesFromElements(
// CreateRoutesFromElements function allows you to build route elements declaratively.
// Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
// Root, on the contrary, create a sister Route, if you have doubts, try it!
// Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
// Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
- // Root Route: All navigation will start from here.
- 
- 
+