redesigns news sections

src/Components/Pages/Home.js

@@ -3,7 +3,7 @@ import React, { Component, Fragment } from "react"
 import Hero from '../Sections/Hero'
 import Cards from '../Sections/Cards'
 import UseCase from '../Sections/UseCase'
-import SectionNews from '../Sections/SectionNews'
+import News from '../Sections/News'
 import SectionContact from '../Sections/SectionContact'
 
 export default class extends Component {
@@ -16,7 +16,8 @@ export default class extends Component {
         <UseCase sectionData={supplierData} />
         <UseCase sectionData={customerData} />
         <Cards sectionData={missionData}/>
-        <SectionNews />
+        <News sectionData={mediumData}/>
+        <News sectionData={twitterData}/>
         <SectionContact />
       </Fragment>
     )
@@ -175,3 +176,27 @@ const missionData = {
     }
   ]
 }
+const mediumData = {
+  id: 'medium',
+  border: 'true',
+  background: 'white',
+  title: 'Medium',
+  description: 'Every week we post new insights about our progress, team, ideas and evaluations on Medium and Twitter. Follow us to stay up to date!',
+  button: true,
+  link_to: 'https://medium.com/nile-shopping',
+  button_text: 'Follow us',
+  media_type: 'medium',
+  post_right: true
+}
+const twitterData = {
+  id: 'twitter',
+  border: 'true',
+  background: 'light',
+  title: 'Twitter',
+  description: 'Every week we post new insights about our progress, team, ideas and evaluations on Medium and Twitter. Follow us to stay up to date!',
+  button: true,
+  link_to: 'https://twitter.com/nile_org',
+  button_text: 'Follow us',
+  media_type: 'twitter',
+  post_right: false
+}

src/Components/Sections/News.js

@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+import { Layout, Card } from 'element-react'
+import { NavLink } from 'react-router-dom'
+import Fade from 'react-reveal/Fade'
+
+export default class extends Component {
+  state = {
+    latest_article: {},
+    isLoading: false,
+    error: null,
+  }
+
+  componentDidMount() {
+    this.setState({ isLoading: true });
+    fetch('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/nile-shopping')
+       .then((res) => res.json())
+       .then((data) => {
+         const res = data.items
+         const _articles = res.filter(item => item.categories.length > 0)
+         this.setState({
+            latest_article: _articles[0],
+            isLoading: false
+          })
+        })
+    }
+
+  render () {
+    const article = this.state.latest_article
+
+    const sectionData = this.props.sectionData
+
+    const id = sectionData.id
+    const border = sectionData.border
+    const background = sectionData.background
+    const title = sectionData.title
+    const description = sectionData.description
+    const media_type = sectionData.media_type
+    const post_right = sectionData.post_right
+
+    const button = sectionData.button
+    const link_to = sectionData.link_to
+    const button_text = sectionData.button_text
+    let buttonElement
+    if (button === true) {
+      buttonElement =
+        <a
+          href={link_to}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={this.scrollTop}
+          className="el-button el-button--primary">
+          {button_text}
+        </a>
+    } else {
+      buttonElement =
+        <span></span>
+    }
+
+    const latestMedium =
+      <Layout.Col sm="18" md="12" lg="12">
+        <a target="_blank" rel="noopener noreferrer" href={article.link} className="medium-card" style={{textDecoration: 'none'}} >
+          <Card bodyStyle={{ padding: 0 }}>
+            <img alt="medium cover" src={article.thumbnail} className="image" />
+            <div className="card-body" style={{ padding: 14 }}>
+              <h4>{article.title}</h4>
+              <time className="time">Published by {article.author}, on {article.pubDate}</time>
+            </div>
+          </Card>
+        </a>
+      </Layout.Col>
+
+    const latestTwitter =
+      <Layout.Col sm="18" md="12" lg="12">
+        <a
+          data-height="20"
+          width="100%"
+          className="twitter-timeline"
+          href="https://twitter.com/nile_org"
+          data-widget-id="0000000000"
+          data-tweet-limit="1">Latest tweet
+        </a>
+      </Layout.Col>
+
+    let latestPost
+    if (media_type === "medium") {
+      latestPost = latestMedium
+    } else {
+      latestPost = latestTwitter
+    }
+
+    return (
+      <div
+        id={id}
+        className={`
+          section
+          section__${background}
+          ${border ? 'section__border-top' : ''}
+          ${post_right ? '' : 'reverse-mobile'}
+          section__break_sm
+        `}
+      >
+        <div className="container">
+          <Layout.Row gutter="60">
+            {post_right ? '' : latestPost}
+            <Layout.Col sm="18" md="12" lg="12" style={{marginBottom: 50}}>
+              <Fade top>
+                <h2 style={{marginBottom: 10}}>{title}</h2>
+                <p style={{marginBottom: 30}}>
+                  {description}
+                </p>
+              </Fade>
+              <Fade bottom>
+                {buttonElement}
+              </Fade>
+            </Layout.Col>
+            {post_right ? latestPost : ''}
+          </Layout.Row>
+        </div>
+      </div>
+    )
+  }
+}

src/Components/Sections/SectionContact.js

@@ -7,7 +7,7 @@ import icon from '../../assets/icons/discord.svg'
 export default class extends Component {
   render () {
     return (
-      <div className="section section__light section__border-top" id="contact">
+      <div className="section section__border-top" id="contact">
         <div className="container">
           <Layout.Row type="flex" justify="center" >
             <Layout.Col sm="18" md="12" lg="12" className="center">

src/styles/sections/hero.scss

@@ -73,6 +73,9 @@
 
 @media only screen and (max-width: 992px ) {
   .section--hero {
+    .container .el-row {
+      align-items: flex-start;
+    }
     .hero-divider {
       bottom: -1px;
     }

src/styles/sections/news.scss

@@ -19,3 +19,12 @@
   border-radius: var(--border-radius);
   margin-bottom: 30px;
 }
+
+
+@media only screen and (max-width: 992px ) {
+  .section__break_sm {
+    .container .el-row {
+
+    }
+  }
+}

src/styles/sections/sections.scss

@@ -18,12 +18,34 @@
   &__border-top {
     border-top: var(--border-sm_dark);
   }
+
 }
 
 // ------------------------------------------
 //  M O B I L E
 // ------------------------------------------
 
+@media only screen and (max-width: 992px) {
+  .section {
+    &.reverse-mobile {
+      .container {
+        .el-row {
+          display: flex;
+          flex-direction: column-reverse;
+          align-items: center;
+        }
+      }
+    }
+    .container {
+      .el-row {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
+  }
+}
+
 @media only screen and (max-width: 520px) {
   .section {
     padding: 30px 0;