internal
/
QuadraEdge
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: internal:b5642f7bad75beabab46a66916b0b5a2ff41087c
Branches Tags
internal:main
internal:fix/landing_page
internal:feature/new_segment
..
compare: internal:a566a1b6f4550bd429fe31d5230b08c682bd847a
Branches Tags
internal:fix/landing_page
internal:main
internal:feature/new_segment

No commits in common. "b5642f7bad75beabab46a66916b0b5a2ff41087c" and "a566a1b6f4550bd429fe31d5230b08c682bd847a" have entirely different histories.
b5642f7bad ... a566a1b6f4

2 changed files with 72 additions and 191 deletions
Show Stats Expand all files Collapse all files

105
src/components/footer/footer.tsx
View File

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

100
src/components/header/header.tsx
View File

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