diff --git a/src/front/assets/img/LogoWhats.svg b/src/front/assets/img/LogoWhats.svg new file mode 100644 index 0000000000..286dbb7e22 --- /dev/null +++ b/src/front/assets/img/LogoWhats.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/front/components/HeaderAbout.jsx b/src/front/components/HeaderAbout.jsx index ab72f3fcaa..9b9702557e 100644 --- a/src/front/components/HeaderAbout.jsx +++ b/src/front/components/HeaderAbout.jsx @@ -7,9 +7,9 @@ export const HeaderAbout = () => { return ( -
- CloudTech background image -
+
+ CloudTech background image +
diff --git a/src/front/components/HeaderContact.jsx b/src/front/components/HeaderContact.jsx index 7d9dd62d32..f9de48cbcd 100644 --- a/src/front/components/HeaderContact.jsx +++ b/src/front/components/HeaderContact.jsx @@ -69,19 +69,19 @@ const HeaderContact = () => {
-

+

Conectemos

-

+

Conectemos

-

+

Tu proyecto es nuestro próximo reto.

-

+

Tu proyecto es nuestro próximo reto.

diff --git a/src/front/components/HeaderHome.jsx b/src/front/components/HeaderHome.jsx index da6bbf3cfb..58ed948ed9 100644 --- a/src/front/components/HeaderHome.jsx +++ b/src/front/components/HeaderHome.jsx @@ -9,9 +9,9 @@ export const HeaderHome = () => { return ( -
-
- CloudTech background image +
+
+ CloudTech background image
diff --git a/src/front/components/Navbar.jsx b/src/front/components/Navbar.jsx index f72865817c..fc158faadf 100644 --- a/src/front/components/Navbar.jsx +++ b/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) --- */}
- CloudTech Logo + + CloudTech Logo +
{
diff --git a/src/front/components/WhatsappButton.jsx b/src/front/components/WhatsappButton.jsx index 53018dc927..c348ca84e7 100644 --- a/src/front/components/WhatsappButton.jsx +++ b/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 ( - - ) -} \ No newline at end of file + ); +}; \ 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..954dcd6221 --- /dev/null +++ b/src/front/components/WorkWithUs.jsx @@ -0,0 +1,61 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +export const WorkWithUS = () => { + + return ( + +
+
+
+

¿Por qué trabajar con nosotros?

+

+ 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. +

+ +
+ Conectemos ahora +
+ +
+
+

+ 99 + % +

+

Customer satisfaction

+
+ +
+

+ 18 + K +

+

Active users per year

+
+ +
+

+ + + 10 +

+

Completed projects

+
+ +
+

+ + + 5 +

+

years of experience

+
+
+ +
+ Conectemos ahora +
+
+
+
+ ); +}; \ No newline at end of file diff --git a/src/front/index.css b/src/front/index.css index 25faa096c1..cbe6d9b39b 100644 --- a/src/front/index.css +++ b/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; } \ No newline at end of file diff --git a/src/front/pages/Home.jsx b/src/front/pages/Home.jsx index 63179446ac..65d43249f2 100644 --- a/src/front/pages/Home.jsx +++ b/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 = () => { + ); diff --git a/src/front/pages/Layout.jsx b/src/front/pages/Layout.jsx index c67c3a29b7..63373a0068 100644 --- a/src/front/pages/Layout.jsx +++ b/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 ( - + <> + +