Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • froggit/www/froggit.fr
1 result
Show changes
Commits on Source (8)
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 15073 additions and 157 deletions
docusaurus.config.js
View file @ e43f08f4
...@@ -3,8 +3,8 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula"); ...@@ -3,8 +3,8 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
/** @type {import('@docusaurus/types').DocusaurusConfig} */ /** @type {import('@docusaurus/types').DocusaurusConfig} */
module.exports = { module.exports = {
title: "Simplifiez-vous le code !", title: "Simplifiez-vous le code",
tagline: "Améliorez la coopération de vos équipes autour du code source, sans gérer votre forge logicielle !", tagline: "",
url: process.env.DOCUSAURUS_URL || "https://froggit.fr", url: process.env.DOCUSAURUS_URL || "https://froggit.fr",
baseUrl: process.env.DOCUSAURUS_BASEURL || "/", baseUrl: process.env.DOCUSAURUS_BASEURL || "/",
onBrokenLinks: "throw", onBrokenLinks: "throw",
......
package-lock.json
View file @ e43f08f4
This diff is collapsed.
package.json
View file @ e43f08f4
...@@ -27,10 +27,13 @@ ...@@ -27,10 +27,13 @@
"@svgr/webpack": "^6.2.1", "@svgr/webpack": "^6.2.1",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"jquery": "^3.6.0",
"prism-react-renderer": "^1.2.1", "prism-react-renderer": "^1.2.1",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"url-loader": "^4.1.1" "url-loader": "^4.1.1"
}, },
"browserslist": { "browserslist": {
......
src/components/Carousel.js 0 → 100644
View file @ e43f08f4
/* eslint react/prop-types: 0 */
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
function CarouselElement({name, img, link}) {
if (typeof link === "undefined" && typeof name === "undefined") {
return (
<div className="box_carousel">
<div>
<img src={useBaseUrl(img)} className="carousel-img" />
</div>
</div>
);
}
else if (typeof link === "undefined") {
return (
<div className="box_carousel">
<div>
<img src={useBaseUrl(img)} className="carousel-img" />
<h6 className="title_carousel">{name}</h6>
</div>
</div>
);
}
else if (typeof name === "undefined") {
return (
<div className="box_carousel">
<a href={link} target="_blank" rel="noopener noreferrer">
<img src={useBaseUrl(img)} className="carousel-img" />
</a>
</div>
);
}
else {
return (
<div className="box_carousel">
<a href={link} target="_blank" rel="noopener noreferrer">
<img src={useBaseUrl(img)} className="carousel-img" />
<h6 className="title_carousel">{name}</h6>
</a>
</div>
);
}
}
export default function Carousel(props) {
const list = props.list;
//https://react-slick.neostack.com/docs/api/
const settings = {
dots: false,
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
speed: 4000,
autoplaySpeed: 4000,
variableWidth: true,
cssEase: "linear"
};
return (
<div>
<Slider {...settings}>
{list.map((props, idx) => (
<CarouselElement key={idx} {...props} />
))}
</Slider>
</div>
);
}
src/components/CarouselLibre.js 0 → 100644
View file @ e43f08f4
import React from "react";
import Carousel from "./Carousel";
const CarouselList = [
{
name: "Acceuil",
img: "/img/docusaurus.png",
link: "https://froggit.fr/",
},
{
img: "/img/bouclier.svg",
},
{
img: "/img/logo_froggit.svg",
link: "/communaute",
},
{
name: "hello",
img: "/img/logo_froggit.svg",
},
{
name: "ki jan'w",
img: "/img/chemistry.svg",
},
{
name: "bom dia",
img: "/img/read-smile.svg",
},
];
export default function CarouselLibre() {
return (
<Carousel list={CarouselList} />
);
}
src/components/Highlight.js 0 → 100644
View file @ e43f08f4
/* 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/components/HomepagePromises.js
View file @ e43f08f4
...@@ -4,11 +4,11 @@ import styles from "./HomepagePromises.module.css"; ...@@ -4,11 +4,11 @@ import styles from "./HomepagePromises.module.css";
const PromiseList = [ const PromiseList = [
{ {
title: "Sûr", title: "Sécurisé",
Svg: require("../../static/img/bouclier.svg").default, Svg: require("../../static/img/bouclier.svg").default,
description: ( description: (
<> <>
<p>Vos données sont en lieu sûr et sauvegardées toutes les nuits.</p> <p>Vos données sont en lieu sûr et sauvegardées à deux endroits différents toutes les nuits.</p>
</> </>
), ),
}, },
...@@ -17,7 +17,7 @@ const PromiseList = [ ...@@ -17,7 +17,7 @@ const PromiseList = [
Svg: require("../../static/img/rgpd.svg").default, Svg: require("../../static/img/rgpd.svg").default,
description: ( description: (
<> <>
<p>Nous sommes hébergés en France et conformes au RGPD.</p> <p>Dites bye-bye au <i>Cloud Act</i> et aux risques d’espionnage industriel. Avec Froggit vous êtes hébergé en France et protégé par les normes RGPD.</p>
</> </>
), ),
}, },
...@@ -26,7 +26,7 @@ const PromiseList = [ ...@@ -26,7 +26,7 @@ const PromiseList = [
Svg: require("../../static/img/liberte.svg").default, Svg: require("../../static/img/liberte.svg").default,
description: ( description: (
<> <>
<p>Notre solution s&apos;appuie sur des logiciels libres et nos conditions générales sont éthiques.</p> <p>Froggit se base sur des logiciels libres reconnus et des conditions générales d’utilisation complètement éthiques.</p>
</> </>
), ),
}, },
...@@ -49,12 +49,15 @@ function Promise({Svg, title, description}) { ...@@ -49,12 +49,15 @@ function Promise({Svg, title, description}) {
export default function HomepagePromises() { export default function HomepagePromises() {
return ( return (
<section className="section-promises"> <div>
<div className="row"> <h2 className="promise-title">Faites la différence</h2>
{PromiseList.map((props, idx) => ( <section className="section-promises">
<Promise key={idx} {...props} /> <div className="row">
))} {PromiseList.map((props, idx) => (
</div> <Promise key={idx} {...props} />
</section> ))}
</div>
</section>
</div>
); );
} }
src/css/carousel.css 0 → 100644
View file @ e43f08f4
/* CAROUSEL */
.box_carousel {
display: flex;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.carousel-img {
margin: 20px;
max-width: 110px;
/* text-align: center; */
justify-content: space-between;
}
.title_carousel {
display: flex;
justify-content: center;
}
src/css/custom.css
View file @ e43f08f4
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
@import url("footer.css"); @import url("footer.css");
@import url("dark-theme.css"); @import url("dark-theme.css");
@import url("matomo.css"); @import url("matomo.css");
@import url("tarifs.css");
@import url("carousel.css");
html, body { html, body {
...@@ -124,6 +126,10 @@ ul { ...@@ -124,6 +126,10 @@ ul {
padding-bottom: 20px; padding-bottom: 20px;
} }
.btn-little-txt {
font-size: small;
}
/***** BUTTON *****/ /***** BUTTON *****/
.button { .button {
margin: 10px; margin: 10px;
...@@ -135,15 +141,15 @@ ul { ...@@ -135,15 +141,15 @@ ul {
} }
.button--beta { .button--beta {
background-color: var(--ifm-color-success);
border-color: var(--ifm-color-success); border-color: var(--ifm-color-success);
color: var(--ifm-color-frame);
border-style: none; border-style: none;
background-color: var(--ifm-color-frame);
color: var(--ifm-color-black);
} }
.button--beta:hover { .button--beta:hover {
color: var(--ifm-color-secondary); color: var(--ifm-color-secondary);
background-color: var(--ifm-color-info); background-color: var(--ifm-color-success);
border-style: none; border-style: none;
} }
...@@ -245,3 +251,8 @@ ul { ...@@ -245,3 +251,8 @@ ul {
width: 330px; width: 330px;
} }
} }
.promise-title {
display: flex;
justify-content: center;
}
src/css/dark-theme.css
View file @ e43f08f4
...@@ -23,13 +23,13 @@ html[data-theme='dark'] { ...@@ -23,13 +23,13 @@ html[data-theme='dark'] {
html[data-theme='dark'] { html[data-theme='dark'] {
--ifm-background-color: #18191a; --ifm-background-color: #18191a;
--ifm-background-surface-color: var(--ifm-background-color); --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-color-content-secondary: var(--ifm-color-primary-light);
--ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%); --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
} }
html[data-theme='dark'] .docusaurus-highlight-code-line { 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 { html[data-theme='dark'] .clean-btn {
...@@ -99,6 +99,27 @@ html[data-theme='dark'] .menu__link { ...@@ -99,6 +99,27 @@ html[data-theme='dark'] .menu__link {
color: var(--ifm-color-warning); 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 */ /* dark footer */
html[data-theme='dark'] .footer__link-item { html[data-theme='dark'] .footer__link-item {
color: var(--ifm-color-secondary); color: var(--ifm-color-secondary);
...@@ -111,6 +132,10 @@ html[data-theme='dark'] .footer { ...@@ -111,6 +132,10 @@ html[data-theme='dark'] .footer {
--ifm-footer-title-color: var(--ifm-color-secondary); --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 { html[data-theme='dark'] .footer__copyright {
color: var(--ifm-color-secondary); color: var(--ifm-color-secondary);
} }
src/css/footer.css
View file @ e43f08f4
...@@ -46,3 +46,7 @@ a.footer__link-item:hover { ...@@ -46,3 +46,7 @@ a.footer__link-item:hover {
font-family: var(--ifm-font-family); font-family: var(--ifm-font-family);
font-weight: 600; font-weight: 600;
} }
.footer__copyright a {
text-decoration: underline;
}
src/css/tarifs.css 0 → 100644
View file @ e43f08f4
/************* 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/dummy_page.md → src/pages/dummy_page.mdx
View file @ e43f08f4
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
title: dummy title: dummy
description: "page factice" description: "page factice"
--- ---
import CarouselLibre from "@site/src/components/CarouselLibre";
# Page factice # Page factice
...@@ -12,6 +13,12 @@ Page factice penser à créer une vraie page ! ...@@ -12,6 +13,12 @@ Page factice penser à créer une vraie page !
echo "Hello World" echo "Hello World"
``` ```
## Hello mon carousel Libre !
<div>
<CarouselLibre />
</div>
:::note :::note
Some **content** with _markdown_ `syntax`. Check [this `api`](#). Some **content** with _markdown_ `syntax`. Check [this `api`](#).
......
src/pages/index.js
View file @ e43f08f4
...@@ -7,19 +7,16 @@ import HomepageFeatures from "../components/HomepageFeatures"; ...@@ -7,19 +7,16 @@ import HomepageFeatures from "../components/HomepageFeatures";
import Link from "@docusaurus/Link"; import Link from "@docusaurus/Link";
function HomepageHeader(){ function HomepageHeader(){
const { siteConfig } = useDocusaurusContext();
return ( return (
<header className={styles.heroBanner}> <header className={styles.heroBanner}>
<div className="sections container"> <div className="sections container">
<h1 className="hero__title">{siteConfig.title}</h1> <h1 className="hero__title">Simplifiez-vous le code... <br />et faites plaisir à vos techs !</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p> <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>
<Link className="button button--warning button--lg" to="https://youtu.be/gOCOai6wX_w"> <div className="button-frame">
▶️ En savoir plus <Link className="button button--beta button--lg" to="/tarifs">
</Link> Je m’abonne sans engagement<br /><div className="btn-little-txt">30 jours satisfaits ou remboursés !</div>
<Link className="button button--beta button--lg" to="http://beta.froggit.fr/"> </Link>
Rejoindre la bêta gratuite 🧪 </div>
</Link>
</div> </div>
</header> </header>
); );
......
src/pages/tarifs.md deleted 100644 → 0
View file @ 0c3c70f7
---
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 0 → 100644
View file @ e43f08f4
---
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.
:::

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service