docusaurus.config.js

@@ -41,6 +41,10 @@ module.exports = {
               label: "Offre Dédiée",
               to: "/dedie"
             },
+            {
+              label: "Essai Gratuit",
+              to: "/essai"
+            },
           ],
         },
         {label: "Doc", position: "left", type: "doc", docId: "intro", },
@@ -109,6 +113,10 @@ module.exports = {
         {
           title: "Offres et Tarifs",
           items: [
+            {
+              label: "Essai Gratuit",
+              to: "/essai"
+            },
             {
               label: "Offre SaaS",
               to: "/tarifs",

src/css/custom.css

@@ -239,3 +239,7 @@ ul {
   font-size: 1.2rem;
   font-weight: 900;
 }
+
+.btn-little-txt {
+  font-size: 1rem;
+}

src/css/tarifs.css

@@ -121,3 +121,13 @@
     box-shadow: var(--ifm-global-shadow-tl);
     border-radius: var(--ifm-card-border-radius);
 }
+
+.free-trial-container {
+  width: 100%;
+  display: flex;
+}
+
+.free-trial {
+  font-size: 1.3rem;
+  margin: 0px auto 2rem auto;
+}

src/pages/essai.mdx

+---
+title: "Essai gratuit"
+description: "Essayez Froggit gratuitement et sans carte bleue"
+keywords: Lydra, SaaS, pricing, tarifs, plans, git, GitLab, Mattermost
+---
+import TextRight from '@site/src/components/TextRight';
+
+
+# Découvrez Froggit : votre allié pour versionner, héberger et tester vote code !
+
+Vous recherchez une plateforme robuste pour héberger et tester votre code en toute simplicité ? Ne cherchez pas plus loin ! Froggit est là pour vous.
+
+<h2> ✨ Commencez dès maintenant avec un essai gratuit de 30 jours, sans avoir besoin de fournir vos informations de carte bancaire.&nbsp;✨</h2>
+
+Nous mettons tout en œuvre pour que votre expérience soit sans tracas et sans engagement financier. Explorez toutes les fonctionnalités puissantes de Froggit.
+
+<TextRight aria-hidden="true" img="img/pages/essai/love.png">
+
+<form method="post" action="https://systeme.io/embedded/10738771/subscription">
+<input aria-label="Adresse email" type="email" name="email" placeholder="Email" required="required" />
+<input aria-label="Nom dutilisateur" type="text" name="username" placeholder="Nom d'utilisateur" required="required" />
+<input aria-label="Prénom" type="text" name="first_name" placeholder="Prénom" required="required" />
+<button aria-label="Soumettre" type="submit" class="margin-bottom--md button button--beta button--lg">Je veux essayer Froggit gratuitement</button>
+</form>
+
+
+Les limitations de votre compte d’essai sont :  
+- Vous ne pouvez pas créer de groupes. 
+- Vous ne pouvez pas créer plus de 6 projets.  
+
+</TextRight>
+
+
+<h2> Pourquoi opter pour Froggit ? </h2>
+
+- 🚀 **Hébergement de Code :** Hébergez vos projets en toute sécurité et collaborez en équipe.
+- 📈 **Tests Automatisés :** Évaluez la qualité de votre code grâce à notre intégration continue.
+- 📧 **Gestion de Projets Agile :** Organisez vos travaux de manière efficace et améliorez votre productivité.
+
+Rejoignez des milliers d'entrepreneurs et d'informaticiens qui ont déjà fait le choix de Froggit pour simplifier la gestion de leur code. Ne laissez pas passer cette opportunité !
+
+**👉 Inscrivez-vous dès maintenant et débutez votre essai gratuit de 30 jours, sans avoir à fournir vos informations de carte bancaire !**
+
+Chez Froggit, nous plaçons la satisfaction de nos clients au cœur de notre mission. Notre équipe de support dédiée sera à vos côtés pendant toute la durée de votre essai. Rejoignez notre communauté florissante et découvrez ce que Froggit peut apporter à votre processus de développement.
+
+Froggit - Simplifiez-vous le code… et faites plaisir à vos techs !

src/pages/index.js

@@ -16,13 +16,16 @@ function HomepageHeader(){
         <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">
-          <a className="button button--beta button--lg" href="https://www.youtube.com/watch?v=TvWT3URosOk" target="_blank" rel="noreferrer">
-            <FaYoutube/> Voir le <br/> webinaire
-          </a>
           <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> <span className="hero-subtitle">OU</span>
+          <Link className="button button--beta button--lg" to="/essai">
+          Je découvre gratuitement<br /><div className="btn-little-txt">Sans carte bancaire.</div>
           </Link>
         </div>
+        <a className="button button--lg" href="https://www.youtube.com/watch?v=TvWT3URosOk" target="_blank" rel="noreferrer">
+          <FaYoutube/> Voir le webinaire
+        </a>
       </div>
     </header>      
   );

src/pages/tarifs.mdx

@@ -8,6 +8,7 @@ import Highlight from "@site/src/components/Highlight";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import { GiTadpole, GiFrogFoot, GiFrogPrince } from "react-icons/gi";
+import Link from "@docusaurus/Link";
 
 # Les tarifs de Froggit
 
@@ -17,6 +18,7 @@ Nos tarifs sont simples, transparents, et tout inclus en fonction du nombre d'ut
 Si vous achetez plusieurs plans (**Grenouille** ou **Étang**), avec le **même email** vous cumulerez les sièges.
 :::
 
+
 <Tabs
   className="tabs-monthly-annual"
   defaultValue="grenouille"
@@ -24,6 +26,7 @@ Si vous achetez plusieurs plans (**Grenouille** ou **Étang**), avec le **même
     {label: 'Mensuel', value: 'grenouille'},
     {label: 'Annuel -20%', value: 'annuel'},
   ]}>
+  
 
 <TabItem value="grenouille">
   <div class="row price">
@@ -279,12 +282,18 @@ Si vous achetez plusieurs plans (**Grenouille** ou **Étang**), avec le **même
 </div>
 </TabItem>
 </Tabs>
+<div class="free-trial-container">
+  <Link className="free-trial button button--primary" to="/essai">
+    Essayer Froggit gratuitement <br />
+    <small> Sans carte bancaire </small>
+  </Link>
+</div>
 
 :::tip Offre dédiée
 Vous avez mieux à faire que gérer votre forge logicielle ?  
 Alors _libérez-vous du temps_ avec notre **[Offre dédiée](/dedie)** !
 :::
 
-:::info tarifs de lancement
-Ces **tarifs de lancement** évolueront en fonction du nombre de fonctionnalités que nous ajouterons.
-:::
+<small>
+  Ces <b>tarifs de lancement</b> évolueront en fonction du nombre de fonctionnalités que nous ajouterons.
+</small>