├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
    └── index.html
└── src
    ├── App.js
    ├── assets
        ├── About.png
        ├── Contact.png
        ├── Home.png
        ├── pexels-alex-staudinger-1732414.jpg
        ├── pexels-binyamin-mellish-186078.png
        └── pexels-pixabay-271816.jpg
    ├── components
        ├── Content.jsx
        ├── Details.jsx
        ├── DrawerItem.jsx
        ├── Footer
        │   ├── Footer.jsx
        │   ├── FooterLink.jsx
        │   └── FooterTitle.jsx
        ├── Gallery.jsx
        ├── GetInTouch.jsx
        ├── GetStarted.jsx
        ├── Header.jsx
        ├── Navbar.jsx
        ├── Paragraph.jsx
        └── Title.jsx
    ├── index.js
    └── pages
        ├── About.js
        ├── Contact.js
        └── Home.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Alessandra Do Couto
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Landing Page Template com React JS e Material UI :dart:
  2 | 
  3 | Site: https://hbsales.onrender.com/
  4 | 
  5 | ![link Home do site](https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/master/src/assets/Home.png)
  6 | 
  7 | 
  8 | ![link About do site](https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/master/src/assets/About.png)
  9 | 
 10 | ![link Contact do site](https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/master/src/assets/Contact.png)
 11 | 
 12 | 
 13 | 
 14 | ## Índice
 15 | 
 16 | - [Sobre](https://github.com/alessandradocouto/landing-page-template-reactjs#sobre)
 17 | - [Aprendizados](https://github.com/alessandradocouto/landing-page-template-reactjs#aprendizados)
 18 | - [Dependências](https://github.com/alessandradocouto/landing-page-template-reactjs#dependências)
 19 | 
 20 | 
 21 | 
 22 | ## Sobre
 23 | 
 24 | Landing page Template em React JS feita para desenvolvedores/designs que querem criar rapidamente uma landing page profissional para seus projetos open source. 
 25 | 
 26 | 
 27 | ## Aprendizados
 28 | 
 29 | :heavy_check_mark: React Router v6+ no DOM
 30 | 
 31 | No App.js
 32 | 
 33 | `import {BrowserRouter, Routes, Route} from react-router-dom';`
 34 |  
 35 | O componente **Navbar** tem elementos que se repetem em todas as páginas e tem elementos que estão em 'Routes', logo fica dentro de 'BrowserRouter'.
 36 | 
 37 | ```
 38 | <BrowserRouter>
 39 |     <Navbar />
 40 |     <Routes>
 41 |         <Route path='/' element={<Home />} />
 42 |         <Route path='/about' element={<About />} />
 43 |         <Route path='/contact' element={<Contact />} />
 44 |     </Routes>
 45 | </BrowserRouter>
 46 | ```
 47 | 
 48 | Dentro da pasta pages :file_folder: e no arquivo :page_with_curl: Home.js
 49 | 
 50 | ```
 51 | const Home = () => {
 52 |   return (
 53 |     <>
 54 |     <Header />
 55 |     <GetStarted />
 56 |     <GetInTouch />
 57 |     </>
 58 | 
 59 |   )
 60 | }
 61 | ```
 62 | 
 63 | 
 64 | Dentro do componente **Navbar**:
 65 | 
 66 | ```
 67 | import { Link } from 'react-router-dom';
 68 | 
 69 | const itemList = [
 70 |     {
 71 |       text: "Home",
 72 |       to: "/" 
 73 |     },
 74 |     {
 75 |       text: "About",
 76 |       to: "/about"
 77 |     },
 78 |     {
 79 |         text: "Contact",
 80 |         to: "/contact"
 81 |     }
 82 | ];
 83 | 
 84 | 
 85 | const Navbar = () => {
 86 |     
 87 |     return (
 88 |         <AppBar 
 89 |         component="nav" 
 90 |         position="sticky"
 91 |         sx={{ 
 92 |             backgroundColor: 'orange', 
 93 |         }}
 94 |         elevation={0}
 95 |         >
 96 |             <StyledToolbar>
 97 |                 <Typography
 98 |                 variant="h6"
 99 |                 component="h2"
100 | 
101 |                 >
102 |                     HBSales
103 |                 </Typography>
104 |                 
105 |                 <ListMenu>
106 |                     {itemList.map( ( item ) => {
107 |                         const { text } = item;
108 |                         return(
109 |                             <ListItem key={text}>
110 |                                 <ListItemButton component={Link} to={item.to}
111 |                                 sx={{
112 |                                     color: '#fff',
113 |                                     "&:hover": {
114 |                                         backgroundColor: 'transparent',
115 |                                         color: '#1e2a5a',
116 |                                     }
117 |                                 }}
118 |                                 >
119 |                                     <ListItemText primary={text} />
120 |                                 </ListItemButton>
121 |                             </ListItem>
122 |                         )
123 |                     })}
124 |                 </ListMenu>
125 |             </StyledToolbar>
126 |         </AppBar>
127 |     )
128 | }
129 | 
130 | export default Navbar;
131 | ```
132 | 
133 | 
134 | 
135 | :heavy_check_mark: Utilização de sx e breakpoints em Material UI
136 | 
137 | O que é [sx](https://mui.com/system/getting-started/the-sx-prop/)?
138 | 
139 | A propriedade sx permite que você trabalhe com um superconjunto de CSS que empacota todas as funções de estilo expostas em @mui/system. Você pode especificar qualquer CSS válido usando este suporte, bem como muitas propriedades com reconhecimento de tema que são exclusivas do MUI System.
140 | 
141 | 
142 | ```
143 | <Box component='article'>
144 |     sx={{
145 |         px: 4,
146 |     }}
147 | </Box>
148 | 
149 | 
150 | <Grid item xs={12} sm={4} md={6}>
151 |     sx={{
152 |         order: {xs: 4, sm: 4, md: 3}
153 |     }}
154 | </Grid>
155 | ```
156 | 
157 | 
158 | :heavy_check_mark: Uso de Componentes reutilizáveis em React;
159 | 
160 | Conteúdo do componente Title:
161 | 
162 | ```
163 | import { Typography } from '@mui/material'
164 | import React from 'react'
165 | 
166 | const Title = ({ text, textAlign }) => {
167 |   return (
168 |     <Typography 
169 |     variant='h4'
170 |     component='h3'
171 |     sx={{ 
172 |       fontWeight: '700',
173 |       textAlign: textAlign,
174 |    }}
175 |     >
176 |       {text}
177 |     </Typography>
178 |   )
179 | }
180 | 
181 | export default Title;
182 | ```
183 | 
184 | 
185 | :heavy_check_mark: Utilização de Styled-Components com Material UI
186 | 
187 | Personlizar o 'Box' 
188 | 
189 | ```
190 | const ListMenu = styled(List)(({ theme }) => ({
191 |     display: 'none',
192 |     [theme.breakpoints.up("sm")] : {
193 |         display: "flex",
194 |     },
195 | }));
196 | ```
197 | 
198 | 
199 | 
200 | :heavy_check_mark: Design responsivo e mobile first;
201 | 
202 | [Uso de Grid no Material UI](https://mui.com/material-ui/react-grid/)
203 | 
204 | ```react
205 | <Grid item xs={12} sm={4} md={6}>
206 |     <img src={imgDetail} alt="" 
207 |     style={{
208 |         width: '100%',
209 |     }}
210 |     />
211 | </Grid>
212 | ```
213 | 
214 | 
215 | :heavy_check_mark: Uso de Menu mobile com MUI (Drawer)
216 | 
217 | [Drawer para usod e menu Mobile/Hamburguer](https://mui.com/material-ui/react-drawer/)
218 | 
219 | 
220 | 
221 | 
222 | ## Dependências
223 | 
224 | - [Material UI v5](https://www.npmjs.com/package/@mui/material) - Pacotes de utilidades de CSS para layouts.
225 | 
226 | ` npm install @mui/material @emotion/react @emotion/styled `
227 | 
228 | 
229 | - [react router v6+]("react-router-dom": "^6.6.1") - Pacote para usar React Router em aplicativos Web.
230 | 
231 | `npm i react-router-dom`
232 | 
233 | 
234 | - [react responsive carousel v3.2+](https://www.npmjs.com/package/react-responsive-carousel) - Carousel responsivo e customizável para galeria de iamgens.
235 | 
236 | `npm i react-responsive-carousel`
237 | 
238 | 
239 | - [react animation](https://www.npmjs.com) - Animação de Componentes
240 | 
241 | 
242 | ##  
243 | 
244 | ### Clonar o repositorio:
245 | 
246 | `git clone https://github.com/nome-usuario/nome-projeto.git`
247 | 
248 | ### Instalar dependências
249 | 
250 | `npm install`
251 | 
252 | ### Rodar aplicação
253 | 
254 | `npm start`
255 | 
256 | Abra o link [http://localhost:3000](http://localhost:3000) 
257 | 
258 | ### Criar pasta build
259 | 
260 | `npm run build`
261 | 
262 | ### Testar aplicação:
263 | 
264 | `npm test`
265 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "landing-page-reactjs-materialui",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.10.5",
 7 |     "@emotion/styled": "^11.10.5",
 8 |     "@mui/icons-material": "^5.11.0",
 9 |     "@mui/material": "^5.11.2",
10 |     "@testing-library/jest-dom": "^5.16.5",
11 |     "@testing-library/react": "^13.4.0",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0",
15 |     "react-responsive-carousel": "^3.2.23",
16 |     "react-router-dom": "^6.6.1",
17 |     "react-scripts": "5.0.1",
18 |     "web-vitals": "^2.1.4"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#000000" />
 7 |     <meta
 8 |       name="description"
 9 |       content="Web site created using create-react-app"
10 |     />
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700&display=swap"
14 |     />
15 |     <style>
16 |       * {
17 |         font-family: "Roboto", sans-serif;
18 |         margin: 0;
19 |       }
20 |     </style>
21 |     <title>HBSales - New home buying experience for you</title>
22 |   </head>
23 |   <body>
24 |     <noscript>You need to enable JavaScript to run this app.</noscript>
25 |     <div id="root"></div>
26 |     <!--
27 |       This HTML file is a template.
28 |       If you open it directly in the browser, you will see an empty page.
29 | 
30 |       You can add webfonts, meta tags, or analytics to this file.
31 |       The build step will place the bundled scripts into the <body> tag.
32 | 
33 |       To begin the development, run `npm start` or `yarn start`.
34 |       To create a production bundle, use `npm run build` or `yarn build`.
35 |     -->
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from'react';
 2 | //rotas
 3 | import {BrowserRouter, Routes, Route} from 'react-router-dom';
 4 | //pages
 5 | import Home from './pages/Home';
 6 | import About from './pages/About';
 7 | import Contact from './pages/Contact';
 8 | //componentes
 9 | import Navbar from './components/Navbar';
10 | import Footer from './components/Footer/Footer';
11 | 
12 | function App() {
13 |   return (
14 |     <>
15 |       <BrowserRouter>
16 |         <Navbar />
17 |         <Routes>
18 |           <Route path='/' element={<Home />} />
19 |           <Route path='/about' element={<About />} />
20 |           <Route path='/contact' element={<Contact />} />
21 |         </Routes>
22 |       </BrowserRouter>
23 |       <Footer />
24 |     </>
25 |   );
26 | }
27 | 
28 | export default App;


--------------------------------------------------------------------------------
/src/assets/About.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/40cf57ed0c949dce82d47e494a9bae3fed0d5ab9/src/assets/About.png


--------------------------------------------------------------------------------
/src/assets/Contact.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/40cf57ed0c949dce82d47e494a9bae3fed0d5ab9/src/assets/Contact.png


--------------------------------------------------------------------------------
/src/assets/Home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/40cf57ed0c949dce82d47e494a9bae3fed0d5ab9/src/assets/Home.png


--------------------------------------------------------------------------------
/src/assets/pexels-alex-staudinger-1732414.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/40cf57ed0c949dce82d47e494a9bae3fed0d5ab9/src/assets/pexels-alex-staudinger-1732414.jpg


--------------------------------------------------------------------------------
/src/assets/pexels-binyamin-mellish-186078.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/40cf57ed0c949dce82d47e494a9bae3fed0d5ab9/src/assets/pexels-binyamin-mellish-186078.png


--------------------------------------------------------------------------------
/src/assets/pexels-pixabay-271816.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alessandradocouto/landing-page-template-reactjs/40cf57ed0c949dce82d47e494a9bae3fed0d5ab9/src/assets/pexels-pixabay-271816.jpg


--------------------------------------------------------------------------------
/src/components/Content.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {  
  3 |     Grid, 
  4 |     Typography,
  5 |     IconButton,
  6 |     Card,
  7 |     CardContent,
  8 | } from "@mui/material";
  9 | // icons
 10 | import SportsGymnasticsIcon from '@mui/icons-material/SportsGymnastics';
 11 | import LocalParkingIcon from '@mui/icons-material/LocalParking';
 12 | import ArrowCircleRightRoundedIcon from '@mui/icons-material/ArrowCircleRightRounded';
 13 | import FastfoodOutlinedIcon from '@mui/icons-material/FastfoodOutlined';
 14 | import PoolOutlinedIcon from '@mui/icons-material/PoolOutlined';
 15 | import WifiPasswordIcon from '@mui/icons-material/WifiPassword';
 16 | // components
 17 | import Title from './Title'
 18 | import Paragraph from './Paragraph'
 19 | 
 20 | 
 21 | const Content = () => {
 22 |   return (    
 23 |         <Grid container spacing={0}   
 24 |         sx={{
 25 |             display: 'flex',
 26 |             flexDirection: 'row',
 27 |             justifyContent: 'center',
 28 |             alignItems: 'center',
 29 |             py: 10,
 30 |             px: 2,
 31 |         }}
 32 |         >
 33 |             <Grid item xs={12} sm={12} md={5}
 34 |             component = 'section'
 35 |             >
 36 |                 <Title
 37 |                 text={
 38 |                     'What we are offering?'
 39 |                 }
 40 |                 textAlign={'start'}
 41 |                 />
 42 | 
 43 |                 <Typography 
 44 |                 variant='h6'
 45 |                 component='h4' 
 46 |                 sx = {{
 47 |                     fontWeight: '400',
 48 |                     paddingTop: 1,
 49 |                 }}
 50 |                 >
 51 |                     Property facilities
 52 |                 </Typography>
 53 | 
 54 |                 <Paragraph 
 55 |                 text={
 56 |                     ' We have more 5000 reviews\
 57 |                     and our customers trust on out quality\
 58 |                     product and trust own our product.'
 59 |                 }
 60 |                 maxWidth = {'75%'}
 61 |                 mx={0}
 62 |                 textAlign={'start'}
 63 |                 />
 64 |             </Grid>
 65 |             
 66 |             <Grid item xs={12} sm={6} md={3}>
 67 |                 <Card 
 68 |                 square={ true }
 69 |                 sx={{
 70 |                     minHeight: 200,
 71 |                     display: 'flex',
 72 |                     flexDirection:'column',
 73 |                     justifyContent: 'center',
 74 |                     alignItems: 'center',
 75 |                     textAlign: 'center',
 76 |                     border: '1px solid #ccc',
 77 |                 }}>
 78 |                     <CardContent>
 79 |                         <IconButton>
 80 |                             <SportsGymnasticsIcon 
 81 |                             fontSize="large"
 82 |                             color="secondary" />
 83 |                         </IconButton>
 84 |                         <Typography 
 85 |                         variant="h5" 
 86 |                         component="p"
 87 |                         sx={{
 88 |                             fontWeight: 700,
 89 |                             textTransform: 'capitalize',
 90 |                         }}
 91 |                         >
 92 |                         gym
 93 |                         </Typography>
 94 |                     </CardContent>
 95 |                 </Card>
 96 |             </Grid>
 97 | 
 98 |             <Grid item xs={12} sm={6} md={3}>
 99 |                 <Card 
100 |                 square={ true }
101 |                 sx={{ 
102 |                     minHeight: 200,
103 |                     display: 'flex',
104 |                     flexDirection:'column',
105 |                     justifyContent: 'center',
106 |                     alignItems: 'center',
107 |                     textAlign: 'center', 
108 |                     border: '1px solid #ccc'
109 |                 }}>
110 |                     <CardContent>
111 |                         <IconButton>
112 |                             <LocalParkingIcon 
113 |                             fontSize="large"
114 |                             color="secondary" />
115 |                         </IconButton>
116 |                         <Typography 
117 |                         variant="h5" 
118 |                         component="p"
119 |                         sx={{
120 |                             fontWeight: 700,
121 |                             textTransform: 'capitalize',
122 |                         }}
123 |                         >
124 |                         parking
125 |                         </Typography>
126 |                     </CardContent>
127 |                 </Card>
128 |             </Grid>
129 | 
130 |             <Grid item xs={12} sm={6} md={2}
131 |             sx={{
132 |                 display: {xs: 'none', sm: 'block'},
133 |             }}  
134 |             >
135 |                 <Card 
136 |                 square={ true }
137 |                 sx={{ 
138 |                     boxShadow: 'none',
139 |                     minHeight: 180,
140 |                     display: 'flex',
141 |                     flexDirection:'column',
142 |                     justifyContent: 'center',
143 |                     alignItems: 'center',
144 |                     textAlign: 'center',
145 |                 }}>
146 |                     <CardContent>
147 |                         <ArrowCircleRightRoundedIcon
148 |                         fontSize="large"
149 |                         color="secondary" />
150 |                     </CardContent>
151 |                 </Card>
152 |             </Grid>
153 | 
154 |             <Grid item xs={12} sm={6} md={3}>    
155 |                 <Card 
156 |                 square={ true }
157 |                 sx={{ 
158 |                     minHeight: 200,
159 |                     display: 'flex',
160 |                     flexDirection:'column',
161 |                     justifyContent: 'center',
162 |                     alignItems: 'center',
163 |                     textAlign: 'center', 
164 |                     border: '1px solid #ccc'
165 |                 }}>
166 |                     <CardContent>
167 |                         <IconButton>
168 |                             <FastfoodOutlinedIcon
169 |                             fontSize="large"
170 |                             color="secondary" />
171 |                         </IconButton>
172 |                         <Typography 
173 |                         variant="h5" 
174 |                         component="p"
175 |                         sx={{
176 |                             fontWeight: 700,
177 |                             textTransform: 'capitalize',
178 |                         }}
179 |                         >
180 |                         local dining
181 |                         </Typography>
182 |                     </CardContent>
183 |                 </Card>
184 |             </Grid>
185 | 
186 |             <Grid item xs={12} sm={6} md={3}>
187 |                 <Card 
188 |                 square={ true }
189 |                 sx={{ 
190 |                     minHeight: 200,
191 |                     display: 'flex',
192 |                     flexDirection:'column',
193 |                     justifyContent: 'center',
194 |                     alignItems: 'center',
195 |                     textAlign: 'center',                    
196 |                     border: '1px solid #ccc',
197 |                 }}
198 |                 >
199 |                     <CardContent>
200 |                         <IconButton>
201 |                             <PoolOutlinedIcon 
202 |                             fontSize="large"
203 |                             color="secondary" />
204 |                         </IconButton>
205 |                         <Typography 
206 |                         variant="h5" 
207 |                         component="p"
208 |                         sx={{
209 |                             fontWeight: 700,
210 |                             textTransform: 'capitalize',
211 |                         }}
212 |                         >
213 |                         swimming pool
214 |                         </Typography>
215 |                     </CardContent>
216 |                 </Card>
217 |             </Grid>
218 | 
219 |             <Grid item xs={12} sm={6} md={3}>
220 |                 <Card 
221 |                 square={ true }
222 |                 sx={{ 
223 |                     minHeight: 200,
224 |                     display: 'flex',
225 |                     flexDirection:'column',
226 |                     justifyContent: 'center',
227 |                     alignItems: 'center',
228 |                     textAlign: 'center', 
229 |                     border: '1px solid #ccc',
230 |                 }}>
231 |                     <CardContent>
232 |                         <IconButton>
233 |                             <WifiPasswordIcon
234 |                             fontSize="large"
235 |                             color="secondary" />
236 |                         </IconButton>
237 |                         <Typography 
238 |                         variant="h5" 
239 |                         component="p"
240 |                         sx={{
241 |                             fontWeight: 700,
242 |                             textTransform: 'capitalize',
243 |                         }}
244 |                         >
245 |                         Internet
246 |                         </Typography>
247 |                     </CardContent>
248 |                 </Card>
249 |             </Grid> 
250 |         </Grid>
251 |     );
252 | }
253 | 
254 | export default Content


--------------------------------------------------------------------------------
/src/components/Details.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {  
  3 |     Box,
  4 |     Button,
  5 |     Stack,
  6 |     TextField
  7 | } from '@mui/material'
  8 | import Title from './Title'
  9 | import Paragraph from './Paragraph'
 10 | 
 11 | const Details = () => {
 12 | 
 13 |     const handleSubmit = (event) => {
 14 |         event.preventDefault();
 15 |         const data = new FormData(event.currentTarget);
 16 |         console.log({
 17 |             email: data.get('email'),
 18 |             phone: data.get('phone'),
 19 |         });
 20 |     }
 21 | 
 22 | 
 23 |     return (
 24 |         <Stack 
 25 |         component='section'
 26 |         direction="column"
 27 |         justifyContent= 'center'
 28 |         alignItems='center'
 29 |         sx={{
 30 |             py: 10,
 31 |             px: 2,
 32 |         }}
 33 |         >
 34 |             <Title 
 35 |             text={
 36 |                 'Interesting to buy property'
 37 |                 } 
 38 |             textAlign={'center'}
 39 |             />
 40 |             <Paragraph 
 41 |             text={
 42 |                 'If you are interested to buy the property contact us we will call you. \
 43 |                 Shortly to fulfill you requirements and property.'
 44 |             }
 45 |             maxWidth = {'sm'}
 46 |             mx={0}
 47 |             textAlign={'center'}
 48 |             />
 49 | 
 50 |             <Box 
 51 |             component="form" 
 52 |             noValidate 
 53 |             onSubmit={handleSubmit} 
 54 |             sx={{ 
 55 |                 mt: 1,
 56 |                 py: 2
 57 |             }}>
 58 |                 <TextField
 59 |                     margin="normal"
 60 |                     required
 61 |                     fullWidth
 62 |                     id="email"
 63 |                     label="Email Address"
 64 |                     name="email"
 65 |                     autoComplete="email"
 66 |                     autoFocus
 67 |                 />
 68 |                 <TextField
 69 |                     margin="normal"
 70 |                     required
 71 |                     fullWidth
 72 |                     name="phone"
 73 |                     label="Phone Number"
 74 |                     type="phone"
 75 |                     id="phone"
 76 |                     autoComplete="current-phone"
 77 |                 />
 78 |                 <Button 
 79 |                 variant="contained" 
 80 |                 fullWidth
 81 |                 type="submit"
 82 |                 size="medium"
 83 |                 sx= {{ 
 84 |                     fontSize: '0.9rem',
 85 |                     textTransform: 'capitalize', 
 86 |                     py: 2,
 87 |                     mt: 3, 
 88 |                     mb: 2,
 89 |                     borderRadius: 0,
 90 |                     backgroundColor: '#14192d',
 91 |                     "&:hover": {
 92 |                         backgroundColor: '#1e2a5a',
 93 |                     }
 94 |                 }}
 95 |                 >
 96 |                     send
 97 |                 </Button>
 98 |             </Box>
 99 |         </Stack>
100 |     )
101 | }
102 | 
103 | export default Details;


--------------------------------------------------------------------------------
/src/components/DrawerItem.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react'
  2 | import {  
  3 |   styled, 
  4 |   useTheme,
  5 |   Drawer,
  6 |   Divider,
  7 |   List,
  8 |   IconButton,
  9 |   ListItem,
 10 |   ListItemIcon,
 11 |   ListItemText,
 12 | } from '@mui/material'
 13 | // rotas
 14 | import { Link } from 'react-router-dom';
 15 | // icons
 16 | import EmailIcon from '@mui/icons-material/Email';
 17 | import HomeIcon from '@mui/icons-material/Home';
 18 | import InfoIcon from '@mui/icons-material/Info';
 19 | import MenuIcon from '@mui/icons-material/Menu';
 20 | import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 21 | import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 22 | 
 23 | const drawerWidth = 240;
 24 | 
 25 | const DrawerHeader = styled('div')(({ theme }) => ({
 26 |   display: 'flex',
 27 |   alignItems: 'center',
 28 |   padding: theme.spacing(0, 5),
 29 |   ...theme.mixins.toolbar,
 30 |   justifyContent: 'flex-start',
 31 | }));
 32 | 
 33 | //rotas
 34 | const itemList = [
 35 |   {
 36 |     text: "Home",
 37 |     icon: <HomeIcon />,
 38 |     to: "/"
 39 |   },
 40 |   {
 41 |     text: "About",
 42 |     icon: <InfoIcon />,
 43 |     to: "/about"
 44 |   },
 45 |   {
 46 |     text: "Contact",
 47 |     icon: <EmailIcon />,
 48 |     to: "/contact"
 49 |   }
 50 | ];
 51 | 
 52 | 
 53 | const DrawerItem = () => {
 54 | 
 55 |   const theme = useTheme();
 56 |   const [open, setOpen] = useState(false);
 57 |   const handleDrawerOpen = () => {
 58 |     setOpen(true);
 59 |   };
 60 | 
 61 |   const handleDrawerClose = () => {
 62 |     setOpen(false);
 63 |   };
 64 | 
 65 |   return (
 66 |     <>
 67 |       <IconButton
 68 |       color="inherit"
 69 |       aria-label="open drawer"
 70 |       edge="end"
 71 |       onClick={handleDrawerOpen}
 72 |       sx={{ ...(open && { display: 'none' }) }}
 73 |       >
 74 |         <MenuIcon />
 75 |       </IconButton>
 76 | 
 77 |       <Drawer
 78 |       sx={{
 79 |           flexGrow: 1,
 80 |           flexShrink: 0,
 81 |           '& .MuiDrawer-paper': {
 82 |           width: drawerWidth,
 83 |           },
 84 |       }}
 85 |       variant="persistent"
 86 |       anchor="right"
 87 |       open={open}
 88 |       >
 89 |         <DrawerHeader>
 90 |           <IconButton onClick={handleDrawerClose}>
 91 |             {theme.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
 92 |           </IconButton>
 93 |         </DrawerHeader>
 94 |         <Divider />
 95 |         <List>
 96 |           {itemList.map( ( item ) => {
 97 |             const { text } = item;
 98 |             return(
 99 |               <ListItem 
100 |               key={text} 
101 |               component={Link} 
102 |               to={item.to}
103 |               sx={{
104 |                 color: '#414141',
105 |                 "&:hover": {
106 |                   backgroundColor: '#e9e5e5',
107 |                   color: '#1c2859',
108 |                 }
109 |               }}
110 |               >
111 |                 <ListItemIcon
112 |                 sx={{
113 |                   "&:hover":{
114 |                     backgroundColor: 'transparent',
115 |                     color: '#1c2859',
116 |                   }
117 |                 }}
118 |                 >
119 |                   {item.icon}
120 |                 </ListItemIcon>
121 |                 <ListItemText primary={text} />
122 |               </ListItem>
123 |             )
124 |           })}
125 |         </List>
126 |       </Drawer>
127 |     </>
128 |   )
129 | }
130 | 
131 | export default DrawerItem;


--------------------------------------------------------------------------------
/src/components/Footer/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { 
  3 |   Box, 
  4 |   Stack, 
  5 |   styled, 
  6 |   Typography,
  7 | } from '@mui/material'
  8 | import Link from '@mui/material/Link';
  9 | import FooterTitle from './FooterTitle'
 10 | import FooterLink from './FooterLink'
 11 | import FacebookIcon from '@mui/icons-material/Facebook';
 12 | import InstagramIcon from '@mui/icons-material/Instagram';
 13 | 
 14 | const Footer = () => {
 15 | 
 16 |   const StackColumn = styled(Stack) (() => ({
 17 |     flexDirection: 'column',
 18 |     justifyContent: 'flex-start',
 19 |     alignItems: 'center',
 20 |     flex: 1,
 21 |     gap: 8,
 22 |     textAlign: 'center',
 23 |   }));
 24 | 
 25 |   const BoxRow = styled(Box) (({ theme }) => ({
 26 |     display: 'flex',
 27 |     flexDirection: 'row',
 28 |     backgroundColor: '#ededed',
 29 |     flex: 1,
 30 |     [theme.breakpoints.down('sm')]: {
 31 |       flexDirection: 'column',
 32 |       gap: 30,
 33 |     }
 34 |   }));
 35 | 
 36 |   return (
 37 |     
 38 |     <BoxRow 
 39 |     component = 'footer'
 40 |     sx={{
 41 |       py: 4,
 42 |       px: 2,
 43 |     }}
 44 |     >
 45 |       <StackColumn>
 46 |         <FooterTitle text={'address'} />
 47 |         <FooterLink 
 48 |         text={'15th Louis St, london 92382, eng'} 
 49 |         />
 50 |         <FooterLink 
 51 |         text={'25 999-345-10800'} 
 52 |         />
 53 |         <FooterLink 
 54 |         text={'info@housesales.com'} 
 55 |         />
 56 |       </StackColumn>
 57 |       
 58 |       <StackColumn>
 59 |         <FooterTitle text={'our services'} />
 60 |         <FooterLink text={'buy house'} />
 61 |         <FooterLink text={'sell house'} />
 62 |         <FooterLink text={'rent house'} />
 63 |         <FooterLink text={'build house'} />
 64 |       </StackColumn>
 65 |       <StackColumn>
 66 |         <FooterTitle text={'our company'} />
 67 |         <FooterLink text={'reporting'} />
 68 |         <FooterLink text={'get in touch'} />
 69 |         <FooterLink text={'management'} />
 70 |       </StackColumn>
 71 | 
 72 |       <StackColumn>
 73 |         <FooterTitle text={'hBSales'} />
 74 |         <Stack 
 75 |         direction='row' 
 76 |         width= '70px'
 77 |         maxWidth='100%'
 78 |         justifyContent='space-between'
 79 |         >
 80 |           <Link href="#" variant="body2" 
 81 |           sx={{
 82 |             color: '#414141',
 83 |             "&:hover": {
 84 |               color: '#1c2859',
 85 |             }
 86 |           }}
 87 |           >
 88 |             <InstagramIcon />  
 89 |           </Link> 
 90 |           <Link href="#"variant="body2" 
 91 |           sx={{
 92 |             color: '#414141',
 93 |             "&:hover": {
 94 |               color: '#1c2859',
 95 |             }
 96 |           }}
 97 |           >
 98 |             <FacebookIcon />
 99 |           </Link> 
100 |         </Stack>
101 |         <Typography 
102 |         variant='caption'
103 |         component='p' 
104 |         >
105 |           &copy; 2022 HBSales Inc.
106 |         </Typography>
107 |       </StackColumn>
108 |     </BoxRow>
109 |   )
110 | }
111 | 
112 | export default Footer


--------------------------------------------------------------------------------
/src/components/Footer/FooterLink.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from '@mui/material'
 2 | import React from 'react'
 3 | 
 4 | const FooterLink = ({ text }) => {
 5 |   return (
 6 |     <Link 
 7 |     href="#"
 8 |     variant='p'
 9 |     component='a'
10 |     sx={{
11 |       fontSize: '0.9rem',
12 |       fontWeight: '400',
13 |       textDecoration: 'none',
14 |       color: '#414141',
15 |       textTransform: 'capitalize',
16 |       "&:hover": {
17 |         color: '#1c2859',
18 |       }
19 |     }}
20 |     >
21 |       {text}
22 |     </Link>
23 |   )
24 | }
25 | 
26 | export default FooterLink


--------------------------------------------------------------------------------
/src/components/Footer/FooterTitle.jsx:
--------------------------------------------------------------------------------
 1 | import { Typography } from '@mui/material'
 2 | import React from 'react'
 3 | 
 4 | const FooterTitle = ({ text }) => {
 5 |   return (
 6 |     <Typography
 7 |     variant='h6'
 8 |     component='h6'
 9 |     sx={{
10 |       fontWeight: '700',
11 |       textTransform: 'capitalize',
12 |       pb: 1,
13 |     }}
14 |     >
15 |       { text }
16 |     </Typography>
17 |   )
18 | }
19 | 
20 | export default FooterTitle


--------------------------------------------------------------------------------
/src/components/Gallery.jsx:
--------------------------------------------------------------------------------
  1 | import React,{ useState } from 'react'
  2 | // mui
  3 | import { 
  4 |     Typography,
  5 |     Box,
  6 |     Stack,
  7 | } from "@mui/material";
  8 | // carousel
  9 | import "react-responsive-carousel/lib/styles/carousel.min.css";
 10 | import { Carousel } from "react-responsive-carousel";
 11 | // components
 12 | import Title from './Title'
 13 | import Paragraph from './Paragraph'
 14 | 
 15 | 
 16 | const Gallery = () => {
 17 |     
 18 |     const [currentIndex, setCurrentIndex] = useState();
 19 | 
 20 |     const imageData = [
 21 |         {
 22 |             alt: 'image1',
 23 |             url: 'https://images.pexels.com/photos/259751/pexels-photo-259751.jpeg?cs=srgb&dl=pexels-pixabay-259751.jpg&fm=jpg'
 24 |         },
 25 |         {
 26 |             alt: 'image2',
 27 |             url: 'https://images.pexels.com/photos/5411784/pexels-photo-5411784.jpeg?cs=srgb&dl=pexels-andrea-davis-5411784.jpg&fm=jpg'
 28 |         },
 29 |         {
 30 |             alt: "image3",
 31 |             url: 'https://images.pexels.com/photos/356809/pexels-photo-356809.jpeg?cs=srgb&dl=pexels-daniel-frank-356809.jpg&fm=jpg'
 32 |         },
 33 |         {
 34 |             alt: "image4",
 35 |             url: 'https://images.pexels.com/photos/6267516/pexels-photo-6267516.jpeg?cs=srgb&dl=pexels-get-lost-mike-6267516.jpg&fm=jpg'
 36 |         },
 37 |         {
 38 |             alt: "image5",
 39 |             url: 'https://images.pexels.com/photos/667838/pexels-photo-667838.jpeg?cs=srgb&dl=pexels-huseyn-kamaladdin-667838.jpg&fm=jpg'
 40 |         },
 41 |     ];
 42 |   
 43 |     const renderSlides = imageData.map((image) => (
 44 |     <div key={image.alt}>
 45 |         <img src={image.url} alt={image.alt} />
 46 |     </div>
 47 |     ));
 48 | 
 49 | 
 50 |     const handleChange = (index) => {
 51 |         setCurrentIndex(index);
 52 |     }
 53 | 
 54 |     return (
 55 |         <Stack
 56 |         direction='column'
 57 |         justifyContent= 'center'
 58 |         alignItems= 'center'
 59 |         sx={{
 60 |             py: 8,
 61 |             px: 2,
 62 |             display: { xs: 'flex'},
 63 |         }}
 64 |         >
 65 |             <Box
 66 |             component='section'
 67 |             sx={{
 68 |                 paddingBottom: 3,
 69 |             }}
 70 |             >
 71 |                 <Title 
 72 |                 text={
 73 |                     'Plans and dimension'
 74 |                 }
 75 |                 textAlign={'center'}
 76 |                 />
 77 |                 <Typography
 78 |                 variant='h5'
 79 |                 component='h4'
 80 |                 align='center'
 81 |                 sx={{
 82 |                     paddingTop: 1,
 83 |                 }}
 84 |                 >
 85 |                     Rooms Gallery
 86 |                 </Typography>
 87 |                 <Paragraph text={
 88 |                     'We have more 5000 reviews and our\
 89 |                     customers trust on our quality product\
 90 |                     and trust own our product. If you interested,\
 91 |                     contact us.'
 92 |                 } 
 93 |                 maxWidth = {'sm'}
 94 |                 mx={'auto'}
 95 |                 textAlign={'center'}
 96 |                 />
 97 |             </Box>
 98 |             
 99 |             <Box sx={{ 
100 |                 maxWidth: 700,
101 |                 width: '100%',
102 |             }}>
103 |                 <Carousel
104 |                 centerSlidePercentage={40}
105 |                 thumbWidth={180}
106 |                 dynamicHeight={false}
107 |                 centerMode={false}
108 |                 showArrows={false}
109 |                 autoPlay={false}
110 |                 infiniteLoop={true}
111 |                 selectedItem={imageData[currentIndex]}
112 |                 onChange={handleChange}
113 |                 className="carousel-container"
114 |                 >
115 |                 {renderSlides}
116 |                 </Carousel>
117 |             </Box>
118 |         </Stack>
119 |     )
120 | }
121 | 
122 | export default Gallery


--------------------------------------------------------------------------------
/src/components/GetInTouch.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {  
 3 |     Button,
 4 |     Stack,
 5 | } from '@mui/material'
 6 | import Title from './Title'
 7 | import Paragraph from './Paragraph'
 8 | import { Link } from 'react-router-dom'
 9 | 
10 | const GetInTouch = () => {
11 | 
12 |     return (
13 |         <Stack 
14 |         component='section'
15 |         direction="column"
16 |         justifyContent= 'center'
17 |         alignItems='center'
18 |         sx={{
19 |             py: 10,
20 |             mx: 6,
21 |         }}
22 |         >
23 |             <Title 
24 |             text={
25 |                 'Contact us to buy property'
26 |                 } 
27 |             textAlign={'center'}
28 |             />
29 |             <Paragraph 
30 |             text={
31 |                 'It is our commitment to ensure a professional and enjoyable \
32 |                 new home buying experience for you. \
33 |                 If you want to get a home to start living as a family in an \
34 |                 area that you love click the button below.'
35 |             }
36 |             maxWidth = {'sm'}
37 |             mx={0}
38 |             textAlign={'center'}
39 |             />
40 |             <Button component={Link} 
41 |             to={'/contact'}
42 |             variant="contained" 
43 |             type="submit"
44 |             size="medium"
45 |             sx= {{ 
46 |                 fontSize: '0.9rem',
47 |                 textTransform: 'capitalize', 
48 |                 py: 2,
49 |                 px: 4,
50 |                 mt: 3, 
51 |                 mb: 2,
52 |                 borderRadius: 0,
53 |                 backgroundColor: '#14192d',
54 |                 "&:hover": {
55 |                     backgroundColor: '#1e2a5a',
56 |                 }
57 |             }}
58 |             >
59 |                 get in touch
60 |             </Button>
61 |  
62 |         </Stack>
63 |     )
64 | }
65 | 
66 | export default GetInTouch;


--------------------------------------------------------------------------------
/src/components/GetStarted.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { 
  3 |     Box,
  4 |     Grid,
  5 |     styled,
  6 |     Typography,
  7 | } from '@mui/material'
  8 | import Title from './Title'
  9 | // img
 10 | import imgDetail from '../assets/pexels-alex-staudinger-1732414.jpg';
 11 | import imgDetail2 from '../assets/pexels-pixabay-271816.jpg';
 12 | 
 13 | 
 14 | const GetStarted = () => {
 15 | 
 16 |     const CustomGridItem = styled(Grid) ({
 17 |         display: 'flex',
 18 |         flexDirection: 'column',
 19 |         justifyContent: 'center',
 20 |     })
 21 |     
 22 |     const CustomTypography = styled(Typography) ({
 23 |         fontSize: '1.1rem',
 24 |         textAlign: 'start',
 25 |         lineHeight: '1.5',
 26 |         color: '#515151',
 27 |         marginTop: '1.5rem',
 28 |     })
 29 | 
 30 |     return (
 31 |             
 32 |         <Grid container spacing={{ xs: 4, sm: 4, md: 0 }}   
 33 |         sx={{
 34 |             py: 10,
 35 |             px: 2,
 36 |              
 37 |         }}
 38 |         >
 39 |             <CustomGridItem item xs={12} sm={8} md={6} 
 40 |             component = 'section'
 41 |            
 42 |             >
 43 |                 <Box component='article'
 44 |                 sx={{
 45 |                     px: 4,
 46 |                 }}
 47 |                 >
 48 |                     <Title
 49 |                     text={
 50 |                         'We make it easy for tenants and landlords'
 51 |                     }
 52 |                     textAlign={'start'}
 53 |                     />
 54 |                     <CustomTypography>
 55 |                         Listing are updated continuously so you<br />
 56 |                         won't miss out on homes that just hit<br />
 57 |                         market until you find your perfect home.
 58 |                     </CustomTypography> 
 59 |                 </Box>
 60 | 
 61 |             </CustomGridItem>
 62 |             
 63 |             <Grid item xs={12} sm={4} md={6}>
 64 |                 <img src={imgDetail} alt="" 
 65 |                 style={{
 66 |                     width: '100%',
 67 |                 }}
 68 |                 />
 69 |             </Grid>
 70 | 
 71 |             <Grid item xs={12} sm={4} md={6}
 72 |             sx={{
 73 |                 order: {xs: 4, sm: 4, md: 3}
 74 |             }}
 75 |             >
 76 |                 <img src={imgDetail2} alt="" 
 77 |                 style={{ 
 78 |                     width: "100%",
 79 |                 }}
 80 |                 />
 81 |             </Grid>
 82 | 
 83 |             <CustomGridItem item xs={12} sm={8} md={6}
 84 |             sx={{
 85 |                 order: {xs: 3, sm: 3, md: 4}
 86 |             }}
 87 |             >
 88 |                 <Box component='article'
 89 |                 sx={{
 90 |                     px: 4,
 91 |                 }}
 92 |                 >
 93 |                     <Title
 94 |                     text={
 95 |                         'Match with the best agent'
 96 |                         
 97 |                     }
 98 |                     textAlign={'start'}
 99 |                     />
100 |                     <CustomTypography>
101 |                         Our verified partner Agents are local experts who<br /> 
102 |                         earn an average of 4.8/5 stars from buyers and sellers.
103 |                     </CustomTypography>
104 |                 </Box>
105 |             </CustomGridItem>
106 |         </Grid>
107 |     )
108 | }
109 | 
110 | export default GetStarted;


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Box, Button, styled, Typography } from "@mui/material";
  3 | import { Link } from 'react-router-dom'
  4 | //img
  5 | import headerImg from '../assets/pexels-binyamin-mellish-186078.png'
  6 | 
  7 | const Header = () => {
  8 | 
  9 |     const CustomBox = styled(Box) (({ theme }) => ({
 10 |         minHeight: '80vh',
 11 |         display: 'flex',
 12 |         justifyContent: 'center',
 13 |         // tamanhos
 14 |         gap: theme.spacing(2),
 15 |         paddingTop: theme.spacing(10),
 16 |         // cor de fundo
 17 |         backgroundColor: 'orange',
 18 |         [theme.breakpoints.down('md')]: {
 19 |             flexDirection: 'column',
 20 |             alignItems: 'center',
 21 |             textAlign: 'center',
 22 |         }
 23 |     }));
 24 | 
 25 |     const BoxText = styled(Box) (({ theme }) => ({
 26 |         flex: '1',
 27 |         paddingLeft: theme.spacing(8),
 28 |         [theme.breakpoints.down('md')]: {
 29 |             flex: '2',
 30 |             textAlign: 'center',
 31 |             paddingLeft: theme.spacing(2),
 32 |             paddingRight: theme.spacing(2),
 33 |         },
 34 |     }));
 35 | 
 36 | 
 37 |   return  (
 38 |         <CustomBox component='header'>
 39 |             {/*  Box text  */}
 40 |             <BoxText 
 41 |             component='section'
 42 |             >
 43 |                 <Typography
 44 |                 variant='h2'
 45 |                 component= 'h1'
 46 |                 sx={{
 47 |                     fontWeight: 700,
 48 |                     color: '#fff',
 49 |                 }}
 50 |                 >
 51 |                     We'll build house of your dream
 52 |                 </Typography>
 53 | 
 54 |                 <Typography
 55 |                 variant='p'
 56 |                 component='p'
 57 |                 sx={{
 58 |                     py: 3,
 59 |                     lineHeight: 1.6,
 60 |                     color: '#fff',
 61 |                 }}
 62 |                 >
 63 |                     We have 9000 more review and our customers
 64 |                     trust on out property and quality products.
 65 |                 </Typography>
 66 | 
 67 |                 <Box>
 68 |                     <Button 
 69 |                     variant='contained'
 70 |                     sx={{
 71 |                         mr: 2,
 72 |                         px: 4, 
 73 |                         py: 1,
 74 |                         fontSize: '0.9rem',
 75 |                         textTransform: 'capitalize',
 76 |                         borderRadius: 0,
 77 |                         borderColor: '#14192d',
 78 |                         color: '#fff',
 79 |                         backgroundColor: '#14192d',
 80 |                         "&&:hover": {
 81 |                             backgroundColor: "#343a55"
 82 |                         },
 83 |                         "&&:focus": {
 84 |                             backgroundColor: "#343a55"
 85 |                         }
 86 |                     }}
 87 |                     >
 88 |                         buy now
 89 |                     </Button>
 90 |                     <Button 
 91 |                     component={Link} 
 92 |                     to={'/about'}
 93 |                     variant='outlined'
 94 |                     sx={{
 95 |                         px: 4, 
 96 |                         py: 1,
 97 |                         fontSize:'0.9rem',
 98 |                         textTransform: 'capitalize',
 99 |                         borderRadius: 0,
100 |                         color: '#fff',
101 |                         backgroundColor: 'transparent',
102 |                         borderColor: '#fff',
103 |                         "&&:hover": {
104 |                             color: '#343a55',
105 |                             borderColor: '#343a55',
106 |                         },
107 |                         "&&:focus": {
108 |                             color: '#343a55',
109 |                             borderColor: '#343a55',
110 |                         }
111 |                     }}
112 |                     >
113 |                         explore
114 |                     </Button>
115 |                 </Box>
116 |             </BoxText>
117 | 
118 |             <Box sx={theme => ({
119 |                 [theme.breakpoints.down('md')]:{
120 |                     flex: '1',
121 |                     paddingTop: '30px',
122 |                     alignSelf: 'center',
123 |                 },
124 |                 [theme.breakpoints.up('md')]:{
125 |                     flex: '2',
126 |                     alignSelf: 'flex-end',
127 |                 },
128 |             })}
129 |             >
130 |                 <img
131 |                 src={headerImg}
132 |                 alt="headerImg"
133 |                 style={{ 
134 |                     width: "100%", 
135 |                     marginBottom: -15,
136 |                 }}
137 |                 />
138 |             </Box>
139 | 
140 |         </CustomBox>
141 |     )
142 | }
143 | 
144 | export default Header


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {
 3 |     AppBar,
 4 |     Toolbar,
 5 |     Box,
 6 |     List,
 7 |     ListItem,
 8 |     Typography, 
 9 |     styled,
10 |     ListItemButton,
11 |     ListItemText,
12 | } from '@mui/material';
13 | // menu
14 | import DrawerItem from './DrawerItem';
15 | // rotas
16 | import { Link } from 'react-router-dom';
17 | 
18 | 
19 | // personalizacao
20 | const StyledToolbar = styled(Toolbar) ({
21 |     display: 'flex',
22 |     justifyContent: 'space-between',
23 | });
24 | 
25 | const ListMenu = styled(List)(({ theme }) => ({
26 |     display: 'none',
27 |     [theme.breakpoints.up("sm")] : {
28 |         display: "flex",
29 |     },
30 | }));
31 | 
32 | //rotas
33 | const itemList = [
34 |     {
35 |       text: "Home",
36 |       to: "/" 
37 |     },
38 |     {
39 |       text: "About",
40 |       to: "/about"
41 |     },
42 |     {
43 |         text: "Contact",
44 |         to: "/contact"
45 |     }
46 | ];
47 | 
48 | 
49 | const Navbar = () => {
50 |     
51 |     return (
52 |         <AppBar 
53 |         component="nav" 
54 |         position="sticky"
55 |         sx={{ 
56 |             backgroundColor: 'orange', 
57 |         }}
58 |         elevation={0}
59 |         >
60 |             <StyledToolbar>
61 |                 <Typography
62 |                 variant="h6"
63 |                 component="h2"
64 | 
65 |                 >
66 |                     HBSales
67 |                 </Typography>
68 |                 <Box sx={{display: { xs: 'block', sm: 'none' } }}>
69 |                     <DrawerItem /> 
70 |                 </Box>
71 |                 <ListMenu>
72 |                     {itemList.map( ( item ) => {
73 |                         const { text } = item;
74 |                         return(
75 |                             <ListItem key={text}>
76 |                                 <ListItemButton component={Link} to={item.to}
77 |                                 sx={{
78 |                                     color: '#fff',
79 |                                     "&:hover": {
80 |                                         backgroundColor: 'transparent',
81 |                                         color: '#1e2a5a',
82 |                                     }
83 |                                 }}
84 |                                 >
85 |                                     <ListItemText primary={text} />
86 |                                 </ListItemButton>
87 |                             </ListItem>
88 |                         )
89 |                     })}
90 |                 </ListMenu>
91 |             </StyledToolbar>
92 |         </AppBar>
93 |     )
94 | }
95 | 
96 | export default Navbar;
97 | 


--------------------------------------------------------------------------------
/src/components/Paragraph.jsx:
--------------------------------------------------------------------------------
 1 | import { Typography } from '@mui/material'
 2 | import React from 'react'
 3 | 
 4 | const Paragraph = ({ text, maxWidth, mx, textAlign }) => {
 5 |   return (
 6 |     <Typography
 7 |     sx={{
 8 |       maxWidth: maxWidth,
 9 |       mx: mx,
10 |       textAlign: textAlign,
11 |       py: 3,
12 |       color: '#7b7b7b',
13 |     }}
14 |     >
15 |         {text}
16 |     </Typography>
17 |   )
18 | }
19 | 
20 | export default Paragraph


--------------------------------------------------------------------------------
/src/components/Title.jsx:
--------------------------------------------------------------------------------
 1 | import { Typography } from '@mui/material'
 2 | import React from 'react'
 3 | 
 4 | const Title = ({ text, textAlign }) => {
 5 |   return (
 6 |     <Typography 
 7 |     variant='h4'
 8 |     component='h3'
 9 |     sx={{ 
10 |       fontWeight: '700',
11 |       textAlign: textAlign,
12 |    }}
13 |     >
14 |       {text}
15 |     </Typography>
16 |   )
17 | }
18 | 
19 | export default Title


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App';
 4 | 
 5 | const root = ReactDOM.createRoot(document.getElementById('root'));
 6 | root.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>
10 | );


--------------------------------------------------------------------------------
/src/pages/About.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Content from '../components/Content';
 3 | import Gallery from '../components/Gallery';
 4 | 
 5 | const About = () => {
 6 |   return (
 7 |     <>
 8 |     <Content />
 9 |     <Gallery />
10 |     </>
11 |   )
12 | }
13 | 
14 | export default About


--------------------------------------------------------------------------------
/src/pages/Contact.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Details from '../components/Details';
 3 | 
 4 | const Contact = () => {
 5 |   return (
 6 |     <Details />
 7 |   )
 8 | }
 9 | 
10 | export default Contact


--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import GetInTouch from '../components/GetInTouch';
 3 | import GetStarted from '../components/GetStarted';
 4 | import Header from '../components/Header';
 5 | 
 6 | const Home = () => {
 7 |   return (
 8 |     <>
 9 |     <Header />
10 |     <GetStarted />
11 |     <GetInTouch />
12 |     </>
13 | 
14 |   )
15 | }
16 | 
17 | export default Home


--------------------------------------------------------------------------------