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 {
|
import {
|
||||||
Box, Container, Grid, Typography, Link, Divider, Stack, useMediaQuery, useTheme
|
Box,
|
||||||
} from '@mui/material';
|
Container,
|
||||||
import {
|
Grid,
|
||||||
Instagram, YouTube, Facebook, LinkedIn
|
Typography,
|
||||||
} from '@mui/icons-material';
|
Link,
|
||||||
import { motion } from 'framer-motion';
|
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() {
|
export default function Footer() {
|
||||||
const theme = useTheme();
|
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 (
|
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">
|
<Container maxWidth="lg">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial="hidden"
|
||||||
animate={{ opacity: 1, y: 0 }}
|
whileInView="visible"
|
||||||
transition={{ duration: 0.8 }}
|
viewport={{ once: true, margin: "-50px" }}
|
||||||
|
variants={containerVariants}
|
||||||
>
|
>
|
||||||
<Grid container spacing={4}>
|
<Grid container spacing={isMobile ? 3 : 4}>
|
||||||
{/* Column 1: Explore Links */}
|
{/* Column 1: Explore Links */}
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
<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}>
|
<Stack spacing={1}>
|
||||||
<Link href="#" color="inherit" underline="hover">About Us</Link>
|
{["About Us", "Portfolio", "Blogs", "Services"].map((item) => (
|
||||||
<Link href="#" color="inherit" underline="hover">Portfolio</Link>
|
<Link
|
||||||
<Link href="#" color="inherit" underline="hover">Blogs</Link>
|
key={item}
|
||||||
<Link href="#" color="inherit" underline="hover">Services</Link>
|
component={motion.a}
|
||||||
|
variants={itemVariants}
|
||||||
|
whileHover="hover"
|
||||||
|
href="#"
|
||||||
|
color="inherit"
|
||||||
|
underline="hover"
|
||||||
|
sx={{
|
||||||
|
display: "inline-block",
|
||||||
|
transition: "color 0.2s ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{/* Column 2: Support Links */}
|
{/* Column 2: Support Links */}
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
<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}>
|
<Stack spacing={1}>
|
||||||
<Link href="#" color="inherit" underline="hover">FAQ’s</Link>
|
{["FAQ’s", "Terms & Conditions", "Privacy Policy"].map(
|
||||||
<Link href="#" color="inherit" underline="hover">Terms & Conditions</Link>
|
(item) => (
|
||||||
<Link href="#" color="inherit" underline="hover">Privacy Policy</Link>
|
<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>
|
</Stack>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{/* Column 3: Logo (only visible on md+) */}
|
{/* Column 3: Logo */}
|
||||||
{!isMobile && (
|
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
<Grid item xs={12} sm={6} md={3}>
|
||||||
<Box sx={{ display: 'flex', justifyContent: { sm: 'center', md: 'flex-end' }, mb: 2 }}>
|
<Box
|
||||||
<img
|
component={motion.div}
|
||||||
src="/logo.png" // Replace with actual logo
|
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"
|
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>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Column 4: Contact Info + Socials */}
|
{/* Column 4: Contact Info + Socials */}
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
<Grid item xs={12} sm={6} md={3}>
|
||||||
{/* Mobile: show logo here instead */}
|
<Typography
|
||||||
{isMobile && (
|
component={motion.div}
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
|
variants={itemVariants}
|
||||||
<img
|
variant="h6"
|
||||||
src="/logo.png" // Replace with actual logo
|
fontWeight={600}
|
||||||
alt="Quadra Edge"
|
gutterBottom
|
||||||
style={{ maxWidth: '180px', height: 'auto' }}
|
sx={{ color: "#00E0FF" }}
|
||||||
/>
|
>
|
||||||
</Box>
|
Contact Us
|
||||||
)}
|
</Typography>
|
||||||
|
|
||||||
<Typography fontWeight={600} gutterBottom>Contact Us</Typography>
|
<Typography
|
||||||
<Typography variant="body2" mb={1}>Number</Typography>
|
component={motion.div}
|
||||||
<Typography variant="body2">Address</Typography>
|
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
|
<Stack
|
||||||
direction="row"
|
direction="row"
|
||||||
spacing={2}
|
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>
|
{ icon: <Instagram />, name: "Instagram" },
|
||||||
<Link href="#"><Facebook sx={{ color: '#00E0FF' }} /></Link>
|
{ icon: <YouTube />, name: "YouTube" },
|
||||||
<Link href="#"><LinkedIn sx={{ color: '#00E0FF' }} /></Link>
|
{ 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>
|
</Stack>
|
||||||
</Grid>
|
</Grid>
|
||||||
</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">
|
<Box
|
||||||
<Typography variant="body2" sx={{ color: '#00E0FF' }}>
|
component={motion.div}
|
||||||
Copyright © 2025 QuadraEdge
|
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>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue