Compare commits
No commits in common. "b5642f7bad75beabab46a66916b0b5a2ff41087c" and "a566a1b6f4550bd429fe31d5230b08c682bd847a" have entirely different histories.
b5642f7bad
...
a566a1b6f4
|
|
@ -1,95 +1,44 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import { Box, Container, Grid, Link, Typography } from '@mui/material';
|
||||||
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() {
|
export default function Footer() {
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box sx={{ backgroundColor: '#0F111A', color: '#fff', pt: 6, pb: 2 }}>
|
<Box sx={{ py: 6, backgroundColor: '#0F111A', color: '#fff' }}>
|
||||||
<Container maxWidth="lg">
|
<Container maxWidth="lg">
|
||||||
<motion.div
|
<Grid container spacing={4}>
|
||||||
initial={{ opacity: 0, y: 10 }}
|
<Grid item xs={12} md={3}>
|
||||||
animate={{ opacity: 1, y: 0 }}
|
<Typography fontWeight={700} mb={2}>
|
||||||
transition={{ duration: 0.8 }}
|
QUADRA EDGE
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
|
|
||||||
|
|
||||||
<Box textAlign="center">
|
|
||||||
<Typography variant="body2" sx={{ color: '#00E0FF' }}>
|
|
||||||
Copyright © 2025 QuadraEdge
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Grid>
|
||||||
</motion.div>
|
<Grid item xs={12} md={3}>
|
||||||
|
<Typography fontWeight={600} gutterBottom>
|
||||||
|
About Us
|
||||||
|
</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>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,115 +1,47 @@
|
||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import {
|
import { AppBar, Box, Button, Container, Toolbar, Typography, Link } from '@mui/material';
|
||||||
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'];
|
const navItems = ['Home', 'Services', 'Portfolio', 'About Us', 'Blog'];
|
||||||
|
|
||||||
const Header = () => {
|
export default function 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 (
|
return (
|
||||||
<AppBar position="sticky" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
|
<AppBar position="static" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
|
||||||
<Container maxWidth="lg">
|
<Container maxWidth="lg">
|
||||||
<Toolbar sx={{ justifyContent: 'space-between' }}>
|
<Toolbar disableGutters 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 }}>
|
||||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
QUADRA EDGE
|
||||||
QUADRA EDGE
|
</Typography>
|
||||||
</Typography>
|
<Box sx={{ display: 'flex', gap: 3 }}>
|
||||||
</motion.div>
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
{isMobile ? (
|
key={item}
|
||||||
<>
|
href="#"
|
||||||
<IconButton color="inherit" edge="end" onClick={toggleDrawer}>
|
underline="none"
|
||||||
<MenuIcon />
|
sx={{ color: 'white', fontWeight: 500, fontSize: 14 }}
|
||||||
</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
|
{item}
|
||||||
variant="outlined"
|
</Link>
|
||||||
sx={{
|
))}
|
||||||
borderColor: '#00E0FF',
|
<Button
|
||||||
color: '#00E0FF',
|
variant="outlined"
|
||||||
textTransform: 'none',
|
size="small"
|
||||||
'&:hover': {
|
sx={{
|
||||||
backgroundColor: '#00E0FF',
|
borderColor: '#00E0FF',
|
||||||
color: '#000',
|
color: '#00E0FF',
|
||||||
},
|
fontWeight: 'bold',
|
||||||
}}
|
textTransform: 'none',
|
||||||
>
|
ml: 2,
|
||||||
Contact Us
|
'&:hover': {
|
||||||
</Button>
|
backgroundColor: '#00E0FF',
|
||||||
</motion.div>
|
color: '#000',
|
||||||
</Box>
|
},
|
||||||
)}
|
}}
|
||||||
|
>
|
||||||
|
Contact Us
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</Container>
|
</Container>
|
||||||
</AppBar>
|
</AppBar>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Header;
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue