src/pages/index.js

import React, { Fragment } from "react"
import { Link } from "gatsby"
import { Page } from "src/ui/page"
import { Video } from "src/ui/header/video"
import { Header } from "src/ui/header"
import { Idea } from "src/ui/idea"

import { StylishDesign } from "src/ui/stylish-design"
import { HomeStep1 } from "src/ui/home-step-1"
import { HomeStep2 } from "src/ui/home-step-2"
import { HomeStep3 } from "src/ui/home-step-3"
import { Features } from "src/ui/features"
import { Helmet } from "src/features/helmet"
import { Footer } from "../ui/footer"

const IndexPage = () => {
  return (
    <Fragment>
      <Helmet></Helmet>
      <Page>
        <Header withBackgroundVideo>
          <Video></Video>
        </Header>
        <main className="main js-main-page mod--update-index">
          <div className="main__bg">
            <Idea></Idea>
            <StylishDesign>
              <HomeStep1></HomeStep1>
            </StylishDesign>
            <StylishDesign className="mod--light-fon">
              <HomeStep2></HomeStep2>
            </StylishDesign>
            <StylishDesign>
              <HomeStep3></HomeStep3>
            </StylishDesign>
          </div>
          <Features></Features>
        </main>
        <Footer></Footer>
      </Page>
      <Link to="/locale">TO LOCALE PAGE</Link>
    </Fragment>
  )
}

export default IndexPage