
import NavBar from "./NavBar";
import { Link } from "react-router";

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="/" />  */}
                <Link to="/game" style={{
                    backgroundColor: 'var(--color-yellow)',
                    borderRadius: '8px',
                    borderWidth: '0',
                    color: 'var(--color-black)',
                    cursor: 'pointer',
                    display: 'inline-block',
                    fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
                    fontSize: '20px',
                    fontWeight: '500',
                    lineHeight: '20px',
                    listStyle: 'none',
                    margin: '0',
                    padding: '10px 12px',
                    textAlign: 'center',
                    transition: 'all 200ms',
                    verticalAlign: 'baseline',
                    whiteSpace: 'nowrap',
                    userSelect: 'none',
                    WebkitUserSelect: 'none',
                    touchAction: 'manipulation',
                    textDecoration: 'none',
                }}>Aller au jeu</Link>
                <Link to="/articles" style={{
                    backgroundColor: 'var(--color-darkblue)',
                    borderRadius: '8px',
                    borderWidth: '0',
                    color: 'var(--color-white)',
                    cursor: 'pointer',
                    display: 'inline-block',
                    fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
                    fontSize: '20px',
                    fontWeight: '500',
                    lineHeight: '20px',
                    listStyle: 'none',
                    margin: '0',
                    padding: '10px 12px',
                    textAlign: 'center',
                    transition: 'all 200ms',
                    verticalAlign: 'baseline',
                    whiteSpace: 'nowrap',
                    userSelect: 'none',
                    WebkitUserSelect: 'none',
                    touchAction: 'manipulation',
                    textDecoration: 'none',
                }}>Lire les articles</Link>

            </div>
        </div></div>
    )
}