103 lines
3.3 KiB
XML
103 lines
3.3 KiB
XML
import { Box, Button, Container, Grid, Typography } from "@mui/material";
|
|
import { motion } from "framer-motion";
|
|
import backgroundImg from "../hero/Frame 22.png";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}>
|
|
<Container maxWidth="lg">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1 }}
|
|
>
|
|
<Grid container spacing={4} alignItems="center">
|
|
<Grid item xs={12} md={6}>
|
|
<Box>
|
|
<Typography
|
|
variant="h2"
|
|
fontWeight="bold"
|
|
gutterBottom
|
|
sx={{
|
|
fontSize: { xs: "2rem", sm: "2.8rem", md: "3.4rem" },
|
|
lineHeight: 1.2,
|
|
}}
|
|
>
|
|
We Create <br />
|
|
Brands That Stick
|
|
</Typography>
|
|
|
|
{/* Sliding second line after 7s */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 7, duration: 1 }}
|
|
>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
mt: 2,
|
|
fontWeight: 300,
|
|
color: "#00E0FF",
|
|
fontStyle: "italic",
|
|
}}
|
|
>
|
|
"Let your brand speak before you do."
|
|
</Typography>
|
|
</motion.div>
|
|
</Box>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} md={6}>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 1, duration: 1 }}
|
|
>
|
|
<Typography
|
|
variant="body1"
|
|
sx={{ maxWidth: "500px", fontSize: "1.1rem", color: "#ccc" }}
|
|
>
|
|
We help founders grow through bold design, sharp strategy, and
|
|
smart marketing that drives recognition, engagement and
|
|
long-term brand loyalty.
|
|
</Typography>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
mt: 4,
|
|
borderColor: "#00E0FF",
|
|
color: "#00E0FF",
|
|
borderRadius: "24px",
|
|
px: 4,
|
|
py: 1.5,
|
|
textTransform: "none",
|
|
fontWeight: 600,
|
|
"&:hover": {
|
|
backgroundColor: "#00E0FF",
|
|
color: "#000",
|
|
},
|
|
}}
|
|
>
|
|
Get in Touch
|
|
</Button>
|
|
</motion.div>
|
|
</Grid>
|
|
</Grid>
|
|
</motion.div>
|
|
</Container>
|
|
|
|
<Box width="100%" mt={8}>
|
|
<motion.img
|
|
src={backgroundImg}
|
|
alt="Hero Background"
|
|
width="100%"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.5, duration: 1 }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|