├── src
    ├── App.css
    ├── Home
    │   ├── Home.css
    │   └── Home.js
    ├── Home.css
    ├── images
    │   └── screenshot.png
    ├── Footer.css
    ├── setupTests.js
    ├── App.test.js
    ├── Footer.js
    ├── Card.js
    ├── reportWebVitals.js
    ├── index.css
    ├── SearchPage.css
    ├── index.js
    ├── App.js
    ├── Card.css
    ├── Header.css
    ├── Header.js
    ├── Search.css
    ├── Banner.js
    ├── SearchResult.js
    ├── SearchResult.css
    ├── Banner.css
    ├── Search.js
    ├── Home.js
    ├── logo.svg
    └── SearchPage.js
├── .firebaserc
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── firebase.json
├── .gitignore
├── README.md
├── package.json
└── .firebase
    └── hosting.YnVpbGQ.cache


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/Home/Home.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/Home.css:
--------------------------------------------------------------------------------
1 | .home__section {
2 |     display: flex;
3 |     padding: 30px;
4 | }


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "airbnb-clone-ozngrsc"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozngrsc/Airbnb-Clone/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozngrsc/Airbnb-Clone/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozngrsc/Airbnb-Clone/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozngrsc/Airbnb-Clone/HEAD/src/images/screenshot.png


