fix : changed css of about us segment
This commit is contained in:
hardik
parent
f20e8591cb
commit
e863382af9
|
|
@ -1,41 +1,135 @@
|
|||
import { Box, Typography, Button } from "@mui/material";
|
||||
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const AboutUs = () => {
|
||||
// Animation variants
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
duration: 0.6,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
ease: "easeOut" as const,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.3 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
|
||||
<Box textAlign="center" maxWidth={800} mx="auto">
|
||||
<Typography variant="h4" fontWeight="bold" gutterBottom>
|
||||
About Us
|
||||
</Typography>
|
||||
<Typography variant="body1" paragraph>
|
||||
Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim
|
||||
hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In
|
||||
dolor venenatis ultricies aliquet lacinia. Faucibus commodo eu gravida
|
||||
auctor eu et sit ut. Sed praesent sed odio aliquam in fermentum. Sit
|
||||
vitae morbi sodales sem velit eu tempus velit nunc. Turpis in in
|
||||
luctus et nulla purus nibh ut. Enim sed fermentum purus molestie
|
||||
parturient morbi nunc aliquet. Aliquam sed etiam turpis non lectus
|
||||
commodo cras leo gravida.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
endIcon={<ArrowOutwardIcon />}
|
||||
sx={{
|
||||
mt: 2,
|
||||
borderColor: "#00FFD1",
|
||||
color: "#00FFD1",
|
||||
borderRadius: "30px",
|
||||
fontWeight: "bold",
|
||||
px: 4,
|
||||
"&:hover": {
|
||||
backgroundColor: "#00FFD1",
|
||||
color: "#000",
|
||||
},
|
||||
}}
|
||||
>
|
||||
GET IN TOUCH
|
||||
</Button>
|
||||
<Box
|
||||
component={motion.div}
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
sx={{
|
||||
backgroundColor: "#1d2733",
|
||||
color: "#fff",
|
||||
py: { xs: 8, md: 12 },
|
||||
px: 3,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component={motion.div}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
textAlign="center"
|
||||
maxWidth={800}
|
||||
mx="auto"
|
||||
>
|
||||
<Box component={motion.div} variants={itemVariants} whileHover="hover">
|
||||
<Typography
|
||||
variant="h2"
|
||||
gutterBottom
|
||||
sx={{
|
||||
fontFamily: "'Cormorant Garamond', serif",
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "2.5rem", md: "3rem" },
|
||||
letterSpacing: "1px",
|
||||
mb: 4,
|
||||
position: "relative",
|
||||
"&:after": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
width: "80px",
|
||||
height: "3px",
|
||||
background: "linear-gradient(90deg, #00FFD1, transparent)",
|
||||
margin: "20px auto 0",
|
||||
borderRadius: "2px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
About Us
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box component={motion.div} variants={itemVariants}>
|
||||
<Typography
|
||||
paragraph
|
||||
sx={{
|
||||
fontFamily: "'Montserrat', sans-serif",
|
||||
fontSize: { xs: "1rem", md: "1.1rem" },
|
||||
lineHeight: 1.9,
|
||||
fontWeight: 300,
|
||||
mb: 4,
|
||||
color: "rgba(255,255,255,0.85)",
|
||||
}}
|
||||
>
|
||||
Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros.
|
||||
Enim hendrerit elit interdum malesuada sit dis est pharetra
|
||||
suspendisse. In dolor venenatis ultricies aliquet lacinia. Faucibus
|
||||
commodo eu gravida auctor eu et sit ut. Sed praesent sed odio
|
||||
aliquam in fermentum. Sit vitae morbi sodales sem velit eu tempus
|
||||
velit nunc. Turpis in in luctus et nulla purus nibh ut. Enim sed
|
||||
fermentum purus molestie parturient morbi nunc aliquet. Aliquam sed
|
||||
etiam turpis non lectus commodo cras leo gravida.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box component={motion.div} variants={itemVariants} whileHover="hover">
|
||||
<Button
|
||||
variant="outlined"
|
||||
endIcon={<ArrowOutwardIcon />}
|
||||
sx={{
|
||||
mt: 2,
|
||||
borderColor: "#00FFD1",
|
||||
color: "#00FFD1",
|
||||
borderRadius: "30px",
|
||||
fontWeight: 500,
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
fontFamily: "'Montserrat', sans-serif",
|
||||
letterSpacing: "1px",
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.3s ease",
|
||||
"&:hover": {
|
||||
backgroundColor: "#00FFD1",
|
||||
color: "#000",
|
||||
boxShadow: "0 5px 15px rgba(0, 255, 209, 0.4)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
GET IN TOUCH
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue