4.Herobanner section

 .

.import React from "react";

import { Box, Typography, Button } from "@mui/material";

import HeroBannerImage from "../../assets/images/banner.png";

const HeroBanner = () => {

  return (

    <Box

      sx={{

        mt: { lg: "212px", xs: "70px" },

        ml: { sm: "50px" },

      }}

      position="relative"

      p="20px"

    >

      <Typography color="ff2625" fontWeight="600" fontSize="26px">

        Fitness Club

      </Typography>

      <Typography

        fontWeight="700"

        sx={{

          fontSize: { lg: "44px", xs: "40px" },

        }}

        mb="23px"

        mt="30px"

      >

        Sweat, Smile <br /> and Repeat

      </Typography>

      <Typography fontSize="32px" lineHeight="35px" mb={4}>

        Check out the most effective exercises

      </Typography>

      <Button

        variant="contained"

        color="error"

        sx={{ backgroundColor: "#ff2526", padding: "10px" }}

      >

        Explore Exercises

      </Button>

      <Typography

        fontWeight={600}

        color="#ff2625"

        fontSize="200px"

        sx={{ opacity: 0.1, display: { lg: "block", xs: "none" } }}

      >

        Exercise

      </Typography>

      <img src={HeroBannerImage} alt="banner" className="hero-banner-img" />

    </Box>

  );

};

export default HeroBanner;

.mb={4}> mb="23px" thus you can use string with unit or use number inside {}

.sx={{ opacity: 0.1, display: { lg: "block", xs: "none" } }} this means is willnot display offor xs devices as it is set to display none for xs devices

This how you can maintain responsiveness without media queries in mui.

color="error" for button

.color="#ff2625" for typography

..color="#ff2625" for button wont work .only inbuilt color value such as promary secondary,error,etc work for

this prop as it is built for button component.

.        fontWeight={600} color="#ff2625" fontSize="200px"

These are mui system props , you cam use it in almost all component of mui.

you can use color inside sx or outside of sx because it is availble as both mui system prop and

css prop.

However you cant use spacing prop available for stack component inside sx as it it only for the

component and is not css prop .

Also you cant use,regular css prop as backgroundColor outside of sx.

.

.