Compare commits
1 Commits
01c2ba0100
...
d05dc3e6d1
| Author | SHA1 | Date |
|---|---|---|
Mihir Motiyani
|
d05dc3e6d1 |
|
|
@ -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}>
|
||||
<Typography fontWeight={700} mb={2}>
|
||||
QUADRA EDGE
|
||||
</Typography>
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
<Grid item xs={12} md={3}>
|
||||
<Typography fontWeight={600} gutterBottom>
|
||||
Contact Us
|
||||
</Typography>
|
||||
<Typography variant="body2">Number</Typography>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
<Box textAlign="center" mt={4}>
|
||||
<Typography variant="body2" color="gray">
|
||||
Copyright © 2025 QuadraEdge.
|
||||
|
||||
<Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
|
||||
|
||||
<Box textAlign="center">
|
||||
<Typography variant="body2" sx={{ color: '#00E0FF' }}>
|
||||
Copyright © 2025 QuadraEdge
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,36 +1,100 @@
|
|||
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() {
|
||||
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 }}>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
</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}
|
||||
href="#"
|
||||
underline="none"
|
||||
sx={{ color: 'white', fontWeight: 500, fontSize: 14 }}
|
||||
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}
|
||||
</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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue