import React, { useState } from "react";
import Link from "next/link";
const HomeTopSlider = (props) => {
    const scrollPage = () => {
        window.scrollTo({ top: 900, behavior: 'smooth' })
      };
 return (
    <>
 <section className="site-hero-h homehead" data-stellar-background-ratio="0.5" style={{height:'auto'}}>
  <div className="row no-gutters">
    <div className="col-md-4 hero-overlay text-center">
    <img className="img-fluid d-md-block d-none" src="/images/employee.jpg"/>
            <img className="img-fluid d-md-none" src="/images/employee-mob.jpg"/>
            <Link href={'/services/employee-mobility'}><a><h1 className="hero-text heading-employee"><span className="head-text">Employee</span> <br/>MOBILITY</h1></a></Link>
    </div>
    <div className="col-md-4 text-center">
    <img className="img-fluid d-md-block d-none" src="images/3R-banner.gif"/>
            <img className="img-fluid d-md-none" src="images/3R-banner-mob.gif"/>
    </div>
    <div className="col-md-4 hero-overlay text-center">
    <img className="img-fluid d-md-block d-none" src="images/bussines.jpg"/>
            <img className="img-fluid d-md-none" src="images/bussines-mob.jpg"/>
            <Link href={'/services/business-mobility'}><a><h1 className="hero-text heading-bussines"><span className="head-text">Business</span> <br/>MOBILITY</h1></a></Link>
    </div>

    <div className="mouse-down d-md-block d-none" onClick={() => scrollPage()}>
        <div className="chevron"></div>
        <div className="chevron"></div>
        <div className="chevron"></div>
    </div>
</div>
<a className="mouse smoothscroll" href="#next">
    <div className="mouse-icon">
        <span className="mouse-wheel"></span>
    </div>
</a>
</section>


     </>
  );
};

export default HomeTopSlider;
