Merge pull request #3 from ananyatripathi/master

Resolved the conflicts of the pull request sent by Ananya.

src/App.js

@@ -1,5 +1,11 @@
 import React from "react";
 import './App.css';
+import SignInSide from "./Components/login/logIn"; // Login Page Component
+import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
+import Main from "./main";
+import HomepageMain from "./Homepage/HomepageMain/Mainhome";
+import Doctormainpage from "./HomepageSubparts/Doctors/doctorsmainpage";
+
 import Footer from "../src/Components/Footer";
 import Navbar from "../src/Components/Navbar/Navbar";
 import Img from "../src/Components/Img.png";
@@ -9,7 +15,13 @@ import SignInSide from "./Components/login/logIn"; // Login Page Component
 
 function App() {
  return (
+
  <div>
+ <Route exact path='/' component={Main}></Route>
+ <Route path='/signup' component={SignInSide}></Route>
+ <Route path='/homepage' component={HomepageMain}></Route>
+ <Route path='/expertdoctors' component={Doctormainpage}></Route>
+
  <div className="forNavbar">
  <Navbar></Navbar>
  <img className="image" src={background} alt="background-image" />
@@ -36,7 +48,10 @@ function App() {
  </div>
  <Footer />
  </div>
+
  </div>
+
+
  );
 }
 export default App;

src/Components/Navbar/Navbar.js

@@ -2,6 +2,12 @@ import React, { Component } from 'react';
 import { MenuItems } from "./MenuItems"
 import { Button } from "../Button"
 import './Navbar.css'
+import {Link} from 'react-router-dom'
+
+function handleSignup()
+{
+ alert("Hello");
+}
 
 function handleSignup()
 {
@@ -38,7 +44,11 @@ class Navbar extends Component {
  )
  })}
  </ul>
+
+ <Link to='/signup'>Sign Up</Link>
+
  <Button onClick={handleSignup}>Sign Up</Button>
+
  </nav>
  {/* <img className="image" src={background} alt="background-image" /> */}
  </div>

src/Components/login/logIn.js

