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>
  );
}