Compare revisions

Julie Thezenas · Christophe Chaudier · Christophe Chaudier · Christophe Chaudier · Julie Thezenas · Christophe Chaudier
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+echo 'Starting commit... 🐶'
+npm run lint -- --fix
+echo 'Code indented 👍'
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,7 +13,9 @@
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids",
    "lint": "eslint .",
-    "lint-fix": "eslint . --fix"
+    "lint-fix": "eslint . --fix",
+    "prepare": "husky install",
+    "husky": "husky install"
  },
  "dependencies": {
    "@docusaurus/core": "^2.0.1",
@@ -55,6 +57,7 @@
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
+    "husky": "^8.0.1",
    "node": "^16.14.2",
    "prettier": "^2.3.2"
  }

--- a/src/components/HomepageFeatures.module.css
+++ b/src/components/HomepageFeatures.module.css
@@ -7,7 +7,11 @@
 .tabsElement {
    width: 100%;
    margin-bottom: 48px;
+}
+.title {
+  font-weight: bold;
+  padding-bottom: 40px;
 }
 .tabsElement>li {

--- a/src/components/HomepageResults.js
+++ b/src/components/HomepageResults.js
+import React from "react";
+import environment from "@site/static/img/components/HomepageResults/environment.png";
+import advance from "@site/static/img/components/HomepageResults/advance.png";
+import conversation from "@site/static/img/components/HomepageResults/conversation.png";
+import styles from "./HomepageResults.module.css";
+const ResultsList = [
+  {
+    title: "Alliez compétitivité et respect de l’environnement",
+    description: (
+      <>
+        Froggit est pensé pour ceux qui regardent vers l&apos;avenir et choisissent des solutions robustes, responsables, qui durent dans le temps.
+      </>
+    ),
+    img: environment,
+    alt: "Dessin d'un espace naturel"
+  },     
+  {
+    title: "Intégrez facilement les pratiques DevOps",  
+    description: (
+      <>
+        Répondez plus vite aux besoins de vos clients avec notre forge logicielle agile pensée par des techs pour les techs.
+      </>
+    ),
+    img: advance,
+    alt: "Dessin d'une flèche croissante dans un engrenage"
+  },
+  {
+    title: "Bénéficiez d’un service de proximité",
+    description: (
+      <>
+        Froggit c&apos;est aussi un service client en français et une équipe qui améliore régulièrement l&apos;offre en fonction de vos retours !
+      </>
+    ),
+    img: conversation,
+    alt: "Dessin de deux personne ayant une conversation"
+  },
+];
+// eslint-disable-next-line
+function Results({title, description, img, alt}) {
+  return (
+    <div className="sectionsReverse row">
+      <div className={"col col--5 " + styles.resultsCenter}>
+        <img className={styles.resultsImage} src={img} alt={alt}/>
+      </div>  
+      <div className="col col--5">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>      
+    </div>
+  );
+}
+export default function HomepageResults() {
+  return (
+    <div className="homepage_section">
+      <section className="sections container" id="results">      
+        <h2 className="promise-title">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2>
+        <div>
+          {ResultsList.map((props, idx) => (
+            <Results key={idx} {...props} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
--- a/src/components/HomepageResults.module.css
+++ b/src/components/HomepageResults.module.css
+.resultsImage {
+  width: 186px;
+  aspect-ratio: 1;
+}
+.resultsCenter {
+  display: flex;
+  justify-content: center;
+}
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -143,10 +143,18 @@ ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
+  text-align: end;
 }
 .sectionsReverse:nth-of-type(odd) {
  flex-direction: row-reverse;
+  text-align: start;
+}
+.stickers {
+  height: 275px;
+  width: 275px; 
+  max-width: 100%; 
 }
 /******* ADMONITIONS *******/
@@ -208,4 +216,5 @@ ul {
 .promise-title {
  display: flex;
  justify-content: center;
+  text-align: center;
 }
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,10 +2,12 @@ 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 CarouselLibre from "@site/src/components/CarouselLibre";
 import Link from "@docusaurus/Link";
+import HomepageResults from "@site/src/components/HomepageResults";
+import HomepagePromises from "@site/src/components/HomepagePromises";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import CarouselLibre from "@site/src/components/CarouselLibre";
 function HomepageHeader(){
  return (
@@ -36,6 +38,7 @@ export default function Home() {
        <HomepagePromises />
        <HomepageFeatures />
        <CarouselLibre/> 
+        <HomepageResults />
      </main>
    </Layout>
  );

--- a/src/pages/mentions_legales.md
+++ b/src/pages/mentions_legales.md
@@ -78,6 +78,10 @@ Le code source du site est disponible sur [ce dépôt Froggit🐸](https://lab.f
 - **Souverain :** conçues par [Becris](https://www.flaticon.com/fr/auteurs/becris) sur [Flaticon](https://www.flaticon.com/fr/icone-gratuite/rgpd_3202690).
 - **Libre :** conçues par [Freepik](https://www.freepik.com) sur [Flaticon](https://www.flaticon.com/fr/icone-gratuite/liberte_2284958).
 - **Kermit :** conçues par [stickerfolio](https://www.flaticon.com/authors/stickerfolio) sur [Flaticon](https://www.flaticon.com/stickers-pack/frog).
+- **Environement** conçue par [iconixar](https://www.flaticon.com/authors/iconixar) sur [Flaticon](https://www.flaticon.com/packs/ecology-environment-10).
+- **Advance** conçue par [iconixar](https://www.flaticon.com/authors/iconixar) sur [Flaticon](https://www.flaticon.com/packs/setup-and-settings-18)
+- **Conversation** conçue par [iconixar](https://www.flaticon.com/authors/iconixar) sur [Flaticon](https://www.flaticon.com/packs/language-learning-21)
 :::note Sources
 [Lydra dépôt git Legal version 1.0.0](https://gitlab.com/lydra/legal/-/blob/1.0.0/mentions_legales.md)

--- a/src/pages/tarifs.mdx
+++ b/src/pages/tarifs.mdx
 ---
 title: "Tarifs"
 description: "Les tarifs de Froggit"
-keywords: Lydra, SaaS, pricing, tarifs
+keywords: Lydra, SaaS, pricing, tarifs, plans, git, GitLab, Mattermost
 ---
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import Highlight from "@site/src/components/Highlight";
@@ -11,11 +11,7 @@ import { GiTadpole, GiFrogFoot, GiFrogPrince } from "react-icons/gi";
 # Les tarifs de Froggit
-:::caution Bêta en cours 🧪
+Nos tarifs sont simples, transparents, et tout inclus en fonction du nombre d'utilisateurs.
-🔜 **Les tarifs arrivent !** <a class="button button--warning" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
-:::
-Tarifs simples, transparents, et tout inclus en fonction du nombre d'utilisateurs.
 :::tip Cumuler les plans
 Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumulerez les sièges.
@@ -44,8 +40,8 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
          <h2>Têtard</h2>
          <p>Idéal pour <strong>débuter</strong> !</p>
          <p>
-            <strong>XX €HT/an</strong><br/>
+            <strong>24 €HT/an</strong><br/>
-            <small class="small_price">soit XX €HT/mois</small><br/>
+            <small class="small_price">soit 2 €HT/mois</small><br/>
            <a class="button disabled button-noclick"><GiTadpole size="20px"/> Démarrer</a>
          </p>
        </div>
@@ -77,8 +73,9 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
          <h2>Grenouille</h2>
          <p>Parfait pour les <strong>solo</strong></p>
          <p>
-            <strong>XX €HT/mois</strong><br/>
+            <strong>9,90 €HT/mois</strong><br/>
-            <a class="button button--price margin-bottom--lg" href="#url"><GiFrogFoot size="20px"/> Coder sans limites</a>
+            <small class="small_price"><br/></small>
+            <a class="button button--price margin-bottom--lg" href="https://www.lydra.eu/cmd_ly_frg_grenouille_1_m"><GiFrogFoot size="20px"/> Coder sans limites</a>
          </p>
        </div>
        <div class="card__footer">
@@ -90,7 +87,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
          </small>
          <small>
            <p>Bénéficiez de <Highlight color="var(--ifm-color-light-green)">2 mois offerts</Highlight> en choisissant l'abonnement annuel 
-            <small> ou XX € /mois (plan annuel)</small><br/></p>
+            <small> soit 8,25 €HT/mois (plan annuel)</small><br/></p>
          </small>
        </div>
      </div>
@@ -112,11 +109,11 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
          <Tabs
            groupId="etang"
            className="tabs-etang-hide">
-              <TabItem value="50">
+              <TabItem value="10">
                <p>
-                  <strong>XX €HT/an</strong><br/>
+                  à partir de <strong>891 €HT/an</strong><br/>
-                  <small class="small_price">soit XX €HT/mois/utilisateur</small><br/>
+                  <small class="small_price">soit 7,43 €HT/mois/utilisateur</small><br/>
-                  <a class="button disabled button-noclick" href="#url-10"><GiFrogPrince size="20px"/> Acheter <br/> <small>50 sièges</small></a>
+                  <a class="button disabled button-noclick" href="#url-10"><GiFrogPrince size="20px"/> Acheter <br/> <small>10 sièges</small></a>
                </p>
              </TabItem>
            </Tabs>
@@ -150,9 +147,9 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
          <h2>Têtard</h2>
          <p>Idéal pour <strong>débuter</strong> !</p>
          <p>
-            <strong>XX €HT/an</strong><br/>
+            <strong>24 €HT/an</strong><br/>
-            <small class="small_price">soit XX €HT/mois</small><br/>
+            <small class="small_price">soit 2 €HT/mois</small><br/>
-            <a class="button button--price" href="#url"><GiTadpole size="20px"/> Démarrer</a>
+            <a class="button button--price" href="https://www.lydra.eu/cmd_ly_frg_tetard_1_a"><GiTadpole size="20px"/> Démarrer</a>
          </p>
        </div>
        <div class="card__footer margin-top--lg">
@@ -182,11 +179,11 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
        <div class="card__body">
          <h2>Grenouille</h2>
          <p>Parfait pour les <strong>solo</strong></p>
-          <strong>XX €HT/mois</strong><br/>
+          <p>
-            <small class="small_price">
+            <strong>99 €HT/an</strong><br/>
-            <del>XX € /mois</del>
+            <small class="small_price">soit 8,25 €HT/mois</small>
-            </small>
+            <a class="button button--price" href="https://www.lydra.eu/cmd_ly_frg_grenouille_1_a"><GiFrogFoot size="20px"/> Coder sans limites<br/></a>
-            <a class="button button--price" href="#url"><GiFrogFoot size="20px"/> Coder sans limites<br/></a>
+          </p>
        </div>
        <div class="card__footer">
          <small>
@@ -217,23 +214,23 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
            className="tabs-etang-hide">
              <TabItem value="10">
                <p>
-                  <strong>X €HT/an</strong><br/>
+                  <strong>891 €HT/an</strong><br/>
-                  <small class="small_price">soit X €HT/mois/utilisateur</small><br/>
+                  <small class="small_price">soit 7,43 €HT/mois/utilisateur</small><br/>
-                  <a class="button button button--price" href="#url-10"><GiFrogPrince size="20px"/> Acheter <br/> <small>10 sièges</small></a>
+                  <a class="button button button--price" href="https://www.lydra.eu/cmd_ly_frg_etang_10_a"><GiFrogPrince size="20px"/> Acheter <br/> <small>10 sièges</small></a>
                </p>
              </TabItem>
              <TabItem value="50">
                <p>
-                  <strong>XX €HT/an</strong><br/>
+                  <strong>3 960 €HT/an</strong><br/>
-                  <small class="small_price">soit XX €HT/mois/utilisateur</small><br/>
+                  <small class="small_price">soit 6,60 €HT/mois/utilisateur</small><br/>
-                  <a class="button button button--price" href="#url-50"><GiFrogPrince size="20px"/> Acheter <br/> <small>50 sièges</small></a>
+                  <a class="button button button--price" href="https://www.lydra.eu/cmd_ly_frg_etang_50_a"><GiFrogPrince size="20px"/> Acheter <br/> <small>50 sièges</small></a>
                </p>
              </TabItem>
              <TabItem value="100">
                <p>
-                  <strong>XXX €HT/an</strong><br/>
+                  <strong>6 960 €HT/an</strong><br/>
-                  <small class="small_price">soit XXX €HT/mois/utilisateur</small><br/>
+                  <small class="small_price">soit 5,80 €HT/mois/utilisateur</small><br/>
-                  <a class="button button button--price" href="#url-100"><GiFrogPrince size="20px"/> Acheter <br/> <small>100 sièges</small></a>
+                  <a class="button button button--price" href="https://www.lydra.eu/cmd_ly_frg_etang_100_a"><GiFrogPrince size="20px"/> Acheter <br/> <small>100 sièges</small></a>
                </p>
              </TabItem>
            </Tabs>

--- a/static/img/components/HomepageResults/advance.png
+++ b/static/img/components/HomepageResults/advance.png
--- a/static/img/components/HomepageResults/conversation.png
+++ b/static/img/components/HomepageResults/conversation.png
--- a/static/img/components/HomepageResults/environment.png
+++ b/static/img/components/HomepageResults/environment.png
No results found