@@ -13,6 +13,7 @@ import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import logoapp from "./image/logo5.png";
+import {Link as Linked} from 'react-router-dom'
 
 function Copyright() {
  return (
@@ -118,6 +119,7 @@ export default function SignInSide() {
  >
  Sign In
  </Button>
+
  <Grid container>
  <Grid item xs>
  <Link href="#" variant="body2">
@@ -130,6 +132,8 @@ export default function SignInSide() {
  </Link>
  </Grid>
  </Grid>
+ <center><Linked to='/homepage'>Sign Up</Linked></center>
+
  <Box mt={5}>
  <Copyright />
  </Box>

src/Homepage/HomepageComponents/Assignment/assessmentstyle.css

@@ -0,0 +1,87 @@
+.AssignmentMainContainer{
+ width: 76%;
+ margin-left: 295px;
+ display:block;
+ box-shadow: 0 0 10px #ffc4c6;
+ margin-bottom: 20px;
+ margin-top: 90px;
+
+}
+.AssignmentContainer{
+ margin-bottom:0px;
+ padding-top: 30px;
+ padding-bottom: 20px;
+}
+.Assignmentbtn{
+ display: flex;
+ justify-content: space-between;
+ margin: 20px;
+}
+.AssignmentCardContent{
+ justify-content: space-between;
+ display: flex;
+ margin: 10px;
+ margin-bottom: 20px;
+}
+
+.AssignmentDescription{
+ width: 60%;
+}
+
+.cardHeader2{
+ text-transform: capitalize;
+ font-size: 22px;
+ padding-right: 595px;
+ box-sizing: border-box;
+ letter-spacing: 2px;
+ color: #333;
+ text-align: right;
+
+}
+
+.AssignmentDescriptionContent{
+ font-size: 20px;
+ color: black;
+ font-weight: 350;
+ padding-right: 10px;
+}
+.AssignmentImage{
+ width: 350px;
+ height: 350px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ opacity: 1;
+
+
+}
+
+.AssignmentImageContainer{
+ padding-left: 20px;
+}
+
+
+.round-button {
+ display:block;
+ width:180px;
+ height:35px;
+ line-height:35px;
+ border: 0.01px solid #f98282;
+ border-radius: 5px;
+ color:#f98282;
+ letter-spacing: 1px;
+ text-align:center;
+ text-decoration:none;
+ background: #ffffff;
+ font-size:18px;
+ font-weight:500px;
+ margin: 0 auto;
+}
+.round-button:hover {
+ background: #f98282;
+ color: white;
+ text-decoration: none;
+ transform: scale(1.05); 
+
+
+}

src/Homepage/HomepageComponents/Assignment/index.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import './assessmentstyle.css'
+import assessmentHome from '../../HomepageAssets/assessmentHome.jpg'
+
+const Assignment = props => {
+ return (
+ <div className="AssignmentMainContainer">
+ <div className="AssignmentContainer" style={{boxSizing: 'border-box'}}> 
+ <div className="cardHeader2">
+ <h2>Assessment</h2>
+ </div>
+ <div className="AssignmentCardContent">
+ <div className="AssignmentImageContainer">
+ <img className="AssignmentImage" src={assessmentHome}></img>
+ </div>
+ <div className="AssignmentDescription">
+ <p className="AssignmentDescriptionContent">When you’re going through a tough time it’s normal to feel down for a while, emotions like sadness and grief help make us human. But if you’re feeling sad or miserable most of the time over a long period of time, you might have depression.</p>
+ <p className="AssignmentDescriptionContent">Think about the last two weeks, rather than just today or yesterday. Take this self-test to help figure out whether you’re showing any of the warning signs of depression. This won’t give you a diagnosis but it will help you decide the next step.</p>
+ <br></br>
+ <div className="Assignmentbtn">
+ <a href="http:https://example.com" class="round-button">Depression Test</a>
+ <a href="http:https://example.com" class="round-button">Anxiety Test</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}
+export default Assignment

src/Homepage/HomepageComponents/Blogss/Blogss.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import './blogss.css'
+import blogsHome from '../../HomepageAssets/blogsHome.jpg'
+class Blogss extends Component {
+ render() {
+ return(
+ <div className="BlogssMainContainer">
+ <div className="BlogssContainer" style={{boxSizing: 'border-box'}}>
+ <div className="cardHeader4">
+ <h2>Blogs</h2>
+ </div>
+ <div className="BlogssCardContent">
+ <div className="Description">
+ <p className="bloghead">Finding the best depression treatment for you</p>
+ <p className="DescriptionContent">When you’re depressed, it can feel like you’ll never get out from under a dark shadow. However, even the most severe depression is treatable. So, if your depression is keeping you from living the life you want to, don’t hesitate to seek help. From therapy to medication to healthy lifestyle changes, there are many different treatment options available.Of course, just as no two people are affected by depression in exactly the same way, neither is there a “one size fits all” treatment to cure depression. What works for one person might not work for another. By becoming as informed as possible, though, you can find the treatments...</p>
+ <a href="http:https://example.com" class="round-button">Read Here</a>
+ </div>
+ <div className="BlogssImageContainer">
+ <img className="BlogssImage" src={blogsHome}></img>
+ </div>
+ </div>
+
+ <div>
+
+ </div>
+ </div>
+ </div>
+ )
+ }
+ }
+
+export default Blogss

src/Homepage/HomepageComponents/Blogss/blogss.css

@@ -0,0 +1,93 @@
+.BlogssMainContainer{
+ width: 76%;
+ margin-left: 295px;
+ display:block;
+ box-shadow: 0 0 10px #ffc4c6;
+ margin-bottom: 20px;
+
+}
+.BlogssContainer{
+ margin-bottom:0px;
+ padding-top: 30px;
+ padding-bottom: 20px;
+}
+.BlogssCardContent{
+ justify-content: space-between;
+ display: flex;
+ margin: 10px;
+ margin-bottom: 20px;
+}
+
+.Description{
+ padding-top: 15px;
+ width: 60%;
+}
+
+.cardHeader4{
+ text-transform: capitalize;
+ font-size: 22px;
+ padding-right: 355px;
+ box-sizing: border-box;
+ letter-spacing: 2px;
+ color: #333;
+ text-align: left;
+ padding-left: 35px;
+}
+
+.DescriptionContent{
+ font-size: 20px;
+ color: black;
+ font-weight: 350;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-left: 15px;
+}
+.bloghead{
+ font-size: 20px;
+ color: black;
+ font-size: 350;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-left: 15px;
+}
+.BlogssImage{
+ width: 350px;
+ height: 350px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ opacity: 1;
+ border: 0px solid gainsboro;
+
+}
+
+.BlogssImageContainer{
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+
+.round-button {
+ display:block;
+ width:180px;
+ height:35px;
+ line-height:35px;
+ border: 0.01px solid #f98282;
+ border-radius: 5px;
+ color:#f98282;
+ letter-spacing: 1px;
+ text-align:center;
+ text-decoration:none;
+ background: #ffffff;
+ font-size:18px;
+ font-weight:500;
+ margin: 0 auto;
+}
+.round-button:hover {
+ background: #f98282;
+ color: white;
+ text-decoration: none;
+ transform: scale(1.05); 
+
+
+}

src/Homepage/HomepageComponents/Doctors/Doctors.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import './assessdoctors.css'
+import doctorsHome from '../../HomepageAssets/doctorsHome.jpg'
+import {Link} from 'react-router-dom'
+
+const Doctors = props => {
+ return (
+ <div className="DoctorsMainContainer">
+ <div className="DoctorsContainer" style={{boxSizing: 'border-box'}}> 
+ <div className="cardHeader9">
+ <h2>Doctors</h2>
+ </div>
+ <div className="DoctorsCardContent">
+ <div className="DoctorsImageContainer">
+ <img className="DoctorsImage" src={doctorsHome}></img>
+ </div>
+ <div className="DoctorsDescription">
+ <p className="DoctorsDescriptionContent">Do you feel depressed, anxious, worried about relationship issues or suicidal? Do you have a question related to your own or someone else's mental health?</p>
+ <p className="DoctorsDescriptionContent">India’s Best Online Therapy and Counselling Consultation Website. Soothe provides the best psychologist and counsellors in India. Our trained counsellors are qualified and are available day and night. We are here to help answer any questions you might have about mental health. Get Face-to-face Counselling Therapy Consultation. It is convenient, Affordable and Private. Confidentiality is highly maintained. You can take up therapy as per your convenience without hampering your daily schedules. You can mutually fix the session with the therapist as well.</p>
+ <br></br>
+ <div>
+ <Link to="/expertdoctors" class="round-button">Consult Doctor</Link>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}
+export default Doctors