homepage styling

auth/schemas/User.js

@@ -20,6 +20,12 @@ const UserSchema = mongoose.Schema({
         type:String,
         required:true,
         minlength: 5
+    },
+    pricing: {
+        type:String,
+        enum: ['free','basic','intermediate','luxury'],
+        default:'free',
+        required:false
     }
 
 });

public/index.html

@@ -25,13 +25,11 @@
       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 -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <!-- 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">
 
-  <!-- Font Awesome -->
 
   <!-- Bootstrap Scripts -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

src/components/HomePage.js

@@ -56,25 +56,47 @@ const IconChartLine = styled(ChartLine)`
 
 `;
 
-const ITag = styled.i`
+const ColoredSection = styled.section`  
+
+  background-color:#66bfbf;
+  color: #fff;
 
 
 `;
-const FeatureBox = styled.div`
+const WhiteSection = styled.section`
+  background:#fff;
+`;
+const PressSection = styled(ColoredSection)`
+  padding-bottom: 3%;
+
+`;
+const PressLogo = styled.img`
+  width: 18%;
+  height: 18%;
+  margin: 20px 20px 50px;
+`;
+
+
+const FeatureCol = styled(Col)`
   padding: 4.5%;
 
 `;
 const ContainerPadded = styled(Container)`
   padding: 7% 15%;
+  font-family: "Montserrat";
+  text-align: center;
+
 `;
 const BigHeading = styled.h1`
-  font-family: "Montserrat-Black";
   font-size: 3.5rem;
   line-height: 1.5;
+  font-family: "Montserrat-Bold";
+  color: white;
 `;
 const FeatureTitle = styled.h3`
   font-size: 1.5rem;
   color:#8f8f8f;
+  align-self: center;
           
 `;
 
