header and footer enhancements

src/components/footer/footer.tsx

@@ -1,44 +1,95 @@
 import React from 'react';
-import { Box, Container, Grid, Link, Typography } from '@mui/material';
+import {
+  Box, Container, Grid, Typography, Link, Divider, Stack, useMediaQuery, useTheme
+} from '@mui/material';
+import {
+  Instagram, YouTube, Facebook, LinkedIn
+} from '@mui/icons-material';
+import { motion } from 'framer-motion';
 
 export default function Footer() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
   return (
-    <Box sx={{ py: 6, backgroundColor: '#0F111A', color: '#fff' }}>
+    <Box sx={{ backgroundColor: '#0F111A', color: '#fff', pt: 6, pb: 2 }}>
       <Container maxWidth="lg">
-        <Grid container spacing={4}>
+        <motion.div
-          <Grid item xs={12} md={3}>
+          initial={{ opacity: 0, y: 10 }}
-            <Typography fontWeight={700} mb={2}>
+          animate={{ opacity: 1, y: 0 }}
-              QUADRA EDGE
+          transition={{ duration: 0.8 }}
-            </Typography>
+        >
+          <Grid container spacing={4}>
+            {/* Column 1: Explore Links */}
+            <Grid item xs={12} sm={6} md={3}>
+              <Stack spacing={1}>
+                <Link href="#" color="inherit" underline="hover">About Us</Link>
+                <Link href="#" color="inherit" underline="hover">Portfolio</Link>
+                <Link href="#" color="inherit" underline="hover">Blogs</Link>
+                <Link href="#" color="inherit" underline="hover">Services</Link>
+              </Stack>
+            </Grid>
+
+            {/* Column 2: Support Links */}
+            <Grid item xs={12} sm={6} md={3}>
+              <Stack spacing={1}>
+                <Link href="#" color="inherit" underline="hover">FAQ’s</Link>
+                <Link href="#" color="inherit" underline="hover">Terms & Conditions</Link>
+                <Link href="#" color="inherit" underline="hover">Privacy Policy</Link>
+              </Stack>
+            </Grid>
+
+            {/* Column 3: Logo (only visible on md+) */}
+            {!isMobile && (
+              <Grid item xs={12} sm={6} md={3}>
+                <Box sx={{ display: 'flex', justifyContent: { sm: 'center', md: 'flex-end' }, mb: 2 }}>
+                  <img
+                    src="/logo.png" // Replace with actual logo
+                    alt="Quadra Edge"
+                    style={{ maxWidth: '180px', height: 'auto' }}
+                  />
+                </Box>
+              </Grid>
+            )}
+
+            {/* Column 4: Contact Info + Socials */}
+            <Grid item xs={12} sm={6} md={3}>
+              {/* Mobile: show logo here instead */}
+              {isMobile && (
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+                  <img
+                    src="/logo.png" // Replace with actual logo
+                    alt="Quadra Edge"
+                    style={{ maxWidth: '180px', height: 'auto' }}
+                  />
+                </Box>
+              )}
+
+              <Typography fontWeight={600} gutterBottom>Contact Us</Typography>
+              <Typography variant="body2" mb={1}>Number</Typography>
+              <Typography variant="body2">Address</Typography>
+
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{ mt: 2 }}
+              >
+                <Link href="#"><Instagram sx={{ color: '#00E0FF' }} /></Link>
+                <Link href="#"><YouTube sx={{ color: '#00E0FF' }} /></Link>
+                <Link href="#"><Facebook sx={{ color: '#00E0FF' }} /></Link>
+                <Link href="#"><LinkedIn sx={{ color: '#00E0FF' }} /></Link>
+              </Stack>
+            </Grid>
           </Grid>
-          <Grid item xs={12} md={3}>
+
-            <Typography fontWeight={600} gutterBottom>
+          <Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
-              About Us
+
+          <Box textAlign="center">
+            <Typography variant="body2" sx={{ color: '#00E0FF' }}>
+              Copyright © 2025 QuadraEdge
             </Typography>
