import React from 'react';
import Navbar from "./Navbar";
import {Link} from "react-router-dom";

const background = require('../assets/background.png')

function Home(props) {
	return (
			<div className="w-screen h-screen overflow-x-hidden bg-cover bg-center text-white flex items-center flex-col"
			     style={{backgroundImage: `url(${background})`}}>
				<Navbar history={props.history}/>
				<div
						className="flex flex-col lg:max-w-full sm:max-w-xl text-center justify-center
												lg:px-0 md:mt-32 sm:mt-20 mt-16 px-4">

					<h1 className="md:text-4xl text-2xl font-bold">Your Rainfall Data in One Place</h1>

					<div className="mt-6 sm:text-xl text-sm font-light">Look through your rainfall data with ease.</div>

					<Link to="/upload">
						<div className="rounded-full bg-blue-600 inline-block mt-4 sm:py-3 py-3 sm:px-8 px-4">
							Start Uploading Data
						</div>
					</Link>
				</div>
			</div>
	);
}

export default Home;