97 lines
3.6 KiB
TypeScript
97 lines
3.6 KiB
TypeScript
import React from 'react';
|
||
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={{ 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}>
|
||
{/* 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>
|
||
</Box>
|
||
</motion.div>
|
||
</Container>
|
||
</Box>
|
||
);
|
||
}
|