Header 1
The time is now for it be okay to be great. People in this world shun people for being nice.
1// @mui material components
2import Container from "@mui/material/Container";
3import Grid from "@mui/material/Grid";
4import Link from "@mui/material/Link";
5import Stack from "@mui/material/Stack";
6import MKBox from "components/MKBox";
7import MKButton from "components/MKButton";
8import MKTypography from "components/MKTypography";
9
10// Images
11import bgImage from "assets/images/bg-coworking.jpeg";
12
13function HeaderOne() {
14 return (
15 <MKBox component="header" position="relative">
16 <MKBox component="nav" position="absolute" top="0.5rem" width="100%">
17 <Container>
18 <Grid container flexDirection="row" alignItems="center">
19 <MKTypography
20 component={Link}
21 href="#"
22 variant="button"
23 color="white"
24 fontWeight="regular"
25 py={0.8125}
26 mr={2}
27 >
28 Material Design
29 </MKTypography>
30 <MKButton
31 variant="outlined"
32 color="white"
33 sx={{ display: { xs: "block", lg: "none" }, ml: "auto" }}
34 >
35 <MKBox component="i" color="white" className="fas fa-bars" />
36 </MKButton>
37 <MKBox
38 component="ul"
39 display={{ xs: "none", lg: "flex" }}
40 p={0}
41 my={0}
42 mx="auto"
43 sx={{ listStyle: "none" }}
44 >
45 <MKBox component="li">
46 <MKTypography
47 component={Link}
48 href="#"
49 variant="button"
50 color="white"
51 fontWeight="regular"
52 p={1}
53 onClick={(e) => e.preventDefault()}
54 >
55 Home
56 </MKTypography>
57 </MKBox>
58 <MKBox component="li">
59 <MKTypography
60 component={Link}
61 href="#"
62 variant="button"
63 color="white"
64 fontWeight="regular"
65 p={1}
66 onClick={(e) => e.preventDefault()}
67 >
68 About Us
69 </MKTypography>
70 </MKBox>
71 <MKBox component="li">
72 <MKTypography
73 component={Link}
74 href="#"
75 variant="button"
76 color="white"
77 fontWeight="regular"
78 p={1}
79 onClick={(e) => e.preventDefault()}
80 >
81 Contact Us
82 </MKTypography>
83 </MKBox>
84 </MKBox>
85 <MKBox
86 component="ul"
87 display={{ xs: "none", lg: "flex" }}
88 p={0}
89 m={0}
90 sx={{ listStyle: "none" }}
91 >
92 <MKBox component="li">
93 <MKTypography
94 component={Link}
95 href="#"
96 variant="button"
97 p={1}
98 onClick={(e) => e.preventDefault()}
99 >
100 <MKBox component="i" color="white" className="fab fa-twitter" />
101 </MKTypography>
102 </MKBox>
103 <MKBox component="li">
104 <MKTypography
105 component={Link}
106 href="#"
107 variant="button"
108 p={1}
109 onClick={(e) => e.preventDefault()}
110 >
111 <MKBox component="i" color="white" className="fab fa-facebook" />
112 </MKTypography>
113 </MKBox>
114 <MKBox component="li">
115 <MKTypography
116 component={Link}
117 href="#"
118 variant="button"
119 p={1}
120 onClick={(e) => e.preventDefault()}
121 >
122 <MKBox component="i" color="white" className="fab fa-instagram" />
123 </MKTypography>
124 </MKBox>
125 </MKBox>
126 </Grid>
127 </Container>
128 </MKBox>
129 <MKBox
130 display="flex"
131 alignItems="center"
132 minHeight="100vh"
133 sx={{
134 backgroundImage: ({ palette: { gradients }, functions: { linearGradient, rgba } }) => `${linearGradient(rgba(gradients.dark.main, 0.5), rgba(gradients.dark.state, 0.5))}, url(${bgImage})`,
135 backgroundSize: "cover",
136 backgroundPosition: "center",
137 }}
138 >
139 <Container>
140 <Grid container item xs={12} md={7} lg={6} flexDirection="column" justifyContent="center">
141 <MKTypography
142 variant="h1"
143 color="white"
144 mb={3}
145 sx={({ breakpoints, typography: { size } }) => ({
146 [breakpoints.down("md")]: {
147 fontSize: size["3xl"],
148 },
149 })}
150 >
151 Jizzakh PS
152 </MKTypography>
153 <MKTypography variant="body1" color="white" opacity={0.8} pr={6} mr={6}>
154 The time is now for it be okay to be great. People in this world shun people for being
155 nice.
156 </MKTypography>
157 <Stack direction="row" spacing={1} mt={3}>
158 <MKButton color="white">Get Started</MKButton>
159 <MKButton variant="text" color="white">
160 Read more
161 </MKButton>
162 </Stack>
163 </Grid>
164 </Container>
165 </MKBox>
166 </MKBox>
167 );
168}
169
170export default HeaderOne;