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 (
-
+
-
-
-
- QUADRA EDGE
-
+
+
+ {/* Column 1: Explore Links */}
+
+
+ About Us
+ Portfolio
+ Blogs
+ Services
+
+
+
+ {/* Column 2: Support Links */}
+
+
+ FAQ’s
+ Terms & Conditions
+ Privacy Policy
+
+
+
+ {/* Column 3: Logo (only visible on md+) */}
+ {!isMobile && (
+
+
+ 
+
+
+ )}
+
+ {/* Column 4: Contact Info + Socials */}
+
+ {/* Mobile: show logo here instead */}
+ {isMobile && (
+
+
+
+ )}
+
+ Contact Us
+ Number
+ Address
+
+
+
+
+
+
+
+
-
-
- About Us
+
+
+
+
+
+ Copyright © 2025 QuadraEdge
- Portfolio
- Blogs
-
-
-
- Services
-
- Marketing
- Dev
- Design
-
-
-
- Contact Us
-
- Number
- Address
-
-
-
-
- Copyright © 2025 QuadraEdge.
-
-
+
+
);
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 (
-
-
-
-
- QUADRA EDGE
-
-
- {navItems.map((item) => (
-
- {item}
-
- ))}
+const Header = () => {
+ const [mobileOpen, setMobileOpen] = useState(false);
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+ const toggleDrawer = () => {
+ setMobileOpen(!mobileOpen);
+ };
+
+ const drawer = (
+
+
+ {navItems.map((item) => (
+
+
+
+ ))}
+
-
+
+
+
+ );
+
+
+ return (
+
+
+
+
+
+ QUADRA EDGE
+
+
+
+ {isMobile ? (
+ <>
+
+
+
+
+ {drawer}
+
+
+ ) : (
+
+ {navItems.map((item, index) => (
+
+
+ {item}
+
+
+ ))}
+
+
+
+
+ )}
);
-}
+};
+
+export default Header;