@@ -86,13 +108,13 @@ export default function HomePage() {
     <div className="HomePage">
       < NavBar />
 
-      <section className="colored-section" id="title">
+      <ColoredSection>
 
         <ContainerPadded fluid>
 
           <Row>
 
-            <Col lg="6">
+            <FeatureCol lg="4">
               <BigHeading>Adapt to a new place easy peasy.</BigHeading>
               <button type="button" onClick={() => {
                 history.push("/user/login")
@@ -100,42 +122,42 @@ export default function HomePage() {
 
               <button type="button" className="btn btn-info loginb" onClick={() => history.push("/user/register")} >Sign Up</button>
 
-            </Col>
+            </FeatureCol>
 
-            <Col lg="6">
+            <FeatureCol lg="6">
               <img className="title-image" src="/locaft.jpg" alt="locaft-mockup" />
-            </Col>
+            </FeatureCol>
 
           </Row>
         </ContainerPadded>
-      </section>
+      </ColoredSection>
-      <section className="white-section" id="features">
+      <WhiteSection>
 
         <Container fluid>
 
           <Row>
-            <div className="feature-box col-lg-4">
+            <FeatureCol lg="4">
               <IconCheckCircle />
               <FeatureTitle>Easy to use.</FeatureTitle>
               <p>Get relocated.We'll take care of everything.</p>
-            </div>
+            </FeatureCol>
 
-            <div className="feature-box col-lg-4">
+            <FeatureCol lg="4">
               <IconBullseye />
               <FeatureTitle>Efficient</FeatureTitle>
               <p>Get highest number of services for lowest cost possible.</p>
-            </div>
+            </FeatureCol>
 
-            <div className="feature-box col-lg-4">
+            <FeatureCol lg="4">
               <IconHeart />
               <FeatureTitle>Relax</FeatureTitle>
               <p>Sit back , we'll do the dirty work.</p>
-            </div>
+            </FeatureCol>
           </Row>
 
 
         </Container>
-      </section>
+      </WhiteSection>
       <section className="colored-section" id="testimonials">
 
         <div id="testimonial-carousel" className="carousel slide" data-ride="false">
@@ -158,52 +180,52 @@ export default function HomePage() {
         </div>
 
       </section>
-      <section className="colored-section" id="press">
+      <PressSection>
-        <h3 className="big-heading">Our Partners</h3>
+        <BigHeading>Our Partners</BigHeading>
-        <img className="press-logo" src="/indigo.jpg" alt="indigo-logo" />
+        <PressLogo src="/indigo.jpg" />
-        <img className="press-logo" src="/avasa.jpg" alt="avasa-logo" />
+        <PressLogo src="/avasa.jpg" />
-        <img className="press-logo" src="/vrl.jpg" alt="vrl-logo" />
+        <PressLogo src="/vrl.jpg" />
 
-      </section>
+      </PressSection>
-      <section className="white-section" id="about-us">
+      <WhiteSection>
 
-        <div className="container-fluid">
+        <ContainerPadded fluid>
 
-          <div className="row">
+          <Row>
-            <div className="feature-box col-lg-4">
+            <FeatureCol lg="4">
               <IconAddressCard />
               <FeatureTitle>About Us</FeatureTitle>
               <p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p>
-            </div>
+            </FeatureCol>
 
-            <div className="feature-box col-lg-4">
+            <FeatureCol lg="4">
               <IconBullseye />
               <FeatureTitle>Vision</FeatureTitle>
               <p>Bringing all the basic amenities to the new place before your arrival.</p>
-            </div>
+            </FeatureCol>
 
-            <div className="feature-box col-lg-4">
+            <FeatureCol lg="4">
               <IconChartLine />
               <FeatureTitle>Mission</FeatureTitle>
               <p>Getting adapted and familiar to the new place made easy.</p>
-            </div>
+            </FeatureCol>
-          </div>
+          </Row>
-        </div>
+        </ContainerPadded>
-      </section>
+      </WhiteSection>
 
 
 
-      <section className="colored-section" id="cta">
+      <ColoredSection>
 
-        <div className="container-fluid">
+        <ContainerPadded fluid>
 
-          <h3 className="big-heading">Recommend us to your friends !</h3>
+          <BigHeading>Recommend us to your friends !</BigHeading>
           <button className="download-button btn btn-lg btn-dark" type="button"><IconApple /> Download</button>
           &nbsp;
           <button className="download-button btn btn-lg btn-dark" type="button"><IconGooglePlay /> Download</button>
-        </div>
+        </ContainerPadded>
 
-      </section>
+      </ColoredSection>
 
       <Footer />
 

src/homepage.css

@@ -1,12 +1,8 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
 div {
-  font-family: "Montserrat";
-  text-align: center;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Montserrat-Bold";
-  color: white;
 
 }
 h1 {
@@ -30,7 +26,7 @@ p {
   line-height: 1.5;
 }
 
-/* Containers */
+ */
 
 .container-fluid{
   padding: 7% 15%;
@@ -44,21 +40,7 @@ p {
   margin-top: 5%;
 }
 
-/* Sections */
 
-.colored-section {
-  background-color:#66bfbf;
-  color: #fff;
-}
-
-.white-section {
-  background-color: #fff;
-}
-
-/* Navigation Bar */
-
-
-/* Buttons */
 
 .loginb {
   margin: 5% 3% 5% 0;
@@ -91,18 +73,9 @@ p {
   position: relative;
 }
 
-.feature-title {
-  font-size: 1.5rem;
-}
 
-.feature-box {
-  padding: 4.5%;
-}
 
-.icon {
+
-  color: #66bfbf;
-  margin-bottom: 1rem;
-}
 
 .icon:hover {
   color: #66bfbf;
@@ -126,43 +99,8 @@ p {
 }
 
 
-#press {
-  background-color: #66bfbf;
-  padding-bottom: 3%;
-}
-.feature-title{
-  align-self: center;
-}
-.press-logo {
-  width: 18%;
-  height: 18%;
-  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) {