text: import React from "react"
  import Typing from "react-typing-animation"
  import Fade from "react-reveal/Fade"
  import * as Scroll from "react-scroll"
  import Linux from "../../../static/images/platform_linux.svg"
  import style from "../../styles/sections/landing_banner.module.scss"
  
  let ScrollLink = Scroll.Link;
  
  const LandingBanner = () => (
    <div className={style.wrapper}>
      <div className={style.wrapper_inner}>
        <div className={style.content_wrapper}>
          <Fade bottom>
            <div className={style.title_wrapper}>
              <span className={style.title}>{"Never pay for"}</span>
              <Typing className={"landing_page_title_typing"} loop>
                <span>{"FreePN"}</span>
                <Typing.Delay ms={3000} />
                <Typing.Backspace count={7} />
                <span>{"privacy"}</span>
                <Typing.Delay ms={1000} />
                <Typing.Backspace count={8} />
                <span>{"security"}</span>
                <Typing.Delay ms={1000} />
                <Typing.Backspace count={9} />
                <span>{"anonymity"}</span>
                <Typing.Delay ms={1000} />
                <Typing.Backspace count={10} />
                <span>{"freedom"}</span>
                <Typing.Delay ms={1000} />
                <Typing.Backspace count={8} />
              </Typing>
            </div>
            <hr className={style.divider} />
            <div className={style.subtitle}>FreePN is the <em>first</em> open-source peer-to-peer VPN service.<br />It's also fast, secure, and completely free.</div>
            <div className={style.download_links_wrapper}>
              <ScrollLink className={style.download_link} to={"download"} smooth={true} offset={50} duration={500}>
                <img className={style.platform_icon} src={Linux} alt={"Linux"}/>
                <span>{"Download FreePN"}</span>
              </ScrollLink>
              <ScrollLink className={style.download_link_all_platforms} to={"download"} smooth={true} offset={50} duration={500}><span>View all platforms</span></ScrollLink>
            </div>
          </Fade>
        </div>
      </div>
    </div>
  )
  
  export default LandingBanner
  