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,39 +12,68 @@ 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 = () => {
+  const toggleDrawer = () => setMobileOpen(!mobileOpen);
-    setMobileOpen(!mobileOpen);
-  };
 
   const drawer = (
-    <Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
+    <Box
-      <List>
+      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}>
+          <ListItemButton component="a" href={item.href} key={item.label}>
-            <ListItemText primary={item} sx={{ color: "#fff" }} />
+            <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>
+      </Box>
+      <Divider sx={{ backgroundColor: "#444", my: 2 }} />
+      <Box px={2}>
         <Button
           variant="outlined"
           fullWidth
           sx={{
             borderColor: "#00E0FF",
             color: "#00E0FF",
-              backgroundColor: "transparent",
+            borderRadius: "24px",
-              borderRadius: "8px",
+            fontWeight: 600,
-              m: 2,
+            textTransform: "none",
             "&:hover": {
               backgroundColor: "#00E0FF",
               color: "#000",
@@ -55,8 +82,7 @@ const Header = () => {
         >
           Contact Us
         </Button>
-        </ListItem>
+      </Box>
-      </List>
     </Box>
   );
 
@@ -66,20 +92,10 @@ const Header = () => {
       sx={{ backgroundColor: "#000", boxShadow: "none" }}
     >
       <Container maxWidth="lg">
-        <Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}>
+        <Toolbar sx={{ justifyContent: "space-between", py: 1.5 }}>
-          <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>
-
           {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",
+                justifyContent: "space-between",
+                alignItems: "center",
+                width: "100%",
+              }}
+            >
+              {/* Left - Logo */}
+              <motion.div
+                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}
+                    key={item.label}
                     initial={{ opacity: 0, y: -5 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: 0.1 * index }}
                   >
-                  <Typography
+                    <Box
-                    variant="body1"
                       component="a"
-                    href="#"
+                      href={item.href}
                       sx={{
                         color: "#fff",
                         textDecoration: "none",
+                        fontWeight: 500,
+                        fontSize: "1rem",
                         "&:hover": {
                           color: "#00E0FF",
                         },
                       }}
                     >
-                    {item}
+                      {item.label}
-                  </Typography>
+                    </Box>
                   </motion.div>
                 ))}
+              </Box>
+
+              {/* Right - Contact Us */}
               <motion.div
-                initial={{ opacity: 0, y: -5 }}
+                initial={{ opacity: 0, x: 10 }}
-                animate={{ opacity: 1, y: 0 }}
+                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: 0.5 }}
+                transition={{ duration: 0.6 }}
               >
                 <Button
                   variant="outlined"
                   sx={{
                     borderColor: "#00E0FF",
                     color: "#00E0FF",
-                    backgroundColor: "transparent",
+                    borderRadius: "24px",
-                    borderRadius: "8px",
                     textTransform: "none",
-                    padding: "8px 24px",
+                    fontWeight: 600,
+                    px: 3,
+                    py: 1,
                     "&:hover": {
                       backgroundColor: "#00E0FF",
                       color: "#000",