feat: Added landing page for the application

client/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

client/src/App.css

@@ -1,3 +1,7 @@
+* {
+  font-family: Roboto;
+}
+
 .App {
   text-align: center;
 }
@@ -13,6 +17,82 @@
   }
 }
 
+h5 {
+  color: white;
+  z-index: 1;
+}
+
+.intro {
+  color: #EC516D;
+  font-family: Roboto;
+font-size: 40px;
+font-style: normal;
+font-weight: 900;
+line-height: 47px;
+letter-spacing: 0em;
+text-align: center;
+}
+
+.intro-s1 {
+  color: #4D007C;
+  font-family: Roboto;
+font-size: 40px;
+font-style: normal;
+font-weight: 900;
+line-height: 47px;
+letter-spacing: 0em;
+text-align: center;
+}
+
+.intro-two {
+  font-family: Roboto;
+font-style: normal;
+font-weight: 500;
+font-size: 20px;
+line-height: 23px;
+display: flex;
+align-items: center;
+text-align: center;
+color: #4D007C;
+}
+
+.intro-s2 {
+  font-family: Roboto;
+font-style: normal;
+font-weight: 500;
+font-size: 20px;
+line-height: 23px;
+display: flex;
+align-items: center;
+text-align: center;
+color: #E13E5C;
+}
+
+.intro-three {
+  font-family: Roboto;
+font-style: normal;
+font-weight: 500;
+font-size: 20px;
+line-height: 23px;
+color: #4D007C;
+}
+
+.badge {
+  background-color: #5E0097;
+}
+
+hr {
+  background-color:black; 
+  max-width: 100%;
+  height:3px; 
+  margin:40px;
+
+}
+
+.text-pink {
+  color: #E13E5C;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

client/src/App.js

@@ -1,13 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import HomePage from './HomePage';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <h1>Hello, All-Notes :)</h1>
-
-      </header>
+      <HomePage />
     </div>
   );
 }

