batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

n

Browse source
This commit is contained in:
ruchi 2021-04-03 16:02:07 -04:00
commit e9ebdd1989
17 changed files with 625 additions and 401 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App.js
View file

@ -2,7 +2,7 @@ import { Component } from "react";
import Footer from "./shared-components/footer-component/Footer";
import Navbar from "./shared-components/navbar-component/Navbar";
import { BrowserRouter, Route } from "react-router-dom";
import HomePage from "./homePage/homePage";
import HomePage from "./homePage/Homepage";
import ListingsPage from "./listings-page/ListingsPage";
import AgentPage from "./agent-page/AgentPage";
// import ContactUs from "./shared-components/Contact-us/Contact-us";

53
src/agent-page/AgentPage.js
View file

@ -1,39 +1,42 @@
import React, { Component } from "react";
import Agents from './Agents'
import './agent-page.css';
import Carousel from 'react-bootstrap/Carousel'
import Agent1 from "../images/Agent1.jpg";
import Agent2 from "../images/Agent2.jpg";
import Agent3 from "../images/Agent3.jpg";
import Agent4 from "../images/Agent4.jpg";
import Agent5 from "../images/Agent5.jpg";
import Agent6 from "../images/Agent6.jpg";
class AgentPage extends Component {
state={
agents: [
{title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1},
{title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2},
{title:'sales assistant',name: 'Anita', src: Agent3,word:'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.',id:3},
{title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4},
{title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5},
{title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6},
class AgentPage extends Component {
state = {
agents: [
]
}
render(){
return(
<div className="container">
<div className="center blue-text text-darken-4">
<h1>Meet the team</h1>
</div>
<Agents agents={this.state.agents} />
</div>
)
{ title: 'head sales assistant', name: 'Michael', src: Agent1, word: 'Michael has a genuine passion for helping others and for giving back to the community.', id: 1 },
{ title: 'sales assistant', name: 'Jin', src: Agent2, word: 'I have a passion for assisting clients with various real estate needs.', id: 2 },
{ title: 'sales assistant', name: 'Anita', src: Agent3, word: 'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.', id: 3 },
{ title: 'sales assistant', name: 'Alex', src: Agent4, word: 'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA', id: 4 },
{ title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto.', id: 5 },
{ title: 'sales assistant', name: 'Walter', src: Agent6, word: 'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.', id: 6 },
]
}
displayAgents= (agent) => {
render() {
return (
<div>
<div className="center blue-text text-darken-4">
<h1 style={{ fontFamily: "Georgia" }} >Meet the Team</h1>
</div>
<div className="container">
<Agents agents={this.state.agents} />
</div>
</div>
)
}
displayAgents = (agent) => {
console.log(agent);
}

25
src/agent-page/Agents.js
View file

@ -1,5 +1,4 @@
import React from "react";
import AgentPage from "./AgentPage";
/* import {Link} from 'react-router-dom' */
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
@ -9,17 +8,19 @@ const Agents = ({ agents }) => {
return (
<div className="agent" key={agent.id}>
{}
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src={agent.src} />
<Card.Body>
<Card.Title>{agent.title}</Card.Title>
<Card.Text>{agent.name}</Card.Text>
<Card.Text>
{agent.word}
</Card.Text>
<Button variant="primary">VIEW</Button>
</Card.Body>
</Card>
<Card style={{ width: "22rem", height: "42rem" }}>
<Card.Img variant="top" style={{ height: "22rem" }} src={agent.src} />
<Card.Body>
<Card.Title>{agent.title}</Card.Title>
<Card.Text>{agent.name}</Card.Text>
<Card.Text style={{ height: "7rem" }}>
{agent.word}
</Card.Text>
<div className="buttonfriend">
<Button variant="primary">VIEW</Button>
</div>
</Card.Body>
</Card>
</div>
);
});

12
src/agent-page/agent-page.css
View file

@ -12,8 +12,18 @@
}
.center{
height: 25vh; /* Magic here */
background-color: yellow;
background-color: #e7dec8;
display: flex;
justify-content: center;
align-items: center;
}
.agent{
padding-left: 16%;
padding-top: 15px;
}
.buttonfriend{
padding-top: 15px;
padding-left: 120px;
}

11
src/homePage/Homepage.css
View file

@ -1,5 +1,5 @@
.colored-section {
background-color: #ffe609;
background-color: #e7dec8;
color: #000000;
white-space: nowrap;
}
@ -14,6 +14,13 @@
font-family: "Georgia";
}
#features .container-fluid {
padding: 2% 48% 2%;
text-align: left;
font-family: "Georgia";
}
.housesIntro{
padding: 4% 5%;
}
@ -59,4 +66,4 @@
.buttonhelper {
padding-left: 45%;
padding-top: 15px;
}
}

