footer in reactjs

import React, { Component } from 'react';

const usedImg = 'http://placehold.it/100x100';
export default () => (
    <footer>
    <section className="ph3 ph5-ns pb4 w-100 pt4 bt b--black-10">
        <div className="bg-transparent w-100 tc ph5-ns pv5-ns">
        <h3 className="mb3 ttu">used by people at</h3>
            <div className="w-100 center">
                <div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div>
            </div>
            <div className="w-100 center">
                <div className="pa3 dib w-25-m w-10-l">
                    <img src= {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div><div className="pa3 dib w-25-m w-10-l">
                    <img src = {usedImg} />
                </div>
            </div>
        </div>
        //section 1
        <section className="bg-dark-green ph3 ph5-ns pv3 pv5-ns w-100">
            <h3 className="mb3 f4 ttu">testimonials</h3>
            <article className="w-100 black-80 bb b--black-20 cf pb4-ns">
                <p className="f4 f2-m f-5-l db w-100 lh-copy lh-title-l measure mb4 fw6 mt0">
                     Here's why I think designing systems with tools/frameworks like Tachyons
                    is a Good Idea.
                </p>
                <article className="fl w-100 w-50-l dib">
                    <p className="f6 lh-copy measure f5 f4-ns">
                        Design Systems break as they scale (either scaling org or scaling product) because new components/variants of a component are introduced. Those variants sometimes (read: often) go undocumented, leading to duplication when that component/variant is needed (and created) again. Even when the component is documented, documenting effectively often means dozens/hundreds of instances to capture all states/variants. Systems like Tachyons et al. approach this problem by instead documenting and limiting *properties* of components. (I like to think of this as "subatomic" design.)
                    </p>
                    <h3 className="mt3-ns">
                         Daniel Eden <br /><small className="f6 fw5">Designer at Facebook </small>
                    </h3>
                </article><article className="fl w-100 w-50-l dib">
                    <p className="f6 lh-copy measure f5 f4-ns">
                        You then create components by composing subatomic components (properties). Rather than creating a component and its variants, you simply have a comprehensive list of "ingredient" subatomic components. Those subatomic components can be combined in thousands of ways to create hundreds of components. The properties of those components are numerous, but constrained to a set of acceptable values (our subatomic components).
                    </p>
                </article>
            </article>//testimony 1
            <article className="w-100 black-80 bb b--black-20 cf pb4-ns">
                <p className="f3 f1-ns measure fw7 lh-title pv3-ns">
                     Tachyons has seriously blown my mind. Making landing pages responsive is now... somehow... actually fun?!Ian Storm Taylor Co-founder of Segment.com
                </p>
                <h3 className="mt3-ns">
                     Ian Storm Taylor
                     <br /><small className="f6 fw5">Co-founder of Segment.com</small>
                </h3>
            </article>//testimony 2
            <article className="w-100 black-80 bb b--black-20 cf pb4-ns">
                <p className="f3 f1-ns measure fw7 lh-title pv3-ns">
                     I used Tachyons for the first time on <a href="#" className="black-80 dim">goldenstaterecord.com</a>. Really fast to make big changes to the design in-flight.
                </p>
                <h3 className="mt3-ns">
                      Wilson Miner <br /><small className="f6 fw5">Digital Design - The California Sunday Magazine</small>
                </h3>
            </article>//testimony 3
            <article className="w-100 black-80 cf pb4-ns">
                <p className="f3 f1-ns measure fw7 lh-title pv3-ns">
                     Tachyons is powerful, obvious, and well documented. It's made me rethink my approach to building organized and componentized CSS. I highly recommend you try it.
                </p>
                <h3 className="mt3-ns">
                      Dustin Senos <br /><small className="f6 fw5">Designer</small>
                </h3>
            </article>//testimony 4
        </section>//section 2 name
        <section className="w-100 bg-white">
            <div className="ph3 ph5-ns pv3 pv5-ns">
                <nav className="dtc v-mid w-100 tr pt5-ns">
                <a className="f6 fw6 hover-blue link pointer black-80 mr2 mr3-m mr4-l dib">Home</a>
                <a className="f6 fw6 hover-blue link pointer black-80 mr2 mr3-m mr4-l dib">Docs</a>
                <a className="f6 fw6 hover-blue link pointer black-80 mr2 mr3-m mr4-l dib">Components</a>
                <a className="f6 fw6 hover-blue link pointer black-80 mr2 mr3-m mr4-l dib">Gallery</a>
                <a className="f6 fw6 hover-blue link pointer black-80 mr2 mr3-m mr4-l dib">Resources</a>
                <a className="f6 fw6 hover-blue link pointer black-80 mr2 mr3-m mr4-l dib">X-Ray</a>
                <a className="f6 fw6 hover-blue link pointer black-80 mr2 mr3-m mr4-l dib">Supporting Tachyons</a>
                </nav>
                <div className="w-100 mb2 mt3-ns pv3-ns">
                    <div className="bg-light-gray br3 mw3 dib">
                        <a className="github link black mr3 dim" href="https://github.com/connelevalsam/tachyons-prototype" title="star">
                            <div className="dib">
                                <svg className="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  width="16" height="16" fill:black>
                                    <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z">
                                    </path>
                                </svg>
                            </div>
                            <div className="dib fw2 b"><small>star</small></div>
                        </a>
                    </div>
                    <div className="bg-transparent dib">
                        <a href="" className="twitter bg-blue dim link dib mb2 br2 ph2 pb1 lh-solid v-top">
                            <svg className="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
                              <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
                            </svg>
                            <span className="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
                        </a>
                    </div>
                </div>//end of social media icons div
                <div>
                    <a href="" className="twitter bg-transparent grow link dib mb2 mr3-l ba br2 ph3-ns pv3-ns">
                        <svg className="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#000">
                          <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
                        </svg>
                        <span className="dib v-mid black-80 fw6" style="font-size: 16px;">Follow @connelblaze</span>
                    </a>//twitter
                    <a className="github link black-80 mr3 grow dib ba br2 mb2 ph3-ns pv3-ns" href="https://github.com/connelevalsam/tachyons-prototype" title="star">
                        <div className="dib">
                            <svg className="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  width="16" height="16" fill:black>
                                <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z">
                                </path>
                            </svg>
                        </div>
                        <div className="dib fw2 b" style="font-size: 16px;"><small>Open an issue on github</small></div>
                    </a>
                </div>//end of social contacts
            </div>
        </section>
    </section>
    </footer>
    )
// module.exports = {data: usedImg}

//-----------------------------------------------App.js------------------------------
import React, { Component } from 'react';
import Header from './components/header';
import Main from './components/body';
import Footer from './components/footer';

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    );
  }
}

export default App;