feat: new banner with stylizing text

feat: add button beta in frame color

docusaurus.config.js

@@ -3,8 +3,8 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
-  title: "Simplifiez-vous le code !",
-  tagline: "Améliorez la coopération de vos équipes autour du code source, sans gérer votre forge logicielle !",
+  title: "Simplifiez-vous le code",
+  tagline: "",
   url: process.env.DOCUSAURUS_URL || "https://froggit.fr",
   baseUrl: process.env.DOCUSAURUS_BASEURL || "/",
   onBrokenLinks: "throw",

src/css/custom.css

@@ -125,6 +125,10 @@ ul {
   padding-bottom: 20px;
 }
 
+.btn-little-txt {
+  font-size: small;
+}
+
 /***** BUTTON *****/
 .button {
   margin: 10px;
@@ -136,15 +140,15 @@ ul {
 }
 
 .button--beta {
-  background-color: var(--ifm-color-success);
   border-color: var(--ifm-color-success);
-  color: var(--ifm-color-frame);
   border-style: none;
+  background-color: var(--ifm-color-frame);
+  color: var(--ifm-color-black);
 }
 
 .button--beta:hover {
   color: var(--ifm-color-secondary);
-  background-color: var(--ifm-color-info);
+  background-color: var(--ifm-color-success);
   border-style: none;
 }
 

src/pages/index.js

@@ -11,15 +11,13 @@ function HomepageHeader(){
   return (
     <header className={styles.heroBanner}>
       <div className="sections container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <Link className="button button--warning button--lg" to="https://youtu.be/gOCOai6wX_w">
-              ▶️ En savoir plus
-        </Link>
-        <Link className="button button--beta button--lg" to="http://beta.froggit.fr/">
-              Rejoindre la bêta gratuite 🧪
-        </Link>
-
+        <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>      
   );