estate page

client/package.json

@@ -6,10 +6,12 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.5",
     "@mui/material": "^5.0.4",
     "@mui/styles": "^5.0.2",
     "axios": "^0.23.0",
     "eslint-config-react-app": "^6.0.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",

client/src/App.js

@@ -1,12 +1,23 @@
-import { Footer } from './components';
+import { BrowserRouter as Router } from 'react-router-dom';
+// import PropertyCard from './components/PropertyCard';
+// import NavBar from './components/Navbar';
+// import { Footer } from './components';
+import Estate from './pages/Estate';
 
 function App() {
   return (
     <div className="App">
-      <Footer />
+      <Router>
+        <Estate />
+
+      </Router>
+      {/* <Router>
+        <NavBar />
+
+      </Router>
+      <Footer /> */}
     </div>
 
   );
 }
-
 export default App;

client/src/components/ImageSection/imageSection.css

@@ -0,0 +1,31 @@
+.main{
+    display: flex;
+    width: 80%;
+    height: 60vh;
+    margin-top: 5rem;
+}
+.bigImage{
+    width: 70%;
+}
+.bigImage img{
+    min-width: 100%;
+    max-height: 100%
+}
+.anotherImage{
+    display: flex;
+    flex-direction:column;
+    width: 30%;
+    justify-content: space-between
+
+}
+.anotherImage img{
+    min-width: 100%;
+    min-height: 30%;
+    margin-left:2rem;
+    margin-bottom: 6px;
+
+}
+
+img:nth-child(3){
+    margin-bottom: 0px;   
+}

client/src/components/ImageSection/index.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import './imageSection.css';
+
+function ImageSection({ images }) {
+  let imagesarr = Object.values(images);
+  const mainImage = imagesarr[0];
+  console.log(imagesarr);
+  imagesarr = imagesarr.slice(1);
+  return (
+    <section className="main">
+      <section className="bigImage">
+        <img
+          src={mainImage}
+          alt="home"
+          loading="lazy"
+        />
+      </section>
+      <section className="anotherImage">
+        {imagesarr.map((item) => (
+          <img
+            src={item}
+            alt="home"
+            loading="lazy"
+          />
+        ))}
+      </section>
+    </section>
+  );
+}
+ImageSection.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+export default ImageSection;

client/src/components/Navbar/index.js

@@ -0,0 +1,75 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  ListItem, ListItemText, Button, Avatar, Container, List,
+} from '@mui/material';
+import './style.css';
+
+import Logo from '../../asstes/logo.png';
+import PresonImg from '../../asstes/avatar.png';
+
+function NavBar() {
+  const [logged, setLogged] = useState(true);
+  return (
+    <Container maxWidth="xl">
+      <nav className="container">
+        <Link to="/">
+          <img src={Logo} alt="logo-housy" className="img-logo" />
+        </Link>
+        {' '}
+        <List
+          className="list"
+          sx={{ justifyContent: 'space-between' }}
+          style={{
+            marginRight: '150px', alignSelf: 'center', color: '#797B7D',
+          }}
+        >
+          <Link to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button style={{ textDecoration: 'none' }}>
+              <ListItemText primary="Home" />
+            </ListItem>
+          </Link>
+
+          <Link to="/signup" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="About" />
+            </ListItem>
+          </Link>
+          <Link to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="Buy" />
+            </ListItem>
+          </Link>
+          <Link to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="Rent" />
+            </ListItem>
+          </Link>
+        </List>
+
+        <div className="agent">
+          <Button style={{
+            marginRight: '30px', alignSelf: 'center', backgroundColor: '#3781CB', color: '#FFFFFF', textTransform: 'none',
+          }}
+          >
+            {' '}
+            <Link to="/login" className="btn-host">
+              <ListItemText primary="Host my House" style={{ color: '#fff' }} />
+            </Link>
+          </Button>
+          {logged ? (
+            <Link to="/">
+              <Avatar src={PresonImg} />
+            </Link>
+          ) : (
+            ''
+          )}
+        </div>
+
+      </nav>
+    </Container>
+
+  );
+}
+export default NavBar;

client/src/components/Navbar/style.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.img-logo {
+  width: 90px;
+  height: 80px;
+}
+.list {
+  display: flex;
+  align-self: center;
+}
+.agent {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+}

client/src/components/PropertyCard/PropertyCard.css

@@ -0,0 +1,37 @@
+.row{
+    display: flex;
+    flex-wrap: wrap;
+}
+.rectangle{
+    width: 50%;
+    background-color:#26B919;
+    clip-path: polygon(0 -134%, 91% 75%, 91% 100%, 0% 100%);
+    border-radius: 6px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 10px;
+
+
+}
+.loveicon{
+    text-align: end; 
+}
+.price{
+    font-size: 1.9rem;
+    width: 100%;
+    text-align: center;
+    margin-top: 5px;
+}
+.bathroom,.rooms,.beds,.sqft{
+    width: 45%;
+    background-color:#3781CB;
+    padding: 10px;
+    margin:0 0 10px 10px;
+    border-radius: 6px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+}

client/src/components/PropertyCard/index.js

@@ -0,0 +1,103 @@
+import {
+  Card,
+  CardContent,
+} from '@mui/material';
+import PropTypes from 'prop-types';
+
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import { makeStyles } from '@mui/styles';
+import Space from '../../assets/space.png';
+import Bath from '../../assets/bath.png';
+import Rooms from '../../assets/rooms.png';
+import Bed from '../../assets/beds.png';
+import './PropertyCard.css';
+
+const useStyles = makeStyles({
+  card: {
+    backgroundColor: '#F1F1F1',
+    maxWidth: 345,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  icons: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+
+  },
+});
+function PropertyCard({
+  data: {
+    type, price, beds, baths, rooms, space,
+  },
+}) {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.card} style={{ backgroundColor: '#F1F1F1' }}>
+      <CardContent className="row">
+        <div className="rectangle">
+          {type}
+        </div>
+        <div className="loveicon" style={{ width: '50%' }}>
+          <FavoriteBorderIcon />
+        </div>
+        <div className="price">
+          {price}
+          {' '}
+          $
+        </div>
+      </CardContent>
+
+      <CardContent className={classes.icons}>
+        <div className="bathroom">
+          <img
+            src={Bath}
+            alt="space"
+          />
+          {baths}
+          {' '}
+          Bathrooms
+        </div>
+        <div className="rooms">
+          <img
+            src={Rooms}
+            alt="space"
+          />
+          {rooms}
+          {' '}
+          Rooms
+        </div>
+        <div className="beds">
+          <img
+            src={Bed}
+            alt="space"
+          />
+          {beds}
+          {' '}
+          Beds
+        </div>
+        <div className="sqft">
+          <img
+            src={Space}
+            alt="space"
+          />
+          {space}
+          Sqft
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+PropertyCard.propTypes = {
+  data: PropTypes.shape({
+    type: PropTypes.string,
+    price: PropTypes.string,
+    beds: PropTypes.string,
+    baths: PropTypes.string,
+    rooms: PropTypes.string,
+    space: PropTypes.string,
+  }).isRequired,
+};
+
+export default PropertyCard;