Navbar/Header Contact/Work with us/Whatsapp button completed

src/front/components/HeaderAbout.jsx

@@ -7,9 +7,9 @@ export const HeaderAbout = () => {
 
     return (
 
-        <section className="position-relative w-100 h-100 d-flex align-items-center my-5 pt-5 py-5">
-                    <img src={HomeAbout} alt="CloudTech background image" className="z-n1 top-0 start-0 mx-auto position-absolute w-100 h-100 object-fit-cover"/>
-                    <div className="position-absolute w-100 h-100 top-0 start-0 bg-dark bg-opacity-50 mx-auto z-n1"></div>
+        <section className="w-100 h-100 mb-5 mt-5 position-relative">
+                    <img src={HomeAbout} alt="CloudTech background image" className="z-n1 mx-auto position-absolute mt-5 w-100 h-100 object-fit-cover d-sm-block"/>
+                    <div className="position-absolute w-100 h-100 bg-dark bg-opacity-50 mx-auto mt-5"></div>
                     <div className="container w-100 h-100">
                         <div className="row z-0">
                             <div className="col-12 col-lg-6 offset-lg-6 my-5 pt-5 d-flex flex-column justify-content-center align-items-center z-1 text-lg-end">

src/front/components/HeaderContact.jsx

@@ -69,19 +69,19 @@ const HeaderContact = () => {
                 <div className="container w-100 h-100">
                     <div className="row align-items-center justify-content-center justify-content-lg-end">
                          <div className="col-12 col-lg-6 z-1 align-items-center">
-                            <h1 className="display-4 fw-bolder text-warning mb-4 mt-4 text-lg-start text-center d-none d-lg-block">
+                            <h1 className="display-4 fw-bolder text-warning w-100 mb-4 mt-4 text-lg-center text-center d-none d-lg-block">
                                 Conectemos
                             </h1>
 
-                            <h1 className="display-4 fw-bolder text-warning mb-4 mt-4 text-center d-lg-none">
+                            <h1 className="display-4 fw-bolder text-warning w-100 mb-4 mt-4 text-center d-lg-none">
                                 Conectemos
                             </h1>
 
-                            <p className="hero-subtitle-home fs-5 text-white fw-bold w-75 mb-4 d-none d-lg-block text-lg-start">
+                            <p className="hero-subtitle-home fs-5 text-white fw-bold w-100 mb-4 d-none d-lg-block text-lg-center">
                                 Tu proyecto es nuestro próximo reto.
                             </p>
 
-                            <p className="hero-subtitle-home fs-5 text-white fw-bold w-75 mb-4 text-center d-lg-none">
+                            <p className="hero-subtitle-home fs-5 text-white fw-bold w-100 mb-4 text-center d-lg-none">
                                 Tu proyecto es nuestro próximo reto.
                             </p>
 

src/front/components/HeaderHome.jsx

@@ -9,9 +9,9 @@ export const HeaderHome = () => {
     return (
 
 
-        <section className="w-100 h-100 position-relative">
-            <div className="position-absolute w-100 h-100 bg-dark bg-opacity-50 mx-auto"></div>
-            <img src={HomeOne} alt="CloudTech background image" className="z-n1 mx-auto position-absolute w-100 h-100 object-fit-cover d-sm-block"/>
+        <section className="w-100 h-100 mb-5 mt-5 position-relative">
+            <div className="position-absolute w-100 h-100 bg-dark bg-opacity-50 mx-auto mt-5"></div>
+            <img src={HomeOne} alt="CloudTech background image" className="z-n1 mx-auto position-absolute mt-5 w-100 h-100 object-fit-cover d-sm-block"/>
             <div className="container w-100 h-100 z-1">
                 <div className="row text-center z-1">
                     <div className="col my-5 pt-5 d-flex flex-column justify-content-center align-items-center z-1">

src/front/components/Navbar.jsx

@@ -4,9 +4,20 @@ import LogoNavMovil from "../assets/img/LogoNavMovil.svg";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons';
 import LanguageSwitcher from "./LanguageSwitcher";
+import { useRef } from "react";
 
 export const Navbar = () => {
 
+	const offcanvasRef = useRef()
+	const handleLinkClick = () => {
+		const offcanvasElement = offcanvasRef.current;
+        const offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasElement);
+
+		if (offcanvasInstance) {
+			offcanvasInstance.hide();
+		};
+	};
+
 	return (
 		<>
 			{/* --- NAVBAR DE ESCRITORIO --- */}
@@ -44,7 +55,9 @@ export const Navbar = () => {
 
 			{/* --- NAVBAR MÓVIL (TRIGGER Y OFFCANVAS) --- */}
 			<div className="d-lg-none fixed-top bg-black d-flex justify-content-between align-items-center mx-3 my-4 p-3 rounded-pill">
-				<img src={LogoNavbar} alt="CloudTech Logo" className="h-auto w-auto" />
+				<Link className="navbar-brand" to="/">
+					<img src={LogoNavbar} alt="CloudTech Logo" className="h-auto w-auto" />
+				</Link>
 				<button
 					className="navbar-toggler"
 					type="button"
@@ -57,6 +70,7 @@ export const Navbar = () => {
 			</div>
 
 			<div
+				ref={offcanvasRef}
 				className="offcanvas offcanvas-start custom-mobile-menu vh-100 vw-100"
 				tabIndex="-1"
 				id="mobileMenuOffcanvas"
@@ -70,7 +84,7 @@ export const Navbar = () => {
 						<button
 							type="button"
 							className="btn"
-							data-bs-dismiss="offcanvas"
+							onClick={handleLinkClick}
 							aria-label="Close"
 						>
 							<FontAwesomeIcon icon={faXmark} className="text-white" size="xl" />
@@ -80,20 +94,20 @@ export const Navbar = () => {
 					<div className="flex-grow-1 d-flex flex-column justify-content-center align-items-center text-center">
 						<ul className="navbar-nav gap-4">
 							<li className="nav-item">
-								<Link className="nav-link text-white fs-2 fw-medium" to="/">Inicio</Link>
+								<Link className="nav-link text-white fs-2 fw-medium" to="/" onClick={handleLinkClick}>Inicio</Link>
 							</li>
 							<li className="nav-item">
-								<Link className="nav-link text-white fs-2 fw-medium" to="/about">Nosotros</Link>
+								<Link className="nav-link text-white fs-2 fw-medium" to="/about" onClick={handleLinkClick}>Nosotros</Link>
 							</li>
 							<li className="nav-item">
-								<Link className="nav-link text-white fs-2 fw-medium" to="/services">Servicios</Link>
+								<Link className="nav-link text-white fs-2 fw-medium" to="/services" onClick={handleLinkClick}>Servicios</Link>
 							</li>
 							<li className="nav-item">
-								<Link className="nav-link text-white fs-2 fw-medium" to="/projects">Proyectos</Link>
+								<Link className="nav-link text-white fs-2 fw-medium" to="/projects" onClick={handleLinkClick}>Proyectos</Link>
 							</li>
 						</ul>
 						<div className="mt-5 w-100 px-4">
-							<Link className="btn btn-outline-custom-yellow rounded-pill w-100 py-2 fs-5 fw-bold" to="/contact">Contáctanos</Link>
+							<Link className="btn btn-outline-custom-yellow rounded-pill w-100 py-2 fs-5 fw-bold" to="/contact" onClick={handleLinkClick}>Contáctanos</Link>
 						</div>
 					</div>
 				</div>

src/front/components/WhatsappButton.jsx

@@ -1,15 +1,18 @@
 import React from "react";
+import LogoWhats from "../assets/img/LogoWhats.svg"
 import { FloatingWhatsApp } from "react-floating-whatsapp";
 
-export default function App() {
+export default function WhatsappButton() {
 
     return (
 
         <FloatingWhatsApp
             phoneNumber="593995117464"
             accountName="CloudTech Sistemas"
-
+            statusMessage="Normalmente responde en 1 hora"
+            chatMessage="¡Hola! 👋 ¿Cómo podemos ayudarte?"
+            placeholder="Escribe tu mensaje"
+            avatar={LogoWhats}
         />
-
-    )
-}
+    );
+};

src/front/components/WorkWithUs.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export const WorkWithUS = () => {
+
+    return (
+
+        <section className="text-white text-center py-5">
+            <div className="container">
+                <div className="d-flex flex-column text-center justify-content-center">
+                    <h2 className="section-title mb-4">¿Por qué trabajar con nosotros?</h2>
+                    <p className="text-white ct-description-p">
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, illo ad iusto inventore quos quam numquam voluptate fugiat dolore unde repellat nobis aut eos debitis assumenda impedit incidunt sit maiores, voluptatum vel blanditiis recusandae! Unde, esse.
+                    </p>
+
+                    <div className="mt-5 align-items-center justify-content-center">
+                        <Link className="btn btn-outline-yellow btn-lg rounded-pill px-5 w-50 d-none d-lg-block mx-auto " to="/contact">Conectemos ahora</Link>
+                    </div>
+
+                    <div className="row mt-5 pt-3">
+                        <div className="col-12 col-lg-4 mb-4 mb-lg-0">
+                            <p className="display-5 fw-bold mb-1">
+                                <span className="text-stat-number">99</span>
+                                <span className="text-stat-symbol">%</span>
+                            </p>
+                            <p className="title-sub text-white fw-semibold">Customer satisfaction</p>
+                        </div>
+
+                        <div className="col-12 col-lg-4 mb-4 mb-lg-0">
+                            <p className="display-5 fw-bold mb-1">
+                                <span className="text-stat-number">18</span>
+                                <span className="text-stat-symbol">K</span>
+                            </p>
+                            <p className="title-sub text-white fw-semibold">Active users per year</p>
+                        </div>
+
+                        <div className="col-12 col-lg-4 mb-4 mb-lg-0">
+                            <p className="display-5 fw-bold mb-1">
+                                <span className="text-stat-number">+</span>
+                                <span className="text-stat-symbol">10</span>
+                            </p>
+                            <p className="text-white fw-semibold">Completed projects</p>
+                        </div>
+
+                        <div className="col-12 mt-4">
+                            <p className="display-5 fw-bold mb-1">
+                                <span className="text-stat-number">+</span>
+                                <span className="text-stat-symbol">5</span>
+                            </p>
+                            <p className="text-white fw-semibold">years of experience</p>
+                        </div>
+                    </div>
+
+                    <div className="container mt-4">
+                        <Link className="btn btn-outline-yellow btn-lg rounded-pill px-4 mx-auto d-lg-none w-100 w-lg-auto" to="/contact">Conectemos ahora</Link>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};

src/front/index.css

@@ -343,4 +343,11 @@ h6 {
 
 .btn-submit-contact:hover {
   background-color: #2799b3 !important;
+}
+/* Work With Us  */
+.text-stat-number{
+  color: #60E0A5;
+}
+.text-stat-symbol{
+  color: #fbff06;
 }

src/front/pages/Home.jsx

@@ -6,6 +6,7 @@ import { Projects } from "../components/Projects.jsx";
 import { Testimonials } from "../components/Testimonial/Testimonials.jsx";
 import { HeaderHome } from "../components/HeaderHome.jsx";
 import { Benefits } from "../components/Benefits/Benefits.jsx";
+import { WorkWithUS } from "../components/WorkWithUs.jsx";
 
 
 export const Home = () => {
@@ -20,6 +21,7 @@ export const Home = () => {
 			<Projects limit={4} />
 			<Testimonials />
 			<Benefits />
+			<WorkWithUS />
 
 		</>
 	);

src/front/pages/Layout.jsx

@@ -1,9 +1,10 @@
 import React, { useReducer, createContext} from "react"
-import { Outlet } from "react-router-dom/dist";
+import { Outlet, useLocation } from "react-router-dom/dist";
 import storeReducer, { initialStore } from "../store.js";
 import ScrollToTop from "../components/ScrollToTop"
 import { Navbar } from "../components/Navbar.jsx"
 import { Footer } from "../components/Footer"
+import WhatsappButton from "../components/WhatsappButton.jsx"
 
 
 // Base component that maintains the navbar and footer throughout the page and the scroll to top functionality.
@@ -13,13 +14,17 @@ export const Layout = () => {
 
     const [store, dispatch] = useReducer(storeReducer, initialStore());
 
+    const location = useLocation();
+
     return (
         <AppContext.Provider value={{ store, dispatch }}>
-            <ScrollToTop>
+            <>
+            <ScrollToTop location={location} />
                 <Navbar />
                     <Outlet />
+                    <WhatsappButton />
                 <Footer />
-            </ScrollToTop>
+            </>
         </AppContext.Provider>
     )
 }