Skip to content

Commit c585cab

Browse files
tanvirstreametanvirstreame
committed
[MOD] New home page
1 parent 63730e1 commit c585cab

File tree

8 files changed

+91
-61
lines changed

8 files changed

+91
-61
lines changed

‎carmanagement_client/src/Components/Styles/home.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.home-component {
2+
.home-header {
3+
background-color: #147bea;
4+
5+
}
6+
.home-motivation {
7+
color: #e4eade;
8+
}
9+
.car-information-section {
10+
padding-top: 80px;
11+
padding-left: 100px;
12+
padding-right: 100px;
13+
}
14+
15+
.car-image {
16+
height: 350px;
17+
}
18+
.heading-title {
19+
padding-top: 80px;
20+
text-decoration-line: underline;
21+
text-decoration-thickness: 7px;
22+
text-decoration-color: #147be9;
23+
}
24+
}

‎carmanagement_client/src/Components/Styles/login.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.login-page {
22
padding-top: 60px;
3-
background-image: url("../../asset/background.jpg");
4-
background-size: cover;
5-
min-height: 599px;
3+
padding-bottom: 60px;
4+
// background-image: url("../../asset/background.jpg");
5+
// background-size: cover;
6+
// min-height: 599px;
67
.login-form input[type="text"]{
78
border-top: none;
89
border-left: none;

‎carmanagement_client/src/Components/assets/car1.jpg

79.7 KB
Loading

‎carmanagement_client/src/Components/assets/car2.jpg

8.08 KB
Loading

‎carmanagement_client/src/Components/home.js

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,52 @@
11
import React, { Component } from 'react';
22
import { Link } from 'react-router-dom'
3+
import Login from "./login";
4+
import "./Styles/home.scss"
5+
import car1 from "./assets/car1.jpg";
6+
import car2 from "./assets/car2.jpg";
37

48
class Home extends Component {
59
render() {
610
return (
7-
<nav className="navbar navbar-expand-sm navbar-expand-md navbar-full bg-info navbar-dark">
8-
<a className="navbar-brand" href="/createowner">Car Cater</a>
9-
<ul className="navbar-nav">
10-
<li className="nav-item">
11-
<Link className="nav-link" to={"/createowner"}>Create Owner</Link>
12-
</li>
13-
<li className="nav-item">
14-
<Link className="nav-link" to={"/createcar"}>Create Car</Link>
15-
</li>
16-
<li className="nav-item">
17-
<Link className="nav-link" to={"/createshowroomform"}>Create Show Room</Link>
18-
</li>
19-
20-
<li className="nav-item">
21-
<Link className="nav-link" to={"/getallcar"}>All Car</Link>
22-
</li>
23-
<li className="nav-item">
24-
<Link className="nav-link" to={"/showroom"}>Show Room</Link>
25-
</li>
26-
<li className="nav-item">
27-
<Link className="nav-link" to={"/carassignshowroom"}>Car Assign Showroom</Link>
28-
</li>
29-
<li className="nav-item">
30-
<Link className="nav-link" to={"/ownerassignshowroom"}>Owner Assign Showroom</Link>
31-
</li>
32-
</ul>
33-
</nav>
11+
<div className="home-component">
12+
<div className="row home-header">
13+
<div className="col-md-7">
14+
<div className="h-100 d-flex justify-content-center align-items-center">
15+
<div>
16+
<h1 className="heading-message text-white">Create your showroom today!</h1>
17+
<h5 className="text-center home-motivation">Just sign in and manage your car</h5>
18+
</div>
19+
</div>
20+
</div>
21+
<div className="col-md-4">
22+
{this.props.children}
23+
</div>
24+
<div className="col-md-1">
25+
</div>
26+
</div>
27+
<div className="text-center heading-title">
28+
<h2 className="">Your dream cars showroom</h2>
29+
</div>
30+
<div className="row car-information-section">
31+
<div className="col-md-6">
32+
<img className="w-100 car-image" src={car1} />
33+
</div>
34+
<div className="col-md-6">
35+
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
36+
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
37+
</div>
38+
</div>
39+
<div className="row car-information-section">
40+
<div className="col-md-6">
41+
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
42+
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
43+
</div>
44+
<div className="col-md-6">
45+
<img className="w-100 car-image" src={car2} />
46+
</div>
47+
48+
</div>
49+
</div>
3450
);
3551
}
3652
}

‎carmanagement_client/src/Components/login.js

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { Component } from "react";
2-
import { Route , withRouter, useHistory } from 'react-router-dom';
2+
import { Route, withRouter, useHistory } from 'react-router-dom';
33
import { Link } from 'react-router-dom';
44
import axios from "axios";
55

66
import "../Components/Styles/login.scss";
7+
import Home from "../Components/home"
78

89
class Login extends Component {
910

@@ -48,17 +49,14 @@ class Login extends Component {
4849
render() {
4950
const { username, password } = this.state.formValue
5051
return (
52+
<Home>
53+
<div className="login-page">
5154

52-
<div className="login-page">
53-
54-
<div className="row">
55-
<div className="col-md-7">
55+
<div className="row">
5656

57-
</div>
58-
<div className="col-md-4">
5957
<div className="card login-card w-100">
6058
<div className="text-center mt-4">
61-
<h4>Login</h4>
59+
<h4>Sign In</h4>
6260
</div>
6361
<div className="card-body">
6462
<form className="login-form ml-4 mb-4 mr-4 mt-2">
@@ -74,13 +72,9 @@ class Login extends Component {
7472
</div>
7573

7674
</div>
77-
78-
<div className="col-md-1">
79-
80-
</div>
75+
{/* <CustomTabView/> */}
8176
</div>
82-
{/* <CustomTabView/> */}
83-
</div>
77+
</Home>
8478
)
8579
}
8680
}

‎carmanagement_client/src/Components/registration.js

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from "react";
22
import { Link } from 'react-router-dom';
33
import axios from "axios";
44
import "../Components/Styles/login.scss";
5+
import Home from "../Components/home"
56

67
class Registration extends Component {
78

@@ -21,11 +22,11 @@ class Registration extends Component {
2122
const name = event.target.name;
2223
const value = event.target.value;
2324
this.setState({
24-
25+
2526
formValue: {
2627
...this.state.formValue,
2728
[name]: value,
28-
29+
2930
}
3031
})
3132
}
@@ -39,23 +40,20 @@ class Registration extends Component {
3940
.then(response => {
4041
if (response.status == 200) {
4142
this.props.history.push("/login");
42-
}
43+
}
4344
})
4445
}
4546

4647
render() {
47-
const { username, password, email} = this.state.formValue
48+
const { username, password, email } = this.state.formValue
4849
return (
50+
<Home>
51+
<div className="login-page">
52+
<div className="row">
4953

50-
<div className="login-page">
51-
<div className="row">
52-
<div className="col-md-7">
53-
54-
</div>
55-
<div className="col-md-4">
5654
<div className="card login-card w-100">
5755
<div className="text-center mt-4">
58-
<h4>Registration</h4>
56+
<h4>Sign Up</h4>
5957
</div>
6058
<div className="card-body">
6159
<form className="login-form ml-4 mb-4 mr-4 mt-2">
@@ -74,12 +72,9 @@ class Registration extends Component {
7472

7573
</div>
7674

77-
<div className="col-md-1">
78-
79-
</div>
75+
{/* <CustomTabView/> */}
8076
</div>
81-
{/* <CustomTabView/> */}
82-
</div>
77+
</Home>
8378
)
8479
}
8580
}

‎carmanagement_client/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import 'bootstrap/dist/css/bootstrap.css';
1818
import './Components/Styles/dashboard.css';
1919
import { Route, BrowserRouter as Router } from 'react-router-dom'
2020

21-
2221
const routing = (
2322
<Router>
2423
<div>
@@ -33,6 +32,7 @@ const routing = (
3332
<Route path="/carassignshowroom" component={CarAssignShowroom} exact/>
3433
<Route path="/ownerassignshowroom" component={OwnerAssignShowroom} exact/>
3534
<Route path="/getcarinfo/:id" component={CarInformation} exacts/>
35+
<Route path="/home" component={Home} exacts/>
3636
</div>
3737
</Router>
3838
)

0 commit comments

Comments
 (0)