import Button from "./Button";
import NavBar from "./NavBar";

export default function FstSection () {
    return (
        <div style={{
            textAlign: "center",
            color: "yellow",
            backgroundImage: "url('/pictures/sea.gif')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat",
            height: "75vh"}}>
        <NavBar />
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
            }}
        >
            <div style={{height:"150px"}} />
            <h1
                style={{
                    fontSize: "3em",
                    fontWeight: "bold",
                    textShadow: "2px 2px 4px #000000",
                    fontFamily: "Helvetica",
                }}

            >Help us to save our oceans</h1><br />
            <div style={{display:"flex", justifyContent: "center", gap: "20px"}}>
                <Button color="primary" children={"Aller au jeu"} url="/game" />
                <Button color="secondary" children={"Lire les articles"} url="/" /> 
            </div>
        </div></div>
    )
}