feat: improve price plan with cards

src/components/Highlight.js

+/* 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>
+  );
+}

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 {

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);
 }

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;
+}

src/css/tarifs.css

+/************* 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);
+}

src/pages/tarifs.md

----
-title: "Tarifs"
-description: "Les tarifs de Froggit"
-keywords: Lydra, SaaS, pricing, tarifs
----
-
-# Les tarifs de Froggit
-
-| Limites       | Têtard   | 🥇 Grenouille | 🥈 Étang     |
-|---------------|----------|------------|----------|----------|----------|
-|               | ![Têtard](../../static/img/pricing/hidden.png) | ![Grenouille](../../static/img/pricing/computer.png) | ![Étang](../../static/img/pricing/cauldron.png) | ![Étang](../../static/img/pricing/cauldron.png) | ![Étang](../../static/img/pricing/cauldron.png) |
-| 👥 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

src/pages/tarifs.mdx

+---
+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.
+:::