Merge pull request 'header and footer enhancements' (#2) from feature/new_UI into main

Reviewed-on: #2

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">
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
           <Grid container spacing={4}>
-          <Grid item xs={12} md={3}>
+            {/* Column 1: Explore Links */}
-            <Typography fontWeight={700} mb={2}>
+            <Grid item xs={12} sm={6} md={3}>
-              QUADRA EDGE
+              <Stack spacing={1}>
-            </Typography>
+                <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>
-          <Grid item xs={12} md={3}>
+
-            <Typography fontWeight={600} gutterBottom>
+            {/* Column 2: Support Links */}
-              About Us
+            <Grid item xs={12} sm={6} md={3}>
-            </Typography>
+              <Stack spacing={1}>
-            <Link href="#" underline="hover" color="inherit" display="block">Portfolio</Link>
+                <Link href="#" color="inherit" underline="hover">FAQ’s</Link>
-            <Link href="#" underline="hover" color="inherit" display="block">Blogs</Link>
+                <Link href="#" color="inherit" underline="hover">Terms & Conditions</Link>
+                <Link href="#" color="inherit" underline="hover">Privacy Policy</Link>
+              </Stack>
             </Grid>
-          <Grid item xs={12} md={3}>
+
-            <Typography fontWeight={600} gutterBottom>
+            {/* Column 3: Logo (only visible on md+) */}
-              Services
+            {!isMobile && (
-            </Typography>
+              <Grid item xs={12} sm={6} md={3}>
-            <Link href="#" underline="hover" color="inherit" display="block">Marketing</Link>
+                <Box sx={{ display: 'flex', justifyContent: { sm: 'center', md: 'flex-end' }, mb: 2 }}>
-            <Link href="#" underline="hover" color="inherit" display="block">Dev</Link>
+                  <img
-            <Link href="#" underline="hover" color="inherit" display="block">Design</Link>
+                    src="/logo.png" // Replace with actual logo
+                    alt="Quadra Edge"
+                    style={{ maxWidth: '180px', height: 'auto' }}
+                  />
+                </Box>
               </Grid>
-          <Grid item xs={12} md={3}>
+            )}
-            <Typography fontWeight={600} gutterBottom>
+
-              Contact Us
+            {/* Column 4: Contact Info + Socials */}
-            </Typography>
+            <Grid item xs={12} sm={6} md={3}>
-            <Typography variant="body2">Number</Typography>
+              {/* 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>
-        <Box textAlign="center" mt={4}>
+
-          <Typography variant="body2" color="gray">
+          <Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
-            Copyright © 2025 QuadraEdge.
+
+          <Box textAlign="center">
+            <Typography variant="body2" sx={{ color: '#00E0FF' }}>
+              Copyright © 2025 QuadraEdge
             </Typography>
           </Box>
+        </motion.div>
       </Container>
     </Box>
   );

src/components/header/header.tsx

@@ -1,36 +1,100 @@
-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 = () => {
+  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"
+            fullWidth
+            sx={{ borderColor: '#00E0FF', color: '#00E0FF', m: 2 }}
+            >
+            Contact Us
+            </Button>
+        </ListItem>
+        </List>
+    </Box>
+    );
+
+
   return (
-    <AppBar position="static" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
+    <AppBar position="sticky" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
       <Container maxWidth="lg">
-        <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
+        <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>
-          <Box sx={{ display: 'flex', gap: 3 }}>
+          </motion.div>
-            {navItems.map((item) => (
+
-              <Link
+          {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}
-                href="#"
+                  initial={{ opacity: 0, y: -5 }}
-                underline="none"
+                  animate={{ opacity: 1, y: 0 }}
-                sx={{ color: 'white', fontWeight: 500, fontSize: 14 }}
+                  transition={{ delay: 0.1 * index }}
                 >
+                  <Typography variant="body1" component="a" href="#" sx={{ color: '#fff', textDecoration: 'none' }}>
                     {item}
-              </Link>
+                  </Typography>
+                </motion.div>
               ))}
+              <motion.div
+                initial={{ opacity: 0, y: -5 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.5 }}
+              >
                 <Button
                   variant="outlined"
-              size="small"
                   sx={{
                     borderColor: '#00E0FF',
                     color: '#00E0FF',
-                fontWeight: 'bold',
                     textTransform: 'none',
-                ml: 2,
                     '&:hover': {
                       backgroundColor: '#00E0FF',
                       color: '#000',
@@ -39,9 +103,13 @@ export default function Header() {
                 >
                   Contact Us
                 </Button>
+              </motion.div>
             </Box>
+          )}
         </Toolbar>
       </Container>
     </AppBar>
   );
-}
+};
+
+export default Header;