-            <Link href="#" underline="hover" color="inherit" display="block">Portfolio</Link>
+          </Box>
-            <Link href="#" underline="hover" color="inherit" display="block">Blogs</Link>
+        </motion.div>
-          </Grid>
-          <Grid item xs={12} md={3}>
-            <Typography fontWeight={600} gutterBottom>
-              Services
-            </Typography>
-            <Link href="#" underline="hover" color="inherit" display="block">Marketing</Link>
-            <Link href="#" underline="hover" color="inherit" display="block">Dev</Link>
-            <Link href="#" underline="hover" color="inherit" display="block">Design</Link>
-          </Grid>
-          <Grid item xs={12} md={3}>
-            <Typography fontWeight={600} gutterBottom>
-              Contact Us
-            </Typography>
-            <Typography variant="body2">Number</Typography>
-            <Typography variant="body2">Address</Typography>
-          </Grid>
-        </Grid>
-        <Box textAlign="center" mt={4}>
-          <Typography variant="body2" color="gray">
-            Copyright © 2025 QuadraEdge.
-          </Typography>
-        </Box>
       </Container>
     </Box>
   );

src/components/header/header.tsx

@@ -1,47 +1,115 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { AppBar, Box, Button, Container, Toolbar, Typography, Link } from '@mui/material';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Drawer,
+  List,
+  ListItem,
+  ListItemText,
+  Button,
+  useMediaQuery,
+  useTheme,
+  Box,
+  Container,
+  ListItemButton,
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import { motion } from 'framer-motion';
 
 const navItems = ['Home', 'Services', 'Portfolio', 'About Us', 'Blog'];
 
-export default function Header() {
+const Header = () => {
-  return (
+  const [mobileOpen, setMobileOpen] = useState(false);
-    <AppBar position="static" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
+  const theme = useTheme();
-      <Container maxWidth="lg">
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-        <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
+
-          <Typography variant="h6" sx={{ fontWeight: 700 }}>
+  const toggleDrawer = () => {
-            QUADRA EDGE
+    setMobileOpen(!mobileOpen);
-          </Typography>
+  };
-          <Box sx={{ display: 'flex', gap: 3 }}>
+
-            {navItems.map((item) => (
+  const drawer = (
-              <Link
+    <Box sx={{ width: 250 }} onClick={toggleDrawer}>
-                key={item}
+        <List>
-                href="#"
+        {navItems.map((item) => (
-                underline="none"
+            <ListItemButton component="a" href="#" key={item}>
-                sx={{ color: 'white', fontWeight: 500, fontSize: 14 }}
+                <ListItemText primary={item} />
-              >
+            </ListItemButton>
-                {item}
+        ))}
-              </Link>
+        <ListItem disablePadding>
-            ))}
             <Button
-              variant="outlined"
+            variant="outlined"
-              size="small"
+            fullWidth
-              sx={{
+            sx={{ borderColor: '#00E0FF', color: '#00E0FF', m: 2 }}
-                borderColor: '#00E0FF',
-                color: '#00E0FF',
-                fontWeight: 'bold',
-                textTransform: 'none',
-                ml: 2,
-                '&:hover': {
-                  backgroundColor: '#00E0FF',
-                  color: '#000',
-                },
-              }}
             >
-              Contact Us
+            Contact Us
             </Button>
-          </Box>
+        </ListItem>
+        </List>
+    </Box>
+    );
+
+
+  return (
+    <AppBar position="sticky" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
+      <Container maxWidth="lg">
+        <Toolbar sx={{ justifyContent: 'space-between' }}>
+          <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>
+              QUADRA EDGE
+            </Typography>
+          </motion.div>
+
+          {isMobile ? (
+            <>
+              <IconButton color="inherit" edge="end" onClick={toggleDrawer}>
+                <MenuIcon />
+              </IconButton>
+              <Drawer anchor="right" open={mobileOpen} onClose={toggleDrawer}>
+                {drawer}
+              </Drawer>
+            </>
+          ) : (
+            <Box sx={{ display: 'flex', gap: 3, 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' }}>
+                    {item}
+                  </Typography>
+                </motion.div>
+              ))}
+              <motion.div
+                initial={{ opacity: 0, y: -5 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.5 }}
+              >
+                <Button
+                  variant="outlined"
+                  sx={{
+                    borderColor: '#00E0FF',
+                    color: '#00E0FF',
+                    textTransform: 'none',
+                    '&:hover': {
+                      backgroundColor: '#00E0FF',
+                      color: '#000',
+                    },
+                  }}
+                >
+                  Contact Us
+                </Button>
+              </motion.div>
+            </Box>
+          )}
         </Toolbar>
       </Container>
     </AppBar>
   );
-}
+};
+
+export default Header;