client/src/HomePage.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+
+const HomePage = () => (
+<>   
+<nav className="navbar navbar-expand-lg navbar-light">
+  <div className="container">
+    <a className="navbar-brand mr-5" href="#"><img src="https://raw.githubusercontent.com/HarshCasper/AllNotes/2401a417beda2e1fb7a8f09d74c6c89dbed2ed85/design/assets/All-Notes--Monogram-1.png" height="80" width="80"/><img src="https://raw.githubusercontent.com/HarshCasper/AllNotes/2401a417beda2e1fb7a8f09d74c6c89dbed2ed85/design/assets/All-Notes-Draft-1.png" height="110" width="110"/></a>
+    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span className="navbar-toggler-icon"></span>
+    </button>
+    <div className="collapse navbar-collapse badge rounded-pill bg-purple ml-5" id="navbarNav">
+      <ul className="navbar-nav pl-5 ml-4">
+        <li className="nav-item">
+          <a className="nav-link active" aria-current="page" href="#"><h5>Why AllNotes ?</h5></a>
+        </li>
+        <li className="nav-item ml-5">
+          <a className="nav-link active" href="#"><h5>Features</h5></a>
+        </li>
+        <li className="nav-item ml-5">
+          <a className="nav-link active" href="#"><h5>Help</h5></a>
+        </li>
+        <li className="nav-item ml-5">
+          <a className="nav-link active" href="#"><h5>Login</h5></a>
+        </li>
+        <li className="nav-item ml-5">
+          <a className="nav-link active" href="#"><h5>Sign Up</h5></a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<div className="container-fluid mt-2 ml-3">
+   <div className="row">
+      <div className="col-lg-6">
+         <img src="https://user-images.githubusercontent.com/53649201/108606703-8ddf7580-73e1-11eb-9133-e9d62c623eab.PNG" height="400" width="600" />
+      </div>
+      <div className="col-lg-6 mt-5">
+         <h1 class="intro mr-4">The simplest way to find and organize notes.</h1>
+         <p class="intro-two ml-5 pl-5">AllNotes helps you capture idea and find them fast.</p>
+         <button className="btn btn-outline-info mt-3 py-2 px-5 rounded"><strong>Sign up for free</strong></button>
+         <p class="intro-three mt-2 pt-1">Already have an account ? <span class="text-pink">Log in.</span></p>
+      </div>
+   </div>  
+</div>
+
+<h1 class="intro text-pink mt-5">Comprehensive underneath,</h1>
+<h1 class="intro text-pink">simple on the surface!</h1>
+
+<div className="container mb-5 mt-5">
+<div className="jumbotron">
+  <div className="row">
+    <div className="col-lg-4">
+      <img src="../1.png"/>
+      <h5 className="text-dark pb-1">Use it anywhere</h5>
+      <p className="text-muted mt-1">Notes stay updated across all your devices, automatically and in real time. There's no "sync" button. It just works.</p>
+    </div>
+    <div className="row">
+      <div className="col-lg-5">
+      </div>
+    </div>
+    <div className="col-lg-4">
+      <img src="../2.png"/>
+      <h5 className="text-dark pb-1">Stay organized</h5>
+      <p className="text-muted mt-1">Add tags to find notes quickly with instant searching.</p>
+    </div>
+    <div className="col-lg-4">
+      <img src="../3.png"/>
+      <h5 className="text-dark pb-1">Work together</h5>
+      <p className="text-muted mt-1">Share a to-do list, post some instructions, or publish your notes online.</p>
+    </div>
+  </div>
+  <div className="row mt-5">
+    <div className="col-lg-4">
+      <img src="../4.png"/>
+      <h5 className="text-dark pb-1">Go back in time</h5>
+      <p className="text-muted mt-1">Notes are backed up with every change, so you can see what you noted last week or last month.</p>
+    </div>
+    <div className="row">
+      <div className="col-lg-5">
+      </div>
+    </div>
+    <div className="col-lg-4">
+      <img src="../5.png"/>
+      <h5 className="text-dark pb-1">Markdown support</h5>
+      <p className="text-muted mt-1">Write, preview, and publish your notes in Markdown format.</p>
+    </div>
+    <div className="col-lg-4">
+      <img src="../6.png"/>
+      <h5 className="text-dark pb-1">It’s free!</h5>
+      <p className="text-muted mt-1">Apps, backups, syncing, sharing – it’s all completely free.</p>
+    </div>
+  </div>
+</div>
+</div>
+
+<div className="container-fluid mt-5 ml-3 mb-4">
+   <div className="row">
+      <div className="col-lg-5 pl-5 mt-5">
+         <h1 class="intro-s1 ml-5">Available on all your devices</h1>
+         <p class="intro-s2 ml-2 pl-5 mt-1 pt-2">Sign up today on All Notes for any device and stay in sync - all the time, 
+everywhere.</p>
+         <button className="btn btn-outline-info mt-3 py-2 px-5 rounded"><strong>Sign up for free</strong></button>
+      </div>
+      <div className="col-lg-7 pr-5">
+         <img src="../img2.png" height="400" width="600" />
+      </div>
+   </div>
+   <div><img align="left" className="ml-5 pt-4 pl-1 mt-4" src="https://raw.githubusercontent.com/HarshCasper/AllNotes/2401a417beda2e1fb7a8f09d74c6c89dbed2ed85/design/assets/All-Notes--Monogram-1.png" height="100" width="100"/><img align="left" className="mb-5 pb-4 mt-4" src="https://raw.githubusercontent.com/HarshCasper/AllNotes/2401a417beda2e1fb7a8f09d74c6c89dbed2ed85/design/assets/All-Notes-Draft-1.png" height="130" width="130"/></div>
+
+</div>
+
+
+<div className="container mb-5 mt-3">
+<div className="row">
+<div className="col-lg-2 pr-5">
+  <p className="text-light">PRODUCT</p>
+
+
+</div>
+</div>
+</div>
+
+
+<br></br><br></br>
+<hr className="mb-5 pt-1"></hr>
+
+<div className="container mb-5 mt-0">
+<div className="row">
+<div className="col-lg-2 mr-5">
+  <h5 className="font-weight-bolder text-dark">PRODUCT</h5>
+  <p className="text-muted">Why All Notes</p>
+  <p className="text-muted">About the product</p>
+</div>
+<div className="col-lg-2 mr-5">
+  <h5 className="font-weight-bolder text-dark">FEATURES</h5>
+  <p className="text-muted">Find Notes</p>
+  <p className="text-muted">Organize your Notes</p>
+  <p className="text-muted">Share Notes</p>
+  <p className="text-muted">Win Rewards</p>
+  <p className="text-muted">Realtime Collaboration</p>
+  <p className="text-muted">Document Scanning</p>
+  <p className="text-muted">Notebooks and Tags</p>
+</div>
+<div className="col-lg-2">
+<h5 className="font-weight-bolder text-dark">COMMUNITY</h5>
+<p className="text-muted">Our Community</p>
+<p className="text-muted">Developers</p>
+<p className="text-muted">Events</p>
+<p className="text-muted">Forum</p>
+</div>
+<div className="col-lg-2 pl-5 ml-5">
+<h5 className="font-weight-bolder text-dark">SUPPORT</h5>
+<p className="text-muted">Help & Learning</p>
+<p className="text-muted">Troubleshooting</p>
+</div>
+<div className="col-lg-2 pl-5 ml-4">
+<h5 className="font-weight-bolder text-dark">COMPANY</h5>
+<p className="text-muted">About Us</p>
+<p className="text-muted">Contact Us</p>
+</div>
+</div>
+</div>
+
+<hr className="mb-3 pt-1"></hr>
+<h5 className="text-dark pb-1">&#169; AllNotes</h5>
+
+</>
+
+);
+
+export default HomePage;