209
src/homePage/Homepage.js
View file

@ -1,107 +1,126 @@
import { Component } from "react";
import './Homepage.css';
import house1 from '../images/house1.jpg';
import house2 from '../images/house2.jpg';
import house3 from '../images/house3.jpg';
import Carousel from 'react-bootstrap/Carousel'
import "./Homepage.css";
import house1 from "../images/house1.jpg";
import house2 from "../images/house2.jpg";
import house3 from "../images/house3.jpg";
import Carousel from "react-bootstrap/Carousel";
class Homepage extends Component {
constructor(props) {
super(props);
this.state = {
firstname: '',
lastname: '',
email: '',
message: ''
}
}
constructor(props) {
super(props);
this.state = {
firstname: "",
lastname: "",
email: "",
message: "",
};
}
render() {
return (
<div className="Homepage">
<section className="colored-section" id="title">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
<h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
</div>
</div>
</div>
</section>
<section className="white-section" id="white-section">
<div className="housesIntro">
<Carousel>
<Carousel.Item>
<img
className="headerImg"
src={house1}
alt="First House"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="headerImg"
src={house2}
alt="Second House"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="headerImg"
src={house3}
alt="Third House"
/>
</Carousel.Item>
</Carousel>
</div>
</section>
<section class="colored-section" id="contact">
<div className="container-fluid">
<div className="contactIntro">
<h2 className="heading-1">Contact Us</h2>
<form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
<div className="formhelper row">
<div className="col-6">
<input type="text" className="form-control" placeholder="First Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
</div>
<div className="col-6">
<input type="text" className="form-control" placeholder="Last Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
</div>
</div>
<div className="form-group">
<input type="email" className="form-control" placeholder="Email Address" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
</div>
<div className="form-group">
<textarea className="form-control" placeholder="Message" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
</div>
<div className="buttonhelper">
<button type="submit" className="button-1">Submit</button>
</div>
</form>
</div>
</div>
</section>
render() {
return (
<div className="homePage">
<section className="colored-section" id="title">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
<h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
</div>
</div>
);
}
</div>
</section>
<section className="white-section" id="white-section">
<div className="housesIntro">
<Carousel>
<Carousel.Item>
<img className="headerImg" src={house1} alt="First House" />
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house2} alt="Second House" />
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house3} alt="Third House" />
</Carousel.Item>
</Carousel>
</div>
</section>
<section class="colored-section" id="contact">
<div className="container-fluid">
<div className="contactIntro">
<h2 className="heading-1">Contact Us</h2>
<form
id="contact-form"
onSubmit={this.handleSubmit.bind(this)}
method="POST"
>
<div className="formhelper row">
<div className="col-6">
<input
type="text"
className="form-control"
placeholder="First Name"
value={this.state.firstname}
onChange={this.onFirstNameChange.bind(this)}
/>
</div>
<div className="col-6">
<input
type="text"
className="form-control"
placeholder="Last Name"
value={this.state.lastname}
onChange={this.onLastNameChange.bind(this)}
/>
</div>
</div>
<div className="form-group">
<input
type="email"
className="form-control"
placeholder="Email Address"
aria-describedby="emailHelp"
value={this.state.email}
onChange={this.onEmailChange.bind(this)}
/>
</div>
<div className="form-group">
<textarea
className="form-control"
placeholder="Message"
rows="5"
value={this.state.message}
onChange={this.onMessageChange.bind(this)}
/>
</div>
<div className="buttonhelper">
<button type="submit" className="button-1">
Submit
</button>
</div>
</form>
</div>
</div>
</section>
</div>
);
}
onFirstNameChange(event) {
this.setState({ firstname: event.target.value });
}
onNameChange(event) {
this.setState({ name: event.target.value })
}
onLastNameChange(event) {
this.setState({ lastname: event.target.value });
}
onEmailChange(event) {
this.setState({ email: event.target.value })
}
onEmailChange(event) {
this.setState({ email: event.target.value });
}
onMessageChange(event) {
this.setState({ message: event.target.value })
}
onMessageChange(event) {
this.setState({ message: event.target.value });
}
handleSubmit(event) {
}
handleSubmit(event) {}
}
export default Homepage;

