rearrange discord and subscribe sections

Author: pbteja1998

components/subscribe.js

@@ -65,7 +65,7 @@ class Subscribe extends Component {
     return (
       <div>
         <section className="update">
-          <div className="container update_container">
+          <div>
             <h3 className="taglines">
               We are constanly updating our platform.<br />If you would like to
               stay informed about our updates, drop you email.
@@ -103,9 +103,6 @@ class Subscribe extends Component {
           .taglines {
             padding-bottom: 20px;
           }
-          .update_container {
-            background-color: #f6f6f6 !important;
-          }
           .update_content {
             display: flex;
             flex-direction: row;
@@ -114,11 +111,6 @@ class Subscribe extends Component {
             align-content: center;
             align-items: center;
           }
-          .container {
-            background-color: #ffffff;
-            text-align: center;
-            padding: 60px;
-          }
         `}</style>
       </div>
     );

pages/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
-import { Card, Button, Divider } from 'semantic-ui-react';
-
+import { Card, Button, Divider, Grid, Segment } from 'semantic-ui-react';
 import { baseEventsURL, indexPageEventURL } from '../utils/urls';
 import RowEvent from '../components/row-events';
 import publicPage from '../hocs/public-page';
@@ -170,23 +169,39 @@ class Home extends React.Component {
             </div>
           </section>
           <Divider hidden />
-          <section className="discord">
+          <section className="discord-subscribe">
             <div className="container">
-              <h3 className="taglines">
-                Join our Discord server, and say Hello World!
-              </h3>
-              <Button.Group basic>
-                <Button
-                  content="Join Chat"
-                  icon="discussions"
-                  labelPosition="left"
-                  onClick={() =>
-                    window.open('https://discord.gg/dVnQ2Gf', '_blank')}
-                />
-              </Button.Group>
+              <Grid stackable columns={2} divided>
+                <Grid.Column>
+                  <Segment basic>
+                    <section className="discord">
+                      <div>
+                        <h3 className="taglines">
+                          Join our Discord server, and say Hello World!
+                        </h3>
+                        <Button.Group basic>
+                          <Button
+                            content="Join Chat"
+                            icon="discussions"
+                            labelPosition="left"
+                            onClick={() =>
+                              window.open(
+                                'https://discord.gg/dVnQ2Gf',
+                                '_blank',
+                              )}
+                          />
+                        </Button.Group>
+                      </div>
+                    </section>
+                  </Segment>
+                </Grid.Column>
+                <Divider vertical />
+                <Grid.Column>
+                  <Subscribe />
+                </Grid.Column>
+              </Grid>
             </div>
           </section>
-          <Subscribe />
         </main>
         <style jsx>{`
           main {
@@ -239,7 +254,7 @@ class Home extends React.Component {
             padding-left: 30px;
             padding-right: 30px;
           }
-          .discord .container {
+          .discord-subscribe .container {
             background: #FAFAFA;
           }