From 01c2ba0100738fcd2f4f91016f76ee06f99e02f6 Mon Sep 17 00:00:00 2001
From: Mihir Motiyani <mihir@infinitusps.in>
Date: Mon, 7 Jul 2025 17:09:05 +0530
Subject: [PATCH] header and footer enhancements

---
 src/components/footer/footer.tsx | 119 ++++++++++++++++++--------
 src/components/header/header.tsx | 142 +++++++++++++++++++++++--------
 2 files changed, 190 insertions(+), 71 deletions(-)

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index ce54672..92da3fe 100644
--- a/src/components/footer/footer.tsx
+++ b/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}>
-          <Grid item xs={12} md={3}>
-            <Typography fontWeight={700} mb={2}>
-              QUADRA EDGE
-            </Typography>
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          <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>
-              About Us
+
+          <Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
+
+          <Box textAlign="center">
+            <Typography variant="body2" sx={{ color: '#00E0FF' }}>
+              Copyright © 2025 QuadraEdge
             </Typography>
-            <Link href="#" underline="hover" color="inherit" display="block">Portfolio</Link>
-            <Link href="#" underline="hover" color="inherit" display="block">Blogs</Link>
-          </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>
+          </Box>
+        </motion.div>
       </Container>
     </Box>
   );
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 6624427..15b1dfb 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,47 +1,115 @@
-import React from 'react';
-import { AppBar, Box, Button, Container, Toolbar, Typography, Link } from '@mui/material';
+import React, { useState } from 'react';
+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() {
-  return (
-    <AppBar position="static" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
-      <Container maxWidth="lg">
-        <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
-          <Typography variant="h6" sx={{ fontWeight: 700 }}>
-            QUADRA EDGE
-          </Typography>
-          <Box sx={{ display: 'flex', gap: 3 }}>
-            {navItems.map((item) => (
-              <Link
-                key={item}
-                href="#"
-                underline="none"
-                sx={{ color: 'white', fontWeight: 500, fontSize: 14 }}
-              >
-                {item}
-              </Link>
-            ))}
+const Header = () => {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+  const toggleDrawer = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  const drawer = (
+    <Box sx={{ width: 250 }} onClick={toggleDrawer}>
+        <List>
+        {navItems.map((item) => (
+            <ListItemButton component="a" href="#" key={item}>
+                <ListItemText primary={item} />
+            </ListItemButton>
+        ))}
+        <ListItem disablePadding>
             <Button
-              variant="outlined"
-              size="small"
-              sx={{
-                borderColor: '#00E0FF',
-                color: '#00E0FF',
-                fontWeight: 'bold',
-                textTransform: 'none',
-                ml: 2,
-                '&:hover': {
-                  backgroundColor: '#00E0FF',
-                  color: '#000',
-                },
-              }}
+            variant="outlined"
+            fullWidth
+            sx={{ borderColor: '#00E0FF', color: '#00E0FF', m: 2 }}
             >
-              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;