62
src/homePage/homePage.css
View file

@ -1,62 +0,0 @@
.colored-section {
background-color: #ffe609;
color: #000000;
white-space: nowrap;
}
.white-section {
background-color: #ffffff;
}
#title .container-fluid {
padding: 4% 34% 6%;
text-align: left;
font-family: "Georgia";
}
.housesIntro{
padding: 4% 5%;
}
.contactIntro{
padding-left: 30%;
padding-right: 30%;
padding-bottom: 80px;
}
.carouselSection {
margin: 2% 8%;
}
.headerImg{
width: 2000px;
height: 600px;
}
.heading-1{
padding-left: 40%;
padding-top: 10%;
padding-bottom: 20px;
}
.formhelper{
padding-bottom: 15px;
}
.button-1 {
background-color: rgb(0, 0, 0);
border-color: transparent;
color: #ffffff;
font-size: 20px;
}
.button-1:hover {
background-color: rgb(92, 92, 92);
color: #ffffff;
border-color: transparent;
}
.buttonhelper {
padding-left: 45%;
padding-top: 15px;
}

209
src/homePage/homePage.js
View file

@ -1,107 +1,126 @@
import { Component } from "react";
import './Homepage.css';
import house1 from '../images/house1.jpg';
import house2 from '../images/house2.jpg';
import house3 from '../images/house3.jpg';
import Carousel from 'react-bootstrap/Carousel'
import "./Homepage.css";
import house1 from "../images/house1.jpg";
import house2 from "../images/house2.jpg";
import house3 from "../images/house3.jpg";
import Carousel from "react-bootstrap/Carousel";
class Homepage extends Component {
constructor(props) {
super(props);
this.state = {
firstname: '',
lastname: '',
email: '',
message: ''
}
}
constructor(props) {
super(props);
this.state = {
firstname: "",
lastname: "",
email: "",
message: "",
};
}
render() {
return (
<div className="Homepage">
<section className="colored-section" id="title">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
<h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
</div>
</div>
</div>
</section>
<section className="white-section" id="white-section">
<div className="housesIntro">
<Carousel>
<Carousel.Item>
<img
className="headerImg"
src={house1}
alt="First House"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="headerImg"
src={house2}
alt="Second House"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="headerImg"
src={house3}
alt="Third House"
/>
</Carousel.Item>
</Carousel>
</div>
</section>
<section class="colored-section" id="contact">
<div className="container-fluid">
<div className="contactIntro">
<h2 className="heading-1">Contact Us</h2>
<form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
<div className="formhelper row">
<div className="col-6">
<input type="text" className="form-control" placeholder="First Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
</div>
<div className="col-6">
<input type="text" className="form-control" placeholder="Last Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
</div>
</div>
<div className="form-group">
<input type="email" className="form-control" placeholder="Email Address" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
</div>
<div className="form-group">
<textarea className="form-control" placeholder="Message" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
</div>
<div className="buttonhelper">
<button type="submit" className="button-1">Submit</button>
</div>
</form>
</div>
</div>
</section>
render() {
return (
<div className="homePage">
<section className="colored-section" id="title">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
<h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
</div>
</div>
);
}
</div>
</section>
<section className="white-section" id="white-section">
<div className="housesIntro">
<Carousel>
<Carousel.Item>
<img className="headerImg" src={house1} alt="First House" />
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house2} alt="Second House" />
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house3} alt="Third House" />
</Carousel.Item>
</Carousel>
</div>
</section>
<section class="colored-section" id="contact">
<div className="container-fluid">
<div className="contactIntro">
<h2 className="heading-1">Contact Us</h2>
<form
id="contact-form"
onSubmit={this.handleSubmit.bind(this)}
method="POST"
>
<div className="formhelper row">
<div className="col-6">
<input
type="text"
className="form-control"
placeholder="First Name"
value={this.state.firstname}
onChange={this.onFirstNameChange.bind(this)}
/>
</div>
<div className="col-6">
<input
type="text"
className="form-control"
placeholder="Last Name"
value={this.state.lastname}
onChange={this.onLastNameChange.bind(this)}
/>
</div>
</div>
<div className="form-group">
<input
type="email"
className="form-control"
placeholder="Email Address"
aria-describedby="emailHelp"
value={this.state.email}
onChange={this.onEmailChange.bind(this)}
/>
</div>
<div className="form-group">
<textarea
className="form-control"
placeholder="Message"
rows="5"
value={this.state.message}
onChange={this.onMessageChange.bind(this)}
/>
</div>
<div className="buttonhelper">
<button type="submit" className="button-1">
Submit
</button>
</div>
</form>
</div>
</div>
</section>
</div>
);
}
onFirstNameChange(event) {
this.setState({ firstname: event.target.value });
}
onNameChange(event) {
this.setState({ name: event.target.value })
}
onLastNameChange(event) {
this.setState({ lastname: event.target.value });
}
onEmailChange(event) {
this.setState({ email: event.target.value })
}
onEmailChange(event) {
this.setState({ email: event.target.value });
}
onMessageChange(event) {
this.setState({ message: event.target.value })
}
onMessageChange(event) {
this.setState({ message: event.target.value });
}
handleSubmit(event) {
}
handleSubmit(event) {}
}
export default Homepage;