--------------------------------------------------------------------------------
/src/Footer.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |     border-top: 1px solid lightgray;
 3 |     padding: 20px;
 4 |     background-color: #f7f7f7;
 5 |     text-align: center;
 6 | }
 7 | 
 8 | .footer > p {
 9 |     padding: 5px;
10 |     font-size: 14px;
11 | }


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/Home/Home.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Home.css";
 3 | 
 4 | // ES7 snippets to do 'rfce'
 5 | 
 6 | function Home() {
 7 |   return (
 8 |     <div classname="home">
 9 |       <h1>Home component</h1>
10 |     </div>
11 |   );
12 | }
13 | 
14 | export default Home;
15 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "build",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*",
 7 |       "**/node_modules/**"
 8 |     ],
 9 |     "rewrites": [
10 |       {
11 |         "source": "**",
12 |         "destination": "/index.html"
13 |       }
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Footer.css";
 3 | 
 4 | function Footer() {
 5 |   return (
 6 |     <div className="footer">
 7 |       <p>© 2022 Airbnb clone by Ozngrsc</p>
 8 |       <p>Privacy · Terms · Sitemap · Company Details</p>
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default Footer;
14 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/Card.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Card.css";
 3 | 
 4 | function Card({ src, title, description, price }) {
 5 |   return (
 6 |     <div className="card">
 7 |       <img src={src} alt="" />
 8 |       <div className="card__info">
 9 |         <h2>{title}</h2>
10 |         <h4>{description}</h4>
11 |         <h3>{price}</h3>
12 |       </div>
13 |     </div>
14 |   );
15 | }
16 | 
17 | export default Card;
18 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 8 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 9 |     sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 | }
13 | 
14 | code {
15 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
16 |     monospace;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/SearchPage.css:
--------------------------------------------------------------------------------
 1 | .searchPage__info {
 2 |     padding: 20px;
 3 | }
 4 | 
 5 | .searchPage__info > p {
 6 |     margin-bottom: 10px;
 7 |     font-size: 14px;
 8 | }
 9 | 
10 | .searchPage__info > h1 {
11 |     margin-bottom: 30px;
12 | }
13 | 
14 | .searchPage__info > button {
15 |     border-radius: 30px;
16 |     text-transform: inherit;
17 |     margin: 5px;
18 |     border-color: gainsboro;
19 |     color: black;
20 | }
21 | 
22 | .searchPage__info > button:hover {
23 |     border-color: grey;
24 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./App.css";
 3 | import Footer from "./Footer";
 4 | import Header from "./Header";
 5 | import Home from "./Home";
 6 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 7 | import SearchPage from "./SearchPage";
 8 | 
 9 | function App() {
10 |   return (
11 |     <div className="app">
12 |       <Router>
13 |         <Header />
14 | 
15 |         <Routes>
16 |           <Route path="/search" element={<SearchPage />} />
17 |           <Route path="/" element={<Home />} />
18 |         </Routes>
19 | 
20 |         <Footer />
21 |       </Router>
22 |     </div>
23 |   );
24 | }
25 | 
26 | export default App;
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Airbnb-Clone
 2 | 
 3 | Get out and stretch your imagination!
 4 | 
 5 | Click demo to try it by yourself!
 6 | 
 7 | You can select a date by clicking Search Dates. You can also specify the number of people. In addition, you can open the "Search Page" by clicking the "Explore Nearby" and "Search Airbnb" buttons.
 8 | 
 9 | ## Airbnb-Clone Demo Link
10 | 
11 | You can view the site here
12 | [Click Me](https://airbnb-clone-ozngrsc.web.app/)
13 | 
14 | ## Topics
15 | 
16 | - ReactJS
17 | - JavaScript
18 | - React Router
19 | - React Icons
20 | - React Date Picker
21 | - Material UI
22 | - Flexbox
23 | - Responsive Design (for PC and Tablet)
24 | - Deploy the App Live on Firebase
25 | 
26 | 
27 | 
28 | ## Author
29 | 
30 | Ozan Gürsucu (ozngrsc)
31 | 
32 | <img src="src/images/screenshot.png"  width= 500px height= 400px>
33 | 
34 | 


--------------------------------------------------------------------------------
/src/Card.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |     margin: 10px;
 3 |     border: 0px solid black;
 4 |     border-radius: 10px;
 5 |     overflow: hidden;
 6 |     box-shadow: 0px 6px 18px -9px rgba(0, 0, 0, 0.75);
 7 |     transition: transform 100ms ease-in;
 8 |     cursor: pointer;
 9 | }
10 | 
11 | .card:hover {
12 |     transform: scale(1.07);
13 | }
14 | 
15 | .card > img {
16 |     object-fit: fill;
17 |     min-width: 300px;
18 |     min-height: 200px;
19 |     width: 100%;
20 | }
21 | 
22 | .card__info {
23 |     margin-top: -9px;
24 |     border-radius: 10px;
25 |     padding: 20px;
26 |     padding-top: 20px;
27 |     border: 1;
28 | }
29 | 
30 | .card__info > h2 {
31 |     font-size: 18px;
32 |     font-weight: 600;
33 | }
34 | 
35 | .card__info > h4 {
36 |     font-size: 14px;
37 |     font-weight: 300;
38 |     margin-top: 8px;
39 |     margin-bottom: 8px;
40 | }


--------------------------------------------------------------------------------
/src/Header.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |     display: flex;   
 3 |     justify-content: space-between;
 4 |     align-items: center;
 5 |     position: sticky;
 6 |     top: 0;
 7 |     background-color: white;
 8 |     z-index: 100;
 9 |     width: 100%;
10 |     margin-top: 30px;
11 |     margin-bottom: 30px;
12 | }
13 | 
14 | .header__icon {
15 |     object-fit: contain;
16 |     height: 100px;
17 |     margin-left: 20px;
18 |     padding: 10px;
19 |     height: 30px;
20 | }
21 | 
22 | .header__center {
23 |     display: flex;
24 |     flex: 1;
25 |     align-items: center;
26 |     max-width: fit-content;
27 |     padding: 10px;
28 |     height: 30px;
29 |     border: 1px solid lightgray;
30 |     border-radius: 999px;
31 | }
32 | 
33 | .header__center > input {
34 |     border: none;
35 |     padding: 10px;
36 |     outline-width: 0;
37 |     /* width: 250px; */
38 | }
39 | 
40 | .header__right {
41 |     display: flex;
42 |     align-items: center;
43 |     justify-content: space-between;
44 |     width: 15vw;
45 |     margin-right: 80px;
46 | }


--------------------------------------------------------------------------------
/src/Header.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Header.css";
 3 | import SearchIcon from "@mui/icons-material/Search";
 4 | import LanguageIcon from "@mui/icons-material/Language";
 5 | import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 6 | import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 7 | import { Link } from "react-router-dom";
 8 | 
 9 | function Header() {
10 |   return (
11 |     <div className="header">
12 |       <Link to="/">
13 |         <img
14 |           className="header__icon"
15 |           src="https://1000logos.net/wp-content/uploads/2017/08/Airbnb-Logo.png"
16 |           alt=""
17 |         />
18 |       </Link>
19 |       <div className="header__center">
20 |         <input type="text" />
21 |         <SearchIcon />
22 |       </div>
23 | 
24 |       <div className="header__right">
25 |         <p>Become a host</p>
26 |         <LanguageIcon />
27 |         <ExpandMoreIcon />
28 |         <AccountCircleIcon />
29 |       </div>
30 |     </div>
31 |   );
32 | }
33 | 
34 | export default Header;
35 | 


--------------------------------------------------------------------------------
/src/Search.css:
--------------------------------------------------------------------------------
 1 | .search {
 2 |     position: absolute;
 3 |     top: 35px;
 4 |     left: 25%;
 5 |     width: 100vw;
 6 | }
 7 | 
 8 | .search > h2 {
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: space-between;
12 |     width: 559px;
13 |     padding: 10px;
14 |     background-color: white;
15 |     position: absolute;
16 |     left: 0;
17 |     top: 380px;
18 | }
19 | 
20 | .search > input {
21 |     width: 539px;
22 |     padding: 20px;
23 |     position: absolute;
24 |     left: 0;
25 |     height: 30px;
26 |     top: 420px;
27 |     border: none;
28 |     margin-top: 2px;
29 |    
30 | }
31 | 
32 | .search > input:focus {
33 |     outline-width: 0;
34 | }
35 | 
36 | .searchAirbnb__button {
37 |     position: absolute !important;
38 |     left: 0 !important;
39 |     top: 490px !important;
40 |     text-transform: inherit !important;
41 |     background-color: #ff7779 !important;
42 |     color: white !important;
43 |     width: 579px !important;
44 | }
45 | 
46 | .searchAirbnb__button:hover {
47 |     background-color: white !important;
48 |     color: #ff7779 !important;
49 | }


--------------------------------------------------------------------------------
/src/Banner.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import "./Banner.css";
 3 | import { Button } from "@mui/material";
 4 | import Search from "./Search";
 5 | import { Link } from "react-router-dom";
 6 | 
 7 | function Banner() {
 8 |   const [showSearch, setShowSearch] = useState(false);
 9 | 
10 |   return (
11 |     <div className="banner">
12 |       <div className="banner__search">
13 |         {showSearch && <Search />}
14 |         <Button
15 |           onClick={() => setShowSearch(!showSearch)}
16 |           className="banner__searchButton"
17 |           variant="outlined"
18 |         >
19 |           {showSearch ? "Hide" : "Search Dates"}
20 |         </Button>
21 |       </div>
22 |       <div className="banner__info">
23 |         <h1>Get out and stretch your imagination</h1>
24 |         <h5>
25 |           Plan a different kind of getaway to uncover the hidden gems near you.
26 |         </h5>
27 |         <Link className="nearby__link" to="/search">
28 |           <Button className="banner__nearbyButton" variant="outlined">
29 |             Explore Nearby
30 |           </Button>
31 |         </Link>
32 |       </div>
33 |     </div>
34 |   );
35 | }
36 | 
37 | export default Banner;
38 | 


--------------------------------------------------------------------------------
/src/SearchResult.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./SearchResult.css";
 3 | import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 4 | import StarIcon from "@mui/icons-material/Star";
 5 | 
 6 | function SearchResult({
 7 |   img,
 8 |   location,
 9 |   title,
10 |   description,
11 |   star,
12 |   price,
13 |   total,
14 | }) {
15 |   return (
16 |     <div className="searchResult">
17 |       <img src={img} alt="" />
18 |       <FavoriteBorderIcon className="searchResult__heart" />
19 |       <div className="searchResult__info">
20 |         <div className="searchResult__infoTop">
21 |           <p>{location}</p>
22 |           <h3>{title}</h3>
23 |           <p>____</p>
24 |           <p>{description}</p>
25 |         </div>
26 |         <div className="searchResult__infoBottom">
27 |           <div className="searchResult__stars">
28 |             <StarIcon className="searchResult__star" />
29 |             <p>
30 |               <strong>{star}</strong>
31 |             </p>
32 |           </div>
33 |           <div className="searchResults__price">
34 |             <h2>{price}</h2>
35 |             <p>{total}</p>
36 |           </div>
37 |         </div>
38 |       </div>
39 |     </div>
40 |   );
41 | }
42 | 
43 | export default SearchResult;
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "airbnb-clone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.9.0",
 7 |     "@emotion/styled": "^11.8.1",
 8 |     "@mui/icons-material": "^5.6.2",
 9 |     "@mui/material": "^5.6.3",
10 |     "@testing-library/jest-dom": "^5.16.4",
11 |     "@testing-library/react": "^13.1.1",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "date-fns": "^2.28.0",
14 |     "firebase": "^9.7.0",
15 |     "react": "^18.0.0",
16 |     "react-date-range": "^1.4.0",
17 |     "react-dom": "^18.0.0",
18 |     "react-router-dom": "^6.3.0",
19 |     "react-scripts": "5.0.1",
20 |     "web-vitals": "^2.1.4"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/SearchResult.css:
--------------------------------------------------------------------------------
 1 | .searchResult {
 2 |     display: flex;
 3 |     position: relative; 
 4 |     margin: 20px;
 5 |     padding: 20px;
 6 |     border-bottom: 1px solid lightgray;
 7 |     opacity: 1;
 8 |     cursor: pointer;
 9 | }
10 | 
11 | .searchResult:hover {
12 |     opacity: 0.8;
13 | }
14 | 
15 | .searchResult > img {
16 |     height: 200px;
17 |     width: 350px;
18 |     border-radius: 10px;
19 |     overflow: hidden;
20 | }
21 | 
22 | .searchResult__info {
23 |     display: flex;
24 |     flex-direction: column;
25 |     justify-content: space-between;
26 |     padding-left: 20px;
27 | }
28 | 
29 | .searchResult__heart {
30 |     position: absolute;
31 |     top: 20px;
32 |     right: 40px;
33 | }
34 | 
35 | .searchResult__infoTop {
36 |     width: 40vw;
37 | }
38 | 
39 | .searchResult__infoTop > h3 {
40 |     font-weight: 300;
41 |     margin-top: 10px;
42 | }
43 | 
44 | .searchResult__infoTop > p {
45 |     margin-top: 10px;
46 |     font-size: 13px;
47 |     color: gray;
48 | }
49 | 
50 | .searchResult__infoBottom {
51 |     display: flex;
52 |     justify-content: space-between;
53 | }
54 | 
55 | .searchResult__star {
56 |     color: red;
57 | }
58 | 
59 | .searchResult__stars {
60 |     display: flex;
61 |     align-items: center;
62 | }
63 | 
64 | .searchResult__price > p {
65 |     text-align: right; 
66 | }
67 | 
68 | .searchResult__price {
69 |     position: absolute;
70 |     bottom: 20px;
71 |     right: 30px;
72 | }


--------------------------------------------------------------------------------
/src/Banner.css:
--------------------------------------------------------------------------------
 1 | .banner {
 2 | background: url(https://media.cntraveller.com/photos/611be85fab1fb48d7ae603af/master/w_1200,c_limit/2brighton-airbnb-mar21-pr.jpg);
 3 | height: 50vh;
 4 | position: relative;
 5 | }
 6 | 
 7 | .banner__info {
 8 |     background-color: black;
 9 |     color: white;
10 |     padding-top: 25vh;
11 |     padding-left: 50px;
12 |     padding-right: 50px;
13 |     padding-bottom: 40px;
14 |     width: 300px;
15 | }
16 | 
17 | .banner__search {
18 |     display: flex;
19 |     flex-direction: column;
20 | }
21 | 
22 | .banner__searchButton {
23 |     background-color: white !important;
24 |     font-weight: 900 !important;
25 |     text-transform: inherit !important;
26 |     color: #ff7779 !important;
27 |     border-color: gainsboro !important;
28 | }
29 | 
30 | /* .banner__searchButton:hover {
31 |     background-color: #ff7779 !important;
32 |     color: white !important;
33 | }
34 |  */
35 | .banner__nearbyButton {
36 |     background-color: #ff7779 !important;
37 |     color: white !important;
38 |     text-transform: inherit !important;
39 |     margin-top: 20px !important;
40 |     font-weight: 600 !important;
41 |     border-color: transparent !important;
42 | }
43 | 
44 | .banner__nearbyButton:hover {
45 |     border-color: white !important;
46 |     background-color: white !important;
47 |     color: #ff7779 !important;
48 | }
49 | 
50 | .nearby__link {
51 |     text-decoration: none;
52 | }
53 | 
54 | .banner__info > h5 {
55 |     margin-top: 10px;
56 | }


--------------------------------------------------------------------------------
/src/Search.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Search.css";
 3 | import "react-date-range/dist/styles.css"; /* main style file */
 4 | import "react-date-range/dist/theme/default.css"; /* theme css file */
 5 | import { DateRangePicker } from "react-date-range";
 6 | import { useState } from "react";
 7 | import PeopleIcon from "@mui/icons-material/People";
 8 | import { Button } from "@mui/material";
 9 | import { useNavigate } from "react-router-dom";
10 | import { Link } from "react-router-dom";
11 | 
12 | /* Date Picker Component */
13 | 
14 | function Search() {
15 |   const navigate = useNavigate();
16 |   const [startDate, setStartDate] = useState(new Date());
17 |   const [endDate, setEndDate] = useState(new Date());
18 | 
19 |   const selectionRange = {
20 |     startDate: startDate,
21 |     endDate: endDate,
22 |     key: "selection",
23 |   };
24 | 
25 |   function handleSelect(ranges) {
26 |     setStartDate(ranges.selection.startDate);
27 |     setEndDate(ranges.selection.endDate);
28 |   }
29 | 
30 |   return (
31 |     <div className="search">
32 |       <DateRangePicker ranges={[selectionRange]} onChange={handleSelect} />
33 | 
34 |       <h2>
35 |         Number of guests
36 |         <PeopleIcon />
37 |       </h2>
38 |       <input min={0} defaultValue={2} type="number" />
39 |       <Link to="/search">
40 |         <Button className="searchAirbnb__button">Search Airbnb</Button>
41 |       </Link>
42 |     </div>
43 |   );
44 | }
45 | 
46 | export default Search;
47 | 


--------------------------------------------------------------------------------
/.firebase/hosting.YnVpbGQ.cache:
--------------------------------------------------------------------------------
 1 | asset-manifest.json,1651238860273,a9026c3feb677f694d926be6771622a53d25cf13608908304836008125eace41
 2 | favicon.ico,1650965612414,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
 3 | index.html,1651238860273,32fa830b484cfd1e56ce65a759abc5b50538a32117cacd3b5b0ac01a7174fdec
 4 | robots.txt,1650965618251,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
 5 | manifest.json,1650965615844,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 6 | logo192.png,1650965617561,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
 7 | logo512.png,1650965617839,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
 8 | static/js/787.9239aff2.chunk.js,1651238860284,422f8cfdb17f5e02046aeb46831e45ee3313b97474243543f5c1fda23bf00e51
 9 | static/css/main.548e5b34.css,1651238860283,da12f47235b9168a86e1d66ee09960252a723e8d49dd557f8f8d9efee10c6667
10 | static/css/main.548e5b34.css.map,1651238860284,814b4c4ddfd982453398c50713ca4b3c64401b3521c0c0596eb77c48e10f4c47
11 | static/js/787.9239aff2.chunk.js.map,1651238860284,80b180ae3aac3230077a4457bd293d1858ca161aebcc41707094233f05e9bc10
12 | static/js/main.2c7ac41d.js.LICENSE.txt,1651238860284,a372c1495265b2203107397e2decfa4baf5419fee9d35a3db5e137519fbf9c7d
13 | static/js/main.2c7ac41d.js,1651238860284,1081f5b1da40e1d44db66e3fc71d1d217bf7867cbcd8add3acb2728870d84754
14 | static/js/main.2c7ac41d.js.map,1651238860284,76328421ad12f1c890a30e2782e390ad24c8f5d939c0bf897440ace43b48fc14
15 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/Home.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Banner from "./Banner";
 3 | import Card from "./Card";
 4 | import "./Home.css";
 5 | 
 6 | function Home() {
 7 |   return (
 8 |     <div className="home">
 9 |       <Banner />
10 | 
11 |       <div className="home__section">
12 |         <Card
13 |           src="https://a0.muscache.com/im/pictures/eb9c7c6a-ee33-414a-b1ba-14e8860d59b3.jpg?im_w=720"
14 |           title="Online Experiences"
15 |           description="Unique activities we can do together, led by a world of hosts."
16 |         />
17 |         <Card
18 |           src="https://a0.muscache.com/im/pictures/15159c9c-9cf1-400e-b809-4e13f286fa38.jpg?im_w=720"
19 |           title="Unique stays"
20 |           description="Spaces that are more than just a place to sleep."
21 |         />
22 |         <Card
23 |           src="https://a0.muscache.com/im/pictures/fdb46962-10c1-45fc-a228-d0b055411448.jpg?im_w=720"
24 |           title="Entire homes"
25 |           description="Comfortable private places, with room for friends or family."
26 |         />
27 |       </div>
28 |       <div className="home__section">
29 |         <Card
30 |           src="https://media.nomadicmatt.com/2019/airbnb_breakup3.jpg"
31 |           title="3 Bedroom Flat in Bournemouth"
32 |           description="Superhost with a stunning view of the beachside in Sunny Bournemouth"
33 |           price="£130/night"
34 |         />
35 |         <Card
36 |           src="https://thespaces.com/wp-content/uploads/2017/08/Courtesy-of-Airbnb.jpg"
37 |           title="Penthouse in London"
38 |           description="Enjoy the amazing sights of London with this stunning penthouse"
39 |           price="£350/night"
40 |         />
41 |         <Card
42 |           src="https://media.nomadicmatt.com/2018/apartment.jpg"
43 |           title="1 Bedroom apartment"
44 |           description="Superhost with great amenities and a fabolous shopping complex nearby"
45 |           price="£70/night"
46 |         />
47 |       </div>
48 |     </div>
49 |   );
50 | }
51 | 
52 | export default Home;
53 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/SearchPage.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./SearchPage.css";
 3 | import { Button } from "@mui/material";
 4 | import SearchResult from "./SearchResult";
 5 | 
 6 | function SearchPage() {
 7 |   return (
 8 |     <div className="searchPage">
 9 |       <div className="searchPage__info">
10 |         <p>62 stays · 26 august to 30 august · 2 guest</p>
11 |         <h1>Stays nearby</h1>
12 |         <Button variant="outlined">Cancellation Flexibility</Button>
13 |         <Button variant="outlined">Type of place</Button>
14 |         <Button variant="outlined">Price</Button>
15 |         <Button variant="outlined">Rooms and beds</Button>
16 |         <Button variant="outlined">More filters</Button>
17 |       </div>
18 |       <SearchResult
19 |         img="https://www.expatkings.com/wp-content/uploads/2018/10/Airbnb-rental-tips.-Hostmaker-1-620x349.jpg"
20 |         location="Private room in center of London"
21 |         title="Independant luxury studio apartment"
22 |         description="2 guest · 3 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Kitchen"
23 |         star={4.3}
24 |         price="£40 / night"
25 |         total="£157 total"
26 |       />
27 | 
28 |       <SearchResult
29 |         img="https://www.smartertravel.com/uploads/2017/07/Untitled-design-8.jpg"
30 |         location="Private room in center of London"
31 |         title="London Studio Apartments"
32 |         description="4 guest · 4 bedroom · 4 bed · 2 bathrooms · Free parking · Washing Machine"
33 |         star={3.8}
34 |         price="£35 / night"
35 |         total="£207 total"
36 |       />
37 |       <SearchResult
38 |         img="https://cdn.bisnow.net/fit?height=489&type=jpeg&url=https%3A%2F%2Fs3.amazonaws.com%2Fcdn.bisnow.net%2Fcontent%2Fimages%2F2017%2F05%2F59151d0978bbf_https_press_atairbnb_com_app_uploads_2016_12_midtown_4.jpeg&width=717&sign=FeltIPi9cOWA36nVIeDvZxwgtiCZrpUyMRdvyZviTUI"
39 |         location="Private room in center of London"
40 |         title="30 mins to Oxford Street, Excel London"
41 |         description="1 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Kitchen · Free parking · Washing Machine"
42 |         star={4.1}
43 |         price="£55 / night"
44 |         total="£320 total"
45 |       />
46 |       <SearchResult
47 |         img="https://media.cntraveler.com/photos/5a8f258bd363c34048b35aac/master/w_2250,h_1500,c_limit/airbnb-plus-london.jpg"
48 |         location="Private room in center of London"
49 |         title="Spacious Peaceful Modern Bedroom"
50 |         description="3 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Free parking · Dry Cleaning"
51 |         star={5.0}
52 |         price="£60 / night"
53 |         total="£450 total"
54 |       />
55 |       <SearchResult
56 |         img="https://static.trip101.com/paragraph_media/pictures/001/676/061/large/969ae4bb-efd1-4fb9-a4e3-5cb3316dd3c9.jpg?1562227937"
57 |         location="Private room in center of London"
58 |         title="The Blue Room In London"
59 |         description="2 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Washing Machine"
60 |         star={4.23}
61 |         price="£65 / night"
62 |         total="£480 total"
63 |       />
64 |       <SearchResult
65 |         img="https://image.insider.com/585029a0dd0895bc548b4b8b?width=750&format=jpeg&auto=webp"
66 |         location="Private room in center of London"
67 |         title="5 Star Luxury Apartment"
68 |         description="3 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Kitchen · Free parking · Washing Machine"
69 |         star={3.85}
70 |         price="£90 / night"
71 |         total="£650 total"
72 |       />
73 |     </div>
74 |   );
75 | }
76 | 
77 | export default SearchPage;
78 | 


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