fix : changed layout of header and added a logo

package.json

@@ -58,5 +58,6 @@
   "devDependencies": {
     "@types/react-icons": "^2.2.7",
     "@types/react-slick": "^0.23.13"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/header/header.tsx

@@ -2,11 +2,9 @@ import React, { useState } from "react";
 import {
   AppBar,
   Toolbar,
-  Typography,
   IconButton,
   Drawer,
   List,
-  ListItem,
   ListItemText,
   Button,
   useMediaQuery,
@@ -14,49 +12,77 @@ import {
   Box,
   Container,
   ListItemButton,
+  Divider,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import { motion } from "framer-motion";
+import HomeIcon from "@mui/icons-material/Home";
+import BuildIcon from "@mui/icons-material/Build";
+import WorkIcon from "@mui/icons-material/Work";
+import InfoIcon from "@mui/icons-material/Info";
+import ArticleIcon from "@mui/icons-material/Article";
+import logo from "../QE Website design/Logo.png";
 
-const navItems = ["Home", "Services", "Portfolio", "About Us", "Blog"];
+const navItems = [
+  { label: "Home", icon: <HomeIcon />, href: "#" },
+  { label: "Services", icon: <BuildIcon />, href: "#" },
+  { label: "Portfolio", icon: <WorkIcon />, href: "#" },
+  { label: "About Us", icon: <InfoIcon />, href: "#" },
+  { label: "Blog", icon: <ArticleIcon />, href: "#" },
+];
 
 const Header = () => {
   const [mobileOpen, setMobileOpen] = useState(false);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
-  const toggleDrawer = () => {
-    setMobileOpen(!mobileOpen);
-  };
+  const toggleDrawer = () => setMobileOpen(!mobileOpen);
 
   const drawer = (
-    <Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
-      <List>
+    <Box
+      sx={{ width: 260, height: "100%", backgroundColor: "#000" }}
+      onClick={toggleDrawer}
+    >
+      <ListItemButton
+        component="a"
+        href="#"
+        sx={{ justifyContent: "center", my: 2 }}
+      >
+        <Box component="img" src={logo} alt="Logo" sx={{ height: 40 }} />
+      </ListItemButton>
+      <Divider sx={{ backgroundColor: "#444" }} />
+      <Box>
         {navItems.map((item) => (
-          <ListItemButton component="a" href="#" key={item}>
-            <ListItemText primary={item} sx={{ color: "#fff" }} />
+          <ListItemButton component="a" href={item.href} key={item.label}>
+            <Box
+              sx={{ display: "flex", alignItems: "center", color: "#00E0FF" }}
+            >
+              <Box sx={{ mr: 2 }}>{item.icon}</Box>
+              <ListItemText primary={item.label} sx={{ color: "#fff" }} />
+            </Box>
           </ListItemButton>
         ))}
-        <ListItem disablePadding>
-          <Button
-            variant="outlined"
-            fullWidth
-            sx={{
-              borderColor: "#00E0FF",
-              color: "#00E0FF",
-              backgroundColor: "transparent",
-              borderRadius: "8px",
-              m: 2,
-              "&:hover": {
-                backgroundColor: "#00E0FF",
-                color: "#000",
-              },
-            }}
-          >
-            Contact Us
-          </Button>
-        </ListItem>
-      </List>
+      </Box>
+      <Divider sx={{ backgroundColor: "#444", my: 2 }} />
+      <Box px={2}>
+        <Button
+          variant="outlined"
+          fullWidth
+          sx={{
+            borderColor: "#00E0FF",
+            color: "#00E0FF",
+            borderRadius: "24px",
+            fontWeight: 600,
+            textTransform: "none",
+            "&:hover": {
+              backgroundColor: "#00E0FF",
+              color: "#000",
+            },
+          }}
+        >
+          Contact Us
+        </Button>
+      </Box>
     </Box>
   );
 
@@ -66,20 +92,10 @@ const Header = () => {
       sx={{ backgroundColor: "#000", boxShadow: "none" }}
     >
       <Container maxWidth="lg">
-        <Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}>
-          <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-          >
-            <Typography variant="h6" sx={{ fontWeight: 700, color: "#fff" }}>
-              QUADRA EDGE
-            </Typography>
-          </motion.div>
-
+        <Toolbar sx={{ justifyContent: "space-between", py: 1.5 }}>
           {isMobile ? (
             <>
-              <IconButton color="inherit" edge="end" onClick={toggleDrawer}>
+              <IconButton edge="end" onClick={toggleDrawer}>
                 <MenuIcon sx={{ color: "#fff" }} />
               </IconButton>
               <Drawer
@@ -92,44 +108,78 @@ const Header = () => {
               </Drawer>
             </>
           ) : (
-            <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
-              {navItems.map((item, index) => (
-                <motion.div
-                  key={item}
-                  initial={{ opacity: 0, y: -5 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.1 * index }}
-                >
-                  <Typography
-                    variant="body1"
-                    component="a"
-                    href="#"
-                    sx={{
-                      color: "#fff",
-                      textDecoration: "none",
-                      "&:hover": {
-                        color: "#00E0FF",
-                      },
-                    }}
-                  >
-                    {item}
-                  </Typography>
-                </motion.div>
-              ))}
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                width: "100%",
+              }}
+            >
+              {/* Left - Logo */}
               <motion.div
-                initial={{ opacity: 0, y: -5 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.5 }}
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.6 }}
+              >
+                <Box
+                  component="a"
+                  href="#"
+                  sx={{ display: "flex", alignItems: "center" }}
+                >
+                  <Box
+                    component="img"
+                    src={logo}
+                    alt="Logo"
+                    sx={{ height: 40, width: "auto", objectFit: "contain" }}
+                  />
+                </Box>
+              </motion.div>
+
+              {/* Center - Navigation */}
+              <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
+                {navItems.map((item, index) => (
+                  <motion.div
+                    key={item.label}
+                    initial={{ opacity: 0, y: -5 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.1 * index }}
+                  >
+                    <Box
+                      component="a"
+                      href={item.href}
+                      sx={{
+                        color: "#fff",
+                        textDecoration: "none",
+                        fontWeight: 500,
+                        fontSize: "1rem",
+                        "&:hover": {
+                          color: "#00E0FF",
+                        },
+                      }}
+                    >
+                      {item.label}
+                    </Box>
+                  </motion.div>
+                ))}
+              </Box>
+
+              {/* Right - Contact Us */}
+              <motion.div
+                initial={{ opacity: 0, x: 10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.6 }}
               >
                 <Button
                   variant="outlined"
                   sx={{
                     borderColor: "#00E0FF",
                     color: "#00E0FF",
-                    backgroundColor: "transparent",
-                    borderRadius: "8px",
+                    borderRadius: "24px",
                     textTransform: "none",
-                    padding: "8px 24px",
+                    fontWeight: 600,
+                    px: 3,
+                    py: 1,
                     "&:hover": {
                       backgroundColor: "#00E0FF",
                       color: "#000",