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

merged all components and completed the route

Browse source
This commit is contained in:
soyed 2021-03-31 14:46:24 -04:00
parent 801a414f79
commit be6c13dc50
3 changed files with 115 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App.js
View file

@ -20,11 +20,8 @@ class App extends Component {
<Route path="/agents" component={AgentPage}></Route> <Route path="/agents" component={AgentPage}></Route>
{/* <Route path="/contact-us" component={ContactUs}></Route> */} {/* <Route path="/contact-us" component={ContactUs}></Route> */}
</BrowserRouter> </BrowserRouter>
<Homepage></Homepage>
<Footer></Footer> <Footer></Footer>
{/* <Homepage/> */}
<Homepage />
</div> </div>
); );
} }

206
src/homePage/homePage.js
View file

@ -1,107 +1,123 @@
import { Component } from "react"; import { Component } from "react";
import './Homepage.css'; import "./Homepage.css";
import house1 from '../images/house1.jpg'; import house1 from "../images/house1.jpg";
import house2 from '../images/house2.jpg'; import house2 from "../images/house2.jpg";
import house3 from '../images/house3.jpg'; import house3 from "../images/house3.jpg";
import Carousel from 'react-bootstrap/Carousel' import Carousel from "react-bootstrap/Carousel";
class Homepage extends Component { class Homepage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
firstname: '', firstname: "",
lastname: '', lastname: "",
email: '', email: "",
message: '' message: "",
} };
} }
render() { render() {
return ( return (
<div className="Homepage"> <div className="Homepage">
<section className="colored-section" id="title"> <section className="colored-section" id="title">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1> <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
<h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1> <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
</div> </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>
</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>
</div>
);
}
onNameChange(event) { onNameChange(event) {
this.setState({ name: event.target.value }) this.setState({ name: event.target.value });
} }
onEmailChange(event) { onEmailChange(event) {
this.setState({ email: event.target.value }) this.setState({ email: event.target.value });
} }
onMessageChange(event) { onMessageChange(event) {
this.setState({ message: event.target.value }) this.setState({ message: event.target.value });
} }
handleSubmit(event) { handleSubmit(event) {}
}
} }
export default Homepage; export default Homepage;

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

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link, withRouter } from "react-router-dom";
import "./Navbar.css"; import "./Navbar.css";
/* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/anchor-is-valid */
const Navbar = () => { const Navbar = () => {
@ -25,7 +25,7 @@ const Navbar = () => {
<div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item"> <li class="nav-item">
<Link class="nav-link" to="/home"> <Link class="nav-link" to="/">
Home Home
</Link> </Link>
</li> </li>
@ -51,4 +51,4 @@ const Navbar = () => {
); );
}; };
export default Navbar; export default withRouter(Navbar);