import React from 'react';
import QueueAnim from 'rc-queue-anim';

const IconBoxes = () => (
  <article className="article">
    <h2 className="article-title">Icon Boxes</h2>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-outline">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-outline ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-outline ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-border">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-border ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-border ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-rounded">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-rounded ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-rounded ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-plain ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-plain ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>


    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><img src="assets/images-demo/image-icons/imac.png" alt="Responsive Layout" /></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><img src="assets/images-demo/image-icons/settings.png" alt="Retina Graphics" /></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><img src="assets/images-demo/image-icons/package.png" alt="Powerful Performance" /></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-small ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-small ibox-plain ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-small ibox-plain ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>

    <div className="divider divider-lg" />
    <div className="row">

      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">devices</i></a>
              </div>
              <h3>Responsive Design</h3>
              <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
            </div>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-dark">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">settings</i></a>
              </div>
              <h3>Easy to Customize</h3>
              <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
            </div>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-light">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">code</i></a>
              </div>
              <h3>Clean code</h3>
              <p>Clean code with popular Style Guide recommend by official team</p>
            </div>
          </div>
        </div>
      </div>

    </div>

  </article>
);

const CenteredIconBoxes = () => (
  <article className="article">
    <h2 className="article-title">Centered Icon Boxes</h2>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-outline">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-outline ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-outline ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-border">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-border ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-border ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-rounded">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-rounded ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-rounded ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-plain ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-plain ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>

    <div className="divider divider-lg" />
    <div className="row">

      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-center">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">devices</i></a>
              </div>
              <h3>Responsive Design</h3>
              <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
            </div>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-center ibox-dark">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">settings</i></a>
              </div>
              <h3>Easy to Customize</h3>
              <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
            </div>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-center ibox-light">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">code</i></a>
              </div>
              <h3>Clean code</h3>
              <p>Clean code with popular Style Guide recommend by official team</p>
            </div>
          </div>
        </div>
      </div>

    </div>

  </article>
);

const LargeSize = () => (
  <article className="article">
    <h2 className="article-title">Large Size</h2>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-lg">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-outline">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-outline ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-outline ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-border">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-border ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-border ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-rounded">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-rounded ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-rounded ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>

    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-plain ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-lg ibox-plain ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-plain ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-plain ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>

    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-outline">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-outline ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-outline ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-border">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-border ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-border ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-rounded">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-rounded ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-rounded ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>
    <div className="row">

      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-plain">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">devices</i></a>
          </div>
          <h3>Responsive Design</h3>
          <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-plain ibox-dark">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">settings</i></a>
          </div>
          <h3>Easy to Customize</h3>
          <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="icon-box ibox-center ibox-lg ibox-plain ibox-light">
          <div className="ibox-icon">
            <a href="javascript:;"><i className="material-icons">code</i></a>
          </div>
          <h3>Clean code</h3>
          <p>Clean code with popular Style Guide recommend by official team</p>
        </div>
      </div>

    </div>

    <div className="divider divider-lg" />
    <div className="row">

      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-center ibox-lg">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">devices</i></a>
              </div>
              <h3>Responsive Design</h3>
              <p>Responsive design allows your website to fit on any screen and still be readable and usable.</p>
            </div>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-center ibox-lg ibox-dark">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">settings</i></a>
              </div>
              <h3>Easy to Customize</h3>
              <p>Customizer make it easy. Build your own style simply by changing a few settings in the customizer</p>
            </div>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-center ibox-lg ibox-light">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">code</i></a>
              </div>
              <h3>Clean code</h3>
              <p>Clean code with popular Style Guide recommend by official team</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </article>
);

const Page = () => (
  <section className="container-fluid with-maxwidth chapter">
    <QueueAnim type="bottom" className="ui-animate">
      <div key="1"><IconBoxes /></div>
      <div key="2"><CenteredIconBoxes /></div>
      <div key="3"><LargeSize /></div>
    </QueueAnim>
  </section>
);

module.exports = Page;
