content: import React, { Component } from 'react';
  import {Motion,spring} from 'react-motion';
  
  var HomeJSON = [];
  HomeJSON['en'] = require('../data/en/home.json');
  HomeJSON['pt'] = require('../data/pt/home.json');
  HomeJSON['es'] = require('../data/es/home.json');
  HomeJSON['fr'] = require('../data/fr/home.json');
  
  //All Images
  import {getSlideImage,getArrowImage} from "./GalleryImages"
  
  const springSettings = {
      stiffness: 100,
      damping: 40
  };
  
  const widthInit = 1280;
  const heightInit = 677;
  
  class Home extends Component {
  
      countdown = null;
      constructor() {
          super();
          let w = this.getInnerWidth();
          let h = this.getAutoHeight();
          this.state = {
              width:  w,
              height: h,
              photos: [
                  [w, h],
                  [w, h],
                  [w, h],
                  [w, h],
              ],
              currPhoto: 0
          }
  
      }
  
      componentDidMount(){
          window.scrollTo(0,0);
          this.countdown = setInterval(this.next.bind(this), 6000);
      }
  
      componentWillUnmount() {
          clearInterval(this.countdown);
      }
  
      updateDimensions() {
          var w = this.getInnerWidth();
          var h = this.getAutoHeight();
            this.setState({
                width: w,
                height: h,
                photos: [
                    [w, h],
                    [w, h],
                    [w, h],
                    [w, h],
                ],
            });
      }
  
      next() {
          var photoIndex = this.state.currPhoto + 1;
          if(photoIndex > 3) photoIndex = 0;
          this.setState({
            currPhoto: photoIndex,
        });
        this.updateDimensions();
        this.resetTimer();
      }
  
      previous() {
          var photoIndex = this.state.currPhoto - 1;
          if(photoIndex < 0) photoIndex = 3;
          this.setState({
            currPhoto: photoIndex,
        });
        this.updateDimensions();
        this.resetTimer();
      }
  
      resetTimer() {
          clearInterval(this.countdown);
          this.countdown = setInterval(this.next.bind(this), 6000);
      }
  
      getInnerWidth(){
          return window.innerWidth;
      }
  
      getAutoHeight() {
          // 1280 = 500
          // 677 = x
          return this.getInnerWidth() * heightInit  / widthInit;
      }
  
      proportionsOfWidth(val) {
          // 1280 = 500
          // 677 = x
          return val * this.getAutoHeight()  / widthInit;
      }
  
      render() {
  
          var buttonPrev = {
              top: `${this.proportionsOfWidth(850)}px`,//top: 450+'px',
              zIndex: 50,
              padding: 1+'px',
              position: 'absolute',
              left: 20+'px',
          };
  
          var buttonNext = {
              top: `${this.proportionsOfWidth(850)}px`,//top: 450+'px',
              zIndex: 50,
              padding: 1+'px',
              position: 'absolute',
              right: 20+'px',
          };
  
          //REACT MOTION
          const { photos, currPhoto} = this.state;
          const [currWidth, currHeight] = photos[currPhoto];
          const widths = photos.map(
              ([origW, origH]) => currHeight / origH * origW
          );
          const leftStartCoords = widths.slice(0, currPhoto).reduce((sum, width) => sum - width, 0);
          let configs = [];
          photos.reduce((prevLeft, [origW, origH], i) => {
              configs.push({
                  left: spring(prevLeft, springSettings),
                  height: spring(currHeight, springSettings),
                  width: spring(widths[i], springSettings),
              });
              return prevLeft + widths[i];
          }, leftStartCoords);
  
  
          return (
              <div>
                  <button style={buttonPrev} onClick={() => this.previous()}><img role="presentation" src={getArrowImage('left')}/></button>
                  <button style={buttonNext} onClick={() => this.next()}><img role="presentation" src={getArrowImage('right')}/></button>
          		<div className="slider fullwidthbanner-container roundedcorners" style={{overflow: 'visible'}} >
          			<div className="fullwidthbanner revslider-initialised tp-simpleresponsive">
                          <Motion style={{height: spring(currHeight), width: spring(currWidth)}}>
                          {container =>
                            <div className="demo4-inner" style={container}>
                              {configs.map((style, i) =>
                                    <Motion key={i} style={style}>
                                      {style => <img role="presentation" className="demo4-photo" width={this.state.width} src={getSlideImage(i)} style={style} />}
                                    </Motion>
                              )}
                            </div>
                          }
                          </Motion>
          			</div>
          		</div>
                  <br/>
  
          		<section className="nopadding-bottom">
          			<div className="container">
          				<header className="text-center margin-bottom-40">
          					<h1 className="weight-300">Welcome to Smarty</h1>
          					<h2 className="weight-300 letter-spacing-1 size-13"><span id="index_home-title">THE MOST COMPLETE TEMPLATE EVER</span></h2>
          				</header>
  
          				<div className="text-center">
          					<p className="lead">Smarty has powerful options &amp; tools, unlimited designs, responsive framework and amazing support. We are dedicated to providing you with the best experience possible. Read below to find out why the skys the limit when using Smarty.</p>
  
          					<div className="margin-top-40">
          						<img className="img-responsive" src="assets/images/_index/ipad.jpg" alt="welcome" />
          					</div>
  
          				</div>
          			</div>
          		</section>
          		// WELCOME
  
  
          		<section className="alternate">
          			<div className="container">
  
          				<div className="row">
  
          					<div className="col-md-4">
  
          						<div className="box-icon box-icon-side box-icon-color box-icon-round">
          							<i className="fa fa-tablet"></i>
          							<a className="box-icon-title" href="#">
          								<h2>Fully Reposnive</h2>
          							</a>
          							<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
          							<a className="box-icon-more font-lato weight-300" href="#">Learn More</a>
          						</div>
  
          					</div>
  
          					<div className="col-md-4">
  
          						<div className="box-icon box-icon-side box-icon-color box-icon-round">
          							<i className="fa fa-tint"></i>
          							<a className="box-icon-title" href="#">
          								<h2>Reusable Elements</h2>
          							</a>
          							<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
          							<a className="box-icon-more font-lato weight-300" href="#">Learn More</a>
          						</div>
  
          					</div>
  
          					<div className="col-md-4">
  
          						<div className="box-icon box-icon-side box-icon-color box-icon-round">
          							<i className="fa fa-cogs"></i>
          							<a className="box-icon-title" href="#">
          								<h2>Multipurpose</h2>
          							</a>
          							<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
          							<a className="box-icon-more font-lato weight-300" href="#">Learn More</a>
          						</div>
  
          					</div>
  
          				</div>
  
          			</div>
          		</section>
              </div>
          );
      }
  }
  
  export default Home;
  