fix : added animation and mobile view in footer section
This commit is contained in:
hardik
parent
0a31567b38
commit
dd872ea234
|
|
@ -1,92 +1,294 @@
|
|||
import React from 'react';
|
||||
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';
|
||||
Box,
|
||||
Container,
|
||||
Grid,
|
||||
Typography,
|
||||
Link,
|
||||
Divider,
|
||||
Stack,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { Instagram, YouTube, Facebook, LinkedIn } from "@mui/icons-material";
|
||||
import { motion, Variants } from "framer-motion";
|
||||
|
||||
export default function Footer() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.between("sm", "md"));
|
||||
|
||||
// Animation variants
|
||||
const containerVariants: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
when: "beforeChildren",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants: Variants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
ease: "easeOut",
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
scale: 1.05,
|
||||
color: "#00E0FF",
|
||||
transition: { duration: 0.2 },
|
||||
},
|
||||
};
|
||||
|
||||
const socialIconVariants: Variants = {
|
||||
hidden: { scale: 0 },
|
||||
visible: {
|
||||
scale: 1,
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 500,
|
||||
damping: 15,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
scale: 1.2,
|
||||
transition: { duration: 0.2 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ backgroundColor: '#0F111A', color: '#fff', pt: 6, pb: 2 }}>
|
||||
<Box
|
||||
component="footer"
|
||||
sx={{
|
||||
backgroundColor: "#0F111A",
|
||||
color: "#fff",
|
||||
pt: 8,
|
||||
pb: 4,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
variants={containerVariants}
|
||||
>
|
||||
<Grid container spacing={4}>
|
||||
<Grid container spacing={isMobile ? 3 : 4}>
|
||||
{/* Column 1: Explore Links */}
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Typography
|
||||
component={motion.div}
|
||||
variants={itemVariants}
|
||||
variant="h6"
|
||||
fontWeight={600}
|
||||
gutterBottom
|
||||
sx={{ color: "#00E0FF" }}
|
||||
>
|
||||
Explore
|
||||
</Typography>
|
||||
<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>
|
||||
{["About Us", "Portfolio", "Blogs", "Services"].map((item) => (
|
||||
<Link
|
||||
key={item}
|
||||
component={motion.a}
|
||||
variants={itemVariants}
|
||||
whileHover="hover"
|
||||
href="#"
|
||||
color="inherit"
|
||||
underline="hover"
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
transition: "color 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
))}
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
{/* Column 2: Support Links */}
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Typography
|
||||
component={motion.div}
|
||||
variants={itemVariants}
|
||||
variant="h6"
|
||||
fontWeight={600}
|
||||
gutterBottom
|
||||
sx={{ color: "#00E0FF" }}
|
||||
>
|
||||
Support
|
||||
</Typography>
|
||||
<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>
|
||||
{["FAQ’s", "Terms & Conditions", "Privacy Policy"].map(
|
||||
(item) => (
|
||||
<Link
|
||||
key={item}
|
||||
component={motion.a}
|
||||
variants={itemVariants}
|
||||
whileHover="hover"
|
||||
href="#"
|
||||
color="inherit"
|
||||
underline="hover"
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
transition: "color 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
{/* Column 3: Logo (only visible on md+) */}
|
||||
{!isMobile && (
|
||||
{/* Column 3: Logo */}
|
||||
<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
|
||||
<Box
|
||||
component={motion.div}
|
||||
variants={itemVariants}
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: isMobile
|
||||
? "flex-start"
|
||||
: isTablet
|
||||
? "center"
|
||||
: "flex-end",
|
||||
mb: 2,
|
||||
height: "100%",
|
||||
alignItems: isMobile ? "flex-start" : "center",
|
||||
}}
|
||||
>
|
||||
<motion.img
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 15,
|
||||
delay: 0.2,
|
||||
}}
|
||||
src="/logo.png"
|
||||
alt="Quadra Edge"
|
||||
style={{ maxWidth: '180px', height: 'auto' }}
|
||||
style={{
|
||||
maxWidth: isMobile ? "140px" : "180px",
|
||||
height: "auto",
|
||||
filter: "drop-shadow(0 0 8px rgba(0, 224, 255, 0.4))",
|
||||
}}
|
||||
/>
|
||||
</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
|
||||
component={motion.div}
|
||||
variants={itemVariants}
|
||||
variant="h6"
|
||||
fontWeight={600}
|
||||
gutterBottom
|
||||
sx={{ color: "#00E0FF" }}
|
||||
>
|
||||
Contact Us
|
||||
</Typography>
|
||||
|
||||
<Typography fontWeight={600} gutterBottom>Contact Us</Typography>
|
||||
<Typography variant="body2" mb={1}>Number</Typography>
|
||||
<Typography variant="body2">Address</Typography>
|
||||
<Typography
|
||||
component={motion.div}
|
||||
variants={itemVariants}
|
||||
variant="body2"
|
||||
mb={1}
|
||||
>
|
||||
+1 (123) 456-7890
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
component={motion.div}
|
||||
variants={itemVariants}
|
||||
variant="body2"
|
||||
>
|
||||
123 Business Ave, Suite 100
|
||||
<br />
|
||||
New York, NY 10001
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ mt: 2 }}
|
||||
sx={{ mt: 3 }}
|
||||
component={motion.div}
|
||||
variants={containerVariants}
|
||||
>
|
||||
<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>
|
||||
{[
|
||||
{ icon: <Instagram />, name: "Instagram" },
|
||||
{ icon: <YouTube />, name: "YouTube" },
|
||||
{ icon: <Facebook />, name: "Facebook" },
|
||||
{ icon: <LinkedIn />, name: "LinkedIn" },
|
||||
].map((social, index) => (
|
||||
<Link
|
||||
key={social.name}
|
||||
component={motion.a}
|
||||
variants={socialIconVariants}
|
||||
whileHover="hover"
|
||||
href="#"
|
||||
sx={{
|
||||
color: "#00E0FF",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
aria-label={social.name}
|
||||
>
|
||||
{React.cloneElement(social.icon, {
|
||||
sx: {
|
||||
fontSize: isMobile ? "1.8rem" : "2rem",
|
||||
transition: "transform 0.2s ease",
|
||||
},
|
||||
})}
|
||||
</Link>
|
||||
))}
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
|
||||
<Divider
|
||||
component={motion.hr}
|
||||
initial={{ scaleX: 0 }}
|
||||
whileInView={{ scaleX: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
sx={{
|
||||
my: 4,
|
||||
borderColor: "#00E0FF",
|
||||
borderBottomWidth: 2,
|
||||
opacity: 0.6,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Box textAlign="center">
|
||||
<Typography variant="body2" sx={{ color: '#00E0FF' }}>
|
||||
Copyright © 2025 QuadraEdge
|
||||
<Box
|
||||
component={motion.div}
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.4 }}
|
||||
textAlign="center"
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: "#00E0FF",
|
||||
fontSize: isMobile ? "0.8rem" : "0.9rem",
|
||||
letterSpacing: "0.5px",
|
||||
}}
|
||||
>
|
||||
Copyright © {new Date().getFullYear()} QuadraEdge. All rights
|
||||
reserved.
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue