import {faUser, faUsers} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {Trans, useTranslation} from "react-i18next";

export const Home = () => {
    const {t} = useTranslation();

    return <>
        <div className="container">
            <div style={{textAlign: "center", margin: "2em"}}>
                <h1 className="text-green-800 text-4xl">{t("home.welcome_message")}</h1>
            </div>
            <div className="row" style={{marginTop: "3em"}}>
                <div className="col" style={{backgroundColor: "#FFFFFF79", padding: "0", borderRadius: "3em 3em 1em 1em", margin: "1em"}}>
                    <div className="align-content-center"
                         style={{textAlign: "center", backgroundColor: "#FFFFFF79", padding: "1em 1em 0em 1em", borderRadius: "3em 3em 0 0"}}>
                        <h2><FontAwesomeIcon icon={faUser} size="2xl"/></h2>
                        <h2>{t("home.header1")}</h2>
                    </div>
                    <p style={{padding: "0.5em 1em 0.5em 1em"}}><Trans i18nKey="home.text1"></Trans></p>
                </div>
                <div className="col" style={{backgroundColor: "#FFFFFF79", padding: "0", borderRadius: "3em 3em 1em 1em", margin: "1em"}}>
                    <div className="align-content-center"
                         style={{textAlign: "center", backgroundColor: "#FFFFFF79", padding: "1em 1em 0em 1em", borderRadius: "3em 3em 0 0"}}>
                        <h2><FontAwesomeIcon icon={faUsers} size="2xl"/></h2>
                        <h2>{t("home.header2")}</h2>
                    </div>
                    <p style={{padding: "0.5em 1em 0.5em 1em"}}><Trans i18nKey="home.text2">Cliquez <a href="/affiliation">içi</a> pour </Trans></p>
                </div>
            </div>
        </div>
        <div style={{
            backgroundImage: "url('home_back.jpg')",
            backgroundRepeat: "no-repeat",
            backgroundAttachment: "fixed",
            backgroundSize: "cover",
            backgroundPosition: "center",
            position: "absolute",
            height: "100vh",
            width: "100vw",
            top: 0,
            left: 0,
            zIndex: -2
        }}>
        </div>
    </>
};
