Made the translation for the homepage and contact us page.
This commit is contained in:
parent
bc37065f14
commit
37a3ada47c
8 changed files with 151 additions and 21008 deletions
|
|
@ -69,9 +69,6 @@ function App() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
{t("Welcome_to_React")}
|
||||
</div>
|
||||
</div>
|
||||
<BrowserRouter>
|
||||
<Navbar></Navbar>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import house3 from "../images/house3.jpg";
|
|||
import house4 from "../images/house4.jpg";
|
||||
import Carousel from "react-bootstrap/Carousel";
|
||||
import Button from "react-bootstrap/Button";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
|
||||
|
||||
|
|
@ -19,6 +20,7 @@ class Homepage extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { nextIcon, prevIcon } = this.state;
|
||||
return (
|
||||
<div className="homePage">
|
||||
|
|
@ -26,8 +28,8 @@ class Homepage extends Component {
|
|||
<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>
|
||||
<h1 className="big-heading">{t("Slogan_1")}</h1>
|
||||
<h1 className="big-heading">{t("Slogan_2")}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,9 +41,9 @@ class Homepage extends Component {
|
|||
<img className="headerImg" src={house1} alt="First House" />
|
||||
<Carousel.Caption>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -49,9 +51,9 @@ class Homepage extends Component {
|
|||
<img className="headerImg" src={house2} alt="Second House" />
|
||||
<Carousel.Caption>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -59,9 +61,9 @@ class Homepage extends Component {
|
|||
<img className="headerImg" src={house3} alt="Third House" />
|
||||
<Carousel.Caption>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -69,9 +71,9 @@ class Homepage extends Component {
|
|||
<img className="headerImg" src={house4} alt="Fourth House" />
|
||||
<Carousel.Caption>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -80,13 +82,13 @@ class Homepage extends Component {
|
|||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>Description </h2>
|
||||
<p style={{ fontSize: "110%" }}> Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses. <br></br>
|
||||
The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the<br></br>
|
||||
website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page<br></br>
|
||||
is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our<br></br>
|
||||
members who want to benefit from our deals. Above are some houses which can interest you. Feel free to<br></br>
|
||||
click the buttons above to explore the houses you want. </p>
|
||||
<h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>{t("Desc")}</h2>
|
||||
<p style={{ fontSize: "110%" }}>{t("Home1")}<br></br>
|
||||
{t("Home2")}<br></br>
|
||||
{t("Home3")}<br></br>
|
||||
{t("Home4")}<br></br>
|
||||
{t("Home5")}<br></br>
|
||||
{t("Home6")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,4 +100,4 @@ class Homepage extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Homepage;
|
||||
export default withTranslation()(Homepage);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.heading-1{
|
||||
padding-left: 38%;
|
||||
padding-left: 36%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20%;
|
||||
font-size: 40px;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
FormWithConstraints
|
||||
} from 'react-form-with-constraints';
|
||||
import Alert from 'react-bootstrap/Alert';
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
|
||||
|
||||
|
|
@ -28,25 +29,26 @@ class ContactUs extends Component {
|
|||
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<div className="contact-us">
|
||||
<Alert variant="danger" style={{ display: this.state.alertBad ? "block" : "none" }} onClose={() => this.setState({ alertBad: false })} dismissible>
|
||||
<Alert.Heading>Message could not send.</Alert.Heading>
|
||||
<Alert.Heading>{t("Danger1")}</Alert.Heading>
|
||||
<p>
|
||||
There are some errors in your contact form.
|
||||
</p>
|
||||
{t("Danger2")}
|
||||
</p>
|
||||
</Alert>
|
||||
<Alert variant="success" style={{ display: this.state.alertSucess ? "block" : "none" }} onClose={() => this.setState({ alertSucess: false })} dismissible>
|
||||
<Alert.Heading>The message is successfully sent.</Alert.Heading>
|
||||
<Alert.Heading>{t("Success1")}</Alert.Heading>
|
||||
<p>
|
||||
You contact form will be delivered to our support team.
|
||||
</p>
|
||||
{t("Success2")}
|
||||
</p>
|
||||
</Alert>
|
||||
<div className="container">
|
||||
<section class="colored-section" id="contact">
|
||||
<div className="container-fluid">
|
||||
<div className="contactIntro">
|
||||
<h2 className="heading-1">Contact Us</h2>
|
||||
<h2 className="heading-1">{t("Contact-Title")}</h2>
|
||||
<FormWithConstraints ref={form => this.form = form}
|
||||
id="contact-form"
|
||||
onSubmit={this.handleSubmit.bind(this)}
|
||||
|
|
@ -57,30 +59,34 @@ class ContactUs extends Component {
|
|||
<div className="row">
|
||||
<div className="col-6">
|
||||
<select className="form-group" name="agent" id="dropdown" required onChange={this.onAgentChange.bind(this)} value={this.state.agent}>
|
||||
<option value="">Select an Agent</option>
|
||||
<option value="">{t("Contact-Agent")}</option>
|
||||
<option value="Michael">Michael</option>
|
||||
<option value="Jin">Jin </option>
|
||||
<option value="Anita">Anita</option>
|
||||
<option value="Alex">Alex</option>
|
||||
<option value="Xuan">Xuan</option>
|
||||
<option value="Walter">Walter</option>
|
||||
<option value="No preference">No preference</option>
|
||||
<option value="No preference">{t("No-Pref")}</option>
|
||||
</select>
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error1")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<select className="form-group" name="house" id="dropdown" required onChange={this.onHouseChange.bind(this)} value={this.state.house}>
|
||||
<option value="">Select a House</option>
|
||||
<option value="">{t("Contact-House")}</option>
|
||||
<option value="100 Charlie Rogers">100 Charlie Rogers</option>
|
||||
<option value="1490 Youville Drive">1490 Youville Drive </option>
|
||||
<option value="8720 Russell Road">8720 Russell Road</option>
|
||||
<option value="2785 8th Line Road">2785 8th Line Road</option>
|
||||
<option value="No preference">No preference</option>
|
||||
<option value="No preference">{t("No-Pref")}</option>
|
||||
</select>
|
||||
<FieldFeedbacks for="house">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error1")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,24 +96,28 @@ class ContactUs extends Component {
|
|||
<input name="firstname"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="First Name"
|
||||
placeholder={t("Contact-First")}
|
||||
value={this.state.firstname}
|
||||
required onChange={this.onFirstNameChange.bind(this)}
|
||||
/>
|
||||
<FieldFeedbacks for="firstname">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error2")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<input name="lastname"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Last Name"
|
||||
placeholder={t("Contact-Last")}
|
||||
value={this.state.lastname}
|
||||
required onChange={this.onLastNameChange.bind(this)}
|
||||
/>
|
||||
<FieldFeedbacks for="lastname">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error2")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,31 +125,34 @@ class ContactUs extends Component {
|
|||
<input name="email"
|
||||
type="email"
|
||||
className="form-control"
|
||||
placeholder="Email Address"
|
||||
placeholder={t("Contact-Mail")}
|
||||
aria-describedby="emailHelp"
|
||||
value={this.state.email}
|
||||
required onChange={this.onEmailChange.bind(this)}
|
||||
/>
|
||||
<FieldFeedbacks for="email">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedback when={value => value.length === 0}>{t("Contact-Error2")}</FieldFeedback>
|
||||
<FieldFeedback when={value => !/\S+@\S+/.test(value)}>{t("Contact-Error3")}</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea name="message"
|
||||
className="form-control"
|
||||
placeholder="Message"
|
||||
placeholder={t("Contact-Message")}
|
||||
rows="5"
|
||||
value={this.state.message}
|
||||
required onChange={this.onMessageChange.bind(this)}
|
||||
/>
|
||||
<FieldFeedbacks for="message">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error1")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
<div className="buttonhelper">
|
||||
<button type="submit" className="button-1">
|
||||
Submit
|
||||
</button>
|
||||
{t("Contact-Submit")}
|
||||
</button>
|
||||
</div>
|
||||
</FormWithConstraints>
|
||||
</div>
|
||||
|
|
@ -203,12 +216,12 @@ class ContactUs extends Component {
|
|||
|
||||
}
|
||||
|
||||
alertSuccess(){
|
||||
alertSuccess() {
|
||||
this.setState({ alertBad: false, alertSucess: true })
|
||||
}
|
||||
|
||||
alertBad(){
|
||||
this.setState({ alertSucess: false, alertBad: true })
|
||||
alertBad() {
|
||||
this.setState({ alertSucess: false, alertBad: true })
|
||||
}
|
||||
|
||||
resetForm() {
|
||||
|
|
@ -217,4 +230,4 @@ class ContactUs extends Component {
|
|||
}
|
||||
|
||||
|
||||
export default ContactUs;
|
||||
export default withTranslation()(ContactUs);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue