import React from "react";
import Layout from "@theme/Layout"; 
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import styles from "./index.module.css";
import HomepagePromises from "../components/HomepagePromises";
import HomepageFeatures from "../components/HomepageFeatures";
import Link from "@docusaurus/Link";

function HomepageHeader(){
  return (
    <header className={styles.heroBanner}>
      <div className="sections container">
        <h1 className="hero__title">Simplifiez-vous le code... <br />et faites plaisir à vos techs !</h1>
        <p className="hero__subtitle">Collaborez autour du code sur la première plateforme intégrée DevOps <i>Made in France</i>. Avec Froggit, sécurisez vos données, améliorez vos performances et protégez enfin la planète.</p>
        <div className="button-frame">
          <Link className="button button--beta button--lg" to="/tarifs">
          Je m’abonne sans engagement<br /><div className="btn-little-txt">30 jours satisfaits ou remboursés !</div>
          </Link>
        </div>
      </div>
    </header>      
  );
}

export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
    
    <Layout
      title={siteConfig.themeConfig.navbar.title}
      description={siteConfig.tagline}
    >
      <HomepageHeader />
      <main>
        <HomepagePromises />
        <HomepageFeatures />
      </main>
    </Layout>
  );
}