diff --git a/public/avasa.jpg b/public/avasa.jpg
new file mode 100644
index 0000000..2d3dc27
Binary files /dev/null and b/public/avasa.jpg differ
diff --git a/public/index.html b/public/index.html
index 5680b51..27772a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,20 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <!-- Google Fonts -->
- <link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">
-
- <!-- CSS Stylesheets -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <link rel="stylesheet" href="css/style.css">
-
- <!-- Font Awesome -->
- <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
-
- <!-- Bootstrap Scripts -->
- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
<title>Locaft</title>
</head>
<body>
diff --git a/public/indigo.png b/public/indigo.png
new file mode 100644
index 0000000..c8ce599
Binary files /dev/null and b/public/indigo.png differ
diff --git a/public/locaft.png b/public/locaft.png
new file mode 100644
index 0000000..3662bb9
Binary files /dev/null and b/public/locaft.png differ
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/nobroker.png b/public/nobroker.png
new file mode 100644
index 0000000..5c70095
Binary files /dev/null and b/public/nobroker.png differ
diff --git a/public/vrl.jpg b/public/vrl.jpg
new file mode 100644
index 0000000..525a5c7
Binary files /dev/null and b/public/vrl.jpg differ
diff --git a/src/components/HomePage.js b/src/components/HomePage.js
index 2d8749c..55e0b0d 100644
--- a/src/components/HomePage.js
+++ b/src/components/HomePage.js
@@ -1,197 +1,182 @@
import React, { Component } from 'react';
-
+import Button from 'react-bootstrap/Button';
+import 'C:\\Priyathamwork\\locaft\\locaft\\src\\style.css';
class HomePage extends Component {
render(){
return (
<div className="HomePage">
-
+ <section class="colored-section" id="title">
-<section class="colored-section" id="title">
+ <div class="container-fluid">
+
+
+ <nav class="navbar navbar-expand-lg navbar-dark">
- <div class="container-fluid">
+ <a class="navbar-brand" href="">locaft</a>
-//navbar
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
+ <span class="navbar-toggler-icon"></span>
+ </button>
- <nav class="navbar navbar-expand-lg navbar-dark">
+ <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
- <a class="navbar-brand" href="">locaft</a>
+ <ul class="navbar-nav ml-auto">
+ <li class="nav-item">
+ <a class="nav-link" href="#footer">Contact Us</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#about-us">About Us</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#cta">Blog</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#login">Sign up or in</a>
+ </li>
+ </ul>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
- <span class="navbar-toggler-icon"></span>
- </button>
+ </div>
+ </nav>
- <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
- <ul class="navbar-nav ml-auto">
- <li class="nav-item">
- <a class="nav-link" href="#footer">Contact Us</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#about-us">About Us</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#cta">Blog</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#login">Sign up or in</a>
- </li>
- </ul>
+ <div className="row">
+
+ <div className="col-lg-6">
+ <h1 class="big-heading">Adapt to a new place easy peasy.</h1>
+ <button type="button" class="btn btn-info login">Log In</button>
+ <button type="button" class="btn btn-info loginb">Sign Up</button>
+
+ </div>
+ <div class="col-lg-6">
+ <img class="title-image" src={"C:\\Priyathamwork\\locaft\\locaft\\public\\locaft.png"} alt="locaft-mockup" />
+ </div>
+
</div>
- </nav>
+ </div>
+ </section>
+ <section class="white-section" id="features">
+ <div class="container-fluid">
-//Title
-
- <div class="row">
-
- <div class="col-lg-6">
- <h1 class="big-heading">Adapt to a new place easy peasy.</h1>
- <button type="button" class="btn btn-info login">Log In</button>
- <button type="button" class="btn btn-info loginb" >Sign Up</button>
- </div>
- <div class="col-lg-6">
- <img class="title-image" src="Images/LOCAFT.png" alt="locaft-mockup">
+ <div class="row">
+ <div class="feature-box col-lg-4">
+ <i className="icon fas fa-check-circle fa-4x"></i>
+ <h3 class="feature-title">Easy to use.</h3>
+ <p>Get relocated.We'll take care of everything.</p>
</div>
+ <div class="feature-box col-lg-4">
+ <i class="icon fas fa-bullseye fa-4x"></i>
+ <h3 class="feature-title">Efficient</h3>
+ <p>Get highest number of services for lowest cost possible.</p>
+ </div>
+
+ <div class="feature-box col-lg-4">
+ <i class="icon fas fa-heart fa-4x"></i>
+ <h3 class="feature-title">Relax</h3>
+ <p>Sit back , we'll do the dirty work.</p>
+ </div>
+ </div>
+
+
+ </div>
+ </section>
+ <section class="colored-section" id="testimonials">
+
+ <div id="testimonial-carousel" class="carousel slide" data-ride="false">
+ <div class="carousel-inner">
+ <div class="carousel-item active container-fluid">
+ <h2 class="testimonial-text">I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place.</h2>
+ <img class="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.53 PM.jpeg" alt="mc-profile" />
+ <em>Mani , Hyderabad</em>
+ </div>
+ <div class="carousel-item container-fluid">
+ <h2 class="testimonial-text">Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</h2>
+ <img class="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.39 PM.jpeg" alt="nishi-profile" />
+ <em>Nishanth , Bangalore</em>
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon"></span>
+ </a>
+ <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
+ <span class="carousel-control-next-icon"></span>
+ </a>
</div>
+ </section>
+ <section class="colored-section" id="press">
+ <img class="press-logo" src="Images/download.png" alt="indigo-logo" />
+ <img class="press-logo" src="Images/avasa.jpg" alt="avasa-logo" />
+ <img class="press-logo" src="Images/download.jpg" alt="vrl-logo" />
+ <img class="press-logo" src="Images/nobroker.png" alt="nobroker-logo" />
-<section class="white-section" id="features">
+ </section>
+ <section class="white-section" id="about-us">
- <div class="container-fluid">
+ <div class="container-fluid">
+
+ <div class="row">
+ <div class="feature-box col-lg-4">
+ <i class="icon fas fa-address-card fa-4x"></i>
+ <h2 class="feature-title">About Us</h2>
+ <p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p>
+ </div>
+
+ <div class="feature-box col-lg-4">
+ <i class="icon fas fa-bullseye fa-4x"></i>
+ <h2 class="feature-title">Vision</h2>
+ <p>Bringing all the basic amenities to the new place before your arrival.</p>
+ </div>
+
+ <div class="feature-box col-lg-4">
+ <i class="icon fas fa-chart-line fa-4x"></i>
+ <h2 class="feature-title">Mission</h2>
+ <p>Getting adapted and familiar to the new place made easy.</p>
+ </div>
+ </div>
+ </div>
+ </section>
- <div class="row">
- <div class="feature-box col-lg-4">
- <i class="icon fas fa-check-circle fa-4x"></i>
- <h3 class="feature-title">Easy to use.</h3>
- <p>Get relocated.We'll take care of everything.</p>
- </div>
- <div class="feature-box col-lg-4">
- <i class="icon fas fa-bullseye fa-4x"></i>
- <h3 class="feature-title">Efficient</h3>
- <p>Get highest number of services for lowest cost possible.</p>
- </div>
- <div class="feature-box col-lg-4">
- <i class="icon fas fa-heart fa-4x"></i>
- <h3 class="feature-title">Relax</h3>
- <p>Sit back , we'll do the dirty work.</p>
- </div>
+ <section class="colored-section" id="cta">
+
+ <div class="container-fluid">
+
+ <h3 class="big-heading">Recommend us to your friends !</h3>
+ <button class="download-button btn btn-lg btn-dark" type="button"><i class="fab fa-apple"></i> Download</button>
+ <button class="download-button btn btn-lg brn-light" type="button"><i class="fab fa-google-play"></i> Download</button>
</div>
-
- </div>
-</section>
-
-
-//testimonial
-<section class="colored-section" id="testimonials">
-
- <div id="testimonial-carousel" class="carousel slide" data-ride="false">
- <div class="carousel-inner">
- <div class="carousel-item active container-fluid">
- <h2 class="testimonial-text">I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place.</h2>
- <img class="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.53 PM.jpeg" alt="mc-profile">
- <em>Mani , Hyderabad</em>
- </div>
- <div class="carousel-item container-fluid">
- <h2 class="testimonial-text">Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</h2>
- <img class="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.39 PM.jpeg" alt="nishi-profile">
- <em>Nishanth , Bangalore</em>
- </div>
+ <div class="container-fluid">
+ <h2>Any comments ?</h2>
+ <p>Your comments are what help us improve.</p>
+
</div>
- <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
- <span class="carousel-control-prev-icon"></span>
- </a>
- <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
- <span class="carousel-control-next-icon"></span>
- </a>
- </div>
-
-</section>
+ </section>
-// press
-
-<section class="colored-section" id="press">
- <img class="press-logo" src="Images/download.png" alt="indigo-logo">
- <img class="press-logo" src="Images/avasa.jpg" alt="avasa-logo">
- <img class="press-logo" src="Images/download.jpg" alt="vrl-logo">
- <img class="press-logo" src="Images/nobroker.png" alt="nobroker-logo">
-
-</section>
+ <footer class="white-section" id="footer">
+ <div class="container-fluid">
+ <i class="social-icon fab fa-facebook-f"></i>
+ <i class="social-icon fab fa-twitter"></i>
+ <i class="social-icon fab fa-instagram"></i>
+ <i class="social-icon fas fa-envelope"></i>
+ <p>© Copyright 2020 Locaft</p>
+ <p><a href="/tc">Terms and Conditions</a></p>
+ <p><a href="/pp">Privacy Policy</a></p>
+ </div>
+ </ footer>
-//About us
-<section class="white-section" id="about-us">
-
- <div class="container-fluid">
-
- <div class="row">
- <div class="feature-box col-lg-4">
- <i class="icon fas fa-address-card fa-4x"></i>
- <h2 class="feature-title">About Us</h2>
- <p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p>
- </div>
-
- <div class="feature-box col-lg-4">
- <i class="icon fas fa-bullseye fa-4x"></i>
- <h3 class="feature-title">Vision</h3>
- <p>Bringing all the basic amenities to the new place before your arrival.</p>
- </div>
-
- <div class="feature-box col-lg-4">
- <i class="icon fas fa-chart-line fa-4x"></i>
- <h2 class="feature-title">Mission</h2>
- <p>Getting adapted and familiar to the new place made easy.</p>
- </div>
- </div>
- </div>
-</section>
+ </div>
+
-//blog
-<section class="colored-section" id="cta">
-
- <div class="container-fluid">
-
- <h3 class="big-heading">Recommend us to your friends !</h3>
- <button class="download-button btn btn-lg btn-dark" type="button"><i class="fab fa-apple"></i> Download</button>
- <button class="download-button btn btn-lg brn-light" type="button"><i class="fab fa-google-play"></i> Download</button>
- </div>
-
- <div class="container-fluid">
- <h2>Any comments ?</h2>
- <p>Your comments are what help us improve.</p>
- <form>
- <div className="form-group">
- <label for="comment">Give us your feedback 👇</label>
- <textarea class="form-control comment" rows="5" id="comment"></textarea>
- <a href="#" role="button"></a>
- <input type="submit" class="btn btn-info submit" value="Submit">
- </div>
- </form>
- </div>
-</section>
-
-
-//footer
-
-<footer class="white-section" id="footer">
- <div class="container-fluid">
- <i class="social-icon fab fa-facebook-f"></i>
- <i class="social-icon fab fa-twitter"></i>
- <i class="social-icon fab fa-instagram"></i>
- <i class="social-icon fas fa-envelope"></i>
- <p>© Copyright 2020 Locaft</p>
- <p><a href="/tc">Terms and Conditions</a></p>
- <p><a href="/pp">Privacy Policy</a></p>
- </div>
-</footer>
diff --git a/src/index.js b/src/index.js
index 2d6af66..71b4c0c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
-import reportWebVitals from './reportWebVitals';
ReactDOM.render(<App />,document.getElementById('root'));
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..4e79b14
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,196 @@
+
+body {
+ font-family: "Montserrat";
+ text-align: center;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Montserrat-Bold";
+}
+
+p {
+ color: #8f8f8f;
+}
+
+/* Headings */
+
+.big-heading {
+ font-family: "Montserrat-Black";
+ font-size: 3.5rem;
+ line-height: 1.5;
+}
+
+.section-heading {
+ font-size: 3rem;
+ line-height: 1.5;
+}
+
+/* Containers */
+
+.container-fluid{
+ padding: 7% 15%;
+}
+
+.comment{
+ padding-bottom: 5%;
+}
+
+.submit{
+ margin-top: 5%;
+}
+
+/* Sections */
+
+.colored-section {
+ background-color:#66bfbf;
+ color: #fff;
+}
+
+.white-section {
+ background-color: #fff;
+}
+
+/* Navigation Bar */
+
+.navbar {
+ padding: 0 0 4.5rem;
+}
+
+.navbar-brand {
+ font-family: "Ubuntu";
+ font-size: 2.5rem;
+ font-weight: bold;
+}
+
+.nav-item {
+ padding: 0 18px;
+}
+
+.nav-link {
+ font-size: 1.2rem;
+ font-family: "Montserrat-Light";
+}
+
+/* Buttons */
+
+.loginb {
+ margin: 5% 3% 5% 0;
+}
+
+
+/* Title Section */
+
+#title {
+ background-color: #66bfbf;
+ color: #fff;
+ text-align: left;
+}
+
+#title .container-fluid {
+ padding: 3% 15% 7%;
+}
+
+/* Title Image */
+
+.title-image {
+ width: 70%;
+ position: absolute;
+ right: 5%;
+}
+
+/* Features Section */
+
+#features {
+ position: relative;
+}
+
+.feature-title {
+ font-size: 1.5rem;
+}
+
+.feature-box {
+ padding: 4.5%;
+}
+
+.icon {
+ color: #66bfbf;
+ margin-bottom: 1rem;
+}
+
+.icon:hover {
+ color: #66bfbf;
+}
+
+/* Testimonial Section */
+
+#testimonials {
+ background-color: #66bfbf;
+}
+
+.testimonial-text {
+ font-size: 3rem;
+ line-height: 1.5;
+}
+
+.testimonial-image {
+ width: 20%;
+ border-radius: 100%;
+ margin: 20px;
+}
+
+
+#press {
+ background-color: #66bfbf;
+ padding-bottom: 3%;
+}
+
+.press-logo {
+ width: 15%;
+ margin: 20px 20px 50px;
+}
+
+/* Pricing Section */
+
+#pricing {
+ padding: 100px;
+}
+
+.price-text {
+ font-size: 3rem;
+ line-height: 1.5;
+}
+
+.pricing-column {
+ padding: 3% 2%;
+}
+
+/* CTA Section */
+
+
+/* Footer Section */
+
+
+.social-icon {
+ margin: 20px 10px;
+}
+
+@media (max-width: 1028px) {
+
+ #title {
+ text-align: center;
+ }
+
+ .title-image {
+ position: static;
+ transform: rotate(0);
+ }
+}
+
+/* Login Page */
+
+.login-heading{
+ margin: 3% 5%;
+}
+.signup .signin{
+ margin: 10% 3%;
+}
\ No newline at end of file