From f6f093107169a136071910cc8c6f01f9fc6052c0 Mon Sep 17 00:00:00 2001
From: Adeola David Adelakun <aadelakun28@gmail.com>
Date: Fri, 24 Nov 2023 13:36:05 +0100
Subject: [PATCH] Responsive services image

---
 components/shared/blog-header.jsx | 33 ++++++++++++++++---------------
 components/shared/header.jsx      | 31 ++++++++---------------------
 containers/Services.jsx           |  2 +-
 3 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/components/shared/blog-header.jsx b/components/shared/blog-header.jsx
index 590363f..aaddfbc 100644
--- a/components/shared/blog-header.jsx
+++ b/components/shared/blog-header.jsx
@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import Link from "next/link"
 import { MdMenu, MdOutlineKeyboardArrowDown } from "react-icons/md"
+// import { useSelectedLayoutSegment } from "next/navigation";
 import React, { useState, useRef, useEffect } from "react";
 
 const links = [
@@ -39,18 +40,19 @@ const links = [
 ];
 
 export default function Header() {
-    const [showResource, setShowResource] = useState(false)
+    // const segment = useSelectedLayoutSegment();
+    const [showResource, setShowResource] = useState(false);
 
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setisOpen] = useState(false);
     const dropdownRef = useRef(null);
 
-    const toggleDropdown = () => {
-        setIsOpen(!isOpen);
+    const toggleMenu = () => {
+        setisOpen(!isOpen);
     };
 
     const handleOutsideClick = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-            setIsOpen(false);
+            setisOpen(false);
         }
     };
 
@@ -72,7 +74,7 @@ export default function Header() {
             <div className="flex flex-row relative z-[12] gap-6 items-center justify-between w-full mx-auto px-5 sm:px-[100px] duration-500">
                 <div className="flex mr-6">
                     <Link href="/"><Image
-                        className="max-h-32 left-0 object-cover lg:top-0 max-w-40"
+                        className="max-h-32 left-0 object-cover z-0 lg:top-0 max-w-40"
                         alt="Element removebg preview"
                         src="/images/logo.png"
                         width={145}
@@ -84,7 +86,7 @@ export default function Header() {
                         {links.map((link, idx) => (
                             idx !== 2 ? (
                                 <Link key={idx} href={idx !== 2 && link.href}
-                                    className={`text-base sm:text-xl font-rubik hover:border-primary hover:text-white duration-500 ease-in-out ${(!showResource) ? "text-white border-primary font-bold" : "border-transparent text-c-grey pb-0 font-medium"}`}
+                                    className={`text-base sm:text-xl font-rubik border-b-2 hover:border-primary hover:text-white duration-500 ease-in-out ${(!showResource) ? "text-white border-primary font-bold" : "border-transparent text-c-grey pb-0 font-medium"}`}
                                 >{link.text}</Link>
                             ) : (
                                 <div key={idx} onClick={() => setShowResource(showResource => !showResource)}
@@ -107,20 +109,20 @@ export default function Header() {
                     Request Demo
                 </button>
 
-
-                <div className="lg:hidden cursor-pointer" color="#fff" size={28} ref={dropdownRef}>
-                    <button onClick={toggleDropdown}>
+                <div className="lg:hidden cursor-pointer relative ref={dropdownRef}">
+                    <button onClick={toggleMenu}>
                         <MdMenu color="#fff" size={28} className="pb-3" />
                     </button>
-                    {isOpen && (
-                        <ul className="list-style: none bg-black relative max-w-[375px] py-2 px-[31px]">
+                    </div>
+                {isOpen && (
+                        <ul className="bg-black/90 absolute pt-2 mt-[380px] pb-2 pl-[10px] pr-[120px]">
                             {links.map((link) => (
                                 <li
                                     key={link.href}
                                     className={
                                         link.href === window.location.pathname
-                                            ? 'text-lg font-medium border-b-[1px] border-gray-400 leading-[26px] border-solid text-white relative whitespace-nowrap w-fit'
-                                            : 'relative leading-[26px] whitespace-nowrap w-fit font-medium border-b-[1px] border-gray-400 opacity-50 border-solid text-gray-400'
+                                            ? 'text-lg font-extrabold border-b-[1px] z-[2] border-gray-400 leading-[50px] border-solid text-white whitespace-nowrap '
+                                            : 'relative leading-[26px] whitespace-nowrap z-[2]  font-bold border-b-[1px] leading-[50px] border-gray-400 opacity-50 border-solid text-gray-400'
                                     }
                                 >
                                     <a href={link.href}>{link.text}</a>
@@ -132,8 +134,7 @@ export default function Header() {
                                 </li>
                             ))}
                         </ul>
-                    )}
-                </div>
+                    )} 
             </div>
 
         </div>
diff --git a/components/shared/header.jsx b/components/shared/header.jsx
index c94a791..8623554 100644
--- a/components/shared/header.jsx
+++ b/components/shared/header.jsx
@@ -41,23 +41,18 @@ const links = [
 
 export default function Header() {
     const segment = useSelectedLayoutSegment();
-    const [showResource, setShowResource] = useState(false)
-    const [menuOpen, setMenuOpen] = useState(false);
+    const [showResource, setShowResource] = useState(false);
 
-    const toggleMenu = () => {
-        setMenuOpen(!menuOpen);
-    };
-
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setisOpen] = useState(false);
     const dropdownRef = useRef(null);
 
-    const toggleDropdown = () => {
-        setIsOpen(!isOpen);
+    const toggleMenu = () => {
+        setisOpen(!isOpen);
     };
 
     const handleOutsideClick = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-            setIsOpen(false);
+            setisOpen(false);
         }
     };
 
@@ -113,24 +108,14 @@ export default function Header() {
                 <button type="button" onClick={handleOnClick} className="hidden lg:block h-[70px] w-full max-w-[185px] ml-3 border-2 border-white text-white text-xl font-semibold rounded-lg">
                     Request Demo
                 </button>
-                <div className="lg:hidden cursor-pointer" color="#fff" size={28} ref={dropdownRef}>
-                    <button
-                    type="button"
-                    onClick={handleOnClick}
-                    className="hidden lg:block h-[70px] w-full max-w-[185px] ml-3 border-2 border-white text-white text-xl font-semibold rounded-lg"
-                >
-                    Request Demo
-                </button>
 
-                <div className="lg:hidden cursor-pointer relative z-[50]">
+                <div className="lg:hidden cursor-pointer relative ref={dropdownRef}">
                     <button onClick={toggleMenu}>
                         <MdMenu color="#fff" size={28} className="pb-3" />
                     </button>
                     </div>
-                    
-                </div>
-                {menuOpen && (
-                        <ul className="bg-black/60 absolute pt-2 mt-[380px] pb-2 pl-[10px] pr-[120px]">
+                {isOpen && (
+                        <ul className="bg-black/90 absolute pt-2 mt-[380px] pb-2 pl-[10px] pr-[120px]">
                             {links.map((link) => (
                                 <li
                                     key={link.href}
diff --git a/containers/Services.jsx b/containers/Services.jsx
index 9caebb6..d57ba37 100644
--- a/containers/Services.jsx
+++ b/containers/Services.jsx
@@ -63,7 +63,7 @@ export default function ServicesContainer() {
               width={425}
               height={425}
               alt="Blocks"
-              className="max-w-[425px] max-h-[425px]"
+              className="w-[300px] h-[300px] sd:max-w-[425px] sm:max-h-[425px]"
             />
           </div>
         </div>