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
20980
package-lock.json
generated
20980
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,7 @@
|
|||
"express": "^4.17.1",
|
||||
"flag-icon-css": "^3.5.0",
|
||||
"formik": "^2.2.6",
|
||||
"i18next": "^20.2.1",
|
||||
"i18next-browser-languagedetector": "^6.1.0",
|
||||
"i18next-http-backend": "^1.2.1",
|
||||
"joi-browser": "^13.4.0",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,35 @@
|
|||
"Nav_Agents": "Agents",
|
||||
"Nav_Contact_Us": "Contact Us",
|
||||
"Nav_listing_page": "listing-page",
|
||||
"Nav_Login": "Login"
|
||||
"Nav_Login": "Login",
|
||||
"Slogan_1": "YOU ARE NOT BUYING A HOUSE, ",
|
||||
"Slogan_2": "YOU ARE BUYING A LIFESTYLE. ",
|
||||
"Info": "Click for Details",
|
||||
"Home1": "Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses.",
|
||||
"Home2": "The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the",
|
||||
"Home3": "website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page",
|
||||
"Home4": "is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our",
|
||||
"Home5": "members who want to benefit from our deals. Above are some houses which can interest you. Feel free to",
|
||||
"Home6": "click the buttons above to explore the houses you want.",
|
||||
"Desc": "Description",
|
||||
"Rooms": "1 Bedroom, 2 Bathroom",
|
||||
"Danger1": "Message could not send.",
|
||||
"Danger2": "There are some errors in your contact form.",
|
||||
"Success1": "The message is successfully sent.",
|
||||
"Success2": "You contact form will be delivered to our support team.",
|
||||
"Contact-Title": "Contact to Us",
|
||||
"Contact-House": "Select an Agent",
|
||||
"Contact-Agent": "Select a House",
|
||||
"No-Pref": "No preference",
|
||||
"Contact-First": "First Name",
|
||||
"Contact-Last": "Last Name",
|
||||
"Contact-Mail": "Email Address",
|
||||
"Contact-Message": "Message",
|
||||
"Contact-Submit": "Submit",
|
||||
"Contact-Error1": "Please select an item in the list.",
|
||||
"Contact-Error2": "Please fill out this field.",
|
||||
"Contact-Error3": "Invalid email address."
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -22,5 +22,32 @@
|
|||
"Nav_Agents": "Agents",
|
||||
"Nav_Contact_Us": "Nous contacter",
|
||||
"Nav_listing_page": "page de liste",
|
||||
"Nav_Login": "Connexion"
|
||||
"Nav_Login": "Connexion",
|
||||
"Slogan_1": "VOUS N'ACHETEZ PAS UNE MAISON, ",
|
||||
"Slogan_2": "VOUS ACHETEZ UN STYLE DE VIE. ",
|
||||
"Info": "Cliquer pour les détails",
|
||||
"Home1": "Bienvenue chez Kene's Cribs. Kene's Cribs est une véritable société d'estateur qui fournit les maisons aux clients.",
|
||||
"Home2": "Les maisons limitées aux clients ne se limitent qu'aux rêves des clients. Afin de mieux naviguer dans site Web, utilisez",
|
||||
"Home3": "la barre de navigation pour basculer entre les pages. La page des listes sert à parcourir les maisons, la page Agents",
|
||||
"Home4": "est pour parcourir les estators, la page Contactez-nous est pour nous contacter et la page de connexion est pour notre",
|
||||
"Home5": "membres qui souhaitent bénéficier de nos offres. Ci-dessus, quelques maisons qui peuvent vous intéresser. N'hésitez",
|
||||
"Home6": "pas à cliquez sur les boutons ci-dessus pour explorer les maisons que vous souhaitez.",
|
||||
"Desc": "La Description",
|
||||
"Rooms": "1 chambre, 2 salles de bains",
|
||||
"Danger1": "Le message n'a pas pu être envoyé.",
|
||||
"Danger2": "Il y a des erreurs dans votre formulaire de contact.",
|
||||
"Success1": "Le message a été envoyé avec succès.",
|
||||
"Success2": "Votre formulaire de contact sera envoyé à notre équipe d'assistance.",
|
||||
"Contact-Title": "Contactez-Nous",
|
||||
"Contact-House": "Sélectionnez un Agent",
|
||||
"Contact-Agent": "Sélectionnez une Maison",
|
||||
"No-Pref": "Aucune préférence",
|
||||
"Contact-First": "Prénom",
|
||||
"Contact-Last": "Nom de Famille",
|
||||
"Contact-Mail": "Adresse E-mail",
|
||||
"Contact-Message": "Le Message",
|
||||
"Contact-Submit": "Soumettre",
|
||||
"Contact-Error1": "Veuillez sélectionner un élément dans la liste.",
|
||||
"Contact-Error2": "Veuillez remplir ce champ.",
|
||||
"Contact-Error3": "Adresse e-mail invalide."
|
||||
}
|
||||
|
|
@ -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…
Reference in a new issue