content: import React, { Component } from 'react';
  import Slider from 'react-slick';
  import { Grid, Col, Row, Image } from 'react-bootstrap';
  import {GetInTouchForm, WhatWeOffer, GetInTouchFormHorizontal, PastProject, SectionBreak, LandingHeader, LandingFooter} from 'components';
  import Scroll from 'react-scroll';
  
  const Element = Scroll.Element;
  export default class LandingPage extends Component {
    render() {
      const styles = require('./LandingPage.scss');
      const whyUs1 = require('./collage-left.png');
      const whyUs2 = require('./collage-right.png');
      const logo1 = require('./logo1.png');
      const logo2 = require('./logo2.png');
      const logo3 = require('./logo3.png');
      const logo4 = require('./logo4.png');
      const logo5 = require('./logo5.png');
      const logo6 = require('./logo6.png');
      const logo7 = require('./logo7.png');
      const logo8 = require('./logo8.png');
      const project1 = require('./Projects/bangalore/gallery2Artboard0-large.jpg');
      const project1small = require('./Projects/bangalore/gallery2Artboard0-thumb.jpg');
      const project2 = require('./Projects/chennai/chennaiArtboard0-large.jpg');
      const project2small = require('./Projects/chennai/chennaiArtboard0-thumb.jpg');
      const project3 = require('./Projects/hyderabad/HyderabadArtboard0-large.jpg');
      const project3small = require('./Projects/hyderabad/HyderabadArtboard0-thumb.jpg');
      const project4 = require('./Projects/mumbai/MumbaiArtboard0-large.jpg');
      const project4small = require('./Projects/mumbai/MumbaiArtboard0-thumb.jpg');
      const project5 = require('./Projects/bangalore/gallery2Artboard1-large.jpg');
      const project5small = require('./Projects/bangalore/gallery2Artboard1-thumb.jpg');
      const project6 = require('./Projects/chennai/chennaiArtboard1-large.jpg');
      const project6small = require('./Projects/chennai/chennaiArtboard1-thumb.jpg');
      const project7 = require('./Projects/bangalore/gallery2Artboard5-large.jpg');
      const project7small = require('./Projects/bangalore/gallery2Artboard5-thumb.jpg');
      const project8 = require('./Projects/mumbai/MumbaiArtboard1-large.jpg');
      const project8small = require('./Projects/mumbai/MumbaiArtboard1-thumb.jpg');
      const project9 = require('./Projects/bangalore/gallery2Artboard2-large.jpg');
      const project9small = require('./Projects/bangalore/gallery2Artboard2-thumb.jpg');
      const project10 = require('./Projects/chennai/chennaiArtboard2-large.jpg');
      const project10small = require('./Projects/chennai/chennaiArtboard2-thumb.jpg');
      const project11 = require('./Projects/hyderabad/HyderabadArtboard2-large.jpg');
      const project11small = require('./Projects/hyderabad/HyderabadArtboard2-thumb.jpg');
      const project12 = require('./Projects/bangalore/gallery2Artboard4-large.jpg');
      const project12small = require('./Projects/bangalore/gallery2Artboard4-thumb.jpg');
      const project13 = require('./Projects/bangalore/gallery2Artboard3-large.jpg');
      const project13small = require('./Projects/bangalore/gallery2Artboard3-thumb.jpg');
      const project14 = require('./Projects/chennai/chennaiArtboard3-large.jpg');
      const project14small = require('./Projects/chennai/chennaiArtboard3-thumb.jpg');
      const project15 = require('./Projects/hyderabad/HyderabadArtboard3-large.jpg');
      const project15small = require('./Projects/hyderabad/HyderabadArtboard3-thumb.jpg');
      const project16 = require('./Projects/chennai/chennaiArtboard4-large.jpg');
      const project16small = require('./Projects/chennai/chennaiArtboard4-thumb.jpg');
      const projects = [
        { name: 'Sterling Villa', thumbnail: project1small, image: project1, address: { city: 'Bangalore' }, id: 1 },
        { name: 'Casa Grande Pallagio', thumbnail: project2small, image: project2, address: { city: 'Chennai' }, id: 2 },
        { name: 'Aparna Grande', thumbnail: project3small, image: project3, address: { city: 'Hyderabad' }, id: 3 },
        { name: 'Independent Home', thumbnail: project4small, image: project4, address: { city: 'Mumbai' }, id: 4 },
        { name: 'Purva Skywood', thumbnail: project5small, image: project5, address: { city: 'Bangalore' }, id: 5 },
        { name: 'Casa Grande Pallagio', thumbnail: project6small, image: project6, address: { city: 'Chennai' }, id: 6 },
        { name: 'Keerthi Residency', thumbnail: project7small, image: project7, address: { city: 'Bangalore' }, id: 7 },
        { name: 'Independent Home', thumbnail: project8small, image: project8, address: { city: 'Mumbai' }, id: 8 },
        { name: 'Independent Home', thumbnail: project9small, image: project9, address: { city: 'Bangalore' }, id: 9 },
        { name: 'Independent Home', thumbnail: project10small, image: project10, address: { city: 'Chennai' }, id: 10 },
        { name: 'Aparna Grande', thumbnail: project11small, image: project11, address: { city: 'Hyderabad' }, id: 11 },
        { name: 'Independent Home', thumbnail: project12small, image: project12, address: { city: 'Bangalore' }, id: 12 },
        { name: 'Ozone Apartments', thumbnail: project13small, image: project13, address: { city: 'Bangalore' }, id: 13 },
        { name: 'Newry Towers', thumbnail: project14small, image: project14, address: { city: 'Chennai' }, id: 14 },
        { name: 'Aparna Grande', thumbnail: project15small, image: project15, address: { city: 'Hyderabad' }, id: 15 },
        { name: 'Casa Grande Pallagio', thumbnail: project16small, image: project16, address: { city: 'Chennai' }, id: 16 },
      ];
      const limitedProjects = [];
      for ( let i = 0; i < 4; i++) {
        limitedProjects.push(projects[i]);
      }
      const filteredImages = [];
      projects.forEach((product) => {
        const imageObject = {};
        const address = product.address.city;
        imageObject.image = product.image;
        imageObject.description = product.name + ', ' + address;
        filteredImages.push(imageObject);
      });
      let indexMobile = -1;
      let indexBig = -1;
      const mobileProjects = limitedProjects.map((project) => {
        indexMobile++;
        return (
          <div className={styles.mobileProjects} key={ project._id ? project._id : project.id}>
            <PastProject projectImages={filteredImages} projectTitle={project.name} projectHeroImage={project.thumbnail} projectAddress={project.address ? project.address.city : 'Not Available'} startIndex={indexMobile}/>
          </div>
        );
      });
      const PastProjects = projects.map((project) => {
        indexBig++;
        return (
          <div key={ project._id ? project._id : project.id} >
            <PastProject projectImages={filteredImages} projectTitle={project.name} projectHeroImage={project.thumbnail ? project.thumbnail : project.image } projectAddress={project.address ? project.address.city : 'Not Available'} startIndex={indexBig} />
          </div>
        );
      });
      const settings = {
        dots: true,
        variableWidth: false,
        autoplay: false,
        autoplaySpeed: 9000,
        arrows: true,
        dotsClass: styles.slides,
        responsive: [
          { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: false }},
          { breakpoint: 1025, settings: { slidesToShow: 3, slidesToScroll: 3 }},
          { breakpoint: 10000, settings: { slidesToShow: 4, slidesToScroll: 4 }}
        ]
      };
      const settingsMobile = {
        dots: true,
        variableWidth: false,
        autoplay: false,
        autoplaySpeed: 9000,
        arrows: true,
        dotsClass: styles.slides,
        responsive: [
          { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1 }},
          { breakpoint: 1023, settings: { slidesToShow: 2, slidesToScroll: 2 }}
        ]
      };
      return (
        <div>
        <LandingHeader/>
          <div className={styles.landingPage}>
            <Element name="home" className="element" >
              <Grid id="home" fluid className = {styles.bannerWrapper}>
                <Row fluid className={styles.heroSection}>
                  <Col className = {styles.dreamHomeWrapper} md={7} mdOffset={1} sm={7}>
                    <div className = {styles.dreamHome}>
                      <h1><strong>YOUR DREAM HOME</strong></h1>
                      <h1 className = {styles.heading2}>IS A STEP AWAY</h1>
                    </div>
                  </Col>
                  <Col className = {styles.leadForm} md={4} sm={5}>
                    <GetInTouchForm title={'MEET A DESIGNER'}/>
                  </Col>
                </Row>
                <Row className={styles.whatWeOffer}>
                  <WhatWeOffer/>
                </Row>
                <SectionBreak />
              </Grid>
            </Element>
            <Grid fluid className={styles.whatWeOfferMobile}>
              <Row>
                <Col xs={12}>
                  <div className={styles.mobileHeadline}>
                      <h2>WE OFFER</h2>
                  </div>
                </Col>
              </Row>
              <Row>
                <div className={styles.whatWeOffer}>
                  <WhatWeOffer/>
                </div>
              </Row>
            </Grid>
            <Element name="howItWorks" className="element">
              <Grid fluid id="howItWorks" className={styles.howItWorks}>
                <Row className={styles.headingHowWorks}>
                  <Col md={12}>
                    <h2>HOW IT WORKS</h2>
                    <p>THREE STEPS TO A BEAUTIFUL HOME</p>
                  </Col>
                </Row>
                <Row className={styles.howItWorksProcess}>
                  <Col md={4}>
                    <div className={styles.wrapper}>
                      <div className={styles.hw1}/>
                      <h3>MEET</h3>
                      <p>your designer and discuss your lifestyle needs</p>
                    </div>
                  </Col>
                  <Col md={4}>
                    <div className={styles.wrapper}>
                      <div className={styles.hw2}/>
                      <h3>FINALISE</h3>
                      <p>designs for your home</p>
                    </div>
                  </Col>
                  <Col md={4}>
                    <div className={styles.wrapper}>
                      <div className={styles.hw3}/>
                      <h3>COUNTDOWN</h3>
                      <p>45 days to handover</p>
                    </div>
                  </Col>
                </Row>
              </Grid>
            </Element>
            <Grid fluid id="whyHomelane" className={styles.whyHomelane}>
              <Row className={styles.headingWhy}>
                <Col md={12}><h1>WHY HOMELANE?</h1></Col>
              </Row>
              <Row className={styles.whyContent}>
                <Col lg={3} mdHidden smHidden xsHidden>
                  <Image responsive className={styles.logoImage} src={whyUs1} height={365} width={265}/>
                </Col>
                <Col lg={3} md={6} xs={6} sm={6}>
                  <div className={styles.features}>
                    <div className = {styles.homes_icon}/>
                    <h3>1,000 Happy Customers in 2 Years</h3>
                  </div>
                  <div className={styles.features}>
                    <div className = {styles.fortyfive_icon}/>
                    <h3>45-Day Installation Guarantee</h3>
                  </div>
                  <div className={styles.features}>
                    <div className = {styles.installation_icon}/>
                    <h3>Design, Manufacturing & Installation</h3>
                  </div>
                </Col>
                <Col lg={3} md={6} xs={6} sm={6}>
                  <div className={styles.features}>
                    <div className = {styles.designers_icon}/>
                    <h3>150+ Expert Designers On-Board</h3>
                  </div>
                  <div className={styles.features}>
                    <div className = {styles.fiveyear_icon}/>
                    <h3>5-Year Warranty on All Products</h3>
                  </div>
                  <div className={styles.features}>
                    <div className = {styles.service_icon}/>
                    <h3>Post-installation Service Guaranteed</h3>
                  </div>
                </Col>
                <Col lg={3} mdHidden smHidden xsHidden>
                  <Image responsive className={styles.logoImage} src={whyUs2} height={365} width={265}/>
                </Col>
              </Row>
            </Grid>
            <Grid fluid id="pastProjects" className={styles.ourPride}>
              <Row className={styles.headingPride}>
                <Col md={12}><h1>OUR PRIDE</h1><p>A GLIMPSE OF OUR PROJECTS</p></Col>
              </Row>
              <Row className={styles.projectSlider}>
                <Slider {...settings}>
                  { PastProjects }
                </Slider>
              </Row>
              <Row className={styles.projectsMobile}>
                <Slider {...settingsMobile}>
                  { mobileProjects }
                </Slider>
              </Row>
            </Grid>
            <Grid fluid id="testimonials" className={styles.testimonials}>
              <Row className={styles.headingtestimonials}>
                <Col md={12}><h1>FOR THE RECORD</h1></Col>
              </Row>
              <Row className={styles.youtubeTestimonials}>
                <Col md={6}>
                  <div className={styles.videos}>
                    <iframe src="https://www.youtube.com/embed/nErQ9tW-BeY?rel=0" frameBorder={0} allowFullScreen/>
                  </div>
                </Col>
                <Col md={6}>
                  <div className={styles.videos}>
                    <iframe src="https://www.youtube.com/embed/LKAEnK3Ju80?rel=0" frameBorder={0} allowFullScreen/>
                  </div>
                </Col>
              </Row>
            </Grid>
            <Grid fluid className={styles.weAreCovered}>
              <Row className={styles.headingCovered}>
                <Col md={12}><h1>WE'RE COVERED!</h1></Col>
              </Row>
              <Row className={styles.coveredImages}>
                <Col md={3} xs={6} className={styles.alignVertical}>
                  <Image responsive className={styles.logoImage} src={logo4}/>
                </Col>
                <Col md={3} xs={6} className={styles.alignVertical}>
                  <Image responsive className={styles.logoImage} src={logo5}/>
                </Col>
                <Col md={3} xs={6} className={styles.alignVertical}>
                  <Image responsive className={styles.logoImage} src={logo7}/>
                </Col>
                <Col md={3} xs={6} className={styles.alignVertical}>
                  <Image responsive className={styles.logoImage} src={logo1}/>
                </Col>
              </Row>
              <Row className={styles.coveredImages}>
                <Col md={3} xs={6} className={styles.alignVertical}>
                  <Image responsive className={styles.logoImage} src={logo2}/>
                </Col>
                <Col md={3} xs={6} className={styles.alignVertical}>
                  <Image responsive className={styles.logoImage} src={logo3}/>
                </Col>
                <Col md={3} xs={6} className={styles.alignVertical}>
                  <Image responsive className={styles.logoImage} src={logo6}/>
                </Col>
                <Col md={3} xs={6} className={styles.alignVertical}>
                  <Image responsive className={styles.logoImage} src={logo8}/>
                </Col>
              </Row>
            </Grid>
            <Grid fluid className={styles.backToTop}>
              <Row className = {styles.topSection} >
                <Col lg={12}>
                    <a href="#" className={styles.btnstyle + ' btn btn-transparent btn-big'}><span className={styles.arrow_up}></span>BACK TO TOP</a>
                </Col>
              </Row>
            </Grid>
            <Grid fluid className={styles.horizontalLeadForm}>
              <Row className={styles.headingHorizontalLeadForm}>
                <Col md={12}><h1>MEET A DESIGNER</h1></Col>
              </Row>
              <Row className={styles.horizontalForm}>
                <Col md={12}>
                  <GetInTouchFormHorizontal />
                </Col>
              </Row>
            </Grid>
          </div>
          <LandingFooter/>
        </div>
      );
    }
  }
  