50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
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: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<Grid container>
|
|
<Grid item md={6}>
|
|
<Typography variant="h3" fontWeight="bold" gutterBottom>
|
|
We Create <br />
|
|
Brands That Stick
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item md={6}>
|
|
<Typography variant="body1" maxWidth="sm">
|
|
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",
|
|
"&:hover": {
|
|
backgroundColor: "#00E0FF",
|
|
color: "#000",
|
|
},
|
|
}}
|
|
>
|
|
Get in Touch
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</motion.div>
|
|
</Container>
|
|
<Box width="100%">
|
|
<img src={backgroundImg} alt="" width={"100%"} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|