BIN
src/images/logo1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

189
src/listings-page/ListingsPage.js
View file

@ -1,16 +1,17 @@
// eslint-disable-next-line
import React, { useState, useEffect, Component } from "react";
import {
GoogleMap,
withScriptjs,
GoogleMap,
withScriptjs,
withGoogleMap,
Marker,
InfoWindow
} from "react-google-maps";
import * as listingData from "./data/property-data.json";
import mapStyles from "./mapStyles";
import "./ListingsPage.css";
} from "react-google-maps";
import * as listingData from "./data/property-data.json";
import mapStyles from "./mapStyles";
import "./ListingsPage.css";
function Map(){
function Map() {
const [selectedProperty, setSelectedProperty] = useState(null);
@ -19,89 +20,89 @@ function Map(){
return (
<GoogleMap
defaultZoom={10}
defaultCenter={{lat: 45.4231, lng:-75.6931}}
defaultCenter={{ lat: 45.4231, lng: -75.6931 }}
//https://snazzymaps.com/explore
defaultOptions={{styles: mapStyles}}
defaultOptions={{ styles: mapStyles }}
>
{listingData.Properties.map(house => (
{listingData.Properties.map(house => (
<Marker
key={house.LISTING_ID}
position={{
lat: house.coordinates[1],
lng: house.coordinates[0]
}}
<Marker
key={house.LISTING_ID}
position={{
lat: house.coordinates[1],
lng: house.coordinates[0]
onClick={() => {
setSelectedProperty(house)
}}
}}
icon={{
url:"homes-3.svg",
scaledSize: new window.google.maps.Size(50,50)
}}
onClick={() => {
setSelectedProperty(house)
}}
/>
))}
icon={{
url: "homes-3.svg",
scaledSize: new window.google.maps.Size(50, 50)
}}
{selectedProperty && (
<InfoWindow
position={{
lat: selectedProperty.coordinates[1],
lng: selectedProperty.coordinates[0]
}}
onCloseClick={() => {
setSelectedProperty(null);
}}
>
<div>
<h2>{selectedProperty.ADDRESS}</h2>
<p> {selectedProperty.DESC}</p>
<div>
<div class="row">
<div className="col-6">
/>
))}
{selectedProperty && (
<InfoWindow
position={{
lat: selectedProperty.coordinates[1],
lng: selectedProperty.coordinates[0]
}}
onCloseClick={() => {
setSelectedProperty(null);
}}
>
<div>
<h2>{selectedProperty.ADDRESS}</h2>
<p> {selectedProperty.DESC}</p>
<div>
<div class="row">
<div className="col-6">
<i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span>
<i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span>
</div>
<div className="col-6 booking_button">
</div>
<div className="col-6 booking_button">
<button>Show Listing</button>
</div>
</div>
</div>
</div>
</InfoWindow>
)}
</div>
</InfoWindow>
)}
</GoogleMap>
);
}
@ -113,12 +114,12 @@ class ListingsPage extends Component {
render() {
return (
<div className="listings">
<div className="listings">
<section class="colored-section2" id="cta">
<section class="colored-section2" id="cta">
{/*
{/*
@ -153,41 +154,45 @@ class ListingsPage extends Component {
</div>
*/}
<div class="row">
<div class="col-12">
<div class="row">
<h2> Map </h2>
<div style={{ width: "100vm", height: "800px" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
<div class="col-12">
<section className="colored-section" id="features">
<div className="container-fluid">
<h2> Map </h2>
</div>
</section>
<div style={{ width: "100vm", height: "800px" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
</div>
</div>
</div>
</section>
</div>
);
</section>
</div>
);
}
}

1
src/listings-page/mapStyles.js
View file

@ -1,3 +1,4 @@
// eslint-disable-next-line
export default [
{
"featureType": "all",

14
src/shared-components/navbar-component/Navbar.css
View file

@ -1,3 +1,13 @@
.Navbar{
background-color: pink;
}
background-color: #30475e;
padding-top: 20px;
padding-bottom: 24px;
}
.navbar-brand{
color: #5b83aa;
padding-left:20px;
}

35
src/shared-components/navbar-component/Navbar.js
View file

@ -1,18 +1,19 @@
import React from "react";
import { Link, withRouter } from "react-router-dom";
import "./Navbar.css";
import logo from "./logo2.png";
/* eslint-disable jsx-a11y/anchor-is-valid */
const Navbar = () => {
return (
/* Nav Bar */
<div className="Navbar">
<nav class="navbar navbar-expand-lg navbar-dark">
<img src=""></img>
<img src={logo} alt="" width="40" height="40"></img>
<a href="/" class="navbar-brand">
Kene's Cribs
</a>
<button
class="navbar-toggler"
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
@ -20,25 +21,37 @@ const Navbar = () => {
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
<span className="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<Link class="nav-link" exact to="/">
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" exact to="/">
Home
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/listings">
<li className="nav-item">
<Link className="nav-link" to="/listings">
Listings
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/agents">
<li className="nav-item">
<Link className="nav-link" to="/agents">
Agents
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/">
Contact Us
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/">
Login
</Link>
</li>
</ul>
</div>
</nav>

BIN
src/shared-components/navbar-component/logo2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 53 KiB