diff --git a/src/components/Highlight.js b/src/components/Highlight.js
new file mode 100644
index 0000000000000000000000000000000000000000..fb1314454f752521587574f5cac009e128565be2
--- /dev/null
+++ b/src/components/Highlight.js
@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+
+export default function Highlight ({children, color}) {
+ return (
+ <span
+ style={{
+ backgroundColor: color,
+ borderRadius: "2px",
+ color: "#fff",
+ padding: "0.2rem",
+ }}>
+ {children}
+ </span>
+ );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 6268d4fd6881d444cb0f7c019ad990065465a572..944004540a6f38403c624828a0ab901de9f15d41 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -3,6 +3,7 @@
@import url("footer.css");
@import url("dark-theme.css");
@import url("matomo.css");
+@import url("tarifs.css");
html, body {
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
index 1b1c12cb775069a0aff67b2cec0f982babef9e5e..e2a62f3cfc947cb0c353765de091060bd367c58b 100644
--- a/src/css/dark-theme.css
+++ b/src/css/dark-theme.css
@@ -23,13 +23,13 @@ html[data-theme='dark'] {
html[data-theme='dark'] {
--ifm-background-color: #18191a;
--ifm-background-surface-color: var(--ifm-background-color);
- --ifm-hover-overlay: #ffffff0d;
+ --ifm-hover-overlay: var(--ifm-color-gray-800);
--ifm-color-content-secondary: var(--ifm-color-primary-light);
--ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
}
html[data-theme='dark'] .docusaurus-highlight-code-line {
- background-color: rgba(0, 0, 0, 0.3);
+ background-color: var(--ifm-background-color);
}
html[data-theme='dark'] .clean-btn {
@@ -99,6 +99,27 @@ html[data-theme='dark'] .menu__link {
color: var(--ifm-color-warning);
}
+/* cards prices page */
+html[data-theme='dark'] .tabs-monthly-annual .tabs__item--active{
+ background-color: var(--ifm-color-light-green);
+}
+
+html[data-theme='dark'] .headband p {
+ color: var(--ifm-color-success);
+}
+
+html[data-theme='dark'] .card_price {
+ color: var(--ifm-color-black);
+}
+
+html[data-theme='dark'] .tabs-etang .tabs__item {
+ color: var(--ifm-color-gray-900);
+}
+
+html[data-theme='dark'] .tabs-etang .tabs__item:hover {
+ background-color: var(--ifm-color-gray-200);
+}
+
/* dark footer */
html[data-theme='dark'] .footer__link-item {
color: var(--ifm-color-secondary);
@@ -111,6 +132,10 @@ html[data-theme='dark'] .footer {
--ifm-footer-title-color: var(--ifm-color-secondary);
}
+html[data-theme='dark'] .footer a:hover {
+ color: var(--ifm-color-frame);
+}
+
html[data-theme='dark'] .footer__copyright {
color: var(--ifm-color-secondary);
}
diff --git a/src/css/footer.css b/src/css/footer.css
index e0da685b3b614a95addd9cfe57acf3e40814235c..539ce63e14c90bd6f11427d0c7c43549307e9e69 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -46,3 +46,7 @@ a.footer__link-item:hover {
font-family: var(--ifm-font-family);
font-weight: 600;
}
+
+.footer__copyright a {
+ text-decoration: underline;
+}
diff --git a/src/css/tarifs.css b/src/css/tarifs.css
new file mode 100644
index 0000000000000000000000000000000000000000..d236717352b89d69cfac682be25755b78cb2421a
--- /dev/null
+++ b/src/css/tarifs.css
@@ -0,0 +1,123 @@
+/************* TARIFS *************/
+/******* price tab ********/
+.headband {
+ background-color: var(--ifm-color-frame);
+ border-radius: var(--ifm-button-border-radius);
+ padding-bottom: 2px;
+ padding-top: 10px;
+ margin-bottom: -30px;
+ width: 170px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.headband p {
+ font-weight: 600;
+ color: var(--ifm-color-success);
+}
+
+.price {
+ text-align: center;
+}
+
+.card_price {
+ background-color: var(--ifm-color-secondary-lightest);
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+.tabs-etang .tabs__item {
+ line-height: 16px;
+ margin: 4px;
+ padding: 0.5em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ width: 100%;
+ text-align: center;
+}
+
+.tabs-etang .tabs__item--active {
+ background-color: var(--ifm-color-light-green);
+ border: 0;
+ border-radius: var(--ifm-global-radius);
+ color: var(--ifm-color-white);
+}
+
+.tabs-etang-hide {
+ display: none;
+}
+
+/******** Monthly & annual buttons********/
+.tabs-monthly-annual {
+ margin-top: 30px;
+ margin-bottom: 30px;
+ width: 21rem;
+ height: 3.7rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.tabs-monthly-annual .tabs__item {
+ line-height: 50px;
+ margin: 10px;
+ padding: 0.2em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ width: 100%;
+ text-align: center;
+ background-color: var(--ifm-button-selection);
+ color: var(--ifm-color-light-green);
+ border: 2px solid var(--ifm-color-light-green);
+}
+
+.tabs-monthly-annual .tabs__item:hover {
+ transition: 0.4s;
+ background-color: var(--ifm-color-light-green);
+ color: var(--ifm-color-white);
+ border: 2px solid var(--ifm-color-light-green);
+}
+
+.tabs-monthly-annual .tabs__item--active {
+ border: 0;
+ border-radius: var(--ifm-global-radius);
+ color: var(--ifm-color-white);
+ background-color: var(--ifm-color-light-green);
+}
+
+/********Buttons in cards ********/
+.button-noclick:not(.button--outline) {
+ color: var(--ifm-color-secondary-darkest);
+ border: 2px solid var(--ifm-color-secondary-darkest);
+}
+
+.button--price:not(.button--outline) {
+ background-color: var(--ifm-button-selection);
+ color: var(--ifm-color-light-green);
+ border: 2px solid var(--ifm-color-light-green);
+}
+
+.button--price:not(.button--outline):hover {
+ background-color: var(--ifm-color-light-green);
+ color: var(--ifm-color-white);
+ border: 2px solid var(--ifm-color-light-green);
+}
+
+/******** Text in cards ********/
+.small_price {
+ font-size: 12px;
+}
+
+/******** Disabled cards ********/
+.disable_col p, .disable_col h2 {
+ color: var(--ifm-color-secondary-darkest);
+}
+
+.disable_col, .card-demo {
+ margin-top: 50px;
+ box-shadow: var(--ifm-global-shadow-tl);
+ border-radius: var(--ifm-card-border-radius);
+}
diff --git a/src/pages/tarifs.md b/src/pages/tarifs.md
deleted file mode 100644
index a210d05c796fab92a0fb073da184eda06f6317c9..0000000000000000000000000000000000000000
--- a/src/pages/tarifs.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: "Tarifs"
-description: "Les tarifs de Froggit"
-keywords: Lydra, SaaS, pricing, tarifs
----
-
-# Les tarifs de Froggit
-
-| Limites | Têtard | 🥇 Grenouille | 🥈 Étang |
-|---------------|----------|------------|----------|----------|----------|
-| |  |  |  |  |  |
-| 👥 Utilisateurs | 1ï¸âƒ£ | 1ï¸âƒ£ | 1ï¸âƒ£0ï¸âƒ£ | 5ï¸âƒ£0ï¸âƒ£ | 1ï¸âƒ£0ï¸âƒ£0ï¸âƒ£ |
-| 🢠Groupes | ⌠Aucun | Illimité | Illimité | Illimité | Illimité |
-| 📥 Projets | 24 | Illimité | Illimité | Illimité | Illimité |
-| 🤖 CI | Illimité | Illimité | Illimité | Illimité | Illimité |
-| 💰 **Prix** | 🔜 | 🔜 | 🔜 | 🔜 | 🔜 |
-
-🔜 Les prix arrivent !
-
-# Les tarifs de Froggit
-
-:::tip Bêta en cours 🧪
-[En attendant rejoignez la bêta !](http://beta.froggit.fr/)
-:::tip
diff --git a/src/pages/tarifs.mdx b/src/pages/tarifs.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..312923623fbcb3129b8063b64f7f6306af895f1a
--- /dev/null
+++ b/src/pages/tarifs.mdx
@@ -0,0 +1,270 @@
+---
+title: "Tarifs"
+description: "Les tarifs de Froggit"
+keywords: Lydra, SaaS, pricing, tarifs
+---
+import useBaseUrl from "@docusaurus/useBaseUrl";
+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";
+
+# Les tarifs de Froggit
+
+:::caution Bêta en cours 🧪
+🔜 **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.
+:::
+
+<Tabs
+ className="tabs-monthly-annual"
+ defaultValue="grenouille"
+ values={[
+ {label: 'Mensuel', value: 'grenouille'},
+ {label: 'Annuel -20%', value: 'annuel'},
+ ]}>
+
+<TabItem value="grenouille">
+ <div class="row price">
+ <div class="col">
+ <div class="disable_col">
+ <div class="card card_price">
+ <div class="card__image margin-top--md">
+ <img
+ src={useBaseUrl("img/pricing/hidden.png")}
+ alt="Image alt text"
+ title="Plan Têtard" />
+ </div>
+ <div class="card__body">
+ <h2>Têtard</h2>
+ <p>Idéal pour <strong>débuter</strong> !</p>
+ <p>
+ <strong>XX €HT/an</strong><br/>
+ <small class="small_price">soit XX €HT/mois</small><br/>
+ <a class="button disabled button-noclick"><GiTadpole size="20px"/> Démarrer</a>
+ </p>
+ </div>
+ <div class="card__footer margin-top--lg">
+ <small>
+ <p><Highlight color="var(--ifm-color-light-green)">1</Highlight> utilisateur</p>
+ <p><Highlight color="var(--ifm-color-danger)">aucun</Highlight> groupe</p>
+ <p><Highlight color="var(--ifm-color-warning)">24</Highlight> projets</p>
+ <p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
+ </small>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="headband">
+ <p>Le plus populaire</p>
+ </div>
+ <div class="card-test">
+ <div class="card shadow--tl card_price card_price_main">
+ <div class="card__image margin-top--md">
+ <img
+ src={useBaseUrl("img/pricing/computer.png")}
+ alt="Image alt text"
+ title="Plan Grenouille" />
+ </div>
+ <div class="card__body">
+ <h2>Grenouille</h2>
+ <p>Parfait pour les <strong>solo</strong></p>
+ <p>
+ <strong>XX €HT/mois</strong><br/>
+ <a class="button button--price margin-bottom--lg" href="#url"><GiFrogFoot size="20px"/> Coder sans limites</a>
+ </p>
+ </div>
+ <div class="card__footer">
+ <small>
+ <p><Highlight color="var(--ifm-color-light-green)">1</Highlight> utilisateur</p>
+ <p>Groupes <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
+ <p>Projets <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
+ <p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
+ </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>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="disable_col">
+ <div class="card card_price">
+ <div class="card__image margin-top--md">
+ <img
+ src={useBaseUrl("img/pricing/cauldron.png")}
+ alt="Image alt text"
+ title="Plan Étang" />
+ </div>
+ <div class="card__body">
+ <h2>Étang</h2>
+ <p>Adapté aux <strong>entreprises</strong></p>
+ <Tabs
+ groupId="etang"
+ className="tabs-etang-hide">
+ <TabItem value="50">
+ <p>
+ <strong>XX €HT/an</strong><br/>
+ <small class="small_price">soit XX €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>
+ </p>
+ </TabItem>
+ </Tabs>
+ </div>
+ <div class="card__footer">
+ <small>
+ <p><Highlight color="var(--ifm-color-light-green)">10, 50 ou 100</Highlight> utilisateurs</p>
+ <p>Groupes <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
+ <p>Projets <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
+ <p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
+ </small>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+</TabItem>
+
+<TabItem value="annuel">
+ <div class="row price">
+ <div class="col">
+ <div class="card-demo">
+ <div class="card card_price">
+ <div class="card__image margin-top--md">
+ <img
+ src={useBaseUrl("img/pricing/hidden.png")}
+ alt="Image alt text"
+ title="Plan Têtard" />
+ </div>
+ <div class="card__body">
+ <h2>Têtard</h2>
+ <p>Idéal pour <strong>débuter</strong> !</p>
+ <p>
+ <strong>XX €HT/an</strong><br/>
+ <small class="small_price">soit XX €HT/mois</small><br/>
+ <a class="button button--price" href="#url"><GiTadpole size="20px"/> Démarrer</a>
+ </p>
+ </div>
+ <div class="card__footer margin-top--lg">
+ <small>
+ <p><Highlight color="var(--ifm-color-light-green)">1</Highlight> utilisateur</p>
+ <p><Highlight color="var(--ifm-color-danger)">aucun</Highlight> groupe</p>
+ <p><Highlight color="var(--ifm-color-warning)">24</Highlight> projets</p>
+ <p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
+ </small>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="headband">
+ <p>Le plus populaire</p>
+ </div>
+ <div class="card-test">
+ <div class="card shadow--tl card_price card_price_main">
+ <div class="card__image margin-top--md">
+ <img
+ src={useBaseUrl("img/pricing/computer.png")}
+ alt="Image alt text"
+ title="Plan Grenouille" />
+ </div>
+ <div class="card__body">
+ <h2>Grenouille</h2>
+ <p>Parfait pour les <strong>solo</strong></p>
+ <strong>XX €HT/mois</strong><br/>
+ <small class="small_price">
+ <del>XX € /mois</del>
+ </small>
+ <a class="button button--price" href="#url"><GiFrogFoot size="20px"/> Coder sans limites<br/></a>
+ </div>
+ <div class="card__footer">
+ <small>
+ <p><Highlight color="var(--ifm-color-light-green)">1</Highlight> utilisateur</p>
+ <p>Groupes <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
+ <p>Projets <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
+ <p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
+ </small>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card-demo">
+ <div class="card card_price">
+ <div class="card__image margin-top--md">
+ <img
+ src={useBaseUrl("img/pricing/cauldron.png")}
+ alt="Image alt text"
+ title="Plan Étang" />
+ </div>
+ <div class="card__body">
+ <h2>Étang</h2>
+ <p>Adapté aux <strong>entreprises</strong></p>
+ <Tabs
+ groupId="etang"
+ className="tabs-etang-hide">
+ <TabItem value="10">
+ <p>
+ <strong>X €HT/an</strong><br/>
+ <small class="small_price">soit X €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>
+ </p>
+ </TabItem>
+ <TabItem value="50">
+ <p>
+ <strong>XX €HT/an</strong><br/>
+ <small class="small_price">soit XX €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>
+ </p>
+ </TabItem>
+ <TabItem value="100">
+ <p>
+ <strong>XXX €HT/an</strong><br/>
+ <small class="small_price">soit XXX €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>
+ </p>
+ </TabItem>
+ </Tabs>
+ </div>
+ <div class="card__footer">
+ <small>
+ <Tabs
+ groupId="etang"
+ className="tabs-etang"
+ defaultValue="10"
+ values={[
+ {label: '10', value: '10'},
+ {label: '50', value: '50'},
+ {label: '100', value: '100'},
+ ]}>
+ <TabItem value="10"><p><Highlight color="var(--ifm-color-light-green)">10</Highlight> utilisateurs</p></TabItem>
+ <TabItem value="50"><p><Highlight color="var(--ifm-color-light-green)">50</Highlight> utilisateurs</p></TabItem>
+ <TabItem value="100"><p><Highlight color="var(--ifm-color-light-green)">100</Highlight> utilisateurs</p></TabItem>
+ </Tabs>
+ <p>Groupes <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
+ <p>Projets <Highlight color="var(--ifm-color-light-green)">illimités</Highlight></p>
+ <p>Pipeline CI <Highlight color="var(--ifm-color-light-green)">illimité</Highlight></p>
+ </small>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+</TabItem>
+</Tabs>
+
+:::info tarifs de lancement
+Ces **tarifs de lancement** évolueront en fonction du nombre de fonctionnalités que nous ajouterons.
+:::