responsiveness practice and another div and fixing other issues

src/components/rameelo/landing/landing.js

@@ -48,57 +48,68 @@ export default class Landing extends React.Component {
         </div>
 
         <div className="quadrants-section">
+          <div class="container-fluid">
+            <div class="row">
+              <div className="col">
                 <div class="quadrant">
                   <span class="quadrant-header">
                     <span class="title">Event Hosts</span>
                     <span class="subtitle">
-                For organizations and individuals who are hosting their own
+                      For organizations and individuals who are hosting their
-                Navrati events, we would like to welcome you to get your event
+                      own Navrati events, we would like to welcome you to get
-                listed on our website, allow attendees to purchase tickets on
+                      your event listed on our website, allow attendees to
-                the site, and advertise your event!
+                      purchase tickets on the site, and advertise your event!
                     </span>
                   </span>
 
-            <span class="quadrant-footer">Sign Up</span>
+                  <span class="quadrant-footer">Sign up</span>
                 </div>
-          <div class="quadrant">
-            <span class="quadrant-header">
-              <span class="title">Event Hosts</span>
-              <span class="subtitle">
-                For organizations and individuals who are hosting their own
-                Navrati events, we would like to welcome you to get your event
-                listed on our website, allow attendees to purchase tickets on
-                the site, and advertise your event!
-              </span>
-            </span>
-
-            <span class="quadrant-footer">Sign Up</span>
               </div>
+              <div className="col">
                 <div class="quadrant">
                   <span class="quadrant-header">
-              <span class="title">Event Hosts</span>
+                    <span class="title">Event Attendees</span>
                     <span class="subtitle">
-                For organizations and individuals who are hosting their own
+                      For attendees, you will be able to browse events, buy
-                Navrati events, we would like to welcome you to get your event
+                      tickets, and view videos of events! Sit tight until we
-                listed on our website, allow attendees to purchase tickets on
+                      roll these features out!
-                the site, and advertise your event!
                     </span>
                   </span>
 
-            <span class="quadrant-footer">Sign Up</span>
+                  <span class="quadrant-footer">Create Account</span>
                 </div>
+              </div>
+              <div className="col">
                 <div class="quadrant">
                   <span class="quadrant-header">
-              <span class="title">Event Hosts</span>
+                    <span class="title">Collegiate Teams</span>
                     <span class="subtitle">
-                For organizations and individuals who are hosting their own
+                      For collegiate teams, we welcome you to join the platform
-                Navrati events, we would like to welcome you to get your event
+                      to feature your team, share team details, and gain a
-                listed on our website, allow attendees to purchase tickets on
+                      centralized place for recognition beside other teams in
-                the site, and advertise your event!
+                      the circuit!
                     </span>
                   </span>
 
-            <span class="quadrant-footer">Sign Up</span>
+                  <span class="quadrant-footer">Sign Up Team</span>
+                </div>
+              </div>
+              <div className="col">
+                <div class="quadrant">
+                  <span class="quadrant-header">
+                    <span class="title">Collegiate competitions</span>
+                    <span class="subtitle">
+                      For organizations and individuals who are hosting their
+                      own Navrati events, we would like to welcome you to get
+                      your event listed on our website, allow attendees to
+                      purchase tickets on the site, and advertise your event!
+                    </span>
+                  </span>
+
+                  <span class="quadrant-footer">Sign Up Event</span>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/components/rameelo/landing/landing.scss

@@ -6,9 +6,8 @@
 
 .top-section {
   background-color: blue;
-  height: 1078px;
-  max-height: 1078px;
   @extend %flex;
+  min-height: 1078px;
 
   .row {
     height: 100%;
@@ -29,10 +28,16 @@
       margin: 20px 20px;
       font-size: 30px;
     }
+
     .motto {
       font-size: 140px;
       color: $white;
     }
+    @media only screen and (max-width: 768px) {
+      .motto {
+        font-size: 90px;
+      }
+    }
   }
 
   .info-side {
@@ -51,6 +56,10 @@
         margin: 20px 40px;
         font-size: 20px;
       }
+
+      @media only screen and (max-width: 992px) {
+        display: none !important;
+      }
     }
 
     .welcome {
@@ -59,16 +68,25 @@
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
-      margin: 30px;
+
-      padding: 15px;
+      border-right: 1px solid $red;
-      border-right: 1px solid red;
       position: relative;
 
+      @media only screen and (min-width: 992px) {
+        padding: 4rem;
+        margin: 30px;
+      }
+
+      @media only screen and (max-width: 992px) {
+        border: none !important;
+        margin: 20px;
+      }
+
       .title {
         font-size: 70px;
 
         .red-text {
-          color: red;
+          color: $red;
         }
       }
 
@@ -79,7 +97,7 @@
 
       .learn-more {
         margin-top: 20px;
-        color: red;
+        color: $red;
         font-size: 14px;
         text-decoration: underline;
         @extend %font-inter;
@@ -92,7 +110,7 @@
       display: flex;
       flex-direction: column;
       align-items: flex-end;
-      color: red;
+      color: $red;
 
       .scroll-content {
         display: flex;
@@ -112,23 +130,32 @@
 }
 
 .quadrants-section {
-  background-color: red;
+  background-color: $red;
+  margin: 0 !important;
 
-  display: flex;
+  @media only screen and (min-width: 992px) {
-  flex-direction: row;
+    padding: 4em 6em;
-  justify-content: space-evenly;
+  }
-  align-items: center;
-  flex-wrap: wrap;
 
-  padding: 60px 140px;
+  .row {
+    .col {
+      min-height: 250px;
+    }
+    @media only screen and (min-width: 992px) {
+      .col {
+        border-right: 1px solid white !important;
+      }
+
+      :last-child {
+        border: none !important;
+      }
+    }
+  }
 
   .quadrant {
-    height: 250px;
+    padding: 2em;
-    flex: 1;
-    border-right: 1px solid white;
-    margin: 0px;
-    padding: 20px 60px;
     display: flex;
+    height: 100%;
     flex-direction: column;
     justify-content: space-between;
 
@@ -136,6 +163,7 @@
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+
       .title {
         color: $white;
         font-size: 38px;
@@ -150,14 +178,10 @@
     }
 
     .quadrant-footer {
-      color: gold;
+      color: $gold;
       font-size: 14px;
       text-decoration: underline;
       @extend %font-inter;
     }
   }
-
-  :last-child {
-    border: none !important;
-  }
 }

src/styles/_colors.scss

@@ -5,6 +5,9 @@ $secondary-text: #b5b5c3;
 $primary-color: #0bb7af;
 $white: white;
 
+$red: #ff1d46;
+$gold: #ffcb5a;
+
 body {
   color: $primary-text;
   background-color: $primary-background;