From d4db77cf45e6a6afdbf5810b5787624cdd2321fd Mon Sep 17 00:00:00 2001 From: Fernando Videira Date: Wed, 5 Jun 2024 03:57:46 +0100 Subject: [PATCH] Services Page --- src/Components/Hero/Hero.tsx | 50 ++++++++-------- src/Components/Navbar/Navbar.tsx | 54 +++++++++++------- src/Components/Services/Buttons.css | 7 +++ src/Components/Services/Buttons.tsx | 15 +++++ src/Components/Services/CardBtn.tsx | 18 ++++++ src/Components/Services/CardGroup.tsx | 14 +++++ src/Components/Services/ServiceCard.tsx | 21 +++++++ .../Services/ServiceCardContainer.tsx | 12 ++++ src/Components/Services/Services.tsx | 35 ++++++++++++ src/Components/Services/WesiteCards.tsx | 16 ++++++ src/assets/Stars.svg | 10 ++-- src/assets/Underline.svg | 9 +++ .../imgs/1358bb8c6eec722d092cf76dff5804fe.jpg | Bin 0 -> 21085 bytes .../imgs/15a045bf6bd5b5d1bdcfef67be0d54ec.jpg | Bin 0 -> 34691 bytes .../imgs/2554e1d6a130499b65fbd2a9483980ff.jpg | Bin 0 -> 49993 bytes .../imgs/2e52a11efe043f28c332f916da2d6db0.jpg | Bin 0 -> 55168 bytes .../337b16726c3cc849b476765c51fe4420 (1).jpg | Bin 0 -> 67758 bytes .../imgs/337b16726c3cc849b476765c51fe4420.jpg | Bin 0 -> 67758 bytes .../363277e803a2054eee7fdb73969e02f7 (1).jpg | Bin 0 -> 144465 bytes .../imgs/363277e803a2054eee7fdb73969e02f7.jpg | Bin 0 -> 144465 bytes .../imgs/38b6ed62c5ce4ea3da391a79fc26422c.jpg | Bin 0 -> 66812 bytes .../imgs/43370f6d8473c1897d9d61b594c6b3c3.jpg | Bin 0 -> 68392 bytes .../imgs/663fc7db09f81aed68d0566dc180fc00.jpg | Bin 0 -> 15658 bytes .../imgs/80c87bb9b62cf951f90b3692cd9d2e7a.jpg | Bin 0 -> 81797 bytes .../imgs/816a79a03d6262706963dab4f61dc513.jpg | Bin 0 -> 33197 bytes src/assets/imgs/PhotoService.png | Bin 0 -> 281911 bytes .../imgs/bf109a7dd7350d244b1dab64abec6990.jpg | Bin 0 -> 56897 bytes .../imgs/e59d19b2176c840f61522149ffc910f0.jpg | Bin 0 -> 27712 bytes .../imgs/ebf78010dbc235fff0fae05eb0ea8513.jpg | Bin 0 -> 10871 bytes .../imgs/f7e987b4ca06764cc3b834689da56502.jpg | Bin 0 -> 58282 bytes src/assets/imgs/image 11.png | Bin 0 -> 276479 bytes src/assets/test.png | Bin 0 -> 153679 bytes src/index.css | 4 ++ src/routes/Home.tsx | 8 ++- tailwind.config.js | 9 +-- 35 files changed, 223 insertions(+), 59 deletions(-) create mode 100644 src/Components/Services/Buttons.css create mode 100644 src/Components/Services/Buttons.tsx create mode 100644 src/Components/Services/CardBtn.tsx create mode 100644 src/Components/Services/CardGroup.tsx create mode 100644 src/Components/Services/ServiceCard.tsx create mode 100644 src/Components/Services/ServiceCardContainer.tsx create mode 100644 src/Components/Services/Services.tsx create mode 100644 src/Components/Services/WesiteCards.tsx create mode 100644 src/assets/Underline.svg create mode 100644 src/assets/imgs/1358bb8c6eec722d092cf76dff5804fe.jpg create mode 100644 src/assets/imgs/15a045bf6bd5b5d1bdcfef67be0d54ec.jpg create mode 100644 src/assets/imgs/2554e1d6a130499b65fbd2a9483980ff.jpg create mode 100644 src/assets/imgs/2e52a11efe043f28c332f916da2d6db0.jpg create mode 100644 src/assets/imgs/337b16726c3cc849b476765c51fe4420 (1).jpg create mode 100644 src/assets/imgs/337b16726c3cc849b476765c51fe4420.jpg create mode 100644 src/assets/imgs/363277e803a2054eee7fdb73969e02f7 (1).jpg create mode 100644 src/assets/imgs/363277e803a2054eee7fdb73969e02f7.jpg create mode 100644 src/assets/imgs/38b6ed62c5ce4ea3da391a79fc26422c.jpg create mode 100644 src/assets/imgs/43370f6d8473c1897d9d61b594c6b3c3.jpg create mode 100644 src/assets/imgs/663fc7db09f81aed68d0566dc180fc00.jpg create mode 100644 src/assets/imgs/80c87bb9b62cf951f90b3692cd9d2e7a.jpg create mode 100644 src/assets/imgs/816a79a03d6262706963dab4f61dc513.jpg create mode 100644 src/assets/imgs/PhotoService.png create mode 100644 src/assets/imgs/bf109a7dd7350d244b1dab64abec6990.jpg create mode 100644 src/assets/imgs/e59d19b2176c840f61522149ffc910f0.jpg create mode 100644 src/assets/imgs/ebf78010dbc235fff0fae05eb0ea8513.jpg create mode 100644 src/assets/imgs/f7e987b4ca06764cc3b834689da56502.jpg create mode 100644 src/assets/imgs/image 11.png create mode 100644 src/assets/test.png diff --git a/src/Components/Hero/Hero.tsx b/src/Components/Hero/Hero.tsx index 2567c1e..604461c 100644 --- a/src/Components/Hero/Hero.tsx +++ b/src/Components/Hero/Hero.tsx @@ -1,41 +1,43 @@ -import React from "react"; import HeroImg from "../../assets/HeroImg.svg"; import Stars from "../../assets/Stars.svg"; -import { FaChevronDown } from "react-icons/fa"; const Hero = () => { return ( -
-
- hero +
+
+ hero
-
- hero -

GROW YOUR

-

BUSINESS

-
-

+
+
+ hero +
+

GROW YOUR

+

BUSINESS

+
+ heroSm +
+
+

We do all the digital footprint for you,

-

- so you can focus on what’s important! +

+ so you can focus on what's important!

-
-
-
- - - -

); }; diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx index 9224b14..d13de4e 100644 --- a/src/Components/Navbar/Navbar.tsx +++ b/src/Components/Navbar/Navbar.tsx @@ -1,12 +1,14 @@ -import { useState } from "react"; -import { FaTimes, FaBars } from "react-icons/fa"; +import { useEffect, useState } from "react"; import Logo from "../../assets/logo.svg"; export default () => { const [state, setState] = useState(false); - const [colorChange, setColorChange] = useState(false); + const [isNavbarCollapsed, setIsNavbarCollapsed] = useState( + window.innerWidth <= 768 + ); + const changeColor = () => { if (window.scrollY >= 100) { setColorChange(true); @@ -15,41 +17,51 @@ export default () => { } }; - window.addEventListener("scroll", changeColor); + const checkNavbarCollapse = () => { + if (window.innerWidth <= 768) { + setIsNavbarCollapsed(true); + } else { + setIsNavbarCollapsed(false); + } + }; + + useEffect(() => { + window.addEventListener("scroll", changeColor); + window.addEventListener("resize", checkNavbarCollapse); + return () => { + window.removeEventListener("scroll", changeColor); + window.removeEventListener("resize", checkNavbarCollapse); + }; + }, []); // Replace javascript:void(0) path with your path const navigation = [ - { title: "Custom", path: "javascript:void(0)" }, - { title: "Services", path: "javascript:void(0)" }, - { title: "Work", path: "javascript:void(0)" }, - { title: "About Us", path: "javascript:void(0)" }, + { title: "Services", path: "#Services" }, + { title: "Contact", path: "javascript:void(0)" }, ]; return (